@awarebydefault/display-case 1.0.0

package/src/ui/design-system/components/controls/Button.case.tsx

@@ -0,0 +1,52 @@
+import { defineCases, tweak } from '@awarebydefault/display-case'
+import { Button } from './Button'
+
+export default defineCases(
+  'Button',
+  {
+    Playground: {
+      tweaks: {
+        label: tweak.text('Button'),
+        variant: tweak.choice(
+          ['ghost', 'primary', 'accent', 'subtle'],
+          'ghost',
+        ),
+        size: tweak.choice(['sm', 'md', 'lg'], 'md'),
+        pressed: tweak.boolean(false),
+        disabled: tweak.boolean(false),
+      },
+      render: (t) => (
+        <Button
+          variant={t.variant as 'ghost' | 'primary' | 'accent' | 'subtle'}
+          size={t.size as 'sm' | 'md' | 'lg'}
+          aria-pressed={t.pressed}
+          disabled={t.disabled}>
+          {t.label}
+        </Button>
+      ),
+    },
+    Variants: () => (
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+        <Button>Ghost</Button>
+        <Button variant="primary">Primary</Button>
+        <Button variant="accent">Accent</Button>
+        <Button variant="subtle">Subtle</Button>
+      </div>
+    ),
+    Sizes: () => (
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <Button size="sm">Small</Button>
+        <Button size="md">Medium</Button>
+        <Button size="lg">Large</Button>
+      </div>
+    ),
+    Toggle: () => (
+      <div style={{ display: 'flex', gap: 8 }}>
+        <Button aria-pressed={false}>Off</Button>
+        <Button aria-pressed>On</Button>
+      </div>
+    ),
+    Disabled: () => <Button disabled>Disabled</Button>,
+  },
+  { level: 'atom' },
+)

package/src/ui/design-system/components/controls/Button.css

@@ -0,0 +1,89 @@
+.dcui-btn {
+  --_bg: var(--dc-surface);
+  --_fg: var(--dc-fg);
+  --_bd: var(--dc-border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--dc-space-2);
+  font-family: var(--dc-font-sans);
+  font-size: var(--dc-text-base);
+  font-weight: var(--dc-weight-medium);
+  line-height: 1;
+  color: var(--_fg);
+  background: var(--_bg);
+  border: 1px solid var(--_bd);
+  border-radius: var(--dc-radius-sm);
+  padding: 0 var(--dc-space-6);
+  height: 30px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background var(--dc-transition-fast),
+    border-color var(--dc-transition-fast),
+    color var(--dc-transition-fast),
+    transform var(--dc-transition-fast);
+}
+.dcui-btn:hover {
+  background: var(--dc-hover);
+}
+.dcui-btn:active {
+  transform: translateY(0.5px);
+}
+.dcui-btn:focus-visible {
+  outline: 2px solid var(--dc-focus-ring);
+  outline-offset: 1px;
+}
+.dcui-btn[data-size="sm"] {
+  height: 26px;
+  font-size: var(--dc-text-sm);
+  padding: 0 var(--dc-space-4);
+}
+.dcui-btn[data-size="lg"] {
+  height: 36px;
+  padding: 0 var(--dc-space-8);
+}
+
+.dcui-btn[data-variant="primary"] {
+  --_bg: var(--dc-ink);
+  --_fg: var(--dc-ink-fg);
+  --_bd: var(--dc-ink);
+}
+.dcui-btn[data-variant="primary"]:hover {
+  background: var(--dc-ink-hover);
+  border-color: var(--dc-ink-hover);
+}
+.dcui-btn[data-variant="accent"] {
+  --_bg: var(--dc-brand);
+  --_fg: var(--dc-brand-fg);
+  --_bd: var(--dc-brand);
+}
+.dcui-btn[data-variant="accent"]:hover {
+  background: var(--dc-brand-hover);
+  border-color: var(--dc-brand-hover);
+}
+.dcui-btn[data-variant="subtle"] {
+  --_bg: transparent;
+  --_bd: transparent;
+  --_fg: var(--dc-fg-muted);
+}
+.dcui-btn[data-variant="subtle"]:hover {
+  background: var(--dc-hover);
+  color: var(--dc-fg);
+}
+
+/* Toggle "on" — marigold (the active selection colour). */
+.dcui-btn[aria-pressed="true"] {
+  --_fg: var(--dc-brand);
+  --_bd: var(--dc-brand);
+  --_bg: var(--dc-brand-subtle);
+}
+
+.dcui-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dcui-btn:disabled:hover {
+  background: var(--_bg);
+  transform: none;
+}

