@titan-design/react-ui 0.12.1 → 0.13.0

package/src/components/shell/{DashboardShell.test.tsx → workout/WorkoutShell.test.tsx}

@@ -2,11 +2,11 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { Text } from 'react-native'
 import { axe } from 'jest-axe'
-import { DashboardShell } from './DashboardShell'
+import { WorkoutShell, DashboardShell } from './WorkoutShell'
 
-describe('DashboardShell', () => {
+describe('WorkoutShell', () => {
   it('composes the SideNav rail and its categories', () => {
-    render(<DashboardShell activeKey="live" />)
+    render(<WorkoutShell activeKey="live" />)
     expect(screen.getByRole('tablist')).toBeInTheDocument()
     ;['Live', 'Review', 'Plan', 'Body'].forEach((name) => {
       expect(screen.getByRole('tab', { name })).toBeInTheDocument()
@@ -14,15 +14,15 @@ describe('DashboardShell', () => {
   })
 
   it('renders the content-slot placeholder when no children are given', () => {
-    render(<DashboardShell activeKey="live" />)
+    render(<WorkoutShell activeKey="live" />)
     expect(screen.getByText('main content region')).toBeInTheDocument()
   })
 
   it('mounts children in the content slot and drops the placeholder', () => {
     render(
-      <DashboardShell activeKey="review">
+      <WorkoutShell activeKey="review">
         <Text>my page body</Text>
-      </DashboardShell>
+      </WorkoutShell>
     )
     expect(screen.getByText('my page body')).toBeInTheDocument()
     expect(screen.queryByText('main content region')).not.toBeInTheDocument()
@@ -30,13 +30,24 @@ describe('DashboardShell', () => {
 
   it('forwards nav taps through onNavigate', () => {
     const onNavigate = vi.fn()
-    render(<DashboardShell activeKey="live" onNavigate={onNavigate} />)
+    render(<WorkoutShell activeKey="live" onNavigate={onNavigate} />)
     fireEvent.click(screen.getByRole('tab', { name: 'Body' }))
     expect(onNavigate).toHaveBeenCalledWith('body')
   })
 
+  it('fills the generic top-bar slot with the workout chrome', () => {
+    render(<WorkoutShell activeKey="live" state="rest" />)
+    expect(screen.getByText('VOLTRAS')).toBeInTheDocument()
+    expect(screen.getByText('REST')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Devices' })).toBeInTheDocument()
+  })
+
+  it('still exports the pre-AW-132 DashboardShell name', () => {
+    expect(DashboardShell).toBe(WorkoutShell)
+  })
+
   it('has no a11y violations', async () => {
-    const { container } = render(<DashboardShell activeKey="live" />)
+    const { container } = render(<WorkoutShell activeKey="live" />)
     expect(await axe(container)).toHaveNoViolations()
   })
 })

package/src/components/shell/workout/WorkoutShell.tsx

@@ -0,0 +1,77 @@
+import type { ReactNode } from 'react'
+import { AppShell } from '../AppShell'
+import { type SideNavItem } from '../SideNav'
+import { WorkoutTopBar } from './WorkoutTopBar'
+import { workoutNavItems } from './workoutNavItems'
+import { type Device } from './DeviceRow'
+import { type SessionState } from './SessionStatePill'
+
+/**
+ * `WorkoutShell` — the workout wall-dashboard chrome. Composes the generic
+ * {@link AppShell} and fills its top-bar slot with the workout's own
+ * {@link WorkoutTopBar} (session state + device menu) and its nav slot with the
+ * four workout categories. The generic shell knows none of this; this component
+ * is the whole workout-specific surface. Driven entirely by props.
+ */
+export interface WorkoutShellProps {
+  /** Active nav category key. */
+  activeKey?: string
+  /** Nav categories, top → bottom. Defaults to the four workout categories. */
+  navItems?: SideNavItem[]
+  /** A category with off-view live activity → a quiet cue on that item. */
+  liveKey?: string | null
+  /** Global session state → the TopBar status pill. */
+  state?: SessionState
+  /** Connected devices → the TopBar connection glyph + dropdown. */
+  devices?: Device[]
+  /** TopBar brand subtitle. */
+  subtitle?: string
+  onNavigate?: (key: string) => void
+  onSelectDevice?: (device: Device) => void
+  /** Main content region. A placeholder renders when omitted. */
+  children?: ReactNode
+  className?: string
+}
+
+const DEMO_DEVICES: Device[] = [
+  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
+  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
+]
+
+export function WorkoutShell({
+  activeKey = 'live',
+  navItems = workoutNavItems,
+  liveKey = null,
+  state = 'live',
+  devices = DEMO_DEVICES,
+  subtitle = 'wall dashboard',
+  onNavigate,
+  onSelectDevice,
+  children,
+  className,
+}: WorkoutShellProps) {
+  return (
+    <AppShell
+      className={className}
+      navItems={navItems}
+      activeKey={activeKey}
+      liveKey={liveKey}
+      onNavigate={onNavigate}
+      topBar={
+        <WorkoutTopBar
+          state={state}
+          devices={devices}
+          subtitle={subtitle}
+          onSelectDevice={onSelectDevice}
+        />
+      }
+    >
+      {children}
+    </AppShell>
+  )
+}
+
+/** @deprecated Renamed to `WorkoutShell` — same props (AW-132). Removed after consumer migration. */
+export const DashboardShell = WorkoutShell
+/** @deprecated Renamed to `WorkoutShellProps` (AW-132). */
+export type DashboardShellProps = WorkoutShellProps

package/src/components/shell/workout/WorkoutTopBar.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { WorkoutTopBar } from './WorkoutTopBar'
+import { type Device } from './DeviceRow'
+
+const DEVICES: Device[] = [
+  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
+  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
+  { id: 'Voltra-77E0', nickname: 'Spare', slot: null, state: 'available' },
+]
+
+const meta: Meta<typeof WorkoutTopBar> = {
+  title: 'Shell/Workout/WorkoutTopBar',
+  component: WorkoutTopBar,
+  tags: ['autodocs', 'status:candidate', '!status:review'],
+  args: { state: 'live', devices: DEVICES },
+  argTypes: {
+    state: { control: 'select', options: ['live', 'rest', 'idle'] },
+    devices: { control: 'object' },
+    subtitle: { control: 'text' },
+    showSubtitle: { control: 'boolean' },
+    showClock: { control: 'boolean' },
+    time: { control: false },
+    onSelectDevice: { control: false },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Organism (workout app).** The generic ' +
+          "[TopBar](?path=/docs/shell-topbar--docs) with the workout's own chrome in its " +
+          '`trailing` slot: [SessionStatePill](?path=/docs/shell-workout-sessionstatepill--docs) ' +
+          'then [DeviceMenu](?path=/docs/shell-workout-devicemenu--docs). The bar adds the ' +
+          'dividers and the edge-pinned clock; this component only supplies the items ' +
+          '(AW-132).\n\n' +
+          '**Try it:** use the **Controls** to change `state`, edit `devices` (set one to ' +
+          '`lost` to see the fault), or toggle `showSubtitle` / `showClock`. **Resize the ' +
+          'canvas** to watch the container-responsive collapse (SIZE-D01). Click the device ' +
+          'glyph to open the menu.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof WorkoutTopBar>
+
+export const Default: Story = {}
+
+/** A lost device — the glyph alone carries the fault. */
+export const DeviceLost: Story = {
+  args: {
+    state: 'rest',
+    devices: [
+      { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
+      { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'lost' },
+    ],
+  },
+}

package/src/components/shell/workout/WorkoutTopBar.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { WorkoutTopBar } from './WorkoutTopBar'
+import { type Device } from './DeviceRow'
+
+const devices: Device[] = [
+  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
+  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
+]
+
+const AT_1612 = new Date(2024, 0, 1, 16, 12) // local 16:12
+
+describe('WorkoutTopBar', () => {
+  it('renders brand, session state, the device glyph and a 24h clock', () => {
+    render(<WorkoutTopBar state="live" devices={devices} time={AT_1612} showClock />)
+    expect(screen.getByText('VOLTRAS')).toBeInTheDocument()
+    expect(screen.getByText('LIVE')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Devices' })).toBeInTheDocument()
+    expect(screen.getByText('16:12')).toBeInTheDocument()
+  })
+
+  it('hides the clock when showClock is false', () => {
+    render(<WorkoutTopBar state="live" devices={devices} time={AT_1612} showClock={false} />)
+    expect(screen.queryByText('16:12')).not.toBeInTheDocument()
+  })
+
+  it('hides the subtitle when showSubtitle is false', () => {
+    render(<WorkoutTopBar state="rest" devices={devices} showSubtitle={false} />)
+    expect(screen.queryByText('/ wall dashboard')).not.toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <WorkoutTopBar state="live" devices={devices} time={AT_1612} showClock />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/workout/WorkoutTopBar.tsx

@@ -0,0 +1,52 @@
+import { TopBar } from '../TopBar'
+import { SessionStatePill, type SessionState } from './SessionStatePill'
+import { DeviceMenu } from './DeviceMenu'
+import { type Device } from './DeviceRow'
+
+export interface WorkoutTopBarProps {
+  /** Global session state → the status pill. */
+  state: SessionState
+  /** Devices for the connection glyph + dropdown. */
+  devices: Device[]
+  /** The moment to display in the clock (Date/timestamp). Omit for a live ticking clock. */
+  time?: number | Date
+  /** Brand subtitle. Default "wall dashboard". */
+  subtitle?: string
+  /** Force the subtitle on/off; defaults to container-responsive. */
+  showSubtitle?: boolean
+  /** Force the clock on/off; defaults to container-responsive. */
+  showClock?: boolean
+  onSelectDevice?: (device: Device) => void
+  className?: string
+}
+
+/**
+ * The workout app's top bar — the generic {@link TopBar} with the workout's own
+ * chrome in its `trailing` slot: session state, then the device menu. The bar
+ * adds its dividers and the clock; this component only supplies the items.
+ */
+export function WorkoutTopBar({
+  state,
+  devices,
+  time,
+  subtitle,
+  showSubtitle,
+  showClock,
+  onSelectDevice,
+  className,
+}: WorkoutTopBarProps) {
+  return (
+    <TopBar
+      brand="voltras"
+      subtitle={subtitle}
+      showSubtitle={showSubtitle}
+      showClock={showClock}
+      time={time}
+      className={className}
+      trailing={[
+        <SessionStatePill key="state" state={state} />,
+        <DeviceMenu key="devices" devices={devices} onSelectDevice={onSelectDevice} />,
+      ]}
+    />
+  )
+}

package/src/components/shell/workout/index.ts

@@ -0,0 +1,9 @@
+// Workout-app shell chrome — composes the generic shell family one directory up.
+// Nothing here is reusable by another app; nothing generic may import from here.
+export * from './SessionStatePill'
+export * from './DeviceIndicator'
+export * from './DeviceRow'
+export * from './DeviceMenu'
+export * from './workoutNavItems'
+export * from './WorkoutTopBar'
+export * from './WorkoutShell'

package/src/components/shell/workout/workoutNavItems.tsx

@@ -0,0 +1,16 @@
+import { ActivityIcon, HistoryIcon, LayersIcon, PersonStandingIcon } from '../../icons'
+import { type SideNavItem } from '../SideNav'
+
+/** The four workout-dashboard categories with their locked S2 glyphs (activity · history · layers · figure). */
+export const workoutNavItems: SideNavItem[] = [
+  { key: 'live', label: 'Live', icon: <ActivityIcon size={20} color="currentColor" /> },
+  { key: 'review', label: 'Review', icon: <HistoryIcon size={20} color="currentColor" /> },
+  { key: 'program', label: 'Plan', icon: <LayersIcon size={20} color="currentColor" /> },
+  { key: 'body', label: 'Body', icon: <PersonStandingIcon size={20} color="currentColor" /> },
+]
+
+/**
+ * @deprecated Use `workoutNavItems` — these are the workout app's categories,
+ * not a generic shell default. `SideNav.items` is required now (AW-132).
+ */
+export const defaultNavItems = workoutNavItems

package/src/components/ui/README.md

@@ -0,0 +1,110 @@
+# `ui/*` — the generic primitive family
+
+The domain-free foundation tier: 38 primitives that know nothing about workouts,
+sessions or initiatives. Everything in `custom/*` and `shell/*` is built on this
+layer, and `ui/*` may not import from either of them — the tier order is
+`theme → icons → ui → custom → shell → pages`.
+
+This README is the **index**. It maps each primitive's dependencies
+(**composes ↓**) and its consumers (**used-by ↑**) so the tree navigates in both
+directions and a hand-rolled element that should have reached for an existing
+primitive is visible. Storybook mirrors it under
+`Components/Atoms|Molecules|Organisms/…`; each primitive's autodocs page repeats
+its Composes links.
+
+Counts below are generated, not hand-kept: they come from
+[`src/arch/arch-graph.json`](../../arch/arch-graph.json) (regenerate with
+`pnpm arch:graph`, which `arch-graph.freshness.test.ts` keeps honest). **In-repo**
+is in-library consumers; **external** is import sites in the three checkouts the
+graph scans (voltras mobile, voltras-mcp, codewatch dashboard). It is a floor,
+not a census: `docs/audits/2026-09-08-critique-addenda.md` §D1 found seven
+downstream checkouts, and audiobook/frontend — the one that tracks HEAD — is not
+among the three.
+
+## The one rule this family exists to enforce
+
+A primitive here is the _only_ implementation of its shape. When a family needs
+a rule, a pill, a dot or a plane, it composes `ui/*` — it does not draw one. The
+audit that produced this file found four container primitives competing and
+twelve pill-shaped components; roadmap decisions 1, 3, 4, 5, 10 and 11 collapsed
+them, and the survivors are marked as presets below.
+
+## Dependency map
+
+| Component        | Tier     | Composes ↓      | Used-by ↑ (in-repo)                                                                                                                                            | In-repo | External |
+| ---------------- | -------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- |
+| `alert`          | atom     | —               | — (app-facing leaf)                                                                                                                                            | 0       | 6        |
+| `autocomplete`   | molecule | Surface         | —                                                                                                                                                              | 0       | 0        |
+| `avatar`         | atom     | —               | —                                                                                                                                                              | 0       | 0        |
+| `badge`          | molecule | Pill, Indicator | BodyMapDetailPanel, MesoCard, ReadinessCheck                                                                                                                   | 3       | 3        |
+| `breadcrumbs`    | atom     | —               | —                                                                                                                                                              | 0       | 0        |
+| `button`         | atom     | —               | examples                                                                                                                                                       | 1       | 17       |
+| `card`           | molecule | Surface         | CoChangeChip, FileActivityDetail, FileHistoryExplorer, InitiativeCard, MesoCard, MesoStatusCard, PortfolioOverview, ReadinessCheck, SessionDetail, WorkoutCard | 10      | 74       |
+| `checkbox`       | atom     | —               | examples                                                                                                                                                       | 1       | 0        |
+| `chip`           | molecule | Pill            | — (external-only preset)                                                                                                                                       | 0       | 0        |
+| `collapse`       | atom     | —               | SessionDetail                                                                                                                                                  | 1       | 0        |
+| `data-row`       | atom     | —               | FileActivityDetail, VolumeLandmarkBar                                                                                                                          | 2       | 2        |
+| `divider`        | atom     | —               | FileHistoryExplorer, OpenLoops, SessionDetail, SessionList, TopBar                                                                                             | 5       | 2        |
+| `drawer`         | molecule | Surface         | PrHistoryModal                                                                                                                                                 | 1       | 6        |
+| `form-field`     | atom     | —               | examples                                                                                                                                                       | 1       | 0        |
+| `help-tip`       | molecule | Surface         | — **deprecated**, use Tooltip                                                                                                                                  | 0       | 0        |
+| `icon-box`       | atom     | —               | —                                                                                                                                                              | 0       | 0        |
+| `indicator`      | atom     | —               | Badge, DeviceRow, SessionStatePill, SeverityLabel                                                                                                              | 6       | 0        |
+| `input`          | atom     | —               | examples                                                                                                                                                       | 1       | 1        |
+| `link`           | atom     | —               | —                                                                                                                                                              | 0       | 0        |
+| `list-item`      | atom     | —               | — (app-facing leaf)                                                                                                                                            | 0       | 9        |
+| `menu`           | molecule | Surface         | —                                                                                                                                                              | 0       | 0        |
+| `modal`          | molecule | Surface         | —                                                                                                                                                              | 0       | 0        |
+| `pill`           | atom     | —               | Badge, Chip, CoChangeChip, FileActivityDetail, InitiativeCard, InitiativeHeader, MuscleGroupChip, OpenLoops, SessionDetail, StatusPill, TaskRow                | 11      | 1        |
+| `popover`        | molecule | Surface         | DeviceMenu                                                                                                                                                     | 1       | 0        |
+| `progress`       | atom     | —               | CircularTimer                                                                                                                                                  | 1       | 2        |
+| `radio`          | atom     | —               | examples                                                                                                                                                       | 1       | 2        |
+| `section`        | atom     | —               | — (app-facing leaf)                                                                                                                                            | 0       | 10       |
+| `select`         | molecule | Surface         | examples                                                                                                                                                       | 2       | 1        |
+| `skeleton`       | atom     | —               | —                                                                                                                                                              | 0       | 0        |
+| `spinner`        | atom     | —               | — (app-facing leaf)                                                                                                                                            | 0       | 2        |
+| `stack`          | atom     | —               | MetricTiles, ScheduleTiles                                                                                                                                     | 2       | 27       |
+| `surface`        | atom     | —               | Autocomplete, Card, DashboardShell, Drawer, HelpTip, LiveFatigueCard, Menu, Modal, Popover, Select, SessionHeader, SessionRail, Toast, ToolbarButton, Tooltip  | 15      | 29       |
+| `switch`         | atom     | —               | —                                                                                                                                                              | 0       | 0        |
+| `tabs`           | atom     | —               | —                                                                                                                                                              | 0       | 0        |
+| `tile`           | atom     | —               | FileActivityDetail, FileHistoryExplorer, MetricTiles, ScheduleTiles — **deprecated**, use a Card stat preset                                                   | 4       | 0        |
+| `toast`          | molecule | Surface         | —                                                                                                                                                              | 0       | 0        |
+| `toolbar-button` | molecule | Surface         | —                                                                                                                                                              | 0       | 0        |
+| `tooltip`        | molecule | Surface         | FatigueLights, SessionDetail, SessionListItem, Table, TaskRow, ZoneTrack                                                                                       | 8       | 1        |
+
+Two roots carry the family: **`surface`** (15 in-repo consumers — every floating
+and raised plane) and **`pill`** (11 — every pill-shaped label since decision 3).
+Nothing else in `ui/*` is composed by more than six.
+
+## Reuse audit — where `ui/*` still hand-rolls
+
+| Leaf                                                     | Should compose                    | Status                                                                                                                                                                             |
+| -------------------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Text runs (79 raw `<Text>` in 27 files)                  | `Typography`                      | **Open.** `Typography` is in `custom/`, which `ui/*` may not import. Roadmap decision 9 moves it into `ui/`; until then every heading and label here is hand-styled.               |
+| Pill-shaped labels                                       | `Pill`                            | **Closed** (#172). `Badge` and `Chip` now render `<Pill>`; the six folded-in variants are in `DEPRECATIONS.md`.                                                                    |
+| Status dots                                              | `Indicator`                       | **Closed** for `ui/*`. `StatusDot` (Workout) is deprecated toward `Indicator` (decision 10).                                                                                       |
+| Raised / floating planes                                 | `Surface` (`raise` / `elevation`) | **Closed** (#166, #173). Eleven molecules compose `Surface` rather than setting `bg-surface-*` themselves.                                                                         |
+| Rules and separators (20 `border-hairline*` in 12 files) | `Divider`                         | **Partly open.** Decision 4 allows `border-hairline` only on Card `outline`/`subtle`, Table rules and input borders — `Select`, `Radio`, `Drawer` and `Tabs` still draw their own. |
+| Tooltip-with-a-label lockup                              | `Tooltip` + your own label        | **Closed** by deprecation. `HelpTip` and `LabelWithHelp` are retired (decision 5).                                                                                                 |
+
+## Watch list
+
+- **`Typography` cannot be composed here.** The tier order forbids the import, so
+  the 79 raw `<Text>` runs above cannot be fixed inside this family. Blocked on
+  roadmap E3 moving `Typography` and `Eyebrow` into `ui/`.
+- **Fourteen primitives read as dead** — `autocomplete`, `avatar`, `breadcrumbs`,
+  `chip`, `help-tip`, `icon-box`, `link`, `menu`, `modal`, `skeleton`, `switch`,
+  `tabs`, `toast`, `toolbar-button`. That is not automatically a delete: the graph
+  sees three of seven downstream checkouts, and `Chip` in particular has a known
+  consumer (audiobook/frontend, §D1) the graph cannot see. Settle per component
+  under roadmap E6.4, not by reading this table.
+- **`modal` and `menu` read dead while `drawer` and `popover` do not.** The
+  overlay set is mid-migration onto the floating lift (E1); recheck after the
+  trigger work lands rather than treating the split as a decision.
+
+## Maturity
+
+Status tags on these stories are derived, not chosen — the rule is in
+[`MATURITY.md`](../../../MATURITY.md). Membership in the dependency map above is
+one of its three inputs, so **adding a primitive here without adding its row
+leaves it `status:candidate`**.

package/src/components/ui/alert/Alert.stories.tsx

@@ -5,7 +5,7 @@ import { Alert, AlertTitle, AlertDescription } from './Alert'
 const meta: Meta<typeof Alert> = {
   title: 'Components/Molecules/Alert',
   component: Alert,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   parameters: {
     docs: {
       description: {

package/src/components/ui/autocomplete/Autocomplete.stories.tsx

@@ -6,7 +6,7 @@ import { Autocomplete, AutocompleteOption } from './Autocomplete'
 const meta: Meta<typeof Autocomplete> = {
   title: 'Components/Molecules/Autocomplete',
   component: Autocomplete,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     isDisabled: {
       control: 'boolean',
@@ -48,9 +48,7 @@ export const Default: Story = {
           onChange={setValue}
           placeholder="Search fruits..."
         />
-        <Text className="text-sm text-text-secondary mt-2">
-          Selected: {value || 'None'}
-        </Text>
+        <Text className="text-sm text-text-secondary mt-2">Selected: {value || 'None'}</Text>
       </View>
     )
   },
@@ -140,12 +138,7 @@ export const Disabled: Story = {
   render: function Render() {
     return (
       <View className="w-64">
-        <Autocomplete
-          options={fruitOptions}
-          value="apple"
-          label="Disabled field"
-          isDisabled
-        />
+        <Autocomplete options={fruitOptions} value="apple" label="Disabled field" isDisabled />
       </View>
     )
   },
@@ -175,7 +168,12 @@ export const DisabledOptions: Story = {
     const optionsWithDisabled: AutocompleteOption[] = [
       { value: 'free', label: 'Free Plan' },
       { value: 'pro', label: 'Pro Plan' },
-      { value: 'enterprise', label: 'Enterprise Plan', isDisabled: true, description: 'Contact sales' },
+      {
+        value: 'enterprise',
+        label: 'Enterprise Plan',
+        isDisabled: true,
+        description: 'Contact sales',
+      },
     ]
     return (
       <View className="w-64">
@@ -289,8 +287,8 @@ export const FormExample: Story = {
 
         <View className="pt-2 border-t border-hairline">
           <Text className="text-sm text-text-secondary">
-            Selected: {country ? `${countryOptions.find(c => c.value === country)?.label}` : '-'}
-            {city ? `, ${cityOptions[country!]?.find(c => c.value === city)?.label}` : ''}
+            Selected: {country ? `${countryOptions.find((c) => c.value === country)?.label}` : '-'}
+            {city ? `, ${cityOptions[country!]?.find((c) => c.value === city)?.label}` : ''}
           </Text>
         </View>
       </View>

package/src/components/ui/autocomplete/Autocomplete.test.tsx

@@ -102,26 +102,20 @@ describe('Autocomplete', () => {
   })
 
   it('shows clear button when value is selected', () => {
-    render(
-      <Autocomplete options={defaultOptions} value="1" isClearable />
-    )
+    render(<Autocomplete options={defaultOptions} value="1" isClearable />)
     expect(screen.getByLabelText('Clear selection')).toBeInTheDocument()
   })
 
   it('calls onChange with null when clear is pressed', () => {
     const onChange = vi.fn()
-    render(
-      <Autocomplete options={defaultOptions} value="1" onChange={onChange} isClearable />
-    )
+    render(<Autocomplete options={defaultOptions} value="1" onChange={onChange} isClearable />)
 
     fireEvent.click(screen.getByLabelText('Clear selection'))
     expect(onChange).toHaveBeenCalledWith(null)
   })
 
   it('does not show clear button when isClearable is false', () => {
-    render(
-      <Autocomplete options={defaultOptions} value="1" isClearable={false} />
-    )
+    render(<Autocomplete options={defaultOptions} value="1" isClearable={false} />)
     expect(screen.queryByLabelText('Clear selection')).not.toBeInTheDocument()
   })
 
@@ -144,13 +138,7 @@ describe('Autocomplete', () => {
     })
 
     it('shows custom minCharsText', () => {
-      render(
-        <Autocomplete
-          options={defaultOptions}
-          minChars={3}
-          minCharsText="Keep typing..."
-        />
-      )
+      render(<Autocomplete options={defaultOptions} minChars={3} minCharsText="Keep typing..." />)
       const input = screen.getByPlaceholderText('Search...')
 
       typeInInput(input, 'A')
@@ -185,9 +173,7 @@ describe('Autocomplete', () => {
     })
 
     it('does not show clear button when disabled', () => {
-      render(
-        <Autocomplete options={defaultOptions} value="1" isDisabled isClearable />
-      )
+      render(<Autocomplete options={defaultOptions} value="1" isDisabled isClearable />)
       expect(screen.queryByLabelText('Clear selection')).not.toBeInTheDocument()
     })
   })
@@ -225,9 +211,7 @@ describe('Autocomplete', () => {
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <Autocomplete options={defaultOptions} label="Search" />
-      )
+      const { container } = render(<Autocomplete options={defaultOptions} label="Search" />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
@@ -238,9 +222,7 @@ describe('Autocomplete', () => {
     })
 
     it('clear button has accessible label', () => {
-      render(
-        <Autocomplete options={defaultOptions} value="1" isClearable />
-      )
+      render(<Autocomplete options={defaultOptions} value="1" isClearable />)
       expect(screen.getByLabelText('Clear selection')).toBeInTheDocument()
     })
   })