@carbonid1/design-system 0.1.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "description": "Shared React UI primitives themed via @carbonid1/tailwind-config",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
   ],
   "peerDependencies": {
     "@base-ui/react": "^1.0.0-alpha",
-    "@carbonid1/tailwind-config": "^0.1.0",
+    "@carbonid1/tailwind-config": "^0.3.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-react": ">=0.400.0",
@@ -35,17 +35,39 @@
   },
   "devDependencies": {
     "@base-ui/react": "^1.4.0",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-themes": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jsdom": "^29.0.2",
     "lucide-react": "^1.8.0",
     "next-themes": "^0.4.6",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-hotkeys-hook": "^5.2.4",
     "sonner": "^2.0.7",
+    "storybook": "^10.3.5",
     "tailwind-merge": "^3.5.0",
-    "@carbonid1/tsconfig": "0.1.0"
+    "tailwindcss": "^4.2.2",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4",
+    "@carbonid1/storybook-config": "0.1.0",
+    "@carbonid1/tailwind-config": "0.3.0",
+    "@carbonid1/tsconfig": "0.1.0",
+    "@carbonid1/vitest-config": "0.1.0"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest --run",
+    "test:watch": "vitest"
   }
 }

package/src/Button/Button.stories.tsx

@@ -1,121 +0,0 @@
-import type { ComponentProps } from 'react'
-import { expect, fn } from 'storybook/test'
-import preview from '../../../../.storybook/preview'
-import { Button } from './Button'
-
-type ButtonProps = ComponentProps<typeof Button>
-
-// TODO: Remove `.type<>()` workaround after upgrading to Storybook 11.
-// SB11 adds `const` modifier to factory generics, fixing args inference for intersection types.
-// See: https://github.com/storybookjs/storybook/issues/32829
-const meta = preview.type<{ args: ButtonProps }>().meta({
-  component: Button,
-  args: {
-    onClick: fn(),
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['ghost', 'primary', 'outline', 'destructive', 'subtle', 'danger', 'link'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'small', 'large', 'icon', 'smallIcon', 'largeIcon'],
-    },
-    fullWidth: { control: 'boolean' },
-    loading: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-  },
-})
-
-// --- Variants ---
-
-export const Ghost = meta.story({
-  args: { children: 'Ghost', variant: 'ghost' },
-})
-
-export const Primary = meta.story({
-  args: { children: 'Primary', variant: 'primary' },
-})
-Primary.test('fires onClick when clicked', async ({ canvas, userEvent, args }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.click(button)
-  await expect(args.onClick).toHaveBeenCalledOnce()
-})
-
-export const Outline = meta.story({
-  args: { children: 'Outline', variant: 'outline' },
-})
-
-export const Destructive = meta.story({
-  args: { children: 'Delete Account', variant: 'destructive' },
-})
-
-export const Subtle = meta.story({
-  args: { children: '▶', size: 'icon', variant: 'subtle', 'aria-label': 'Play source' },
-})
-
-export const Danger = meta.story({
-  args: { children: '✕', size: 'icon', variant: 'danger', 'aria-label': 'Delete' },
-})
-
-export const Link = meta.story({
-  args: { children: 'Learn more', variant: 'link' },
-})
-
-// --- Sizes ---
-
-export const IconSize = meta.story({
-  args: { children: '✕', size: 'icon', 'aria-label': 'Close' },
-})
-
-export const SmallIconSize = meta.story({
-  args: { children: '✕', size: 'smallIcon', 'aria-label': 'Dismiss' },
-})
-
-export const LargeIconSize = meta.story({
-  args: { children: '▶', size: 'largeIcon', variant: 'primary', 'aria-label': 'Play' },
-})
-
-export const SmallSize = meta.story({
-  args: { children: 'Copy Text', size: 'small' },
-})
-
-export const LargeSize = meta.story({
-  args: { children: 'Continue', size: 'large', variant: 'primary' },
-})
-
-// --- FullWidth ---
-
-export const FullWidthPrimary = meta.story({
-  args: {
-    children: 'Continue to Next Chapter',
-    variant: 'primary',
-    size: 'large',
-    fullWidth: true,
-  },
-})
-
-export const FullWidthMenuItem = meta.story({
-  args: { children: 'Copy Text', size: 'small', fullWidth: true },
-})
-
-// --- States ---
-
-export const Loading = meta.story({
-  args: { children: 'Generating...', variant: 'primary', loading: true },
-})
-Loading.test('shows spinner and disables button', async ({ canvas }) => {
-  const button = await canvas.findByRole('button')
-  await expect(button).toBeDisabled()
-  await expect(button).toHaveAttribute('aria-busy', 'true')
-})
-
-export const Disabled = meta.story({
-  args: { children: 'Disabled', variant: 'primary', disabled: true },
-})
-Disabled.test('is disabled and does not respond to clicks', async ({ canvas }) => {
-  const button = await canvas.findByRole('button')
-  await expect(button).toBeDisabled()
-  await expect(button).toHaveStyle({ pointerEvents: 'none' })
-})

