# Miltinson Design System

> Miltinson Design System — tokens, React 19 components, and AI patterns for Miltinson Technologies products. Ink-led palette with one amber accent, sharp radii, hairline borders, WCAG AA by default. Packages: @elirobinson/tokens, @elirobinson/react, @elirobinson/ai-patterns (GitHub Packages registry).

## Install

GitHub Packages registry — .npmrc with @elirobinson:registry=https://npm.pkg.github.com
and a PAT with read:packages. The token must go in the user-level npmrc, not the
project's — pnpm 10 ignores registry credentials in a project .npmrc. Then:
  pnpm config set "//npm.pkg.github.com/:_authToken" <pat>
  pnpm add @elirobinson/tokens @elirobinson/react

There are no barrel files. Every import names a subpath:
  import '@elirobinson/tokens/tokens.css';
  import '@elirobinson/react/styles.css';
  import { Button } from '@elirobinson/react/components/atoms/Button';
  import { useRovingFocus } from '@elirobinson/react/hooks/useRovingFocus';
A bare import from '@elirobinson/react' does not resolve.

## Machine-readable docs

- /llms-full.txt — the full corpus: tokens, constraints, every component with its prop table, patterns
- /r/<slug>.json — one component record (e.g. /r/button.json)

## Components

- Avatar (atoms) — Image avatar with initials fallback, in sm/md/lg sizes. — import '@elirobinson/react/components/atoms/Avatar'
- Badge (atoms) — Small status label — default, signal, anchor, solid, and outline variants. — import '@elirobinson/react/components/atoms/Badge'
- Button (atoms) — The primary action control — primary, accent, secondary, and ghost variants in three sizes. — import '@elirobinson/react/components/atoms/Button'
- Checkbox (atoms) — Labelled checkbox with a full-height 44px click row. — import '@elirobinson/react/components/atoms/Checkbox'
- Eyebrow (atoms) — Uppercase mono section label — marketing typography. — import '@elirobinson/react/components/atoms/Eyebrow'
- Input (atoms) — Batteries-included labelled text input with hint and error wiring. — import '@elirobinson/react/components/atoms/Input'
- Kbd (atoms) — Styled kbd element for keyboard-shortcut hints. — import '@elirobinson/react/components/atoms/Kbd'
- Label (atoms) — Standalone form label for controls that manage their own wiring. — import '@elirobinson/react/components/atoms/Label'
- Progress (atoms) — Determinate progress bar with an accessible value readout. — import '@elirobinson/react/components/atoms/Progress'
- RadioGroup (atoms) — Context-based radio group; the group owns name, checked state, and change handling. — import '@elirobinson/react/components/atoms/RadioGroup'
- Separator (atoms) — Horizontal or vertical hairline divider. — import '@elirobinson/react/components/atoms/Separator'
- Skeleton (atoms) — Loading placeholder block that respects reduced motion. — import '@elirobinson/react/components/atoms/Skeleton'
- Slider (atoms) — Labelled native range input. — import '@elirobinson/react/components/atoms/Slider'
- Spinner (atoms) — Status-role loading indicator in three sizes. — import '@elirobinson/react/components/atoms/Spinner'
- Switch (atoms) — Switch-role toggle with a labelled click target. — import '@elirobinson/react/components/atoms/Switch'
- Textarea (atoms) — Labelled multiline text field with hint and error wiring. — import '@elirobinson/react/components/atoms/Textarea'
- Alert (molecules) — Status callout for success, warning, danger, and info messages. — import '@elirobinson/react/components/molecules/Alert'
- Breadcrumb (molecules) — Page-hierarchy trail with a current-page marker. — import '@elirobinson/react/components/molecules/Breadcrumb'
- Card (molecules) — Bordered content surface with header, title, description, content, and footer subcomponents. — import '@elirobinson/react/components/molecules/Card'
- Chip (molecules) — Compact tag with an optional dense remove button. — import '@elirobinson/react/components/molecules/Chip'
- EmptyState (molecules) — Placeholder for empty data — title, description, icon, and action slot. — import '@elirobinson/react/components/molecules/EmptyState'
- FormField (molecules) — Label, hint, and error wrapper for controls that don't wire their own accessibility. — import '@elirobinson/react/components/molecules/FormField'
- Pagination (molecules) — Page-button list with aria-current marking and 44px targets. — import '@elirobinson/react/components/molecules/Pagination'
- Rating (molecules) — Star rating — read-only by default, interactive when given a change handler. — import '@elirobinson/react/components/molecules/Rating'
- RuleLink (molecules) — Ink-underline arrow link for marketing pages. — import '@elirobinson/react/components/molecules/RuleLink'
- SearchField (molecules) — Search input with a built-in dense clear button. — import '@elirobinson/react/components/molecules/SearchField'
- SegmentedControl (molecules) — Radio-style option group with arrow-key navigation and 44px targets. — import '@elirobinson/react/components/molecules/SegmentedControl'
- Stepper (molecules) — Ordered-list progress indicator for multi-step flows. — import '@elirobinson/react/components/molecules/Stepper'
- Accordion (organisms) — Expandable sections with configurable heading levels. — import '@elirobinson/react/components/organisms/Accordion'
- Combobox (organisms) — Filterable single-select combobox with a virtualized listbox popup. — import '@elirobinson/react/components/organisms/Combobox'
- CommandPalette (organisms) — Dialog-based command list with search filtering and keyboard-shortcut hints. — import '@elirobinson/react/components/organisms/CommandPalette'
- DatePicker (organisms) — Popover date grid using the ARIA grid pattern. — import '@elirobinson/react/components/organisms/DatePicker'
- Dialog (organisms) — Modal dialog built on the native dialog element. — import '@elirobinson/react/components/organisms/Dialog'
- DropdownMenu (organisms) — Keyboard-navigable action menu anchored to a trigger. — import '@elirobinson/react/components/organisms/DropdownMenu'
- NavigationMenu (organisms) — Always-rendered nested link list with current-page marking. — import '@elirobinson/react/components/organisms/NavigationMenu'
- Popover (organisms) — Anchored floating panel with outside-click and Escape dismissal. — import '@elirobinson/react/components/organisms/Popover'
- Select (organisms) — Native select with label, hint, and error wiring. — import '@elirobinson/react/components/organisms/Select'
- Sheet (organisms) — Edge drawer built on the native dialog element. — import '@elirobinson/react/components/organisms/Sheet'
- Table (organisms) — Paginated data table backed by `@tanstack/react-table`'s row models.

