@titan-design/react-ui 0.13.0 → 0.14.0

package/src/arch/arch-graph.json

@@ -1,6 +1,6 @@
 {
   "schema": 1,
-  "componentBarrelHash": "sha256:f79da78718437072ff8b9a1cb578dd3cf670e4a9a4d6324b86f1061032c13548",
+  "componentBarrelHash": "sha256:dce43a7ab61690b039e84fc8569e9f7f8a62a40de91a6da5001abbf0ed8a51ba",
   "components": [
     {
       "name": "ActiveWorkoutPage",
@@ -281,7 +281,7 @@
         "rawText": 0,
         "inlineStyle": 2,
         "rawHex": 0,
-        "loc": 117,
+        "loc": 118,
         "score": 6
       },
       "tier": "atom",
@@ -319,7 +319,7 @@
         "rawText": 3,
         "inlineStyle": 8,
         "rawHex": 0,
-        "loc": 352,
+        "loc": 354,
         "score": 23
       },
       "tier": "atom",
@@ -359,7 +359,7 @@
         "rawText": 15,
         "inlineStyle": 36,
         "rawHex": 1,
-        "loc": 514,
+        "loc": 515,
         "score": 103
       },
       "tier": "organism",
@@ -556,7 +556,7 @@
         "rawText": 4,
         "inlineStyle": 12,
         "rawHex": 1,
-        "loc": 527,
+        "loc": 528,
         "score": 38
       },
       "tier": "atom",
@@ -912,7 +912,7 @@
         "rawText": 0,
         "inlineStyle": 2,
         "rawHex": 0,
-        "loc": 88,
+        "loc": 91,
         "score": 7
       },
       "tier": "atom",
@@ -1201,9 +1201,10 @@
         "ExerciseCardProps",
         "getSupersetBorderRadius",
         "getSupersetMargin",
-        "formatSummary",
-        "formatAccessibilityLabel",
-        "onToggle"
+        "supersetChrome",
+        "deriveCollapsedSetStates",
+        "CollapsedCard",
+        "deriveHeaderSetStates"
       ],
       "libDependents": 7,
       "storyRefs": 7,
@@ -1217,21 +1218,18 @@
       "dependsOn": [
         "ExerciseCardHeading",
         "ExerciseIndicator",
-        "PlaceholderStrip",
-        "PrBadge",
         "SetBar",
         "SetRow",
         "SetTableHeader",
-        "Typography",
         "VelocityStrip"
       ],
       "leak": {
-        "rawView": 11,
+        "rawView": 3,
         "rawText": 0,
-        "inlineStyle": 7,
+        "inlineStyle": 2,
         "rawHex": 0,
-        "loc": 403,
-        "score": 25
+        "loc": 328,
+        "score": 7
       },
       "tier": "organism",
       "verdict": "keep-core",
@@ -1246,7 +1244,11 @@
       "family": "custom/Workout",
       "exports": [
         "ExerciseCardHeading",
-        "ExerciseCardHeadingProps"
+        "ExerciseRowDensity",
+        "ExerciseCardHeadingProps",
+        "useRowInteraction",
+        "rowWash",
+        "prescriptionProps"
       ],
       "libDependents": 2,
       "storyRefs": 3,
@@ -1260,15 +1262,16 @@
       "dependsOn": [
         "ExerciseHeading",
         "SetBar",
-        "SetStrip"
+        "SetStrip",
+        "Tooltip"
       ],
       "leak": {
-        "rawView": 2,
+        "rawView": 1,
         "rawText": 0,
-        "inlineStyle": 2,
+        "inlineStyle": 1,
         "rawHex": 0,
-        "loc": 44,
-        "score": 6
+        "loc": 187,
+        "score": 3
       },
       "tier": "organism",
       "verdict": "keep-core",
@@ -1319,7 +1322,7 @@
         "rawText": 13,
         "inlineStyle": 32,
         "rawHex": 0,
-        "loc": 644,
+        "loc": 645,
         "score": 95
       },
       "tier": "page",
@@ -1334,9 +1337,12 @@
       "dir": "workout",
       "family": "custom/Workout",
       "exports": [
+        "exerciseHeadingLabel",
         "ExerciseHeading",
+        "ExerciseHeadingLayout",
         "ExerciseHeadingProps",
-        "headingLabel"
+        "prescriptionText",
+        "pressProps"
       ],
       "libDependents": 1,
       "storyRefs": 1,
