@titan-design/react-ui 0.6.0 → 0.7.0

package/src/components/shell/SessionStatePill.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { SessionStatePill } from './SessionStatePill'
 
 const meta: Meta<typeof SessionStatePill> = {
-  title: 'Shell/TopBar/SessionStatePill',
+  title: 'Shell/SessionStatePill',
   component: SessionStatePill,
   tags: ['autodocs'],
   args: { state: 'live' },
@@ -15,8 +15,8 @@ const meta: Meta<typeof SessionStatePill> = {
       description: {
         component:
           '**Molecule** (= the ledger’s reusable StatusPill — also used by the Live-view header). Composes ' +
-          '[Indicator](?path=/docs/components-indicator--docs) (pulse `ping` + vivid color for live) + ' +
-          '[Typography](?path=/docs/custom-typography--docs) (`monoLabel`). Use the `state` control to switch.',
+          '[Indicator](?path=/docs/components-atoms-indicator--docs) (pulse `ping` + vivid color for live) + ' +
+          '[Typography](?path=/docs/foundations-typography--docs) (`monoLabel`). Use the `state` control to switch.',
       },
     },
   },

package/src/components/shell/SessionStatePill.tsx

@@ -23,7 +23,7 @@ const stateConfig: Record<
   }
 > = {
   // live = vivid green with an expanding ring; rest = solid amber (no pulse — operator); idle is dim.
-  live: { label: 'LIVE', color: 'success', pulse: 'ping', textColor: 'primary' },
+  live: { label: 'LIVE', color: 'live', pulse: 'ping', textColor: 'primary' },
   rest: { label: 'REST', color: 'warning', pulse: false, textColor: 'primary' },
   idle: { label: 'IDLE', color: 'default', pulse: false, textColor: 'secondary' },
 }

package/src/components/shell/SideNav.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useArgs } from 'storybook/preview-api'
+import { View } from 'react-native'
+import { SideNav } from './SideNav'
+import { Typography } from '../custom/Typography'
+
+const meta: Meta<typeof SideNav> = {
+  title: 'Shell/SideNav',
+  component: SideNav,
+  tags: ['autodocs'],
+  args: { activeKey: 'live', liveKey: null },
+  argTypes: {
+    activeKey: { control: 'select', options: ['live', 'review', 'program', 'body'] },
+    liveKey: { control: 'select', options: [null, 'live', 'review', 'program', 'body'] },
+    onNavigate: { action: 'navigate' },
+  },
+  // Interactive AND Controls-synced: clicking a category writes `activeKey` back to the
+  // story args (canvas + Controls stay in lock-step) and still fires the `onNavigate`
+  // action. `useArgs` must be called directly in the story/render fn (not a child
+  // component), so the rules-of-hooks lint is disabled here — the idiomatic SB pattern.
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [, updateArgs] = useArgs()
+    return (
+      <SideNav
+        {...args}
+        onNavigate={(key) => {
+          updateArgs({ activeKey: key })
+          args.onNavigate?.(key)
+        }}
+      />
+    )
+  },
+  // Render in-context: full-height shell frame so the rail snaps to the left edge and
+  // stretches with the viewport (resize the canvas height to see it hold).
+  decorators: [
+    (Story) => (
+      <View className="min-h-screen flex-row bg-background-default">
+        <Story />
+        <View className="flex-1 items-center justify-center">
+          <Typography variant="body2" color="tertiary">
+            main viewport
+          </Typography>
+        </View>
+      </View>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Organism** (shell region). The persistent 60px left rail switching Live · Review · Plan · ' +
+          'Body. Composes [NavItem](?path=/docs/shell-navitem--docs) × the four categories + the ' +
+          'shared [icon set](?path=/docs/foundations-icons--docs). Presentational — drive it with `activeKey` / ' +
+          '`onNavigate` / `liveKey`. Active = left accent bar; `liveKey` (when not active) tints that ' +
+          'label a muted green.\n\n' +
+          '**Try it:** stories render in a full-height shell frame — the rail pins to the left edge and ' +
+          'stretches to the viewport, items staying top-aligned. **Resize the canvas** to see it hold at ' +
+          'any height. Use the **Controls** to move `activeKey` / `liveKey`.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof SideNav>
+
+export const Default: Story = {}
+
+export const LiveElsewhere: Story = {
+  args: { activeKey: 'program', liveKey: 'live' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A set runs on Live while the operator is on Plan → the Live item carries a quiet green label cue. ' +
+          '(Still clickable — try switching away and back.)',
+      },
+    },
+  },
+}

