@titan-design/react-ui 0.12.0 → 0.13.0

package/src/components/ui/pill/Pill.test.tsx

@@ -10,7 +10,7 @@ describe('Pill', () => {
   })
 
   it('renders with all variants', () => {
-    const variants = ['subtle', 'outline'] as const
+    const variants = ['solid', 'subtle', 'outline'] as const
     variants.forEach((variant) => {
       const { unmount } = render(<Pill variant={variant}>Test</Pill>)
       expect(screen.getByText('Test')).toBeInTheDocument()
@@ -19,7 +19,15 @@ describe('Pill', () => {
   })
 
   it('renders with all colors', () => {
-    const colors = ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] as const
+    const colors = [
+      'default',
+      'primary',
+      'secondary',
+      'success',
+      'error',
+      'warning',
+      'info',
+    ] as const
     colors.forEach((color) => {
       const { unmount } = render(<Pill color={color}>Test</Pill>)
       expect(screen.getByText('Test')).toBeInTheDocument()
@@ -27,8 +35,25 @@ describe('Pill', () => {
     })
   })
 
+  it('renders with all tones', () => {
+    const tones = [
+      'neutral',
+      'brand',
+      'brand-secondary',
+      'success',
+      'warning',
+      'error',
+      'info',
+    ] as const
+    tones.forEach((tone) => {
+      const { unmount } = render(<Pill tone={tone}>Test</Pill>)
+      expect(screen.getByText('Test')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
   it('renders with all sizes', () => {
-    const sizes = ['xs', 'sm', 'md'] as const
+    const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
     sizes.forEach((size) => {
       const { unmount } = render(<Pill size={size}>Test</Pill>)
       expect(screen.getByText('Test')).toBeInTheDocument()
@@ -36,6 +61,60 @@ describe('Pill', () => {
     })
   })
 
+  it('renders a tone-matched dot for leading="dot"', () => {
+    render(
+      <Pill tone="success" leading="dot">
+        Active
+      </Pill>
+    )
+    expect(screen.getByTestId('pill-dot')).toBeInTheDocument()
+  })
+
+  it('renders each tone with a leading dot', () => {
+    const tones = ['neutral', 'brand', 'brand-secondary', 'error'] as const
+    tones.forEach((tone) => {
+      const { unmount } = render(
+        <Pill tone={tone} leading="dot">
+          Test
+        </Pill>
+      )
+      expect(screen.getByTestId('pill-dot')).toBeInTheDocument()
+      unmount()
+    })
+  })
+
+  it('renders a leading icon node', () => {
+    render(<Pill leading={<span data-testid="icon" />}>Label</Pill>)
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+    expect(screen.queryByTestId('pill-dot')).not.toBeInTheDocument()
+  })
+
+  it('renders a trailing slot', () => {
+    render(<Pill trailing={<span data-testid="dismiss" />}>Label</Pill>)
+    expect(screen.getByTestId('dismiss')).toBeInTheDocument()
+  })
+
+  it('does not fire onPress when disabled', () => {
+    const handler = vi.fn()
+    render(
+      <Pill onPress={handler} isDisabled>
+        Click
+      </Pill>
+    )
+    fireEvent.click(screen.getByRole('button'))
+    expect(handler).not.toHaveBeenCalled()
+  })
+
+  it('maps the legacy color prop onto a tone', () => {
+    render(
+      <Pill color="primary" leading="dot">
+        Legacy
+      </Pill>
+    )
+    expect(screen.getByText('Legacy')).toBeInTheDocument()
+    expect(screen.getByTestId('pill-dot')).toBeInTheDocument()
+  })
+
   it('applies rounded-full by default', () => {
     const { container } = render(<Pill>Test</Pill>)
     expect(container.firstChild).toBeInTheDocument()
@@ -65,5 +144,24 @@ describe('Pill', () => {
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })
+
+    it('has no accessibility violations with a leading dot', async () => {
+      const { container } = render(
+        <Pill tone="success" leading="dot">
+          Active
+        </Pill>
+      )
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('has no accessibility violations when interactive', async () => {
+      const { container } = render(<Pill onPress={() => {}}>Filter</Pill>)
+      expect(await axe(container)).toHaveNoViolations()
+    })
+
+    it('exposes a button role when interactive', () => {
+      render(<Pill onPress={() => {}}>Filter</Pill>)
+      expect(screen.getByRole('button')).toBeInTheDocument()
+    })
   })
 })

package/src/components/ui/pill/Pill.tsx

@@ -2,102 +2,217 @@ import React from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 
-export type PillVariant = 'subtle' | 'outline'
-export type PillColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
-export type PillSize = 'xs' | 'sm' | 'md'
+export type PillVariant = 'solid' | 'subtle' | 'outline'
+/** Semantic tone. `brand-secondary` is the accent, not a second brand. */
+export type PillTone =
+  | 'neutral'
+  | 'brand'
+  | 'brand-secondary'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info'
+/** Legacy palette names, kept so existing `color=` call sites keep working. */
+export type PillColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+export type PillSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
 export interface PillProps extends ViewProps {
   /** Pill content */
-  children: React.ReactNode
+  children?: React.ReactNode
   /** Visual variant */
   variant?: PillVariant
-  /** Color scheme */
+  /** Semantic tone */
+  tone?: PillTone
+  /** @deprecated Use `tone` — `color` maps onto it and is kept for call-site compatibility. */
   color?: PillColor
   /** Size */
   size?: PillSize
   /** Fully rounded (default true) or slight radius */
   rounded?: boolean
-  /** Element before the label (e.g., Indicator dot) */
+  /** Leading slot: `'dot'` renders a tone-matched dot, any node renders as-is. */
+  leading?: React.ReactNode | 'dot'
+  /**
+   * Colour the leading dot independently of the capsule. For the pattern where
+   * the label is neutral and only the dot carries status, so a row of chips
+   * stays quiet and the dots are the signal.
+   */
+  dotTone?: PillTone
+  /** @deprecated Use `leading`. */
   leftElement?: React.ReactNode
+  /** Trailing slot (dismiss affordance, counter) */
+  trailing?: React.ReactNode
   /** Press handler (makes pill interactive) */
   onPress?: () => void
-  /** Additional className */
+  /** Non-interactive and dimmed */
+  isDisabled?: boolean
+  /** Additional className on the container */
   className?: string
+  /** Additional className on the label, for presets that own their typography */
+  textClassName?: string
 }
 
-const variantColorStyles: Record<PillVariant, Record<PillColor, string>> = {
+const colorToTone: Record<PillColor, PillTone> = {
+  default: 'neutral',
+  primary: 'brand',
+  secondary: 'brand-secondary',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+}
+
+const toneStyles: Record<PillVariant, Record<PillTone, string>> = {
+  solid: {
+    neutral: 'bg-hairline-strong border-transparent text-text-inverse',
+    brand: 'bg-brand-primary border-transparent text-text-inverse',
+    'brand-secondary': 'bg-brand-secondary border-transparent text-text-inverse',
+    success: 'bg-status-success border-transparent text-text-inverse',
+    warning: 'bg-status-warning border-transparent text-text-inverse',
+    error: 'bg-status-error border-transparent text-text-inverse',
+    info: 'bg-status-info border-transparent text-text-inverse',
+  },
   subtle: {
-    default: 'bg-surface-raised border-hairline-subtle text-text-secondary',
-    primary: 'bg-brand-primary/10 border-brand-primary/25 text-brand-primary',
-    secondary: 'bg-brand-secondary/10 border-brand-secondary/25 text-brand-secondary',
-    success: 'bg-status-success/10 border-status-success/25 text-status-success',
-    error: 'bg-status-error/10 border-status-error/25 text-status-error',
-    warning: 'bg-status-warning/10 border-status-warning/25 text-status-warning',
-    info: 'bg-status-info/10 border-status-info/25 text-status-info',
+    // Alpha-white rather than a ramp step: a pill sits on whatever plane its
+    // host is, and an alpha fill composites by the same amount on all of them.
+    // A `surface-*` fill would vanish on the plane it names. Borderless like the
+    // six coloured tones — the fill carries the capsule, not a ring.
+    neutral: 'bg-hairline-subtle border-transparent text-text-secondary',
+    brand: 'bg-brand-primary-subtle border-transparent text-brand-primary',
+    'brand-secondary': 'bg-brand-secondary-subtle border-transparent text-brand-secondary',
+    success: 'bg-status-success-subtle border-transparent text-status-success',
+    warning: 'bg-status-warning-subtle border-transparent text-status-warning',
+    error: 'bg-status-error-subtle border-transparent text-status-error',
+    info: 'bg-status-info-subtle border-transparent text-status-info',
   },
   outline: {
-    default: 'border-hairline text-text-secondary',
-    primary: 'border-brand-primary text-brand-primary',
-    secondary: 'border-brand-secondary text-brand-secondary',
+    neutral: 'border-hairline text-text-secondary',
+    brand: 'border-brand-primary text-brand-primary',
+    'brand-secondary': 'border-brand-secondary text-brand-secondary',
     success: 'border-status-success text-status-success',
-    error: 'border-status-error text-status-error',
     warning: 'border-status-warning text-status-warning',
+    error: 'border-status-error text-status-error',
     info: 'border-status-info text-status-info',
   },
 }
 
+const dotToneStyles: Record<PillTone, string> = {
+  neutral: 'bg-text-tertiary',
+  brand: 'bg-brand-primary',
+  'brand-secondary': 'bg-brand-secondary',
+  success: 'bg-status-success',
+  warning: 'bg-status-warning',
+  error: 'bg-status-error',
+  info: 'bg-status-info',
+}
+
+// One text step per rung. `md` used to repeat `sm`'s 10px, which left no 12px
+// capsule at all and pushed anything between the two down to 10px — that is how
+// MuscleGroupChip lost 7px of height. `md` is the 12px rung now.
 const sizeStyles: Record<PillSize, { container: string; text: string }> = {
-  xs: { container: 'px-1 py-px', text: 'text-[9px]' },
-  sm: { container: 'px-2 py-0.5', text: 'text-[10px]' },
-  md: { container: 'px-2 py-1', text: 'text-[10px]' },
+  xs: { container: 'px-1 py-px', text: 'text-3xs' },
+  sm: { container: 'px-2 py-0.5', text: 'text-2xs' },
+  md: { container: 'px-2.5 py-1', text: 'text-xs' },
+  lg: { container: 'px-3 py-1.5', text: 'text-sm' },
+  xl: { container: 'px-4 py-2', text: 'text-base' },
+}
+
+// The dot derives its testID from the pill's, so a preset's dot stays
+// addressable under the preset's own name (`muscle-group-chip-dot`) instead of
+// collapsing to a generic one — the visual parity layer targets it by name.
+function PillDot({ tone, testID }: { tone: PillTone; testID?: string }) {
+  return (
+    <View
+      className={cn('w-1.5 h-1.5 rounded-full shrink-0', dotToneStyles[tone])}
+      accessibilityElementsHidden
+      testID={testID ? `${testID}-dot` : 'pill-dot'}
+    />
+  )
 }
 
-export function Pill({
-  children,
-  variant = 'subtle',
-  color = 'default',
-  size = 'sm',
-  rounded = true,
-  leftElement,
-  onPress,
-  className,
-  ...props
-}: PillProps) {
-  const containerClasses = cn(
+function containerClasses(p: PillProps, tone: PillTone) {
+  return cn(
     'flex-row items-center gap-1 border self-start shrink-0',
-    rounded ? 'rounded-full' : 'rounded',
-    variantColorStyles[variant][color],
-    sizeStyles[size].container,
-    className
+    p.rounded === false ? 'rounded' : 'rounded-full',
+    toneStyles[p.variant ?? 'subtle'][tone],
+    sizeStyles[p.size ?? 'sm'].container,
+    p.isDisabled && 'opacity-50',
+    p.className
   )
+}
 
+function PillContent({ tone, ...p }: PillProps & { tone: PillTone }) {
   const textClasses = cn(
-    'font-heading font-semibold',
-    sizeStyles[size].text,
-    'text-inherit'
+    'font-heading font-semibold text-inherit',
+    sizeStyles[p.size ?? 'sm'].text,
+    p.textClassName
   )
-
-  const content = (
+  const slot = p.leading ?? p.leftElement
+  return (
     <>
-      {leftElement}
-      {typeof children === 'string' ? (
-        <Text className={textClasses}>{children}</Text>
+      {slot === 'dot' ? <PillDot tone={p.dotTone ?? tone} testID={p.testID} /> : slot}
+      {typeof p.children === 'string' ? (
+        <Text className={textClasses}>{p.children}</Text>
       ) : (
-        children
+        p.children
       )}
+      {p.trailing}
     </>
   )
+}
+
+/**
+ * The single pill primitive: a capsule of tone-coloured label with optional
+ * leading and trailing slots. `Badge`, `Chip`, `StatusPill` and
+ * `MuscleGroupChip` are presets over it.
+ *
+ * @example
+ * <Pill tone="success" leading="dot">Active</Pill>
+ */
+export function Pill(props: PillProps) {
+  const {
+    variant,
+    tone,
+    color,
+    size,
+    rounded,
+    leading,
+    dotTone,
+    leftElement,
+    trailing,
+    onPress,
+    isDisabled,
+    className,
+    textClassName,
+    children,
+    ...viewProps
+  } = props
+  const resolvedTone = tone ?? (color ? colorToTone[color] : 'neutral')
+  const classes = containerClasses(props, resolvedTone)
+  const content = <PillContent {...props} tone={resolvedTone} />
 
   if (onPress) {
     return (
-      <Pressable onPress={onPress} className={containerClasses} {...props}>
+      <Pressable
+        onPress={onPress}
+        disabled={isDisabled}
+        accessibilityRole="button"
+        className={classes}
+        {...viewProps}
+      >
         {content}
       </Pressable>
     )
   }
 
   return (
-    <View className={containerClasses} {...props}>
+    <View className={classes} {...viewProps}>
       {content}
     </View>
   )

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

@@ -1,2 +1,2 @@
 export { Pill } from './Pill'
-export type { PillProps, PillVariant, PillColor, PillSize } from './Pill'
+export type { PillProps, PillVariant, PillTone, PillColor, PillSize } from './Pill'

package/src/components/ui/popover/Popover.stories.tsx

@@ -124,15 +124,15 @@ export const WithCloseButton: Story = {
         </Button>
       </PopoverTrigger>
       <PopoverContent>
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+        <View
+          style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
+        >
           <Text className="text-text-primary text-sm font-semibold">Settings</Text>
           <PopoverCloseButton>
             <Text className="text-text-secondary text-lg">&#10005;</Text>
           </PopoverCloseButton>
         </View>
-        <Text className="text-text-secondary text-sm mt-2">
-          Configure your preferences here.
-        </Text>
+        <Text className="text-text-secondary text-sm mt-2">Configure your preferences here.</Text>
       </PopoverContent>
     </Popover>
   ),
@@ -149,9 +149,7 @@ export const WithFormContent: Story = {
       <PopoverContent>
         <View style={{ gap: 12 }}>
           <Text className="text-text-primary text-sm font-semibold">Edit Display Name</Text>
-          <Text className="text-text-secondary text-xs">
-            Enter your new display name below.
-          </Text>
+          <Text className="text-text-secondary text-xs">Enter your new display name below.</Text>
           <View className="bg-surface-input border border-hairline rounded-md px-3 py-2">
             <Text className="text-text-secondary text-sm">John Doe</Text>
           </View>

package/src/components/ui/popover/Popover.test.tsx

@@ -1,12 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { render, screen, fireEvent, act } from '@testing-library/react'
 import { axe } from 'jest-axe'
-import {
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverCloseButton,
-} from './Popover'
+import { Popover, PopoverTrigger, PopoverContent, PopoverCloseButton } from './Popover'
 
 describe('Popover', () => {
   it('renders trigger element', () => {

package/src/components/ui/popover/Popover.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useRef, useCallback, createContext, useContext } from 'react'
 import { View, Pressable, Modal, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
+import { TriggerSurface } from '../trigger'
 
 export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right'
 
@@ -68,12 +70,15 @@ export function Popover({
   const isOpen = controlledIsOpen ?? internalIsOpen
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  const setIsOpen = useCallback((open: boolean) => {
-    if (controlledIsOpen === undefined) {
-      setInternalIsOpen(open)
-    }
-    onOpenChange?.(open)
-  }, [controlledIsOpen, onOpenChange])
+  const setIsOpen = useCallback(
+    (open: boolean) => {
+      if (controlledIsOpen === undefined) {
+        setInternalIsOpen(open)
+      }
+      onOpenChange?.(open)
+    },
+    [controlledIsOpen, onOpenChange]
+  )
 
   const handleHoverIn = useCallback(() => {
     if (triggerMode !== 'hover') return
@@ -126,15 +131,14 @@ export function PopoverTrigger({ children, className }: PopoverTriggerProps) {
       : {}
 
   return (
-    <Pressable
-      onPress={() => setIsOpen(!isOpen)}
+    <TriggerSurface
+      handlers={{ onPress: () => setIsOpen(!isOpen), ...hoverProps }}
       accessibilityRole="button"
       accessibilityState={{ expanded: isOpen }}
       className={className}
-      {...hoverProps}
     >
       {children}
-    </Pressable>
+    </TriggerSurface>
   )
 }
 
@@ -184,12 +188,13 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
         className="fixed inset-0 z-40"
         style={{ position: 'absolute' }}
       />
-      {/* Content */}
-      <View
+      {/* Content — floating: overlay plane + lift, no ring. */}
+      <Surface
+        elevation={4}
+        rounded={false}
         className={cn(
           'absolute z-50 min-w-[200px]',
-          'bg-surface-elevated rounded-lg shadow-lg border border-hairline',
-          'p-4',
+          'rounded-lg p-4',
           placementStyles[placement],
           className
         )}
@@ -208,7 +213,7 @@ export function PopoverContent({ children, className }: PopoverContentProps) {
           />
         )}
         {children}
-      </View>
+      </Surface>
     </>
   )
 }

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

@@ -1,2 +1,8 @@
 export { Popover, PopoverTrigger, PopoverContent, PopoverCloseButton } from './Popover'
-export type { PopoverProps, PopoverTriggerProps, PopoverContentProps, PopoverCloseButtonProps, PopoverPlacement } from './Popover'
+export type {
+  PopoverProps,
+  PopoverTriggerProps,
+  PopoverContentProps,
+  PopoverCloseButtonProps,
+  PopoverPlacement,
+} from './Popover'

package/src/components/ui/progress/Progress.stories.tsx

@@ -5,7 +5,7 @@ import { Progress, CircularProgress, ProgressSteps } from './Progress'
 const meta: Meta<typeof Progress> = {
   title: 'Components/Molecules/Progress',
   component: Progress,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     value: {
       control: { type: 'range', min: 0, max: 100, step: 1 },
@@ -131,11 +131,7 @@ export const Steps: Story = {
         color="success"
         labels={['Step 1', 'Step 2', 'Step 3', 'Step 4']}
       />
-      <ProgressSteps
-        currentStep={0}
-        totalSteps={5}
-        size="lg"
-      />
+      <ProgressSteps currentStep={0} totalSteps={5} size="lg" />
     </View>
   ),
 }
@@ -152,12 +148,7 @@ export const UsageExamples: Story = {
       {/* Storage quota */}
       <View className="p-4 bg-surface-elevated rounded-lg">
         <Text className="text-text-primary font-medium mb-3">Storage</Text>
-        <Progress
-          value={8.5}
-          max={10}
-          color="warning"
-          label="8.5 GB of 10 GB used"
-        />
+        <Progress value={8.5} max={10} color="warning" label="8.5 GB of 10 GB used" />
       </View>
 
       {/* Checkout steps */}

package/src/components/ui/progress/Progress.test.tsx

@@ -154,11 +154,7 @@ describe('Progress', () => {
 
     it('renders labels', () => {
       render(
-        <ProgressSteps
-          currentStep={1}
-          totalSteps={3}
-          labels={['Step 1', 'Step 2', 'Step 3']}
-        />
+        <ProgressSteps currentStep={1} totalSteps={3} labels={['Step 1', 'Step 2', 'Step 3']} />
       )
       expect(screen.getByText('Step 1')).toBeInTheDocument()
       expect(screen.getByText('Step 2')).toBeInTheDocument()