@@ -1354,12 +1360,12 @@
         "Typography"
       ],
       "leak": {
-        "rawView": 4,
+        "rawView": 6,
         "rawText": 0,
-        "inlineStyle": 3,
+        "inlineStyle": 5,
         "rawHex": 0,
-        "loc": 91,
-        "score": 10
+        "loc": 222,
+        "score": 16
       },
       "tier": "organism",
       "verdict": "keep-internal",
@@ -1755,7 +1761,7 @@
         "rawText": 3,
         "inlineStyle": 4,
         "rawHex": 0,
-        "loc": 174,
+        "loc": 176,
         "score": 15
       },
       "tier": "atom",
@@ -2299,7 +2305,7 @@
         "rawText": 2,
         "inlineStyle": 5,
         "rawHex": 2,
-        "loc": 224,
+        "loc": 225,
         "score": 18
       },
       "tier": "atom",
@@ -2624,7 +2630,7 @@
         "rawText": 2,
         "inlineStyle": 9,
         "rawHex": 0,
-        "loc": 244,
+        "loc": 245,
         "score": 28
       },
       "tier": "organism",
@@ -2707,7 +2713,7 @@
         "rawText": 11,
         "inlineStyle": 24,
         "rawHex": 0,
-        "loc": 452,
+        "loc": 453,
         "score": 76
       },
       "tier": "organism",
@@ -3034,7 +3040,7 @@
         "PlaceholderStripProps",
         "SingleStrip"
       ],
-      "libDependents": 3,
+      "libDependents": 2,
       "storyRefs": 2,
       "xproj": {
         "mobile": 0,
@@ -3153,7 +3159,7 @@
         "PRType",
         "PrBadgeProps"
       ],
-      "libDependents": 3,
+      "libDependents": 2,
       "storyRefs": 2,
       "xproj": {
         "mobile": 0,
@@ -3392,7 +3398,7 @@
         "rawText": 7,
         "inlineStyle": 14,
         "rawHex": 1,
-        "loc": 287,
+        "loc": 288,
         "score": 43
       },
       "tier": "organism",
@@ -3427,7 +3433,7 @@
         "rawText": 6,
         "inlineStyle": 15,
         "rawHex": 0,
-        "loc": 280,
+        "loc": 282,
         "score": 43
       },
       "tier": "organism",
@@ -3504,7 +3510,7 @@
         "rawText": 5,
         "inlineStyle": 14,
         "rawHex": 1,
-        "loc": 361,
+        "loc": 363,
         "score": 42
       },
       "tier": "atom",
@@ -3614,7 +3620,7 @@
         "rawText": 0,
         "inlineStyle": 3,
         "rawHex": 0,
-        "loc": 177,
+        "loc": 178,
         "score": 10
       },
       "tier": "atom",
@@ -3985,7 +3991,7 @@
         "rawText": 0,
         "inlineStyle": 1,
         "rawHex": 0,
-        "loc": 189,
+        "loc": 198,
         "score": 2
       },
       "tier": "molecule",
@@ -4002,6 +4008,8 @@
       "exports": [
         "scaleDenominator",
         "valueLabelFontSize",
+        "estimateValueLabelWidth",
+        "shouldFlipEdgeLabel",
         "computeBarLayout",
         "SetBarChart",
         "sideLabelFontSize",
@@ -4012,6 +4020,7 @@
         "SetSlot",
         "SetBarGeometry",
         "SetBarChartProps",
+        "FIXED_MAX_VALUE",
         "PEAK_HEADROOM",
         "SET_BAR_DEFAULT_HEIGHT",
         "GAP_RATIO",
@@ -4030,7 +4039,7 @@
         "showBarLabel"
       ],
       "libDependents": 2,
-      "storyRefs": 0,
+      "storyRefs": 1,
       "xproj": {
         "mobile": 0,
         "mcp": 0,
@@ -4044,7 +4053,7 @@
         "rawText": 2,
         "inlineStyle": 8,
         "rawHex": 0,
-        "loc": 652,
+        "loc": 699,
         "score": 29
       },
       "tier": "atom",
@@ -4204,7 +4213,8 @@
         "SetStrip",
         "SetStripProps",
         "setCategory",
-        "describeSets"
+        "describeSets",
+        "repsRangeLabel"
       ],
       "libDependents": 1,
       "storyRefs": 1,
