@proteos/ui 0.55.0 → 0.57.0

package/src/components/segmented-control/segmented-control.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 
-import { SegmentedControl } from './segmented-control'
+import { SegmentedControl, segmentedControlStyles } from './segmented-control'
 
 const meta: Meta<typeof SegmentedControl> = {
   title: 'Components/SegmentedControl',
@@ -19,8 +19,8 @@ export const AndOrJoiner: Story = {
       <SegmentedControl
         aria-label="Joiner"
         options={[
-          { id: 'and', label: 'AND' },
-          { id: 'or', label: 'OR' },
+          { id: 'and', label: 'and' },
+          { id: 'or', label: 'or' },
         ]}
         value={value}
         onChange={setValue}
@@ -49,15 +49,15 @@ export const BooleanTrueFalse: Story = {
 
 export const ThreeSegments: Story = {
   render: () => {
-    const [value, setValue] = useState<'compact' | 'cozy' | 'comfy'>('cozy')
+    const [value, setValue] = useState<'list' | 'board' | 'timeline'>('list')
     return (
       <SegmentedControl
         size="md"
-        aria-label="Density"
+        aria-label="View"
         options={[
-          { id: 'compact', label: 'Compact' },
-          { id: 'cozy', label: 'Cozy' },
-          { id: 'comfy', label: 'Comfy' },
+          { id: 'list', label: 'List' },
+          { id: 'board', label: 'Board' },
+          { id: 'timeline', label: 'Timeline' },
         ]}
         value={value}
         onChange={setValue}
@@ -65,3 +65,129 @@ export const ThreeSegments: Story = {
     )
   },
 }
+
+const label = 'font-mono text-[11px] uppercase tracking-[0.08em] text-ink-4'
+
+export const Sizes: Story = {
+  render: () => {
+    const [value, setValue] = useState<'list' | 'board'>('list')
+    const options = [
+      { id: 'list' as const, label: 'List' },
+      { id: 'board' as const, label: 'Board' },
+    ]
+    return (
+      <div className="grid grid-cols-[80px_1fr] items-center gap-x-6 gap-y-4">
+        <div className={label}>sm</div>
+        <SegmentedControl aria-label="View (sm)" size="sm" options={options} value={value} onChange={setValue} />
+        <div className={label}>md</div>
+        <SegmentedControl aria-label="View (md)" size="md" options={options} value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}
+
+const Glyph = ({ d }: { d: string }) => (
+  <svg viewBox="0 0 16 16" fill="none" className="size-3" aria-hidden>
+    <path d={d} stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+)
+
+export const WithIcons: Story = {
+  render: () => {
+    const [value, setValue] = useState<'base' | 'sm'>('base')
+    return (
+      <SegmentedControl
+        aria-label="Viewport"
+        options={[
+          { id: 'base', label: <Glyph d="M2 4h12v8H2zM6 14h4" />, 'aria-label': 'Desktop' },
+          { id: 'sm', label: <Glyph d="M5 2h6v12H5zM7 12h2" />, 'aria-label': 'Phone' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Wrap: Story = {
+  parameters: { layout: 'padded' },
+  render: () => {
+    const [value, setValue] = useState<string>('1/2')
+    const options = ['auto', '1/4', '1/3', '1/2', '2/3', '3/4', 'full', 'fit', 'fill', 'grow', 'shrink', 'none'].map(
+      (id) => ({ id, label: id }),
+    )
+    return (
+      <div className="w-[240px]">
+        <SegmentedControl aria-label="Column span" wrap options={options} value={value} onChange={setValue} />
+      </div>
+    )
+  },
+}
+
+export const DisabledOption: Story = {
+  render: () => {
+    const [value, setValue] = useState<'draft' | 'live' | 'archived'>('draft')
+    return (
+      <SegmentedControl
+        size="md"
+        aria-label="Status"
+        options={[
+          { id: 'draft', label: 'Draft' },
+          { id: 'live', label: 'Live' },
+          { id: 'archived', label: 'Archived', isDisabled: true },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+export const Unselected: Story = {
+  render: () => {
+    const [value, setValue] = useState<'yes' | 'no' | null>(null)
+    return (
+      <SegmentedControl
+        aria-label="Answer"
+        options={[
+          { id: 'yes', label: 'Yes' },
+          { id: 'no', label: 'No' },
+        ]}
+        value={value}
+        onChange={setValue}
+      />
+    )
+  },
+}
+
+/* Pinned states on static spans (RAC owns the live data-* attributes). */
+export const States: Story = {
+  parameters: { controls: { hideNoControlsWarning: true } },
+  render: () => {
+    const styles = segmentedControlStyles({ size: 'md' })
+    const pinned = [
+      { title: 'rest', attrs: {} },
+      { title: 'hover', attrs: { 'data-hovered': '' } },
+      { title: 'press', attrs: { 'data-pressed': '' } },
+      { title: 'selected', attrs: { 'data-selected': '' } },
+      { title: 'selected + focus', attrs: { 'data-selected': '', 'data-focus-visible': '' } },
+      { title: 'disabled', attrs: { 'data-disabled': '' } },
+    ]
+    return (
+      <div className="grid grid-cols-[140px_1fr] items-center gap-x-6 gap-y-3">
+        {pinned.map((state) => (
+          <div key={state.title} className="contents">
+            <div className={label}>{state.title}</div>
+            <div className={styles.group()}>
+              <span className={styles.segment()}>List</span>
+              <span {...state.attrs} className={styles.segment()}>
+                Board
+              </span>
+              <span className={styles.segment()}>Timeline</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    )
+  },
+}

package/src/components/segmented-control/segmented-control.test.tsx

@@ -5,14 +5,22 @@ import { describe, expect, it, vi } from 'vitest'
 
 import { SegmentedControl } from './segmented-control'
 
-function Harness({ onChange }: { onChange?: (v: 'and' | 'or') => void }) {
-  const [value, setValue] = useState<'and' | 'or'>('and')
+type Joiner = 'and' | 'or'
+
+function Harness({
+  onChange,
+  initial = 'and',
+}: {
+  onChange?: (v: Joiner) => void
+  initial?: Joiner | null
+}) {
+  const [value, setValue] = useState<Joiner | null>(initial)
   return (
     <SegmentedControl
       aria-label="Joiner"
       options={[
-        { id: 'and', label: 'AND' },
-        { id: 'or', label: 'OR' },
+        { id: 'and', label: 'and' },
+        { id: 'or', label: 'or' },
       ]}
       value={value}
       onChange={(next) => {
@@ -32,16 +40,81 @@ describe('SegmentedControl', () => {
 
   it('reflects the controlled value', () => {
     render(<Harness />)
-    expect(screen.getByRole('radio', { name: 'AND' })).toBeChecked()
-    expect(screen.getByRole('radio', { name: 'OR' })).not.toBeChecked()
+    expect(screen.getByRole('radio', { name: 'and' })).toBeChecked()
+    expect(screen.getByRole('radio', { name: 'or' })).not.toBeChecked()
   })
 
   it('changes value on click', async () => {
     const user = userEvent.setup()
     const onChange = vi.fn()
     render(<Harness onChange={onChange} />)
-    await user.click(screen.getByRole('radio', { name: 'OR' }))
+    await user.click(screen.getByRole('radio', { name: 'or' }))
+    expect(onChange).toHaveBeenLastCalledWith('or')
+    expect(screen.getByRole('radio', { name: 'or' })).toBeChecked()
+  })
+
+  it('moves selection with the arrow keys', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+    await user.tab()
+    expect(screen.getByRole('radio', { name: 'and' })).toHaveFocus()
+    await user.keyboard('{ArrowRight}')
     expect(onChange).toHaveBeenLastCalledWith('or')
-    expect(screen.getByRole('radio', { name: 'OR' })).toBeChecked()
+    expect(screen.getByRole('radio', { name: 'or' })).toBeChecked()
+  })
+
+  it('renders no selected segment for a null value', () => {
+    render(<Harness initial={null} />)
+    for (const radio of screen.getAllByRole('radio')) {
+      expect(radio).not.toBeChecked()
+    }
+  })
+
+  it('does not select a disabled option', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    function Disabled() {
+      const [value, setValue] = useState<'a' | 'b'>('a')
+      return (
+        <SegmentedControl
+          aria-label="Mode"
+          options={[
+            { id: 'a', label: 'A' },
+            { id: 'b', label: 'B', isDisabled: true },
+          ]}
+          value={value}
+          onChange={(next) => {
+            setValue(next)
+            onChange(next)
+          }}
+        />
+      )
+    }
+    render(<Disabled />)
+    await user.click(screen.getByRole('radio', { name: 'B' }))
+    expect(onChange).not.toHaveBeenCalled()
+    expect(screen.getByRole('radio', { name: 'A' })).toBeChecked()
+  })
+
+  it('names icon-only segments through aria-label', () => {
+    function Icons() {
+      const [value, setValue] = useState<'list' | 'board'>('list')
+      return (
+        <SegmentedControl
+          aria-label="View"
+          wrap
+          options={[
+            { id: 'list', label: <svg aria-hidden />, 'aria-label': 'List' },
+            { id: 'board', label: <svg aria-hidden />, 'aria-label': 'Board' },
+          ]}
+          value={value}
+          onChange={setValue}
+        />
+      )
+    }
+    render(<Icons />)
+    expect(screen.getByRole('radio', { name: 'List' })).toBeChecked()
+    expect(screen.getByRole('radio', { name: 'Board' })).toBeInTheDocument()
   })
 })

package/src/components/segmented-control/segmented-control.tsx

@@ -9,11 +9,16 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import { cn } from '../../lib/cn'
 
 /* =========================================================================
-   SegmentedControl — small horizontal exclusive-choice group with pill
-   chrome. Wraps RAC RadioGroup so keyboard nav and focus management are
-   correct (arrow keys move between segments). Used for compact toggles
-   like AND/OR joiners and true/false booleans where a full RadioGroup
+   SegmentedControl — small horizontal exclusive-choice group: a recessed
+   `surface-2` track with the selected segment lifted as a white pill. Wraps
+   RAC RadioGroup so keyboard nav and focus management are correct (arrow keys
+   move between segments, one tab stop). Used for compact toggles like view
+   switchers, AND/OR joiners and true/false booleans where a full RadioGroup
    feels heavy.
+
+   Radii are concentric: 9px (chip) track − 2px padding − 1px hairline = 6px
+   (sm) pill. Labels are mode names, so they follow buttons: Inter 500,
+   sentence case — not the uppercase mono reserved for eyebrows.
    ========================================================================= */
 
 export const segmentedControlStyles = tv({
@@ -22,28 +27,35 @@ export const segmentedControlStyles = tv({
     // stretching parent (e.g. a `flex flex-col` card body, whose default
     // align-items:stretch would otherwise pull it to full width). Consumers
     // can still opt into full width by passing `w-full` via className.
-    group: 'inline-flex w-fit rounded-sm border border-rule-strong bg-surface p-0.5 gap-0.5',
+    group: 'inline-flex w-fit gap-px p-0.5 rounded-chip bg-surface-2 border border-rule',
     segment: [
-      'inline-flex items-center justify-center cursor-pointer',
-      'font-mono tracking-[0.04em] rounded-[3px] outline-none select-none',
-      'transition-[background-color,color] duration-150',
-      'data-[hovered]:text-ink',
-      'data-[selected]:bg-ink data-[selected]:text-surface',
+      'inline-flex items-center justify-center gap-1 cursor-pointer select-none',
+      'font-sans font-medium tracking-[-0.005em] rounded-sm outline-none text-ink-3',
+      'transition-[background-color,color,box-shadow] duration-150',
+      // Unselected: hover/press tint into the track colour. `selected` is
+      // declared after `hovered` in styles.css, so the pill wins over these.
+      'hovered:text-ink hovered:bg-[color-mix(in_oklab,var(--color-ink)_6%,var(--color-surface-2))]',
+      'pressed:bg-[color-mix(in_oklab,var(--color-ink)_10%,var(--color-surface-2))]',
+      // Selected: lifted white pill, static.
+      'selected:bg-surface selected:text-ink selected:shadow-[var(--shadow-rest)]',
       'data-[focus-visible]:shadow-[var(--shadow-focus)]',
+      'selected:data-[focus-visible]:shadow-[var(--shadow-focus),var(--shadow-rest)]',
       'data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed',
     ],
   },
   variants: {
     size: {
-      sm: { segment: 'px-2 py-0.5 text-[10.5px] tracking-[0.08em]' },
-      md: { segment: 'px-2.5 py-1 text-[12px]' },
+      sm: { segment: 'px-2 py-0.5 text-[11.5px] min-h-[22px]' },
+      md: { segment: 'px-2.5 py-1 text-[12.5px] min-h-[26px]' },
     },
-    tone: {
-      // Default: ink fill on selected.
-      default: { segment: 'text-ink-3' },
+    // Dense flow-wrapping register (designer inspector): the group becomes a
+    // wrapping flex row and every segment grows to share the line.
+    wrap: {
+      true: { group: 'flex flex-wrap w-auto', segment: 'flex-1 min-w-7 px-1.5' },
+      false: {},
     },
   },
-  defaultVariants: { size: 'sm', tone: 'default' },
+  defaultVariants: { size: 'sm', wrap: false },
 })
 
 export type SegmentedControlVariants = VariantProps<typeof segmentedControlStyles>
@@ -52,6 +64,8 @@ export type SegmentedControlOption<T extends Key = Key> = {
   id: T
   label: ReactNode
   isDisabled?: boolean
+  /** Accessible name for icon-only segments. */
+  'aria-label'?: string
 }
 
 export type SegmentedControlProps<T extends Key = Key> = Omit<
@@ -59,9 +73,12 @@ export type SegmentedControlProps<T extends Key = Key> = Omit<
   'children' | 'value' | 'onChange'
 > & {
   options: ReadonlyArray<SegmentedControlOption<T>>
-  value: T
+  /** `null` renders no selected segment. */
+  value: T | null
   onChange: (value: T) => void
   size?: SegmentedControlVariants['size']
+  /** Flow-wrap long option lists; segments share the line equally. */
+  wrap?: boolean
   /** Focus the selected segment on mount. RAC's RadioGroup doesn't surface
    *  `autoFocus` itself — it's a per-Radio prop — so we apply it to the
    *  Radio whose value matches `value`. */
@@ -75,17 +92,18 @@ export function SegmentedControl<T extends Key>({
   value,
   onChange,
   size,
+  wrap = false,
   autoFocus = false,
   className,
   orientation = 'horizontal',
   ...props
 }: SegmentedControlProps<T>) {
-  const styles = segmentedControlStyles({ size })
+  const styles = segmentedControlStyles({ size, wrap })
   return (
     <AriaRadioGroup
       {...props}
       orientation={orientation}
-      value={String(value)}
+      value={value === null ? null : String(value)}
       onChange={(next) => onChange(next as T)}
       className={cn(styles.group(), className)}
     >
@@ -94,6 +112,7 @@ export function SegmentedControl<T extends Key>({
           key={String(option.id)}
           value={String(option.id)}
           {...(option.isDisabled ? { isDisabled: true } : {})}
+          {...(option['aria-label'] !== undefined ? { 'aria-label': option['aria-label'] } : {})}
           {...(autoFocus && option.id === value ? { autoFocus: true } : {})}
           className={styles.segment()}
         >

package/src/components/select/select.tsx

@@ -116,8 +116,8 @@ export function Select<T extends Key>({
           'z-[1300]',
           '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',
           popoverClassName,
         )}
       >

package/src/components/time-field/time-field.tsx

@@ -78,7 +78,7 @@ export function TimeField<T extends TimeValue = TimeValue>({
               'data-[placeholder]:text-ink-4',
               'data-[type=literal]:text-ink-4',
               // segment focus treatment: indigo fill, paper text
-              'data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]',
+              'data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]',
               'data-[disabled]:cursor-not-allowed',
             )}
           />

package/src/components/toast/toast.tsx

@@ -45,8 +45,8 @@ export const toastStyles = tv({
       'rounded-lg border border-rule bg-surface shadow-float',
       'px-3.5 py-3 outline-none',
       'focus-visible:shadow-focus',
-      'entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-2 entering:duration-200',
-      'exiting:animate-out exiting:fade-out-0 exiting:duration-150',
+      'entering:animate-enter-slide-up',
+      'exiting:animate-exit-fade',
     ],
     icon: 'size-4 shrink-0 mt-0.5',
     title: 'font-sans text-[13px] font-medium leading-[1.4] text-ink',

package/src/components/tooltip/tooltip.tsx

@@ -46,8 +46,8 @@ export function Tooltip({ className, offset = 6, ...props }: TooltipProps) {
           'rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]',
           'px-2.5 py-1.5',
           'font-mono text-[11.5px] text-ink-2',
-          'entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1 entering:duration-150',
-          'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+          'entering:animate-enter-slide-down',
+          'exiting:animate-exit-fade',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/styles.css

@@ -14,6 +14,18 @@
    to *this* file. */
 @source "./components/**/*.{ts,tsx}";
 
+/* React Aria state variants. RAC exposes interaction state as data-* attributes
+   (pointer-correct: no sticky :hover on touch; press follows usePress). Same names
+   as tailwindcss-react-aria-components, without the dependency. `focus-visible:`
+   and `disabled:` stay core. Order matters: `selected` is declared after `hovered`
+   so a selected segment's fill wins over its hover fill at equal specificity. */
+@custom-variant hovered (&[data-hovered]);
+@custom-variant pressed (&[data-pressed]);
+@custom-variant selected (&[data-selected]);
+@custom-variant focused (&[data-focused]);
+@custom-variant entering (&[data-entering]);
+@custom-variant exiting (&[data-exiting]);
+
 /* ==========================================================
    PROTEOS · INDIGO — design tokens
    Mirrors Proteos Design System v0.1 (spec: revision 2026.04.24).
@@ -37,6 +49,8 @@
   --color-surface: #ffffff;
   --color-surface-2: #f0f0f2;
   --color-surface-3: #e5e5e9;
+  /* Deepest recessed step — hover on gray fills (muted buttons). */
+  --color-surface-4: #d9d9df;
 
   /* Ink — indigo-tinted slate */
   --color-ink: #1a1d2b;
@@ -124,6 +138,17 @@
      status icons. Soft ease, no overshoot (nothing bounces). */
   --animate-status-pop: status-pop var(--duration-slow) var(--ease-out-soft) both;
 
+  /* Overlay motion — own keyframes. tw-animate-css was never installed, so the
+     `animate-in fade-in-0 …` strings compiled to nothing. `both` holds the end
+     frame while RAC keeps the element in data-exiting until unmount. */
+  --animate-enter-fade: enter-fade var(--duration-fast) ease both;
+  --animate-enter-slide-down: enter-slide-down var(--duration-fast) ease both;
+  --animate-enter-slide-up: enter-slide-up var(--duration-base) ease both;
+  --animate-enter-zoom: enter-zoom var(--duration-fast) ease both;
+  --animate-exit-fade: exit-fade 100ms ease both;
+  --animate-exit-slide-up: exit-slide-up 100ms ease both;
+  --animate-exit-zoom: exit-zoom 100ms ease both;
+
 }
 
 @keyframes indeterminate-progress {
@@ -149,6 +174,37 @@
   }
 }
 
+@keyframes enter-fade {
+  from { opacity: 0; }
+}
+@keyframes enter-slide-down {
+  from { opacity: 0; transform: translateY(-4px); }
+}
+@keyframes enter-slide-up {
+  from { opacity: 0; transform: translateY(8px); }
+}
+@keyframes enter-zoom {
+  from { opacity: 0; transform: scale(0.95); }
+}
+@keyframes exit-fade {
+  to { opacity: 0; }
+}
+@keyframes exit-slide-up {
+  to { opacity: 0; transform: translateY(-4px); }
+}
+@keyframes exit-zoom {
+  to { opacity: 0; transform: scale(0.95); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-entering],
+  [data-exiting],
+  [class*="animate-enter-"],
+  [class*="animate-exit-"] {
+    animation: none;
+  }
+}
+
 /* Raw variables (non-color) for direct component consumption.
    Tailwind v4 mirrors @theme into :root for colors/radii/shadows, but we
    also expose spacing tokens here for components that need raw var() access. */
@@ -201,6 +257,7 @@
   --color-surface: #f2f0ea;
   --color-surface-2: #e7e4db;
   --color-surface-3: #dcd8cc;
+  --color-surface-4: #d0ccbf;
 
   --color-ink: #1a1d2b;
   --color-ink-2: #353a4b;
@@ -240,6 +297,7 @@
   --color-surface: #191c24;
   --color-surface-2: #222633;
   --color-surface-3: #2c3140;
+  --color-surface-4: #363b4c;
 
   --color-ink: #e9eaf0;
   --color-ink-2: #c5c8d4;

package/dist/chunk-IKAX76MB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["AriaButton","tv","jsx"],"mappings":"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","file":"chunk-IKAX76MB.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    'font-mono tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      primary: ['bg-ink text-surface border-ink', 'hover:bg-accent-ink hover:border-accent-ink'],\n      // Hover uses accent-2 — the token DESIGN.md reserves for \"hover on\n      // accent\". accent-ink is a text-on-tinted-surface color and flips\n      // light in dark mode, so it can't double as a hover fill here.\n      accent: [\n        'bg-accent text-[#f0efe8] border-accent',\n        'hover:bg-accent-2 hover:border-accent-2',\n      ],\n      secondary: ['bg-transparent text-ink border-ink', 'hover:bg-ink hover:text-surface'],\n      ghost: [\n        'bg-bg text-ink-2 border-rule-strong',\n        'hover:bg-surface-2 hover:text-ink hover:border-ink-4',\n      ],\n      // Transparent at rest, paper-fill on hover. The toolbar / sidebar\n      // register — pairs with `size=\"icon-md\"` for top-bar icon buttons.\n      subtle: ['bg-transparent text-ink-3 border-transparent', 'hover:bg-surface-2 hover:text-ink'],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hover:text-ink hover:border-b-ink',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded legacy treatment.\n    // The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}

package/dist/chunk-MWAXK66H.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/skeleton/skeleton.tsx"],"names":["twMerge","clsx","tv","jsx","AriaButton"],"mappings":"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","file":"chunk-MWAXK66H.cjs","sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs))\n}\n","import { Button as AriaButton, type ButtonProps as AriaButtonProps } from 'react-aria-components'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\nexport const buttonStyles = tv({\n  base: [\n    'inline-flex items-center justify-center gap-2 whitespace-nowrap cursor-pointer',\n    'font-mono tracking-[-0.005em] border border-transparent',\n    'transition-[background-color,color,border-color,box-shadow,transform] duration-150',\n    'outline-none pressed:translate-y-px',\n    'focus-visible:shadow-[var(--shadow-focus)]',\n    'disabled:opacity-45 disabled:cursor-not-allowed disabled:pointer-events-none',\n  ],\n  variants: {\n    variant: {\n      primary: ['bg-ink text-surface border-ink', 'hover:bg-accent-ink hover:border-accent-ink'],\n      // Hover uses accent-2 — the token DESIGN.md reserves for \"hover on\n      // accent\". accent-ink is a text-on-tinted-surface color and flips\n      // light in dark mode, so it can't double as a hover fill here.\n      accent: [\n        'bg-accent text-[#f0efe8] border-accent',\n        'hover:bg-accent-2 hover:border-accent-2',\n      ],\n      secondary: ['bg-transparent text-ink border-ink', 'hover:bg-ink hover:text-surface'],\n      ghost: [\n        'bg-bg text-ink-2 border-rule-strong',\n        'hover:bg-surface-2 hover:text-ink hover:border-ink-4',\n      ],\n      // Transparent at rest, paper-fill on hover. The toolbar / sidebar\n      // register — pairs with `size=\"icon-md\"` for top-bar icon buttons.\n      subtle: ['bg-transparent text-ink-3 border-transparent', 'hover:bg-surface-2 hover:text-ink'],\n      link: [\n        'bg-transparent text-ink-2 border-transparent',\n        'px-0.5 border-b border-b-ink-4',\n        'hover:text-ink hover:border-b-ink',\n      ],\n    },\n    size: {\n      sm: 'text-xs px-3 py-1.5 [&_svg]:size-3',\n      md: 'text-[13px] px-4 py-[9px] [&_svg]:size-3',\n      lg: 'text-sm px-[22px] py-3 [&_svg]:size-3.5',\n      // Square dimensions for icon-only buttons. Requires an `aria-label`.\n      'icon-sm': 'size-7 p-0 [&_svg]:size-3.5',\n      'icon-md': 'size-[34px] p-0 [&_svg]:size-4',\n      'icon-lg': 'size-[42px] p-0 [&_svg]:size-[18px]',\n    },\n    // Corner shape. Default is rounded (soft 10px radius — the standard\n    // Proteos button), `pill` is the fully-rounded legacy treatment.\n    // The `link` variant overrides both to a flat underline.\n    shape: {\n      rounded: 'rounded-md',\n      pill: 'rounded-pill',\n    },\n  },\n  compoundVariants: [\n    { variant: 'link', size: 'sm', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'md', class: 'px-0.5 py-0' },\n    { variant: 'link', size: 'lg', class: 'px-0.5 py-0' },\n    // Link never takes a corner radius — it's an underline, not a box.\n    { variant: 'link', shape: 'rounded', class: 'rounded-none' },\n    { variant: 'link', shape: 'pill', class: 'rounded-none' },\n  ],\n  defaultVariants: {\n    variant: 'primary',\n    size: 'md',\n    shape: 'rounded',\n  },\n})\n\nexport type ButtonVariants = VariantProps<typeof buttonStyles>\nexport type ButtonProps = AriaButtonProps & ButtonVariants\n\nexport function Button({ variant, size, shape, className, ...props }: ButtonProps) {\n  return (\n    <AriaButton\n      {...props}\n      className={(renderProps) =>\n        cn(\n          buttonStyles({ variant, size, shape }),\n          typeof className === 'function' ? className(renderProps) : className,\n        )\n      }\n    />\n  )\n}\n","import type { HTMLAttributes } from 'react'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nimport { cn } from '../../lib/cn'\n\n/* =========================================================================\n   Skeleton — content placeholder for loading states.\n   Purely presentational, so it doesn't wrap a React Aria primitive (RAC has\n   no Skeleton — interactive primitives only). Accessibility lives in props:\n   - decorative skeletons get `aria-hidden` so screen readers ignore them\n   - skeletons that *announce* the loading state should be wrapped in a\n     `role=\"status\"` region by the consumer (e.g. AppLayoutSkeleton).\n   ========================================================================= */\n\nexport const skeletonStyles = tv({\n  base: ['animate-pulse', 'bg-surface-3'],\n  variants: {\n    shape: {\n      rect: 'rounded-md',\n      circle: 'rounded-full',\n      // `text` matches a typical line of body text — width is up to the\n      // consumer; the rounded-sm + height keep proportions sensible.\n      text: 'h-4 w-full rounded-sm',\n    },\n  },\n  defaultVariants: { shape: 'rect' },\n})\n\nexport type SkeletonVariants = VariantProps<typeof skeletonStyles>\nexport type SkeletonProps = HTMLAttributes<HTMLDivElement> & SkeletonVariants\n\nexport function Skeleton({ shape, className, ...props }: SkeletonProps) {\n  return (\n    <div\n      // Decorative by default. Consumers that want screen readers to announce\n      // the loading state should wrap a Skeleton group in `role=\"status\"`\n      // and pass `aria-hidden={false}` here, or just rely on the wrapper.\n      aria-hidden=\"true\"\n      {...props}\n      className={cn(skeletonStyles({ shape }), className)}\n    />\n  )\n}\n"]}