package/src/Kbd/Kbd.stories.tsx

@@ -1,112 +0,0 @@
-import type { ComponentProps } from 'react'
-import { expect } from 'storybook/test'
-import preview from '../../../../.storybook/preview'
-import { Kbd } from './Kbd'
-
-type KbdProps = ComponentProps<typeof Kbd>
-
-const meta = preview.type<{ args: KbdProps }>().meta({
-  component: Kbd,
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['default', 'sm'],
-    },
-  },
-  decorators: [
-    Story => (
-      <div style={{ padding: 24, display: 'flex', alignItems: 'center', gap: 8 }}>
-        <Story />
-      </div>
-    ),
-  ],
-})
-
-// --- Single keys ---
-
-/** Plain letter key — the simplest case. */
-export const SingleKey = meta.story({
-  args: { keys: 'T' },
-})
-
-/** Token name resolved to its standard symbol. */
-export const EscapeKey = meta.story({
-  name: 'Symbolic: Escape',
-  args: { keys: 'escape' },
-})
-
-/** Spacebar rendered as the ␣ symbol. */
-export const SpaceKey = meta.story({
-  name: 'Symbolic: Space',
-  args: { keys: 'space' },
-})
-
-/** Arrow key rendered as a directional symbol. */
-export const ArrowKey = meta.story({
-  name: 'Symbolic: Arrow',
-  args: { keys: 'left' },
-})
-
-// --- Combos ---
-
-/** Two-key combo — each key renders as a separate styled element. */
-export const ShiftCombo = meta.story({
-  name: 'Combo: Shift + T',
-  args: { keys: ['shift', 'T'] },
-})
-ShiftCombo.test('renders separate kbd per key in combo', async ({ canvas }) => {
-  const wrapper = canvas.getAllByRole('presentation')[0]
-  if (!wrapper) throw new Error('No presentation wrapper found')
-  const kbdElements = wrapper.querySelectorAll('kbd')
-  await expect(kbdElements.length).toBe(2)
-  await expect(kbdElements[0]?.textContent).toBe('⇧')
-  await expect(kbdElements[1]?.textContent).toBe('T')
-})
-
-/** Mod token resolved to ⌘ on Mac or Ctrl on other platforms. */
-export const ModCombo = meta.story({
-  name: 'Combo: Mod + F (OS-aware)',
-  args: { keys: ['mod', 'F'] },
-})
-
-/** Three-key combo showing modifier stacking. */
-export const TripleCombo = meta.story({
-  name: 'Combo: Mod + Shift + K',
-  args: { keys: ['mod', 'shift', 'K'] },
-})
-
-// --- Sizes ---
-
-/** Small size used inline within tooltip overlays. */
-export const Small = meta.story({
-  name: 'Size: Small',
-  args: { keys: ['shift', 'B'], size: 'sm' },
-})
-
-// --- In context ---
-
-/** Shortcut hint next to a settings label, matching the AppearanceCard layout. */
-export const InlineWithText = meta.story({
-  name: 'Context: Inline with text',
-  args: { keys: ['shift', 'T'], size: 'sm' },
-  decorators: [
-    Story => (
-      <span className="text-muted-foreground flex items-center gap-2 text-sm">
-        Theme <Story />
-      </span>
-    ),
-  ],
-})
-
-/** Small Kbd on an inverted tooltip background — needs color overrides to stay visible. */
-export const TooltipStyle = meta.story({
-  name: 'Context: Tooltip background',
-  args: { keys: ['mod', 'F'], size: 'sm', className: 'border-transparent bg-background/15' },
-  decorators: [
-    Story => (
-      <div className="bg-foreground text-background flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs">
-        Search <Story />
-      </div>
-    ),
-  ],
-})

