@titan-design/react-ui 0.7.0 → 0.8.0

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

@@ -3,9 +3,13 @@ import { View, Text, Pressable } from 'react-native'
 import { resolveColor } from '../../../theme/resolve-color'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { useTimer } from '../../../hooks/useTimer'
+import { CircularTimer } from '../CircularTimer/CircularTimer'
 
 const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
+/** Default `ring` diameter (px) — the across-the-room wall rest treatment. */
+const RING_DEFAULT_SIZE = 180
+
 export interface RestTimerProps {
   totalSeconds: number
   elapsedMs: number
@@ -15,6 +19,123 @@ export interface RestTimerProps {
   visible: boolean
   /** Passive/poll-only mode: hides the Skip and +30s controls, keeps the countdown, progress bar, and next-set line. */
   displayOnly?: boolean
+  /**
+   * `bar` (default) — the compact linear card (REST label + mm:ss + progress bar +
+   * controls), the mobile bottom-bar treatment. `ring` — the across-the-room wall
+   * treatment: a draining countdown ring (composes {@link CircularProgress}) with a
+   * big remaining-seconds numeral, the next-set line, and the same controls.
+   */
+  variant?: 'bar' | 'ring'
+  /** `ring` diameter in px. Default 180. */
+  size?: number
+}
+
+/** The +30s / Skip control row — shared by both variants (hidden in `displayOnly`). */
+function RestActions({ onAddTime, onSkip }: { onAddTime: () => void; onSkip: () => void }) {
+  return (
+    <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
+          className="text-text-secondary"
+          style={{ fontSize: 11, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+        >
+          +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
+          style={{
+            fontSize: 11,
+            fontFamily: 'Inter, sans-serif',
+            fontWeight: '600',
+            color: BRAND_PRIMARY,
+          }}
+        >
+          Skip
+        </Text>
+      </Pressable>
+    </View>
+  )
+}
+
+interface RestTimerRingProps {
+  totalSeconds: number
+  elapsedMs: number
+  remainingSec: number
+  done: boolean
+  size: number
+  nextSetInfo?: string
+  displayOnly: boolean
+  onSkip: () => void
+  onAddTime: () => void
+}
+
+/**
+ * The `ring` render: the wall rest treatment. Composes the generic {@link CircularTimer}
+ * (which owns the arc + mm:ss readout + the fill-green "GO" done state), passing the
+ * shared {@link RestActions} as its controls, and adds the rest-specific next-set footer
+ * caption below. Rest-domain chrome only — the timer mechanics live in `CircularTimer`.
+ */
+function RestTimerRing({
+  totalSeconds,
+  elapsedMs,
+  remainingSec,
+  done,
+  size,
+  nextSetInfo,
+  displayOnly,
+  onSkip,
+  onAddTime,
+}: RestTimerRingProps) {
+  const a11yLabel = done
+    ? 'Rest complete, next set ready'
+    : `Rest timer, ${Math.max(0, remainingSec)} seconds remaining`
+  return (
+    <View style={{ alignItems: 'center', gap: 16 }} testID="rest-timer">
+      <CircularTimer
+        durationMs={totalSeconds * 1000}
+        elapsedMs={elapsedMs}
+        mode="down"
+        size={size}
+        doneLabel="GO"
+        doneColor="success"
+        accessibilityLabel={a11yLabel}
+        controls={!displayOnly ? <RestActions onAddTime={onAddTime} onSkip={onSkip} /> : undefined}
+        testID="rest-timer-ring"
+      />
+      {nextSetInfo != null && (
+        <Text
+          className="text-text-tertiary"
+          style={{ fontSize: 13, fontFamily: 'Inter, sans-serif' }}
+          testID="rest-timer-next-set"
+        >
+          {nextSetInfo}
+        </Text>
+      )}
+    </View>
+  )
 }
 
 export function RestTimer({
@@ -25,6 +146,8 @@ export function RestTimer({
   nextSetInfo,
   visible,
   displayOnly = false,
+  variant = 'bar',
+  size = RING_DEFAULT_SIZE,
 }: RestTimerProps) {
   // useTimer owns the countdown math (remaining/progress/mm:ss); a zero-duration
   // timer is complete, which keeps the width out of the 0/0 === NaN case.
@@ -32,6 +155,7 @@ export function RestTimer({
     remainingMs,
     progress,
     label: timeDisplay,
+    done,
   } = useTimer({
     mode: 'down',
     durationMs: totalSeconds * 1000,
@@ -42,6 +166,22 @@ export function RestTimer({
 
   if (!visible) return null
 
+  if (variant === 'ring') {
+    return (
+      <RestTimerRing
+        totalSeconds={totalSeconds}
+        elapsedMs={elapsedMs}
+        remainingSec={remainingSec}
+        done={done}
+        size={size}
+        nextSetInfo={nextSetInfo}
+        displayOnly={displayOnly}
+        onSkip={onSkip}
+        onAddTime={onAddTime}
+      />
+    )
+  }
+
   return (
     <View
       className="bg-surface-raised"
@@ -133,56 +273,7 @@ export function RestTimer({
       </View>
 
       {/* Actions row — hidden in display-only (poll-only) mode */}
-      {!displayOnly && (
-        <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
-              className="text-text-secondary"
-              style={{
-                fontSize: 11,
-                fontFamily: 'Inter, sans-serif',
-                fontWeight: '600',
-              }}
-            >
-              +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
-              style={{
-                fontSize: 11,
-                fontFamily: 'Inter, sans-serif',
-                fontWeight: '600',
-                color: BRAND_PRIMARY,
-              }}
-            >
-              Skip
-            </Text>
-          </Pressable>
-        </View>
-      )}
+      {!displayOnly && <RestActions onAddTime={onAddTime} onSkip={onSkip} />}
     </View>
   )
 }

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

@@ -15,6 +15,16 @@ const meta: Meta<typeof TempoBar> = {
     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)' },
+    size: {
+      control: 'inline-radio',
+      options: ['default', 'wall'],
+      description: 'Density: default (compact) or wall (across-the-room dashboard scale)',
+    },
+    activeDisplay: {
+      control: 'inline-radio',
+      options: ['time', 'delta'],
+      description: 'Active readout: time (elapsed/target) or delta (countdown). Tap to toggle.',
+    },
   },
   decorators: [
     (Story) => (
@@ -93,3 +103,62 @@ export const AllStates: Story = {
     </View>
   ),
 }
+
+/**
+ * The across-the-room wall scale — bigger bar, full phase words, and colour-coded
+ * pacing (a missed target reads red). Here the eccentric ran long → red.
+ */
+export const Wall: Story = {
+  args: {
+    activePhase: null,
+    phaseElapsedMs: 0,
+    completed: { concentric: 950, hold: 1000, eccentric: 4200 },
+    target: TARGET,
+    size: 'wall',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+/** Wall, mid-rep — the eccentric is active, showing the delta countdown (1.5s to target). Tap to switch to elapsed/target. */
+export const WallActiveDelta: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 1500,
+    completed: { concentric: 950, hold: 1000 },
+    target: TARGET,
+    size: 'wall',
+    activeDisplay: 'delta',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+/** Wall, over target — the eccentric ran 1.2s past its target, so the delta is negative and red. */
+export const WallActiveOver: Story = {
+  args: {
+    activePhase: 'eccentric',
+    phaseElapsedMs: 4200,
+    completed: { concentric: 950, hold: 1000 },
+    target: TARGET,
+    size: 'wall',
+    activeDisplay: 'delta',
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ width: 460, padding: 28, backgroundColor: '#0E0E0E' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}

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

@@ -1,13 +1,16 @@
 import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
+import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import {
   TempoBar,
   getTempoPacingState,
   getTempoFillPct,
+  formatTempoDelta,
   TEMPO_PACING,
 } from './TempoBar'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
+const t = getSemanticColors('dark')
 const TARGET = { concentric: 1, hold: 1, eccentric: 3 }
 
 describe('getTempoPacingState', () => {
@@ -70,7 +73,7 @@ describe('TempoBar', () => {
         phaseElapsedMs={100}
         completed={{ concentric: 950 }}
         target={TARGET}
-      />,
+      />
     )
     expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
     expect(screen.getByText('0.9 ✓')).toBeInTheDocument()
@@ -83,7 +86,7 @@ describe('TempoBar', () => {
         phaseElapsedMs={100}
         completed={{ eccentric: 4000 }}
         target={TARGET}
-      />,
+      />
     )
     // eccentric target 3s, 4s elapsed => behind => cross
     expect(screen.getByText('4.0 ✗')).toBeInTheDocument()
@@ -96,8 +99,120 @@ describe('TempoBar', () => {
         phaseElapsedMs={1500}
         completed={{ concentric: 900, hold: 1000 }}
         target={TARGET}
-      />,
+      />
     )
     expect(await axe(container)).toHaveNoViolations()
   })
 })
+
+describe('TempoBar size="wall"', () => {
+  const TARGET_W = { concentric: 1, hold: 1, eccentric: 3 }
+
+  it('scales the active label up at wall density', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} size="wall" />)
+    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 22 })
+  })
+
+  it('keeps the compact label size by default', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET_W} />)
+    expect(screen.getByText('0.6 / 1.0')).toHaveStyle({ fontSize: 12 })
+  })
+
+  it('preserves the segment testIDs at wall density', () => {
+    render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1500}
+        completed={{ concentric: 900 }}
+        target={TARGET_W}
+        size="wall"
+      />
+    )
+    expect(screen.getByTestId('tempo-segment-active-Ecc')).toBeInTheDocument()
+    expect(screen.getByTestId('tempo-segment-completed-Con')).toBeInTheDocument()
+  })
+
+  it('spells out the full phase words at wall density', () => {
+    render(<TempoBar activePhase={null} phaseElapsedMs={0} target={TARGET_W} size="wall" />)
+    expect(screen.getByText('Concentric')).toBeInTheDocument()
+    expect(screen.getByText('Eccentric')).toBeInTheDocument()
+    expect(screen.queryByText('Con')).not.toBeInTheDocument()
+  })
+})
+
+describe('formatTempoDelta', () => {
+  it('shows remaining time to target as a positive value', () => {
+    expect(formatTempoDelta(1500)).toBe('1.5')
+  })
+
+  it('shows over-target time as negative', () => {
+    expect(formatTempoDelta(-1200)).toBe('-1.2')
+  })
+
+  it('shows 0.0 at the target (no -0.0)', () => {
+    expect(formatTempoDelta(0)).toBe('0.0')
+    expect(formatTempoDelta(-10)).toBe('0.0')
+  })
+})
+
+describe('TempoBar activeDisplay (delta countdown + toggle)', () => {
+  it('counts the remaining time down to the target in delta mode', () => {
+    render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={1800}
+        target={TARGET}
+        activeDisplay="delta"
+      />
+    )
+    // eccentric target 3.0s, elapsed 1.8s → 1.2s remaining
+    expect(screen.getByText('1.2')).toBeInTheDocument()
+  })
+
+  it('goes negative once the phase runs past its target', () => {
+    render(
+      <TempoBar
+        activePhase="eccentric"
+        phaseElapsedMs={4200}
+        target={TARGET}
+        activeDisplay="delta"
+      />
+    )
+    expect(screen.getByText('-1.2')).toBeInTheDocument()
+  })
+
+  it('tapping the active segment toggles time ↔ delta', () => {
+    render(
+      <TempoBar
+        activePhase="concentric"
+        phaseElapsedMs={600}
+        target={TARGET}
+        activeDisplay="time"
+      />
+    )
+    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
+    fireEvent.click(screen.getByTestId('tempo-segment-active-Con'))
+    // concentric target 1.0s, elapsed 0.6s → 0.4s remaining
+    expect(screen.getByText('0.4')).toBeInTheDocument()
+    expect(screen.queryByText('0.6 / 1.0')).not.toBeInTheDocument()
+  })
+
+  it('defaults to the time readout', () => {
+    render(<TempoBar activePhase="concentric" phaseElapsedMs={600} target={TARGET} />)
+    expect(screen.getByText('0.6 / 1.0')).toBeInTheDocument()
+  })
+})
+
+describe('TempoBar completed pacing colour', () => {
+  it('colours a missed completed phase red', () => {
+    render(
+      <TempoBar
+        activePhase="hold"
+        phaseElapsedMs={100}
+        completed={{ eccentric: 4000 }}
+        target={TARGET}
+      />
+    )
+    expect(screen.getByText('4.0 ✗')).toHaveStyle({ color: t['status-error'] })
+  })
+})