package/src/ui/design-system/components/controls/Button.placard.md

@@ -0,0 +1,14 @@
+**Button** — the quiet, bordered text control the Display Case chrome leans on; reach for it for any labelled action.
+
+```tsx
+<Button>Docs</Button>
+<Button variant="primary">Run check</Button>
+<Button variant="accent">Send magic link</Button>
+<Button aria-pressed>Grid</Button>
+```
+
+Variants: `ghost` (default, recedes) · `primary` (warm ink, the emphatic action) · `accent` (marigold, rare standout) · `subtle` (borderless). A toggle button lights marigold when you pass `aria-pressed`.
+
+For a glyph-only square control, reach for `IconButton`.
+
+It is a real `<button>` — pass `disabled`, `onClick`, `aria-pressed`, etc.

package/src/ui/design-system/components/controls/Button.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Button } from './Button'
+
+describe('Button', () => {
+  test('defaults to a ghost, medium, type=button control', () => {
+    const html = renderToStaticMarkup(<Button>Go</Button>)
+    expect(html).toContain('class="dcui-btn"')
+    expect(html).toContain('data-variant="ghost"')
+    expect(html).toContain('data-size="md"')
+    expect(html).toContain('type="button"')
+    expect(html).toContain('Go')
+  })
+
+  test('reflects the variant and size props as data attributes', () => {
+    const html = renderToStaticMarkup(
+      <Button variant="accent" size="lg">
+        Buy
+      </Button>,
+    )
+    expect(html).toContain('data-variant="accent"')
+    expect(html).toContain('data-size="lg"')
+  })
+
+  test('a caller-supplied type overrides the button default', () => {
+    const html = renderToStaticMarkup(<Button type="submit">Send</Button>)
+    expect(html).toContain('type="submit"')
+  })
+
+  test('renders the marigold toggle-on state from aria-pressed', () => {
+    const html = renderToStaticMarkup(<Button aria-pressed={true}>On</Button>)
+    expect(html).toContain('aria-pressed="true"')
+  })
+
+  test('passes arbitrary button attributes through to the element', () => {
+    const html = renderToStaticMarkup(
+      <Button disabled data-testid="x" title="hint">
+        Off
+      </Button>,
+    )
+    expect(html).toContain('disabled')
+    expect(html).toContain('data-testid="x"')
+    expect(html).toContain('title="hint"')
+  })
+})

package/src/ui/design-system/components/controls/Button.tsx

@@ -0,0 +1,41 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Display Case — Button
+ * The quiet, bordered control the chrome leans on. `ghost` is the default (it
+ * recedes); `primary` (warm ink) and `accent` (marigold) are for the rare
+ * emphatic action; `subtle` is borderless. A toggle button lights marigold via
+ * `aria-pressed`.
+ *
+ * Styling lives in the sibling `Button.css`, concatenated into the Vitrine
+ * stylesheet and inlined into every document head server-side (see
+ * `readVitrineCss` in server.ts) — no runtime injection.
+ */
+
+export type ButtonVariant = 'ghost' | 'primary' | 'accent' | 'subtle'
+export type ButtonSize = 'sm' | 'md' | 'lg'
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  children?: ReactNode
+}
+
+export function Button({
+  variant = 'ghost',
+  size = 'md',
+  type = 'button',
+  children,
+  ...rest
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className="dcui-btn"
+      data-variant={variant}
+      data-size={size}
+      {...rest}>
+      {children}
+    </button>
+  )
+}

