@titan-design/react-ui 0.6.0 → 0.7.0

package/src/components/ui/switch/Switch.stories.tsx

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

package/src/components/ui/tabs/Tabs.stories.tsx

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

package/src/components/ui/tile/Tile.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Tile } from './Tile'
+import { getSemanticColors } from '../../../theme'
+
+const ACCENT = getSemanticColors('dark')['status-warning']
+const SUCCESS = getSemanticColors('dark')['status-success']
+
+const meta: Meta<typeof Tile> = {
+  title: 'Components/Atoms/Tile',
+  component: Tile,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '**Atom.** A compact card preset; grouped by SessionMetrics / ScheduleTiles.',
+      },
+    },
+  },
+  argTypes: {
+    label: { control: 'text', description: 'Uppercase micro-label' },
+    value: { control: 'text', description: 'Primary mono value' },
+    valueColor: { control: 'color', description: 'Tints the value' },
+    align: {
+      control: 'radio',
+      options: ['center', 'start'],
+      description: 'Content alignment',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Tile>
+
+export const Default: Story = {
+  args: {
+    label: 'Volume',
+    value: '76%',
+    align: 'center',
+  },
+}
+
+export const Row: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Volume" value="76%" />
+      <Tile label="Load" value="7.3k" />
+      <Tile label="Fatigue" value="MOD" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const ScheduleTiles: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Date" value="Jul 10" />
+      <Tile label="Time" value="6:30 PM" />
+      <Tile label="Until" value="5h" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const ValueColors: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 4, width: 246 }}>
+      <Tile label="Default" value="12" />
+      <Tile label="Success" value="OK" valueColor={SUCCESS} />
+      <Tile label="Warning" value="MOD" valueColor={ACCENT} />
+    </View>
+  ),
+}
+
+export const StartAligned: Story = {
+  args: {
+    label: 'Program',
+    value: 'Pull A',
+    align: 'start',
+  },
+}

