@lovett/ui 0.0.4 → 0.0.6

package/package.json

@@ -1,28 +1,36 @@
 {
   "name": "@lovett/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "private": false,
-  "publishConfig": {
-    "access": "restricted"
-  },
   "type": "module",
   "description": "Design system primitives, tokens, layouts, and patterns for the Lovett portfolio.",
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
-    "./tokens.css": "./src/tokens.css",
-    "./styles.css": "./src/styles.css"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./styles.css": "./dist/styles.css",
+    "./theme-v2.css": "./dist/theme-v2.css",
+    "./v2": {
+      "types": "./dist/v2/index.d.ts",
+      "import": "./dist/v2/index.js"
+    },
+    "./v2/theme.css": "./dist/v2/theme.css"
+  },
+  "publishConfig": {
+    "access": "restricted"
   },
   "files": [
+    "dist",
     "src",
     "README.md"
   ],
-  "scripts": {
-    "lint": "eslint .",
-    "typecheck": "tsc --noEmit -p tsconfig.json",
-    "build": "echo 'no-op (source-only consumption in v0)'"
-  },
   "peerDependencies": {
     "lucide-react": "^0.469.0",
     "react": "^19.0.0",
@@ -30,13 +38,23 @@
     "react-router-dom": "^7.1.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
+    "jsdom": "^29.1.1",
     "lucide-react": "^0.469.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-router-dom": "^7.1.0",
-    "typescript": "^5.7.2"
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.2",
+    "vitest": "^4.1.6"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -49,5 +67,14 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.6.0"
-  }
-}
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.test.json",
+    "test": "vitest run",
+    "test:ci": "vitest run --no-file-parallelism",
+    "build": "tsup",
+    "clean": "rm -rf dist"
+  },
+  "module": "./dist/index.js"
+}

