@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -2,41 +2,107 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { View } from 'react-native'
 import { Pill } from './Pill'
 import { Indicator } from '../indicator'
+import { Surface } from '../surface'
+import { Typography } from '../../custom/Typography'
 
 const meta: Meta<typeof Pill> = {
   title: 'Components/Atoms/Pill',
   component: Pill,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
-    variant: { control: 'select', options: ['subtle', 'outline'] },
-    color: { control: 'select', options: ['default', 'primary', 'secondary', 'success', 'error', 'warning', 'info'] },
-    size: { control: 'select', options: ['xs', 'sm', 'md'] },
+    variant: { control: 'select', options: ['solid', 'subtle', 'outline'] },
+    tone: {
+      control: 'select',
+      options: ['neutral', 'brand', 'brand-secondary', 'success', 'warning', 'error', 'info'],
+    },
+    size: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
+    leading: { control: 'select', options: [undefined, 'dot'] },
     rounded: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
   },
 }
 export default meta
 type Story = StoryObj<typeof Pill>
 
-export const Default: Story = { args: { children: 'Label', color: 'primary' } }
+export const Default: Story = { args: { children: 'Label', tone: 'brand' } }
 
 export const AllVariants: Story = {
   render: () => (
     <View className="flex-row gap-2">
-      <Pill variant="subtle" color="primary">Subtle</Pill>
-      <Pill variant="outline" color="primary">Outline</Pill>
+      <Pill variant="solid" tone="brand">
+        Solid
+      </Pill>
+      <Pill variant="subtle" tone="brand">
+        Subtle
+      </Pill>
+      <Pill variant="outline" tone="brand">
+        Outline
+      </Pill>
     </View>
   ),
 }
 
-export const AllColors: Story = {
+export const AllTones: Story = {
   render: () => (
     <View className="flex-row gap-2 flex-wrap">
-      <Pill color="default">Default</Pill>
-      <Pill color="primary">Primary</Pill>
-      <Pill color="success">Success</Pill>
-      <Pill color="error">Error</Pill>
-      <Pill color="warning">Warning</Pill>
-      <Pill color="info">Info</Pill>
+      <Pill tone="neutral">Neutral</Pill>
+      <Pill tone="brand">Brand</Pill>
+      <Pill tone="brand-secondary">Accent</Pill>
+      <Pill tone="success">Success</Pill>
+      <Pill tone="warning">Warning</Pill>
+      <Pill tone="error">Error</Pill>
+      <Pill tone="info">Info</Pill>
+    </View>
+  ),
+}
+
+/**
+ * The same row on both planes a subtle pill actually lands on. A `-subtle` fill is
+ * alpha, so it composites against whatever is behind it: the raised card lifts every
+ * capsule and costs each label contrast. It is the harder case and the one AW-133 is
+ * measured against, so judge the tone weight here, not only on the page plane.
+ */
+export const OnBothPlanes: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Page plane (`grey-925`) above, raised card (`grey-875`) below. Every tone loses ' +
+          'roughly 0.8-1.0 of contrast ratio on the card. `brand` is the deliberate exception ' +
+          'from AW-133 — its label stays the exact `orange[400]` brand hue rather than ' +
+          'levelling with the other five, which leaves it the one tone under AA here.',
+      },
+    },
+  },
+  render: () => (
+    <View className="gap-4">
+      <View className="gap-2">
+        <Typography variant="caption" color="tertiary">
+          page plane · grey-925
+        </Typography>
+        <View className="flex-row gap-2 flex-wrap">
+          <Pill tone="brand">Brand</Pill>
+          <Pill tone="brand-secondary">Accent</Pill>
+          <Pill tone="success">Success</Pill>
+          <Pill tone="warning">Warning</Pill>
+          <Pill tone="error">Error</Pill>
+          <Pill tone="info">Info</Pill>
+        </View>
+      </View>
+
+      <Surface level="raised" className="gap-2 rounded-xl border-hairline p-4">
+        <Typography variant="caption" color="tertiary">
+          raised card · grey-875
+        </Typography>
+        <View className="flex-row gap-2 flex-wrap">
+          <Pill tone="brand">Brand</Pill>
+          <Pill tone="brand-secondary">Accent</Pill>
+          <Pill tone="success">Success</Pill>
+          <Pill tone="warning">Warning</Pill>
+          <Pill tone="error">Error</Pill>
+          <Pill tone="info">Info</Pill>
+        </View>
+      </Surface>
     </View>
   ),
 }
