@titan-design/react-ui 0.1.1 → 0.2.5

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

@@ -0,0 +1,130 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { View, Text } from 'react-native'
+import { SupersetWrapper } from './SupersetWrapper'
+
+describe('SupersetWrapper', () => {
+  describe('label', () => {
+    it('renders default label "SS"', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByTestId('superset-label')).toHaveTextContent('SS')
+    })
+
+    it('renders custom label', () => {
+      render(
+        <SupersetWrapper label="A1/A2">
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByTestId('superset-label')).toHaveTextContent('A1/A2')
+    })
+  })
+
+  describe('color', () => {
+    it('applies default color #FF7900 to border and label background', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      const wrapper = screen.getByTestId('superset-wrapper')
+      expect(wrapper).toHaveStyle({ borderLeftColor: '#FF7900' })
+
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ backgroundColor: '#FF7900' })
+    })
+
+    it('applies custom color to border and label background', () => {
+      render(
+        <SupersetWrapper color="#22C55E">
+          <View />
+        </SupersetWrapper>,
+      )
+      const wrapper = screen.getByTestId('superset-wrapper')
+      expect(wrapper).toHaveStyle({ borderLeftColor: '#22C55E' })
+
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ backgroundColor: '#22C55E' })
+    })
+  })
+
+  describe('children', () => {
+    it('renders children', () => {
+      render(
+        <SupersetWrapper>
+          <Text testID="child-1">Exercise A</Text>
+          <Text testID="child-2">Exercise B</Text>
+        </SupersetWrapper>,
+      )
+      expect(screen.getByTestId('child-1')).toHaveTextContent('Exercise A')
+      expect(screen.getByTestId('child-2')).toHaveTextContent('Exercise B')
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has group role', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByRole('group')).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label with default label', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByLabelText('Superset: SS')).toBeInTheDocument()
+    })
+
+    it('has correct accessibility label with custom label', () => {
+      render(
+        <SupersetWrapper label="A1/A2">
+          <View />
+        </SupersetWrapper>,
+      )
+      expect(screen.getByLabelText('Superset: A1/A2')).toBeInTheDocument()
+    })
+
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <SupersetWrapper>
+          <Text>Exercise A</Text>
+          <Text>Exercise B</Text>
+        </SupersetWrapper>,
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  describe('label positioning', () => {
+    it('positions label absolutely', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ position: 'absolute' })
+    })
+
+    it('positions label at top -1 and left -3', () => {
+      render(
+        <SupersetWrapper>
+          <View />
+        </SupersetWrapper>,
+      )
+      const label = screen.getByTestId('superset-label')
+      expect(label).toHaveStyle({ top: '-1px', left: '-3px' })
+    })
+  })
+})

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

@@ -0,0 +1,63 @@
+// Font mapping: font-heading=Space Grotesk, font-body=Nunito Sans (UI), font-sans=Inter (body)
+import React from 'react'
+import { View, Text } from 'react-native'
+
+export interface SupersetWrapperProps {
+  label?: string
+  color?: string
+  children: React.ReactNode
+  syncExpansion?: boolean
+}
+
+const DEFAULTS = {
+  label: 'SS',
+  color: '#FF7900',
+  bgBase: '#101010',
+} as const
+
+export function SupersetWrapper({
+  label = DEFAULTS.label,
+  color = DEFAULTS.color,
+  children,
+}: SupersetWrapperProps) {
+  return (
+    <View
+      style={{
+        position: 'relative',
+        borderLeftWidth: 3,
+        borderLeftColor: color,
+        paddingLeft: 8,
+        marginHorizontal: 12,
+        marginBottom: 8,
+        overflow: 'visible',
+      }}
+      accessibilityRole={"group" as any}
+      accessibilityLabel={`Superset: ${label}`}
+      testID="superset-wrapper"
+    >
+      <Text
+        style={{
+          position: 'absolute',
+          top: -1,
+          left: -3,
+          fontSize: 9,
+          fontFamily: 'Inter, sans-serif',
+          fontWeight: '700',
+          backgroundColor: color,
+          color: DEFAULTS.bgBase,
+          paddingVertical: 2,
+          paddingHorizontal: 6,
+          borderBottomRightRadius: 4,
+          letterSpacing: 0.5,
+          zIndex: 2,
+        }}
+        testID="superset-label"
+      >
+        {label}
+      </Text>
+      <View style={{ gap: 2 }} testID="superset-children">
+        {children}
+      </View>
+    </View>
+  )
+}