package/src/ui/design-system/components/controls/IconButton.case.tsx

@@ -0,0 +1,52 @@
+import { defineCases, tweak } from '@awarebydefault/display-case'
+import { IconButton } from './IconButton'
+
+export default defineCases(
+  'IconButton',
+  {
+    Playground: {
+      tweaks: {
+        glyph: tweak.text('✕'),
+        label: tweak.text('Close'),
+        size: tweak.choice(['sm', 'md', 'lg'], 'md'),
+        variant: tweak.choice(['outline', 'bare'], 'outline'),
+        active: tweak.boolean(false),
+        disabled: tweak.boolean(false),
+      },
+      render: (t) => (
+        <IconButton
+          glyph={t.glyph}
+          label={t.label}
+          size={t.size as 'sm' | 'md' | 'lg'}
+          variant={t.variant as 'outline' | 'bare'}
+          active={t.active}
+          disabled={t.disabled}
+        />
+      ),
+    },
+    Glyphs: () => (
+      <div style={{ display: 'flex', gap: 8 }}>
+        <IconButton glyph="☰" label="Toggle navigation" />
+        <IconButton glyph="⟲" label="Rotate" />
+        <IconButton glyph="✕" label="Close" />
+        <IconButton glyph="＋" label="Zoom in" />
+      </div>
+    ),
+    Sizes: () => (
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <IconButton glyph="✕" label="Small" size="sm" />
+        <IconButton glyph="✕" label="Medium" size="md" />
+        <IconButton glyph="✕" label="Large" size="lg" />
+      </div>
+    ),
+    States: () => (
+      <div style={{ display: 'flex', gap: 8 }}>
+        <IconButton glyph="⬓" label="Default" />
+        <IconButton glyph="▭" label="Active" active />
+        <IconButton glyph="▭" label="Bare" variant="bare" />
+        <IconButton glyph="✕" label="Disabled" disabled />
+      </div>
+    ),
+  },
+  { level: 'atom' },
+)

package/src/ui/design-system/components/controls/IconButton.css

@@ -0,0 +1,67 @@
+.dcui-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-md);
+  line-height: 1;
+  color: var(--dc-fg);
+  background: var(--dc-surface);
+  border: 1px solid var(--dc-border);
+  border-radius: var(--dc-radius-sm);
+  cursor: pointer;
+  transition:
+    background var(--dc-transition-fast),
+    color var(--dc-transition-fast),
+    border-color var(--dc-transition-fast),
+    transform var(--dc-transition-fast);
+}
+.dcui-iconbtn:hover {
+  background: var(--dc-hover);
+}
+.dcui-iconbtn:active {
+  background: var(--dc-active);
+  transform: translateY(0.5px);
+}
+.dcui-iconbtn:focus-visible {
+  outline: 2px solid var(--dc-focus-ring);
+  outline-offset: 1px;
+}
+.dcui-iconbtn[data-size="sm"] {
+  width: 26px;
+  height: 26px;
+  font-size: var(--dc-text-base);
+}
+.dcui-iconbtn[data-size="lg"] {
+  width: 36px;
+  height: 36px;
+  font-size: var(--dc-text-lg);
+}
+.dcui-iconbtn[aria-pressed="true"],
+.dcui-iconbtn[data-active="true"] {
+  color: var(--dc-brand);
+  border-color: var(--dc-brand);
+  background: var(--dc-brand-subtle);
+}
+.dcui-iconbtn[data-variant="bare"] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--dc-fg-muted);
+}
+.dcui-iconbtn[data-variant="bare"]:hover {
+  background: var(--dc-hover);
+  color: var(--dc-fg);
+}
+.dcui-iconbtn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.dcui-iconbtn:disabled:hover {
+  background: var(--dc-surface);
+  transform: none;
+}
+.dcui-iconbtn[data-variant="bare"]:disabled:hover {
+  background: transparent;
+}

