@titan-design/react-ui 0.12.0 → 0.13.0

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()
     })

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

@@ -101,7 +101,7 @@ function formatDate(date: string): string {
 function toPixels(
   points: CapacityBandDataPoint[],
   toX: (date: string) => number,
-  toY: (value: number) => number,
+  toY: (value: number) => number
 ): PixelPoint[] {
   return points
     .map((p) => ({ x: toX(p.date), yHigh: toY(p.bandHigh), yLow: toY(p.bandLow) }))
@@ -153,7 +153,7 @@ function buildEdges(pixels: PixelPoint[], key: 'yHigh' | 'yLow') {
 function collectValues(
   band: CapacityBandDataPoint[],
   workouts: WorkoutDot[],
-  projection?: CapacityBandProjection,
+  projection?: CapacityBandProjection
 ): number[] {
   const values: number[] = []
   band.forEach((p) => values.push(p.bandLow, p.bandHigh))
@@ -200,7 +200,7 @@ export function CapacityBandChart({
   const [reveal] = useState(() => new Animated.Value(0))
   const dotAnims = useMemo(
     () => Array.from({ length: workouts.length }, () => new Animated.Value(0)),
-    [workouts.length],
+    [workouts.length]
   )
 
   useEffect(() => {
@@ -218,7 +218,7 @@ export function CapacityBandChart({
         duration: 200,
         easing: Easing.out(Easing.ease),
         useNativeDriver: false,
-      }),
+      })
     )
     const animation = Animated.sequence([draw, Animated.stagger(200, pops)])
     animation.start()
@@ -244,10 +244,8 @@ export function CapacityBandChart({
     const domainMax = maxV + pad
     const vRange = domainMax - domainMin || 1
 
-    const toX = (date: string) =>
-      PADDING_LEFT + ((parseTime(date) - minT) / tRange) * plotWidth
-    const toY = (value: number) =>
-      PADDING_TOP + (1 - (value - domainMin) / vRange) * plotHeight
+    const toX = (date: string) => PADDING_LEFT + ((parseTime(date) - minT) / tRange) * plotWidth
+    const toY = (value: number) => PADDING_TOP + (1 - (value - domainMin) / vRange) * plotHeight
     return { toX, toY }
   }, [band, workouts, projection, plotWidth, plotHeight])
 
@@ -274,9 +272,7 @@ export function CapacityBandChart({
   const trainingPixels = projection
     ? toPixels([lastBandPoint, ...projection.withTraining], toX, toY)
     : []
-  const restPixels = projection
-    ? toPixels([lastBandPoint, ...projection.withRest], toX, toY)
-    : []
+  const restPixels = projection ? toPixels([lastBandPoint, ...projection.withRest], toX, toY) : []
 
   const labelStride = Math.max(1, Math.ceil(band.length / 5))
   const revealWidth = reveal.interpolate({ inputRange: [0, 1], outputRange: [0, width] })
@@ -303,7 +299,7 @@ export function CapacityBandChart({
     segments: ReturnType<typeof buildEdges>,
     color: string,
     dashed: boolean,
-    key: string,
+    key: string
   ) =>
     segments.map((seg, i) => (
       <View
@@ -341,107 +337,142 @@ export function CapacityBandChart({
         style={{ position: 'absolute', top: 0, left: 0, width, height }}
         accessibilityRole="image"
         accessibilityLabel={`Training capacity band chart. Current capacity: ${currentStatus(
-          workouts,
+          workouts
         )}. ${workouts.length} workout${workouts.length === 1 ? '' : 's'} shown.`}
         testID="capacity-band-chart"
       >
-      {/* Band + projection draw left-to-right via an animated clip. */}
-      <Animated.View
-        style={{ position: 'absolute', top: 0, left: 0, height, width: revealWidth, overflow: 'hidden' }}
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-        testID="capacity-band-chart-reveal"
-      >
-        <View style={{ width, height, position: 'relative' }}>
-          {projection && (
-            <View testID="capacity-band-chart-projection">
-              {renderColumns(buildColumns(trainingPixels, COLUMN_STEP), PROJECTION_FILL, 'capacity-band-chart-projection-fill')}
-              {renderColumns(buildColumns(restPixels, COLUMN_STEP), PROJECTION_FILL, 'capacity-band-chart-projection-fill')}
-              {renderEdges(buildEdges(trainingPixels, 'yHigh'), STATUS_SUCCESS, true, 'capacity-band-chart-projection-training')}
-              {renderEdges(buildEdges(trainingPixels, 'yLow'), STATUS_SUCCESS, true, 'capacity-band-chart-projection-training')}
-              {renderEdges(buildEdges(restPixels, 'yHigh'), STATUS_INFO, true, 'capacity-band-chart-projection-rest')}
-              {renderEdges(buildEdges(restPixels, 'yLow'), STATUS_INFO, true, 'capacity-band-chart-projection-rest')}
-              <Text
-                style={{
-                  position: 'absolute',
-                  left: trainingPixels[trainingPixels.length - 1]?.x + 2,
-                  top: trainingPixels[trainingPixels.length - 1]?.yHigh - 12,
-                  fontSize: 9,
-                  fontFamily: 'Inter, sans-serif',
-                  color: STATUS_SUCCESS,
-                }}
-                testID="capacity-band-chart-projection-training-label"
-              >
-                Training
-              </Text>
-              <Text
-                style={{
-                  position: 'absolute',
-                  left: restPixels[restPixels.length - 1]?.x + 2,
-                  top: restPixels[restPixels.length - 1]?.yLow + 2,
-                  fontSize: 9,
-                  fontFamily: 'Inter, sans-serif',
-                  color: STATUS_INFO,
-                }}
-                testID="capacity-band-chart-projection-rest-label"
-              >
-                Rest
-              </Text>
-            </View>
-          )}
+        {/* Band + projection draw left-to-right via an animated clip. */}
+        <Animated.View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            height,
+            width: revealWidth,
+            overflow: 'hidden',
+          }}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          testID="capacity-band-chart-reveal"
+        >
+          <View style={{ width, height, position: 'relative' }}>
+            {projection && (
+              <View testID="capacity-band-chart-projection">
+                {renderColumns(
+                  buildColumns(trainingPixels, COLUMN_STEP),
+                  PROJECTION_FILL,
+                  'capacity-band-chart-projection-fill'
+                )}
+                {renderColumns(
+                  buildColumns(restPixels, COLUMN_STEP),
+                  PROJECTION_FILL,
+                  'capacity-band-chart-projection-fill'
+                )}
+                {renderEdges(
+                  buildEdges(trainingPixels, 'yHigh'),
+                  STATUS_SUCCESS,
+                  true,
+                  'capacity-band-chart-projection-training'
+                )}
+                {renderEdges(
+                  buildEdges(trainingPixels, 'yLow'),
+                  STATUS_SUCCESS,
+                  true,
+                  'capacity-band-chart-projection-training'
+                )}
+                {renderEdges(
+                  buildEdges(restPixels, 'yHigh'),
+                  STATUS_INFO,
+                  true,
+                  'capacity-band-chart-projection-rest'
+                )}
+                {renderEdges(
+                  buildEdges(restPixels, 'yLow'),
+                  STATUS_INFO,
+                  true,
+                  'capacity-band-chart-projection-rest'
+                )}
+                <Text
+                  style={{
+                    position: 'absolute',
+                    left: trainingPixels[trainingPixels.length - 1]?.x + 2,
+                    top: trainingPixels[trainingPixels.length - 1]?.yHigh - 12,
+                    fontSize: 9,
+                    fontFamily: 'Inter, sans-serif',
+                    color: STATUS_SUCCESS,
+                  }}
+                  testID="capacity-band-chart-projection-training-label"
+                >
+                  Training
+                </Text>
+                <Text
+                  style={{
+                    position: 'absolute',
+                    left: restPixels[restPixels.length - 1]?.x + 2,
+                    top: restPixels[restPixels.length - 1]?.yLow + 2,
+                    fontSize: 9,
+                    fontFamily: 'Inter, sans-serif',
+                    color: STATUS_INFO,
+                  }}
+                  testID="capacity-band-chart-projection-rest-label"
+                >
+                  Rest
+                </Text>
+              </View>
+            )}
 
-          <View testID="capacity-band-chart-band">
-            {renderColumns(columns, BAND_FILL, 'capacity-band-chart-band-cell')}
+            <View testID="capacity-band-chart-band">
+              {renderColumns(columns, BAND_FILL, 'capacity-band-chart-band-cell')}
+            </View>
+            {renderEdges(topEdge, BAND_EDGE, false, 'capacity-band-chart-edge-top')}
+            {renderEdges(bottomEdge, BAND_EDGE, false, 'capacity-band-chart-edge-bottom')}
           </View>
-          {renderEdges(topEdge, BAND_EDGE, false, 'capacity-band-chart-edge-top')}
-          {renderEdges(bottomEdge, BAND_EDGE, false, 'capacity-band-chart-edge-bottom')}
-        </View>
-      </Animated.View>
-
-      {/* Y axis conceptual label (no numbers). */}
-      <Text
-        className="text-text-tertiary"
-        style={{
-          position: 'absolute',
-          left: PADDING_LEFT / 2 - 14,
-          top: PADDING_TOP + plotHeight / 2 - 7,
-          width: 32,
-          textAlign: 'center',
-          fontSize: 9,
-          fontFamily: 'Inter, sans-serif',
-          transform: [{ rotate: '-90deg' }],
-        }}
-        accessibilityElementsHidden
-        importantForAccessibility="no-hide-descendants"
-        testID="capacity-band-chart-y-axis-label"
-      >
-        Load
-      </Text>
-
-      {/* X axis date labels (subset to avoid overlap). */}
-      {band.map((point, i) => {
-        if (i % labelStride !== 0 && i !== band.length - 1) return null
-        return (
-          <Text
-            key={`x-${point.date}`}
-            className="text-text-tertiary"
-            style={{
-              position: 'absolute',
-              left: toX(point.date) - 14,
-              top: height - PADDING_BOTTOM + 2,
-              width: 28,
-              textAlign: 'center',
-              fontSize: 10,
-              fontFamily: 'Inter, sans-serif',
-            }}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            testID="capacity-band-chart-x-label"
-          >
-            {formatDate(point.date)}
-          </Text>
-        )
-      })}
+        </Animated.View>
+
+        {/* Y axis conceptual label (no numbers). */}
+        <Text
+          className="text-text-tertiary"
+          style={{
+            position: 'absolute',
+            left: PADDING_LEFT / 2 - 14,
+            top: PADDING_TOP + plotHeight / 2 - 7,
+            width: 32,
+            textAlign: 'center',
+            fontSize: 9,
+            fontFamily: 'Inter, sans-serif',
+            transform: [{ rotate: '-90deg' }],
+          }}
+          accessibilityElementsHidden
+          importantForAccessibility="no-hide-descendants"
+          testID="capacity-band-chart-y-axis-label"
+        >
+          Load
+        </Text>
+
+        {/* X axis date labels (subset to avoid overlap). */}
+        {band.map((point, i) => {
+          if (i % labelStride !== 0 && i !== band.length - 1) return null
+          return (
+            <Text
+              key={`x-${point.date}`}
+              className="text-text-tertiary"
+              style={{
+                position: 'absolute',
+                left: toX(point.date) - 14,
+                top: height - PADDING_BOTTOM + 2,
+                width: 28,
+                textAlign: 'center',
+                fontSize: 10,
+                fontFamily: 'Inter, sans-serif',
+              }}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              testID="capacity-band-chart-x-label"
+            >
+              {formatDate(point.date)}
+            </Text>
+          )
+        })}
       </View>
 
       {/* Workout dots — scale in after the band draws. */}

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

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

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

@@ -59,12 +59,15 @@ describe('DeviationBar', () => {
     expect(bar).toHaveAttribute('role', 'slider')
   })
 
-  it('renders an 8px dot with a text-primary border and shadow', () => {
+  it('renders an 8px dot with a text-primary border and a lift', () => {
     const { getByTestId } = render(<DeviationBar deviation={0} />)
     const dot = getByTestId('deviation-dot')
     expect(dot).toHaveStyle({ width: '8px', height: '8px' })
     expect(dot).toHaveStyle({ borderTopWidth: '1.5px', borderTopColor: greyRamp[50] })
-    expect(dot).toHaveStyle({ boxShadow: '0 0 4px rgba(0,0,0,0.5)' })
+    // The knob rests on the track: an ambient cast shadow, no rim (the ring is
+    // already its edge) and never an inset.
+    expect(dot.style.boxShadow).toContain('rgba(0,0,0')
+    expect(dot.style.boxShadow).not.toContain('inset')
   })
 
   it('renders the track with the deviation gradient background', () => {

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

@@ -2,6 +2,7 @@
 import { View, type ViewProps, type ViewStyle } from 'react-native'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { greyRamp } from '../../../theme/tokens/primitives'
+import { liftStyle } from '../../../theme/lift'
 
 const t = getSemanticColors('dark')
 
@@ -25,12 +26,7 @@ function getDeviationDescription(deviation: number): string {
   return 'on plan'
 }
 
-export function DeviationBar({
-  deviation,
-  width,
-  className,
-  ...props
-}: DeviationBarProps) {
+export function DeviationBar({ deviation, width, className, ...props }: DeviationBarProps) {
   const clamped = Math.max(-1, Math.min(1, deviation))
   const resolvedWidth = width ?? 40
   const dotPosition = ((clamped + 1) / 2) * resolvedWidth
@@ -42,7 +38,12 @@ export function DeviationBar({
   return (
     <View
       className={className}
-      style={{ flexDirection: 'row', alignItems: 'center', height: containerHeight, width: resolvedWidth }}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: containerHeight,
+        width: resolvedWidth,
+      }}
       accessibilityRole="adjustable"
       accessibilityValue={{ min: -100, max: 100, now: valueNow }}
       accessibilityLabel={`Session deviation: ${getDeviationDescription(clamped)}`}
@@ -53,14 +54,16 @@ export function DeviationBar({
       {...props}
     >
       <View
-        style={{
-          height: trackHeight,
-          width: resolvedWidth,
-          borderRadius: 3,
-          // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
-          backgroundImage:
-            '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}
+        style={
+          {
+            height: trackHeight,
+            width: resolvedWidth,
+            borderRadius: 3,
+            // react-native-web renders backgroundImage at runtime; not in RN ViewStyle types
+            backgroundImage:
+              '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
         style={{
@@ -70,7 +73,9 @@ export function DeviationBar({
           borderRadius: 9999,
           borderWidth: 1.5,
           borderColor: greyRamp[50],
-          boxShadow: '0 0 4px rgba(0,0,0,0.5)',
+          // The dot is a knob resting on the track: one plane of lift. Its light
+          // ring is already the edge, so the lift contributes the shadow alone.
+          ...liftStyle(1, 'dark', { rim: 0 }),
           backgroundColor: getDotColor(clamped),
           left: Math.max(0, Math.min(dotPosition - dotSize / 2, resolvedWidth - dotSize)),
           top: (containerHeight - dotSize) / 2,