@titan-design/react-ui 0.7.0 → 0.9.0

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

@@ -184,3 +184,76 @@ describe('RestTimer zero-duration timer (NaN guard)', () => {
     expect(container.innerHTML).not.toContain('NaN')
   })
 })
+
+describe('RestTimer ring variant', () => {
+  const ringProps = { ...defaultProps, variant: 'ring' as const }
+
+  it('renders the ring (composed CircularProgress) instead of the linear bar', () => {
+    render(<RestTimer {...ringProps} />)
+    expect(screen.getByTestId('rest-timer-ring')).toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toBeInTheDocument()
+    expect(screen.queryByTestId('rest-timer-progress-track')).not.toBeInTheDocument()
+  })
+
+  it('shows the mm:ss countdown in the ring center while resting', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={60000} />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('1:00')
+  })
+
+  it('shows GO (not a time) when rest is complete', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={120000} />)
+    expect(screen.getByTestId('circular-timer-label')).toHaveTextContent('GO')
+  })
+
+  it('labels the completed ring as rest complete', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={125000} />)
+    expect(screen.getByLabelText('Rest complete, next set ready')).toBeInTheDocument()
+  })
+
+  it('labels the resting ring with seconds remaining', () => {
+    render(<RestTimer {...ringProps} totalSeconds={120} elapsedMs={60000} />)
+    expect(screen.getByLabelText('Rest timer, 60 seconds remaining')).toBeInTheDocument()
+  })
+
+  it('renders the next-set line and controls by default', () => {
+    render(<RestTimer {...ringProps} nextSetInfo="Next · Bench · set 3 of 4" />)
+    expect(screen.getByTestId('rest-timer-next-set')).toHaveTextContent('Next · Bench · set 3 of 4')
+    expect(screen.getByTestId('rest-timer-add-time')).toBeInTheDocument()
+    expect(screen.getByTestId('rest-timer-skip')).toBeInTheDocument()
+  })
+
+  it('hides the controls in displayOnly mode (keeps ring + next-set)', () => {
+    render(<RestTimer {...ringProps} nextSetInfo="Next" displayOnly />)
+    expect(screen.getByTestId('rest-timer-ring')).toBeInTheDocument()
+    expect(screen.getByTestId('rest-timer-next-set')).toBeInTheDocument()
+    expect(screen.queryByTestId('rest-timer-skip')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('rest-timer-add-time')).not.toBeInTheDocument()
+  })
+
+  it('fires onSkip / onAddTime from the ring controls', () => {
+    const onSkip = vi.fn()
+    const onAddTime = vi.fn()
+    render(<RestTimer {...ringProps} onSkip={onSkip} onAddTime={onAddTime} />)
+    fireEvent.click(screen.getByTestId('rest-timer-skip'))
+    fireEvent.click(screen.getByTestId('rest-timer-add-time'))
+    expect(onSkip).toHaveBeenCalledOnce()
+    expect(onAddTime).toHaveBeenCalledOnce()
+  })
+
+  it('respects visible=false', () => {
+    render(<RestTimer {...ringProps} visible={false} />)
+    expect(screen.queryByTestId('rest-timer-ring')).not.toBeInTheDocument()
+  })
+
+  it('emits no NaN when totalSeconds is 0', () => {
+    const { container } = render(<RestTimer {...ringProps} totalSeconds={0} elapsedMs={0} />)
+    expect(container.innerHTML).not.toContain('NaN')
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <RestTimer {...ringProps} nextSetInfo="Next · Bench · set 3 of 4" />
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -34,6 +34,12 @@ describe('SetsRepsLoad', () => {
     expect(screen.getByTestId('sets-reps-load')).toHaveTextContent('15-20')
   })
 
+  it('scales the cell font size via fontSize', () => {
+    render(<SetsRepsLoad sets={4} reps={8} load={140} fontSize={32} />)
+    // The value cells (and separators) render at the supplied size.
+    expect(screen.getByText('4')).toHaveStyle({ fontSize: 32 })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(<SetsRepsLoad sets={5} reps={8} load={145} />)

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

@@ -14,6 +14,8 @@ export interface SetsRepsLoadProps extends ViewProps {
   load: number
   /** Displayed load unit label (e.g. "lb", "kg"). */
   unit?: string
+  /** Cell font size (px). Default 11 — the compact rail/card scale. Raise for a wall read-out. */
+  fontSize?: number
   className?: string
 }
 
@@ -27,6 +29,7 @@ export function SetsRepsLoad({
   reps,
   load,
   unit = 'lb',
+  fontSize,
   className,
   ...props
 }: SetsRepsLoadProps) {
@@ -41,12 +44,18 @@ export function SetsRepsLoad({
       testID="sets-reps-load"
       {...props}
     >
-      <MetricCell color={value}>{sets}</MetricCell>
-      <MetricCell color={sep}>{` ${TIMES} `}</MetricCell>
-      <MetricCell color={value}>{reps}</MetricCell>
-      <MetricCell color={sep}>{` ${AT} `}</MetricCell>
-      <MetricCell color={value}>{load}</MetricCell>
-      <MetricCell color={sep}>{` ${unit}`}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize}>
+        {sets}
+      </MetricCell>
+      <MetricCell color={sep} fontSize={fontSize}>{` ${TIMES} `}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize}>
+        {reps}
+      </MetricCell>
+      <MetricCell color={sep} fontSize={fontSize}>{` ${AT} `}</MetricCell>
+      <MetricCell color={value} fontSize={fontSize}>
+        {load}
+      </MetricCell>
+      <MetricCell color={sep} fontSize={fontSize}>{` ${unit}`}</MetricCell>
     </View>
   )
 }