package/src/ProgressRing/ProgressRing.stories.tsx

@@ -1,66 +0,0 @@
-import type { ComponentProps } from 'react'
-import preview from '../../../../.storybook/preview'
-import { ProgressRing } from './ProgressRing'
-
-type ProgressRingProps = ComponentProps<typeof ProgressRing>
-
-const meta = preview.type<{ args: ProgressRingProps }>().meta({
-  component: ProgressRing,
-  argTypes: {
-    progress: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
-    colorClass: {
-      control: 'select',
-      options: ['text-primary', 'text-success', 'text-muted-foreground'],
-    },
-    animate: { control: 'boolean' },
-    pendingStyle: {
-      control: 'select',
-      options: ['none', 'dashed'],
-    },
-  },
-  args: {
-    label: 'Generation progress',
-    colorClass: 'text-primary',
-  },
-  decorators: [
-    Story => (
-      <div style={{ padding: 24 }}>
-        <Story />
-      </div>
-    ),
-  ],
-})
-
-// --- Active generation ---
-
-export const Spinning = meta.story({
-  name: 'Active: Spinning (low progress)',
-  args: { progress: 0, animate: true, label: 'Starting generation' },
-})
-
-export const InProgress = meta.story({
-  name: 'Active: In Progress',
-  args: { progress: 0.35, animate: true, label: '35 of 100 paragraphs' },
-})
-
-export const AlmostDone = meta.story({
-  name: 'Active: Almost Done',
-  args: { progress: 0.92, animate: true, label: '92 of 100 paragraphs' },
-})
-
-export const Completed = meta.story({
-  name: 'Completed',
-  args: { progress: 1, animate: false, colorClass: 'text-success', label: '100 paragraphs' },
-})
-
-// --- Pending ---
-
-export const PendingQueued = meta.story({
-  name: 'Pending: Queued',
-  args: { progress: 0, animate: false, pendingStyle: 'dashed', label: 'Queued' },
-})
-
-export const PendingPaused = meta.story({
-  name: 'Pending: Paused (mid-generation)',
-  args: { progress: 0.4, animate: false, pendingStyle: 'dashed', label: 'Paused at 40%' },
-})

package/src/ProgressRing/ProgressRing.vi.tsx

@@ -1,51 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-import { ProgressRing } from './ProgressRing'
-import { CIRCUMFERENCE } from './ProgressRing.consts'
-
-describe('ProgressRing', () => {
-  it('renders zero dashoffset at 0% progress', () => {
-    render(<ProgressRing progress={0} colorClass="text-primary" label="Empty" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    const offset = Number(circle.getAttribute('stroke-dashoffset'))
-    expect(offset).toBeCloseTo(CIRCUMFERENCE, 1)
-  })
-
-  it('renders correct dashoffset at 50% progress', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="Half" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    const offset = Number(circle.getAttribute('stroke-dashoffset'))
-    expect(offset).toBeCloseTo(CIRCUMFERENCE * 0.5, 1)
-  })
-
-  it('renders zero dashoffset at 100% progress', () => {
-    render(<ProgressRing progress={1} colorClass="text-success" label="Full" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    const offset = Number(circle.getAttribute('stroke-dashoffset'))
-    expect(offset).toBeCloseTo(0, 1)
-  })
-
-  it('applies colorClass to fill circle', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-success" label="Test" testId="ring" />)
-    const circle = screen.getByTestId('ring')
-    expect(circle.classList.toString()).toContain('text-success')
-  })
-
-  it('applies pulse animation when animate is true', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="Pulsing" animate />)
-    const svg = screen.getByRole('img', { hidden: true })
-    expect(svg.classList.toString()).toContain('animate-buffer-pulse')
-  })
-
-  it('does not apply pulse animation when animate is false', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="Idle" />)
-    const svg = screen.getByRole('img', { hidden: true })
-    expect(svg.classList.toString()).not.toContain('animate-buffer-pulse')
-  })
-
-  it('sets aria-label from label prop', () => {
-    render(<ProgressRing progress={0.5} colorClass="text-primary" label="42 paragraphs ready" />)
-    const svg = screen.getByRole('img', { hidden: true })
-    expect(svg.getAttribute('aria-label')).toBe('42 paragraphs ready')
-  })
-})

package/src/Select/Select.vi.tsx