package/src/ui/design-system/components/controls/IconButton.placard.md

@@ -0,0 +1,13 @@
+**IconButton** — a square control carrying a single Unicode glyph (☰ ⟲ ✕ ＋ −); reach for it for compact, glyph-only chrome actions. Display Case uses no icon font and no SVG — just glyphs.
+
+```tsx
+<IconButton glyph="☰" label="Toggle navigation" />
+<IconButton glyph="⟲" label="Rotate" variant="bare" />
+<IconButton glyph="▭" label="Dock" active />
+```
+
+`label` is required — it is the accessible name, since the button shows no text. Variants: `outline` (default) · `bare` (no border).
+
+`active` is persistent emphasis (a row that stays lit); `aria-pressed` is a true toggle (on/off). Both light marigold. For text or labelled actions, use `Button`.
+
+It is a real `<button>` — pass `disabled`, `onClick`, etc.

package/src/ui/design-system/components/controls/IconButton.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { IconButton } from './IconButton'
+
+describe('IconButton', () => {
+  test('renders the glyph and exposes the required label as the accessible name', () => {
+    const html = renderToStaticMarkup(<IconButton glyph="☰" label="Menu" />)
+    expect(html).toContain('class="dcui-iconbtn"')
+    expect(html).toContain('aria-label="Menu"')
+    expect(html).toContain('☰')
+    expect(html).toContain('type="button"')
+  })
+
+  test('defaults to the outline variant at medium size', () => {
+    const html = renderToStaticMarkup(<IconButton glyph="+" label="Add" />)
+    expect(html).toContain('data-variant="outline"')
+    expect(html).toContain('data-size="md"')
+  })
+
+  test('falls back to children when no glyph is given', () => {
+    const html = renderToStaticMarkup(<IconButton label="Close">✕</IconButton>)
+    expect(html).toContain('✕')
+  })
+
+  test('lights the active state via data-active only when active', () => {
+    const on = renderToStaticMarkup(<IconButton glyph="●" label="On" active />)
+    const off = renderToStaticMarkup(<IconButton glyph="●" label="Off" />)
+    expect(on).toContain('data-active="true"')
+    expect(off).not.toContain('data-active')
+  })
+
+  test('reflects the bare variant and size', () => {
+    const html = renderToStaticMarkup(
+      <IconButton glyph="⟲" label="Reset" variant="bare" size="sm" />,
+    )
+    expect(html).toContain('data-variant="bare"')
+    expect(html).toContain('data-size="sm"')
+  })
+})

package/src/ui/design-system/components/controls/IconButton.tsx

@@ -0,0 +1,47 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Display Case — IconButton
+ * A square control carrying a single Unicode glyph (☰ ⟲ ✕ ＋ −). Display Case
+ * uses no icon font and no SVG icons — just glyphs. `bare` drops the border;
+ * `active` / `aria-pressed` light it marigold.
+ */
+
+export type IconButtonSize = 'sm' | 'md' | 'lg'
+export type IconButtonVariant = 'outline' | 'bare'
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label'> {
+  /** The glyph to render (alternatively pass `children`). */
+  glyph?: ReactNode
+  size?: IconButtonSize
+  variant?: IconButtonVariant
+  /** Persistent "on" state (marigold), for non-toggle emphasis. */
+  active?: boolean
+  /** Accessible name — required since the button is glyph-only. */
+  label: string
+}
+
+export function IconButton({
+  glyph,
+  size = 'md',
+  variant = 'outline',
+  active = false,
+  type = 'button',
+  label,
+  children,
+  ...rest
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      className="dcui-iconbtn"
+      data-size={size}
+      data-variant={variant}
+      data-active={active ? 'true' : undefined}
+      aria-label={label}
+      {...rest}>
+      {glyph ?? children}
+    </button>
+  )
+}

