@titan-design/react-ui 0.4.0 → 0.6.0

package/src/components/custom/Typography/Typography.stories.tsx

@@ -1,13 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
-import {
-  Typography,
-  Heading,
-  Paragraph,
-  Caption,
-  Label,
-  Overline,
-} from './Typography'
+import { Typography, Heading, Paragraph, Caption, Label, Overline } from './Typography'
 
 const meta: Meta<typeof Typography> = {
   title: 'Custom/Typography',
@@ -17,16 +10,36 @@ const meta: Meta<typeof Typography> = {
     variant: {
       control: 'select',
       options: [
-        'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-        'body1', 'body2', 'subtitle1', 'subtitle2',
-        'caption', 'overline', 'button',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'body1',
+        'body2',
+        'subtitle1',
+        'subtitle2',
+        'caption',
+        'overline',
+        'button',
+        'mono',
+        'monoLabel',
       ],
     },
     color: {
       control: 'select',
       options: [
-        'primary', 'secondary', 'tertiary', 'disabled',
-        'inverse', 'success', 'error', 'warning', 'info', 'inherit',
+        'primary',
+        'secondary',
+        'tertiary',
+        'disabled',
+        'inverse',
+        'success',
+        'error',
+        'warning',
+        'info',
+        'inherit',
       ],
     },
     align: {
@@ -65,19 +78,15 @@ export const AllBody: Story = {
   render: () => (
     <View style={{ gap: 16, maxWidth: 400 }}>
       <Typography variant="body1">
-        Body 1 - This is the default body text style. It&apos;s used for main content
-        and paragraphs throughout the application.
+        Body 1 - This is the default body text style. It&apos;s used for main content and paragraphs
+        throughout the application.
       </Typography>
       <Typography variant="body2">
-        Body 2 - This is a smaller body text style. It&apos;s useful for secondary
-        content or when you need more compact text.
-      </Typography>
-      <Typography variant="subtitle1">
-        Subtitle 1 - Semi-bold text for emphasis
-      </Typography>
-      <Typography variant="subtitle2">
-        Subtitle 2 - Smaller semi-bold text
+        Body 2 - This is a smaller body text style. It&apos;s useful for secondary content or when
+        you need more compact text.
       </Typography>
+      <Typography variant="subtitle1">Subtitle 1 - Semi-bold text for emphasis</Typography>
+      <Typography variant="subtitle2">Subtitle 2 - Smaller semi-bold text</Typography>
     </View>
   ),
 }
@@ -92,6 +101,16 @@ export const AllUtility: Story = {
   ),
 }
 
+/** Monospace technical readouts (clocks, ids, metrics) and their all-caps label form. */
+export const Mono: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Typography variant="mono">mono — 16:12 · Voltra-A3F2 · 0.42 m/s</Typography>
+      <Typography variant="monoLabel">monoLabel — live status label</Typography>
+    </View>
+  ),
+}
+
 export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 8 }}>
@@ -121,12 +140,11 @@ export const ParagraphComponent: Story = {
   render: () => (
     <View style={{ gap: 16, maxWidth: 400 }}>
       <Paragraph>
-        This is a regular paragraph using the default body1 variant.
-        It&apos;s great for main content.
+        This is a regular paragraph using the default body1 variant. It&apos;s great for main
+        content.
       </Paragraph>
       <Paragraph small>
-        This is a small paragraph using the body2 variant.
-        It&apos;s useful for secondary content.
+        This is a small paragraph using the body2 variant. It&apos;s useful for secondary content.
       </Paragraph>
     </View>
   ),

package/src/components/custom/Typography/Typography.test.tsx

@@ -77,6 +77,18 @@ describe('Typography', () => {
     })
   })
 