@@ -1,129 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { StrictMode } from 'react'
-import { describe, expect, it, vi } from 'vitest'
-import { Select } from './Select'
-import type { SelectGroup } from './Select.types'
-
-const options = [
-  { value: 'a', label: 'Alpha' },
-  { value: 'b', label: 'Bravo' },
-  { value: 'c', label: 'Charlie' },
-]
-
-const groups: SelectGroup[] = [
-  {
-    label: 'Letters',
-    options: [
-      { value: 'a', label: 'Alpha' },
-      { value: 'b', label: 'Bravo' },
-    ],
-  },
-  {
-    label: 'Numbers',
-    options: [
-      { value: '1', label: 'One' },
-      { value: '2', label: 'Two' },
-    ],
-  },
-]
-
-const renderWith = (ui: React.ReactElement) => render(<StrictMode>{ui}</StrictMode>)
-
-describe('Select', () => {
-  it('renders selected label and chevron in button', () => {
-    renderWith(<Select options={options} value="b" onChange={vi.fn()} />)
-
-    const button = screen.getByRole('button', { name: /bravo/i })
-    expect(button).toBeInTheDocument()
-    expect(button.querySelector('svg')).toBeInTheDocument()
-  })
-
-  it('opens menu on click showing all options', () => {
-    renderWith(<Select options={options} value="a" onChange={vi.fn()} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-
-    expect(screen.getByRole('listbox')).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /alpha/i })).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /bravo/i })).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /charlie/i })).toBeInTheDocument()
-  })
-
-  it('calls onChange and closes menu when an option is selected', () => {
-    const onChange = vi.fn()
-    renderWith(<Select options={options} value="a" onChange={onChange} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-    fireEvent.click(screen.getByRole('option', { name: /charlie/i }))
-
-    expect(onChange).toHaveBeenCalledWith('c')
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-  })
-
-  it('closes on Escape key', () => {
-    renderWith(<Select options={options} value="a" onChange={vi.fn()} />)
-
-    const button = screen.getByRole('button', { name: /alpha/i })
-    fireEvent.click(button)
-    expect(screen.getByRole('listbox')).toBeInTheDocument()
-
-    fireEvent.keyDown(button, { key: 'Escape' })
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-  })
-
-  it('closes on click outside', () => {
-    renderWith(<Select options={options} value="a" onChange={vi.fn()} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-    expect(screen.getByRole('listbox')).toBeInTheDocument()
-
-    fireEvent.mouseDown(document.body)
-    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
-  })
-
-  it('navigates with arrow keys and selects with Enter', () => {
-    const onChange = vi.fn()
-    renderWith(<Select options={options} value="a" onChange={onChange} />)
-
-    const button = screen.getByRole('button', { name: /alpha/i })
-    fireEvent.click(button)
-
-    fireEvent.keyDown(button, { key: 'ArrowDown' })
-    fireEvent.keyDown(button, { key: 'ArrowDown' })
-    fireEvent.keyDown(button, { key: 'Enter' })
-
-    expect(onChange).toHaveBeenCalledWith('b')
-  })
-
-  it('renders groups with headers', () => {
-    renderWith(<Select groups={groups} value="a" onChange={vi.fn()} />)
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-
-    expect(screen.getByText('Letters')).toBeInTheDocument()
-    expect(screen.getByText('Numbers')).toBeInTheDocument()
-    expect(screen.getByRole('option', { name: /one/i })).toBeInTheDocument()
-  })
-
-  it('uses renderOption for custom item rendering', () => {
-    renderWith(
-      <Select
-        options={options}
-        value="a"
-        onChange={vi.fn()}
-        renderOption={option => <span data-testid="custom">{option.label.toUpperCase()}</span>}
-      />,
-    )
-
-    fireEvent.click(screen.getByRole('button', { name: /alpha/i }))
-
-    expect(screen.getAllByTestId('custom')).toHaveLength(3)
-    expect(screen.getByText('BRAVO')).toBeInTheDocument()
-  })
-
-  it('shows placeholder when value does not match any option', () => {
-    renderWith(<Select options={options} value="x" onChange={vi.fn()} placeholder="Pick one" />)
-
-    expect(screen.getByRole('button', { name: /pick one/i })).toBeInTheDocument()
-  })
-})

package/src/Slider/Slider.vi.tsx