package/src/components/shell/SideNav.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SideNav } from './SideNav'
+
+describe('SideNav', () => {
+  it('renders the four default categories as tabs in a tablist', () => {
+    render(<SideNav activeKey="live" />)
+    expect(screen.getByRole('tablist')).toBeInTheDocument()
+    ;['Live', 'Review', 'Plan', 'Body'].forEach((name) => {
+      expect(screen.getByRole('tab', { name })).toBeInTheDocument()
+    })
+  })
+
+  it('shows the accent bar only on the active category', () => {
+    render(<SideNav activeKey="program" />)
+    expect(screen.getAllByTestId('nav-item-accent')).toHaveLength(1)
+    expect(
+      within(screen.getByRole('tab', { name: 'Plan' })).getByTestId('nav-item-accent')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByRole('tab', { name: 'Live' })).queryByTestId('nav-item-accent')
+    ).toBeNull()
+  })
+
+  it('reports the tapped key via onNavigate', () => {
+    const onNavigate = vi.fn()
+    render(<SideNav activeKey="live" onNavigate={onNavigate} />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Body' }))
+    expect(onNavigate).toHaveBeenCalledWith('body')
+  })
+
+  it('keeps the active item as active even when it is also the liveKey (no double-state)', () => {
+    render(<SideNav activeKey="live" liveKey="live" />)
+    // active wins: exactly one accent bar, on Live (the live cue never applies to the active view)
+    expect(screen.getAllByTestId('nav-item-accent')).toHaveLength(1)
+    expect(
+      within(screen.getByRole('tab', { name: 'Live' })).getByTestId('nav-item-accent')
+    ).toBeInTheDocument()
+  })
+
+  it('accepts custom items', () => {
+    render(<SideNav activeKey="a" items={[{ key: 'a', label: 'Alpha', icon: null }]} />)
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<SideNav activeKey="live" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/SideNav.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { View } from 'react-native'
+import { cn } from '../../utils/cn'
+import { ActivityIcon, HistoryIcon, LayersIcon, PersonStandingIcon } from '../icons'
+import { NavItem } from './NavItem'
+
+export interface SideNavItem {
+  /** Stable category key — matches `activeKey` / `liveKey`. */
+  key: string
+  /** Micro-label shown under the glyph. */
+  label: string
+  /** The glyph node (rendered ~20px via `currentColor`). */
+  icon: ReactNode
+}
+
+export interface SideNavProps {
+  /** Category items, top → bottom. Defaults to the four dashboard categories. */
+  items?: SideNavItem[]
+  /** Key of the active category. */
+  activeKey: string
+  /** Called with the tapped item's key. */
+  onNavigate?: (key: string) => void
+  /**
+   * Key of a category with live activity while it is NOT active (e.g. a set
+   * running off its view) → a quiet green cue on that item's label.
+   */
+  liveKey?: string | null
+  className?: string
+}
+
+/** The four dashboard categories with their locked S2 glyphs (activity · history · layers · figure). */
+export const defaultNavItems: 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" /> },
+]
+
+/**
+ * Shell S2 · SideNav — the persistent 60px left rail that switches the main
+ * viewport between categories (Live · Review · Program · Body). Presentational:
+ * it renders `items` and reports taps via `onNavigate`; the app owns routing and
+ * which key is `live`. Active item shows a left accent bar; `liveKey` (when not
+ * the active view) tints that item's label a muted green. Fixed 60px at every
+ * width — labels sit under the glyph, so they never change the rail width.
+ */
+export function SideNav({
+  items = defaultNavItems,
+  activeKey,
+  onNavigate,
+  liveKey = null,
+  className,
+}: SideNavProps) {
+  return (
+    <View
+      accessibilityRole="tablist"
+      className={cn(
+        'w-[60px] items-center gap-[6px] border-r border-border bg-background-base py-3',
+        className
+      )}
+    >
+      {items.map((item) => (
+        <NavItem
+          key={item.key}
+          icon={item.icon}
+          label={item.label}
+          active={item.key === activeKey}
+          live={item.key === liveKey && item.key !== activeKey}
+          onPress={() => onNavigate?.(item.key)}
+        />
+      ))}
+    </View>
+  )
+}

package/src/components/shell/TopBar.stories.tsx

@@ -29,11 +29,11 @@ const meta: Meta<typeof TopBar> = {
         component:
           '**Organism** — the persistent shell chrome band, and the root of the top-bar family ' +
           '(see `shell/README.md` for the full dependency map). Composes ' +
-          '[BrandLockup](?path=/docs/shell-topbar-brandlockup--docs) + ' +
-          '[SessionStatePill](?path=/docs/shell-topbar-sessionstatepill--docs) + ' +
-          '[Divider](?path=/docs/components-divider--docs) (`bg-border-prominent`) + ' +
-          '[DeviceMenu](?path=/docs/shell-topbar-devicemenu--docs) + ' +
-          '[DateTime](?path=/docs/custom-datetime--docs) (`variant="mono"` live clock). ' +
+          '[BrandLockup](?path=/docs/shell-brandlockup--docs) + ' +
+          '[SessionStatePill](?path=/docs/shell-sessionstatepill--docs) + ' +
+          '[Divider](?path=/docs/components-atoms-divider--docs) (`bg-border-prominent`) + ' +
+          '[DeviceMenu](?path=/docs/shell-devicemenu--docs) + ' +
+          '[DateTime](?path=/docs/components-molecules-datetime--docs) (`variant="mono"` live clock). ' +
           'Background = the shared `surfaceGradient.chrome` primitive.\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 ' +

package/src/components/shell/index.ts

@@ -6,3 +6,8 @@ export * from './DeviceIndicator'
 export * from './DeviceRow'
 export * from './DeviceMenu'
 export * from './TopBar'
+// S2 · Side nav family.
+export * from './NavItem'
+export * from './SideNav'
+// S3 · Dashboard shell — composes the nav + top-bar chrome over a content slot.
+export * from './DashboardShell'

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Alert, AlertTitle, AlertDescription } from './Alert'
 
 const meta: Meta<typeof Alert> = {
-  title: 'Components/Alert',
+  title: 'Components/Molecules/Alert',
   component: Alert,
   tags: ['autodocs'],
   argTypes: {

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

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native'
 import { Autocomplete, AutocompleteOption } from './Autocomplete'
 
 const meta: Meta<typeof Autocomplete> = {
-  title: 'Components/Autocomplete',
+  title: 'Components/Molecules/Autocomplete',
   component: Autocomplete,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Avatar, AvatarBadge, AvatarGroup } from './Avatar'
 
 const meta: Meta<typeof Avatar> = {
-  title: 'Components/Avatar',
+  title: 'Components/Atoms/Avatar',
   component: Avatar,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Badge, BadgeText } from './Badge'
 
 const meta: Meta<typeof Badge> = {
-  title: 'Components/Badge',
+  title: 'Components/Atoms/Badge',
   component: Badge,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/breadcrumbs/Breadcrumbs.stories.tsx

@@ -3,7 +3,7 @@ import { Text } from 'react-native'
 import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs'
 
 const meta: Meta<typeof Breadcrumbs> = {
-  title: 'Components/Breadcrumbs',
+  title: 'Components/Molecules/Breadcrumbs',
   component: Breadcrumbs,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Button, ButtonText, ButtonIcon } from './Button'
 
 const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
+  title: 'Components/Molecules/Button',
   component: Button,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/card/Card.stories.tsx

@@ -13,7 +13,7 @@ import {
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
+  title: 'Components/Molecules/Card',
   component: Card,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/checkbox/Checkbox.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Checkbox, CheckboxGroup } from './Checkbox'
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Components/Checkbox',
+  title: 'Components/Molecules/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/chip/Chip.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Chip } from './Chip'
 
 const meta: Meta<typeof Chip> = {
-  title: 'Components/Chip',
+  title: 'Components/Atoms/Chip',
   component: Chip,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/collapse/Collapse.stories.tsx

@@ -12,7 +12,7 @@ import {
 } from './Collapse'
 
 const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
+  title: 'Components/Organisms/Accordion',
   component: Accordion,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { DataRow } from './DataRow'
 
 const meta: Meta<typeof DataRow> = {
-  title: 'Components/DataRow',
+  title: 'Components/Molecules/DataRow',
   component: DataRow,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/divider/Divider.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Divider } from './Divider'
 
 const meta: Meta<typeof Divider> = {
-  title: 'Components/Divider',
+  title: 'Components/Atoms/Divider',
   component: Divider,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -5,7 +5,7 @@ import { Drawer, DrawerBody, DrawerFooter } from './Drawer'
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Drawer> = {
-  title: 'Components/Drawer',
+  title: 'Components/Organisms/Drawer',
   component: Drawer,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/form-field/FormField.stories.tsx

@@ -5,7 +5,7 @@ import { Button, ButtonText } from '../button'
 import { Input } from '../input'
 
 const meta: Meta<typeof FormField> = {
-  title: 'Components/FormField',
+  title: 'Components/Molecules/FormField',
   component: FormField,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/help-tip/HelpTip.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { HelpTip, LabelWithHelp } from './HelpTip'
 
 const meta: Meta<typeof HelpTip> = {
-  title: 'Components/HelpTip',
+  title: 'Components/Molecules/HelpTip',
   component: HelpTip,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/icon-box/IconBox.stories.tsx

@@ -53,7 +53,7 @@ function BoltIcon({ size = 20, className }: { size?: number; className?: string
 }
 
 const meta: Meta<typeof IconBox> = {
-  title: 'Components/IconBox',
+  title: 'Components/Atoms/IconBox',
   component: IconBox,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/index.ts

@@ -36,3 +36,4 @@ export * from './surface'
 export * from './list-item'
 export * from './indicator'
 export * from './pill'
+export * from './tile'

package/src/components/ui/indicator/Indicator.stories.tsx

@@ -3,14 +3,14 @@ import { View } from 'react-native'
 import { Indicator } from './Indicator'
 
 const meta: Meta<typeof Indicator> = {
-  title: 'Components/Indicator',
+  title: 'Components/Atoms/Indicator',
   component: Indicator,
   tags: ['autodocs'],
   argTypes: {
     size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
     color: {
       control: 'select',
-      options: ['default', 'primary', 'success', 'error', 'warning', 'info'],
+      options: ['default', 'primary', 'success', 'live', 'error', 'warning', 'info'],
     },
     glow: { control: 'boolean' },
     ring: { control: 'boolean' },

package/src/components/ui/indicator/Indicator.test.tsx

@@ -22,6 +22,7 @@ describe('Indicator', () => {
       'default',
       'primary',
       'success',
+      'live',
       'error',
       'warning',
       'info',

package/src/components/ui/indicator/Indicator.tsx

@@ -6,6 +6,7 @@ export type IndicatorColor =
   | 'default'
   | 'primary'
   | 'success'
+  | 'live'
   | 'error'
   | 'warning'
   | 'info'
@@ -42,6 +43,7 @@ const colorStyles: Record<IndicatorColor, string> = {
   default: 'bg-text-tertiary',
   primary: 'bg-brand-primary',
   success: 'bg-status-success',
+  live: 'bg-status-live',
   error: 'bg-status-error',
   warning: 'bg-status-warning',
   info: 'bg-status-info',
@@ -98,7 +100,10 @@ export function Indicator({
         colorClass,
         pulseMode === 'opacity' && 'animate-pulse',
         ring && 'border-2 border-background-base',
-        glow && !customColor && color === 'success' && 'shadow-[0_0_6px_rgba(46,213,115,0.6)]',
+        glow &&
+          !customColor &&
+          (color === 'success' || color === 'live') &&
+          'shadow-[0_0_6px_rgba(46,213,115,0.6)]',
         glow && !customColor && color === 'error' && 'shadow-[0_0_6px_rgba(239,68,68,0.6)]',
         glow && !customColor && color === 'warning' && 'shadow-[0_0_6px_rgba(245,158,11,0.6)]',
         glow && !customColor && color === 'primary' && 'shadow-[0_0_6px_rgba(255,121,0,0.6)]',

package/src/components/ui/input/Input.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Input, InputGroup, PasswordInput } from './Input'
 
 const meta: Meta<typeof Input> = {
-  title: 'Components/Input',
+  title: 'Components/Molecules/Input',
   component: Input,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/link/Link.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Link } from './Link'
 
 const meta: Meta<typeof Link> = {
-  title: 'Components/Link',
+  title: 'Components/Atoms/Link',
   component: Link,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/list-item/ListItem.stories.tsx

@@ -45,7 +45,7 @@ function ChevronRight({ size = 16 }: { size?: number }) {
 }
 
 const meta: Meta<typeof ListItem> = {
-  title: 'Components/ListItem',
+  title: 'Components/Molecules/ListItem',
   component: ListItem,
   tags: ['autodocs'],
 }

package/src/components/ui/menu/Menu.stories.tsx

@@ -4,7 +4,7 @@ import { Menu, MenuTrigger, MenuList, MenuItem, MenuDivider, MenuGroup } from '.
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Menu> = {
-  title: 'Components/Menu',
+  title: 'Components/Molecules/Menu',
   component: Menu,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/modal/Modal.stories.tsx

@@ -13,7 +13,7 @@ import {
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Modal> = {
-  title: 'Components/Modal',
+  title: 'Components/Organisms/Modal',
   component: Modal,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/pill/Pill.stories.tsx

@@ -4,7 +4,7 @@ import { Pill } from './Pill'
 import { Indicator } from '../indicator'
 
 const meta: Meta<typeof Pill> = {
-  title: 'Components/Pill',
+  title: 'Components/Atoms/Pill',
   component: Pill,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/popover/Popover.stories.tsx

@@ -4,7 +4,7 @@ import { Popover, PopoverTrigger, PopoverContent, PopoverCloseButton } from './P
 import { Button, ButtonText } from '../button/Button'
 
 const meta: Meta<typeof Popover> = {
-  title: 'Components/Popover',
+  title: 'Components/Molecules/Popover',
   component: Popover,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/progress/Progress.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Progress, CircularProgress, ProgressSteps } from './Progress'
 
 const meta: Meta<typeof Progress> = {
-  title: 'Components/Progress',
+  title: 'Components/Molecules/Progress',
   component: Progress,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/radio/Radio.stories.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native'
 import { Radio, RadioGroup } from './Radio'
 
 const meta: Meta<typeof RadioGroup> = {
-  title: 'Components/Radio',
+  title: 'Components/Molecules/Radio',
   component: RadioGroup,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/section/Section.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Section, SectionHeader, SectionContent } from './Section'
 
 const meta: Meta<typeof Section> = {
-  title: 'Components/Section',
+  title: 'Components/Atoms/Section',
   component: Section,
   tags: ['autodocs'],
 }

package/src/components/ui/select/Select.stories.tsx

@@ -12,7 +12,7 @@ const basicOptions: SelectOption[] = [
 ]
 
 const meta: Meta<typeof Select> = {
-  title: 'Components/Select',
+  title: 'Components/Molecules/Select',
   component: Select,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/skeleton/Skeleton.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from './Skeleton'
 
 const meta: Meta<typeof Skeleton> = {
-  title: 'Components/Skeleton',
+  title: 'Components/Atoms/Skeleton',
   component: Skeleton,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/spinner/Spinner.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Spinner } from './Spinner'
 
 const meta: Meta<typeof Spinner> = {
-  title: 'Components/Spinner',
+  title: 'Components/Atoms/Spinner',
   component: Spinner,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/stack/Stack.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Stack, HStack, VStack } from './Stack'
 
 const meta: Meta<typeof Stack> = {
-  title: 'Components/Stack',
+  title: 'Components/Atoms/Stack',
   component: Stack,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/surface/Surface.stories.tsx

@@ -4,7 +4,7 @@ import { Surface } from './Surface'
 import type { ElevationLevel } from '../../../theme/elevation'
 
 const meta: Meta<typeof Surface> = {
-  title: 'Components/Surface',
+  title: 'Components/Atoms/Surface',
   component: Surface,
   tags: ['autodocs'],
   argTypes: {