@titan-design/react-ui 0.5.0 → 0.7.0

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

@@ -1,32 +1,45 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
-import {
-  Typography,
-  Heading,
-  Paragraph,
-  Caption,
-  Label,
-  Overline,
-} from './Typography'
+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: {
     variant: {
       control: 'select',
       options: [
-        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-        'body1', 'body2', 'subtitle1', 'subtitle2',
-        'caption', 'overline', 'button',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'body1',
+        'body2',
+        'subtitle1',
+        'subtitle2',
+        'caption',
+        'overline',
+        'button',
+        'mono',
+        'monoLabel',
       ],
     },
     color: {
       control: 'select',
       options: [
-        'primary', 'secondary', 'tertiary', 'disabled',
-        'inverse', 'success', 'error', 'warning', 'info', 'inherit',
+        'primary',
+        'secondary',
+        'tertiary',
+        'disabled',
+        'inverse',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'inherit',
       ],
     },
     align: {
@@ -65,19 +78,15 @@ export const AllBody: Story = {
   render: () => (
     <View style={{ gap: 16, maxWidth: 400 }}>
       <Typography variant="body1">
-        Body 1 - This is the default body text style. It&apos;s used for main content
-        and paragraphs throughout the application.
+        Body 1 - This is the default body text style. It&apos;s used for main content and paragraphs
+        throughout the application.
       </Typography>
       <Typography variant="body2">
-        Body 2 - This is a smaller body text style. It&apos;s useful for secondary
-        content or when you need more compact text.
-      </Typography>
-      <Typography variant="subtitle1">
-        Subtitle 1 - Semi-bold text for emphasis
-      </Typography>
-      <Typography variant="subtitle2">
-        Subtitle 2 - Smaller semi-bold text
+        Body 2 - This is a smaller body text style. It&apos;s useful for secondary content or when
+        you need more compact text.
       </Typography>
+      <Typography variant="subtitle1">Subtitle 1 - Semi-bold text for emphasis</Typography>
+      <Typography variant="subtitle2">Subtitle 2 - Smaller semi-bold text</Typography>
     </View>
   ),
 }
@@ -92,6 +101,16 @@ export const AllUtility: Story = {
   ),
 }
 
+/** Monospace technical readouts (clocks, ids, metrics) and their all-caps label form. */
+export const Mono: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Typography variant="mono">mono — 16:12 · Voltra-A3F2 · 0.42 m/s</Typography>
+      <Typography variant="monoLabel">monoLabel — live status label</Typography>
+    </View>
+  ),
+}
+
 export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 8 }}>
@@ -121,12 +140,11 @@ export const ParagraphComponent: Story = {
   render: () => (
     <View style={{ gap: 16, maxWidth: 400 }}>
       <Paragraph>
-        This is a regular paragraph using the default body1 variant.
-        It&apos;s great for main content.
+        This is a regular paragraph using the default body1 variant. It&apos;s great for main
+        content.
       </Paragraph>
       <Paragraph small>
-        This is a small paragraph using the body2 variant.
-        It&apos;s useful for secondary content.
+        This is a small paragraph using the body2 variant. It&apos;s useful for secondary content.
       </Paragraph>
     </View>
   ),

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

@@ -77,6 +77,18 @@ describe('Typography', () => {
     })
   })
 
