@proteos/ui 0.55.0 → 0.57.0

package/src/components/button/button.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import { Button } from './button'
+import { Button, buttonStyles, type ButtonVariants } from './button'
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
   component: Button,
   tags: ['autodocs'],
   args: {
-    children: 'Start building →',
+    children: 'Save changes',
     variant: 'primary',
     size: 'md',
     shape: 'rounded',
@@ -15,7 +15,7 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     variant: {
       control: { type: 'inline-radio' },
-      options: ['primary', 'accent', 'secondary', 'ghost', 'link'],
+      options: ['cta', 'primary', 'secondary', 'ghost', 'subtle', 'link', 'danger'],
     },
     size: {
       control: { type: 'inline-radio' },
@@ -34,35 +34,55 @@ type Story = StoryObj<typeof Button>
 
 export const Playground: Story = {}
 
-const Arrow = () => (
-  <svg viewBox="0 0 12 12" fill="none" aria-hidden>
-    <path d="M2 6h8m-3-3 3 3-3 3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
+const Plus = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
   </svg>
 )
 
-export const Primary: Story = {
+const ArrowRight = () => (
+  <svg viewBox="0 0 16 16" fill="none" aria-hidden>
+    <path
+      d="M3 8h10m-4-4 4 4-4 4"
+      stroke="currentColor"
+      strokeWidth="1.4"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+/* =========================================================================
+   The ladder. One `cta` per view; `primary` is the everyday button; the rest
+   step down. `accent` (not shown) is a frozen alias of `cta`.
+   ========================================================================= */
+
+export const Cta: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">
-      <Button>Start building →</Button>
-      <Button size="sm">Save</Button>
-      <Button size="lg">Compose system</Button>
-      <Button isDisabled>Disabled</Button>
+      <Button variant="cta" size="sm">
+        New record
+      </Button>
+      <Button variant="cta">
+        Publish changes <ArrowRight />
+      </Button>
+      <Button variant="cta" size="lg">
+        Sign in
+      </Button>
+      <Button variant="cta" isDisabled>
+        Disabled
+      </Button>
     </div>
   ),
 }
 
-export const Accent: Story = {
+export const Primary: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">
-      <Button variant="accent">
-        Compose <Arrow />
-      </Button>
-      <Button variant="accent" size="sm">
-        Run
-      </Button>
-      <Button variant="accent" size="lg">
-        Publish changes
-      </Button>
+      <Button size="sm">Save</Button>
+      <Button>Save changes</Button>
+      <Button size="lg">Duplicate</Button>
+      <Button isDisabled>Disabled</Button>
     </div>
   ),
 }
@@ -70,12 +90,12 @@ export const Accent: Story = {
 export const Secondary: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">
-      <Button variant="secondary">Read manifesto</Button>
       <Button variant="secondary" size="sm">
         Cancel
       </Button>
+      <Button variant="secondary">Cancel</Button>
       <Button variant="secondary" size="lg">
-        Book a demo
+        Back
       </Button>
     </div>
   ),
@@ -89,7 +109,20 @@ export const Ghost: Story = {
         Group
       </Button>
       <Button variant="ghost">Export</Button>
-      <Button variant="ghost">+ New shipment</Button>
+    </div>
+  ),
+}
+
+export const Subtle: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="subtle">More</Button>
+      <Button variant="subtle" size="sm">
+        Edit
+      </Button>
+      <Button variant="subtle" size="icon-md" aria-label="Add">
+        <Plus />
+      </Button>
     </div>
   ),
 }
@@ -99,7 +132,21 @@ export const Link: Story = {
     <div className="flex flex-wrap items-center gap-6">
       <Button variant="link">Read the docs</Button>
       <Button variant="link">View architecture</Button>
-      <Button variant="link">Schedule an architect</Button>
+    </div>
+  ),
+}
+
+export const Danger: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="secondary">Cancel</Button>
+      <Button variant="danger">Delete record</Button>
+      <Button variant="danger" size="sm">
+        Remove
+      </Button>
+      <Button variant="danger" isDisabled>
+        Disabled
+      </Button>
     </div>
   ),
 }
