@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -13,9 +13,7 @@ const contributing: ContributingExercise[] = [
   { name: 'Cable Fly', sets: 3, contributionWeight: 0.75 },
 ]
 
-const upcoming: UpcomingExercise[] = [
-  { name: 'Dips', workoutName: 'Push B', sets: 3 },
-]
+const upcoming: UpcomingExercise[] = [{ name: 'Dips', workoutName: 'Push B', sets: 3 }]
 
 const baseProps = {
   muscleGroup: MuscleGroup.CHEST,
@@ -54,10 +52,10 @@ describe('BodyMapDetailPanel', () => {
       render(<BodyMapDetailPanel {...baseProps} />)
       expect(screen.getByTestId('body-map-detail-panel-handle')).toBeInTheDocument()
       expect(screen.getByTestId('body-map-detail-panel-status-badge')).toHaveTextContent(
-        'productive',
+        'productive'
       )
       expect(screen.getByTestId('body-map-detail-panel-last-trained')).toHaveTextContent(
-        'Last trained 2 days ago',
+        'Last trained 2 days ago'
       )
     })
 
@@ -101,13 +99,13 @@ describe('BodyMapDetailPanel', () => {
     it('renders contributing exercises with sets and contribution', () => {
       render(<BodyMapDetailPanel {...baseProps} />)
       expect(screen.getByTestId('body-map-detail-panel-contributing-0-name')).toHaveTextContent(
-        'Barbell Bench Press',
+        'Barbell Bench Press'
       )
       expect(screen.getByTestId('body-map-detail-panel-contributing-0-detail')).toHaveTextContent(
-        '4 sets · 100%',
+        '4 sets · 100%'
       )
       expect(screen.getByTestId('body-map-detail-panel-contributing-1-detail')).toHaveTextContent(
-        '3 sets · 75%',
+        '3 sets · 75%'
       )
     })
 
@@ -115,7 +113,7 @@ describe('BodyMapDetailPanel', () => {
       render(<BodyMapDetailPanel {...baseProps} />)
       expect(screen.getByTestId('body-map-detail-panel-upcoming-0-name')).toHaveTextContent('Dips')
       expect(screen.getByTestId('body-map-detail-panel-upcoming-0-detail')).toHaveTextContent(
-        'Push B · 3 sets',
+        'Push B · 3 sets'
       )
     })
 
@@ -131,7 +129,7 @@ describe('BodyMapDetailPanel', () => {
           contributingExercises={[]}
           upcomingExercises={[]}
           weeklyHistory={[]}
-        />,
+        />
       )
       expect(screen.getByTestId('body-map-detail-panel')).toBeInTheDocument()
       expect(screen.queryByTestId('body-map-detail-panel-contributing')).not.toBeInTheDocument()
@@ -190,9 +188,7 @@ describe('BodyMapDetailPanel', () => {
     })
 
     it('has no accessibility violations with full content', async () => {
-      const { container } = render(
-        <BodyMapDetailPanel {...baseProps} onViewExercises={vi.fn()} />,
-      )
+      const { container } = render(<BodyMapDetailPanel {...baseProps} onViewExercises={vi.fn()} />)
       expect(await axe(container)).toHaveNoViolations()
     })
 
@@ -200,7 +196,7 @@ describe('BodyMapDetailPanel', () => {
       const statuses = ['under', 'maintenance', 'productive', 'over'] as const
       for (const volumeStatus of statuses) {
         const { container, unmount } = render(
-          <BodyMapDetailPanel {...baseProps} volumeStatus={volumeStatus} />,
+          <BodyMapDetailPanel {...baseProps} volumeStatus={volumeStatus} />
         )
         expect(await axe(container)).toHaveNoViolations()
         unmount()
@@ -217,7 +213,7 @@ describe('BodyMapDetailPanel', () => {
           volumeStatus="maintenance"
           isOpen
           onClose={vi.fn()}
-        />,
+        />
       )
       expect(await axe(container)).toHaveNoViolations()
     })

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

@@ -19,6 +19,9 @@ import {
   type VolumeStatus,
 } from './muscleTaxonomy'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { liftStyle } from '../../../theme/lift'
+import { alpha } from '../../../utils/colors'
 
 const t = getSemanticColors('dark')
 
@@ -173,7 +176,14 @@ export function BodyMapDetailPanel({
 
   return (
     <View
-      style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'flex-end' }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        justifyContent: 'flex-end',
+      }}
       testID="body-map-detail-panel-root"
     >
       <Animated.View
@@ -183,7 +193,7 @@ export function BodyMapDetailPanel({
           left: 0,
           right: 0,
           bottom: 0,
-          backgroundColor: '#000000',
+          backgroundColor: primitiveColors.black,
           opacity: backdrop,
         }}
         testID="body-map-detail-panel-backdrop-anim"
@@ -266,7 +276,9 @@ export function BodyMapDetailPanel({
               style={{ padding: 4, margin: -4 }}
               testID="body-map-detail-panel-close"
             >
-              <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>{'×'}</Text>
+              <Text className="text-text-secondary" style={{ fontSize: 22, lineHeight: 22 }}>
+                {'×'}
+              </Text>
             </Pressable>
           </View>
 
@@ -286,10 +298,16 @@ export function BodyMapDetailPanel({
               style={{ marginBottom: 6 }}
               accessibilityElementsHidden
             >
-              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
+              <Text
+                className="text-text-tertiary"
+                style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+              >
                 {`MEV ${landmarks.mev}`}
               </Text>
-              <Text className="text-text-tertiary" style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}>
+              <Text
+                className="text-text-tertiary"
+                style={{ fontSize: 10, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+              >
                 {`MRV ${landmarks.mrv}`}
               </Text>
             </View>
@@ -304,7 +322,9 @@ export function BodyMapDetailPanel({
               testID="body-map-detail-panel-volume-bar"
             >
               <View
-                style={{ height: 8, borderRadius: 4, backgroundImage: VOLUME_GRADIENT } as ViewStyle}
+                style={
+                  { height: 8, borderRadius: 4, backgroundImage: VOLUME_GRADIENT } as ViewStyle
+                }
                 accessibilityElementsHidden
               />
               <View
@@ -317,7 +337,8 @@ export function BodyMapDetailPanel({
                   height: 14,
                   borderRadius: 7,
                   borderWidth: 2,
-                  boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+                  // A knob resting on the volume bar: lift, with the ring as its edge.
+                  ...liftStyle(1, 'dark', { rim: 0 }),
                 }}
                 accessibilityElementsHidden
                 testID="body-map-detail-panel-volume-marker"
@@ -393,7 +414,12 @@ export function BodyMapDetailPanel({
                 >
                   <Text
                     className="text-text-primary"
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+                    style={{
+                      flex: 1,
+                      fontSize: 13,
+                      fontFamily: 'Inter, sans-serif',
+                      fontWeight: '600',
+                    }}
                     testID={`body-map-detail-panel-contributing-${index}-name`}
                   >
                     {exercise.name}
@@ -432,7 +458,12 @@ export function BodyMapDetailPanel({
                 >
                   <Text
                     className="text-text-primary"
-                    style={{ flex: 1, fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '600' }}
+                    style={{
+                      flex: 1,
+                      fontSize: 13,
+                      fontFamily: 'Inter, sans-serif',
+                      fontWeight: '600',
+                    }}
                     testID={`body-map-detail-panel-upcoming-${index}-name`}
                   >
                     {exercise.name}
@@ -459,13 +490,20 @@ export function BodyMapDetailPanel({
                 paddingVertical: 10,
                 borderRadius: 8,
                 alignItems: 'center',
-                backgroundColor: 'rgba(255,121,0,0.12)',
+                backgroundColor: alpha(BRAND_PRIMARY, 0.12),
                 borderWidth: 1,
-                borderColor: 'rgba(255,121,0,0.3)',
+                borderColor: alpha(BRAND_PRIMARY, 0.3),
               }}
               testID="body-map-detail-panel-view-exercises"
             >
-              <Text style={{ fontSize: 13, fontFamily: 'Inter, sans-serif', fontWeight: '700', color: BRAND_PRIMARY }}>
+              <Text
+                style={{
+                  fontSize: 13,
+                  fontFamily: 'Inter, sans-serif',
+                  fontWeight: '700',
+                  color: BRAND_PRIMARY,
+                }}
+              >
                 {'View exercises'}
               </Text>
             </Pressable>

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

@@ -2,11 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { useState } from 'react'
 import { View, Text } from 'react-native'
 import { CapacityBandChart } from './CapacityBandChart'
-import type {
-  CapacityBandDataPoint,
-  CapacityBandProjection,
-  WorkoutDot,
-} from './CapacityBandChart'
+import type { CapacityBandDataPoint, CapacityBandProjection, WorkoutDot } from './CapacityBandChart'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 const band: CapacityBandDataPoint[] = [
   { date: '2026-06-01', bandLow: 40, bandHigh: 70 },
@@ -39,12 +36,18 @@ const projection: CapacityBandProjection = {
 }
 
 const meta: Meta<typeof CapacityBandChart> = {
-  title: 'Workout/DataViz/CapacityBandChart',
+  title: 'Custom/Workout/DataViz/CapacityBandChart',
   component: CapacityBandChart,
   tags: ['autodocs'],
   argTypes: {
-    width: { control: { type: 'range', min: 240, max: 480, step: 10 }, description: 'Chart width in px' },
-    height: { control: { type: 'range', min: 120, max: 280, step: 10 }, description: 'Chart height in px' },
+    width: {
+      control: { type: 'range', min: 240, max: 480, step: 10 },
+      description: 'Chart width in px',
+    },
+    height: {
+      control: { type: 'range', min: 120, max: 280, step: 10 },
+      description: 'Chart height in px',
+    },
     band: { description: 'Capacity band shape over time' },
     workouts: { description: 'Workout sessions plotted as load dots' },
     projection: { description: 'Optional dashed forward projection (training vs rest)' },
@@ -111,7 +114,7 @@ function InteractiveCapacityBandChart() {
         height={200}
         onWorkoutPress={setSelected}
       />
-      <Text style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: '#9CA3AF' }}>
+      <Text style={{ fontSize: 12, fontFamily: 'Inter, sans-serif', color: greyRamp[400] }}>
         {selected
           ? `Selected ${selected.date}: load ${selected.load} (${selected.status})`
           : 'Tap a workout dot to inspect the session.'}

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

@@ -2,11 +2,7 @@ import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
 import { CapacityBandChart } from './CapacityBandChart'
-import type {
-  CapacityBandDataPoint,
-  CapacityBandProjection,
-  WorkoutDot,
-} from './CapacityBandChart'
+import type { CapacityBandDataPoint, CapacityBandProjection, WorkoutDot } from './CapacityBandChart'
 
 const band: CapacityBandDataPoint[] = [
   { date: '2026-06-01', bandLow: 40, bandHigh: 70 },
@@ -44,50 +40,36 @@ describe('CapacityBandChart', () => {
     it('renders the shaded band fill as column cells', () => {
       render(<CapacityBandChart {...baseProps} />)
       expect(screen.getByTestId('capacity-band-chart-band')).toBeInTheDocument()
-      expect(
-        screen.getAllByTestId('capacity-band-chart-band-cell').length,
-      ).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('capacity-band-chart-band-cell').length).toBeGreaterThan(0)
     })
 
     it('renders the top and bottom band edge lines', () => {
       render(<CapacityBandChart {...baseProps} />)
-      expect(
-        screen.getAllByTestId('capacity-band-chart-edge-top').length,
-      ).toBe(band.length - 1)
-      expect(
-        screen.getAllByTestId('capacity-band-chart-edge-bottom').length,
-      ).toBe(band.length - 1)
+      expect(screen.getAllByTestId('capacity-band-chart-edge-top').length).toBe(band.length - 1)
+      expect(screen.getAllByTestId('capacity-band-chart-edge-bottom').length).toBe(band.length - 1)
     })
 
     it('renders a conceptual Load axis label with no numbers', () => {
       render(<CapacityBandChart {...baseProps} />)
-      expect(
-        screen.getByTestId('capacity-band-chart-y-axis-label'),
-      ).toHaveTextContent('Load')
+      expect(screen.getByTestId('capacity-band-chart-y-axis-label')).toHaveTextContent('Load')
     })
 
     it('renders x-axis date labels', () => {
       render(<CapacityBandChart {...baseProps} />)
-      expect(
-        screen.getAllByTestId('capacity-band-chart-x-label').length,
-      ).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('capacity-band-chart-x-label').length).toBeGreaterThan(0)
     })
 
     it('renders the empty state when band has no data', () => {
       render(<CapacityBandChart band={[]} workouts={[]} width={320} height={200} />)
       expect(screen.getByTestId('capacity-band-chart-empty')).toBeInTheDocument()
-      expect(
-        screen.queryByTestId('capacity-band-chart-band'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('capacity-band-chart-band')).not.toBeInTheDocument()
     })
   })
 
   describe('workout dots', () => {
     it('renders one dot per workout', () => {
       render(<CapacityBandChart {...baseProps} />)
-      expect(screen.getAllByTestId('capacity-band-chart-dot')).toHaveLength(
-        workouts.length,
-      )
+      expect(screen.getAllByTestId('capacity-band-chart-dot')).toHaveLength(workouts.length)
     })
 
     it('colors dots by status relative to the band', () => {
@@ -125,41 +107,36 @@ describe('CapacityBandChart', () => {
 
     it('exposes dots as labeled buttons when interactive', () => {
       render(<CapacityBandChart {...baseProps} onWorkoutPress={vi.fn()} />)
-      expect(
-        screen.getByLabelText('Workout on 6/6, load 80, above range'),
-      ).toHaveAttribute('role', 'button')
+      expect(screen.getByLabelText('Workout on 6/6, load 80, above range')).toHaveAttribute(
+        'role',
+        'button'
+      )
     })
   })
 
   describe('projection', () => {
     it('renders dashed diverging training and rest edges when provided', () => {
       render(<CapacityBandChart {...baseProps} projection={projection} />)
+      expect(screen.getByTestId('capacity-band-chart-projection')).toBeInTheDocument()
       expect(
-        screen.getByTestId('capacity-band-chart-projection'),
-      ).toBeInTheDocument()
-      expect(
-        screen.getAllByTestId('capacity-band-chart-projection-training').length,
-      ).toBeGreaterThan(0)
-      expect(
-        screen.getAllByTestId('capacity-band-chart-projection-rest').length,
+        screen.getAllByTestId('capacity-band-chart-projection-training').length
       ).toBeGreaterThan(0)
+      expect(screen.getAllByTestId('capacity-band-chart-projection-rest').length).toBeGreaterThan(0)
     })
 
     it('labels the training and rest projections', () => {
       render(<CapacityBandChart {...baseProps} projection={projection} />)
-      expect(
-        screen.getByTestId('capacity-band-chart-projection-training-label'),
-      ).toHaveTextContent('Training')
-      expect(
-        screen.getByTestId('capacity-band-chart-projection-rest-label'),
-      ).toHaveTextContent('Rest')
+      expect(screen.getByTestId('capacity-band-chart-projection-training-label')).toHaveTextContent(
+        'Training'
+      )
+      expect(screen.getByTestId('capacity-band-chart-projection-rest-label')).toHaveTextContent(
+        'Rest'
+      )
     })
 
     it('omits the projection layer when not provided', () => {
       render(<CapacityBandChart {...baseProps} />)
-      expect(
-        screen.queryByTestId('capacity-band-chart-projection'),
-      ).not.toBeInTheDocument()
+      expect(screen.queryByTestId('capacity-band-chart-projection')).not.toBeInTheDocument()
     })
   })
 
@@ -170,7 +147,7 @@ describe('CapacityBandChart', () => {
       expect(chart).toHaveAttribute('role', 'img')
       expect(chart).toHaveAttribute(
         'aria-label',
-        'Training capacity band chart. Current capacity: below range. 3 workouts shown.',
+        'Training capacity band chart. Current capacity: below range. 3 workouts shown.'
       )
     })
 
@@ -181,11 +158,7 @@ describe('CapacityBandChart', () => {
 
     it('has no accessibility violations with all features enabled', async () => {
       const { container } = render(
-        <CapacityBandChart
-          {...baseProps}
-          projection={projection}
-          onWorkoutPress={vi.fn()}
-        />,
+        <CapacityBandChart {...baseProps} projection={projection} onWorkoutPress={vi.fn()} />
       )
       expect(await axe(container)).toHaveNoViolations()
     })