@@ -4219,12 +4229,12 @@
         "SetBar"
       ],
       "leak": {
-        "rawView": 1,
-        "rawText": 0,
-        "inlineStyle": 1,
+        "rawView": 2,
+        "rawText": 1,
+        "inlineStyle": 3,
         "rawHex": 0,
-        "loc": 72,
-        "score": 3
+        "loc": 92,
+        "score": 9
       },
       "tier": "organism",
       "verdict": "keep-core",
@@ -4729,7 +4739,7 @@
         "rawText": 12,
         "inlineStyle": 33,
         "rawHex": 0,
-        "loc": 631,
+        "loc": 633,
         "score": 98
       },
       "tier": "atom",
@@ -5262,7 +5272,7 @@
         "rawText": 1,
         "inlineStyle": 0,
         "rawHex": 2,
-        "loc": 305,
+        "loc": 304,
         "score": 6
       },
       "tier": "molecule",
@@ -5285,7 +5295,7 @@
         "show",
         "hide"
       ],
-      "libDependents": 8,
+      "libDependents": 9,
       "storyRefs": 1,
       "xproj": {
         "mobile": 0,
@@ -5489,7 +5499,7 @@
         "LabelProps",
         "OverlineProps"
       ],
-      "libDependents": 41,
+      "libDependents": 40,
       "storyRefs": 9,
       "xproj": {
         "mobile": 0,
@@ -5659,7 +5669,7 @@
         "rawText": 4,
         "inlineStyle": 15,
         "rawHex": 0,
-        "loc": 1469,
+        "loc": 1481,
         "score": 50
       },
       "tier": "molecule",
@@ -6508,14 +6518,6 @@
       "ExerciseCard",
       "VelocityStrip"
     ],