@@ -111,107 +158,176 @@ export const AllVariants: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => (
     <div className={columns}>
-      <div className={label}>Primary</div>
+      <div className={label}>cta</div>
       <div className="flex flex-wrap items-center gap-3">
-        <Button size="sm">Save</Button>
-        <Button>Start building →</Button>
-        <Button size="lg">Compose system</Button>
-        <Button isDisabled>Disabled</Button>
-      </div>
-
-      <div className={label}>Accent</div>
-      <div className="flex flex-wrap items-center gap-3">
-        <Button variant="accent" size="sm">
-          Run
+        <Button variant="cta" size="sm">
+          New record
         </Button>
-        <Button variant="accent">
-          Compose <Arrow />
+        <Button variant="cta">
+          Publish changes <ArrowRight />
         </Button>
-        <Button variant="accent" size="lg">
-          Publish changes
+        <Button variant="cta" size="lg">
+          Sign in
         </Button>
       </div>
 
-      <div className={label}>Secondary</div>
+      <div className={label}>primary</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button size="sm">Save</Button>
+        <Button>Save changes</Button>
+        <Button size="lg">Duplicate</Button>
+        <Button isDisabled>Disabled</Button>
+      </div>
+
+      <div className={label}>secondary</div>
       <div className="flex flex-wrap items-center gap-3">
         <Button variant="secondary" size="sm">
           Cancel
         </Button>
-        <Button variant="secondary">Read manifesto</Button>
+        <Button variant="secondary">Cancel</Button>
         <Button variant="secondary" size="lg">
-          Book a demo
+          Back
         </Button>
       </div>
 
-      <div className={label}>Ghost</div>
+      <div className={label}>ghost</div>
       <div className="flex flex-wrap items-center gap-3">
         <Button variant="ghost" size="sm">
           Group
         </Button>
         <Button variant="ghost">Filter</Button>
-        <Button variant="ghost">+ New shipment</Button>
+        <Button variant="ghost">Export</Button>
       </div>
 
-      <div className={label}>Link</div>
+      <div className={label}>subtle</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="subtle" size="sm">
+          Edit
+        </Button>
+        <Button variant="subtle">More</Button>
+      </div>
+
+      <div className={label}>link</div>
       <div className="flex flex-wrap items-center gap-6">
         <Button variant="link">Read the docs</Button>
         <Button variant="link">View architecture</Button>
       </div>
+
+      <div className={label}>danger</div>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="danger" size="sm">
+          Remove
+        </Button>
+        <Button variant="danger">Delete record</Button>
+      </div>
     </div>
   ),
 }
 
 /* =========================================================================
-   Shape — default `rounded` (soft 10px corners, the new standard) vs `pill`
-   (fully-rounded, used sparingly for prominent CTAs / filters).
+   ControlsLadder — every variant × every interaction state, pinned. RAC
+   overwrites user-supplied data-* state on the live <Button>, so the pinned
+   columns are static spans wearing `buttonStyles(...)` — which is exactly why
+   the style function is exported. Rendered on the page ground AND on a white
+   surface so raised-vs-muted stays reviewable in every theme.
    ========================================================================= */
 
-export const Rounded: Story = {
-  render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button variant="ghost">Filter</Button>
-      <Button variant="ghost">Group</Button>
-      <Button>+ New shipment</Button>
+const LADDER: ReadonlyArray<NonNullable<ButtonVariants['variant']>> = [
+  'cta',
+  'primary',
+  'secondary',
+  'ghost',
+  'subtle',
+  'link',
+  'danger',
+]
+
+const STATES = [
+  { key: 'rest', title: 'rest', attrs: {} },
+  { key: 'hovered', title: 'hover', attrs: { 'data-hovered': '' } },
+  { key: 'pressed', title: 'press', attrs: { 'data-pressed': '' } },
+  { key: 'focus', title: 'focus', attrs: {}, className: 'shadow-[var(--shadow-focus)]' },
+  { key: 'disabled', title: 'disabled', attrs: {}, className: 'opacity-45' },
+] as const
+
+function Ladder({ ground }: { ground: 'bg-bg' | 'bg-surface' }) {
+  return (
+    <div className={`${ground} rounded-lg border border-rule p-5`}>
+      <div className="grid grid-cols-[96px_repeat(5,minmax(0,1fr))] items-center gap-x-4 gap-y-3">
+        <div className={label}>{ground === 'bg-bg' ? 'on bg' : 'on surface'}</div>
+        {STATES.map((state) => (
+          <div key={state.key} className={`${label} text-center`}>
+            {state.title}
+          </div>
+        ))}
+        {LADDER.map((variant) => (
+          <div key={variant} className="contents">
+            <div className="font-mono text-[11px] text-ink-3">{variant}</div>
+            <div className="flex justify-center">
+              <Button variant={variant} size="sm">
+                Label
+              </Button>
+            </div>
+            {STATES.slice(1).map((state) => (
+              <div key={state.key} className="flex justify-center">
+                <span
+                  {...state.attrs}
+                  className={buttonStyles({
+                    variant,
+                    size: 'sm',
+                    className: 'className' in state ? state.className : undefined,
+                  })}
+                >
+                  Label
+                </span>
+              </div>
+            ))}
+          </div>
+        ))}
+      </div>
     </div>
-  ),
+  )
 }
 