@@ -44,19 +110,37 @@ export const AllColors: Story = {
 export const AllSizes: Story = {
   render: () => (
     <View className="flex-row gap-2 items-center">
-      <Pill size="xs" color="primary">XS</Pill>
-      <Pill size="sm" color="primary">SM</Pill>
-      <Pill size="md" color="primary">MD</Pill>
+      <Pill size="xs" tone="brand">
+        XS
+      </Pill>
+      <Pill size="sm" tone="brand">
+        SM
+      </Pill>
+      <Pill size="md" tone="brand">
+        MD
+      </Pill>
+      <Pill size="lg" tone="brand">
+        LG
+      </Pill>
+      <Pill size="xl" tone="brand">
+        XL
+      </Pill>
     </View>
   ),
 }
 
-export const WithDot: Story = {
+export const LeadingSlot: Story = {
   render: () => (
     <View className="flex-row gap-2">
-      <Pill color="success" leftElement={<Indicator size="xs" color="success" />}>Active</Pill>
-      <Pill color="error" leftElement={<Indicator size="xs" color="error" />}>Failed</Pill>
-      <Pill color="warning" leftElement={<Indicator size="xs" color="warning" />}>Pending</Pill>
+      <Pill tone="success" leading="dot">
+        Active
+      </Pill>
+      <Pill tone="error" leading="dot">
+        Failed
+      </Pill>
+      <Pill tone="warning" leading={<Indicator size="xs" color="warning" />}>
+        Pending
+      </Pill>
     </View>
   ),
 }
@@ -64,8 +148,12 @@ export const WithDot: Story = {
 export const SquareCorners: Story = {
   render: () => (
     <View className="flex-row gap-2">
-      <Pill rounded={false} color="primary">Tag</Pill>
-      <Pill rounded={false} color="success">Done</Pill>
+      <Pill rounded={false} tone="brand">
+        Tag
+      </Pill>
+      <Pill rounded={false} tone="success">
+        Done
+      </Pill>
     </View>
   ),
 }

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,221 @@ 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.
+    // Label comes from `on-*-subtle`, not the base tone token: the base is tuned to
+    // carry a white label as a solid fill, which left error and accent unreadable
+    // here (AW-133). The on-subtle tokens level the family at one weight.
+    neutral: 'bg-hairline-subtle border-transparent text-text-secondary',
+    brand: 'bg-brand-primary-subtle border-transparent text-on-brand-primary-subtle',
+    'brand-secondary':
+      'bg-brand-secondary-subtle border-transparent text-on-brand-secondary-subtle',
+    success: 'bg-status-success-subtle border-transparent text-on-status-success-subtle',
+    warning: 'bg-status-warning-subtle border-transparent text-on-status-warning-subtle',
+    error: 'bg-status-error-subtle border-transparent text-on-status-error-subtle',
+    info: 'bg-status-info-subtle border-transparent text-on-status-info-subtle',
   },
   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>
@@ -162,7 +160,7 @@ export const WithFormContent: Story = {
               </View>
             </PopoverCloseButton>
             <View className="px-3 py-1.5 rounded-md bg-brand-primary">
-              <Text className="text-white text-sm font-medium">Save</Text>
+              <Text className="text-on-brand-primary text-sm font-medium">Save</Text>
             </View>
           </View>
         </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', () => {