@proteos/ui 0.31.0

package/src/components/separator/separator.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Separator } from './separator'
+
+const meta: Meta<typeof Separator> = {
+  title: 'Components/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: { type: 'inline-radio' },
+      options: ['horizontal', 'vertical'],
+    },
+    variant: {
+      control: { type: 'inline-radio' },
+      options: ['dashed', 'solid'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Separator>
+
+export const Dashed: Story = {
+  args: { variant: 'dashed' },
+  render: (args) => (
+    <div className="w-[360px] flex flex-col gap-3 text-[14px] text-ink-2">
+      <div>Records, tables, dashboards.</div>
+      <Separator {...args} />
+      <div className="font-mono text-[11.5px] text-ink-4">1,284 open · updated just now</div>
+    </div>
+  ),
+}
+
+export const Solid: Story = {
+  args: { variant: 'solid' },
+  render: (args) => (
+    <div className="w-[360px] flex flex-col gap-3 text-[14px] text-ink-2">
+      <div>Records, tables, dashboards.</div>
+      <Separator {...args} />
+      <div className="font-mono text-[11.5px] text-ink-4">1,284 open · updated just now</div>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="w-[360px] grid gap-6">
+      <div className="grid gap-3">
+        <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">Dashed</div>
+        <Separator variant="dashed" />
+      </div>
+      <div className="grid gap-3">
+        <div className="font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4">Solid</div>
+        <Separator variant="solid" />
+      </div>
+    </div>
+  ),
+}
+
+export const Vertical: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="h-8 flex items-center gap-3 font-mono text-[12.5px] text-ink-3">
+      <span>Filter</span>
+      <Separator orientation="vertical" />
+      <span>Group</span>
+      <Separator orientation="vertical" variant="solid" />
+      <span>Export</span>
+    </div>
+  ),
+}

package/src/components/separator/separator.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Separator } from './separator'
+
+describe('Separator', () => {
+  it('renders with role="separator" by default', () => {
+    render(<Separator />)
+    expect(screen.getByRole('separator')).toBeInTheDocument()
+  })
+
+  it('is horizontal by default', () => {
+    render(<Separator />)
+    // <hr> elements default to aria-orientation="horizontal" (implicit via role)
+    const sep = screen.getByRole('separator')
+    expect(sep.tagName.toLowerCase()).toBe('hr')
+  })
+
+  it('reports vertical orientation when requested', () => {
+    render(<Separator orientation="vertical" />)
+    const sep = screen.getByRole('separator')
+    expect(sep).toHaveAttribute('aria-orientation', 'vertical')
+  })
+
+  it('merges custom classes', () => {
+    render(<Separator className="my-4" />)
+    expect(screen.getByRole('separator').className).toContain('my-4')
+  })
+})

package/src/components/separator/separator.tsx