-export const Pill: Story = {
+export const ControlsLadder: Story = {
+  parameters: { controls: { hideNoControlsWarning: true }, layout: 'padded' },
   render: () => (
-    <div className="flex flex-wrap items-center gap-3">
-      <Button shape="pill" variant="ghost">
-        Filter
-      </Button>
-      <Button shape="pill" variant="ghost">
-        Group
-      </Button>
-      <Button shape="pill">+ New shipment</Button>
+    <div className="grid gap-4">
+      <Ladder ground="bg-bg" />
+      <Ladder ground="bg-surface" />
     </div>
   ),
 }
 
+/* =========================================================================
+   Shape — default `rounded` (soft 10px corners) vs `pill` (fully-rounded,
+   used sparingly for prominent CTAs / filters).
+   ========================================================================= */
+
 export const Shapes: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => (
     <div className={columns}>
       <div className={label}>Rounded</div>
       <div className="flex flex-wrap items-center gap-3">
-        <Button variant="ghost" size="sm">
+        <Button variant="secondary" size="sm">
           Filter
         </Button>
-        <Button variant="ghost">Group</Button>
-        <Button>+ New shipment</Button>
+        <Button>Group</Button>
+        <Button variant="cta">
+          <Plus /> New shipment
+        </Button>
       </div>
 
       <div className={label}>Pill</div>
       <div className="flex flex-wrap items-center gap-3">
-        <Button shape="pill" variant="ghost" size="sm">
+        <Button shape="pill" variant="secondary" size="sm">
           Filter
         </Button>
-        <Button shape="pill" variant="ghost">
-          Group
+        <Button shape="pill">Group</Button>
+        <Button shape="pill" variant="cta">
+          <Plus /> New shipment
         </Button>
-        <Button shape="pill">+ New shipment</Button>
       </div>
     </div>
   ),
@@ -220,68 +336,57 @@ export const Shapes: Story = {
 /* =========================================================================
    Icon-only — square dimensions via `size="icon-sm | icon-md | icon-lg"`.
    `aria-label` is required (not enforced at the type level — add it manually).
+   Raised `primary` is the toolbar register: a lighter inner on the page ground.
    ========================================================================= */
 
-const Plus = () => (
-  <svg viewBox="0 0 16 16" fill="none" aria-hidden>
-    <path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
-  </svg>
-)
-
-const ArrowRight = () => (
-  <svg viewBox="0 0 16 16" fill="none" aria-hidden>
-    <path
-      d="M3 8h10m-4-4 4 4-4 4"
-      stroke="currentColor"
-      strokeWidth="1.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-)
-
 export const IconOnly: Story = {
   parameters: { controls: { hideNoControlsWarning: true } },
   render: () => (
     <div className={columns}>
       <div className={label}>Sizes</div>
       <div className="flex items-center gap-3">
-        <Button size="icon-sm" variant="ghost" aria-label="Add">
+        <Button size="icon-sm" aria-label="Add">
           <Plus />
         </Button>
-        <Button size="icon-md" variant="ghost" aria-label="Add">
+        <Button size="icon-md" aria-label="Add">
           <Plus />
         </Button>
-        <Button size="icon-lg" variant="ghost" aria-label="Add">
+        <Button size="icon-lg" aria-label="Add">
           <Plus />
         </Button>
       </div>
 
       <div className={label}>Variants</div>
       <div className="flex items-center gap-3">
+        <Button size="icon-md" variant="cta" aria-label="Next">
+          <ArrowRight />
+        </Button>
         <Button size="icon-md" variant="primary" aria-label="Add">
           <Plus />
         </Button>
-        <Button size="icon-md" variant="accent" aria-label="Next">
-          <ArrowRight />
-        </Button>
         <Button size="icon-md" variant="secondary" aria-label="Add">
           <Plus />
         </Button>
         <Button size="icon-md" variant="ghost" aria-label="Add">
           <Plus />
         </Button>
+        <Button size="icon-md" variant="subtle" aria-label="Add">
+          <Plus />
+        </Button>
+        <Button size="icon-md" variant="danger" aria-label="Remove">
+          <Plus />
+        </Button>
       </div>
 
       <div className={label}>Pill shape</div>
       <div className="flex items-center gap-3">
-        <Button size="icon-sm" variant="ghost" shape="pill" aria-label="Add">
+        <Button size="icon-sm" variant="secondary" shape="pill" aria-label="Add">
           <Plus />
         </Button>
         <Button size="icon-md" variant="primary" shape="pill" aria-label="Add">
           <Plus />
         </Button>
-        <Button size="icon-lg" variant="accent" shape="pill" aria-label="Next">
+        <Button size="icon-lg" variant="cta" shape="pill" aria-label="Next">
           <ArrowRight />
         </Button>
       </div>

package/src/components/button/button.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { describe, expect, it, vi } from 'vitest'
 
-import { Button } from './button'
+import { Button, buttonStyles } from './button'
 
 describe('Button', () => {
   it('renders its label', () => {
@@ -46,14 +46,47 @@ describe('Button', () => {
     expect(onPress).not.toHaveBeenCalled()
   })
 
-  it('applies the requested variant and size classes', () => {
+  it('renders every variant as a button', () => {
+    const variants = ['cta', 'accent', 'primary', 'secondary', 'ghost', 'subtle', 'link', 'danger'] as const
     render(
-      <Button variant="accent" size="lg">
-        Publish
+      <>
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant}>
+            {variant}
+          </Button>
+        ))}
+      </>,
+    )
+    for (const variant of variants) {
+      expect(screen.getByRole('button', { name: variant })).toBeInTheDocument()
+    }
+  })
+
+  it('danger fires onPress like any other variant', async () => {
+    const onPress = vi.fn()
+    const user = userEvent.setup()
+
+    render(
+      <Button variant="danger" onPress={onPress}>
+        Delete record
       </Button>,
     )
-    const button = screen.getByRole('button', { name: 'Publish' })
-    expect(button.className).toContain('bg-accent')
-    expect(button.className).toContain('px-[22px]')
+    await user.click(screen.getByRole('button', { name: 'Delete record' }))
+
+    expect(onPress).toHaveBeenCalledOnce()
+  })
+
+  // Contract: `accent` is a frozen alias of `cta`. Variant names are part of
+  // the runtime contract for module component bundles, so the alias must keep
+  // producing the identical chrome rather than silently diverging.
+  it('keeps accent as an exact alias of cta', () => {
+    expect(buttonStyles({ variant: 'accent' })).toBe(buttonStyles({ variant: 'cta' }))
+    expect(buttonStyles({ variant: 'accent', size: 'sm', shape: 'pill' })).toBe(
+      buttonStyles({ variant: 'cta', size: 'sm', shape: 'pill' }),
+    )
+  })
+
+  it('defaults to the primary variant', () => {
+    expect(buttonStyles({})).toBe(buttonStyles({ variant: 'primary' }))
   })
 })

package/src/components/button/button.tsx

@@ -3,10 +3,56 @@ import { tv, type VariantProps } from 'tailwind-variants'
 
 import { cn } from '../../lib/cn'
 
+/* =========================================================================
+   Button — emphasis ladder, top to bottom:
+
+     cta        ink fill. The one strong action per view (never two visible).
+     primary    raised white: `surface` fill, `rule-strong` hairline, rest
+                shadow. The everyday button; the default variant.
+     secondary  muted: `surface-3` fill, no border. Cancel / supporting actions.
+     ghost      secondary's chrome, only on hover. Invisible at rest.
+     subtle     borderless text button (toolbars, icon buttons).
+     link       inline underline.
+     danger     solid terracotta for destructive confirms.
+
+   `accent` is a frozen alias of `cta` — variant names are part of the runtime
+   contract for module component bundles, so nothing is ever removed.
+
+   Interaction state comes from React Aria's data attributes (`hovered:`,
+   `pressed:` — see the @custom-variant block in styles.css); `focus-visible:`
+   and `disabled:` stay on the native pseudo-classes because the RAC root IS
+   the focusable <button>. Hover is always a colour step on the surface ramp,
+   never opacity; press is translateY(1px) plus one more ramp step.
+   ========================================================================= */
+
+// Ink fill with the indigo-tinted hover. Kept verbatim from the old primary.
+const ctaClasses = [
+  'bg-ink text-surface border-ink',
+  'hovered:bg-accent-ink hovered:border-accent-ink',
+]
+
+// Raised white: a lighter inner on the darker page ground. On a white card the
+// hairline + rest shadow carry it. Press sinks one step and drops the shadow.
+const raisedClasses = [
+  'bg-surface text-ink border-rule shadow-[var(--shadow-rest)]',
+  'hovered:bg-surface-2 hovered:border-rule-strong',
+  'pressed:bg-surface-3 pressed:shadow-none',
+  'focus-visible:shadow-[var(--shadow-focus),var(--shadow-rest)]',
+]
+
+// Muted gray fill, no border. One step quieter than primary.
+const mutedClasses = [
+  'bg-surface-3 text-ink-2 border-transparent',
+  'hovered:bg-surface-4 hovered:text-ink',
+  'pressed:bg-[color-mix(in_oklab,var(--color-ink)_8%,var(--color-surface-4))]',
+]
+
 export const buttonStyles = tv({
   base: [
     'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',
-    'font-mono tracking-[-0.005em] border border-transparent',
+    // Button labels are human copy, not machine fact — Inter 500 (DESIGN.md
+    // typography.body), not the mono reserved for ids, timestamps and badges.
+    'font-sans font-medium tracking-[-0.005em] border border-transparent',
     'transition-[background-color,color,border-color,box-shadow,transform] duration-150',
     'outline-none pressed:translate-y-px',
     'focus-visible:shadow-[var(--shadow-focus)]',
@@ -14,26 +60,31 @@ export const buttonStyles = tv({
   ],
   variants: {
     variant: {
-      primary: ['bg-ink text-surface border-ink', 'hover:bg-accent-ink hover:border-accent-ink'],
-      // Hover uses accent-2 — the token DESIGN.md reserves for "hover on
-      // accent". accent-ink is a text-on-tinted-surface color and flips
-      // light in dark mode, so it can't double as a hover fill here.
-      accent: [
-        'bg-accent text-[#f0efe8] border-accent',
-        'hover:bg-accent-2 hover:border-accent-2',
-      ],
-      secondary: ['bg-transparent text-ink border-ink', 'hover:bg-ink hover:text-surface'],
+      cta: ctaClasses,
+      accent: ctaClasses,
+      primary: raisedClasses,
+      secondary: mutedClasses,
       ghost: [
-        'bg-bg text-ink-2 border-rule-strong',
-        'hover:bg-surface-2 hover:text-ink hover:border-ink-4',
+        'bg-transparent text-ink-2 border-transparent',
+        'hovered:bg-surface-3 hovered:text-ink',
+        'pressed:bg-surface-4',
+      ],
+      subtle: [
+        'bg-transparent text-ink-3 border-transparent',
+        'hovered:bg-surface-2 hovered:text-ink',
+        'pressed:bg-surface-3',
       ],
-      // Transparent at rest, paper-fill on hover. The toolbar / sidebar
-      // register — pairs with `size="icon-md"` for top-bar icon buttons.
-      subtle: ['bg-transparent text-ink-3 border-transparent', 'hover:bg-surface-2 hover:text-ink'],
       link: [
         'bg-transparent text-ink-2 border-transparent',
         'px-0.5 border-b border-b-ink-4',
-        'hover:text-ink hover:border-b-ink',
+        'hovered:text-ink hovered:border-b-ink',
+      ],
+      // `text-surface`, not white: dark's --color-danger is a light salmon, and
+      // the surface token flips dark with it while white would fail contrast.
+      danger: [
+        'bg-danger text-surface border-danger',
+        'hovered:bg-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',
+        'hovered:border-[color-mix(in_oklab,var(--color-danger)_88%,var(--color-ink))]',
       ],
     },
     size: {
@@ -46,8 +97,8 @@ export const buttonStyles = tv({
       'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',
     },
     // Corner shape. Default is rounded (soft 10px radius — the standard
-    // Proteos button), `pill` is the fully-rounded legacy treatment.
-    // The `link` variant overrides both to a flat underline.
+    // Proteos button), `pill` is the fully-rounded treatment for a small set
+    // of prominent CTAs. The `link` variant overrides both to a flat underline.
     shape: {
       rounded: 'rounded-md',
       pill: 'rounded-pill',
@@ -60,6 +111,8 @@ export const buttonStyles = tv({
     // Link never takes a corner radius — it's an underline, not a box.
     { variant: 'link', shape: 'rounded', class: 'rounded-none' },
     { variant: 'link', shape: 'pill', class: 'rounded-none' },
+    // Destructive confirms get the terracotta halo instead of the indigo one.
+    { variant: 'danger', class: 'focus-visible:shadow-[var(--shadow-focus-danger)]' },
   ],
   defaultVariants: {
     variant: 'primary',

package/src/components/combobox/combobox.tsx

@@ -142,8 +142,8 @@ export function Combobox<T extends Key>({
           'min-w-[var(--trigger-width)]',
           'rounded-md border border-rule bg-surface p-1',
           'shadow-[var(--shadow-raised)]',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1',
-          'exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-slide-up',
         )}
       >
         <ListBox