@titan-design/react-ui 0.3.0 → 0.5.0

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

@@ -34,16 +34,14 @@ export function MuscleGroupChip({
 
   const content = (
     <View
-      className={className}
+      className={['bg-surface-raised border-border', className].filter(Boolean).join(' ')}
       style={{
         flexDirection: 'row',
         alignItems: 'center',
         borderRadius: 9999,
         paddingHorizontal: 9,
         paddingVertical: 3,
-        backgroundColor: 'var(--color-surface-raised)',
         borderWidth: 1,
-        borderColor: 'var(--color-border-default)',
       }}
       accessibilityLabel={onPress ? undefined : `${name}, volume status: ${statusLabel}`}
       testID="muscle-group-chip"
@@ -62,11 +60,11 @@ export function MuscleGroupChip({
         testID="muscle-group-chip-dot"
       />
       <Text
+        className="text-text-secondary"
         style={{
           fontFamily: 'Inter, sans-serif',
           fontWeight: '500',
           fontSize: 11,
-          color: 'var(--color-text-secondary)',
         }}
         accessibilityElementsHidden
       >

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { WORKOUT_TOKENS } from '../../../theme/workout-tokens'
 
 export interface PlaceholderStripProps extends ViewProps {
   width?: number | string
@@ -18,15 +19,12 @@ function SingleStrip({
 }: Omit<PlaceholderStripProps, 'mode' | 'segments'>) {
   return (
     <View
-      className={cn(className)}
+      className={className}
       style={[
         {
           height: 3,
-          backgroundColor: 'transparent',
-          borderWidth: 1,
-          borderStyle: 'dashed',
-          borderColor: 'var(--color-border-strong)',
-          borderRadius: 1,
+          backgroundColor: WORKOUT_TOKENS.placeholder.fill,
+          borderRadius: 2,
           opacity: 0.5,
         },
         width != null ? { width: width as number } : { flex: 1 },
@@ -63,10 +61,7 @@ function SegmentedStrip({
           style={{
             flex: 1,
             height: 3,
-            backgroundColor: 'transparent',
-            borderWidth: 1,
-            borderStyle: 'dashed',
-            borderColor: 'var(--color-border-strong)',
+            backgroundColor: WORKOUT_TOKENS.placeholder.fill,
             borderRadius: 1,
             minWidth: 4,
           }}

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

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState } from 'react'
 import { View, Text, Animated, Easing, type ViewProps } from 'react-native'
-import { Star } from 'lucide-react'
+import { StarIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
 
 export type PRType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
@@ -66,7 +66,7 @@ export function PrBadge({
       testID="pr-badge-star"
       {...props}
     >
-      <Star size={14} color="#FF7900" fill="#FF7900" strokeWidth={2} />
+      <StarIcon size={14} color="#FF7900" fill="#FF7900" strokeWidth={2} />
     </View>
   ) : (
     <BaseBadge
@@ -77,7 +77,7 @@ export function PrBadge({
     >
       <Text
         style={{
-          fontSize: 10,
+          fontSize: 12,
           color: '#FF7900',
           fontWeight: '700',
           fontFamily: 'Inter, sans-serif',

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

@@ -1,16 +1,15 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable, type ViewProps } from 'react-native'
-import { Star } from 'lucide-react'
+import { StarIcon } from './icons'
 import { Drawer, DrawerBody } from '../../ui/drawer'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const BRAND_PRIMARY = '#FF7900'
 const RECENT_BORDER = 'rgba(255,176,32,0.3)'
 const RECENT_GLOW = '0 0 12px rgba(255,176,32,0.06)'
-const SURFACE_RAISED = 'var(--color-surface-raised)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
+// Native-safe fallback for the conditional row border (recent uses a computed
+// rgba, so className can't express both branches).
+const BORDER_DEFAULT = resolveColor('border-default')
 
 export type PrRecordType = 'e1rm' | 'weight' | 'reps' | 'volume' | 'velocity'
 
@@ -72,51 +71,50 @@ function PrRecordRow({ record, index }: { record: PrRecord; index: number }) {
     <View
       accessibilityRole="text"
       accessibilityLabel={a11yLabel}
-      className="flex-row items-center"
+      className="flex-row items-center bg-surface-raised"
       style={{
         gap: 10,
         paddingVertical: 10,
         paddingHorizontal: 12,
         marginBottom: 8,
         borderRadius: 8,
-        backgroundColor: SURFACE_RAISED,
         borderWidth: 1,
         borderColor: record.isRecent ? RECENT_BORDER : BORDER_DEFAULT,
         ...(record.isRecent ? { boxShadow: RECENT_GLOW } : {}),
       }}
       testID={`pr-history-modal-record-${index}`}
     >
-      <Star size={16} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
+      <StarIcon size={16} color={BRAND_PRIMARY} fill={BRAND_PRIMARY} strokeWidth={2} />
       <Text
+        className="text-text-secondary"
         style={{
           flex: 1,
           fontSize: 13,
           fontFamily: 'Inter, sans-serif',
           fontWeight: '600',
-          color: TEXT_SECONDARY,
         }}
         testID={`pr-history-modal-record-${index}-type`}
       >
         {label}
       </Text>
       <Text
+        className="text-text-primary"
         style={{
           fontSize: 14,
           fontFamily: '"Space Grotesk", sans-serif',
           fontWeight: '700',
-          color: TEXT_PRIMARY,
         }}
         testID={`pr-history-modal-record-${index}-value`}
       >
         {valueText}
       </Text>
       <Text
+        className="text-text-tertiary"
         style={{
           minWidth: 64,
           textAlign: 'right',
           fontSize: 11,
           fontFamily: 'Inter, sans-serif',
-          color: TEXT_TERTIARY,
         }}
         testID={`pr-history-modal-record-${index}-date`}
       >
@@ -173,13 +171,13 @@ export function PrHistoryModal({
     >
       <View
         accessibilityElementsHidden
+        className="bg-border"
         style={{
           alignSelf: 'center',
           width: 40,
           height: 4,
           borderRadius: 2,
           marginTop: 8,
-          backgroundColor: BORDER_DEFAULT,
         }}
         testID="pr-history-modal-handle"
       />
@@ -191,11 +189,11 @@ export function PrHistoryModal({
       >
         <Text
           accessibilityRole="header"
+          className="text-text-primary"
           style={{
             fontSize: 16,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="pr-history-modal-title"
         >
@@ -209,7 +207,7 @@ export function PrHistoryModal({
           style={{ padding: 4, margin: -4 }}
           testID="pr-history-modal-close"
         >
-          <Text style={{ fontSize: 22, lineHeight: 22, color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>
             {'×'}
           </Text>
         </Pressable>
@@ -219,11 +217,11 @@ export function PrHistoryModal({
         {records.length === 0 ? (
           <View style={{ paddingVertical: 24 }} testID="pr-history-modal-empty">
             <Text
+              className="text-text-tertiary"
               style={{
                 textAlign: 'center',
                 fontSize: 13,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               No personal records yet

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

@@ -7,13 +7,9 @@ import { type WeekRowProps, type WeekRowWorkout } from './WeekRow'
 import { WorkoutCard, type WorkoutStatus, type WorkoutMuscleGroup } from './WorkoutCard'
 import { type WorkoutPillStatus } from './WorkoutPill'
 import { type ExerciseCardProps } from './ExerciseCard'
+import { cn } from '../../../utils/cn'
 
-const SURFACE_ELEVATED = 'var(--color-surface-elevated)'
-const BORDER_DEFAULT = 'var(--color-border-default)'
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
-const PAGE_BG = 'var(--color-background-base)'
 
 /** A single workout within a planned week, plus its exercise breakdown. */
 export interface PlanWorkout {
@@ -157,7 +153,7 @@ function Breadcrumbs({ crumbs, onNavigate }: BreadcrumbsProps) {
         const isLast = index === crumbs.length - 1
         return (
           <View key={crumb.key} className="flex-row items-center" style={{ gap: 4 }}>
-            {index > 0 && <Text style={{ fontSize: 12, color: TEXT_TERTIARY }}>{'›'}</Text>}
+            {index > 0 && <Text className="text-text-tertiary" style={{ fontSize: 12 }}>{'›'}</Text>}
             <Pressable
               onPress={() => onNavigate(crumb.level)}
               disabled={isLast}
@@ -165,11 +161,12 @@ function Breadcrumbs({ crumbs, onNavigate }: BreadcrumbsProps) {
               testID={`program-planning-page-crumb-${crumb.key}`}
             >
               <Text
+                className={isLast ? 'text-text-primary' : undefined}
                 style={{
                   fontSize: 12,
                   fontFamily: 'Inter, sans-serif',
                   fontWeight: isLast ? '700' : '500',
-                  color: isLast ? TEXT_PRIMARY : BRAND_PRIMARY,
+                  color: isLast ? undefined : BRAND_PRIMARY,
                 }}
               >
                 {crumb.label}
@@ -351,8 +348,8 @@ export function ProgramPlanningPage({
 
   return (
     <View
-      className={className}
-      style={{ width: 390, backgroundColor: PAGE_BG }}
+      className={cn(className, 'bg-background-base')}
+      style={{ width: 390 }}
       accessibilityRole={'main' as ViewProps['accessibilityRole']}
       aria-label={title}
       testID="program-planning-page"
@@ -361,11 +358,11 @@ export function ProgramPlanningPage({
       <View style={{ padding: 16, gap: 14 }} testID="program-planning-page-content">
         <Text
           accessibilityRole="header"
+          className="text-text-primary"
           style={{
             fontSize: 20,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: TEXT_PRIMARY,
           }}
           testID="program-planning-page-title"
         >
@@ -388,10 +385,9 @@ export function ProgramPlanningPage({
         )}
 
         <View
+          className="bg-surface-elevated border-border"
           style={{
-            backgroundColor: SURFACE_ELEVATED,
             borderWidth: 1,
-            borderColor: BORDER_DEFAULT,
             borderRadius: 12,
             padding: 12,
           }}

package/src/components/custom/Workout/README.md

@@ -0,0 +1,50 @@
+# Workout component family
+
+Training-specific components (badges, bars, timers, cards, charts, and page-level
+screens) built on titan's atoms. They live flat on disk — the tiering below is a
+documentation contract, not a directory layout, so promoting or composing a
+component is pure import churn with no file moves.
+
+## Tier map
+
+**Atoms** — single-purpose, no cross-component state:
+BaseBadge · WeightBadge · PrBadge · StatusDot · PlaceholderStrip · TempoBar ·
+DeviationBar · IntensityBar · WorkoutPill · MuscleGroupChip · Sparkline ·
+SupersetWrapper · InputBar
+
+**Molecules** — compose atoms, own a little local state:
+VelocityStrip · SetRow · TempoDisplay · RestTimer · MesoProgressBar · WeekRow ·
+WorkoutCard
+
+**Organisms** — full features, often with their own data contract:
+ExerciseCard · MesoCard · MesoStatusCard · PrHistoryModal · ReadinessCheck ·
+StrengthTrendChart · CapacityBandChart · BodyMap · BodyMapDetailPanel
+
+**Pages** — phone-shaped reference screens (whole-screen compositions):
+ActiveWorkoutPage · ExerciseDetailPage · ProgramPlanningPage · TrainingStatusPage
+
+## Subpaths
+
+Two families are kept off the root barrel so `@titan-design/react-ui` stays free
+of their heavy runtime dependencies. In both cases the value exports move to the
+subpath while type-only re-exports remain on the root, so consumers can still
+type props without pulling the dependency.
+
+- **`@titan-design/react-ui/bodymap`** — isolates
+  `react-native-body-highlighter` (a native SVG dep). BodyMap, BodyMapDetailPanel,
+  TrainingStatusPage, and the muscle taxonomy live here.
+- **`@titan-design/react-ui/pages`** — isolates the page-level organisms
+  (ActiveWorkoutPage, ExerciseDetailPage, ProgramPlanningPage). They are full app
+  screens orphaned by both consumers, kept as reference implementations while their
+  successors (the responsive level views) are built. TrainingStatusPage is the
+  exception — it stays under `/bodymap` because of the body-highlighter dep.
+
+## Notes
+
+- **BaseBadge is an internal composition primitive** — the shared shell that
+  WeightBadge and PrBadge build on. It is exempt from orphan accounting; it is not
+  meant to be consumed directly even though it is exported for composition.
+- Badge icons (WeightBadge's dumbbell, PrBadge / PrHistoryModal's star) are inline
+  SVGs (`./icons.tsx`), not `lucide-react` — that dependency was dropped in 0.5.0
+  to keep the root barrel light. The SVG paths mirror lucide's glyphs so rendering
+  is unchanged.

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

@@ -8,8 +8,6 @@ const BRAND_PRIMARY_SUBTLE = 'rgba(255,121,0,0.12)'
 const STATUS_SUCCESS = '#14B8A6'
 const STATUS_WARNING = '#FFB020'
 const STATUS_ERROR = '#D14343'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
 
 /** Emoji option sets per known factor, keyed by lowercase id/label. */
 const EMOJI_SETS: Record<string, readonly string[]> = {
@@ -91,7 +89,8 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
   return (
     <View style={{ marginTop: 14 }} testID={`readiness-check-factor-${factor.id}`}>
       <Text
-        style={{ fontSize: 12, fontWeight: '500', fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+        className="text-text-secondary"
+        style={{ fontSize: 12, fontWeight: '500', fontFamily: 'Inter, sans-serif' }}
         testID="readiness-check-factor-label"
       >
         {factor.label}
@@ -114,14 +113,15 @@ function EmojiSlider({ factor }: EmojiSliderProps) {
               accessibilityLabel={`${factor.label} level ${level} of 5`}
               aria-checked={selected}
               testID="readiness-check-emoji"
+              className={selected ? undefined : 'border-border bg-surface-raised'}
               style={({ pressed }) => ({
                 flex: 1,
                 alignItems: 'center',
                 paddingVertical: 8,
                 borderRadius: 8,
                 borderWidth: 1,
-                borderColor: selected ? BRAND_PRIMARY : 'var(--color-border-default)',
-                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : 'var(--color-surface-raised)',
+                borderColor: selected ? BRAND_PRIMARY : undefined,
+                backgroundColor: selected ? BRAND_PRIMARY_SUBTLE : undefined,
                 opacity: selected ? 1 : pressed ? 0.8 : 0.55,
                 transform: [{ scale: selected ? 1.06 : 1 }],
               })}
@@ -143,13 +143,13 @@ function ScoreGauge({ score }: { score: number }) {
       accessibilityRole="image"
       accessibilityLabel={`Readiness score: ${score} out of 100`}
       testID="readiness-check-score"
+      className="bg-surface-raised"
       style={{
         width: 60,
         height: 60,
         borderRadius: 30,
         borderWidth: 4,
         borderColor: color,
-        backgroundColor: 'var(--color-surface-raised)',
         alignItems: 'center',
         justifyContent: 'center',
       }}
@@ -169,19 +169,19 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
   const badge = WARMUP_BADGE[validation.status]
   return (
     <View
+      className="border-border bg-surface-raised"
       style={{
         marginTop: 16,
         padding: 12,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: 'var(--color-border-default)',
-        backgroundColor: 'var(--color-surface-raised)',
       }}
       testID="readiness-check-warmup"
     >
       <View className="flex-row items-center justify-between" style={{ gap: 8 }}>
         <Text
-          style={{ fontSize: 12, fontWeight: '600', fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}
+          className="text-text-secondary"
+          style={{ fontSize: 12, fontWeight: '600', fontFamily: 'Inter, sans-serif' }}
           testID="readiness-check-warmup-deficit"
         >
           {velocityDeficitText(validation.velocityDeficit)}
@@ -191,7 +191,8 @@ function WarmUpCard({ validation }: { validation: WarmUpValidation }) {
         </Badge>
       </View>
       <Text
-        style={{ marginTop: 6, fontSize: 13, fontFamily: 'Inter, sans-serif', color: TEXT_PRIMARY }}
+        className="text-text-primary"
+        style={{ marginTop: 6, fontSize: 13, fontFamily: 'Inter, sans-serif' }}
         testID="readiness-check-warmup-recommendation"
       >
         {validation.recommendation}
@@ -226,7 +227,8 @@ export function ReadinessCheck({
       <View style={{ padding: 16 }}>
         <View className="flex-row items-center justify-between" style={{ gap: 12 }}>
           <Text
-            style={{ fontSize: 18, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif', color: TEXT_PRIMARY }}
+            className="text-text-primary"
+            style={{ fontSize: 18, fontWeight: '700', fontFamily: '"Space Grotesk", sans-serif' }}
             testID="readiness-check-title"
           >
             How are you feeling?

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

@@ -75,16 +75,51 @@ describe('RestTimer', () => {
     })
   })
 
-  describe('next set info', () => {
-    it('displays nextSetInfo when provided', () => {
+  describe('display-only mode', () => {
+    it('renders the Skip and +30s actions by default', () => {
+      render(<RestTimer {...defaultProps} />)
+      expect(screen.getByTestId('rest-timer-skip')).toBeInTheDocument()
+      expect(screen.getByTestId('rest-timer-add-time')).toBeInTheDocument()
+    })
+
+    it('hides the Skip and +30s actions when displayOnly', () => {
+      render(<RestTimer {...defaultProps} displayOnly />)
+      expect(screen.queryByTestId('rest-timer-skip')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('rest-timer-add-time')).not.toBeInTheDocument()
+    })
+
+    it('keeps the countdown, progress bar, and next-set line when displayOnly', () => {
       render(
         <RestTimer
           {...defaultProps}
+          elapsedMs={30000}
+          displayOnly
           nextSetInfo="Bench Press — Set 3 of 4"
-        />,
+        />
+      )
+      expect(screen.getByTestId('rest-timer-time')).toHaveTextContent('2:00')
+      expect(screen.getByTestId('rest-timer-progress-fill')).toBeInTheDocument()
+      expect(screen.getByTestId('rest-timer-next-set')).toHaveTextContent(
+        'Bench Press — Set 3 of 4'
       )
+    })
+
+    it('does not fire callbacks in display-only mode (controls absent)', () => {
+      const onSkip = vi.fn()
+      const onAddTime = vi.fn()
+      render(<RestTimer {...defaultProps} onSkip={onSkip} onAddTime={onAddTime} displayOnly />)
+      expect(screen.queryByLabelText('Skip rest')).not.toBeInTheDocument()
+      expect(screen.queryByLabelText('Add 30 seconds')).not.toBeInTheDocument()
+      expect(onSkip).not.toHaveBeenCalled()
+      expect(onAddTime).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('next set info', () => {
+    it('displays nextSetInfo when provided', () => {
+      render(<RestTimer {...defaultProps} nextSetInfo="Bench Press — Set 3 of 4" />)
       expect(screen.getByTestId('rest-timer-next-set')).toHaveTextContent(
-        'Bench Press — Set 3 of 4',
+        'Bench Press — Set 3 of 4'
       )
     })
 
@@ -127,9 +162,7 @@ describe('RestTimer', () => {
 
     it('has timer role with remaining seconds in label', () => {
       render(<RestTimer {...defaultProps} totalSeconds={90} elapsedMs={30000} />)
-      expect(
-        screen.getByLabelText('Rest timer, 60 seconds remaining'),
-      ).toBeInTheDocument()
+      expect(screen.getByLabelText('Rest timer, 60 seconds remaining')).toBeInTheDocument()
     })
 
     it('skip button has accessible label', () => {
@@ -146,9 +179,7 @@ describe('RestTimer', () => {
 
 describe('RestTimer zero-duration timer (NaN guard)', () => {
   it('emits a valid 100% width (not NaN) when totalSeconds is 0', () => {
-    const { container } = render(
-      <RestTimer {...defaultProps} totalSeconds={0} elapsedMs={0} />,
-    )
+    const { container } = render(<RestTimer {...defaultProps} totalSeconds={0} elapsedMs={0} />)
     expect(screen.getByTestId('rest-timer-progress-fill')).toHaveStyle({ width: '100%' })
     expect(container.innerHTML).not.toContain('NaN')
   })