@@ -0,0 +1,51 @@
+import {
+  Separator as AriaSeparator,
+  type SeparatorProps as AriaSeparatorProps,
+} from 'react-aria-components'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Separator — hairline divider between sections.
+   - Default: dashed horizontal rule (matches the Proteos card/modal convention).
+   - `variant="solid"` for a continuous hairline (section breaks inside dense
+     tables, sidebars, etc. — see the spec's sub-label rows).
+   - `orientation="vertical"` for inline toolbars / nav separators.
+   ========================================================================= */
+
+export const separatorStyles = tv({
+  base: 'm-0 border-0 border-rule',
+  variants: {
+    orientation: {
+      horizontal: 'w-full border-t',
+      vertical: 'h-full border-l',
+    },
+    variant: {
+      dashed: 'border-dashed',
+      solid: 'border-solid',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'dashed',
+  },
+})
+
+export type SeparatorVariants = VariantProps<typeof separatorStyles>
+export type SeparatorProps = AriaSeparatorProps & { variant?: SeparatorVariants['variant'] }
+
+export function Separator({
+  className,
+  orientation = 'horizontal',
+  variant = 'dashed',
+  ...props
+}: SeparatorProps) {
+  return (
+    <AriaSeparator
+      {...props}
+      orientation={orientation}
+      className={cn(separatorStyles({ orientation, variant }), className)}
+    />
+  )
+}

package/src/components/skeleton/index.ts

@@ -0,0 +1,2 @@
+export type { SkeletonProps, SkeletonVariants } from './skeleton'
+export { Skeleton, skeletonStyles } from './skeleton'

package/src/components/skeleton/skeleton.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Skeleton } from './skeleton'
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  args: {
+    shape: 'rect',
+    className: 'size-12',
+  },
+  argTypes: {
+    shape: {
+      control: { type: 'inline-radio' },
+      options: ['rect', 'circle', 'text'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Skeleton>
+
+export const Playground: Story = {}
+
+export const Shapes: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Skeleton className="size-12" />
+      <Skeleton shape="circle" className="size-12" />
+      <Skeleton shape="text" className="w-40" />
+    </div>
+  ),
+}
+
+// Mirrors a typical "loading user row" — avatar + two stacked text lines.
+export const RowExample: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div role="status" aria-label="Loading" className="flex items-center gap-3 w-[280px]">
+      <Skeleton shape="circle" className="size-10 shrink-0" />
+      <div className="flex-1 flex flex-col gap-2">
+        <Skeleton shape="text" className="w-3/4" />
+        <Skeleton shape="text" className="w-1/2" />
+      </div>
+    </div>
+  ),
+}
+
+// Full app-layout shaped placeholder, mirroring the AppShell composition.
+export const AppLayout: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div role="status" aria-label="Loading workspace" className="flex h-[400px] w-[640px] gap-2">
+      <div className="w-[180px] h-full p-2 bg-surface-2 border border-rule rounded-md flex flex-col gap-2">
+        <Skeleton className="h-8 w-full" />
+        <Skeleton className="h-6 w-full" />
+        <Skeleton className="h-6 w-full" />
+        <Skeleton className="h-6 w-full" />
+      </div>
+      <div className="flex-1 p-2 flex flex-col gap-2">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="flex-1 w-full" />
+      </div>
+    </div>
+  ),
+}

package/src/components/skeleton/skeleton.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { Skeleton } from './skeleton'
+
+describe('Skeleton', () => {
+  it('is hidden from assistive tech by default', () => {
+    render(<Skeleton data-testid="sk" />)
+    expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('applies the rect (default) shape classes', () => {
+    render(<Skeleton data-testid="sk" />)
+    expect(screen.getByTestId('sk').className).toContain('rounded-md')
+  })
+
+  it('applies the circle shape classes', () => {
+    render(<Skeleton shape="circle" data-testid="sk" />)
+    expect(screen.getByTestId('sk').className).toContain('rounded-full')
+  })
+
+  it('applies the text shape classes', () => {
+    render(<Skeleton shape="text" data-testid="sk" />)
+    expect(screen.getByTestId('sk').className).toContain('rounded-sm')
+  })
+
+  it('merges custom classes', () => {
+    render(<Skeleton className="size-10" data-testid="sk" />)
+    const el = screen.getByTestId('sk')
+    expect(el.className).toContain('size-10')
+    expect(el.className).toContain('animate-pulse')
+  })
+
+  it('lets the consumer override aria-hidden when announcing the loading state', () => {
+    render(<Skeleton aria-hidden={false} data-testid="sk" />)
+    expect(screen.getByTestId('sk')).toHaveAttribute('aria-hidden', 'false')
+  })
+})

package/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,43 @@
+import type { HTMLAttributes } from 'react'
+import { tv, type VariantProps } from 'tailwind-variants'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   Skeleton — content placeholder for loading states.
+   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has
+   no Skeleton — interactive primitives only). Accessibility lives in props:
+   - decorative skeletons get `aria-hidden` so screen readers ignore them
+   - skeletons that *announce* the loading state should be wrapped in a
+     `role="status"` region by the consumer (e.g. AppLayoutSkeleton).
+   ========================================================================= */
+
+export const skeletonStyles = tv({
+  base: ['animate-pulse', 'bg-surface-3'],
+  variants: {
+    shape: {
+      rect: 'rounded-md',
+      circle: 'rounded-full',
+      // `text` matches a typical line of body text — width is up to the
+      // consumer; the rounded-sm + height keep proportions sensible.
+      text: 'h-4 w-full rounded-sm',
+    },
+  },
+  defaultVariants: { shape: 'rect' },
+})
+
+export type SkeletonVariants = VariantProps<typeof skeletonStyles>
+export type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants
+
+export function Skeleton({ shape, className, ...props }: SkeletonProps) {
+  return (
+    <div
+      // Decorative by default. Consumers that want screen readers to announce
+      // the loading state should wrap a Skeleton group in `role="status"`
+      // and pass `aria-hidden={false}` here, or just rely on the wrapper.
+      aria-hidden="true"
+      {...props}
+      className={cn(skeletonStyles({ shape }), className)}
+    />
+  )
+}

package/src/components/success-animation/index.ts

@@ -0,0 +1,2 @@
+export type { SuccessAnimationProps } from './success-animation'
+export { SuccessAnimation } from './success-animation'

package/src/components/success-animation/success-animation.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Button } from '../button/button'
+
+import { SuccessAnimation } from './success-animation'
+
+const meta: Meta<typeof SuccessAnimation> = {
+  title: 'Components/SuccessAnimation',
+  component: SuccessAnimation,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SuccessAnimation>
+
+export const Playground: Story = {
+  render: (args) => (
+    <div className="size-32">
+      <SuccessAnimation {...args} />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="flex items-end gap-6">
+      <SuccessAnimation className="size-16" />
+      <SuccessAnimation className="size-24" />
+      <SuccessAnimation className="size-40" />
+    </div>
+  ),
+}
+
+// Replay demo — remount the component to restart the one-shot entrance.
+export const Replay: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const [key, setKey] = useState(0)
+    return (
+      <div className="flex flex-col items-center gap-4">
+        <SuccessAnimation key={key} className="size-32" />
+        <Button size="sm" variant="ghost" onPress={() => setKey((k) => k + 1)}>
+          Replay
+        </Button>
+      </div>
+    )
+  },
+}