package/src/components/custom/Workout/index.ts

@@ -0,0 +1,2 @@
+export { RestTimer, type RestTimerProps } from './RestTimer'
+export { SupersetWrapper, type SupersetWrapperProps } from './SupersetWrapper'

package/src/components/custom/index.ts

@@ -6,3 +6,4 @@ export * from './EmptyState'
 export * from './stepper'
 export * from './DateTime'
 export * from './Metric'
+export * from './Workout'

package/src/components/custom/stepper/index.ts

@@ -1,7 +1,7 @@
-export { Stepper, Step, StepIndicator, StepLabel, StepContent } from './Stepper'
+export { Stepper, Step as StepperStep, StepIndicator, StepLabel, StepContent } from './Stepper'
 export type {
   StepperProps,
-  StepProps,
+  StepProps as StepperStepProps,
   StepIndicatorProps,
   StepLabelProps,
   StepContentProps,

package/src/components/ui/avatar/Avatar.test.tsx

@@ -54,6 +54,23 @@ describe('Avatar', () => {
     expect(screen.getByRole('img')).toBeInTheDocument()
   })
 
+  describe('colorFromName', () => {
+    it('renders initials from colorFromName', () => {
+      render(<Avatar colorFromName="John Doe" />)
+      expect(screen.getByText('JD')).toBeInTheDocument()
+    })
+
+    it('generates deterministic color from name', () => {
+      const { container } = render(<Avatar colorFromName="Alice" />)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('colorFromName fallback is overridden by explicit fallback', () => {
+      render(<Avatar colorFromName="John Doe" fallback="XX" />)
+      expect(screen.getByText('XX')).toBeInTheDocument()
+    })
+  })
+
   describe('AvatarBadge', () => {
     it('renders with default success color', () => {
       const { container } = render(<AvatarBadge />)

package/src/components/ui/avatar/Avatar.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, Image, type ViewProps, type ImageSourcePropType } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { avatarColor, getInitials } from '../../../utils/avatar-color'
 
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
 
@@ -13,6 +14,8 @@ export interface AvatarProps extends ViewProps {
   fallback?: string
   /** Alt text for accessibility */
   alt?: string
+  /** Generate background color and initials from a name */
+  colorFromName?: string
   /** Additional className */
   className?: string
 }
@@ -48,22 +51,27 @@ export function Avatar({
   source,
   fallback,
   alt,
+  colorFromName,
   className,
   ...props
 }: AvatarProps) {
   const styles = sizeStyles[size]
   const hasImage = source !== undefined
 
+  const resolvedFallback = fallback ?? (colorFromName ? getInitials(colorFromName) : undefined)
+  const nameColor = colorFromName ? avatarColor(colorFromName) : undefined
+
   return (
     <View
       accessibilityRole="image"
-      accessibilityLabel={alt || fallback || 'Avatar'}
+      accessibilityLabel={alt || resolvedFallback || 'Avatar'}
       className={cn(
         'items-center justify-center rounded-full overflow-hidden',
-        'bg-border-strong',
+        !nameColor && 'bg-border-strong',
         styles.container,
         className
       )}
+      style={nameColor ? { backgroundColor: nameColor } : undefined}
       {...props}
     >
       {hasImage ? (
@@ -72,9 +80,9 @@ export function Avatar({
           className={cn('rounded-full', styles.image)}
           accessibilityLabel={alt}
         />
-      ) : fallback ? (
-        <Text className={cn('font-semibold text-text-primary', styles.text)}>
-          {fallback}
+      ) : resolvedFallback ? (
+        <Text className={cn('font-semibold text-text-inverse', styles.text)}>
+          {resolvedFallback}
         </Text>
       ) : (
         <View className="w-full h-full bg-surface-raised" />

package/src/components/ui/badge/Badge.test.tsx

@@ -72,6 +72,23 @@ describe('Badge', () => {
     })
   })
 
+  describe('dot indicator', () => {
+    it('renders dot when dot prop is true', () => {
+      const { container } = render(<Badge dot color="success">Active</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders dot with explicit dotColor', () => {
+      const { container } = render(<Badge dot dotColor="warning">Pending</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('does not render dot by default', () => {
+      const { container } = render(<Badge>No dot</Badge>)
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
       const { container } = render(

package/src/components/ui/badge/Badge.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Indicator, type IndicatorColor } from '../indicator'
 
 export type BadgeVariant = 'solid' | 'subtle' | 'outline'
 export type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
@@ -13,6 +14,10 @@ export interface BadgeProps extends ViewProps {
   color?: BadgeColor
   /** Size */
   size?: BadgeSize
+  /** Show a leading indicator dot */
+  dot?: boolean
+  /** Color for the dot indicator (defaults to match badge color) */
+  dotColor?: IndicatorColor
   /** Additional className */
   className?: string
   children?: React.ReactNode
@@ -65,6 +70,8 @@ export function Badge({
   variant = 'subtle',
   color = 'default',
   size = 'md',
+  dot,
+  dotColor,
   className,
   children,
   ...props
@@ -79,6 +86,13 @@ export function Badge({
       )}
       {...props}
     >
+      {dot && (
+        <Indicator
+          size="xs"
+          color={dotColor ?? (color === 'default' || color === 'secondary' ? 'default' : color as IndicatorColor)}
+          className="mr-0.5"
+        />
+      )}
       {typeof children === 'string' ? (
         <Text className="text-inherit font-medium">{children}</Text>
       ) : (

package/src/components/ui/badge/index.ts

@@ -1,2 +1,3 @@
 export { Badge, BadgeText } from './Badge'
 export type { BadgeProps, BadgeTextProps, BadgeVariant, BadgeColor, BadgeSize } from './Badge'
+export type { IndicatorColor } from '../indicator'

package/src/components/ui/button/Button.tsx

@@ -7,6 +7,52 @@ export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link'
 export type ButtonSize = 'sm' | 'md' | 'lg'
 export type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
 
+/** Inline color map for RNW where Tailwind text classes get dropped */
+const textColorMap: Record<ButtonVariant, Record<ButtonColor, string>> = {
+  solid: {
+    primary: '#FFFFFF',
+    secondary: '#FFFFFF',
+    success: '#FFFFFF',
+    error: '#FFFFFF',
+    warning: '#FFFFFF',
+    info: '#FFFFFF',
+  },
+  outline: {
+    primary: semanticColorsDark['brand-primary'],
+    secondary: semanticColorsDark['brand-secondary'],
+    success: semanticColorsDark['status-success'],
+    error: semanticColorsDark['status-error'],
+    warning: semanticColorsDark['status-warning'],
+    info: semanticColorsDark['status-info'],
+  },
+  ghost: {
+    primary: semanticColorsDark['brand-primary'],
+    secondary: semanticColorsDark['brand-secondary'],
+    success: semanticColorsDark['status-success'],
+    error: semanticColorsDark['status-error'],
+    warning: semanticColorsDark['status-warning'],
+    info: semanticColorsDark['status-info'],
+  },
+  link: {
+    primary: semanticColorsDark['brand-primary'],
+    secondary: semanticColorsDark['brand-secondary'],
+    success: semanticColorsDark['status-success'],
+    error: semanticColorsDark['status-error'],
+    warning: semanticColorsDark['status-warning'],
+    info: semanticColorsDark['status-info'],
+  },
+}
+
+/** Inline border color map for outline variant */
+const borderColorMap: Record<ButtonColor, string> = {
+  primary: semanticColorsDark['brand-primary'],
+  secondary: semanticColorsDark['brand-secondary'],
+  success: semanticColorsDark['status-success'],
+  error: semanticColorsDark['status-error'],
+  warning: semanticColorsDark['status-warning'],
+  info: semanticColorsDark['status-info'],
+}
+
 export interface ButtonProps extends Omit<PressableProps, 'children'> {
   /** Visual style variant */
   variant?: ButtonVariant
@@ -151,6 +197,13 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
 ) {
   const disabled = isDisabled || isLoading
 
+  const inlineStyle: Record<string, string> = {
+    color: textColorMap[variant][color],
+  }
+  if (variant === 'outline') {
+    inlineStyle.borderColor = borderColorMap[color]
+  }
+
   return (
     <Pressable
       ref={ref}
@@ -172,6 +225,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
         variant === 'link' && 'px-0 py-0 min-h-0',
         className
       )}
+      style={inlineStyle}
       {...props}
     >
       {isLoading && (
@@ -188,6 +242,7 @@ export const Button = forwardRef<View, ButtonProps>(function Button(
             textSizeStyles[size],
             textStyles[variant][color]
           )}
+          style={{ color: textColorMap[variant][color] }}
         >
           {loadingText}
         </Text>

package/src/components/ui/card/Card.test.tsx

@@ -216,6 +216,35 @@ describe('Card', () => {
     })
   })
 
+  describe('accent and subtle variants', () => {
+    it('renders accent variant', () => {
+      const { container } = render(
+        <Card variant="accent">
+          <CardContent>Accent card</CardContent>
+        </Card>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders subtle variant', () => {
+      const { container } = render(
+        <Card variant="subtle">
+          <CardContent>Subtle card</CardContent>
+        </Card>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+
+    it('renders accent variant with custom accentColor and accentWidth', () => {
+      const { container } = render(
+        <Card variant="accent" accentColor="#FF0000" accentWidth={5}>
+          <CardContent>Custom accent</CardContent>
+        </Card>
+      )
+      expect(container.firstChild).toBeInTheDocument()
+    })
+  })
+
   describe('custom styling', () => {
     it('applies custom borderColor', () => {
       const { container } = render(

package/src/components/ui/card/Card.tsx

@@ -10,7 +10,7 @@ import {
 } from '../../../theme'
 import { useTheme } from '../../../utils/useTheme'
 
-export type CardVariant = 'elevated' | 'outline' | 'filled'
+export type CardVariant = 'elevated' | 'outline' | 'filled' | 'accent' | 'subtle'
 export type CardElevation = 1 | 2 | 3  // subtle, standard, prominent
 
 export interface CardProps extends ViewProps {
@@ -28,6 +28,10 @@ export interface CardProps extends ViewProps {
   borderColor?: string
   /** Custom background color (hex, rgb, or CSS color). Useful for colored cards. */
   bgColor?: string
+  /** Accent stripe color for accent variant (CSS color or hex) */
+  accentColor?: string
+  /** Accent stripe width for accent variant in pixels (default: 3) */
+  accentWidth?: number
   /** Additional className */
   className?: string
   children?: React.ReactNode
@@ -43,6 +47,8 @@ const variantStyles: Record<CardVariant, string> = {
   elevated: '', // Will be set dynamically via elevation system
   outline: 'border-2 border-border-strong',  // Thicker border with stronger contrast
   filled: '', // Will be set dynamically via elevation system
+  accent: 'border border-border-default',
+  subtle: 'border border-border-subtle',
 }
 
 /**
@@ -75,6 +81,8 @@ export function Card({
   onPress,
   borderColor,
   bgColor,
+  accentColor,
+  accentWidth,
   className,
   children,
   style,
@@ -91,8 +99,8 @@ export function Card({
   const elevationLevel = useMemo(() => {
     const validated = getValidatedElevation('card', elevation as ElevationLevel)
     // Map variant to elevation if needed
-    if (variant === 'outline') {
-      return 1 as ElevationLevel  // Outline uses subtle elevation
+    if (variant === 'outline' || variant === 'accent' || variant === 'subtle') {
+      return 1 as ElevationLevel  // These border variants use subtle elevation
     }
     return validated
   }, [variant, elevation])
@@ -103,9 +111,13 @@ export function Card({
   // Calculate surface color and shadow from elevation
   const surfaceColor = useMemo(() => {
     // Outline variant in light mode uses a specific off-white for clear visibility
-    if (variant === 'outline' && theme === 'light') {
+    if ((variant === 'outline' || variant === 'accent') && theme === 'light') {
       return '#FAFAFA'  // Matches --color-surface-elevated in light mode
     }
+    // Subtle variant uses the base surface color without elevation lift
+    if (variant === 'subtle') {
+      return getElevationSurface(baseColor, 0 as ElevationLevel, theme)
+    }
     return getElevationSurface(baseColor, elevationLevel, theme)
   }, [baseColor, elevationLevel, theme, variant])
 
@@ -148,8 +160,8 @@ export function Card({
   const baseClassName = cn(
     'rounded-lg overflow-hidden relative',
     // Apply variant styles, but only use default border color if no custom borderColor
-    variant === 'outline' 
-      ? borderColor 
+    variant === 'outline'
+      ? borderColor
         ? 'border-2'  // Just the border width, color via style
         : variantStyles[variant]  // Full variant styles including color
       : variantStyles[variant],
@@ -160,22 +172,31 @@ export function Card({
     className
   )
 
+  // Accent variant: left stripe via borderLeft override
+  const accentStyle = useMemo(() => variant === 'accent' ? {
+    borderLeftWidth: accentWidth ?? 3,
+    borderLeftColor: accentColor ?? 'var(--color-brand-primary)',
+  } : {}, [variant, accentWidth, accentColor])
+
   // Merge styles: background color from elevation + shadow style + custom colors + custom style
   const mergedStyle = useMemo(() => {
     const elevationStyle: Record<string, any> = {
       backgroundColor: bgColor || surfaceColor,
+      borderRadius: 8,
+      overflow: 'hidden' as const,
       ...shadowStyle,
+      ...accentStyle,
     }
-    
+
     // Add custom border color if provided
     if (borderColor) {
       elevationStyle.borderColor = borderColor
     }
-    
+
     if (!style) return elevationStyle
-    // Merge styles, with elevation style taking precedence for background/shadow
-    return [style, elevationStyle]
-  }, [style, surfaceColor, shadowStyle, borderColor, bgColor])
+    // User style takes precedence over elevation defaults (e.g. maxWidth, custom bg)
+    return [elevationStyle, style]
+  }, [style, surfaceColor, shadowStyle, borderColor, bgColor, accentStyle])
 
   if (isClickable) {
     return (

package/src/components/ui/index.ts

@@ -34,3 +34,5 @@ export * from './data-row'
 export * from './icon-box'
 export * from './surface'
 export * from './list-item'
+export * from './indicator'
+export * from './pill'

package/src/components/ui/indicator/Indicator.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View } from 'react-native'
+import { Indicator } from './Indicator'
+
+const meta: Meta<typeof Indicator> = {
+  title: 'Components/Indicator',
+  component: Indicator,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg'] },
+    color: { control: 'select', options: ['default', 'primary', 'success', 'error', 'warning', 'info'] },
+    glow: { control: 'boolean' },
+    ring: { control: 'boolean' },
+  },
+}
+export default meta
+type Story = StoryObj<typeof Indicator>
+
+export const Default: Story = { args: { color: 'primary', size: 'md' } }
+
+export const AllSizes: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="xs" color="primary" />
+      <Indicator size="sm" color="primary" />
+      <Indicator size="md" color="primary" />
+      <Indicator size="lg" color="primary" />
+    </View>
+  ),
+}
+
+export const AllColors: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="default" />
+      <Indicator size="md" color="primary" />
+      <Indicator size="md" color="success" />
+      <Indicator size="md" color="error" />
+      <Indicator size="md" color="warning" />
+      <Indicator size="md" color="info" />
+    </View>
+  ),
+}
+
+export const WithGlow: Story = {
+  render: () => (
+    <View className="flex-row gap-6 items-center p-4 bg-surface-base">
+      <Indicator size="md" color="success" glow />
+      <Indicator size="md" color="error" glow />
+      <Indicator size="md" color="warning" glow />
+      <Indicator size="md" color="primary" glow />
+    </View>
+  ),
+}
+
+export const WithRing: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" color="success" ring />
+      <Indicator size="md" color="error" ring />
+      <Indicator size="lg" color="primary" ring />
+    </View>
+  ),
+}
+
+export const CustomColor: Story = {
+  render: () => (
+    <View className="flex-row gap-4 items-center">
+      <Indicator size="md" customColor="#FF6B6B" />
+      <Indicator size="md" customColor="#4ECDC4" />
+      <Indicator size="md" customColor="#45B7D1" glow />
+    </View>
+  ),
+}