+  describe('mono variants', () => {
+    it('renders the mono variant', () => {
+      render(<Typography variant="mono">16:12</Typography>)
+      expect(screen.getByText('16:12')).toBeInTheDocument()
+    })
+
+    it('renders the monoLabel variant', () => {
+      render(<Typography variant="monoLabel">live</Typography>)
+      expect(screen.getByText('live')).toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('headings have no accessibility violations', async () => {
       const { container } = render(
@@ -91,9 +103,7 @@ describe('Typography', () => {
     })
 
     it('body text has no accessibility violations', async () => {
-      const { container } = render(
-        <Typography variant="body1">Body text content</Typography>
-      )
+      const { container } = render(<Typography variant="body1">Body text content</Typography>)
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()

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

@@ -16,6 +16,8 @@ export type TypographyVariant =
   | 'caption'
   | 'overline'
   | 'button'
+  | 'mono'
+  | 'monoLabel'
 
 export type TypographyColor =
   | 'primary'
@@ -70,6 +72,9 @@ const variantStyles: Record<TypographyVariant, string> = {
   caption: 'font-body text-xs font-normal leading-loose',
   overline: 'font-body text-xs font-semibold uppercase tracking-widest leading-relaxed',
   button: 'font-sans text-sm font-semibold leading-relaxed',
+  // Monospace technical readouts (clocks, ids, metrics) and their all-caps label form.
+  mono: 'font-mono text-xs font-normal leading-normal',
+  monoLabel: 'font-mono text-xs font-bold uppercase tracking-wide leading-normal',
 }
 
 const colorStyles: Record<TypographyColor, string> = {

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,14 +1,15 @@
 // 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'
 import { type SetRowProps } from './SetRow'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 /** Where an exercise sits in the during-workout flow. */
 export type ActiveExerciseStatus = 'completed' | 'active' | 'upcoming'
@@ -31,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. */
@@ -147,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). */
@@ -164,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/BodyMap.tsx

@@ -4,6 +4,7 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import BodyHighlighter, { type ExtendedBodyPart, type Slug } from 'react-native-body-highlighter'
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -25,6 +26,8 @@ import {
 const Body = ((BodyHighlighter as unknown as { default?: typeof BodyHighlighter }).default ??
   BodyHighlighter) as typeof BodyHighlighter
 
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+
 const OUTLINE_FILL = 'rgba(255,255,255,0.08)'
 const OUTLINE_BORDER = 'rgba(255,255,255,0.12)'
 const BODY_SCALE = 0.8 // 200x400 intrinsic -> ~160x320 px
@@ -275,7 +278,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? '#FF7900' : resolveColor('border-strong'),
+              borderColor: active ? BRAND_PRIMARY : resolveColor('border-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -284,7 +287,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: active ? '700' : '500',
-                color: active ? '#FF7900' : resolveColor('text-secondary'),
+                color: active ? BRAND_PRIMARY : resolveColor('text-secondary'),
                 textTransform: 'capitalize',
               }}
             >
@@ -321,7 +324,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? '#FF7900' : resolveColor('border-default'),
+        borderColor: highlighted ? BRAND_PRIMARY : resolveColor('border-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >

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/BodyMapDetailPanel.tsx

@@ -18,11 +18,14 @@ import {
   type VolumeLandmarks,
   type VolumeStatus,
 } from './muscleTaxonomy'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const t = getSemanticColors('dark')
 
-/** Volume track gradient: status-info (blue) -> result-improve (teal) -> status-error (red). */
-const VOLUME_GRADIENT = 'linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)'
+const BRAND_PRIMARY = t['brand-primary']
+
+/** Volume track gradient: status-info -> status-success -> status-error. */
+const VOLUME_GRADIENT = `linear-gradient(90deg, ${t['status-info']} 0%, ${t['status-success']} 50%, ${t['status-error']} 100%)`
 
 /** Sheet slides up from this offset (px) and the backdrop fades to this opacity. */
 const SLIDE_OFFSET = 400

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/CapacityBandChart.test.tsx

@@ -93,8 +93,8 @@ describe('CapacityBandChart', () => {
     it('colors dots by status relative to the band', () => {
       render(<CapacityBandChart {...baseProps} />)
       const dots = screen.getAllByTestId('capacity-band-chart-dot')
-      expect(dots[0]).toHaveStyle({ backgroundColor: '#14B8A6' }) // within
-      expect(dots[1]).toHaveStyle({ backgroundColor: '#FFB020' }) // above
+      expect(dots[0]).toHaveStyle({ backgroundColor: '#2ED573' }) // within
+      expect(dots[1]).toHaveStyle({ backgroundColor: '#F9B415' }) // above
       expect(dots[2]).toHaveStyle({ backgroundColor: '#2196F3' }) // below
     })
 

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

@@ -1,16 +1,19 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState, useMemo } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_WARNING = '#FFB020'
-const STATUS_INFO = '#2196F3'
+const t = getSemanticColors('dark')
+
+const STATUS_SUCCESS = t['status-success']
+const STATUS_WARNING = t['status-warning']
+const STATUS_INFO = t['status-info']
 /** Dot outline: near-white ring so load dots read on the band fill and any
  *  surface (matches the MesoStatusCard gauge-marker convention). */
 const DOT_BORDER = '#F3F4F6'
-const BAND_FILL = 'rgba(20,184,166,0.1)'
-const BAND_EDGE = 'rgba(20,184,166,0.45)'
-const PROJECTION_FILL = 'rgba(20,184,166,0.05)'
+const BAND_FILL = 'rgba(46,213,115,0.1)'
+const BAND_EDGE = 'rgba(46,213,115,0.45)'
+const PROJECTION_FILL = 'rgba(46,213,115,0.05)'
 
 const PADDING_LEFT = 28
 const PADDING_RIGHT = 10

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

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

@@ -72,7 +72,7 @@ describe('DeviationBar', () => {
     const track = bar.firstElementChild as HTMLElement
     expect(track).toHaveStyle({
       backgroundImage:
-        'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)',
+        'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
     })
   })
 

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

@@ -1,5 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps, type ViewStyle } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 export interface DeviationBarProps extends ViewProps {
   deviation: number
@@ -9,10 +12,10 @@ export interface DeviationBarProps extends ViewProps {
 
 function getDotColor(deviation: number): string {
   const abs = Math.abs(deviation)
-  if (deviation < -0.3) return '#14B8A6'
+  if (deviation < -0.3) return t['status-success']
   if (abs <= 0.3) return '#6B7280'
-  if (abs <= 0.7) return '#FFB020'
-  return '#D14343'
+  if (abs <= 0.7) return t['status-warning']
+  return t['status-error']
 }
 
 function getDeviationDescription(deviation: number): string {
@@ -55,7 +58,7 @@ export function DeviationBar({
           borderRadius: 3,
           // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
           backgroundImage:
-            'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)',
+            'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
         } as ViewStyle}
       />
       <View