@titan-design/react-ui 0.12.0 → 0.13.0

package/src/theme/wash-ladder.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+import { semanticColorsDark, semanticColorsLight } from './tokens/semantic'
+
+/**
+ * Status and brand roles publish three wash rungs. They exist so a component can
+ * express a weight ramp without hand-mixing alpha: MesoProgressBar's segment
+ * track collapsed to one weight in three hues when only `-subtle` was available.
+ *
+ * A rung that drifts out of order silently flattens every consumer, and the
+ * consumer's own test cannot catch it — under the RNW vitest alias the rendered
+ * value is a `var(...)` reference, not an rgba triplet.
+ */
+const WASH_ROLES = [
+  'brand-primary',
+  'brand-secondary',
+  'status-success',
+  'status-error',
+  'status-error-vivid',
+  'status-warning',
+  'status-info',
+] as const
+
+const RUNGS = ['subtle', 'muted', 'strong'] as const
+
+function alphaOf(value: string): number {
+  const parts = value.match(/rgba?\(([^)]+)\)/)?.[1].split(',')
+  if (!parts) return 1 // a solid ramp pin is fully opaque
+  return parts.length === 4 ? Number(parts[3].trim()) : 1
+}
+
+describe('wash ladder', () => {
+  for (const [mode, palette] of [
+    ['dark', semanticColorsDark],
+    ['light', semanticColorsLight],
+  ] as const) {
+    describe(mode, () => {
+      for (const role of WASH_ROLES) {
+        it(`${role} publishes all three rungs`, () => {
+          for (const rung of RUNGS) {
+            expect(palette, `${role}-${rung} is missing`).toHaveProperty(`${role}-${rung}`)
+          }
+        })
+      }
+    })
+  }
+
+  // Light mode's `-subtle` is still a solid ramp tint rather than a wash, so its
+  // ladder is not comparable yet. AW-121 owns bringing light onto this model.
+  for (const role of WASH_ROLES) {
+    it(`${role} rungs ascend in weight (dark)`, () => {
+      const [subtle, muted, strong] = RUNGS.map((r) =>
+        alphaOf(semanticColorsDark[`${role}-${r}` as keyof typeof semanticColorsDark] as string)
+      )
+      expect(muted, `${role}-muted must outweigh -subtle`).toBeGreaterThan(subtle)
+      expect(strong, `${role}-strong must outweigh -muted`).toBeGreaterThan(muted)
+    })
+  }
+})

package/src/theme/workout-tokens.ts

@@ -48,13 +48,7 @@ export const WORKOUT_TOKENS = {
     over2: ramp.red[700],
     over3: ramp.red[800],
     targetLine: 'rgba(33, 150, 243, 0.5)',
-    atTargetGlow:
-      '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)',
-  },
-
-  // Placeholder strip
-  placeholder: {
-    fill: '#3A3A3A',
+    atTargetGlow: '0 0 5px 1px rgba(33, 150, 243, 0.35), 0 0 10px 3px rgba(33, 150, 243, 0.15)',
   },
 
   // Deviation bar

package/src/types/jest-axe.d.ts

@@ -5,12 +5,8 @@ declare module 'jest-axe' {
   ): Promise<{ violations: unknown[] }>
 
   export const toHaveNoViolations: {
-    toHaveNoViolations(
-      results: { violations: unknown[] }
-    ): { pass: boolean; message(): string }
+    toHaveNoViolations(results: { violations: unknown[] }): { pass: boolean; message(): string }
   }
 
-  export function configureAxe(
-    options?: Record<string, unknown>
-  ): typeof axe
+  export function configureAxe(options?: Record<string, unknown>): typeof axe
 }

package/src/types/raw-md.d.ts

@@ -0,0 +1,5 @@
+/** Vite's `?raw` suffix — imports a file's contents as a string. */
+declare module '*.md?raw' {
+  const content: string
+  export default content
+}

package/src/utils/colors.ts

