# dotkit

> dotkit is a zero-runtime CSS framework where every UI element is drawn as a collection of dots.
> One CSS file is the single source of truth; `dotkit/react` is a thin, stateless React binding (Server Component safe).
> Distributed via GitHub only (not on npm). Docs: https://daisuke-awaji.github.io/dotkit/

## Install
- Tarball: `npm i https://github.com/daisuke-awaji/dotkit/releases/download/v0.4.0/dotkit-0.4.0.tgz`
- Git semver: `npm i "github:daisuke-awaji/dotkit#semver:^0.4"`
- CDN: `https://cdn.jsdelivr.net/gh/daisuke-awaji/dotkit@v0.4.0/dist/dotkit.css` or `https://daisuke-awaji.github.io/dotkit/dotkit.css`
- Imports: `import "dotkit/css"` once; components from `dotkit/react`.

## Core variables
- `--dk-size` dot diameter (default 2px, transitionable), `--dk-gap` center distance (default 6px, transitionable), `--dk-color` dot color (currentColor)
- `--dk-value` 0..1 for meter/bar, `--dk-icon-step` icon dot step (icon size = step*7), `--dk-tone` halftone gradient (black = biggest dot)
- Theme tokens: `--dk-ink`, `--dk-paper`, `--dk-mute`, `--dk-subtle`, `--dk-radius`, `--dk-font-mono`; status colors `--dk-ok`, `--dk-warn`, `--dk-danger`, `--dk-info`. Dark theme: add `.dk-theme-dark` to any ancestor (a theme class also paints its own color/background, so it can be scoped).
- Component knobs: `--dk-control` (checkbox/radio/switch height, 18px), `--dk-cell` / `--dk-rows` (heatmap cell pitch 12px / cells per column 7; uptime height in dots 5), `--dk-tone-filter` (image halftone pre-filter).
- Value convention: continuous values -> `style="--dk-value: 0..1"`; discrete states -> `data-state="ok|warn|down|none"`.
- All rules live in `@layer dotkit.base, dotkit.components, dotkit.utilities`; unlayered user CSS always wins (no !important needed).

## Classes
- Primitives: `.dk-dots` (dot fill), density `.dk-sparse|.dk-normal|.dk-dense`, shape `.dk-square|.dk-ring`, fade `.dk-fade-r|-l|-t|-b|-radial`
- `.dk-border` dotted outline (inherits border-radius)
- `.dk-halftone` (+ `--to-bottom|--to-left|--radial|--invert`) decorative; never put content inside
- `.dk-text` fills glyphs with dots (large text only)
- `.dk-icon .dk-icon--{name}` 7x7 icons (+ `.dk-icon--square`); color = currentColor
- `.dk-loader` with `<i>` children (max 8)
- `.dk-btn` + `.dk-btn--solid|--outline|--ghost` + `.dk-btn--sm|--lg`
- `.dk-badge` (+ `--solid`), `.dk-divider` (on <hr>), `.dk-field` wrapper + `.dk-input`
- `.dk-meter` (style `--dk-value`), `.dk-chart` > `.dk-bar` (style `--dk-value`), `.dk-card`
- Forms (v0.2): native inputs with `.dk-check` (checkbox, supports :indeterminate), `.dk-radio`, `.dk-switch` (checkbox + role="switch"); wrap with `<label class="dk-choice">` for label layout
- `.dk-halftone-img` > img|picture|video|canvas — renders the image as halftone dots (+ `--invert`); put alt on the img
- `.dk-heatmap` > `<i style="--dk-value:..">` one dot per cell, column-major (+ `--tone` | `--size`, `.dk-square`, `.dk-ring`)
- `.dk-uptime` > `<i data-state="ok|warn|down|none">` one dot column per period (height: ok 5 / warn 3 / down 1 dots)
- `.dk-leaders` dot leaders: each child row = first child … last child (e.g. `<li><span>Item</span><span>¥480</span></li>`); for links use `<li><a class="dk-leader">…</a></li>`
- `.dk-typing` (+ `--bubble`) with 3 `<i>` children, role="status"
- v0.3: `.dk-digits` > `.dk-glyph.dk-glyph--{0-9|colon|dot|comma|minus|plus|percent|slash|space}` 5x7 digits (+ `--square`, `--grid` LED look; size `--dk-icon-step`)
- `.dk-spark` > `<i style="--dk-value:..">` dot sparkline (+ `--area`, `.dk-square`); `.dk-pictogram` > `.dk-icon` each with `--dk-value` 0..1 fill
- `ol.dk-steps` > li; current gets `aria-current="step"` (earlier = done; or `data-state="done"`), `<small>` for descriptions, `.dk-steps--vertical`
- `.dk-skeleton` (+ `--text`, `--circle`; aria-hidden, put aria-busy on the region); `.dk-status[data-state=ok|warn|down|info|idle]` text inside (+ `--pulse`)
- `.dk-march` on any dotted outline (.dk-border/.dk-card/.dk-field/.dk-btn--outline): dots travel clockwise
- `.dk-identicon` > 25 `<i>` (`data-on` = filled); generate with `identicon(seed)` from dotkit/react
- Theme presets: `.dk-theme-gameboy|amber|newsprint|riso|blueprint` (scopeable, like `.dk-theme-dark`)
- v0.4: `.dk-ring-meter` (style `--dk-value`, `--dk-count` = number of `<i>` children up to 60, `--dk-diameter`; other children = centered label)
- `.dk-range` wrapper (style `--dk-value` 0..1, update it on input) > `input[type=range]`
- `.dk-tabs` (role=tablist) > buttons with `aria-selected` (or links with `aria-current="page"`); `.dk-pager` > buttons, current has `aria-current="true"`
- `.dk-alert[data-state=info|ok|warn|danger]` (+ `.dk-alert__title`); `dialog.dk-dialog` (+ `.dk-dialog__actions`), open with showModal()
- `.dk-text-halftone` (+ `--to-right|--radial`, `--dk-tone`) large display text only, B/W
- `.dk-duotone` (`--dk-color`, `--dk-color-2`; + `--ramp` with `--dk-angle`); `.dk-pattern` + `--checker|--stripes|--grid|--diagonal|--cross|--stipple`