@@ -1,29 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { Slider } from './Slider'
-
-afterEach(cleanup)
-
-describe('Slider', () => {
-  it('renders a slider with the correct value', () => {
-    render(<Slider value={50} onChange={() => {}} min={0} max={100} aria-label="Volume" />)
-    const slider = screen.getByRole('slider')
-    expect(slider).toHaveAttribute('aria-valuenow', '50')
-  })
-
-  it('calls onCommit when interaction ends', () => {
-    const onCommit = vi.fn()
-    render(
-      <Slider
-        value={50}
-        onChange={() => {}}
-        onCommit={onCommit}
-        min={0}
-        max={100}
-        aria-label="Volume"
-      />,
-    )
-    // Just verify it renders without error — slider drag testing is unreliable in jsdom
-    expect(screen.getByRole('slider')).toBeInTheDocument()
-  })
-})

package/src/Switch/Switch.vi.tsx

@@ -1,31 +0,0 @@
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { Switch } from './Switch'
-
-afterEach(cleanup)
-
-describe('Switch', () => {
-  it('renders as a switch with the correct checked state', () => {
-    render(<Switch checked={true} onChange={() => {}} aria-label="Toggle" />)
-    expect(screen.getByRole('switch')).toBeChecked()
-  })
-
-  it('calls onChange when clicked', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(<Switch checked={false} onChange={onChange} aria-label="Toggle" />)
-
-    await user.click(screen.getByRole('switch'))
-    expect(onChange).toHaveBeenCalledWith(true)
-  })
-
-  it('does not call onChange when disabled', async () => {
-    const user = userEvent.setup()
-    const onChange = vi.fn()
-    render(<Switch checked={false} onChange={onChange} disabled aria-label="Toggle" />)
-
-    await user.click(screen.getByRole('switch'))
-    expect(onChange).not.toHaveBeenCalled()
-  })
-})

package/src/Tooltip/Tooltip.stories.tsx