package/src/components/ui/tile/Tile.test.tsx

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { Tile } from './Tile'
+
+describe('Tile', () => {
+  it('renders label and value', () => {
+    render(<Tile label="Volume" value="76%" />)
+    expect(screen.getByText('Volume')).toBeInTheDocument()
+    expect(screen.getByText('76%')).toBeInTheDocument()
+  })
+
+  it('applies valueColor to the value text', () => {
+    render(<Tile label="Fatigue" value="MOD" valueColor="#F5A623" />)
+    const value = screen.getByText('MOD')
+    expect(value).toHaveStyle({ color: '#F5A623' })
+  })
+
+  it('does not set an inline color when valueColor is omitted', () => {
+    render(<Tile label="Volume" value="76%" />)
+    const value = screen.getByText('76%')
+    expect(value.style.color).toBe('')
+  })
+
+  it('renders with start alignment', () => {
+    render(<Tile label="Program" value="Pull A" align="start" />)
+    expect(screen.getByText('Program')).toBeInTheDocument()
+    expect(screen.getByText('Pull A')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<Tile label="Load" value="7.3k" className="custom-class" />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it('passes additional props through', () => {
+    render(<Tile label="Load" value="7.3k" testID="tile-test" />)
+    expect(screen.getByText('7.3k')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<Tile label="Volume" value="76%" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})

package/src/components/ui/tile/Tile.tsx

@@ -0,0 +1,64 @@
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+export interface TileProps extends ViewProps {
+  /** Uppercase micro-label shown above the value */
+  label: string
+  /** Primary value, rendered in a bold mono face */
+  value: string
+  /** Tints the value (status/accent hex or CSS color); defaults to primary text */
+  valueColor?: string
+  /** Content alignment within the tile (default: 'center') */
+  align?: 'center' | 'start'
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Tile — a compact label-over-value stat card.
+ *
+ * A rounded raised box with an uppercase micro-label stacked over a bold mono
+ * value. Fills its flex slot so a row of Tiles reads as an even HStack.
+ *
+ * @example
+ * <Tile label="Volume" value="76%" />
+ * <Tile label="Fatigue" value="MOD" valueColor="#F5A623" />
+ */
+export function Tile({
+  label,
+  value,
+  valueColor,
+  align = 'center',
+  className,
+  ...props
+}: TileProps) {
+  const isCenter = align === 'center'
+  return (
+    <View
+      className={cn(
+        'flex-1 rounded-md bg-surface-raised px-1.5 py-2',
+        isCenter ? 'items-center' : 'items-start',
+        className
+      )}
+      {...props}
+    >
+      <Text
+        className={cn(
+          'text-[10px] font-bold uppercase tracking-wider text-text-tertiary',
+          isCenter ? 'text-center' : 'text-left'
+        )}
+      >
+        {label}
+      </Text>
+      <Text
+        className={cn(
+          'mt-0.5 font-mono text-sm font-bold text-text-primary',
+          isCenter ? 'text-center' : 'text-left'
+        )}
+        style={valueColor ? { color: valueColor } : undefined}
+      >
+        {value}
+      </Text>
+    </View>
+  )
+}

package/src/components/ui/tile/index.ts

@@ -0,0 +1,2 @@
+export { Tile } from './Tile'
+export type { TileProps } from './Tile'

package/src/components/ui/toast/Toast.stories.tsx

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

package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx

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

package/src/components/ui/tooltip/Tooltip.stories.tsx

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

package/src/examples/react-hook-form/ReactHookForm.stories.tsx

@@ -10,7 +10,7 @@ import { RhfContactForm, type ContactFormValues } from './RhfContactForm'
  * `Controller` render-prop idiom. See `ControlledFields.tsx` for the adapters.
  */
 const meta: Meta<typeof RhfContactForm> = {
-  title: 'Examples/React Hook Form',
+  title: 'Lab/Recipes/React Hook Form',
   component: RhfContactForm,
   tags: ['autodocs'],
   parameters: {

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useTimer, formatDuration } from './useTimer'
+export type { UseTimerOptions, TimerState, TimerMode } from './useTimer'

package/src/hooks/useTimer.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useTimer, formatDuration } from './useTimer'
+
+describe('formatDuration', () => {
+  it('formats zero as 0:00', () => {
+    expect(formatDuration(0)).toBe('0:00')
+  })
+
+  it('pads seconds with a leading zero', () => {
+    expect(formatDuration(65000)).toBe('1:05')
+  })
+
+  it('rounds partial seconds up', () => {
+    expect(formatDuration(4500)).toBe('0:05')
+  })
+
+  it('clamps negative input to 0:00', () => {
+    expect(formatDuration(-1000)).toBe('0:00')
+  })
+
+  it('formats multi-minute durations', () => {
+    expect(formatDuration(150000)).toBe('2:30')
+  })
+})
+
+describe('useTimer (controlled, down)', () => {
+  it('derives remaining, progress, and label from elapsedMs', () => {
+    const { result } = renderHook(() =>
+      useTimer({ mode: 'down', durationMs: 100000, elapsedMs: 30000 })
+    )
+    expect(result.current.remainingMs).toBe(70000)
+    expect(result.current.progress).toBeCloseTo(0.3)
+    expect(result.current.label).toBe('1:10')
+    expect(result.current.done).toBe(false)
+  })
+
+  it('clamps remaining to 0 and progress to 1 when elapsed exceeds duration', () => {
+    const { result } = renderHook(() =>
+      useTimer({ mode: 'down', durationMs: 100000, elapsedMs: 200000 })
+    )
+    expect(result.current.remainingMs).toBe(0)
+    expect(result.current.progress).toBe(1)
+    expect(result.current.label).toBe('0:00')
+    expect(result.current.done).toBe(true)
+  })
+
+  it('reports progress 1 and done for a zero-duration countdown', () => {
+    const { result } = renderHook(() => useTimer({ mode: 'down', durationMs: 0, elapsedMs: 0 }))
+    expect(result.current.progress).toBe(1)
+    expect(result.current.done).toBe(true)
+    expect(result.current.label).toBe('0:00')
+  })
+})
+
+describe('useTimer (controlled, up)', () => {
+  it('counts elapsed upward and computes progress against duration', () => {
+    const { result } = renderHook(() =>
+      useTimer({ mode: 'up', durationMs: 120000, elapsedMs: 30000 })
+    )
+    expect(result.current.elapsedMs).toBe(30000)
+    expect(result.current.progress).toBeCloseTo(0.25)
+    expect(result.current.label).toBe('0:30')
+  })
+
+  it('reports progress 0 and never done without a duration', () => {
+    const { result } = renderHook(() => useTimer({ mode: 'up', elapsedMs: 45000 }))
+    expect(result.current.progress).toBe(0)
+    expect(result.current.done).toBe(false)
+    expect(result.current.label).toBe('0:45')
+  })
+})
+
+describe('useTimer (self-ticking)', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('advances elapsed on each interval while running', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() =>
+      useTimer({ mode: 'up', autoTick: true, running: true, tickMs: 1000 })
+    )
+    expect(result.current.elapsedMs).toBe(0)
+    act(() => {
+      vi.advanceTimersByTime(3000)
+    })
+    expect(result.current.elapsedMs).toBe(3000)
+  })
+
+  it('counts a down-timer toward 0 and reports done', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() =>
+      useTimer({ mode: 'down', durationMs: 3000, autoTick: true, running: true })
+    )
+    expect(result.current.label).toBe('0:03')
+    act(() => {
+      vi.advanceTimersByTime(3000)
+    })
+    expect(result.current.remainingMs).toBe(0)
+    expect(result.current.label).toBe('0:00')
+    expect(result.current.done).toBe(true)
+  })
+
+  it('does not tick when not running', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() => useTimer({ mode: 'up', autoTick: true, running: false }))
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(result.current.elapsedMs).toBe(0)
+  })
+
+  it('does not tick when a controlled elapsedMs is supplied', () => {
+    vi.useFakeTimers()
+    const { result } = renderHook(() =>
+      useTimer({ mode: 'up', autoTick: true, running: true, elapsedMs: 10000 })
+    )
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(result.current.elapsedMs).toBe(10000)
+  })
+
+  it('clears the interval on unmount', () => {
+    vi.useFakeTimers()
+    const clearSpy = vi.spyOn(global, 'clearInterval')
+    const { unmount } = renderHook(() => useTimer({ mode: 'up', autoTick: true, running: true }))
+    unmount()
+    expect(clearSpy).toHaveBeenCalled()
+    clearSpy.mockRestore()
+  })
+
+  it('stops ticking after running flips to false', () => {
+    vi.useFakeTimers()
+    const { result, rerender } = renderHook(
+      ({ running }) => useTimer({ mode: 'up', autoTick: true, running }),
+      { initialProps: { running: true } }
+    )
+    act(() => {
+      vi.advanceTimersByTime(2000)
+    })
+    expect(result.current.elapsedMs).toBe(2000)
+    rerender({ running: false })
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(result.current.elapsedMs).toBe(2000)
+  })
+})

