@titan-design/react-ui 0.6.0 → 0.8.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

@@ -1,11 +1,25 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View } from 'react-native'
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } 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'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Status callout across 4 statuses (success/info/warning/error) × 3 variants ' +
+          '(subtle/outline/solid). Two densities via `size`: `default` — the padded ' +
+          'icon + title/description block; `compact` — a single-line **cue pill** (tighter, ' +
+          'center-aligned, hairline status border on `subtle`) that absorbs the R2 `CueFlag` ' +
+          'live-coaching cue. Pass `size="compact"` + `message="…"` for the batteries-included ' +
+          "status-colored one-liner (RN doesn't cascade text color, so the `message` prop " +
+          'colors it for you). Use `<AlertTitle>` / `<AlertDescription>` children for richer content.',
+      },
+    },
+  },
   argTypes: {
     status: {
       control: 'select',
@@ -15,6 +29,11 @@ const meta: Meta<typeof Alert> = {
       control: 'select',
       options: ['subtle', 'outline', 'solid'],
     },
+    size: {
+      control: 'inline-radio',
+      options: ['default', 'compact'],
+    },
+    message: { control: 'text' },
     showIcon: { control: 'boolean' },
   },
 }
@@ -152,3 +171,67 @@ export const DescriptionOnly: Story = {
     </Alert>
   ),
 }
+
+// --- Compact cue pill (absorbs CueFlag) --------------------------------------
+// The across-the-room live coaching cue. Rendered on the north-star wall background
+// so the tinted + bordered pill reads the way it will live.
+
+/** Wall-background frame for the compact cue stories. */
+const wall: Decorator = (Story) => (
+  <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+    <Story />
+  </View>
+)
+
+/** Compact warning cue — the VL20 approach-threshold flag (batteries-included `message`). */
+export const CompactWarningCue: Story = {
+  args: {
+    status: 'warning',
+    variant: 'subtle',
+    size: 'compact',
+    message: 'VL20 · target reps met — final rep or end the set.',
+  },
+  decorators: [wall],
+}
+
+/** Compact error cue — the stop-now flag. */
+export const CompactErrorCue: Story = {
+  args: {
+    status: 'error',
+    variant: 'subtle',
+    size: 'compact',
+    message: 'Velocity loss 31% — end the set now.',
+  },
+  decorators: [wall],
+}
+
+/** The consumption target: the north-star live cue (interpolated loss). */
+export const CompactLiveCue: Story = {
+  args: {
+    status: 'warning',
+    variant: 'subtle',
+    size: 'compact',
+    message: 'Approaching threshold · 18% velocity loss — one or two reps left.',
+  },
+  decorators: [wall],
+}
+
+/** 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>
+      <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>
+      <Alert
+        status="warning"
+        variant="subtle"
+        size="compact"
+        message="Approaching threshold · 18% velocity loss — reps left in band."
+      />
+    </View>
+  ),
+}

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

@@ -200,3 +200,55 @@ describe('Alert', () => {
     })
   })
 })
+
+describe('Alert compact cue (absorbs CueFlag)', () => {
+  it('renders the message as content (batteries-included cue)', () => {
+    render(<Alert status="warning" size="compact" message="VL20 · end the set" />)
+    expect(screen.getByTestId('alert-message')).toHaveTextContent('VL20 · end the set')
+  })
+
+  it('renders the message alongside a status glyph and the alert role', () => {
+    render(<Alert status="error" size="compact" message="Stop now" />)
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    expect(screen.getByText('✕')).toBeInTheDocument()
+    expect(screen.getByText('Stop now')).toBeInTheDocument()
+  })
+
+  it('renders message in the default size too', () => {
+    render(<Alert status="info" message="Heads up" />)
+    expect(screen.getByTestId('alert-message')).toHaveTextContent('Heads up')
+  })
+
+  it('renders children after the message when both are given', () => {
+    render(
+      <Alert status="warning" size="compact" message="Cue line">
+        <AlertDescription>Extra detail</AlertDescription>
+      </Alert>
+    )
+    expect(screen.getByTestId('alert-message')).toHaveTextContent('Cue line')
+    expect(screen.getByText('Extra detail')).toBeInTheDocument()
+  })
+
+  it('omits the message node when no message is passed', () => {
+    render(
+      <Alert status="warning" size="compact">
+        <AlertDescription>Just children</AlertDescription>
+      </Alert>
+    )
+    expect(screen.queryByTestId('alert-message')).not.toBeInTheDocument()
+    expect(screen.getByText('Just children')).toBeInTheDocument()
+  })
+
+  it('still respects showIcon=false in compact', () => {
+    render(<Alert status="warning" size="compact" message="No icon cue" showIcon={false} />)
+    expect(screen.queryByText('⚠')).not.toBeInTheDocument()
+    expect(screen.getByText('No icon cue')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations as a compact cue', async () => {
+    const { container } = render(
+      <Alert status="warning" size="compact" message="VL20 · target reps met — end the set." />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -4,12 +4,29 @@ import { cn } from '../../../utils/cn'
 
 export type AlertStatus = 'success' | 'info' | 'warning' | 'error'
 export type AlertVariant = 'subtle' | 'outline' | 'solid'
+export type AlertSize = 'default' | 'compact'
 
 export interface AlertProps extends ViewProps {
   /** Alert status type */
   status?: AlertStatus
   /** Visual variant */
   variant?: AlertVariant
