@titan-design/react-ui 0.5.0 → 0.7.0

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

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { StatusPill } from './StatusPill'
+
+const meta: Meta<typeof StatusPill> = {
+  title: 'Workout/StatusPill',
+  component: StatusPill,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Auto-regulation verdict pill — a glowing status dot plus colored verdict text in a ' +
+          'tinted capsule. Composes `StatusDot`; tint, border, text, and dot all derive from the ' +
+          'same semantic status token (success / warning / error).',
+      },
+    },
+  },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['productive', 'threshold', 'stop'],
+      description: 'Auto-regulation verdict',
+    },
+    label: {
+      control: 'text',
+      description: 'Overrides the default verdict text',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof StatusPill>
+
+export const Productive: Story = {
+  args: { status: 'productive' },
+}
+
+export const Threshold: Story = {
+  args: { status: 'threshold' },
+}
+
+export const Stop: Story = {
+  args: { status: 'stop' },
+}
+
+export const WithCustomLabel: Story = {
+  args: { status: 'stop', label: 'Stop · velocity loss 31%' },
+}
+
+export const AllStates: Story = {
+  render: () => (
+    <View style={{ gap: 10, alignItems: 'flex-start' }}>
+      <StatusPill status="productive" label="Productive · in the band" />
+      <StatusPill status="threshold" label="Threshold · VL20 reached" />
+      <StatusPill status="stop" label="Stop · velocity loss 31%" />
+    </View>
+  ),
+}

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

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { StatusPill, statusPillColor, type StatusPillStatus } from './StatusPill'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
+
+const cases: Array<{
+  status: StatusPillStatus
+  token: 'status-success' | 'status-warning' | 'status-error'
+  label: string
+}> = [
+  { status: 'productive', token: 'status-success', label: 'Productive' },
+  { status: 'threshold', token: 'status-warning', label: 'Threshold' },
+  { status: 'stop', token: 'status-error', label: 'Stop' },
+]
+
+describe('StatusPill', () => {
+  it('renders the pill container', () => {
+    render(<StatusPill status="productive" />)
+    expect(screen.getByTestId('status-pill')).toBeInTheDocument()
+  })
+
+  it('composes a status dot', () => {
+    render(<StatusPill status="productive" />)
+    expect(screen.getByTestId('status-dot')).toBeInTheDocument()
+  })
+
+  describe('per-status mapping', () => {
+    cases.forEach(({ status, token, label }) => {
+      it(`maps ${status} to the ${token} color and default label`, () => {
+        render(<StatusPill status={status} />)
+        const text = screen.getByTestId('status-pill-label')
+        expect(text).toHaveTextContent(label)
+        expect(text).toHaveStyle({ color: t[token] })
+      })
+
+      it(`tints the ${status} capsule from the ${token} token`, () => {
+        render(<StatusPill status={status} />)
+        expect(screen.getByTestId('status-pill')).toHaveStyle({
+          backgroundColor: alpha(t[token], 0.14),
+          borderTopColor: alpha(t[token], 0.4),
+        })
+      })
+    })
+  })
+
+  it('exposes the resolved color via statusPillColor', () => {
+    expect(statusPillColor('stop')).toBe(t['status-error'])
+  })
+
+  it('renders a custom label override', () => {
+    render(<StatusPill status="stop" label="Stop · velocity loss 31%" />)
+    expect(screen.getByText('Stop · velocity loss 31%')).toBeInTheDocument()
+  })
+
+  it('has no a11y violations', async () => {
+    const { container } = render(<StatusPill status="threshold" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

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

@@ -0,0 +1,88 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import { View, Text, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+import { StatusDot, type StatusDotVariant } from './StatusDot'
+
+const t = getSemanticColors('dark')
+
+/**
+ * Auto-regulation verdict — the human-readable read-once summary of a set's
+ * velocity-loss state.
+ * - `productive` — in the band, keep going (success)
+ * - `threshold`  — VL20 reached, approaching fatigue (warning)
+ * - `stop`       — VL28+, terminate the set (error)
+ */
+export type StatusPillStatus = 'productive' | 'threshold' | 'stop'
+
+export interface StatusPillProps extends ViewProps {
+  status: StatusPillStatus
+  /** Overrides the default verdict text for the status. */
+  label?: string
+  className?: string
+}
+
+const statusToken: Record<StatusPillStatus, 'status-success' | 'status-warning' | 'status-error'> =
+  {
+    productive: 'status-success',
+    threshold: 'status-warning',
+    stop: 'status-error',
+  }
+
+const statusDotVariant: Record<StatusPillStatus, StatusDotVariant> = {
+  productive: 'success',
+  threshold: 'warning',
+  stop: 'error',
+}
+
+const defaultLabel: Record<StatusPillStatus, string> = {
+  productive: 'Productive',
+  threshold: 'Threshold',
+  stop: 'Stop',
+}
+
+/** Resolved semantic color for a verdict status. */
+export function statusPillColor(status: StatusPillStatus): string {
+  return t[statusToken[status]]
+}
+
+/**
+ * Verdict pill: a glowing status dot + colored verdict text, in a tinted,
+ * bordered capsule. Composes {@link StatusDot} for the dot so the glow/color
+ * stays consistent with the atom. Tint and border are derived from the same
+ * semantic token via `alpha()` — no per-status raw hex.
+ */
+export function StatusPill({ status, label, className, style, ...props }: StatusPillProps) {
+  const color = statusPillColor(status)
+  const text = label ?? defaultLabel[status]
+
+  return (
+    <View
+      testID="status-pill"
+      className={className}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 7,
+          alignSelf: 'flex-start',
+          paddingVertical: 7,
+          paddingHorizontal: 13,
+          borderRadius: 9,
+          backgroundColor: alpha(color, 0.14),
+          borderWidth: 1,
+          borderColor: alpha(color, 0.4),
+        },
+        style,
+      ]}
+      {...props}
+    >
+      <View accessibilityElementsHidden>
+        <StatusDot variant={statusDotVariant[status]} glow />
+      </View>
+      <Text testID="status-pill-label" style={{ fontSize: 13, fontWeight: '800', color }}>
+        {text}
+      </Text>
+    </View>
+  )
+}

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

@@ -32,7 +32,7 @@ const decline: StrengthTrendDataPoint[] = [
 ]
 
 const meta: Meta<typeof StrengthTrendChart> = {
-  title: 'Custom/Workout/StrengthTrendChart',
+  title: 'Workout/DataViz/StrengthTrendChart',
   component: StrengthTrendChart,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,17 +3,20 @@ 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'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const sem = getSemanticColors('dark')
+
+const BRAND_PRIMARY = sem['brand-primary']
 // 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 STATUS_SUCCESS = sem['status-success']
+const STATUS_ERROR = sem['status-error']
+const STATUS_WARNING = sem['status-warning']
 const GRID_LINE = 'rgba(255,255,255,0.06)'
-const SUCCESS_PILL_BG = 'rgba(20,184,166,0.10)'
-const SUCCESS_PILL_BORDER = 'rgba(20,184,166,0.20)'
+const SUCCESS_PILL_BG = 'rgba(46,213,115,0.10)'
+const SUCCESS_PILL_BORDER = 'rgba(46,213,115,0.20)'
 const ERROR_PILL_BG = 'rgba(209,67,67,0.10)'
 const ERROR_PILL_BORDER = 'rgba(209,67,67,0.20)'
 

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

@@ -4,7 +4,7 @@ import { SupersetWrapper } from './SupersetWrapper'
 import { ExerciseCard } from './ExerciseCard'
 
 const meta: Meta<typeof SupersetWrapper> = {
-  title: 'Custom/Workout/SupersetWrapper',
+  title: 'Workout/SupersetWrapper',
   component: SupersetWrapper,
   tags: ['autodocs'],
   decorators: [

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

@@ -1,6 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import React from 'react'
 import { View, Text } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 export interface SupersetWrapperProps {
   label?: string
@@ -10,7 +11,7 @@ export interface SupersetWrapperProps {
 
 const DEFAULTS = {
   label: 'SS',
-  color: '#FF7900',
+  color: getSemanticColors('dark')['brand-primary'],
   bgBase: '#101010',
 } as const
 

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { TempoBar } from './TempoBar'
 
 const meta: Meta<typeof TempoBar> = {
-  title: 'Custom/Workout/TempoBar',
+  title: 'Workout/TempoBar',
   component: TempoBar,
   tags: ['autodocs'],
   argTypes: {

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

@@ -5,9 +5,20 @@ import { TempoDisplay, type TempoLivePhase, type TempoLiveState } from './TempoD
 
 // tempo = [eccentric, pauseBottom, concentric, pauseTop]
 const meta: Meta<typeof TempoDisplay> = {
-  title: 'Custom/Workout/TempoDisplay',
+  title: 'Workout/TempoDisplay',
   component: TempoDisplay,
   tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule.** The eccentric/pause/concentric/pause tempo display. Composes ' +
+          '[MetricCell](?path=/docs/workout-metriccell--docs) ' +
+          '(shared value/separator cell). Used-by ↑ ' +
+          '[ExerciseHeading](?path=/docs/workout-exerciseheading--docs) (`showLabel={false}`).',
+      },
+    },
+  },
   argTypes: {
     tempo: {
       control: 'object',

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

@@ -3,7 +3,11 @@ import { useState, useCallback } from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { roundTempo } from '../../../utils/workout-format'
 import { alpha } from '../../../utils/colors'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { getTempoFillPct, getTempoPacingState } from './TempoBar'
+import { MetricCell } from './metricText'
+
+const t = getSemanticColors('dark')
 
 /** The four tempo phases, in the order the display renders them. */
 export type TempoLivePhase = 'eccentric' | 'pauseBottom' | 'concentric' | 'pauseTop'
@@ -26,6 +30,8 @@ export interface TempoDisplayProps extends ViewProps {
   size?: 'sm' | 'md'
   /** Colored phases or mono (all gray) */
   colored?: boolean
+  /** Show the "TEMPO" caption before the values. Default true. */
+  showLabel?: boolean
   /** Show info tooltip on press */
   showInfo?: boolean
   /**
@@ -40,13 +46,13 @@ export interface TempoDisplayProps extends ViewProps {
 
 const INTER = 'Inter, sans-serif'
 const TEXT_TERTIARY = '#6B7280'
-const STATUS_ERROR = '#D14343' // status-error (red), shown when a phase runs behind pace
+const STATUS_ERROR = t['status-error'] // shown when a phase runs behind pace
 
 // Phase colors: [eccentric, pauseBottom, concentric, pauseTop]
 const phaseColors = {
-  eccentric: '#FFB020', // status-warning (amber)
+  eccentric: t['status-warning'],
   pauseBottom: TEXT_TERTIARY,
-  concentric: '#14B8A6', // status-success (teal)
+  concentric: t['status-success'],
   pauseTop: TEXT_TERTIARY,
   dash: TEXT_TERTIARY,
 }
@@ -61,33 +67,17 @@ function TempoValue({
   fontSize: number
 }) {
   return (
-    <Text
-      style={{
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: '600',
-        letterSpacing: 1,
-      }}
-    >
+    <MetricCell color={color} fontSize={fontSize}>
       {value}
-    </Text>
+    </MetricCell>
   )
 }
 
 function TempoSeparator({ color, fontSize }: { color: string; fontSize: number }) {
   return (
-    <Text
-      style={{
-        fontFamily: INTER,
-        fontSize,
-        color,
-        fontWeight: '600',
-        letterSpacing: 1,
-      }}
-    >
+    <MetricCell color={color} fontSize={fontSize}>
       -
-    </Text>
+    </MetricCell>
   )
 }
 
@@ -167,6 +157,7 @@ export function TempoDisplay({
   tempo,
   size = 'md',
   colored = true,
+  showLabel = true,
   showInfo = true,
   live,
   onPress,
@@ -202,19 +193,21 @@ export function TempoDisplay({
       }}
       {...props}
     >
-      <Text
-        style={{
-          fontFamily: INTER,
-          fontSize: 9,
-          fontWeight: '500',
-          color: TEXT_TERTIARY,
-          letterSpacing: 0.5,
-          textTransform: 'uppercase',
-          marginRight: 6,
-        }}
-      >
-        TEMPO
-      </Text>
+      {showLabel && (
+        <Text
+          style={{
+            fontFamily: INTER,
+            fontSize: 9,
+            fontWeight: '500',
+            color: TEXT_TERTIARY,
+            letterSpacing: 0.5,
+            textTransform: 'uppercase',
+            marginRight: 6,
+          }}
+        >
+          TEMPO
+        </Text>
+      )}
       <View style={{ flexDirection: 'row' }} testID="tempo-value">
         {live ? (
           <LiveTempoRow

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

@@ -181,7 +181,7 @@ const muscles: TrainingStatusMuscle[] = [
 ]
 
 const meta: Meta<typeof TrainingStatusPage> = {
-  title: 'Custom/Workout/TrainingStatusPage',
+  title: 'Pages/Training Status',
   component: TrainingStatusPage,
   parameters: { layout: 'fullscreen' },
   tags: ['autodocs'],