@dset/ui

DSET UI primitives — Layer 2 of the platform (tokens → ui → business → dashboard → admin → apps). Token-styled, accessible, composable React components with zero business logic and no domain vocabulary. The i3MS Admin Dashboard is the first validated consumer.

Install / consume

import '@dset/tokens/css'; // once, at the app root — provides the --dset-* custom properties
import { Button } from '@dset/ui';

When consuming the built package (rather than source in the monorepo), also import the stylesheet:

import '@dset/ui/styles.css';

Theming is automatic: components read semantic tokens, so wrapping a subtree in <div data-theme="i3ms"> repaints them to the i3MS palette with no prop changes.

What lives here (and what doesn't)

• Here (Layer 2): presentational primitives — Button, Badge, Alert, Card, Progress, Skeleton, EmptyState, ErrorBoundary, Modal, Tabs. Variants via a variant/size prop pair; composition via children/slots.
• Not here: anything that knows about a domain. A status→variant map (e.g. i3MS pass status), a KPI card, a data table, a page header — those are Layer 3 (@dset/business) or stay in the product. Badge exposes semantic variants; the consumer maps its domain values onto them.

Rules (enforced)

• Styling: CSS Modules + --dset-* tokens only. The stylelint token gate (pnpm lint:styles) rejects raw hex/spacing/radius/shadow — see ADR-0003.
• Layer boundaries: @dset/ui may import @dset/tokens only (ESLint layer('ui')).
• Accessibility: WCAG 2.1 AA; every component has an axe assertion in its test.

Component anatomy (ADR-0003)

src/components/<Name>/
  <Name>.tsx          # implementation
  <Name>.module.css   # scoped, token-only styles
  <Name>.stories.tsx  # Storybook (Default · Variants · Disabled · Loading · Edge cases)
  <Name>.test.tsx     # Vitest + RTL + axe
  index.ts            # public surface

Cross-component stories (e.g. the i3MS pixel-parity board) live in stories/.