+  /**
+   * Density. `default` — the padded callout (icon + title/description block).
+   * `compact` — a single-line **cue pill** (tighter padding, center-aligned, and a
+   * hairline status border on the `subtle` variant): the across-the-room live coaching
+   * cue (absorbs the R2 `CueFlag` — e.g. a velocity-loss threshold warning). Pair with
+   * the {@link message} prop for the batteries-included colored one-liner.
+   */
+  size?: AlertSize
+  /**
+   * Convenience single-line content: renders as **status-colored, bold** text (white on
+   * `solid`) — the batteries-included cue message, so a `compact` cue is just
+   * `<Alert status="warning" size="compact" message="VL20 · …" />` with no need to
+   * hand-color the text (RN doesn't cascade color). Renders before {@link children},
+   * which stay available for richer content.
+   */
+  message?: string
   /** Custom icon element */
   icon?: React.ReactNode
   /** Whether to show the default icon */
@@ -21,17 +38,22 @@ export interface AlertProps extends ViewProps {
   children?: React.ReactNode
 }
 
-const statusColors: Record<AlertStatus, {
-  subtle: string
-  outline: string
-  solid: string
-  icon: string
-  text: string
-}> = {
+const statusColors: Record<
+  AlertStatus,
+  {
+    subtle: string
+    outline: string
+    solid: string
+    border: string
+    icon: string
+    text: string
+  }
+> = {
   success: {
     subtle: 'bg-status-success-subtle',
     outline: 'border-2 border-status-success bg-transparent',
     solid: 'bg-status-success',
+    border: 'border-status-success',
     icon: 'text-status-success',
     text: 'text-status-success',
   },
@@ -39,6 +61,7 @@ const statusColors: Record<AlertStatus, {
     subtle: 'bg-status-info-subtle',
     outline: 'border-2 border-status-info bg-transparent',
     solid: 'bg-status-info',
+    border: 'border-status-info',
     icon: 'text-status-info',
     text: 'text-status-info',
   },
@@ -46,6 +69,7 @@ const statusColors: Record<AlertStatus, {
     subtle: 'bg-status-warning-subtle',
     outline: 'border-2 border-status-warning bg-transparent',
     solid: 'bg-status-warning',
+    border: 'border-status-warning',
     icon: 'text-status-warning',
     text: 'text-status-warning',
   },
@@ -53,6 +77,7 @@ const statusColors: Record<AlertStatus, {
     subtle: 'bg-status-error-subtle',
     outline: 'border-2 border-status-error bg-transparent',
     solid: 'bg-status-error',
+    border: 'border-status-error',
     icon: 'text-status-error',
     text: 'text-status-error',
   },
@@ -82,6 +107,8 @@ const defaultIcons: Record<AlertStatus, string> = {
 export function Alert({
   status = 'info',
   variant = 'subtle',
+  size = 'default',
+  message,
   icon,
   showIcon = true,
   onClose,
@@ -91,23 +118,30 @@ export function Alert({
 }: AlertProps) {
   const colors = statusColors[status]
   const isSolid = variant === 'solid'
+  const isCompact = size === 'compact'
 
   return (
     <View
       accessibilityRole="alert"
       className={cn(
-        'flex-row items-start p-4 rounded-lg',
+        isCompact
+          ? 'flex-row items-center px-3 py-2 rounded-lg'
+          : 'flex-row items-start p-4 rounded-lg',
         colors[variant],
+        // A compact `subtle` pill gets a hairline status border so it reads as a
+        // defined cue on a dark wall (the CueFlag look); other variants carry their own.
+        isCompact && variant === 'subtle' && cn('border', colors.border),
         className
       )}
       {...props}
     >
       {showIcon && (
-        <View className="mr-3 mt-0.5">
+        <View className={isCompact ? 'mr-2' : 'mr-3 mt-0.5'}>
           {icon || (
             <Text
               className={cn(
-                'text-lg font-bold',
+                'font-bold',
+                isCompact ? 'text-base' : 'text-lg',
                 isSolid ? 'text-white' : colors.icon
               )}
             >
@@ -118,6 +152,14 @@ export function Alert({
       )}
 
       <View className="flex-1">
+        {message != null && (
+          <Text
+            className={cn('text-sm font-semibold', isSolid ? 'text-white' : colors.text)}
+            testID="alert-message"
+          >
+            {message}
+          </Text>
+        )}
         {children}
       </View>
 
@@ -146,11 +188,7 @@ export interface AlertTitleProps {
  * Title for Alert component.
  */
 export function AlertTitle({ children, className }: AlertTitleProps) {
-  return (
-    <Text className={cn('font-semibold text-text-primary mb-1', className)}>
-      {children}
-    </Text>
-  )
+  return <Text className={cn('font-semibold text-text-primary mb-1', className)}>{children}</Text>
 }
 
 export interface AlertDescriptionProps {
@@ -162,9 +200,5 @@ export interface AlertDescriptionProps {
  * Description for Alert component.
  */
 export function AlertDescription({ children, className }: AlertDescriptionProps) {
-  return (
-    <Text className={cn('text-sm text-text-secondary', className)}>
-      {children}
-    </Text>
-  )
+  return <Text className={cn('text-sm text-text-secondary', className)}>{children}</Text>
 }

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: {