@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/ui/chip/Chip.tsx

@@ -1,9 +1,17 @@
 import React from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Pill, type PillTone, type PillVariant } from '../pill'
 
 export type ChipVariant = 'solid' | 'subtle' | 'outline'
-export type ChipColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info'
+export type ChipColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
 export type ChipSize = 'sm' | 'md' | 'lg'
 
 export interface ChipProps extends ViewProps {
@@ -26,52 +34,53 @@ export interface ChipProps extends ViewProps {
   children?: React.ReactNode
 }
 
-const colorStyles: Record<ChipColor, Record<ChipVariant, string>> = {
-  default: {
-    solid: 'bg-neutral-600 text-white',
-    subtle: 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-200',
-    outline: 'border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200',
-  },
-  primary: {
-    solid: 'bg-brand-primary text-white',
-    subtle: 'bg-brand-primary-subtle text-brand-primary',
-    outline: 'border border-brand-primary text-brand-primary',
-  },
-  secondary: {
-    solid: 'bg-brand-secondary text-white',
-    subtle: 'bg-brand-secondary-subtle text-brand-secondary',
-    outline: 'border border-brand-secondary text-brand-secondary',
-  },
-  success: {
-    solid: 'bg-status-success text-white',
-    subtle: 'bg-status-success-subtle text-status-success',
-    outline: 'border border-status-success text-status-success',
-  },
-  error: {
-    solid: 'bg-status-error text-white',
-    subtle: 'bg-status-error-subtle text-status-error',
-    outline: 'border border-status-error text-status-error',
-  },
-  warning: {
-    solid: 'bg-status-warning text-white',
-    subtle: 'bg-status-warning-subtle text-status-warning',
-    outline: 'border border-status-warning text-status-warning',
-  },
-  info: {
-    solid: 'bg-status-info text-white',
-    subtle: 'bg-status-info-subtle text-status-info',
-    outline: 'border border-status-info text-status-info',
-  },
+const colorToTone: Record<ChipColor, PillTone> = {
+  default: 'neutral',
+  primary: 'brand',
+  secondary: 'brand-secondary',
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
 }
 
+/** Chip keeps its own geometry and squared corners; Pill supplies the rest. */
 const sizeStyles: Record<ChipSize, { container: string; text: string; deleteButton: string }> = {
   sm: { container: 'px-2 py-0.5 rounded', text: 'text-xs', deleteButton: 'ml-1 -mr-0.5' },
   md: { container: 'px-3 py-1 rounded-md', text: 'text-sm', deleteButton: 'ml-1.5 -mr-1' },
   lg: { container: 'px-4 py-1.5 rounded-md', text: 'text-base', deleteButton: 'ml-2 -mr-1' },
 }
 
+function DeleteButton({
+  onDelete,
+  isDisabled,
+  className,
+}: {
+  onDelete: () => void
+  isDisabled: boolean
+  className: string
+}) {
+  return (
+    <Pressable
+      onPress={(e) => {
+        e.stopPropagation?.()
+        onDelete()
+      }}
+      accessibilityRole="button"
+      accessibilityLabel="Remove"
+      disabled={isDisabled}
+      className={cn(
+        className,
+        'rounded-full p-0.5 web:hover:bg-hairline-subtle active:bg-hairline-strong'
+      )}
+    >
+      <Text className="text-xs leading-none text-inherit">×</Text>
+    </Pressable>
+  )
+}
+
 /**
- * Chip component for tags, labels, and filters.
+ * Chip — a `Pill` preset for tags, labels, and filters.
  *
  * @example
  * <Chip>Default</Chip>
@@ -92,60 +101,36 @@ export function Chip({
   ...props
 }: ChipProps) {
   const sizes = sizeStyles[size]
-  const isClickable = !!onPress
-
-  const content = (
-    <>
-      {leftElement && <View className="mr-1.5">{leftElement}</View>}
-      <Text className={cn('font-medium', sizes.text)}>
-        {children}
-      </Text>
-      {onDelete && (
-        <Pressable
-          onPress={(e) => {
-            e.stopPropagation?.()
-            onDelete()
-          }}
-          accessibilityRole="button"
-          accessibilityLabel="Remove"
-          disabled={isDisabled}
-          className={cn(
-            sizes.deleteButton,
-            'rounded-full p-0.5 web:hover:bg-black/10 active:bg-black/20'
-          )}
-        >
-          <Text className="text-xs leading-none">×</Text>
-        </Pressable>
-      )}
-    </>
-  )
-
-  const baseClassName = cn(
-    'flex-row items-center',
-    sizes.container,
-    colorStyles[color][variant],
-    isClickable && 'web:cursor-pointer web:hover:opacity-80 active:opacity-70',
-    isDisabled && 'opacity-50 cursor-not-allowed',
-    className
-  )
-
-  if (isClickable) {
-    return (
-      <Pressable
-        onPress={onPress}
-        disabled={isDisabled}
-        accessibilityRole="button"
-        className={baseClassName}
-        {...props}
-      >
-        {content}
-      </Pressable>
-    )
-  }
 
   return (
-    <View className={baseClassName} {...props}>
-      {content}
-    </View>
+    <Pill
+      variant={variant as PillVariant}
+      tone={colorToTone[color]}
+      rounded={false}
+      onPress={onPress}
+      isDisabled={isDisabled}
+      leading={leftElement && <View className="mr-1.5">{leftElement}</View>}
+      trailing={
+        onDelete && (
+          <DeleteButton
+            onDelete={onDelete}
+            isDisabled={isDisabled}
+            className={sizes.deleteButton}
+          />
+        )
+      }
+      className={cn(
+        'self-auto gap-0',
+        variant === 'outline' ? 'border' : 'border-0',
+        sizes.container,
+        onPress && 'web:cursor-pointer web:hover:opacity-80 active:opacity-70',
+        isDisabled && 'cursor-not-allowed',
+        className
+      )}
+      textClassName={cn('font-sans font-medium', sizes.text)}
+      {...props}
+    >
+      {children}
+    </Pill>
   )
 }

package/src/components/ui/collapse/Collapse.stories.tsx

@@ -14,7 +14,7 @@ import {
 const meta: Meta<typeof Accordion> = {
   title: 'Components/Organisms/Accordion',
   component: Accordion,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     allowMultiple: {
       control: 'boolean',
@@ -79,8 +79,8 @@ export const AllowMultiple: Story = {
           <AccordionButton>Section Two</AccordionButton>
           <AccordionPanel>
             <Text className="text-text-secondary text-sm">
-              This section can be open alongside Section One. In single mode, opening a new
-              section would close any previously open one.
+              This section can be open alongside Section One. In single mode, opening a new section
+              would close any previously open one.
             </Text>
           </AccordionPanel>
         </AccordionItem>
@@ -121,9 +121,7 @@ export const DefaultOpen: Story = {
         <AccordionItem>
           <AccordionButton>Also Closed</AccordionButton>
           <AccordionPanel>
-            <Text className="text-text-secondary text-sm">
-              Another closed section.
-            </Text>
+            <Text className="text-text-secondary text-sm">Another closed section.</Text>
           </AccordionPanel>
         </AccordionItem>
       </Accordion>
@@ -146,9 +144,7 @@ export const MultipleDefaultOpen: Story = {
         <AccordionItem>
           <AccordionButton>Second (Closed)</AccordionButton>
           <AccordionPanel>
-            <Text className="text-text-secondary text-sm">
-              This section starts closed.
-            </Text>
+            <Text className="text-text-secondary text-sm">This section starts closed.</Text>
           </AccordionPanel>
         </AccordionItem>
         <AccordionItem>
@@ -191,14 +187,18 @@ export const WithRichContent: Story = {
           <AccordionButton>Features Included</AccordionButton>
           <AccordionPanel>
             <View style={{ gap: 6 }}>
-              {['Unlimited projects', 'Custom domains', 'Priority support', 'API access', 'Team collaboration'].map(
-                (feature) => (
-                  <View key={feature} style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                    <Text className="text-status-success text-sm">&#10003;</Text>
-                    <Text className="text-text-primary text-sm">{feature}</Text>
-                  </View>
-                )
-              )}
+              {[
+                'Unlimited projects',
+                'Custom domains',
+                'Priority support',
+                'API access',
+                'Team collaboration',
+              ].map((feature) => (
+                <View key={feature} style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                  <Text className="text-status-success text-sm">&#10003;</Text>
+                  <Text className="text-text-primary text-sm">{feature}</Text>
+                </View>
+              ))}
             </View>
           </AccordionPanel>
         </AccordionItem>
@@ -213,7 +213,9 @@ export const WithRichContent: Story = {
                 </Text>
               </View>
               <View style={{ gap: 2 }}>
-                <Text className="text-text-primary text-sm font-medium">Is there a free trial?</Text>
+                <Text className="text-text-primary text-sm font-medium">
+                  Is there a free trial?
+                </Text>
                 <Text className="text-text-secondary text-sm">
                   We offer a 14-day free trial for all plans.
                 </Text>
@@ -291,9 +293,7 @@ export const CollapseControlled: Story = {
     const [isOpen, setIsOpen] = useState(false)
     return (
       <View style={{ width: 400, gap: 8 }}>
-        <Text className="text-sm text-text-secondary">
-          State: {isOpen ? 'Open' : 'Closed'}
-        </Text>
+        <Text className="text-sm text-text-secondary">State: {isOpen ? 'Open' : 'Closed'}</Text>
         <Collapse isOpen={isOpen} onToggle={setIsOpen}>
           <CollapseButton>
             <Text className="text-text-primary font-medium">Controlled Collapse</Text>
@@ -301,8 +301,8 @@ export const CollapseControlled: Story = {
           <CollapseContent>
             <View className="px-4 pb-3">
               <Text className="text-text-secondary text-sm">
-                This collapse is controlled externally. The isOpen prop and onToggle callback
-                manage state outside the component.
+                This collapse is controlled externally. The isOpen prop and onToggle callback manage
+                state outside the component.
               </Text>
             </View>
           </CollapseContent>

package/src/components/ui/collapse/Collapse.tsx

@@ -67,19 +67,22 @@ export function Collapse({
 
 export interface CollapseButtonProps {
   children?: React.ReactNode
+  /** Accessible name when the button carries no text of its own (a bare chevron). */
+  accessibilityLabel?: string
   className?: string
 }
 
 /**
  * Button to toggle collapse state.
  */
-export function CollapseButton({ children, className }: CollapseButtonProps) {
+export function CollapseButton({ children, accessibilityLabel, className }: CollapseButtonProps) {
   const { isOpen, toggle } = useContext(CollapseContext)
 
   return (
     <Pressable
       onPress={toggle}
       accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
       accessibilityState={{ expanded: isOpen }}
       className={cn(
         'flex-row items-center justify-between py-3 px-4',
@@ -108,11 +111,7 @@ export function CollapseContent({ children, className }: CollapseContentProps) {
 
   if (!isOpen) return null
 
-  return (
-    <View className={cn('overflow-hidden', className)}>
-      {children}
-    </View>
-  )
+  return <View className={cn('overflow-hidden', className)}>{children}</View>
 }
 
 // Accordion component
@@ -267,9 +266,5 @@ export interface AccordionPanelProps {
 export function AccordionPanel({ isOpen = false, children, className }: AccordionPanelProps) {
   if (!isOpen) return null
 
-  return (
-    <View className={cn('pb-4 px-1', className)}>
-      {children}
-    </View>
-  )
+  return <View className={cn('pb-4 px-1', className)}>{children}</View>
 }

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -5,7 +5,7 @@ import { DataRow } from './DataRow'
 const meta: Meta<typeof DataRow> = {
   title: 'Components/Molecules/DataRow',
   component: DataRow,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     label: {
       control: 'text',
@@ -40,8 +40,19 @@ export const WithCustomValue: Story = {
     <DataRow
       label="Status"
       value={
-        <View style={{ backgroundColor: '#22c55e', borderRadius: 9999, paddingHorizontal: 8, paddingVertical: 2 }}>
-          <Text style={{ color: '#fff', fontSize: 12, fontWeight: '600' }}>Active</Text>
+        <View
+          style={{
+            backgroundColor: 'var(--color-status-success)',
+            borderRadius: 9999,
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+          }}
+        >
+          <Text
+            style={{ color: 'var(--color-on-status-success)', fontSize: 12, fontWeight: '600' }}
+          >
+            Active
+          </Text>
         </View>
       }
     />

package/src/components/ui/data-row/DataRow.test.tsx

@@ -11,9 +11,7 @@ describe('DataRow', () => {
   })
 
   it('renders label and ReactNode value', () => {
-    render(
-      <DataRow label="Status" value={<span data-testid="custom-node">Active</span>} />
-    )
+    render(<DataRow label="Status" value={<span data-testid="custom-node">Active</span>} />)
     expect(screen.getByText('Status')).toBeInTheDocument()
     expect(screen.getByTestId('custom-node')).toBeInTheDocument()
     expect(screen.getByText('Active')).toBeInTheDocument()
@@ -34,24 +32,18 @@ describe('DataRow', () => {
   })
 
   it('applies custom className to root container', () => {
-    const { container } = render(
-      <DataRow label="Test" value="Value" className="bg-red-500" />
-    )
+    const { container } = render(<DataRow label="Test" value="Value" className="bg-red-500" />)
     const root = container.firstChild as HTMLElement
     expect(root).toBeInTheDocument()
   })
 
   it('applies valueClassName to string value', () => {
-    render(
-      <DataRow label="Test" value="Value" valueClassName="text-lg" />
-    )
+    render(<DataRow label="Test" value="Value" valueClassName="text-lg" />)
     expect(screen.getByText('Value')).toBeInTheDocument()
   })
 
   it('applies valueClassName to ReactNode wrapper', () => {
-    render(
-      <DataRow label="Test" value={<span>Node</span>} valueClassName="text-lg" />
-    )
+    render(<DataRow label="Test" value={<span>Node</span>} valueClassName="text-lg" />)
     expect(screen.getByText('Node')).toBeInTheDocument()
   })
 
@@ -68,9 +60,7 @@ describe('DataRow', () => {
     })
 
     it('has no accessibility violations with ReactNode value', async () => {
-      const { container } = render(
-        <DataRow label="Status" value={<span>Active</span>} />
-      )
+      const { container } = render(<DataRow label="Status" value={<span>Active</span>} />)
       const results = await axe(container)
       expect(results).toHaveNoViolations()
     })

package/src/components/ui/data-row/DataRow.tsx

@@ -3,24 +3,35 @@ import { View, Text, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
 
 export interface DataRowProps extends ViewProps {
-  /** Descriptive label shown on the left */
-  label: string
+  /** Descriptive label shown on the left -- string renders as Text, ReactNode renders inside a View */
+  label: React.ReactNode
   /** Value shown on the right -- string renders as Text, ReactNode renders inside a View */
   value: React.ReactNode
+  /** Additional className applied to the label element */
+  labelClassName?: string
   /** Additional className applied to the value element */
   valueClassName?: string
   /** Additional className applied to the root container */
   className?: string
 }
 
-export function DataRow({ label, value, valueClassName, className, ...props }: DataRowProps) {
+export function DataRow({
+  label,
+  value,
+  labelClassName,
+  valueClassName,
+  className,
+  ...props
+}: DataRowProps) {
   return (
     <View className={cn('flex-row items-center justify-between py-2', className)} {...props}>
-      <Text className="text-sm text-text-secondary">{label}</Text>
+      {typeof label === 'string' ? (
+        <Text className={cn('text-sm text-text-secondary', labelClassName)}>{label}</Text>
+      ) : (
+        <View className={cn(labelClassName)}>{label}</View>
+      )}
       {typeof value === 'string' ? (
-        <Text className={cn('text-sm font-medium text-text-primary', valueClassName)}>
-          {value}
-        </Text>
+        <Text className={cn('text-sm font-medium text-text-primary', valueClassName)}>{value}</Text>
       ) : (
         <View className={cn(valueClassName)}>{value}</View>
       )}

package/src/components/ui/divider/Divider.stories.tsx

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

package/src/components/ui/divider/Divider.tsx

@@ -18,11 +18,7 @@ export interface DividerProps extends ViewProps {
  * <Divider />
  * <Divider orientation="vertical" />
  */
-export function Divider({
-  orientation = 'horizontal',
-  className,
-  ...props
-}: DividerProps) {
+export function Divider({ orientation = 'horizontal', className, ...props }: DividerProps) {
   return (
     <View
       accessibilityRole="none"

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -7,7 +7,7 @@ import { Button, ButtonText } from '../button'
 const meta: Meta<typeof Drawer> = {
   title: 'Components/Organisms/Drawer',
   component: Drawer,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     placement: {
       control: 'select',
@@ -37,11 +37,7 @@ export const Default: Story = {
         <Button onPress={() => setIsOpen(true)}>
           <ButtonText>Open Drawer</ButtonText>
         </Button>
-        <Drawer
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          title="Drawer Title"
-        >
+        <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} title="Drawer Title">
           <DrawerBody>
             <Text className="text-text-primary">
               This is the drawer content. You can put any content here.
@@ -124,7 +120,7 @@ export const AllSizes: Story = {
   render: function Render() {
     const [openSize, setOpenSize] = useState<string | null>(null)
     const sizes = ['sm', 'md', 'lg', 'xl'] as const
-    
+
     return (
       <View className="flex-row gap-2 flex-wrap">
         {sizes.map((size) => (
@@ -141,9 +137,7 @@ export const AllSizes: Story = {
             title={`${size.toUpperCase()} Drawer`}
           >
             <DrawerBody>
-              <Text className="text-text-primary">
-                This is a {size} size drawer.
-              </Text>
+              <Text className="text-text-primary">This is a {size} size drawer.</Text>
             </DrawerBody>
           </Drawer>
         ))}
@@ -160,12 +154,7 @@ export const WithFooter: Story = {
         <Button onPress={() => setIsOpen(true)}>
           <ButtonText>Open Form Drawer</ButtonText>
         </Button>
-        <Drawer
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          title="Edit Profile"
-          size="lg"
-        >
+        <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} title="Edit Profile" size="lg">
           <DrawerBody>
             <View className="gap-4">
               <View>

package/src/components/ui/drawer/Drawer.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { View, Text, Pressable, Modal, ScrollView, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom'
 export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
@@ -99,23 +100,20 @@ export function Drawer({
   }
 
   return (
-    <Modal
-      visible={isOpen}
-      transparent
-      animationType="fade"
-      onRequestClose={onClose}
-    >
+    <Modal visible={isOpen} transparent animationType="fade" onRequestClose={onClose}>
       <View className="flex-1">
         {/* Backdrop */}
         <Pressable
           onPress={handleOverlayPress}
-          className="absolute inset-0 bg-black/50"
+          className="absolute inset-0 bg-black/50" /* VW-82: scrim, see Modal.tsx */
         />
 
-        {/* Drawer Panel */}
-        <View
+        {/* Drawer Panel — floating: overlay plane + lift, no ring. */}
+        <Surface
+          elevation={4}
+          rounded={false}
           className={cn(
-            'absolute bg-surface-elevated shadow-2xl',
+            'absolute',
             placementStyles[placement],
             sizeStyles[placement][size],
             className
@@ -126,11 +124,7 @@ export function Drawer({
           {/* Header */}
           {(title || showCloseButton) && (
             <View className="flex-row items-center justify-between px-4 py-3 border-b border-hairline">
-              {title && (
-                <Text className="text-lg font-semibold text-text-primary">
-                  {title}
-                </Text>
-              )}
+              {title && <Text className="text-lg font-semibold text-text-primary">{title}</Text>}
               {showCloseButton && (
                 <Pressable
                   onPress={onClose}
@@ -144,10 +138,8 @@ export function Drawer({
           )}
 
           {/* Content */}
-          <View className="flex-1">
-            {children}
-          </View>
-        </View>
+          <View className="flex-1">{children}</View>
+        </Surface>
       </View>
     </Modal>
   )
@@ -164,10 +156,7 @@ export interface DrawerHeaderProps extends ViewProps {
  */
 export function DrawerHeader({ className, children, ...props }: DrawerHeaderProps) {
   return (
-    <View
-      className={cn('px-4 py-3 border-b border-hairline', className)}
-      {...props}
-    >
+    <View className={cn('px-4 py-3 border-b border-hairline', className)} {...props}>
       {children}
     </View>
   )
@@ -187,10 +176,7 @@ export interface DrawerBodyProps extends ViewProps {
 export function DrawerBody({ scrollable = true, className, children, ...props }: DrawerBodyProps) {
   if (scrollable) {
     return (
-      <ScrollView
-        className={cn('flex-1 p-4', className)}
-        {...props}
-      >
+      <ScrollView className={cn('flex-1 p-4', className)} {...props}>
         {children}
       </ScrollView>
     )