@proteos/ui 0.56.0 → 0.57.1

package/src/components/currency-input/currency-input.tsx

@@ -157,8 +157,8 @@ export function CurrencyInput({
             className={cn(
               'min-w-[9rem] 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 className="max-h-72 overflow-auto outline-none">

package/src/components/date-picker/calendar-internals.tsx

@@ -124,7 +124,7 @@ export function CalendarSurface() {
                 'data-[outside-month]:text-ink-4',
                 'data-[hovered]:bg-surface-2 data-[hovered]:text-ink',
                 'data-[focus-visible]:shadow-[var(--shadow-focus)]',
-                'data-[selected]:bg-accent data-[selected]:text-[#f0efe8]',
+                'data-[selected]:bg-accent data-[selected]:text-tile-fg',
                 'data-[selected]:data-[hovered]:bg-accent-2',
                 'data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed',
                 'data-[unavailable]:line-through data-[unavailable]:text-ink-4',

package/src/components/date-picker/date-picker.tsx

@@ -86,7 +86,7 @@ export function DatePicker<T extends DateValue>({
                 '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',
               )}
             />
@@ -127,8 +127,8 @@ export function DatePicker<T extends DateValue>({
           'w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]',
           'rounded-md border border-rule bg-surface p-4',
           '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',
         )}
       >
         <Dialog className="outline-none">

package/src/components/date-time-picker/date-time-picker.tsx

@@ -43,7 +43,7 @@ const segmentStyles = cn(
   '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',
 )
 
@@ -185,8 +185,8 @@ export function DateTimePicker<T extends DateValue>({
           'w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]',
           'rounded-md border border-rule bg-surface p-4',
           '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',
         )}
       >
         <Dialog className="outline-none">

package/src/components/icon-picker/icon-picker.tsx

@@ -227,8 +227,8 @@ export function IconPicker({
         className={cn(
           'w-[316px] rounded-md border border-rule bg-surface p-2',
           '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',
         )}
       >
         <div className="flex items-center gap-1.5 pb-2">

package/src/components/image-lightbox/image-lightbox.tsx

@@ -23,8 +23,8 @@ export const imageLightboxStyles = tv({
     'fixed inset-0 z-50 flex items-center justify-center p-4',
     // Deeper scrim than Modal's 40% — the image needs the page fully dimmed.
     'bg-[color-mix(in_oklab,var(--color-ink)_72%,transparent)]',
-    'entering:animate-in entering:fade-in-0 entering:duration-150',
-    'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+    'entering:animate-enter-fade',
+    'exiting:animate-exit-fade',
   ],
 })
 

package/src/components/menu/menu.tsx

@@ -61,8 +61,8 @@ export function MenuPopover({ className, offset = 4, placement = 'bottom start',
         cn(
           'min-w-[200px] p-1 bg-surface border border-rule rounded-md',
           'shadow-[var(--shadow-float)] outline-none z-[1200]',
-          'entering:animate-in entering:fade-in-0 entering:zoom-in-95',
-          'exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95',
+          'entering:animate-enter-zoom',
+          'exiting:animate-exit-zoom',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }

package/src/components/modal/modal.test.tsx

@@ -58,6 +58,15 @@ describe('Modal', () => {
     expect(dialog).toBeInTheDocument()
   })
 
+  it('names an untitled dialog by its aria-label', async () => {
+    render(
+      <ModalContent isOpen aria-label="Contact picker">
+        <ModalBody>Body content</ModalBody>
+      </ModalContent>,
+    )
+    expect(await screen.findByRole('dialog', { name: 'Contact picker' })).toBeInTheDocument()
+  })
+
   it('closes on Escape', async () => {
     const user = userEvent.setup()
     const onOpenChange = vi.fn()

package/src/components/modal/modal.tsx

@@ -45,6 +45,13 @@ export type ModalContentProps = AriaModalOverlayProps & {
   children: AriaDialogProps['children']
   /** Visual override for the panel wrapper (affects width, padding, etc.). */
   modalClassName?: string
+  /** Visual override for the dialog element inside the panel — the column the
+   *  slots sit in. It hugs its content by default; a panel given a height of
+   *  its own needs `grow` here for the slots to fill it. */
+  dialogClassName?: string
+  /** Accessible name for a dialog WITHOUT a `<ModalTitle>`. A titled dialog is
+   *  named by its title and doesn't need this. */
+  'aria-label'?: string
 }
 
 /**
@@ -55,7 +62,9 @@ export function ModalContent({
   children,
   className,
   modalClassName,
+  dialogClassName,
   isDismissable = true,
+  'aria-label': ariaLabel,
   ...props
 }: ModalContentProps) {
   return (
@@ -67,8 +76,8 @@ export function ModalContent({
           'fixed inset-0 z-50 flex items-center justify-center p-4',
           // Warm ink scrim — stays in the Proteos palette (no pure black).
           'bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]',
-          'entering:animate-in entering:fade-in-0 entering:duration-150',
-          'exiting:animate-out exiting:fade-out-0 exiting:duration-100',
+          'entering:animate-enter-fade',
+          'exiting:animate-exit-fade',
           typeof className === 'function' ? className(renderProps) : className,
         )
       }
@@ -82,12 +91,15 @@ export function ModalContent({
           'flex flex-col max-h-[calc(100dvh-2rem)]',
           'bg-surface border border-rule rounded-lg',
           'shadow-[var(--shadow-float)]',
-          'entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150',
-          'exiting:animate-out exiting:zoom-out-95 exiting:duration-100',
+          'entering:animate-enter-zoom',
+          'exiting:animate-exit-zoom',
           modalClassName,
         )}
       >
-        <AriaDialog className="outline-none flex flex-col min-h-0 overflow-hidden">
+        <AriaDialog
+          className={cn('outline-none flex flex-col min-h-0 overflow-hidden', dialogClassName)}
+          {...(ariaLabel !== undefined ? { 'aria-label': ariaLabel } : {})}
+        >
           {children}
         </AriaDialog>
       </AriaModal>

package/src/components/multi-select/multi-select.tsx

@@ -185,8 +185,8 @@ export function MultiSelect<T extends Key>({
           // (defaultOpen) — no browser outline around the whole panel.
           'outline-none 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',
         )}
       >
         {isSearchable ? (

package/src/components/popover/popover.tsx

@@ -64,8 +64,8 @@ export function PopoverContent({
         cn(
           'rounded-md border border-rule bg-surface',
           'shadow-[var(--shadow-float)]',
-          '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',
           panelClassName,
           typeof className === 'function' ? className(renderProps) : className,
         )

package/src/components/record-filter/nested-group.tsx

@@ -84,8 +84,8 @@ export function NestedGroup({
               <SegmentedControl<LogicalOperator>
                 aria-label="Group joiner"
                 options={[
-                  { id: 'and', label: 'AND' },
-                  { id: 'or', label: 'OR' },
+                  { id: 'and', label: 'and' },
+                  { id: 'or', label: 'or' },
                 ]}
                 value={group.logicalOperator}
                 onChange={(next) => onChange({ ...group, logicalOperator: next })}

package/src/components/record-filter/record-filter-builder-panel.tsx

@@ -1,4 +1,5 @@
 import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
 import { SegmentedControl } from '../segmented-control/segmented-control'
 import { type FilterValueInputRenderer, RenderValueInputProvider } from './filter-value-input'
 import { RecordFilterEditor } from './record-filter-editor'
@@ -86,8 +87,8 @@ export function RecordFilterBuilderPanel({
             <SegmentedControl<LogicalOperator>
               aria-label="Joiner"
               options={[
-                { id: 'and', label: 'AND' },
-                { id: 'or', label: 'OR' },
+                { id: 'and', label: 'and' },
+                { id: 'or', label: 'or' },
               ]}
               value={filter.logicalOperator}
               onChange={setJoiner}
@@ -190,16 +191,11 @@ export function RecordFilterBuilderPanel({
         </button>
         <div className="flex items-center gap-1.5">
           {onSaveView ? (
-            <button
-              type="button"
-              onClick={onSaveView}
-              disabled={totalChildren === 0}
-              className={cn(
-                'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-sm',
-                'font-sans text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink',
-                'disabled:opacity-40 disabled:pointer-events-none',
-                'outline-none cursor-pointer',
-              )}
+            <Button
+              variant="ghost"
+              size="sm"
+              onPress={onSaveView}
+              isDisabled={totalChildren === 0}
             >
               <svg
                 aria-hidden
@@ -215,19 +211,11 @@ export function RecordFilterBuilderPanel({
                 <path d="M5 2v3h4V2" />
               </svg>
               Save as view
-            </button>
+            </Button>
           ) : null}
-          <button
-            type="button"
-            onClick={onClose}
-            className={cn(
-              'inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm',
-              'bg-ink text-surface font-mono text-[12px]',
-              'hover:bg-accent-ink outline-none cursor-pointer',
-            )}
-          >
+          <Button variant="cta" size="sm" onPress={onClose}>
             Done
-          </button>
+          </Button>
         </div>
       </div>
     </div>

package/src/components/record-filter/record-filter-chips.tsx

@@ -1,5 +1,6 @@
 import { Fragment, type RefObject, useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '../../lib/cn'
+import { Button } from '../button/button'
 import { PopoverContent } from '../popover/popover'
 import { AttributePicker } from './attribute-picker'
 import { ChipValue, type ChipValueItemRenderer } from './chip-value'
@@ -489,17 +490,9 @@ function ChipMiniEditor({
           onChange={onChangeValue}
         />
       </div>
-      <button
-        type="submit"
-        className={cn(
-          'shrink-0 inline-flex items-center px-2.5 py-1.5 rounded-md',
-          'bg-ink text-surface font-mono text-[12px]',
-          'hover:bg-accent-ink cursor-pointer outline-none',
-          'focus-visible:shadow-[var(--shadow-focus)]',
-        )}
-      >
+      <Button type="submit" variant="cta" size="sm" className="shrink-0">
         Save
-      </button>
+      </Button>
     </form>
   )
 }

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()
   })
 })