+  describe('mono variants', () => {
+    it('renders the mono variant', () => {
+      render(<Typography variant="mono">16:12</Typography>)
+      expect(screen.getByText('16:12')).toBeInTheDocument()
+    })
+
+    it('renders the monoLabel variant', () => {
+      render(<Typography variant="monoLabel">live</Typography>)
+      expect(screen.getByText('live')).toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('headings have no accessibility violations', async () => {
       const { container } = render(
@@ -91,9 +103,7 @@ describe('Typography', () => {
     })
 
     it('body text has no accessibility violations', async () => {
-      const { container } = render(
-        <Typography variant="body1">Body text content</Typography>
-      )
+      const { container } = render(<Typography variant="body1">Body text content</Typography>)
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()

package/src/components/custom/Typography/Typography.tsx

@@ -16,6 +16,8 @@ export type TypographyVariant =
   | 'caption'
   | 'overline'
   | 'button'
+  | 'mono'
+  | 'monoLabel'
 
 export type TypographyColor =
   | 'primary'
@@ -70,6 +72,9 @@ const variantStyles: Record<TypographyVariant, string> = {
   caption: 'font-body text-xs font-normal leading-loose',
   overline: 'font-body text-xs font-semibold uppercase tracking-widest leading-relaxed',
   button: 'font-sans text-sm font-semibold leading-relaxed',
+  // Monospace technical readouts (clocks, ids, metrics) and their all-caps label form.
+  mono: 'font-mono text-xs font-normal leading-normal',
+  monoLabel: 'font-mono text-xs font-bold uppercase tracking-wide leading-normal',
 }
 
 const colorStyles: Record<TypographyColor, string> = {

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

@@ -7,8 +7,9 @@ import { RestTimer } from './RestTimer'
 import { SupersetWrapper } from './SupersetWrapper'
 import { type SetRowProps } from './SetRow'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 /** Where an exercise sits in the during-workout flow. */
 export type ActiveExerciseStatus = 'completed' | 'active' | 'upcoming'

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text } from 'react-native'
-import { Dumbbell } from 'lucide-react'
+import { DumbbellIcon } from './icons'
 import { BaseBadge } from './BaseBadge'
 
 const meta: Meta<typeof BaseBadge> = {
@@ -47,7 +47,7 @@ export const Pr: Story = {
 export const WithIcon: Story = {
   args: {
     variant: 'plain',
-    icon: <Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />,
+    icon: <DumbbellIcon size={12} color="#9CA3AF" strokeWidth={2} />,
     children: <Label>225 lbs</Label>,
   },
 }
@@ -66,7 +66,7 @@ export const AllVariants: Story = {
         <BaseBadge variant="pr" size="lg"><Label color="#FF7900">PR</Label></BaseBadge>
       </View>
       <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
-        <BaseBadge icon={<Dumbbell size={12} color="#9CA3AF" strokeWidth={2} />}>
+        <BaseBadge icon={<DumbbellIcon size={12} color="#9CA3AF" strokeWidth={2} />}>
           <Label>225 lbs</Label>
         </BaseBadge>
       </View>

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

@@ -22,7 +22,7 @@ describe('BaseBadge', () => {
       </BaseBadge>,
     )
     expect(screen.getByTestId('bb')).toHaveStyle({
-      borderTopColor: 'rgba(255, 121, 0, 0.12)',
+      borderTopColor: 'rgba(255, 121, 0, 0.3)',
     })
   })
 

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

@@ -33,7 +33,7 @@ const variantColors: Record<
   plain: { backgroundColor: '#1C1C1C', borderColor: '#1F1F1F' },
   pr: {
     backgroundColor: 'rgba(255, 121, 0, 0.12)',
-    borderColor: 'rgba(255, 121, 0, 0.12)',
+    borderColor: 'rgba(255, 121, 0, 0.3)',
   },
 }
 

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

@@ -4,6 +4,7 @@ import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-n
 import BodyHighlighter, { type ExtendedBodyPart, type Slug } from 'react-native-body-highlighter'
 import { cn } from '../../../utils/cn'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import {
   MuscleGroup,
   SimpleMuscleGroup,
@@ -25,6 +26,8 @@ import {
 const Body = ((BodyHighlighter as unknown as { default?: typeof BodyHighlighter }).default ??
   BodyHighlighter) as typeof BodyHighlighter
 
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
+
 const OUTLINE_FILL = 'rgba(255,255,255,0.08)'
 const OUTLINE_BORDER = 'rgba(255,255,255,0.12)'
 const BODY_SCALE = 0.8 // 200x400 intrinsic -> ~160x320 px
@@ -275,7 +278,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
               borderRadius: 9999,
               backgroundColor: active ? 'rgba(255,121,0,0.16)' : 'transparent',
               borderWidth: 1,
-              borderColor: active ? '#FF7900' : resolveColor('border-strong'),
+              borderColor: active ? BRAND_PRIMARY : resolveColor('border-strong'),
             }}
             testID={`body-map-toggle-${side}`}
           >
@@ -284,7 +287,7 @@ function ViewToggle({ view, onViewChange }: ViewToggleProps) {
                 fontSize: 12,
                 fontFamily: 'Inter, sans-serif',
                 fontWeight: active ? '700' : '500',
-                color: active ? '#FF7900' : resolveColor('text-secondary'),
+                color: active ? BRAND_PRIMARY : resolveColor('text-secondary'),
                 textTransform: 'capitalize',
               }}
             >
@@ -321,7 +324,7 @@ function MuscleButton({ entry, highlighted, onMusclePress }: MuscleButtonProps)
         paddingVertical: 3,
         borderRadius: 9999,
         borderWidth: 1,
-        borderColor: highlighted ? '#FF7900' : resolveColor('border-default'),
+        borderColor: highlighted ? BRAND_PRIMARY : resolveColor('border-default'),
       }}
       testID={`body-map-muscle-${entry.key}`}
     >

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

@@ -18,11 +18,14 @@ import {
   type VolumeLandmarks,
   type VolumeStatus,
 } from './muscleTaxonomy'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const BRAND_PRIMARY = '#FF7900'
+const t = getSemanticColors('dark')
 
-/** Volume track gradient: status-info (blue) -> result-improve (teal) -> status-error (red). */
-const VOLUME_GRADIENT = 'linear-gradient(90deg, #2196F3 0%, #14B8A6 50%, #D14343 100%)'
+const BRAND_PRIMARY = t['brand-primary']
+
+/** Volume track gradient: status-info -> status-success -> status-error. */
+const VOLUME_GRADIENT = `linear-gradient(90deg, ${t['status-info']} 0%, ${t['status-success']} 50%, ${t['status-error']} 100%)`
 
 /** Sheet slides up from this offset (px) and the backdrop fades to this opacity. */
 const SLIDE_OFFSET = 400

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

@@ -93,8 +93,8 @@ describe('CapacityBandChart', () => {
     it('colors dots by status relative to the band', () => {
       render(<CapacityBandChart {...baseProps} />)
       const dots = screen.getAllByTestId('capacity-band-chart-dot')
-      expect(dots[0]).toHaveStyle({ backgroundColor: '#14B8A6' }) // within
-      expect(dots[1]).toHaveStyle({ backgroundColor: '#FFB020' }) // above
+      expect(dots[0]).toHaveStyle({ backgroundColor: '#2ED573' }) // within
+      expect(dots[1]).toHaveStyle({ backgroundColor: '#F9B415' }) // above
       expect(dots[2]).toHaveStyle({ backgroundColor: '#2196F3' }) // below
     })
 

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

@@ -1,16 +1,19 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useEffect, useState, useMemo } from 'react'
 import { View, Text, Pressable, Animated, Easing, type ViewProps } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
-const STATUS_SUCCESS = '#14B8A6'
-const STATUS_WARNING = '#FFB020'
-const STATUS_INFO = '#2196F3'
+const t = getSemanticColors('dark')
+
+const STATUS_SUCCESS = t['status-success']
+const STATUS_WARNING = t['status-warning']
+const STATUS_INFO = t['status-info']
 /** Dot outline: near-white ring so load dots read on the band fill and any
  *  surface (matches the MesoStatusCard gauge-marker convention). */
 const DOT_BORDER = '#F3F4F6'
-const BAND_FILL = 'rgba(20,184,166,0.1)'
-const BAND_EDGE = 'rgba(20,184,166,0.45)'
-const PROJECTION_FILL = 'rgba(20,184,166,0.05)'
+const BAND_FILL = 'rgba(46,213,115,0.1)'
+const BAND_EDGE = 'rgba(46,213,115,0.45)'
+const PROJECTION_FILL = 'rgba(46,213,115,0.05)'
 
 const PADDING_LEFT = 28
 const PADDING_RIGHT = 10

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

@@ -72,7 +72,7 @@ describe('DeviationBar', () => {
     const track = bar.firstElementChild as HTMLElement
     expect(track).toHaveStyle({
       backgroundImage:
-        'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)',
+        'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
     })
   })
 

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

@@ -1,5 +1,8 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { View, type ViewProps, type ViewStyle } from 'react-native'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 export interface DeviationBarProps extends ViewProps {
   deviation: number
@@ -9,10 +12,10 @@ export interface DeviationBarProps extends ViewProps {
 
 function getDotColor(deviation: number): string {
   const abs = Math.abs(deviation)
-  if (deviation < -0.3) return '#14B8A6'
+  if (deviation < -0.3) return t['status-success']
   if (abs <= 0.3) return '#6B7280'
-  if (abs <= 0.7) return '#FFB020'
-  return '#D14343'
+  if (abs <= 0.7) return t['status-warning']
+  return t['status-error']
 }
 
 function getDeviationDescription(deviation: number): string {
@@ -55,7 +58,7 @@ export function DeviationBar({
           borderRadius: 3,
           // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
           backgroundImage:
-            'linear-gradient(90deg, rgba(20,184,166,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(255,176,32,0.25) 100%)',
+            'linear-gradient(90deg, rgba(46,213,115,0.25) 0%, rgba(107,114,128,0.15) 50%, rgba(249,180,21,0.25) 100%)',
         } as ViewStyle}
       />
       <View

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

@@ -1,7 +1,7 @@
 // Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
 import { useState } from 'react'
 import { View, Text, Pressable } from 'react-native'
-import { VelocityStrip } from './VelocityStrip'
+import { VelocityStrip, type VelocityZoneBandProp } from './VelocityStrip'
 import { PlaceholderStrip } from './PlaceholderStrip'
 import { WeightBadge } from './WeightBadge'
 import { PrBadge } from './PrBadge'
@@ -26,6 +26,8 @@ export interface ExerciseCardProps {
   e1rm?: { value: number; unit: 'lbs' | 'kg' }
   isPR?: boolean
   setVelocities?: number[][]
+  /** Optional velocity-zone bands shared across this exercise's sets (WA bands). */
+  velocityZones?: readonly VelocityZoneBandProp[]
   totalPlannedSets?: number
   sets?: SetRowProps[]
   tempo?: [number, number, number, number]
@@ -106,6 +108,7 @@ function CollapsedCard({
   e1rm,
   isPR,
   setVelocities,
+  velocityZones,
   totalPlannedSets,
   supersetPosition,
 }: ExerciseCardProps) {
@@ -189,6 +192,7 @@ function CollapsedCard({
               <VelocityStrip
                 key={i}
                 velocities={velocities}
+                zones={velocityZones}
                 variant="mini"
                 testID={`exercise-card-velocity-strip-${i}`}
               />

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

@@ -15,11 +15,17 @@ import {
 } from './CapacityBandChart'
 import { ExerciseCard, type ExerciseCardProps } from './ExerciseCard'
 import { type SetRowProps } from './SetRow'
-import { VelocityStrip, calculateMeanVelocity, calculateVelocityLoss } from './VelocityStrip'
+import {
+  VelocityStrip,
+  calculateMeanVelocity,
+  calculateVelocityLoss,
+  type VelocityZoneBandProp,
+} from './VelocityStrip'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { cn } from '../../../utils/cn'
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 
 /** Inner plot width: page width 390 − 16 page padding − 12 card padding on each side. */
 const CHART_WIDTH = 326
@@ -97,6 +103,8 @@ export interface ExerciseVbt {
   projection?: CapacityBandProjection
   /** Per-set velocity traces for the most recent session. */
   sets: ExerciseVbtSet[]
+  /** Optional velocity-zone bands for this exercise (WA `VelocityZones.bands`). */
+  zones?: readonly VelocityZoneBandProp[]
 }
 
 /** Page-level roll-up of the logged sessions. */
@@ -348,7 +356,13 @@ function EntryList({ entries, expandedId, onToggle, emptyLabel, testID }: EntryL
   )
 }
 
-function VbtBreakdown({ sets }: { sets: ExerciseVbtSet[] }) {
+function VbtBreakdown({
+  sets,
+  zones,
+}: {
+  sets: ExerciseVbtSet[]
+  zones?: readonly VelocityZoneBandProp[]
+}) {
   return (
     <View style={{ gap: 10 }} testID="exercise-detail-page-vbt-breakdown">
       {sets.map((set) => {
@@ -373,7 +387,7 @@ function VbtBreakdown({ sets }: { sets: ExerciseVbtSet[] }) {
               {set.label}
             </Text>
             <View className="flex-1" style={{ height: 8, justifyContent: 'center' }}>
-              <VelocityStrip velocities={set.velocities} variant="mini" />
+              <VelocityStrip velocities={set.velocities} zones={zones} variant="mini" />
             </View>
             <Text
               className="text-text-tertiary"
@@ -614,7 +628,7 @@ export function ExerciseDetailPage({
             </SectionCard>
             <VbtSummaryRow summary={vbtSummary} />
             <SectionCard title="Velocity Breakdown" testID="exercise-detail-page-velocity">
-              <VbtBreakdown sets={vbt.sets} />
+              <VbtBreakdown sets={vbt.sets} zones={vbt.zones} />
             </SectionCard>
           </View>
         )}

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

@@ -2,6 +2,7 @@
 import React from 'react'
 import { View, Text, Pressable, TextInput } from 'react-native'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
 
 export interface InputBarProps {
   exerciseName: string
@@ -17,7 +18,7 @@ export interface InputBarProps {
   visible: boolean
 }
 
-const BRAND_PRIMARY = '#FF7900'
+const BRAND_PRIMARY = getSemanticColors('dark')['brand-primary']
 const INPUT_CLASSNAME = 'bg-surface-raised border-border-strong text-text-primary'
 
 const inputStyle = {