## React (dotkit/react)
- `<Dots density shape size gap color fade as>`; `<DotBorder …>`; `<DotText …>`; `<Halftone direction gap tone invert>`
- `<DotIcon name step square label>` (name: IconName, see `iconNames`)
- `<Button variant="solid|outline|ghost" size="sm|md|lg" shape>`; `buttonClassName({variant,size,shape})` for links
- `<Input leading trailing fieldClassName …inputProps>`; `<Badge variant>`; `<Divider gap size shape>`
- `<Meter value={0..1} label size gap shape>`; `<BarChart data={[{label,value}]} max height label size gap shape>`
- `<Card color shape as>`; `<Loader count size label>`
- v0.2: `<Checkbox|Radio|Switch controlSize labelClassName …inputProps>{label}</…>` (ref -> input); `<HalftoneImage src alt gap toneFilter invert imgProps>` (or children);
  `<Heatmap data={number[] | {value,label}[]} max rows cell color encode="both|tone|size" shape label>`; `<UptimeBar data={("ok"|"warn"|"down"|"none" | {state,label})[]} rows size gap shape label>`;
  `<DotLeaders as color size gap><Leader label value href as /></DotLeaders>`; `<Typing bubble size label>`
- v0.3: `<DotDigits value step square grid label>`; `<Sparkline data min max height size color area shape label>`; `<Pictogram icon value total step color label>`;
  `<Steps items={(node | {label,description})[]} current vertical>`; `<StatusDot state pulse>text</StatusDot>`; `<Skeleton lines circle width height>`;
  `<Identicon value cell color label>` + pure `identicon(seed) -> {cells: boolean[25], hue}`; `march` prop on `<DotBorder>` / `<Card>`; `glyphChars`
- v0.4: `<RingMeter value count diameter size color shape label>{center}</RingMeter>`; `<Range value min max step dotSize gap wrapperClassName>` (controlled; style -> wrapper);
  `<TabList><Tab selected onClick /></TabList>` (state is yours); `<PaginationDots count current onSelect itemLabel size>`; `<Alert state title icon>`; `<Dialog ref>` (ref.current.showModal());
  `<HalftoneText as direction gap tone>`; `<Pattern kind density shape size gap color as>`; `<Duotone color color2 ramp angle …>`
- Templates (complete pages): https://daisuke-awaji.github.io/dotkit/#/templates
- Helpers: `cx`, `dotVars({size,gap,color,value,step,tone}, style)`, `withVars({"--dk-x": v}, style)`, `px(n)`, `buttonClassName`, `iconNames`
- Number values for size/gap/step are px.

## Icons (dotkit/icons.json, 7x7; digits in dotkit/glyphs.json, 5x7)
arrow-right, arrow-left, arrow-up, arrow-down, chevron-right, chevron-left, chevron-up, chevron-down, check, close, plus, minus, search, menu, more, more-vertical, grid, list, filter, home, user, mail, chat, bell, calendar, clock, heart, star, bookmark, flag, info, help, alert, lock, unlock, eye, settings, edit, trash, copy, link, download, upload, refresh, send, external, folder, file, image, camera, mic, volume, play, pause, stop, sun, moon, cloud, bolt, globe, location, cart, github