@titan-design/react-ui 0.3.0 → 0.5.0

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

@@ -1,5 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text, Pressable } from 'react-native'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const BRAND_PRIMARY = '#FF7900'
 
@@ -10,6 +11,8 @@ export interface RestTimerProps {
   onAddTime: () => void
   nextSetInfo?: string
   visible: boolean
+  /** Passive/poll-only mode: hides the Skip and +30s controls, keeps the countdown, progress bar, and next-set line. */
+  displayOnly?: boolean
 }
 
 export function RestTimer({
@@ -19,6 +22,7 @@ export function RestTimer({
   onAddTime,
   nextSetInfo,
   visible,
+  displayOnly = false,
 }: RestTimerProps) {
   if (!visible) return null
 
@@ -34,11 +38,11 @@ export function RestTimer({
 
   return (
     <View
+      className="bg-surface-raised"
       style={{
         width: '100%',
-        backgroundColor: 'var(--color-surface-raised)',
         borderTopWidth: 1,
-        borderTopColor: 'var(--color-border-default)',
+        borderTopColor: resolveColor('border-default'),
         paddingVertical: 12,
         paddingHorizontal: 16,
       }}
@@ -58,13 +62,13 @@ export function RestTimer({
         {/* Left side */}
         <View style={{ flexDirection: 'column' }}>
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 11,
               fontFamily: 'Inter, sans-serif',
               fontWeight: '600',
               textTransform: 'uppercase',
               letterSpacing: 1,
-              color: 'var(--color-text-secondary)',
             }}
             testID="rest-timer-label"
           >
@@ -72,10 +76,10 @@ export function RestTimer({
           </Text>
           {nextSetInfo != null && (
             <Text
+              className="text-text-tertiary"
               style={{
                 fontSize: 11,
                 fontFamily: 'Inter, sans-serif',
-                color: 'var(--color-text-tertiary)',
                 marginTop: 2,
               }}
               testID="rest-timer-next-set"
@@ -87,11 +91,11 @@ export function RestTimer({
 
         {/* Right side - time display */}
         <Text
+          className="text-text-primary"
           style={{
             fontSize: 28,
             fontFamily: '"Space Grotesk", sans-serif',
             fontWeight: '700',
-            color: 'var(--color-text-primary)',
             fontVariant: ['tabular-nums'],
             letterSpacing: -0.5,
           }}
@@ -103,9 +107,9 @@ export function RestTimer({
 
       {/* Progress bar */}
       <View
+        className="bg-border"
         style={{
           height: 3,
-          backgroundColor: 'var(--color-border-default)',
           borderRadius: 2,
           marginBottom: 12,
         }}
@@ -122,55 +126,57 @@ export function RestTimer({
         />
       </View>
 
-      {/* Actions row */}
-      <View style={{ flexDirection: 'row', gap: 8 }}>
-        <Pressable
-          onPress={onAddTime}
-          style={{
-            backgroundColor: 'rgba(255,255,255,0.06)',
-            paddingVertical: 8,
-            paddingHorizontal: 20,
-            borderRadius: 8,
-          }}
-          accessibilityRole="button"
-          accessibilityLabel="Add 30 seconds"
-          testID="rest-timer-add-time"
-        >
-          <Text
+      {/* Actions row — hidden in display-only (poll-only) mode */}
+      {!displayOnly && (
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <Pressable
+            onPress={onAddTime}
             style={{
-              fontSize: 11,
-              fontFamily: 'Inter, sans-serif',
-              fontWeight: '600',
-              color: 'var(--color-text-secondary)',
+              backgroundColor: 'rgba(255,255,255,0.06)',
+              paddingVertical: 8,
+              paddingHorizontal: 20,
+              borderRadius: 8,
             }}
+            accessibilityRole="button"
+            accessibilityLabel="Add 30 seconds"
+            testID="rest-timer-add-time"
           >
-            +30s
-          </Text>
-        </Pressable>
-        <Pressable
-          onPress={onSkip}
-          style={{
-            backgroundColor: 'rgba(255,121,0,0.12)',
-            paddingVertical: 8,
-            paddingHorizontal: 20,
-            borderRadius: 8,
-          }}
-          accessibilityRole="button"
-          accessibilityLabel="Skip rest"
-          testID="rest-timer-skip"
-        >
-          <Text
+            <Text
+              className="text-text-secondary"
+              style={{
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
+                fontWeight: '600',
+              }}
+            >
+              +30s
+            </Text>
+          </Pressable>
+          <Pressable
+            onPress={onSkip}
             style={{
-              fontSize: 11,
-              fontFamily: 'Inter, sans-serif',
-              fontWeight: '600',
-              color: BRAND_PRIMARY,
+              backgroundColor: 'rgba(255,121,0,0.12)',
+              paddingVertical: 8,
+              paddingHorizontal: 20,
+              borderRadius: 8,
             }}
+            accessibilityRole="button"
+            accessibilityLabel="Skip rest"
+            testID="rest-timer-skip"
           >
-            Skip
-          </Text>
-        </Pressable>
-      </View>
+            <Text
+              style={{
+                fontSize: 11,
+                fontFamily: 'Inter, sans-serif',
+                fontWeight: '600',
+                color: BRAND_PRIMARY,
+              }}
+            >
+              Skip
+            </Text>
+          </Pressable>
+        </View>
+      )}
     </View>
   )
 }

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

@@ -1,6 +1,6 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, Text } from 'react-native'
-import { VelocityStrip } from './VelocityStrip'
+import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
 import { PrBadge, type PRType } from './PrBadge'
 import { roundRpe, rpeColor, roundWeight } from '../../../utils/workout-format'
 
@@ -14,7 +14,12 @@ export interface SetRowProps {
   weight: number | null
   rpe?: number | null
   unit: 'lbs' | 'kg'
+  /** Per-rep MEAN concentric velocities (m/s). */
   velocities?: number[]
+  /** Optional velocity-zone bands (WA `VelocityZones.bands`); default scale when absent. */
+  velocityZones?: readonly VelocityZoneBandProp[]
+  /** Live mode: index of the newest rep bar to animate (pop / new-peak bounce). */
+  velocityLiveRepIndex?: number
   velocityExpanded?: boolean
   onVelocityToggle?: () => void
   setType?: string
@@ -43,6 +48,8 @@ export function SetRow({
   rpe,
   unit,
   velocities,
+  velocityZones,
+  velocityLiveRepIndex,
   velocityExpanded,
   onVelocityToggle,
   setType,
@@ -106,11 +113,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className="text-text-secondary"
             style={{
               fontSize: 13,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: 'var(--color-text-secondary)',
             }}
           >
             {setNumber}
@@ -123,10 +130,10 @@ export function SetRow({
         testID="set-row-previous"
       >
         <Text
+          className="text-text-secondary"
           style={{
             fontSize: 12,
             fontFamily: 'Inter, sans-serif',
-            color: 'var(--color-text-secondary)',
           }}
         >
           {previous
@@ -141,11 +148,11 @@ export function SetRow({
       >
         {isActive && reps == null && targets ? (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: 'var(--color-text-tertiary)',
             }}
             testID="set-row-target-reps"
           >
@@ -153,11 +160,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className={reps != null ? 'text-text-primary' : 'text-text-tertiary'}
             style={{
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: reps != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
             }}
           >
             {reps != null ? reps : '\u2014'}
@@ -171,11 +178,11 @@ export function SetRow({
       >
         {isActive && weight == null && targets ? (
           <Text
+            className="text-text-tertiary"
             style={{
               fontSize: 13,
               fontStyle: 'italic',
               fontFamily: 'Inter, sans-serif',
-              color: 'var(--color-text-tertiary)',
             }}
             testID="set-row-target-weight"
           >
@@ -183,11 +190,11 @@ export function SetRow({
           </Text>
         ) : (
           <Text
+            className={weight != null ? 'text-text-primary' : 'text-text-tertiary'}
             style={{
               fontSize: 14,
               fontWeight: '600',
               fontFamily: 'Inter, sans-serif',
-              color: weight != null ? 'var(--color-text-primary)' : 'var(--color-text-tertiary)',
             }}
           >
             {weight != null ? roundWeight(weight) : '\u2014'}
@@ -200,11 +207,14 @@ export function SetRow({
         testID="set-row-rpe"
       >
         <Text
+          className={rpe != null ? undefined : 'text-text-tertiary'}
           style={{
             fontSize: 13,
             fontWeight: '600',
             fontFamily: 'Inter, sans-serif',
-            color: rpe != null ? rpeColor(rpe) : 'var(--color-text-tertiary)',
+            // rpeColor returns a concrete hex (native-safe); only the tertiary
+            // fallback needs the className token.
+            color: rpe != null ? rpeColor(rpe) : undefined,
           }}
         >
           {rpe != null ? roundRpe(rpe) : '\u2014'}
@@ -236,6 +246,8 @@ export function SetRow({
         >
           <VelocityStrip
             velocities={velocities}
+            zones={velocityZones}
+            liveRepIndex={velocityLiveRepIndex}
             expanded={velocityExpanded}
             onToggle={onVelocityToggle}
             variant={onVelocityToggle ? 'full' : 'mini'}

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

@@ -2,17 +2,16 @@
 import { useEffect, useMemo, useState } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { resolveColor } from '../../../theme/resolve-color'
 
 const BRAND_PRIMARY = '#FF7900'
-const TEXT_PRIMARY = 'var(--color-text-primary)'
-const TEXT_SECONDARY = 'var(--color-text-secondary)'
-const TEXT_TERTIARY = 'var(--color-text-tertiary)'
-const BORDER_STRONG = 'var(--color-border-strong)'
+// Line/border color for the dashed projection, used where a className cannot
+// apply (passed as a prop into an inline style, and a per-edge borderTopColor).
+const PROJECTION_LINE_COLOR = resolveColor('text-tertiary')
 const STATUS_SUCCESS = '#14B8A6'
 const STATUS_ERROR = '#D14343'
 const STATUS_WARNING = '#FFB020'
 const GRID_LINE = 'rgba(255,255,255,0.06)'
-const TOOLTIP_BG = 'var(--color-surface-elevated)'
 const SUCCESS_PILL_BG = 'rgba(20,184,166,0.10)'
 const SUCCESS_PILL_BORDER = 'rgba(20,184,166,0.20)'
 const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'
@@ -312,7 +311,7 @@ export function StrengthTrendChart({
             justifyContent: 'center',
           }}
         >
-          <Text style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: TEXT_TERTIARY }}>
+          <Text className="text-text-tertiary" style={{ fontSize: 12, fontFamily: 'Inter, sans-serif' }}>
             No strength data yet
           </Text>
         </View>
@@ -358,6 +357,7 @@ export function StrengthTrendChart({
               }}
             >
               <Text
+                className="text-text-tertiary"
                 style={{
                   position: 'absolute',
                   left: -PLOT_LEFT,
@@ -366,7 +366,6 @@ export function StrengthTrendChart({
                   textAlign: 'right',
                   fontSize: 9,
                   fontFamily: 'Inter, sans-serif',
-                  color: TEXT_TERTIARY,
                 }}
               >
                 {line.label}
@@ -406,7 +405,7 @@ export function StrengthTrendChart({
             <View style={{ width, height, position: 'absolute', top: 0, left: 0 }}>
               <ChartLine
                 coords={geometry.projection}
-                color={TEXT_TERTIARY}
+                color={PROJECTION_LINE_COLOR}
                 strokeWidth={2}
                 dashed
                 testID="strength-trend-chart-projection-segment"
@@ -475,6 +474,7 @@ export function StrengthTrendChart({
           <View
             testID="strength-trend-chart-tooltip"
             accessibilityElementsHidden
+            className="bg-surface-elevated border-border-strong"
             style={{
               position: 'absolute',
               left: Math.max(
@@ -483,30 +483,28 @@ export function StrengthTrendChart({
               ),
               top: Math.max(0, selectedCoord.y - 52),
               maxWidth: TOOLTIP_WIDTH,
-              backgroundColor: TOOLTIP_BG,
               borderWidth: 1,
-              borderColor: BORDER_STRONG,
               borderRadius: 8,
               paddingVertical: 8,
               paddingHorizontal: 10,
             }}
           >
             <Text
+              className="text-text-tertiary"
               style={{
                 fontSize: 10,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               {selectedCoord.point.sessionLabel ?? selectedCoord.point.date}
             </Text>
             <Text
+              className="text-text-primary"
               style={{
                 marginTop: 2,
                 fontSize: 13,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: '700',
-                color: TEXT_PRIMARY,
               }}
             >
               {`${formatValue(selectedCoord.point.e1rm)} ${unit}`}
@@ -547,6 +545,7 @@ export function StrengthTrendChart({
             <Text
               key={`axis-${i}`}
               testID="strength-trend-chart-axis-label"
+              className="text-text-tertiary"
               style={{
                 position: 'absolute',
                 left: boundary.x - 24,
@@ -554,7 +553,6 @@ export function StrengthTrendChart({
                 textAlign: 'center',
                 fontSize: 10,
                 fontFamily: 'Inter, sans-serif',
-                color: TEXT_TERTIARY,
               }}
             >
               {boundary.label}
@@ -598,7 +596,7 @@ export function StrengthTrendChart({
       >
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <View style={{ width: 14, height: 2.5, borderRadius: 1.5, backgroundColor: BRAND_PRIMARY }} />
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             Actual
           </Text>
         </View>
@@ -609,16 +607,16 @@ export function StrengthTrendChart({
               height: 0,
               borderTopWidth: 2,
               borderStyle: 'dashed',
-              borderTopColor: TEXT_TERTIARY,
+              borderTopColor: PROJECTION_LINE_COLOR,
             }}
           />
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             Projected
           </Text>
         </View>
         <View className="flex-row items-center" style={{ gap: 5 }}>
           <Text style={{ fontSize: 12, color: STATUS_WARNING }}>★</Text>
-          <Text style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', color: TEXT_SECONDARY }}>
+          <Text className="text-text-secondary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif' }}>
             PR
           </Text>
         </View>

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

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { TempoBar } from './TempoBar'
+
+const meta: Meta<typeof TempoBar> = {
+  title: 'Custom/Workout/TempoBar',
+  component: TempoBar,
+  tags: ['autodocs'],
+  argTypes: {
+    activePhase: {
+      control: 'select',
+      options: [null, 'concentric', 'hold', 'eccentric'],
+      description: 'Phase currently in progress (null = idle)',
+    },
+    phaseElapsedMs: { control: 'number', description: 'Elapsed ms in the active phase' },
+    completed: { control: 'object', description: 'Completed phase durations (ms)' },
+    target: { control: 'object', description: 'Per-phase target durations (seconds)' },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 240 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof TempoBar>
+
+// tempo target: 1s concentric, 1s hold-top, 3s eccentric
+const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
+
+export const Idle: Story = {
+  args: { activePhase: null, phaseElapsedMs: 0, target: TARGET },
+}
+
+export const ConcentricActive: Story = {
+  args: { activePhase: 'concentric', phaseElapsedMs: 600, target: TARGET },
+}
+
+export const EccentricMidRep: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 1500,
+    completed: { concentric: 900, hold: 1000 },
+    target: TARGET,
+  },
+}
+
+export const BehindPace: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 4200,
+    completed: { concentric: 1600, hold: 1000 },
+    target: TARGET,
+  },
+}
+
+export const RepComplete: Story = {
+  args: {
+    activePhase: null,
+    phaseElapsedMs: 0,
+    completed: { concentric: 950, hold: 1050, eccentric: 3100 },
+    target: TARGET,
+  },
+}
+
+export const NoTarget: Story = {
+  args: {
+    activePhase: 'concentric',
+    phaseElapsedMs: 800,
+  },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ gap: 20 }}>
+      <TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />
+      <TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900, hold: 1000 }}
+        target={TARGET}
+      />
+      <TempoBar
+        activePhase={null}
+        phaseElapsedMs={0}
+        completed={{ concentric: 950, hold: 1050, eccentric: 3100 }}
+        target={TARGET}
+      />
+    </View>
+  ),
+}

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

@@ -0,0 +1,103 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  TempoBar,
+  getTempoPacingState,
+  getTempoFillPct,
+  TEMPO_PACING,
+} from './TempoBar'
+
+const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
+
+describe('getTempoPacingState', () => {
+  it('returns none when there is no target', () => {
+    expect(getTempoPacingState(1000, null)).toBe('none')
+  })
+
+  it('returns none for a sub-threshold target', () => {
+    expect(getTempoPacingState(1000, TEMPO_PACING.minPhaseDurationMs - 1)).toBe('none')
+  })
+
+  it('returns on-pace when within the behind threshold', () => {
+    expect(getTempoPacingState(1000, 1000)).toBe('on-pace')
+    expect(getTempoPacingState(1100, 1000)).toBe('on-pace') // +10%, under 15%
+  })
+
+  it('returns behind once elapsed exceeds the behind threshold', () => {
+    expect(getTempoPacingState(1200, 1000)).toBe('behind') // +20%, over 15%
+  })
+})
+
+describe('getTempoFillPct', () => {
+  it('fills fully when there is no target', () => {
+    expect(getTempoFillPct(500, null)).toBe(100)
+  })
+
+  it('is proportional to elapsed vs target', () => {
+    expect(getTempoFillPct(500, 1000)).toBe(50)
+  })
+
+  it('clamps at 100 when past target', () => {
+    expect(getTempoFillPct(2000, 1000)).toBe(100)
+  })
+})
+
+describe('TempoBar', () => {
+  it('renders the bar with phase labels', () => {
+    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET} />)
+    expect(screen.getByTestId('tempo-bar')).toBeInTheDocument()
+    expect(screen.getByText('Con')).toBeInTheDocument()
+    expect(screen.getByText('Hold')).toBeInTheDocument()
+    expect(screen.getByText('Ecc')).toBeInTheDocument()
+  })
+
+  it('renders the active segment with an elapsed/target label', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
+    expect(screen.getByTestId('tempo-segment-active-Con')).toBeInTheDocument()
+    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
+  })
+
+  it('shows only elapsed when the active phase has no target', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={800} />)
+    expect(screen.getByText('0.8')).toBeInTheDocument()
+  })
+
+  it('marks a completed phase that hit its target with a check', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ concentric: 950 }}
+        target={TARGET}
+      />,
+    )
+    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
+    expect(screen.getByText('0.9 ✓')).toBeInTheDocument()
+  })
+
+  it('marks a completed phase that missed its target with a cross', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ eccentric: 4000 }}
+        target={TARGET}
+      />,
+    )
+    // eccentric target 3s, 4s elapsed => behind => cross
+    expect(screen.getByText('4.0 ✗')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900, hold: 1000 }}
+        target={TARGET}
+      />,
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})