package/src/ui/design-system/components/controls/Input.case.tsx

@@ -0,0 +1,50 @@
+import { defineCases, tweak } from '@awarebydefault/display-case'
+import { Input } from './Input'
+
+export default defineCases(
+  'Input',
+  {
+    Playground: {
+      tweaks: {
+        placeholder: tweak.text('filter by name'),
+        value: tweak.text(''),
+        prefix: tweak.text(''),
+        suffix: tweak.text(''),
+        type: tweak.choice(['text', 'number', 'search'], 'text'),
+        size: tweak.choice(['sm', 'md'], 'md'),
+        disabled: tweak.boolean(false),
+      },
+      render: (t) => (
+        <Input
+          placeholder={t.placeholder}
+          defaultValue={t.value || undefined}
+          prefix={t.prefix || undefined}
+          suffix={t.suffix || undefined}
+          type={t.type}
+          size={t.size as 'sm' | 'md'}
+          disabled={t.disabled}
+          wrapperStyle={{ width: '14rem' }}
+        />
+      ),
+    },
+    Default: () => <Input placeholder="filter by name" />,
+    WithAffixes: () => (
+      <Input
+        aria-label="Width in pixels"
+        type="number"
+        defaultValue={1280}
+        prefix="W"
+        suffix="px"
+        wrapperStyle={{ width: '7rem' }}
+      />
+    ),
+    Sizes: () => (
+      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <Input size="sm" placeholder="Small" />
+        <Input size="md" placeholder="Medium" />
+      </div>
+    ),
+    Disabled: () => <Input placeholder="disabled" disabled />,
+  },
+  { level: 'atom' },
+)

package/src/ui/design-system/components/controls/Input.css

@@ -0,0 +1,52 @@
+.dcui-field {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dc-space-2);
+  font-family: var(--dc-font-sans);
+  font-size: var(--dc-text-base);
+  color: var(--dc-fg);
+  background: var(--dc-surface);
+  border: 1px solid var(--dc-border);
+  border-radius: var(--dc-radius-sm);
+  padding: 0 var(--dc-space-4);
+  height: 30px;
+  transition:
+    border-color var(--dc-transition-fast),
+    box-shadow var(--dc-transition-fast);
+}
+.dcui-field:focus-within {
+  border-color: var(--dc-focus-ring);
+  box-shadow: 0 0 0 2px var(--dc-brand-subtle);
+}
+.dcui-field[data-size="sm"] {
+  height: 26px;
+  font-size: var(--dc-text-sm);
+}
+.dcui-field[aria-disabled="true"] {
+  opacity: 0.5;
+}
+.dcui-field-input {
+  flex: 1;
+  min-width: 0;
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  outline: none;
+  padding: 0;
+  width: 100%;
+}
+.dcui-field-input::placeholder {
+  color: var(--dc-fg-subtle);
+}
+.dcui-field-affix {
+  font-family: var(--dc-font-mono);
+  font-size: var(--dc-text-xs);
+  color: var(--dc-fg-muted);
+  flex: 0 0 auto;
+}
+/* tame the native number spinner so it doesn't fight the chrome */
+.dcui-field-input[type="number"]::-webkit-inner-spin-button,
+.dcui-field-input[type="number"]::-webkit-outer-spin-button {
+  opacity: 0.4;
+}

package/src/ui/design-system/components/controls/Input.placard.md

