@titan-design/react-ui 0.12.0 → 0.13.0

package/src/components/ui/autocomplete/Autocomplete.tsx

@@ -1,6 +1,15 @@
 import React, { useState, useCallback, useMemo } from 'react'
-import { View, Text, TextInput, Pressable, ScrollView, type ViewProps, type TextInputProps } from 'react-native'
+import {
+  View,
+  Text,
+  TextInput,
+  Pressable,
+  ScrollView,
+  type ViewProps,
+  type TextInputProps,
+} from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export interface AutocompleteOption<T = string> {
   value: T
@@ -115,10 +124,7 @@ export function Autocomplete<T extends string = string>({
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
 
   // Get the label for the selected value
-  const selectedOption = useMemo(
-    () => options.find((o) => o.value === value),
-    [options, value]
-  )
+  const selectedOption = useMemo(() => options.find((o) => o.value === value), [options, value])
 
   // Filter options based on input
   const filteredOptions = useMemo(() => {
@@ -206,21 +212,14 @@ export function Autocomplete<T extends string = string>({
             onBlur={handleBlur}
             placeholder={placeholder}
             editable={!isDisabled}
-            className={cn(
-              'flex-1 px-3 py-2 text-text-primary',
-              'placeholder:text-text-tertiary'
-            )}
+            className={cn('flex-1 px-3 py-2 text-text-primary', 'placeholder:text-text-tertiary')}
             accessibilityLabel={label}
             {...inputProps}
           />
 
           {/* Clear button */}
           {isClearable && value && !isDisabled && (
-            <Pressable
-              onPress={handleClear}
-              className="p-2"
-              accessibilityLabel="Clear selection"
-            >
+            <Pressable onPress={handleClear} className="p-2" accessibilityLabel="Clear selection">
               <Text className="text-text-tertiary">×</Text>
             </Pressable>
           )}
@@ -235,11 +234,12 @@ export function Autocomplete<T extends string = string>({
 
         {/* Dropdown */}
         {isOpen && (
-          <View
+          <Surface
+            elevation={4}
+            rounded={false}
             className={cn(
               'absolute z-50 top-full left-0 right-0 mt-1',
-              'bg-surface-elevated rounded-md shadow-lg border border-hairline',
-              'max-h-60 overflow-hidden'
+              'rounded-md max-h-60 overflow-hidden'
             )}
           >
             <ScrollView className="py-1">
@@ -252,16 +252,12 @@ export function Autocomplete<T extends string = string>({
 
               {/* Loading message */}
               {isLoading && (
-                <Text className="px-3 py-2 text-sm text-text-tertiary">
-                  {loadingText}
-                </Text>
+                <Text className="px-3 py-2 text-sm text-text-tertiary">{loadingText}</Text>
               )}
 
               {/* No results */}
               {showNoResults && (
-                <Text className="px-3 py-2 text-sm text-text-tertiary">
-                  {noOptionsText}
-                </Text>
+                <Text className="px-3 py-2 text-sm text-text-tertiary">{noOptionsText}</Text>
               )}
 
               {/* Options */}
@@ -312,17 +308,14 @@ export function Autocomplete<T extends string = string>({
                   )
                 })}
             </ScrollView>
-          </View>
+          </Surface>
         )}
       </View>
 
       {/* Helper/Error text */}
       {(helperText || errorMessage) && (
         <Text
-          className={cn(
-            'text-xs mt-1',
-            isInvalid ? 'text-status-error' : 'text-text-tertiary'
-          )}
+          className={cn('text-xs mt-1', isInvalid ? 'text-status-error' : 'text-text-tertiary')}
         >
           {errorMessage || helperText}
         </Text>

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

@@ -5,7 +5,7 @@ import { Avatar, AvatarBadge, AvatarGroup } from './Avatar'
 const meta: Meta<typeof Avatar> = {
   title: 'Components/Atoms/Avatar',
   component: Avatar,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     size: {
       control: 'select',

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

@@ -133,12 +133,7 @@ export interface AvatarGroupProps {
 /**
  * Group of avatars with stacking effect.
  */
-export function AvatarGroup({
-  children,
-  max,
-  size = 'md',
-  className,
-}: AvatarGroupProps) {
+export function AvatarGroup({ children, max, size = 'md', className }: AvatarGroupProps) {
   const childArray = React.Children.toArray(children)
   const visibleChildren = max ? childArray.slice(0, max) : childArray
   const remainingCount = max ? Math.max(0, childArray.length - max) : 0
@@ -148,10 +143,7 @@ export function AvatarGroup({
       {visibleChildren.map((child, index) => (
         <View
           key={index}
-          className={cn(
-            'border-2 border-surface-base rounded-full',
-            index > 0 && '-ml-2'
-          )}
+          className={cn('border-2 border-surface-base rounded-full', index > 0 && '-ml-2')}
         >
           {React.isValidElement(child)
             ? React.cloneElement(child as React.ReactElement<any>, { size })

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

@@ -5,7 +5,8 @@ import { Badge, BadgeText } from './Badge'
 const meta: Meta<typeof Badge> = {
   title: 'Components/Atoms/Badge',
   component: Badge,
-  tags: ['autodocs'],
+  parameters: { docs: { description: { component: 'Composes **Indicator**.' } } },
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -40,9 +41,15 @@ export const Default: Story = {
 export const AllVariants: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-      <Badge variant="solid" color="primary">Solid</Badge>
-      <Badge variant="subtle" color="primary">Subtle</Badge>
-      <Badge variant="outline" color="primary">Outline</Badge>
+      <Badge variant="solid" color="primary">
+        Solid
+      </Badge>
+      <Badge variant="subtle" color="primary">
+        Subtle
+      </Badge>
+      <Badge variant="outline" color="primary">
+        Outline
+      </Badge>
     </View>
   ),
 }
@@ -51,31 +58,73 @@ export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 12 }}>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Badge variant="solid" color="default">Default</Badge>
-        <Badge variant="solid" color="primary">Primary</Badge>
-        <Badge variant="solid" color="secondary">Secondary</Badge>
-        <Badge variant="solid" color="success">Success</Badge>
-        <Badge variant="solid" color="error">Error</Badge>
-        <Badge variant="solid" color="warning">Warning</Badge>
-        <Badge variant="solid" color="info">Info</Badge>
+        <Badge variant="solid" color="default">
+          Default
+        </Badge>
+        <Badge variant="solid" color="primary">
+          Primary
+        </Badge>
+        <Badge variant="solid" color="secondary">
+          Secondary
+        </Badge>
+        <Badge variant="solid" color="success">
+          Success
+        </Badge>
+        <Badge variant="solid" color="error">
+          Error
+        </Badge>
+        <Badge variant="solid" color="warning">
+          Warning
+        </Badge>
+        <Badge variant="solid" color="info">
+          Info
+        </Badge>
       </View>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Badge variant="subtle" color="default">Default</Badge>
-        <Badge variant="subtle" color="primary">Primary</Badge>
-        <Badge variant="subtle" color="secondary">Secondary</Badge>
-        <Badge variant="subtle" color="success">Success</Badge>
-        <Badge variant="subtle" color="error">Error</Badge>
-        <Badge variant="subtle" color="warning">Warning</Badge>
-        <Badge variant="subtle" color="info">Info</Badge>
+        <Badge variant="subtle" color="default">
+          Default
+        </Badge>
+        <Badge variant="subtle" color="primary">
+          Primary
+        </Badge>
+        <Badge variant="subtle" color="secondary">
+          Secondary
+        </Badge>
+        <Badge variant="subtle" color="success">
+          Success
+        </Badge>
+        <Badge variant="subtle" color="error">
+          Error
+        </Badge>
+        <Badge variant="subtle" color="warning">
+          Warning
+        </Badge>
+        <Badge variant="subtle" color="info">
+          Info
+        </Badge>
       </View>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Badge variant="outline" color="default">Default</Badge>
-        <Badge variant="outline" color="primary">Primary</Badge>
-        <Badge variant="outline" color="secondary">Secondary</Badge>
-        <Badge variant="outline" color="success">Success</Badge>
-        <Badge variant="outline" color="error">Error</Badge>
-        <Badge variant="outline" color="warning">Warning</Badge>
-        <Badge variant="outline" color="info">Info</Badge>
+        <Badge variant="outline" color="default">
+          Default
+        </Badge>
+        <Badge variant="outline" color="primary">
+          Primary
+        </Badge>
+        <Badge variant="outline" color="secondary">
+          Secondary
+        </Badge>
+        <Badge variant="outline" color="success">
+          Success
+        </Badge>
+        <Badge variant="outline" color="error">
+          Error
+        </Badge>
+        <Badge variant="outline" color="warning">
+          Warning
+        </Badge>
+        <Badge variant="outline" color="info">
+          Info
+        </Badge>
       </View>
     </View>
   ),
@@ -84,9 +133,15 @@ export const AllColors: Story = {
 export const AllSizes: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-      <Badge size="sm" color="primary">Small</Badge>
-      <Badge size="md" color="primary">Medium</Badge>
-      <Badge size="lg" color="primary">Large</Badge>
+      <Badge size="sm" color="primary">
+        Small
+      </Badge>
+      <Badge size="md" color="primary">
+        Medium
+      </Badge>
+      <Badge size="lg" color="primary">
+        Large
+      </Badge>
     </View>
   ),
 }

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

@@ -33,7 +33,15 @@ describe('Badge', () => {
   })
 
   it('renders with all color options', () => {
-    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(<Badge color={color}>Test</Badge>)
       expect(screen.getByText('Test')).toBeInTheDocument()
@@ -74,12 +82,20 @@ describe('Badge', () => {
 
   describe('dot indicator', () => {
     it('renders dot when dot prop is true', () => {
-      const { container } = render(<Badge dot color="success">Active</Badge>)
+      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>)
+      const { container } = render(
+        <Badge dot dotColor="warning">
+          Pending
+        </Badge>
+      )
       expect(container.firstChild).toBeInTheDocument()
     })
 

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

@@ -1,10 +1,18 @@
 import React from 'react'
-import { View, Text, type ViewProps } from 'react-native'
+import { Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { Indicator, type IndicatorColor } from '../indicator'
+import { Pill, type PillTone, type PillVariant } from '../pill'
 
 export type BadgeVariant = 'solid' | 'subtle' | 'outline'
-export type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type BadgeColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
 export type BadgeSize = 'sm' | 'md' | 'lg'
 
 export interface BadgeProps extends ViewProps {
@@ -23,44 +31,36 @@ export interface BadgeProps extends ViewProps {
   children?: React.ReactNode
 }
 
-const variantColorStyles: Record<BadgeVariant, Record<BadgeColor, string>> = {
-  solid: {
-    default: 'bg-hairline-strong text-text-inverse',
-    primary: 'bg-brand-primary text-text-inverse',
-    secondary: 'bg-brand-secondary text-text-inverse',
-    success: 'bg-status-success text-text-inverse',
-    error: 'bg-status-error text-text-inverse',
-    warning: 'bg-status-warning text-text-inverse',
-    info: 'bg-status-info text-text-inverse',
-  },
-  subtle: {
-    default: 'bg-surface-raised text-text-secondary',
-    primary: 'bg-brand-primary-subtle text-brand-primary',
-    secondary: 'bg-brand-secondary-subtle text-brand-secondary',
-    success: 'bg-status-success-subtle text-status-success',
-    error: 'bg-status-error-subtle text-status-error',
-    warning: 'bg-status-warning-subtle text-status-warning',
-    info: 'bg-status-info-subtle text-status-info',
-  },
-  outline: {
-    default: 'border border-hairline-strong text-text-secondary',
-    primary: 'border border-brand-primary text-brand-primary',
-    secondary: 'border border-brand-secondary text-brand-secondary',
-    success: 'border border-status-success text-status-success',
-    error: 'border border-status-error text-status-error',
-    warning: 'border border-status-warning text-status-warning',
-    info: 'border border-status-info text-status-info',
-  },
+const colorToTone: Record<BadgeColor, PillTone> = {
+  default: 'neutral',
+  primary: 'brand',
+  secondary: 'brand-secondary',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
 }
 
+/** Badge keeps its own geometry; Pill supplies structure, tone and the slots. */
 const sizeStyles: Record<BadgeSize, string> = {
-  sm: 'px-1.5 py-0.5 text-xs',
-  md: 'px-2 py-0.5 text-xs',
-  lg: 'px-2.5 py-1 text-sm',
+  sm: 'px-1.5 py-0.5',
+  md: 'px-2 py-0.5',
+  lg: 'px-2.5 py-1',
+}
+
+const textSizeStyles: Record<BadgeSize, string> = {
+  sm: 'text-xs',
+  md: 'text-xs',
+  lg: 'text-sm',
+}
+
+function dotIndicatorColor(color: BadgeColor, dotColor?: IndicatorColor): IndicatorColor {
+  if (dotColor) return dotColor
+  return color === 'default' || color === 'secondary' ? 'default' : (color as IndicatorColor)
 }
 
 /**
- * Badge component for status indicators and labels.
+ * Badge — a `Pill` preset for status indicators and labels.
  *
  * @example
  * <Badge color="success">Active</Badge>
@@ -77,28 +77,25 @@ export function Badge({
   ...props
 }: BadgeProps) {
   return (
-    <View
+    <Pill
+      variant={variant as PillVariant}
+      tone={colorToTone[color]}
+      leading={
+        dot ? (
+          <Indicator size="xs" color={dotIndicatorColor(color, dotColor)} className="mr-0.5" />
+        ) : undefined
+      }
       className={cn(
-        'inline-flex items-center justify-center rounded-full font-medium',
-        variantColorStyles[variant][color],
+        'justify-center self-auto gap-0',
+        variant === 'outline' ? 'border' : 'border-0',
         sizeStyles[size],
         className
       )}
+      textClassName={cn('font-sans font-medium', textSizeStyles[size])}
       {...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>
-      ) : (
-        children
-      )}
-    </View>
+      {children}
+    </Pill>
   )
 }
 
@@ -111,9 +108,5 @@ export interface BadgeTextProps {
  * Text component for Badge content.
  */
 export function BadgeText({ children, className }: BadgeTextProps) {
-  return (
-    <Text className={cn('text-inherit font-medium', className)}>
-      {children}
-    </Text>
-  )
+  return <Text className={cn('text-inherit font-medium', className)}>{children}</Text>
 }

package/src/components/ui/breadcrumbs/Breadcrumbs.stories.tsx

@@ -5,7 +5,7 @@ import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs'
 const meta: Meta<typeof Breadcrumbs> = {
   title: 'Components/Molecules/Breadcrumbs',
   component: Breadcrumbs,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     maxItems: {
       control: 'number',

package/src/components/ui/breadcrumbs/Breadcrumbs.tsx

@@ -36,11 +36,7 @@ export function Breadcrumbs({
   if (maxItems && items.length > maxItems) {
     const firstItem = items[0]
     const lastItems = items.slice(-Math.floor(maxItems / 2))
-    displayItems = [
-      firstItem,
-      <BreadcrumbEllipsis key="ellipsis" />,
-      ...lastItems,
-    ]
+    displayItems = [firstItem, <BreadcrumbEllipsis key="ellipsis" />, ...lastItems]
   }
 
   return (
@@ -53,9 +49,7 @@ export function Breadcrumbs({
         <View key={index} className="flex-row items-center">
           {child}
           {index < displayItems.length - 1 && (
-            <Text className="mx-2 text-text-tertiary text-sm">
-              {separator}
-            </Text>
+            <Text className="mx-2 text-text-tertiary text-sm">{separator}</Text>
           )}
         </View>
       ))}
@@ -98,11 +92,7 @@ export function BreadcrumbItem({
   }
 
   return (
-    <Pressable
-      onPress={onPress}
-      accessibilityRole="link"
-      accessibilityHint={href}
-    >
+    <Pressable onPress={onPress} accessibilityRole="link" accessibilityHint={href}>
       <Text
         className={cn(
           'text-sm text-text-secondary',
@@ -121,7 +111,5 @@ export function BreadcrumbItem({
  * Ellipsis for collapsed breadcrumbs.
  */
 function BreadcrumbEllipsis() {
-  return (
-    <Text className="text-sm text-text-tertiary">...</Text>
-  )
+  return <Text className="text-sm text-text-tertiary">...</Text>
 }

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

@@ -5,7 +5,7 @@ import { Button, ButtonText, ButtonIcon } from './Button'
 const meta: Meta<typeof Button> = {
   title: 'Components/Molecules/Button',
   component: Button,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -158,12 +158,24 @@ export const AllColors: Story = {
   render: () => (
     <View style={{ gap: 8 }}>
       <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
-        <Button color="primary"><ButtonText>Primary</ButtonText></Button>
-        <Button color="secondary"><ButtonText>Secondary</ButtonText></Button>
-        <Button color="success"><ButtonText>Success</ButtonText></Button>
-        <Button color="error"><ButtonText>Error</ButtonText></Button>
-        <Button color="warning"><ButtonText>Warning</ButtonText></Button>
-        <Button color="info"><ButtonText>Info</ButtonText></Button>
+        <Button color="primary">
+          <ButtonText>Primary</ButtonText>
+        </Button>
+        <Button color="secondary">
+          <ButtonText>Secondary</ButtonText>
+        </Button>
+        <Button color="success">
+          <ButtonText>Success</ButtonText>
+        </Button>
+        <Button color="error">
+          <ButtonText>Error</ButtonText>
+        </Button>
+        <Button color="warning">
+          <ButtonText>Warning</ButtonText>
+        </Button>
+        <Button color="info">
+          <ButtonText>Info</ButtonText>
+        </Button>
       </View>
     </View>
   ),
@@ -172,9 +184,15 @@ export const AllColors: Story = {
 export const AllSizes: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
-      <Button size="sm"><ButtonText>Small</ButtonText></Button>
-      <Button size="md"><ButtonText>Medium</ButtonText></Button>
-      <Button size="lg"><ButtonText>Large</ButtonText></Button>
+      <Button size="sm">
+        <ButtonText>Small</ButtonText>
+      </Button>
+      <Button size="md">
+        <ButtonText>Medium</ButtonText>
+      </Button>
+      <Button size="lg">
+        <ButtonText>Large</ButtonText>
+      </Button>
     </View>
   ),
 }
@@ -183,8 +201,24 @@ export const AllSizes: Story = {
 function PlusIcon({ size = 16 }: { size?: number }) {
   return (
     <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
-      <View style={{ position: 'absolute', width: size * 0.6, height: 2, backgroundColor: 'currentColor', borderRadius: 1 }} />
-      <View style={{ position: 'absolute', width: 2, height: size * 0.6, backgroundColor: 'currentColor', borderRadius: 1 }} />
+      <View
+        style={{
+          position: 'absolute',
+          width: size * 0.6,
+          height: 2,
+          backgroundColor: 'currentColor',
+          borderRadius: 1,
+        }}
+      />
+      <View
+        style={{
+          position: 'absolute',
+          width: 2,
+          height: size * 0.6,
+          backgroundColor: 'currentColor',
+          borderRadius: 1,
+        }}
+      />
     </View>
   )
 }