For large row counts, use `VirtualTable` instead — windowing and pagination
are two strategies for the same problem, so neither component combines them. — import '@elirobinson/react/components/organisms/Table'
- Tabs (organisms) — Tab set with roving focus and an ink underline active state. — import '@elirobinson/react/components/organisms/Tabs'
- Toast (organisms) — Aria-live notification system — Toaster region plus a useToast dispatcher. — import '@elirobinson/react/components/organisms/Toast'
- Tooltip (organisms) — Hover- and focus-triggered tooltip anchored to its trigger. — import '@elirobinson/react/components/organisms/Tooltip'
- VirtualList (organisms) — Windowed list that only renders the rows currently within (or near) its
viewport, backed by `@tanstack/react-virtual`. Intended to be composed by
`Table` (opt-in `virtualize` prop) and `Combobox` (long option lists) —
see the props above for what those consumers need: `height` (container
height), `estimateSize` (row height estimate), `overscan`, and
`renderItem` (render an arbitrary item by index).

The forwarded ref resolves to a {@link VirtualListHandle}, not the scroll
container element. — import '@elirobinson/react/components/organisms/VirtualList'
- VirtualTable (organisms) — Data table that windows its rows instead of paginating them, for large row
counts. Same column model, sorting, and filtering as `Table`; use that one
when pagination is the better fit. — import '@elirobinson/react/components/organisms/VirtualTable'

## Hooks

- useActiveDescendant — The `aria-activedescendant` half of the WAI-ARIA combobox/listbox pattern:. — import '@elirobinson/react/hooks/useActiveDescendant'
- useAnchoredPosition — Fixed-position layout for a floating panel relative to its trigger, above or below, kept inside the viewport. — import '@elirobinson/react/hooks/useAnchoredPosition'
- useClickOutside — Calls back when a pointer-down lands outside the given refs — the dismissal half of every overlay. — import '@elirobinson/react/hooks/useClickOutside'
- useEscapeKey — Calls back on Escape keydown while enabled — shared dismissal behavior for overlays. — import '@elirobinson/react/hooks/useEscapeKey'
- useHasMounted — Reports `false` on the server and during the first client render, then `true`. — import '@elirobinson/react/hooks/useHasMounted'
- useRovingFocus — Arrow/Home/End traversal for a composite widget that exposes a single tab. — import '@elirobinson/react/hooks/useRovingFocus'