@@ -0,0 +1,12 @@
+**Input** — a single-line text/number field with optional mono `prefix`/`suffix` affixes sitting inside the bordered, marigold-focus box (e.g. the device-dimension fields, `1280 × 800`).
+
+```tsx
+<Input placeholder="filter by name" value={q} onChange={(e) => setQ(e.target.value)} />
+<Input type="number" prefix="W" suffix="px" defaultValue={1280} />
+```
+
+`onChange` emits a native event — read `event.target.value`. Controlled via `value` + `onChange`; uncontrolled via `defaultValue`. It renders no label: the caller supplies a `<label>` or `aria-label`.
+
+For a fixed set of choices, use `Select`.
+
+Sizes: `sm` · `md` (default). Use `wrapperStyle`/`wrapperClassName` to size the field box; other native `<input>` props spread onto the inner input.

package/src/ui/design-system/components/controls/Input.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Input } from './Input'
+
+describe('Input', () => {
+  test('wraps a borderless input in the field shell at the default size', () => {
+    const html = renderToStaticMarkup(<Input placeholder="name" />)
+    expect(html).toContain('class="dcui-field"')
+    expect(html).toContain('data-size="md"')
+    expect(html).toContain('class="dcui-field-input"')
+    expect(html).toContain('placeholder="name"')
+  })
+
+  test('renders the prefix and suffix affix slots only when provided', () => {
+    const both = renderToStaticMarkup(<Input prefix="W" suffix="px" />)
+    const affixes = both.match(/dcui-field-affix/g) ?? []
+    expect(affixes).toHaveLength(2)
+    expect(both).toContain('>W<')
+    expect(both).toContain('>px<')
+
+    const none = renderToStaticMarkup(<Input />)
+    expect(none).not.toContain('dcui-field-affix')
+  })
+
+  test('disabling marks the wrapper aria-disabled and the input disabled', () => {
+    const html = renderToStaticMarkup(<Input disabled />)
+    expect(html).toContain('aria-disabled="true"')
+    expect(html).toContain('disabled')
+  })
+
+  test('appends a caller class to the wrapper rather than replacing it', () => {
+    const html = renderToStaticMarkup(<Input wrapperClassName="w-32" />)
+    expect(html).toContain('class="dcui-field w-32"')
+  })
+
+  test('forwards native input attributes to the inner field', () => {
+    const html = renderToStaticMarkup(
+      <Input type="number" value={800} readOnly />,
+    )
+    expect(html).toContain('type="number"')
+    expect(html).toContain('value="800"')
+  })
+})

package/src/ui/design-system/components/controls/Input.tsx

@@ -0,0 +1,45 @@
+import type { CSSProperties, InputHTMLAttributes, ReactNode } from 'react'
+
+/**
+ * Display Case — Input
+ * Text / number field. Supports a leading label slot and a trailing unit suffix
+ * (used by the device-dimension fields: 1280 × 800). The border + marigold
+ * focus ring live on the wrapper so prefix/suffix sit inside the field.
+ */
+
+export type InputSize = 'sm' | 'md'
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+  size?: InputSize
+  /** Leading label slot (mono). */
+  prefix?: ReactNode
+  /** Trailing unit suffix (mono). */
+  suffix?: ReactNode
+  /** Style applied to the field wrapper (e.g. a fixed width). */
+  wrapperStyle?: CSSProperties
+  /** Class applied to the field wrapper. */
+  wrapperClassName?: string
+}
+
+export function Input({
+  size = 'md',
+  prefix,
+  suffix,
+  disabled = false,
+  wrapperStyle,
+  wrapperClassName,
+  ...rest
+}: InputProps) {
+  return (
+    <span
+      className={['dcui-field', wrapperClassName].filter(Boolean).join(' ')}
+      data-size={size}
+      aria-disabled={disabled ? 'true' : undefined}
+      style={wrapperStyle}>
+      {prefix ? <span className="dcui-field-affix">{prefix}</span> : null}
+      <input className="dcui-field-input" disabled={disabled} {...rest} />
+      {suffix ? <span className="dcui-field-affix">{suffix}</span> : null}
+    </span>
+  )
+}