@@ -1,161 +0,0 @@
-import type { ComponentProps } from 'react'
-import { expect, waitFor } from 'storybook/test'
-import preview from '../../../.storybook/preview'
-import { Tooltip } from './Tooltip'
-
-type TooltipProps = ComponentProps<typeof Tooltip>
-
-const meta = preview.type<{ args: TooltipProps }>().meta({
-  component: Tooltip,
-  argTypes: {
-    position: {
-      control: 'select',
-      options: ['top', 'bottom'],
-    },
-    disabled: { control: 'boolean' },
-    delay: { control: 'number' },
-    maxWidth: { control: 'number' },
-  },
-  args: {
-    label: 'Tooltip label',
-    children: <button style={{ padding: '8px 16px' }}>Hover me</button>,
-  },
-  decorators: [
-    Story => (
-      <div style={{ padding: 80, display: 'flex', justifyContent: 'center' }}>
-        <Story />
-      </div>
-    ),
-  ],
-})
-
-// --- Variants ---
-
-/** Label-only tooltip with no shortcut — the most common usage. */
-export const Default = meta.story({
-  args: { label: 'Default tooltip' },
-})
-Default.test('is hidden by default', async ({ canvas }) => {
-  await expect(canvas.queryByRole('tooltip')).toBeNull()
-})
-Default.test('shows on hover and hides on leave', async ({ canvas, userEvent }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.hover(button)
-  await waitFor(() => expect(canvas.getByRole('tooltip')).toHaveTextContent('Default tooltip'))
-  await userEvent.unhover(button)
-  await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
-})
-Default.test('shows on focus and hides on blur', async ({ canvas }) => {
-  const button = await canvas.findByRole('button')
-  button.focus()
-  await waitFor(() => expect(canvas.getByRole('tooltip')).toHaveTextContent('Default tooltip'))
-  button.blur()
-  await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
-})
-Default.test('does not render kbd when shortcut omitted', async ({ canvas, userEvent }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.hover(button)
-  await waitFor(() => {
-    expect(canvas.getByRole('tooltip').querySelector('kbd')).toBeNull()
-  })
-})
-Default.test('hides on pointerdown', async ({ canvas, userEvent }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.hover(button)
-  await waitFor(() => expect(canvas.getByRole('tooltip')).toBeInTheDocument())
-  await userEvent.pointer({ keys: '[MouseLeft>]', target: button })
-  await waitFor(() => expect(canvas.queryByRole('tooltip')).toBeNull())
-})
-
-/** Single-key shortcut badge shown alongside the label. */
-export const WithShortcut = meta.story({
-  args: { label: 'Play', shortcut: 'Space' },
-})
-WithShortcut.test('renders shortcut kbd on hover', async ({ canvas, userEvent }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.hover(button)
-  await waitFor(() => {
-    const tooltip = canvas.getByRole('tooltip')
-    expect(tooltip).toHaveTextContent('Play')
-    expect(tooltip.querySelector('kbd')).not.toBeNull()
-  })
-})
-
-/** Multi-key combo shortcut — each key rendered as a separate Kbd element. */
-export const WithComboShortcut = meta.story({
-  args: { label: 'Search', shortcut: ['mod', 'F'] },
-})
-WithComboShortcut.test('renders multiple kbd elements for combo', async ({ canvas, userEvent }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.hover(button)
-  await waitFor(() => {
-    const kbdElements = canvas.getByRole('tooltip').querySelectorAll('kbd')
-    expect(kbdElements.length).toBe(2)
-  })
-})
-
-/** Tooltip anchored below the trigger — used in headers and top-of-page areas. */
-export const BottomPosition = meta.story({
-  args: { label: 'Bottom tooltip', position: 'bottom' },
-})
-
-/** Long text constrained to a max width, wrapping across multiple lines. */
-export const WithMaxWidth = meta.story({
-  args: {
-    label: 'This is a very long tooltip that should wrap to multiple lines when maxWidth is set',
-    maxWidth: 200,
-  },
-})
-WithMaxWidth.test('applies max-width style and wraps text', async ({ canvas, userEvent }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.hover(button)
-  await waitFor(() => {
-    const tooltip = canvas.getByRole('tooltip')
-    expect(tooltip).toHaveStyle({ maxWidth: '200px' })
-    expect(tooltip.className).toContain('whitespace-normal')
-  })
-})
-
-/** Tooltip suppressed while a popover or menu is open. */
-export const Disabled = meta.story({
-  args: { label: 'Disabled tooltip', disabled: true },
-})
-Disabled.test('does not show when disabled', async ({ canvas, userEvent }) => {
-  const button = await canvas.findByRole('button')
-  await userEvent.hover(button)
-  await new Promise(r => setTimeout(r, 300))
-  await expect(canvas.queryByRole('tooltip')).toBeNull()
-})
-
-/** Longer delay for progressive-disclosure tooltips on data visualizations. */
-export const CustomDelay = meta.story({
-  args: { label: 'Slow tooltip', delay: 500 },
-})
-
-/** Icon-only button that gets its accessible name from the tooltip label. */
-export const IconOnlyTrigger = meta.story({
-  args: {
-    label: 'Previous Sentence',
-    children: (
-      <button>
-        <span>icon</span>
-      </button>
-    ),
-  },
-})
-IconOnlyTrigger.test('sets aria-label from label prop', async ({ canvas }) => {
-  const button = await canvas.findByRole('button')
-  await expect(button).toHaveAttribute('aria-label', 'Previous Sentence')
-})
-
-/** Trigger with a pre-existing aria-label that should not be overwritten. */
-export const CustomAriaLabel = meta.story({
-  args: {
-    label: 'Previous Sentence',
-    children: <button aria-label="Custom label">icon</button>,
-  },
-})
-CustomAriaLabel.test('preserves existing aria-label on trigger', async ({ canvas }) => {
-  const button = await canvas.findByRole('button')
-  await expect(button).toHaveAttribute('aria-label', 'Custom label')
-})

package/src/helpers/getModKey/getModKey.vi.ts

@@ -1,23 +0,0 @@
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { getModKey } from './getModKey'
-
-describe('getModKey', () => {
-  afterEach(() => {
-    vi.unstubAllGlobals()
-  })
-
-  it('returns "Cmd" on Mac', () => {
-    vi.stubGlobal('navigator', { userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)' })
-    expect(getModKey()).toBe('Cmd')
-  })
-
-  it('returns "Ctrl" on Windows', () => {
-    vi.stubGlobal('navigator', { userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)' })
-    expect(getModKey()).toBe('Ctrl')
-  })
-
-  it('returns "Ctrl" when navigator is undefined', () => {
-    vi.stubGlobal('navigator', undefined)
-    expect(getModKey()).toBe('Ctrl')
-  })
-})