@@ -1,8 +1,9 @@
 /**
- * Color utility functions for the design system
+ * Color utility functions for the design system.
  *
- * lighten/darken are re-exported from shadows.ts which uses HSV-based
- * color math for more perceptually consistent results across hues.
+ * `lighten`/`darken` are re-exported from `theme/color-utils`, which does the
+ * HSV math. They are hover/state adjustments, not a depth ladder — planes come
+ * from the grey ramp.
  */
 
 export { lighten, darken } from '../theme/color-utils'
@@ -137,4 +138,3 @@ export function getLuminance(color: string): 'light' | 'dark' {
 export function getContrastText(backgroundColor: string): string {
   return getLuminance(backgroundColor) === 'light' ? '#000000' : '#FFFFFF'
 }
-

package/src/utils/form.ts

@@ -160,9 +160,7 @@ export const validationRules = {
 /**
  * Compose multiple validation functions
  */
-export function composeValidators(
-  ...validators: Array<(value: any) => string | undefined>
-) {
+export function composeValidators(...validators: Array<(value: any) => string | undefined>) {
   return (value: any): string | undefined => {
     for (const validator of validators) {
       const error = validator(value)

package/src/utils/index.ts

@@ -1,4 +1,5 @@
 export { cn } from './cn'
+export { formatCompact, formatSignedCompact } from './number-format'
 export {
   getStatusColor,
   getResultColor,
@@ -20,13 +21,7 @@ export {
   validationRules,
   composeValidators,
 } from './form'
-export type {
-  FieldState,
-  FieldWrapperProps,
-  FormValues,
-  FormErrors,
-  FormTouched,
-} from './form'
+export type { FieldState, FieldWrapperProps, FormValues, FormErrors, FormTouched } from './form'
 export {
   roundRpe,
   rpeColor,

package/src/utils/number-format.ts

@@ -0,0 +1,17 @@
+/**
+ * Compact integer formatting for dense readouts (stat tiles, sparkline
+ * captions) where a full-precision number would blow the column width.
+ */
+
+/** 1234 → "1.2k", 1048576 → "1.0M", 42 → "42". Sign is preserved. */
+export function formatCompact(n: number): string {
+  const abs = Math.abs(n)
+  if (abs >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M'
+  if (abs >= 1_000) return (n / 1_000).toFixed(1) + 'k'
+  return String(n)
+}
+
+/** Like {@link formatCompact} but always signed: 514689 → "+514.7k", -20 → "-20". */
+export function formatSignedCompact(n: number): string {
+  return (n >= 0 ? '+' : '') + formatCompact(n)
+}

package/src/utils/workout-format.ts

@@ -52,6 +52,20 @@ export function formatSignedPct(ratio: number): string {
   return `${pct > 0 ? '+' : ''}${pct}%`
 }
 
+/**
+ * Rep-range label, e.g. `"8–10"`. `"8"` when the bounds are equal or only one is
+ * given; `null` when neither is set. Shared by {@link formatPrescription} and the
+ * set strip's per-set prescribed-range label so the two never drift apart.
+ */
+export function formatRepsRange(repsLow?: number, repsHigh?: number): string | null {
+  if (repsLow != null && repsHigh != null) {
+    return repsLow === repsHigh ? `${repsLow}` : `${repsLow}–${repsHigh}`
+  }
+  if (repsLow != null) return `${repsLow}`
+  if (repsHigh != null) return `${repsHigh}`
+  return null
+}
+
 /** Structured prescription for the active exercise (from the plan). */
 export interface PrescriptionInput {
   repsLow?: number
@@ -67,12 +81,7 @@ export interface PrescriptionInput {
  */
 export function formatPrescription(p: PrescriptionInput | null | undefined): string | null {
   if (p == null) return null
-  let reps: string | null = null
-  if (p.repsLow != null && p.repsHigh != null) {
-    reps = p.repsLow === p.repsHigh ? `${p.repsLow}` : `${p.repsLow}–${p.repsHigh}`
-  } else if (p.repsLow != null) {
-    reps = `${p.repsLow}`
-  }
+  const reps = formatRepsRange(p.repsLow, p.repsHigh)
   const weight = p.weightLbs != null ? `${p.weightLbs} lb` : null
   const head = [reps, weight].filter((s): s is string => s != null).join(' @ ')
   const rpe = p.rpe != null ? `RPE ${p.rpe}` : null

package/src/web-jsx/jsx-runtime.ts

@@ -10,11 +10,7 @@
  * native Metro). It is only inlined into the dist by tsup via
  * an esbuild onResolve plugin.
  */
-import {
-  jsx as reactJsx,
-  jsxs as reactJsxs,
-  Fragment,
-} from 'react/jsx-runtime'
+import { jsx as reactJsx, jsxs as reactJsxs, Fragment } from 'react/jsx-runtime'
 import type { StyleProp } from 'react-native'
 
 type JsxFn = typeof reactJsx

package/tailwind.config.js

@@ -183,6 +183,11 @@ module.exports = {
         mono: ['var(--font-family-mono)', 'monospace'],
       },
       fontSize: {
+        // Micro steps. `2xs` carries a paired line-height like the rest of the
+        // scale (Typography's microLabel needs it); `3xs` is bare because a pill
+        // capsule takes its height from padding, not from the label's leading.
+        '3xs': '0.5625rem',
+        '2xs': ['0.625rem', { lineHeight: '0.875rem' }],
         xs: ['0.75rem', { lineHeight: '1rem' }],
         sm: ['0.875rem', { lineHeight: '1.25rem' }],
         base: ['1rem', { lineHeight: '1.5rem' }],

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

@@ -1,151 +0,0 @@
-/**
- * SHEET · Unified exercise card (page 2) — the LOCKED rail-expansion, hardened onto the
- * REAL {@link ExerciseCard}. The collapsed rail item and the expanded card are ONE object: the
- * persistent header is the real {@link ExerciseCardHeading}, and expanding reveals the body on the
- * SAME surface — PREV dropped, done + upcoming sets share ONE muted treatment, the ACTIVE set
- * stands out by brightness. Every per-row strip is the REAL {@link VelocityStrip} via its `set`
- * descriptor: `mini` (flat 3px) for done/upcoming, and the `compact` velocity-height variant as
- * the active-set SPOTLIGHT (option B, locked). No hand-built prototype strip remains.
- */
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
-import { ExerciseCard } from './ExerciseCard'
-import { ExerciseCardHeading } from './ExerciseCardHeading'
-import { VelocityStrip } from './VelocityStrip'
-import { type SetRowProps } from './SetRow'
-import { type SetStripSet } from './SetStrip'
-import { INSET, BORDER_SUBTLE, T_PRIMARY, T_SECONDARY, Page, monoTag } from './setHeadingKit'
-
-const INTER = 'Inter, sans-serif'
-
-/** Per-rep mean velocity that DECAYS across a set (fast → slow). */
-const decay = (n: number, start: number, span = 0.5) =>
-  Array.from({ length: n }, (_, r) => +(start - (span * r) / Math.max(1, n - 1)).toFixed(3))
-
-// The exercise: a flat straight set (Cable Chest Press, 3 × 10 @ 90 lb).
-const DONE = decay(10, 1.05)
-const ACTIVE = decay(5, 0.95, 0.3)
-
-// One data source drives both representations. Set 1 done · set 2 LIVE · set 3 upcoming.
-const SETS: SetRowProps[] = [
-  { state: 'done', setNumber: 1, unit: 'lbs', reps: 10, weight: 90, rpe: 7.5, velocities: DONE },
-  {
-    state: 'live',
-    setNumber: 2,
-    unit: 'lbs',
-    target: { reps: 10, weight: 90 },
-    reps: 5,
-    weight: 90,
-    velocities: ACTIVE,
-  },
-  { state: 'todo', setNumber: 3, unit: 'lbs', target: { reps: 10, weight: 90 } },
-]
-
-// The header's per-set strip: the same lifecycle the card derives internally, built here
-// so the collapsed rail item (ExerciseCardHeading) reads from the same source as the body.
-const HEADER_STATES: SetStripSet[] = [
-  { status: 'done', velocities: DONE },
-  { status: 'active', velocities: ACTIVE, planned: 10 },
-  { status: 'todo', planned: 10 },
-]
-
-const CARD_PROPS = {
-  name: 'Cable Chest Press',
-  summary: { sets: 3, reps: 10, weight: 90, unit: 'lbs' as const },
-  tempo: [2, 1, 2, 0] as [number, number, number, number],
-  indicator: 'info' as const,
-  sets: SETS,
-}
-
-function Surface({ children, width = 260 }: { children: React.ReactNode; width?: number }) {
-  return (
-    <View style={{ width, backgroundColor: INSET, borderRadius: 8, overflow: 'hidden' }}>
-      {children}
-    </View>
-  )
-}
-
-const meta: Meta = {
-  title: 'Lab/Explorations/Unified Exercise Card',
-  parameters: { layout: 'fullscreen' },
-}
-export default meta
-type Story = StoryObj
-
-export const Unified: Story = {
-  name: 'One object · rail header → expanded body (real ExerciseCard)',
-  render: () => (
-    <Page
-      title="Unified exercise card — the rail heading IS the header"
-      note="The LOCKED rail-expansion, hardened onto the real ExerciseCard. Collapsed, it's the rail item (the real ExerciseCardHeading); expanded, the SAME surface reveals the table body — PREV dropped, done + upcoming sets share ONE muted treatment, the ACTIVE set stands out by brightness. Every per-row strip is the real VelocityStrip: `mini` for done/upcoming, the `compact` velocity-height variant as the active-set spotlight (B, locked). No hand-built prototype strip remains."
-    >
-      <View style={{ flexDirection: 'row', gap: 40, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-        <View style={{ gap: 8 }}>
-          <Text style={{ ...monoTag, color: T_SECONDARY }}>
-            collapsed · rail item (ExerciseCardHeading)
-          </Text>
-          <Surface>
-            <ExerciseCardHeading
-              name={CARD_PROPS.name}
-              sets={3}
-              reps={10}
-              load={90}
-              unit="lbs"
-              tempo={CARD_PROPS.tempo}
-              indicator={CARD_PROPS.indicator}
-              setStates={HEADER_STATES}
-            />
-          </Surface>
-        </View>
-
-        <View style={{ gap: 8 }}>
-          <Text style={{ ...monoTag, color: T_SECONDARY }}>
-            expanded · same header + revealed body
-          </Text>
-          <Surface>
-            <ExerciseCard {...CARD_PROPS} defaultExpanded />
-          </Surface>
-        </View>
-      </View>
-
-      <View style={{ height: 1, backgroundColor: BORDER_SUBTLE, marginVertical: 8 }} />
-
-      <View style={{ gap: 10, maxWidth: 320 }}>
-        <Text style={{ ...monoTag, color: T_SECONDARY }}>
-          the locked active-set spotlight · VelocityStrip variant=&quot;expanded&quot; (bare)
-        </Text>
-        <View style={{ backgroundColor: INSET, borderRadius: 8, padding: 12 }}>
-          <VelocityStrip
-            variant="expanded"
-            showNumbers={false}
-            showInfo={false}
-            height={24}
-            scale="fixed"
-            set={{ type: 'straight', velocities: ACTIVE, planned: 10 }}
-          />
-        </View>
-        <Text style={{ fontFamily: INTER, fontSize: 12.5, color: T_SECONDARY, lineHeight: 19 }}>
-          A small fixed-height (~24px) velocity-HEIGHT strip: bar height ∝ velocity against a fixed
-          1.15 m/s ceiling, planned reps as grey stubs, set-type aware — none of the full
-          variant&apos;s labels, info row, or mount animation. It reads as the same object as the
-          flat `mini` strips above it, just taller and brighter to mark the live set.
-        </Text>
-      </View>
-
-      <Text
-        style={{
-          fontFamily: INTER,
-          fontSize: 12.5,
-          color: T_PRIMARY,
-          lineHeight: 19,
-          maxWidth: 780,
-          marginTop: 6,
-        }}
-      >
-        The header is the same molecule collapsed and expanded — the card reads as one object, the
-        body flowing out of the rail row rather than a separate panel. The expanded card is the real
-        ExerciseCard; its header per-set strip is derived from the same rows the body renders.
-      </Text>
-    </Page>
-  ),
-}