package/src/hooks/useTimer.ts

@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react'
+
+export type TimerMode = 'up' | 'down'
+
+export interface UseTimerOptions {
+  /** 'up' counts elapsed upward; 'down' counts remaining toward 0. Default 'up'. */
+  mode?: TimerMode
+  /** Total duration in ms. Required for 'down' mode and for progress in 'up' mode. */
+  durationMs?: number
+  /** Controlled elapsed time in ms. When provided, the hook derives everything from it and never ticks. */
+  elapsedMs?: number
+  /** Self-tick only advances while running. */
+  running?: boolean
+  /** Enable the internal interval. Ignored when `elapsedMs` is controlled. */
+  autoTick?: boolean
+  /** Interval step in ms. Default 1000. */
+  tickMs?: number
+}
+
+export interface TimerState {
+  elapsedMs: number
+  remainingMs: number
+  /** 0..1, clamped. */
+  progress: number
+  /** mm:ss for the active direction (remaining when 'down', elapsed when 'up'). */
+  label: string
+  /** True once a down-timer reaches 0 (or an up-timer passes its duration). */
+  done: boolean
+}
+
+/** Format a millisecond duration as mm:ss, rounding partial seconds up. */
+export function formatDuration(ms: number): string {
+  const totalSeconds = Math.max(0, Math.ceil(ms / 1000))
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${minutes}:${String(seconds).padStart(2, '0')}`
+}
+
+export function useTimer(options: UseTimerOptions = {}): TimerState {
+  const {
+    mode = 'up',
+    durationMs,
+    elapsedMs: controlledElapsedMs,
+    running = false,
+    autoTick = false,
+    tickMs = 1000,
+  } = options
+
+  const isControlled = controlledElapsedMs != null
+  const [internalElapsedMs, setInternalElapsedMs] = useState(0)
+
+  useEffect(() => {
+    if (isControlled || !autoTick || !running) return
+    const id = setInterval(() => {
+      setInternalElapsedMs((prev) => prev + tickMs)
+    }, tickMs)
+    return () => clearInterval(id)
+  }, [isControlled, autoTick, running, tickMs])
+
+  const elapsedMs = isControlled ? controlledElapsedMs : internalElapsedMs
+
+  const hasDuration = durationMs != null && durationMs > 0
+  const remainingMs = durationMs != null ? Math.max(0, durationMs - elapsedMs) : 0
+
+  let progress: number
+  if (hasDuration) {
+    progress = Math.min(1, Math.max(0, elapsedMs / durationMs))
+  } else {
+    // A zero/undefined duration is trivially complete for a countdown, empty for a stopwatch.
+    progress = mode === 'down' ? 1 : 0
+  }
+
+  const label = formatDuration(mode === 'down' ? remainingMs : elapsedMs)
+  const done = durationMs != null && elapsedMs >= durationMs
+
+  return { elapsedMs, remainingMs, progress, label, done }
+}

package/src/index.ts

@@ -9,3 +9,6 @@ export * from './theme/barrel'
 
 // Utilities
 export * from './utils'
+
+// Hooks
+export * from './hooks'

package/src/pages.ts

@@ -15,7 +15,7 @@ export {
   countCompletedSets,
   deriveWorkoutProgress,
   findActiveExercise,
-  statusToCardState,
+  isUpcomingExercise,
   toActiveCardProps,
   groupExercises,
   type ActiveWorkoutPageProps,

package/src/stories/PresetShowcase.stories.tsx

@@ -438,7 +438,7 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 // ---------------------------------------------------------------------------
 
 const meta: Meta = {
-  title: 'Theme/Preset Showcase',
+  title: 'Lab/Recipes/Theme Preset Showcase',
   parameters: {
     layout: 'fullscreen',
   },

package/src/stories/ThemePresets.stories.tsx

@@ -66,7 +66,7 @@ function PresetShowcase({ preset }: { preset: typeof audiobookPreset }) {
 }
 
 const meta: Meta = {
-  title: 'Theme/Presets',
+  title: 'Foundations/Theme Presets',
   parameters: {
     layout: 'fullscreen',
   },

package/src/theme/ColorSystem.stories.tsx

@@ -13,7 +13,7 @@ import {
 } from './tokens/primitives'
 
 const meta: Meta = {
-  title: 'Design Tokens/Color System',
+  title: 'Foundations/Color/System',
   tags: ['autodocs'],
 }
 export default meta

package/src/theme/Colors.stories.tsx

@@ -4,7 +4,7 @@ import { primitiveColors, discreteRainbow, primitiveRamps, categoricalPalette }
 import { semanticColorsLight, semanticColorsDark } from './tokens/semantic'
 
 const meta: Meta = {
-  title: 'Design Tokens/Colors',
+  title: 'Foundations/Color/Palette',
   tags: ['autodocs'],
 }
 
@@ -79,16 +79,13 @@ export const PrimitiveColors: StoryObj = {
         Primitive Colors
       </Text>
       <Text className="text-text-secondary mb-6">
-        Raw color values. Use semantic tokens instead when building components.
+        Raw color values. Chromatic hues live as OKLCH tonal ramps (see the Tonal Ramps story);
+        these are the achromatic and support scales. Use semantic tokens when building components.
       </Text>
 
-      <ColorScale name="Orange (Primary Brand)" colors={primitiveColors.accent} />
-      <ColorScale name="Steel (Secondary Brand)" colors={primitiveColors.steel} />
       <ColorScale name="Blue" colors={primitiveColors.blue} />
-      <ColorScale name="Green" colors={primitiveColors.green} />
-      <ColorScale name="Teal (Success)" colors={primitiveColors.teal} />
-      <ColorScale name="Red (Error)" colors={primitiveColors.red} />
-      <ColorScale name="Sky (Info)" colors={primitiveColors.sky} />
+      <ColorScale name="Red" colors={primitiveColors.red} />
+      <ColorScale name="Red Vivid" colors={primitiveColors.redVivid} />
       <ColorScale name="Neutral" colors={primitiveColors.neutral} />
       <ColorScale name="Charcoal (Dark Backgrounds)" colors={primitiveColors.charcoal} />
     </View>

package/src/theme/config.ts

@@ -53,6 +53,8 @@ export const lightThemeCSSVars = {
 
   '--color-status-success': semanticColorsLight['status-success'],
   '--color-status-success-subtle': semanticColorsLight['status-success-subtle'],
+  '--color-status-live': semanticColorsLight['status-live'],
+  '--color-status-live-muted': semanticColorsLight['status-live-muted'],
   '--color-status-error': semanticColorsLight['status-error'],
   '--color-status-error-subtle': semanticColorsLight['status-error-subtle'],
   '--color-status-warning': semanticColorsLight['status-warning'],
@@ -172,6 +174,8 @@ export const darkThemeCSSVars = {
 
   '--color-status-success': semanticColorsDark['status-success'],
   '--color-status-success-subtle': semanticColorsDark['status-success-subtle'],
+  '--color-status-live': semanticColorsDark['status-live'],
+  '--color-status-live-muted': semanticColorsDark['status-live-muted'],
   '--color-status-error': semanticColorsDark['status-error'],
   '--color-status-error-subtle': semanticColorsDark['status-error-subtle'],
   '--color-status-warning': semanticColorsDark['status-warning'],

package/src/theme/elevation.stories.tsx

@@ -21,7 +21,7 @@ import { useTheme } from '../utils/useTheme'
 import { Card, CardContent, CardInset } from '../components/ui/card/Card'
 
 const meta: Meta = {
-  title: 'Theme/Elevation System',
+  title: 'Foundations/Elevation',
   tags: ['autodocs'],
 }
 

package/src/theme/global.css

@@ -35,6 +35,8 @@
     --color-status-success-light: #58F69E;
     --color-status-success-dark: #298732;
     --color-status-success-subtle: rgba(46, 213, 115, 0.12);
+    --color-status-live: #2ED573;
+    --color-status-live-muted: #22A444;
     --color-status-error: #D14343;
     --color-status-error-light: #E05254;
     --color-status-error-dark: #A4221C;
@@ -170,6 +172,8 @@
     --color-status-success-light: #58F69E;
     --color-status-success-dark: #298732;
     --color-status-success-subtle: #E3FFEE;
+    --color-status-live: #2ED573;
+    --color-status-live-muted: #22A444;
     --color-status-error: #D14343;
     --color-status-error-light: #E05254;
     --color-status-error-dark: #A4221C;
@@ -369,7 +373,7 @@
     z-index: 0;
     background:
       radial-gradient(ellipse 140% 100% at 15% 5%, rgba(var(--color-brand-primary-rgb, 255, 121, 0), 0.06) 0%, transparent 45%),
-      radial-gradient(ellipse 120% 80% at 85% 95%, rgba(var(--color-brand-secondary-rgb, 64, 109, 135), 0.04) 0%, transparent 45%);
+      radial-gradient(ellipse 120% 80% at 85% 95%, rgba(var(--color-brand-secondary-rgb, 48, 123, 155), 0.04) 0%, transparent 45%);
   }
 
   /* Film grain overlay for vintage texture */

package/src/theme/shadows.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from './shadows'
 
 const meta: Meta = {
-  title: 'Theme/Shadows',
+  title: 'Foundations/Shadows',
 }
 
 export default meta