@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -1,11 +1,12 @@
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
 import { Alert, AlertTitle, AlertDescription } from './Alert'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const meta: Meta<typeof Alert> = {
   title: 'Components/Molecules/Alert',
   component: Alert,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   parameters: {
     docs: {
       description: {
@@ -178,7 +179,7 @@ export const DescriptionOnly: Story = {
 
 /** Wall-background frame for the compact cue stories. */
 const wall: Decorator = (Story) => (
-  <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+  <View style={{ width: 460, padding: 28, backgroundColor: 'var(--color-background-frame)' }}>
     <Story />
   </View>
 )
@@ -219,13 +220,22 @@ export const CompactLiveCue: Story = {
 /** Default vs compact, side by side, for the density comparison. */
 export const DefaultVsCompact: Story = {
   render: () => (
-    <View style={{ gap: 16, width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
-      <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700' }}>DEFAULT</Text>
+    <View
+      style={{
+        gap: 16,
+        width: 460,
+        padding: 28,
+        backgroundColor: 'var(--color-background-frame)',
+      }}
+    >
+      <Text style={{ color: greyRamp[700], fontSize: 10, fontWeight: '700' }}>DEFAULT</Text>
       <Alert status="warning" variant="subtle">
         <AlertTitle>Approaching threshold</AlertTitle>
         <AlertDescription>18% velocity loss — one or two reps left in the band.</AlertDescription>
       </Alert>
-      <Text style={{ color: '#5A5A5A', fontSize: 10, fontWeight: '700' }}>COMPACT (cue pill)</Text>
+      <Text style={{ color: greyRamp[700], fontSize: 10, fontWeight: '700' }}>
+        COMPACT (cue pill)
+      </Text>
       <Alert
         status="warning"
         variant="subtle"

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

@@ -44,42 +44,54 @@ const statusColors: Record<
     subtle: string
     outline: string
     solid: string
+    /** Text/glyph colour on the `solid` fill — the status's on-colour. */
+    onSolid: string
     border: string
     icon: string
     text: string
+    /** Label ON the `subtle` fill — see AW-133; the base token is too deep to read there. */
+    subtleText: string
   }
 > = {
   success: {
     subtle: 'bg-status-success-subtle',
     outline: 'border-2 border-status-success bg-transparent',
     solid: 'bg-status-success',
+    onSolid: 'text-on-status-success',
     border: 'border-status-success',
     icon: 'text-status-success',
     text: 'text-status-success',
+    subtleText: 'text-on-status-success-subtle',
   },
   info: {
     subtle: 'bg-status-info-subtle',
     outline: 'border-2 border-status-info bg-transparent',
     solid: 'bg-status-info',
+    onSolid: 'text-on-status-info',
     border: 'border-status-info',
     icon: 'text-status-info',
     text: 'text-status-info',
+    subtleText: 'text-on-status-info-subtle',
   },
   warning: {
     subtle: 'bg-status-warning-subtle',
     outline: 'border-2 border-status-warning bg-transparent',
     solid: 'bg-status-warning',
+    onSolid: 'text-on-status-warning',
     border: 'border-status-warning',
     icon: 'text-status-warning',
     text: 'text-status-warning',
+    subtleText: 'text-on-status-warning-subtle',
   },
   error: {
     subtle: 'bg-status-error-subtle',
     outline: 'border-2 border-status-error bg-transparent',
     solid: 'bg-status-error',
+    onSolid: 'text-on-status-error',
     border: 'border-status-error',
     icon: 'text-status-error',
     text: 'text-status-error',
+    subtleText: 'text-on-status-error-subtle',
   },
 }
 
@@ -142,7 +154,7 @@ export function Alert({
               className={cn(
                 'font-bold',
                 isCompact ? 'text-base' : 'text-lg',
-                isSolid ? 'text-white' : colors.icon
+                isSolid ? colors.onSolid : variant === 'subtle' ? colors.subtleText : colors.icon
               )}
             >
               {defaultIcons[status]}
@@ -154,7 +166,10 @@ export function Alert({
       <View className="flex-1">
         {message != null && (
           <Text
-            className={cn('text-sm font-semibold', isSolid ? 'text-white' : colors.text)}
+            className={cn(
+              'text-sm font-semibold',
+              isSolid ? colors.onSolid : variant === 'subtle' ? colors.subtleText : colors.text
+            )}
             testID="alert-message"
           >
             {message}
@@ -168,9 +183,15 @@ export function Alert({
           onPress={onClose}
           accessibilityRole="button"
           accessibilityLabel="Close alert"
+          /* VW-82: press-state scrims stay raw (see Modal.tsx). */
           className="ml-2 p-1 rounded web:hover:bg-black/10 active:bg-black/20"
         >
-          <Text className={cn('text-lg', isSolid ? 'text-white/70' : 'text-text-secondary')}>
+          <Text
+            className={cn(
+              'text-lg',
+              isSolid ? cn(colors.onSolid, 'opacity-70') : 'text-text-secondary'
+            )}
+          >
             ×
           </Text>
         </Pressable>

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

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

@@ -1,6 +1,15 @@
 import React, { useState, useCallback, useMemo } from 'react'
-import { View, Text, TextInput, Pressable, ScrollView, type ViewProps, type TextInputProps } from 'react-native'
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ScrollView,
+  type ViewProps,
+  type TextInputProps,
+} from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export interface AutocompleteOption<T = string> {
   value: T
@@ -115,10 +124,7 @@ export function Autocomplete<T extends string = string>({
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
 
   // Get the label for the selected value
-  const selectedOption = useMemo(
-    () => options.find((o) => o.value === value),
-    [options, value]
-  )
+  const selectedOption = useMemo(() => options.find((o) => o.value === value), [options, value])
 
   // Filter options based on input
   const filteredOptions = useMemo(() => {
@@ -206,21 +212,14 @@ export function Autocomplete<T extends string = string>({
             onBlur={handleBlur}
             placeholder={placeholder}
             editable={!isDisabled}
-            className={cn(
-              'flex-1 px-3 py-2 text-text-primary',
-              'placeholder:text-text-tertiary'
-            )}
+            className={cn('flex-1 px-3 py-2 text-text-primary', 'placeholder:text-text-tertiary')}
             accessibilityLabel={label}
             {...inputProps}
           />
 
           {/* Clear button */}
           {isClearable && value && !isDisabled && (
-            <Pressable
-              onPress={handleClear}
-              className="p-2"
-              accessibilityLabel="Clear selection"
-            >
+            <Pressable onPress={handleClear} className="p-2" accessibilityLabel="Clear selection">
               <Text className="text-text-tertiary">×</Text>
             </Pressable>
           )}
@@ -235,11 +234,12 @@ export function Autocomplete<T extends string = string>({
 
         {/* Dropdown */}
         {isOpen && (
-          <View
+          <Surface
+            elevation={4}
+            rounded={false}
             className={cn(
               'absolute z-50 top-full left-0 right-0 mt-1',
-              'bg-surface-elevated rounded-md shadow-lg border border-hairline',
-              'max-h-60 overflow-hidden'
+              'rounded-md max-h-60 overflow-hidden'
             )}
           >
             <ScrollView className="py-1">
@@ -252,16 +252,12 @@ export function Autocomplete<T extends string = string>({
 
               {/* Loading message */}
               {isLoading && (
-                <Text className="px-3 py-2 text-sm text-text-tertiary">
-                  {loadingText}
-                </Text>
+                <Text className="px-3 py-2 text-sm text-text-tertiary">{loadingText}</Text>
               )}
 
               {/* No results */}
               {showNoResults && (
-                <Text className="px-3 py-2 text-sm text-text-tertiary">
-                  {noOptionsText}
-                </Text>
+                <Text className="px-3 py-2 text-sm text-text-tertiary">{noOptionsText}</Text>
               )}
 
               {/* Options */}
@@ -312,17 +308,14 @@ export function Autocomplete<T extends string = string>({
                   )
                 })}
             </ScrollView>
-          </View>
+          </Surface>
         )}
       </View>
 
       {/* Helper/Error text */}
       {(helperText || errorMessage) && (
         <Text
-          className={cn(
-            'text-xs mt-1',
-            isInvalid ? 'text-status-error' : 'text-text-tertiary'
-          )}
+          className={cn('text-xs mt-1', isInvalid ? 'text-status-error' : 'text-text-tertiary')}
         >
           {errorMessage || helperText}
         </Text>

package/src/components/ui/avatar/Avatar.stories.tsx

@@ -5,7 +5,7 @@ import { Avatar, AvatarBadge, AvatarGroup } from './Avatar'
 const meta: Meta<typeof Avatar> = {
   title: 'Components/Atoms/Avatar',
   component: Avatar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     size: {
       control: 'select',

package/src/components/ui/avatar/Avatar.tsx

@@ -133,12 +133,7 @@ export interface AvatarGroupProps {
 /**
  * Group of avatars with stacking effect.
  */
-export function AvatarGroup({
-  children,
-  max,
-  size = 'md',
-  className,
-}: AvatarGroupProps) {
+export function AvatarGroup({ children, max, size = 'md', className }: AvatarGroupProps) {
   const childArray = React.Children.toArray(children)
   const visibleChildren = max ? childArray.slice(0, max) : childArray
   const remainingCount = max ? Math.max(0, childArray.length - max) : 0
@@ -148,10 +143,7 @@ export function AvatarGroup({
       {visibleChildren.map((child, index) => (
         <View
           key={index}
-          className={cn(
-            'border-2 border-surface-base rounded-full',
-            index > 0 && '-ml-2'
-          )}
+          className={cn('border-2 border-surface-base rounded-full', index > 0 && '-ml-2')}
         >
           {React.isValidElement(child)
             ? React.cloneElement(child as React.ReactElement<any>, { size })