@titan-design/react-ui 0.1.1 → 0.2.6

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

@@ -0,0 +1,144 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { SupersetWrapper } from './SupersetWrapper'
+import { ExerciseCard } from './ExerciseCard'
+
+const meta: Meta<typeof SupersetWrapper> = {
+  title: 'Custom/Workout/SupersetWrapper',
+  component: SupersetWrapper,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <View style={{ maxWidth: 400, padding: 16, backgroundColor: '#121212' }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof SupersetWrapper>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A
+          </Text>
+        </View>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise B
+          </Text>
+        </View>
+      </>
+    ),
+  },
+}
+
+export const CustomLabel: Story = {
+  args: {
+    label: 'A1/A2',
+    children: (
+      <>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A1
+          </Text>
+        </View>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A2
+          </Text>
+        </View>
+      </>
+    ),
+  },
+}
+
+export const CustomColor: Story = {
+  args: {
+    color: '#22C55E',
+    children: (
+      <>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise A
+          </Text>
+        </View>
+        <View
+          style={{
+            padding: 12,
+            backgroundColor: '#1C1C1C',
+            borderRadius: 8,
+          }}
+        >
+          <Text style={{ color: '#F3F4F6', fontFamily: 'Inter, sans-serif' }}>
+            Exercise B
+          </Text>
+        </View>
+      </>
+    ),
+  },
+}
+
+const exerciseA = {
+  name: 'Bench Press',
+  state: 'collapsed' as const,
+  onToggle: () => {},
+  summary: { sets: 3, reps: 8, weight: 185, unit: 'lbs' as const },
+  supersetPosition: 'first' as const,
+  supersetColor: '#FF7900',
+}
+
+const exerciseB = {
+  name: 'Bent Over Row',
+  state: 'collapsed' as const,
+  onToggle: () => {},
+  summary: { sets: 3, reps: 8, weight: 155, unit: 'lbs' as const },
+  supersetPosition: 'last' as const,
+  supersetColor: '#FF7900',
+}
+
+export const WithExerciseCards: Story = {
+  args: {
+    children: (
+      <>
+        <ExerciseCard {...exerciseA} />
+        <ExerciseCard {...exerciseB} />
+      </>
+    ),
+  },
+}

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(