-    [
-      "ExerciseCard",
-      "PlaceholderStrip"
-    ],
-    [
-      "ExerciseCard",
-      "PrBadge"
-    ],
     [
       "ExerciseCard",
       "SetRow"
@@ -6537,8 +6539,8 @@
       "ExerciseIndicator"
     ],
     [
-      "ExerciseCard",
-      "Typography"
+      "ExerciseCardHeading",
+      "Tooltip"
     ],
     [
       "ExerciseCardHeading",
@@ -7487,7 +7489,7 @@
         "rawText": 15,
         "inlineStyle": 36,
         "rawHex": 1,
-        "loc": 514,
+        "loc": 515,
         "score": 103
       },
       {
@@ -7497,7 +7499,7 @@
         "rawText": 12,
         "inlineStyle": 33,
         "rawHex": 0,
-        "loc": 631,
+        "loc": 633,
         "score": 98
       },
       {
@@ -7507,7 +7509,7 @@
         "rawText": 13,
         "inlineStyle": 32,
         "rawHex": 0,
-        "loc": 644,
+        "loc": 645,
         "score": 95
       },
       {
@@ -7517,7 +7519,7 @@
         "rawText": 11,
         "inlineStyle": 24,
         "rawHex": 0,
-        "loc": 452,
+        "loc": 453,
         "score": 76
       },
       {
@@ -7537,7 +7539,7 @@
         "rawText": 4,
         "inlineStyle": 15,
         "rawHex": 0,
-        "loc": 1469,
+        "loc": 1481,
         "score": 50
       },
       {
@@ -7567,7 +7569,7 @@
         "rawText": 7,
         "inlineStyle": 14,
         "rawHex": 1,
-        "loc": 287,
+        "loc": 288,
         "score": 43
       },
       {
@@ -7577,7 +7579,7 @@
         "rawText": 6,
         "inlineStyle": 15,
         "rawHex": 0,
-        "loc": 280,
+        "loc": 282,
         "score": 43
       },
       {
@@ -7587,7 +7589,7 @@
         "rawText": 5,
         "inlineStyle": 14,
         "rawHex": 1,
-        "loc": 361,
+        "loc": 363,
         "score": 42
       },
       {
@@ -7617,7 +7619,7 @@
         "rawText": 4,
         "inlineStyle": 12,
         "rawHex": 1,
-        "loc": 527,
+        "loc": 528,
         "score": 38
       },
       {
@@ -7633,7 +7635,7 @@
     ],
     "substitution": {
       "library(titan)": {
-        "Text": 68,
+        "Text": 69,
         "View": 126,
         "TouchableOpacity": 0,
         "Pressable": 54,

package/src/components/custom/ActiveWork/InitiativeBrief.tsx

@@ -79,9 +79,10 @@ function StepButton({
         disabled ? '' : 'web:hover:bg-interactive-hover active:bg-interactive-active'
       )}
     >
+      {/* Was a tertiary text token under an opacity modifier, which emitted no rule (VW-308). */}
       <Typography
         variant="body2"
-        className={cn('leading-none', disabled ? 'text-text-tertiary/40' : 'text-text-secondary')}
+        className={cn('leading-none', disabled ? 'text-text-disabled' : 'text-text-secondary')}
       >
         {glyph}
       </Typography>

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

@@ -1,6 +1,11 @@
 import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { View, Text, Pressable } from 'react-native'
 import { CircularTimer } from './CircularTimer'
+import { greyRamp, primitiveColors } from '../../../theme/tokens/primitives'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { alpha } from '../../../utils/colors'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof CircularTimer> = {
   title: 'Components/Molecules/CircularTimer',
@@ -32,7 +37,7 @@ export default meta
 type Story = StoryObj<typeof CircularTimer>
 
 const dark: Decorator = (Story) => (
-  <View style={{ padding: 32, alignItems: 'center', backgroundColor: '#0E0E0E' }}>
+  <View style={{ padding: 32, alignItems: 'center', backgroundColor: t['background-frame'] }}>
     <Story />
   </View>
 )
@@ -64,13 +69,13 @@ export const DoneWithLabel: Story = {
 const DemoButton = ({ label }: { label: string }) => (
   <Pressable
     style={{
-      backgroundColor: 'rgba(255,255,255,0.06)',
+      backgroundColor: alpha(primitiveColors.white, 0.06),
       paddingVertical: 8,
       paddingHorizontal: 20,
       borderRadius: 8,
     }}
   >
-    <Text style={{ color: '#DADADA', fontSize: 11, fontWeight: '600' }}>{label}</Text>
+    <Text style={{ color: greyRamp[200], fontSize: 11, fontWeight: '600' }}>{label}</Text>
   </Pressable>
 )
 

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

@@ -91,7 +91,7 @@ export const WithIcon: Story = {
 function ActionButton() {
   return (
     <View className="bg-brand-primary px-4 py-2 rounded-md">
-      <Text className="text-white font-semibold text-sm">Create New</Text>
+      <Text className="text-on-brand-primary font-semibold text-sm">Create New</Text>
     </View>
   )
 }

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

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Gauge } from './Gauge'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof Gauge> = {
   title: 'Custom/Charts/Gauge',
@@ -32,7 +35,7 @@ export const ArbitraryDomain: Story = {
 
 /** Single-color override ignores the threshold bands. */
 export const OverrideColor: Story = {
-  args: { value: 55, unit: '%', label: 'Coverage', color: '#5B9BD5', size: 180 },
+  args: { value: 55, unit: '%', label: 'Coverage', color: t['data-7'], size: 180 },
 }
 
 /** Value above max is clamped for the fill but shown verbatim. */

package/src/components/custom/Gauge/Gauge.tsx

@@ -1,6 +1,8 @@
 import { View, Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 
 const sem = getSemanticColors('dark')
 
@@ -36,7 +38,7 @@ export interface GaugeProps extends Omit<ViewProps, 'children'> {
 const STATUS_SUCCESS = sem['status-success']
 const STATUS_WARNING = sem['status-warning']
 const STATUS_ERROR = sem['status-error']
-const TRACK = 'rgba(255,255,255,0.08)'
+const TRACK = alpha(primitiveColors.white, 0.08)
 
 /** Titan status-token bands for a 0–100 score. */
 const DEFAULT_THRESHOLDS: GaugeThreshold[] = [

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

@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Scatter, type ScatterDatum } from './Scatter'
+import { getSemanticColors } from '../../../theme/tokens/semantic'
+
+const t = getSemanticColors('dark')
 
 const meta: Meta<typeof Scatter> = {
   title: 'Custom/Charts/Scatter',
@@ -16,12 +19,12 @@ type Story = StoryObj<typeof Scatter>
 
 /** Modules on the instability × abstractness "main sequence". */
 const mainSequence: ScatterDatum[] = [
-  { id: 'core', x: 0.08, y: 0.85, r: 10, color: '#14B8A6', label: 'core' },
-  { id: 'domain', x: 0.22, y: 0.7, r: 8, color: '#14B8A6', label: 'domain' },
-  { id: 'services', x: 0.45, y: 0.4, r: 12, color: '#5B9BD5', label: 'services' },
-  { id: 'api', x: 0.6, y: 0.35, r: 7, color: '#5B9BD5', label: 'api' },
-  { id: 'cli', x: 0.9, y: 0.08, r: 9, color: '#F4A736', label: 'cli' },
-  { id: 'utils', x: 0.85, y: 0.75, r: 6, color: '#F83030', label: 'utils (pain?)' },
+  { id: 'core', x: 0.08, y: 0.85, r: 10, color: t['data-1'], label: 'core' },
+  { id: 'domain', x: 0.22, y: 0.7, r: 8, color: t['data-1'], label: 'domain' },
+  { id: 'services', x: 0.45, y: 0.4, r: 12, color: t['data-7'], label: 'services' },
+  { id: 'api', x: 0.6, y: 0.35, r: 7, color: t['data-7'], label: 'api' },
+  { id: 'cli', x: 0.9, y: 0.08, r: 9, color: t['data-6'], label: 'cli' },
+  { id: 'utils', x: 0.85, y: 0.75, r: 6, color: t['data-4'], label: 'utils (pain?)' },
 ]
 
 export const Default: Story = {
@@ -90,7 +93,7 @@ export const Outlier: Story = {
   args: {
     data: [
       ...mainSequence,
-      { id: 'legacy', x: 0.98, y: 0.98, r: 16, color: '#F83030', label: 'legacy.ts' },
+      { id: 'legacy', x: 0.98, y: 0.98, r: 16, color: t['data-4'], label: 'legacy.ts' },
     ],
     width: 480,
     height: 340,

package/src/components/custom/Scatter/Scatter.tsx

@@ -1,6 +1,8 @@
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { DATAVIZ_CATEGORICAL_PALETTE } from '../../../theme/extracted-colors-dataviz'
+import { primitiveColors } from '../../../theme/tokens/primitives'
+import { alpha } from '../../../utils/colors'
 
 export interface ScatterDatum {
   /** Stable identity — returned by onPress and used as the React key. */
@@ -49,9 +51,9 @@ export interface ScatterProps extends Omit<ViewProps, 'children'> {
 /** Titan categorical fallback palette (see extracted-colors-dataviz). */
 const PALETTE = DATAVIZ_CATEGORICAL_PALETTE
 
-const GRID_LINE = 'rgba(255,255,255,0.07)'
-const AXIS_LINE = 'rgba(255,255,255,0.18)'
-const DIAGONAL_LINE = 'rgba(255,255,255,0.28)'
+const GRID_LINE = alpha(primitiveColors.white, 0.07)
+const AXIS_LINE = alpha(primitiveColors.white, 0.18)
+const DIAGONAL_LINE = alpha(primitiveColors.white, 0.28)
 const DEFAULT_R = 6
 
 const PLOT_LEFT = 40
@@ -334,7 +336,7 @@ export function Scatter({
                 backgroundColor: p.color,
                 opacity: selected ? 1 : 0.82,
                 borderWidth: selected ? 2 : 0,
-                borderColor: '#ffffff',
+                borderColor: primitiveColors.white,
               }}
             >
               {showLabel && (

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

@@ -220,7 +220,7 @@ export const WithBadge: Story = {
             label="Messages"
             badge={
               <View className="bg-status-error rounded-full px-1.5 py-0.5">
-                <Text className="text-white text-xs font-bold">5</Text>
+                <Text className="text-on-status-error text-xs font-bold">5</Text>
               </View>
             }
           />

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

@@ -91,7 +91,7 @@ export const Default: Story = {
               <View
                 className={cn(
                   'px-2 py-0.5 rounded-full self-start',
-                  user.status === 'Active' ? 'bg-status-success/20' : 'bg-status-warning/20'
+                  user.status === 'Active' ? 'bg-status-success-subtle' : 'bg-status-warning-subtle'
                 )}
               >
                 <Text

package/src/components/custom/Table/Table.tsx

@@ -690,7 +690,7 @@ export function TableSelectAllCell({ className }: TableSelectAllCellProps) {
         )}
       >
         {(allSelected || someSelected) && (
-          <Text className="text-white text-xs font-bold">{allSelected ? '✓' : '−'}</Text>
+          <Text className="text-on-brand-primary text-xs font-bold">{allSelected ? '✓' : '−'}</Text>
         )}
       </Pressable>
     </View>
@@ -726,7 +726,7 @@ export function TableSelectCell({ rowId, className }: TableSelectCellProps) {
             : 'border-hairline-strong bg-transparent web:hover:border-brand-primary'
         )}
       >
-        {isSelected && <Text className="text-white text-xs font-bold">✓</Text>}
+        {isSelected && <Text className="text-on-brand-primary text-xs font-bold">✓</Text>}
       </Pressable>
     </View>
   )