@titan-design/react-ui 0.6.0 → 0.7.0

package/src/components/custom/DateTime/DateTime.stories.tsx

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

package/src/components/custom/EmptyState/EmptyState.stories.tsx

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

package/src/components/custom/Gauge/Gauge.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Gauge } from './Gauge'
 
 const meta: Meta<typeof Gauge> = {
-  title: 'Custom/Gauge',
+  title: 'Components/DataViz/Gauge',
   component: Gauge,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Metric/Metric.stories.tsx

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

package/src/components/custom/Scatter/Scatter.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Scatter, type ScatterDatum } from './Scatter'
 
 const meta: Meta<typeof Scatter> = {
-  title: 'Custom/Scatter',
+  title: 'Components/DataViz/Scatter',
   component: Scatter,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Sidebar/Sidebar.stories.tsx

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

package/src/components/custom/Table/Table.stories.tsx

@@ -42,7 +42,7 @@ const manyUsers: User[] = Array.from({ length: 50 }, (_, i) => ({
 }))
 
 const meta: Meta<typeof Table> = {
-  title: 'Custom/Table',
+  title: 'Components/Organisms/Table',
   component: Table,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/TimerReadout/TimerReadout.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { TimerReadout } from './TimerReadout'
+
+/**
+ * `TimerReadout` — a small textual timer (⏱ + mono, right-justified) built on the
+ * `useTimer` hook. Only the live/current value goes green (status-live-muted) while
+ * `running`; the ` / total` suffix stays dim tertiary.
+ */
+const meta: Meta<typeof TimerReadout> = {
+  title: 'Custom/TimerReadout',
+  component: TimerReadout,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: '**Atom.** A small textual timer on [useTimer]. Used-by ↑ SessionHeader.',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ padding: 16, backgroundColor: '#131313', alignItems: 'flex-end', width: 200 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TimerReadout>
+
+/** Live stopwatch (controlled), ticking → the elapsed value is green. */
+export const Running: Story = {
+  args: { mode: 'up', elapsedMs: 42 * 60000 + 18 * 1000, running: true },
+}
+
+/** Paused → the value drops to secondary (no live cue). */
+export const Paused: Story = {
+  args: { mode: 'up', elapsedMs: 42 * 60000 + 18 * 1000, running: false },
+}
+
+/** Countdown, running → shows remaining time, green while live. */
+export const CountdownRunning: Story = {
+  args: { mode: 'down', durationMs: 90 * 1000, elapsedMs: 27 * 1000, running: true },
+}
+
+/** With a ` / total` budget suffix (dim tertiary). */
+export const WithTotal: Story = {
+  args: {
+    mode: 'up',
+    elapsedMs: 42 * 60000 + 18 * 1000,
+    durationMs: 60 * 60000,
+    showTotal: true,
+    running: true,
+  },
+}
+
+/** Self-ticking stopwatch — the internal interval advances the value once per second. */
+export const LiveAutoTick: Story = {
+  args: { mode: 'up', autoTick: true, running: true },
+}

package/src/components/custom/TimerReadout/TimerReadout.test.tsx

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, act } from '@testing-library/react'
+import { TimerReadout } from './TimerReadout'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+
+const semantic = getSemanticColors('dark')
+const LIVE_GREEN = primitiveRamps.green[500]
+const SECONDARY = semantic['text-secondary']
+const TERTIARY = semantic['text-tertiary']
+
+afterEach(() => {
+  vi.useRealTimers()
+})
+
+describe('TimerReadout', () => {
+  it('renders elapsed mm:ss from a controlled up-timer', () => {
+    render(<TimerReadout mode="up" elapsedMs={65 * 1000} />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('1:05')
+  })
+
+  it('renders the default ⏱ glyph', () => {
+    render(<TimerReadout elapsedMs={0} />)
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveTextContent('⏱')
+  })
+
+  it('accepts a custom glyph', () => {
+    render(<TimerReadout elapsedMs={0} glyph="◷" />)
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveTextContent('◷')
+  })
+
+  it('shows the current value in live green while running', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveStyle({ color: LIVE_GREEN })
+    expect(screen.getByTestId('timer-readout-glyph')).toHaveStyle({ color: LIVE_GREEN })
+  })
+
+  it('shows the current value in secondary when paused', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} running={false} />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveStyle({ color: SECONDARY })
+  })
+
+  it('shows remaining time in down mode', () => {
+    render(<TimerReadout mode="down" durationMs={90 * 1000} elapsedMs={27 * 1000} running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('1:03')
+  })
+
+  it('appends the total in dim tertiary when showTotal is set', () => {
+    render(
+      <TimerReadout mode="up" elapsedMs={42 * 1000} durationMs={60 * 60000} showTotal running />
+    )
+    const total = screen.getByTestId('timer-readout-total')
+    expect(total).toHaveTextContent('/ 60:00')
+    expect(total).toHaveStyle({ color: TERTIARY })
+  })
+
+  it('omits the total when showTotal is false', () => {
+    render(<TimerReadout mode="up" elapsedMs={0} durationMs={60000} />)
+    expect(screen.queryByTestId('timer-readout-total')).toBeNull()
+  })
+
+  it('self-ticks once per second while running with autoTick', () => {
+    vi.useFakeTimers()
+    render(<TimerReadout mode="up" autoTick running />)
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('0:00')
+
+    act(() => {
+      vi.advanceTimersByTime(3000)
+    })
+    expect(screen.getByTestId('timer-readout-current')).toHaveTextContent('0:03')
+  })
+})

package/src/components/custom/TimerReadout/TimerReadout.tsx

@@ -0,0 +1,75 @@
+import { type ReactNode } from 'react'
+import { View, Text, type ViewProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+import { useTimer, formatDuration, type TimerMode } from '../../../hooks/useTimer'
+import { Typography } from '../Typography'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveRamps } from '../../../theme/tokens/primitives'
+
+const semantic = getSemanticColors('dark')
+// status-live-muted — the SideNav "Live" cue; the elapsed value goes green while ticking.
+const LIVE_GREEN = primitiveRamps.green[500]
+const SECONDARY = semantic['text-secondary']
+const TERTIARY = semantic['text-tertiary']
+
+const DEFAULT_GLYPH = '⏱'
+
+export interface TimerReadoutProps extends ViewProps {
+  /** 'up' counts elapsed upward; 'down' counts remaining toward 0. Default 'up'. */
+  mode?: TimerMode
+  /** Controlled elapsed time in ms. When set, the value is derived from it and never self-ticks. */
+  elapsedMs?: number
+  /** Total duration in ms — required for 'down' mode and for the ` / total` suffix. */
+  durationMs?: number
+  /** Live cue: the current value goes green while true. */
+  running?: boolean
+  /** Enable the internal 1s interval (ignored when `elapsedMs` is controlled). */
+  autoTick?: boolean
+  /** When `durationMs` is set, append ` / mm:ss`. */
+  showTotal?: boolean
+  /** Leading glyph; defaults to the ⏱ unicode. */
+  glyph?: ReactNode
+}
+
+/**
+ * Atom · TimerReadout — a small textual timer (⏱ + mono, right-justified) built on
+ * [useTimer]. Matches the TopBar clock treatment: only the live/current value goes
+ * green (status-live-muted) while `running`; the ` / total` suffix stays dim tertiary.
+ */
+export function TimerReadout({
+  mode = 'up',
+  elapsedMs,
+  durationMs,
+  running = false,
+  autoTick = false,
+  showTotal = false,
+  glyph = DEFAULT_GLYPH,
+  className,
+  ...rest
+}: TimerReadoutProps) {
+  const { label } = useTimer({ mode, durationMs, elapsedMs, running, autoTick })
+
+  const currentColor = running ? LIVE_GREEN : SECONDARY
+  const total = showTotal && durationMs != null ? formatDuration(durationMs) : null
+
+  return (
+    <View
+      accessibilityRole="timer"
+      accessibilityLabel={total != null ? `${label} of ${total}` : label}
+      className={cn('flex-row items-baseline justify-end', className)}
+      {...rest}
+    >
+      <Typography variant="mono" style={{ fontSize: 11, textAlign: 'right' }}>
+        <Text testID="timer-readout-glyph" style={{ color: currentColor, marginRight: 3 }}>
+          {glyph}
+        </Text>
+        <Text testID="timer-readout-current" style={{ color: currentColor }}>
+          {label}
+        </Text>
+        {total != null ? (
+          <Text testID="timer-readout-total" style={{ color: TERTIARY }}>{` / ${total}`}</Text>
+        ) : null}
+      </Typography>
+    </View>
+  )
+}

package/src/components/custom/TimerReadout/index.ts

@@ -0,0 +1 @@
+export { TimerReadout, type TimerReadoutProps } from './TimerReadout'

package/src/components/custom/Treemap/Treemap.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Treemap, type TreemapDatum } from './Treemap'
 
 const meta: Meta<typeof Treemap> = {
-  title: 'Custom/Treemap',
+  title: 'Components/DataViz/Treemap',
   component: Treemap,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Typography/Typography.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typography'
 
 const meta: Meta<typeof Typography> = {
-  title: 'Custom/Typography',
+  title: 'Foundations/Typography',
   component: Typography,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Workout/ActiveWorkoutPage.stories.tsx

@@ -2,36 +2,45 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ActiveWorkoutPage, type ActiveWorkoutExercise } from './ActiveWorkoutPage'
 import type { SetRowProps } from './SetRow'
 
+const velocities = (base: number): number[] =>
+  Array.from({ length: 8 }, (_, i) => Number((base - i * 0.03).toFixed(2)))
+
+// logged sets are done; the next set is being performed (live, a couple reps in);
+// the remainder are planned todo. Mirrors an active workout mid-set.
 function activeSets(weight: number, logged: number, total: number): SetRowProps[] {
   return Array.from({ length: total }, (_, i) => {
     const setNumber = i + 1
     if (setNumber <= logged) {
       return {
-        mode: 'completed' as const,
+        state: 'done' as const,
         setNumber,
-        previous: { reps: 8, weight: weight - 5 },
         reps: 8,
         weight,
         rpe: 7.5 + setNumber * 0.5,
         unit: 'lbs' as const,
+        velocities: velocities(0.74 - (setNumber - 1) * 0.03),
+      }
+    }
+    if (setNumber === logged + 1) {
+      return {
+        state: 'live' as const,
+        setNumber,
+        unit: 'lbs' as const,
+        target: { reps: 8, weight },
+        reps: 8,
+        weight,
+        velocities: velocities(0.7).slice(0, 3),
       }
     }
     return {
-      mode: 'active' as const,
+      state: 'todo' as const,
       setNumber,
-      previous: { reps: 8, weight: weight - 5 },
-      reps: null,
-      weight: null,
       unit: 'lbs' as const,
-      isNextSet: setNumber === logged + 1,
-      targets: { reps: 8, weight },
+      target: { reps: 8, weight },
     }
   })
 }
 
-const velocities = (base: number): number[] =>
-  Array.from({ length: 8 }, (_, i) => Number((base - i * 0.03).toFixed(2)))
-
 const exercises: ActiveWorkoutExercise[] = [
   {
     id: 'warmup',
@@ -48,7 +57,6 @@ const exercises: ActiveWorkoutExercise[] = [
     status: 'active',
     unit: 'lbs',
     totalPlannedSets: 4,
-    e1rm: { value: 248, unit: 'lbs' },
     tempo: [3, 1, 1, 0],
     setVelocities: [velocities(0.72), velocities(0.68)],
     sets: activeSets(195, 2, 4),
@@ -85,7 +93,7 @@ const exercises: ActiveWorkoutExercise[] = [
 ]
 
 const meta: Meta<typeof ActiveWorkoutPage> = {
-  title: 'Custom/Workout/ActiveWorkoutPage',
+  title: 'Pages/Active Workout',
   component: ActiveWorkoutPage,
   parameters: { layout: 'fullscreen' },
   tags: ['autodocs'],

package/src/components/custom/Workout/ActiveWorkoutPage.test.tsx

@@ -5,7 +5,7 @@ import {
   countCompletedSets,
   deriveWorkoutProgress,
   findActiveExercise,
-  statusToCardState,
+  isUpcomingExercise,
   groupExercises,
   type ActiveWorkoutExercise,
   type ActiveWorkoutPageProps,
@@ -29,8 +29,16 @@ const exercises: ActiveWorkoutExercise[] = [
     totalPlannedSets: 4,
     setVelocities: [[0.72], [0.68]],
     sets: [
-      { mode: 'completed', setNumber: 1, reps: 8, weight: 195, rpe: 8, unit: 'lbs' },
-      { mode: 'active', setNumber: 3, reps: null, weight: null, unit: 'lbs', isNextSet: true },
+      {
+        state: 'done',
+        setNumber: 1,
+        unit: 'lbs',
+        reps: 8,
+        weight: 195,
+        rpe: 8,
+        velocities: [0.72],
+      },
+      { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 8, weight: 195 } },
     ],
   },
   {
@@ -107,16 +115,11 @@ describe('findActiveExercise', () => {
   })
 })
 
-describe('statusToCardState', () => {
-  it('keeps upcoming exercises upcoming regardless of focus', () => {
-    expect(statusToCardState('upcoming', true)).toBe('upcoming')
-    expect(statusToCardState('upcoming', false)).toBe('upcoming')
-  })
-
-  it('expands only the focused active/completed exercise', () => {
-    expect(statusToCardState('active', true)).toBe('expanded')
-    expect(statusToCardState('active', false)).toBe('collapsed')
-    expect(statusToCardState('completed', true)).toBe('expanded')
+describe('isUpcomingExercise', () => {
+  it('is true only for upcoming exercises', () => {
+    expect(isUpcomingExercise('upcoming')).toBe(true)
+    expect(isUpcomingExercise('active')).toBe(false)
+    expect(isUpcomingExercise('completed')).toBe(false)
   })
 })
 

package/src/components/custom/Workout/ActiveWorkoutPage.tsx

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useMemo, useState } from 'react'
 import { View, Text, type ViewProps } from 'react-native'
-import { ExerciseCard, type ExerciseCardProps, type ExerciseCardState } from './ExerciseCard'
+import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 import { InputBar } from './InputBar'
 import { RestTimer } from './RestTimer'
 import { SupersetWrapper } from './SupersetWrapper'
@@ -32,8 +32,6 @@ export interface ActiveWorkoutExercise {
   totalPlannedSets: number
   /** Collapsed summary (sets × reps @ weight) for a completed exercise. */
   summary?: ExerciseCardProps['summary']
-  /** Estimated one-rep max badge. */
-  e1rm?: ExerciseCardProps['e1rm']
   /** Flags a personal-record exercise. */
   isPR?: boolean
   /** Prescribed tempo, revealed when expanded. */
@@ -148,13 +146,9 @@ export function findActiveExercise(
   return exercises.find((exercise) => exercise.status === 'active') ?? null
 }
 
-/** Map an exercise's status + focus onto an `ExerciseCard` visual state (pure). */
-export function statusToCardState(
-  status: ActiveExerciseStatus,
-  focused: boolean
-): ExerciseCardState {
-  if (status === 'upcoming') return 'upcoming'
-  return focused ? 'expanded' : 'collapsed'
+/** Whether an exercise renders as the dimmed, not-yet-reached representation (pure). */
+export function isUpcomingExercise(status: ActiveExerciseStatus): boolean {
+  return status === 'upcoming'
 }
 
 /** Project an exercise onto ExerciseCard props, wiring zoom focus (pure). */
@@ -165,18 +159,18 @@ export function toActiveCardProps(
   supersetPosition: ExerciseCardProps['supersetPosition'] = null,
   supersetColor?: string
 ): ExerciseCardProps {
-  const state = statusToCardState(exercise.status, focused)
+  const upcoming = isUpcomingExercise(exercise.status)
   return {
     name: exercise.name,
-    state,
-    onToggle,
+    upcoming,
+    expanded: focused,
+    onExpandedChange: onToggle,
     summary: exercise.summary,
-    e1rm: exercise.e1rm,
     isPR: exercise.isPR,
     tempo: exercise.tempo,
     setVelocities: exercise.setVelocities,
     totalPlannedSets: exercise.totalPlannedSets,
-    sets: state === 'expanded' ? exercise.sets : undefined,
+    sets: focused ? exercise.sets : undefined,
     prescription: exercise.prescription,
     previousBest: exercise.previousBest,
     supersetPosition,

package/src/components/custom/Workout/BaseBadge.stories.tsx

@@ -4,7 +4,7 @@ import { DumbbellIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
 
 const meta: Meta<typeof BaseBadge> = {
-  title: 'Custom/Workout/BaseBadge',
+  title: 'Components/Atoms/BaseBadge',
   component: BaseBadge,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Workout/BodyMap.stories.tsx

@@ -51,7 +51,7 @@ const backData: BodyMapData[] = [
 ]
 
 const meta: Meta<typeof BodyMap> = {
-  title: 'Custom/Workout/BodyMap',
+  title: 'Workout/DataViz/BodyMap',
   component: BodyMap,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Workout/BodyMapDetailPanel.stories.tsx

@@ -21,7 +21,7 @@ const upcoming: UpcomingExercise[] = [
 ]
 
 const meta: Meta<typeof BodyMapDetailPanel> = {
-  title: 'Custom/Workout/BodyMapDetailPanel',
+  title: 'Workout/DataViz/BodyMapDetailPanel',
   component: BodyMapDetailPanel,
   tags: ['autodocs'],
   decorators: [

package/src/components/custom/Workout/CapacityBandChart.stories.tsx

@@ -39,7 +39,7 @@ const projection: CapacityBandProjection = {
 }
 
 const meta: Meta<typeof CapacityBandChart> = {
-  title: 'Custom/Workout/CapacityBandChart',
+  title: 'Workout/DataViz/CapacityBandChart',
   component: CapacityBandChart,
   tags: ['autodocs'],
   argTypes: {

package/src/components/custom/Workout/DeviationBar.stories.tsx

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