package/src/components/success-animation/success-animation.test.tsx

@@ -0,0 +1,22 @@
+import { render } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { SuccessAnimation } from './success-animation'
+
+describe('SuccessAnimation', () => {
+  it('renders a decorative wrapper with default sizing and the success color', () => {
+    const { container } = render(<SuccessAnimation />)
+    const wrapper = container.firstElementChild as HTMLElement | null
+    expect(wrapper).not.toBeNull()
+    expect(wrapper).toHaveAttribute('aria-hidden')
+    expect(wrapper?.className).toContain('size-24')
+    expect(wrapper?.className).toContain('text-success')
+    expect(wrapper?.querySelector('svg')).not.toBeNull()
+  })
+
+  it('forwards className to override the default size', () => {
+    const { container } = render(<SuccessAnimation className="size-40" />)
+    const wrapper = container.firstElementChild as HTMLElement | null
+    expect(wrapper?.className).toContain('size-40')
+  })
+})

package/src/components/success-animation/success-animation.tsx

@@ -0,0 +1,26 @@
+import { CircleCheck } from 'lucide-react'
+
+import { cn } from '../../lib/cn'
+
+/* =========================================================================
+   SuccessAnimation — success confirmation: a large green checkmark in a
+   circle (token `--color-success`), entering with the one-shot status-pop
+   scale+fade (suppressed under prefers-reduced-motion). Decorative:
+   rendered with `aria-hidden`, since the surrounding text region carries
+   the announcement. Size via className (default 96×96).
+   ========================================================================= */
+
+export type SuccessAnimationProps = {
+  className?: string
+}
+
+export function SuccessAnimation({ className }: SuccessAnimationProps) {
+  return (
+    <div
+      aria-hidden
+      className={cn('size-24 text-success motion-safe:animate-status-pop', className)}
+    >
+      <CircleCheck className="size-full" strokeWidth={1.5} />
+    </div>
+  )
+}

package/src/components/switch/index.ts

@@ -0,0 +1,2 @@
+export type { SwitchProps } from './switch'
+export { Switch } from './switch'