package/src/__tests__/button.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * Button — 254 consuming files, previously zero tests.
+ *
+ * These assert the contract every consumer relies on, not appearance:
+ * the base class survives a caller `className`, the ref reaches the
+ * element, rest props land on the DOM node, and loading implies disabled.
+ */
+import { createRef } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Button } from '../button'
+
+describe('Button', () => {
+  it('renders its children in a <button>', () => {
+    render(<Button>Save</Button>)
+    expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument()
+  })
+
+  it('defaults to type="button" so it never submits a form by accident', () => {
+    render(<Button>Save</Button>)
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'button')
+  })
+
+  it('honours an explicit type', () => {
+    render(<Button type="submit">Save</Button>)
+    expect(screen.getByRole('button')).toHaveAttribute('type', 'submit')
+  })
+
+  it('defaults to the primary variant at md', () => {
+    render(<Button>Save</Button>)
+    const btn = screen.getByRole('button')
+    expect(btn).toHaveClass('btn', 'btn-primary')
+    // md is the default and maps to no size modifier.
+    expect(btn.className).not.toMatch(/size-(sm|lg)/)
+  })
+
+  it.each([
+    ['primary', 'btn-primary'],
+    ['secondary', 'btn-secondary'],
+    ['outline', 'btn-outline'],
+    ['ghost', 'btn-ghost'],
+    ['destructive', 'btn-destructive'],
+    ['destructive-soft', 'btn-destructive-soft'],
+    ['icon', 'btn-icon'],
+    ['toolbar', 'btn-toolbar'],
+  ] as const)('maps variant=%s to .%s', (variant, expected) => {
+    render(<Button variant={variant}>x</Button>)
+    expect(screen.getByRole('button')).toHaveClass('btn', expected)
+  })
+
+  it.each([
+    ['sm', 'size-sm'],
+    ['lg', 'size-lg'],
+  ] as const)('maps size=%s to .%s', (size, expected) => {
+    render(<Button size={size}>x</Button>)
+    expect(screen.getByRole('button')).toHaveClass(expected)
+  })
+
+  it('applies is-circle only when shape=circle AND variant=icon', () => {
+    const { rerender } = render(
+      <Button shape="circle" variant="icon">
+        x
+      </Button>,
+    )
+    expect(screen.getByRole('button')).toHaveClass('is-circle')
+
+    rerender(
+      <Button shape="circle" variant="primary">
+        x
+      </Button>,
+    )
+    expect(screen.getByRole('button')).not.toHaveClass('is-circle')
+  })
+
+  it('MERGES a caller className rather than replacing the base classes', () => {
+    // Five other primitives use `className ??` replace semantics, which
+    // silently deletes their base layout. Button must not join them.
+    render(<Button className="w-full">x</Button>)
+    expect(screen.getByRole('button')).toHaveClass('btn', 'btn-primary', 'w-full')
+  })
+
+  it('disables itself while loading and flags .is-loading', () => {
+    render(<Button loading>Saving</Button>)
+    const btn = screen.getByRole('button')
+    expect(btn).toBeDisabled()
+    expect(btn).toHaveClass('is-loading')
+  })
+
+  it('does not fire onClick while loading', async () => {
+    const onClick = vi.fn()
+    render(
+      <Button loading onClick={onClick}>
+        Saving
+      </Button>,
+    )
+    await userEvent.click(screen.getByRole('button'))
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('fires onClick when enabled', async () => {
+    const onClick = vi.fn()
+    render(<Button onClick={onClick}>Save</Button>)
+    await userEvent.click(screen.getByRole('button'))
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('forwards a ref to the underlying <button>', () => {
+    const ref = createRef<HTMLButtonElement>()
+    render(<Button ref={ref}>x</Button>)
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement)
+  })
+
+  it('spreads rest props onto the DOM node', () => {
+    render(
+      <Button aria-describedby="hint" data-testid="cta">
+        x
+      </Button>,
+    )
+    const btn = screen.getByTestId('cta')
+    expect(btn).toHaveAttribute('aria-describedby', 'hint')
+  })
+
+  it('renders leading and trailing icons around the label', () => {
+    render(
+      <Button
+        leadingIcon={<span data-testid="lead" />}
+        trailingIcon={<span data-testid="trail" />}
+      >
+        Label
+      </Button>,
+    )
+    expect(screen.getByTestId('lead')).toBeInTheDocument()
+    expect(screen.getByTestId('trail')).toBeInTheDocument()
+    expect(screen.getByRole('button')).toHaveTextContent('Label')
+  })
+})

package/src/__tests__/card.test.tsx

@@ -0,0 +1,103 @@
+/**
+ * Card — the nominal base surface.
+ *
+ * Its auto-wrap rule is the least obvious behaviour in the package and
+ * the one most likely to be "simplified" by a refactor: Head/Body get
+ * folded into a recessed tray while Foot stays on the outer frame, but
+ * only when the caller hasn't taken over tray layout themselves. All
+ * three branches are pinned here.
+ */
+import { createRef } from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import Card from '../card'
+
+describe('Card', () => {
+  it('renders children', () => {
+    render(<Card>plain content</Card>)
+    expect(screen.getByText('plain content')).toBeInTheDocument()
+  })
+
+  it('carries the surface class and merges a caller className', () => {
+    render(
+      <Card className="w-64" data-testid="card">
+        x
+      </Card>,
+    )
+    expect(screen.getByTestId('card')).toHaveClass('ds-card-surface', 'w-64')
+  })
+
+  it('forwards a ref to the root element', () => {
+    const ref = createRef<HTMLDivElement>()
+    render(<Card ref={ref}>x</Card>)
+    expect(ref.current).toBeInstanceOf(HTMLDivElement)
+  })
+
+  it('marks data-interactive only when interactive', () => {
+    const { rerender } = render(<Card data-testid="card">x</Card>)
+    expect(screen.getByTestId('card')).not.toHaveAttribute('data-interactive')
+
+    rerender(
+      <Card interactive data-testid="card">
+        x
+      </Card>,
+    )
+    expect(screen.getByTestId('card')).toHaveAttribute('data-interactive', 'true')
+  })
+
+  describe('auto-wrap', () => {
+    it('wraps Head/Body in a tray and leaves Foot on the frame', () => {
+      render(
+        <Card data-testid="card">
+          <Card.Head>head</Card.Head>
+          <Card.Body>body</Card.Body>
+          <Card.Foot>foot</Card.Foot>
+        </Card>,
+      )
+      const card = screen.getByTestId('card')
+      expect(card).toHaveAttribute('data-framed', 'true')
+
+      const tray = card.querySelector('.ds-card-tray')
+      expect(tray).not.toBeNull()
+      expect(tray).toHaveTextContent('head')
+      expect(tray).toHaveTextContent('body')
+      // Foot is a sibling of the tray, not inside it — this is what puts
+      // the footer on the outer frame.
+      expect(tray).not.toHaveTextContent('foot')
+      expect(card).toHaveTextContent('foot')
+    })
+
+    it('renders flat when the caller supplies an explicit Tray', () => {
+      render(
+        <Card data-testid="card">
+          <Card.Tray>managed</Card.Tray>
+        </Card>,
+      )
+      const card = screen.getByTestId('card')
+      expect(card).not.toHaveAttribute('data-framed')
+      // Exactly one tray — the caller's, not an added wrapper.
+      expect(card.querySelectorAll('.ds-card-tray')).toHaveLength(1)
+    })
+
+    it('renders flat when no named slot is used', () => {
+      render(
+        <Card data-testid="card">
+          <div>custom</div>
+        </Card>,
+      )
+      const card = screen.getByTestId('card')
+      expect(card).not.toHaveAttribute('data-framed')
+      expect(card.querySelector('.ds-card-tray')).toBeNull()
+    })
+  })
+
+  describe('Card.MetaItem', () => {
+    it('renders digits with tabular-nums', () => {
+      // Regression: this used a `tnum` class that is only defined in
+      // apps/preview-lab, so in the workspace app every meta figure
+      // rendered with proportional digits and jittered on update.
+      render(<Card.MetaItem>1,234</Card.MetaItem>)
+      expect(screen.getByText('1,234')).toHaveClass('tabular-nums')
+    })
+  })
+})

package/src/__tests__/dead-render.test.tsx

@@ -0,0 +1,117 @@
+/**
+ * Regression tests for the "type-checks, lints, builds, renders nothing"
+ * family found by the design-system audit.
+ *
+ * Every bug pinned here passed typecheck, lint, build AND the full
+ * 243-file workspace test suite while shipping visibly broken UI. They
+ * share one shape: a declaration that is syntactically fine and
+ * semantically void, so no gate that reads the source can see it.
+ *
+ * These assert the CLASS OF DEFECT, not a specific painted pixel — the
+ * suite runs with `css: false`, so a test can't measure colour. What it
+ * CAN do is assert that the value handed to the browser is a colour
+ * expression and not a box-shadow list, and that a state which is
+ * supposed to change the DOM actually changes it. That is enough to
+ * catch every one of these coming back.
+ */
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { PillButton } from '../pill-button'
+import { SortableTable } from '../sortable-table'
+import Card from '../card'
+
+// The CSS-validity half of this defect class is NOT testable through the
+// DOM — any value containing var() is stored verbatim by the CSSOM, so a
+// rendered assertion passes on the broken form. That half lives in
+// token-shape.test.ts as a source scan. What remains here is the half
+// that IS observable at runtime: state that must change the DOM.
+
+describe('PillButton tone map', () => {
+  // The map was an inverted copy of Badge's: Badge pairs a tinted `*-bg`
+  // fill with solid `*` text, and success/warning/info were copied with
+  // bg and color still in Badge's order — painting each label in a
+  // 12%-alpha version of its own background. Measured contrast ~1:1.
+  it.each(['success', 'warning', 'info', 'accent', 'neutral'] as const)(
+    'does not paint a %s label in its own background colour',
+    (tone) => {
+      render(
+        <PillButton active tone={tone} onClick={() => {}}>
+          Label
+        </PillButton>,
+      )
+      const btn = screen.getByRole('button', { name: 'Label' })
+      const { background, color } = btn.style
+      expect(background).not.toBe('')
+      expect(color).not.toBe('')
+      expect(color).not.toBe(background)
+      // The specific inversion: text painted with the fill's -bg token.
+      expect(color).not.toMatch(/--(success|warning|info)-bg/)
+    },
+  )
+
+  it('keeps the label transparent-free when inactive', () => {
+    render(
+      <PillButton active={false} onClick={() => {}}>
+        Label
+      </PillButton>,
+    )
+    const btn = screen.getByRole('button', { name: 'Label' })
+    expect(btn.style.color).not.toBe(btn.style.background)
+  })
+})
+
+describe('SortableTable zebra striping', () => {
+  const rows = [
+    { id: 'a', name: 'Alpha' },
+    { id: 'b', name: 'Bravo' },
+    { id: 'c', name: 'Charlie' },
+  ]
+  const columns = [
+    { id: 'name', label: 'Name', accessor: (r: (typeof rows)[number]) => r.name },
+  ]
+
+  it('bands alternating rows when zebra is on', () => {
+    // NOTE: whether the fill is VALID CSS is checked in token-shape.test.ts
+    // — it cannot be checked here (see the file header). This asserts only
+    // the banding pattern: odd rows differ from even, and the pattern
+    // repeats.
+    const { container } = render(
+      <SortableTable rows={rows} columns={columns} rowKey={(r) => r.id} zebra />,
+    )
+    const bodyRows = container.querySelectorAll('tbody tr')
+    expect(bodyRows).toHaveLength(3)
+
+    const backgrounds = Array.from(bodyRows).map(
+      (tr) => (tr as HTMLElement).style.background,
+    )
+    expect(backgrounds[1]).not.toBe('')
+    expect(backgrounds[1]).not.toBe(backgrounds[0]!)
+    expect(backgrounds[2]).toBe(backgrounds[0]!)
+  })
+
+  it('leaves rows unbanded when zebra is off', () => {
+    const { container } = render(
+      <SortableTable
+        rows={rows}
+        columns={columns}
+        rowKey={(r) => r.id}
+        zebra={false}
+      />,
+    )
+    const backgrounds = Array.from(
+      container.querySelectorAll('tbody tr'),
+    ).map((tr) => (tr as HTMLElement).style.background)
+    expect(new Set(backgrounds).size).toBe(1)
+  })
+})
+
+describe('no interpolated Tailwind classes reach the DOM', () => {
+  // Tailwind scans source statically, so `h-[${N}px]` is never generated.
+  // Anything matching this shape rendered as a class that does not exist.
+  it('Card.MetaItem uses a real utility for tabular figures', () => {
+    render(<Card.MetaItem>42</Card.MetaItem>)
+    const el = screen.getByText('42')
+    expect(el.className).not.toMatch(/\$\{|\[\s*\]/)
+    expect(el).toHaveClass('tabular-nums')
+  })
+})

package/src/__tests__/input.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * Input — 130 consuming files, previously zero tests.
+ *
+ * The sharpest contract here is that Input has TWO class slots:
+ * `className` lands on the <input>, `shellClassName` on the wrapper.
+ * Consumers get this wrong, and nothing caught it before.
+ */
+import { createRef } from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { Input } from '../input'
+
+const shellOf = (el: HTMLElement) => el.closest('.input-shell')
+
+describe('Input', () => {
+  it('renders an <input> inside an .input-shell wrapper', () => {
+    render(<Input placeholder="Search" />)
+    const input = screen.getByPlaceholderText('Search')
+    expect(input.tagName).toBe('INPUT')
+    expect(shellOf(input)).not.toBeNull()
+  })
+
+  it('routes className to the <input> and shellClassName to the wrapper', () => {
+    render(<Input placeholder="p" className="text-red" shellClassName="w-full" />)
+    const input = screen.getByPlaceholderText('p')
+    expect(input).toHaveClass('text-red')
+    expect(input).not.toHaveClass('w-full')
+    expect(shellOf(input)).toHaveClass('input-shell', 'w-full')
+  })
+
+  it('flags .is-error on the shell, not the input', () => {
+    render(<Input placeholder="p" error />)
+    const input = screen.getByPlaceholderText('p')
+    expect(shellOf(input)).toHaveClass('is-error')
+  })
+
+  it('disables the input and flags .is-disabled on the shell', () => {
+    render(<Input placeholder="p" disabled />)
+    const input = screen.getByPlaceholderText('p')
+    expect(input).toBeDisabled()
+    expect(shellOf(input)).toHaveClass('is-disabled')
+  })
+
+  it.each([
+    ['sm', 'size-sm'],
+    ['lg', 'size-lg'],
+  ] as const)('maps inputSize=%s to .%s on the shell', (size, expected) => {
+    render(<Input placeholder="p" inputSize={size} />)
+    expect(shellOf(screen.getByPlaceholderText('p'))).toHaveClass(expected)
+  })
+
+  it('adds .is-numeric for the tabular calculator variant', () => {
+    render(<Input placeholder="p" numeric />)
+    expect(shellOf(screen.getByPlaceholderText('p'))).toHaveClass('is-numeric')
+  })
+
+  it('flags has-leading / has-trailing only when the affix is present', () => {
+    const { rerender } = render(<Input placeholder="p" />)
+    expect(shellOf(screen.getByPlaceholderText('p'))).not.toHaveClass(
+      'has-leading',
+      'has-trailing',
+    )
+
+    rerender(<Input placeholder="p" leadingAffix={<span>$</span>} />)
+    const withLeading = shellOf(screen.getByPlaceholderText('p'))
+    expect(withLeading).toHaveClass('has-leading')
+    expect(withLeading).not.toHaveClass('has-trailing')
+
+    rerender(
+      <Input
+        placeholder="p"
+        leadingAffix={<span>$</span>}
+        trailingAffix={<span>USD</span>}
+      />,
+    )
+    expect(shellOf(screen.getByPlaceholderText('p'))).toHaveClass(
+      'has-leading',
+      'has-trailing',
+    )
+  })
+
+  it('forwards a ref to the <input>, not the shell', () => {
+    const ref = createRef<HTMLInputElement>()
+    render(<Input ref={ref} placeholder="p" />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+
+  it('spreads rest props onto the <input>', () => {
+    render(<Input placeholder="p" aria-label="Email" autoComplete="email" />)
+    const input = screen.getByLabelText('Email')
+    expect(input).toHaveAttribute('autocomplete', 'email')
+  })
+
+  it('reports typed values through onChange', async () => {
+    const onChange = vi.fn()
+    render(<Input placeholder="p" onChange={onChange} />)
+    await userEvent.type(screen.getByPlaceholderText('p'), 'ab')
+    expect(onChange).toHaveBeenCalledTimes(2)
+  })
+
+  describe('password toggle', () => {
+    it('reveals and re-hides the value', async () => {
+      render(<Input placeholder="p" type="password" showPasswordToggle />)
+      const input = screen.getByPlaceholderText('p')
+      expect(input).toHaveAttribute('type', 'password')
+
+      const toggle = screen.getByRole('button', { name: 'Show password' })
+      await userEvent.click(toggle)
+      expect(input).toHaveAttribute('type', 'text')
+
+      await userEvent.click(screen.getByRole('button', { name: 'Hide password' }))
+      expect(input).toHaveAttribute('type', 'password')
+    })
+
+    it('is a no-op unless type="password"', () => {
+      render(<Input placeholder="p" type="text" showPasswordToggle />)
+      expect(screen.queryByRole('button', { name: 'Show password' })).toBeNull()
+    })
+
+    it('yields to a caller-supplied trailingAffix', () => {
+      render(
+        <Input
+          placeholder="p"
+          type="password"
+          showPasswordToggle
+          trailingAffix={<span data-testid="mine" />}
+        />,
+      )
+      expect(screen.getByTestId('mine')).toBeInTheDocument()
+      expect(screen.queryByRole('button', { name: 'Show password' })).toBeNull()
+    })
+  })
+})