package/src/components/switch/switch.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Switch } from './switch'
+
+const meta: Meta<typeof Switch> = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  args: {
+    children: 'Live architect',
+  },
+  argTypes: {
+    isDisabled: { control: { type: 'boolean' } },
+    isSelected: { control: { type: 'boolean' } },
+    labelPlacement: {
+      control: { type: 'inline-radio' },
+      options: ['start', 'end'],
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Switch>
+
+export const Playground: Story = {}
+
+export const Row: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="grid gap-4 w-[360px]">
+      <div className="flex items-center justify-between">
+        <Switch labelPlacement="start" defaultSelected>
+          Live architect
+        </Switch>
+      </div>
+      <div className="flex items-center justify-between">
+        <Switch labelPlacement="start">Speaker notes</Switch>
+      </div>
+      <div className="flex items-center justify-between">
+        <Switch labelPlacement="start" defaultSelected>
+          Version history
+        </Switch>
+      </div>
+    </div>
+  ),
+}
+
+export const AllStates: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => (
+    <div className="grid gap-3">
+      <Switch>Off</Switch>
+      <Switch defaultSelected>On</Switch>
+      <Switch isDisabled>Disabled · off</Switch>
+      <Switch isDisabled defaultSelected>
+        Disabled · on
+      </Switch>
+    </div>
+  ),
+}

package/src/components/switch/switch.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { Switch } from './switch'
+
+describe('Switch', () => {
+  it('renders its label with role switch', () => {
+    render(<Switch>Live architect</Switch>)
+    expect(screen.getByRole('switch', { name: 'Live architect' })).toBeInTheDocument()
+  })
+
+  it('toggles on click', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Switch onChange={onChange}>Live architect</Switch>)
+
+    await user.click(screen.getByRole('switch', { name: 'Live architect' }))
+    expect(onChange).toHaveBeenCalledWith(true)
+  })
+
+  it('toggles on keyboard Space', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Switch onChange={onChange}>Live architect</Switch>)
+
+    await user.tab()
+    expect(screen.getByRole('switch')).toHaveFocus()
+    await user.keyboard(' ')
+    expect(onChange).toHaveBeenCalledWith(true)
+  })
+
+  it('does not toggle when disabled', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(
+      <Switch onChange={onChange} isDisabled>
+        Live architect
+      </Switch>,
+    )
+
+    await user.click(screen.getByRole('switch', { name: 'Live architect' }))
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('reflects a controlled selected state', () => {
+    render(<Switch isSelected>Version history</Switch>)
+    expect(screen.getByRole('switch', { name: 'Version history' })).toBeChecked()
+  })
+})

package/src/components/switch/switch.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react'
+import { Switch as AriaSwitch, type SwitchProps as AriaSwitchProps } from 'react-aria-components'
+
+import { cn } from '../../lib/cn'
+
+export type SwitchProps = Omit<AriaSwitchProps, 'children'> & {
+  children?: ReactNode
+  /** Render the label before the track instead of after it. */
+  labelPlacement?: 'start' | 'end'
+}
+
+export function Switch({ children, labelPlacement = 'end', className, ...props }: SwitchProps) {
+  return (
+    <AriaSwitch
+      {...props}
+      className={(renderProps) =>
+        cn(
+          'group inline-flex items-center gap-3 cursor-pointer select-none',
+          'font-sans text-[14px] text-ink-2',
+          labelPlacement === 'start' && 'flex-row-reverse',
+          'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
+          typeof className === 'function' ? className(renderProps) : className,
+        )
+      }
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'relative inline-block shrink-0',
+          'w-[38px] h-[22px] rounded-pill border',
+          'bg-surface-3 border-rule',
+          'transition-[background-color,border-color] duration-150',
+          'group-data-[selected]:bg-accent group-data-[selected]:border-accent',
+          'group-data-[focus-visible]:shadow-[var(--shadow-focus)]',
+        )}
+      >
+        <span
+          className={cn(
+            'absolute top-[1px] left-[1px]',
+            'block size-[18px] rounded-full bg-surface',
+            'transition-transform duration-200',
+            'group-data-[selected]:translate-x-[16px]',
+          )}
+        />
+      </span>
+      {children}
+    </AriaSwitch>
+  )
+}

package/src/components/table/index.ts

@@ -0,0 +1,25 @@
+export type {
+  ColumnDragData,
+  SortDirection,
+  TableBodyProps,
+  TableCellProps,
+  TableHeaderCellProps,
+  TableHeaderProps,
+  TableProps,
+  TableRowProps,
+  TableVariants,
+} from './table'
+export {
+  COLUMN_DRAG_KIND,
+  isColumnDragData,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableHeaderSpacer,
+  TableRow,
+  TableScroller,
+  tableCellStyles,
+  tableHeaderCellStyles,
+} from './table'