@titan-design/react-ui 0.12.1 → 0.14.0

package/src/components/ui/input/Input.stories.tsx

@@ -5,7 +5,7 @@ import { Input, InputGroup, PasswordInput } from './Input'
 const meta: Meta<typeof Input> = {
   title: 'Components/Molecules/Input',
   component: Input,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -161,10 +161,7 @@ function SearchIcon() {
 export const WithLeftElement: Story = {
   render: () => (
     <View style={{ gap: 16, width: 300 }}>
-      <Input
-        placeholder="Search..."
-        leftElement={<SearchIcon />}
-      />
+      <Input placeholder="Search..." leftElement={<SearchIcon />} />
     </View>
   ),
 }
@@ -181,12 +178,7 @@ export const FormExample: Story = {
         helperText="Must be at least 8 characters"
         isRequired
       />
-      <Input
-        label="Bio"
-        placeholder="Tell us about yourself..."
-        multiline
-        numberOfLines={3}
-      />
+      <Input label="Bio" placeholder="Tell us about yourself..." multiline numberOfLines={3} />
     </InputGroup>
   ),
 }

package/src/components/ui/input/Input.test.tsx

@@ -25,13 +25,7 @@ describe('Input', () => {
   })
 
   it('displays error message when isInvalid', () => {
-    render(
-      <Input
-        isInvalid
-        errorMessage="Invalid input"
-        helperText="This should not show"
-      />
-    )
+    render(<Input isInvalid errorMessage="Invalid input" helperText="This should not show" />)
     expect(screen.getByText('Invalid input')).toBeInTheDocument()
     expect(screen.queryByText('This should not show')).not.toBeInTheDocument()
   })
@@ -62,9 +56,7 @@ describe('Input', () => {
 
   describe('accessibility', () => {
     it('has no accessibility violations', async () => {
-      const { container } = render(
-        <Input label="Email" placeholder="Enter your email" />
-      )
+      const { container } = render(<Input label="Email" placeholder="Enter your email" />)
 
       const results = await axe(container)
       expect(results).toHaveNoViolations()

package/src/components/ui/input/Input.tsx

@@ -50,7 +50,10 @@ const multilineSizeStyles: Record<InputSize, string> = {
   lg: 'min-h-[120px] px-4 py-3 text-lg',
 }
 
-const variantStyles: Record<InputVariant, { base: string; focus: string; hover: string; error: string }> = {
+const variantStyles: Record<
+  InputVariant,
+  { base: string; focus: string; hover: string; error: string }
+> = {
   outline: {
     base: 'border border-border-input rounded-md bg-transparent',
     hover: 'web:hover:border-border-input-hover',
@@ -146,11 +149,7 @@ export const Input = forwardRef<TextInput, InputProps>(function Input(
           isDisabled && 'opacity-40 cursor-not-allowed'
         )}
       >
-        {leftElement && (
-          <View className={cn('pl-3 pr-1', multiline && 'pt-3')}>
-            {leftElement}
-          </View>
-        )}
+        {leftElement && <View className={cn('pl-3 pr-1', multiline && 'pt-3')}>{leftElement}</View>}
 
         <TextInput
           ref={ref}
@@ -176,23 +175,13 @@ export const Input = forwardRef<TextInput, InputProps>(function Input(
         />
 
         {rightElement && (
-          <View className={cn('pl-1 pr-3', multiline && 'pt-3')}>
-            {rightElement}
-          </View>
+          <View className={cn('pl-1 pr-3', multiline && 'pt-3')}>{rightElement}</View>
         )}
       </View>
 
-      {showHelper && (
-        <Text className="mt-1.5 text-xs text-text-secondary">
-          {helperText}
-        </Text>
-      )}
+      {showHelper && <Text className="mt-1.5 text-xs text-text-secondary">{helperText}</Text>}
 
-      {showError && (
-        <Text className="mt-1.5 text-xs text-status-error">
-          {errorMessage}
-        </Text>
-      )}
+      {showError && <Text className="mt-1.5 text-xs text-status-error">{errorMessage}</Text>}
     </View>
   )
 })
@@ -206,11 +195,7 @@ export interface InputGroupProps {
  * Container for grouping related inputs.
  */
 export function InputGroup({ children, className }: InputGroupProps) {
-  return (
-    <View className={cn('flex-col gap-4', className)}>
-      {children}
-    </View>
-  )
+  return <View className={cn('flex-col gap-4', className)}>{children}</View>
 }
 
 export interface PasswordInputProps extends Omit<InputProps, 'secureTextEntry' | 'rightElement'> {
@@ -264,7 +249,7 @@ export const PasswordInput = forwardRef<TextInput, PasswordInputProps>(function
           accessibilityLabel={isVisible ? 'Hide password' : 'Show password'}
           className="p-1 rounded active:opacity-70"
         >
-          {isVisible ? (hideIcon || defaultHideIcon) : (showIcon || defaultShowIcon)}
+          {isVisible ? hideIcon || defaultHideIcon : showIcon || defaultShowIcon}
         </Pressable>
       }
       {...props}

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

@@ -1,2 +1,8 @@
 export { Input, InputGroup, PasswordInput } from './Input'
-export type { InputProps, InputGroupProps, PasswordInputProps, InputSize, InputVariant } from './Input'
+export type {
+  InputProps,
+  InputGroupProps,
+  PasswordInputProps,
+  InputSize,
+  InputVariant,
+} from './Input'

package/src/components/ui/link/Link.stories.tsx

@@ -5,7 +5,7 @@ import { Link } from './Link'
 const meta: Meta<typeof Link> = {
   title: 'Components/Atoms/Link',
   component: Link,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     color: {
       control: 'select',
@@ -43,9 +43,15 @@ export const Default: Story = {
 export const AllColors: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 16 }}>
-      <Link color="default" onPress={() => {}}>Default</Link>
-      <Link color="primary" onPress={() => {}}>Primary</Link>
-      <Link color="secondary" onPress={() => {}}>Secondary</Link>
+      <Link color="default" onPress={() => {}}>
+        Default
+      </Link>
+      <Link color="primary" onPress={() => {}}>
+        Primary
+      </Link>
+      <Link color="secondary" onPress={() => {}}>
+        Secondary
+      </Link>
     </View>
   ),
 }
@@ -53,9 +59,15 @@ export const AllColors: Story = {
 export const UnderlineStyles: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', gap: 16 }}>
-      <Link underline="always" onPress={() => {}}>Always</Link>
-      <Link underline="hover" onPress={() => {}}>Hover</Link>
-      <Link underline="none" onPress={() => {}}>None</Link>
+      <Link underline="always" onPress={() => {}}>
+        Always
+      </Link>
+      <Link underline="hover" onPress={() => {}}>
+        Hover
+      </Link>
+      <Link underline="none" onPress={() => {}}>
+        None
+      </Link>
     </View>
   ),
 }

package/src/components/ui/list-item/ListItem.stories.tsx

@@ -7,11 +7,23 @@ import {
   ListItemTrailing,
   ListItemDivider,
 } from './ListItem'
+import { greyRamp } from '../../../theme/tokens/primitives'
 
 function UserIcon({ size = 20 }: { size?: number; className?: string }) {
   return (
-    <View style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: '#6366f1', justifyContent: 'center', alignItems: 'center' }}>
-      <Text style={{ color: '#fff', fontSize: size * 0.5, fontWeight: '600' }}>U</Text>
+    <View
+      style={{
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: 'var(--color-avatar-background)',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Text style={{ color: 'var(--color-avatar-text)', fontSize: size * 0.5, fontWeight: '600' }}>
+        U
+      </Text>
     </View>
   )
 }
@@ -41,13 +53,13 @@ function LockIcon({ size = 20 }: { size?: number; className?: string }) {
 }
 
 function ChevronRight({ size = 16 }: { size?: number }) {
-  return <Text style={{ color: '#9ca3af', fontSize: size }}>{'>'}</Text>
+  return <Text style={{ color: greyRamp[400], fontSize: size }}>{'>'}</Text>
 }
 
 const meta: Meta<typeof ListItem> = {
   title: 'Components/Molecules/ListItem',
   component: ListItem,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
 }
 
 export default meta
@@ -124,7 +136,7 @@ export const SettingsList: Story = {
         <ListItemIcon icon={WifiIcon} />
         <ListItemContent title="Wi-Fi" subtitle="HomeNetwork" />
         <ListItemTrailing>
-          <Text style={{ color: '#22c55e', fontSize: 12 }}>Connected</Text>
+          <Text style={{ color: 'var(--color-status-success)', fontSize: 12 }}>Connected</Text>
         </ListItemTrailing>
       </ListItem>
     </View>

package/src/components/ui/list-item/ListItem.tsx

@@ -50,9 +50,7 @@ export function ListItemContent({ title, subtitle, className, ...props }: ListIt
   return (
     <View className={cn('flex-1 justify-center', className)} {...props}>
       <Text className="text-sm font-medium text-text-primary">{title}</Text>
-      {subtitle && (
-        <Text className="text-xs text-text-secondary mt-0.5">{subtitle}</Text>
-      )}
+      {subtitle && <Text className="text-xs text-text-secondary mt-0.5">{subtitle}</Text>}
     </View>
   )
 }
@@ -80,10 +78,5 @@ export interface ListItemDividerProps extends ViewProps {
 }
 
 export function ListItemDivider({ inset = true, className, ...props }: ListItemDividerProps) {
-  return (
-    <View
-      className={cn('h-px bg-divider', inset ? 'ml-14' : '', className)}
-      {...props}
-    />
-  )
+  return <View className={cn('h-px bg-divider', inset ? 'ml-14' : '', className)} {...props} />
 }

package/src/components/ui/menu/Menu.stories.tsx

@@ -68,21 +68,15 @@ export const WithGroups: Story = {
 }
 
 function EditIcon({ size = 14 }: { size?: number }) {
-  return (
-    <Text style={{ fontSize: size, lineHeight: size }}>&#9998;</Text>
-  )
+  return <Text style={{ fontSize: size, lineHeight: size }}>&#9998;</Text>
 }
 
 function TrashIcon({ size = 14 }: { size?: number }) {
-  return (
-    <Text style={{ fontSize: size, lineHeight: size }}>&#128465;</Text>
-  )
+  return <Text style={{ fontSize: size, lineHeight: size }}>&#128465;</Text>
 }
 
 function CopyIcon({ size = 14 }: { size?: number }) {
-  return (
-    <Text style={{ fontSize: size, lineHeight: size }}>&#128203;</Text>
-  )
+  return <Text style={{ fontSize: size, lineHeight: size }}>&#128203;</Text>
 }
 
 export const WithIcons: Story = {
@@ -94,10 +88,16 @@ export const WithIcons: Story = {
         </Button>
       </MenuTrigger>
       <MenuList>
-        <MenuItem icon={<EditIcon />} onPress={() => {}}>Edit</MenuItem>
-        <MenuItem icon={<CopyIcon />} onPress={() => {}}>Duplicate</MenuItem>
+        <MenuItem icon={<EditIcon />} onPress={() => {}}>
+          Edit
+        </MenuItem>
+        <MenuItem icon={<CopyIcon />} onPress={() => {}}>
+          Duplicate
+        </MenuItem>
         <MenuDivider />
-        <MenuItem icon={<TrashIcon />} onPress={() => {}} isDestructive>Delete</MenuItem>
+        <MenuItem icon={<TrashIcon />} onPress={() => {}} isDestructive>
+          Delete
+        </MenuItem>
       </MenuList>
     </Menu>
   ),
@@ -115,7 +115,9 @@ export const DestructiveItem: Story = {
         <MenuItem onPress={() => {}}>Edit Profile</MenuItem>
         <MenuItem onPress={() => {}}>Change Password</MenuItem>
         <MenuDivider />
-        <MenuItem onPress={() => {}} isDestructive>Delete Account</MenuItem>
+        <MenuItem onPress={() => {}} isDestructive>
+          Delete Account
+        </MenuItem>
       </MenuList>
     </Menu>
   ),
@@ -152,11 +154,15 @@ export const DisabledItems: Story = {
       </MenuTrigger>
       <MenuList>
         <MenuItem onPress={() => {}}>Undo</MenuItem>
-        <MenuItem onPress={() => {}} isDisabled>Redo</MenuItem>
+        <MenuItem onPress={() => {}} isDisabled>
+          Redo
+        </MenuItem>
         <MenuDivider />
         <MenuItem onPress={() => {}}>Cut</MenuItem>
         <MenuItem onPress={() => {}}>Copy</MenuItem>
-        <MenuItem onPress={() => {}} isDisabled>Paste</MenuItem>
+        <MenuItem onPress={() => {}} isDisabled>
+          Paste
+        </MenuItem>
       </MenuList>
     </Menu>
   ),

package/src/components/ui/menu/Menu.test.tsx

@@ -1,14 +1,7 @@
 import { describe, it, expect, vi } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
 import { axe } from 'jest-axe'
-import {
-  Menu,
-  MenuTrigger,
-  MenuList,
-  MenuItem,
-  MenuDivider,
-  MenuGroup,
-} from './Menu'
+import { Menu, MenuTrigger, MenuList, MenuItem, MenuDivider, MenuGroup } from './Menu'
 
 describe('Menu', () => {
   it('renders trigger element', () => {
@@ -198,9 +191,7 @@ describe('Menu', () => {
             <button>Options</button>
           </MenuTrigger>
           <MenuList>
-            <MenuItem icon={<span data-testid="edit-icon">pencil</span>}>
-              Edit
-            </MenuItem>
+            <MenuItem icon={<span data-testid="edit-icon">pencil</span>}>Edit</MenuItem>
           </MenuList>
         </Menu>
       )

package/src/components/ui/menu/Menu.tsx

@@ -1,6 +1,8 @@
 import React, { useState, createContext, useContext } from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
+import { TriggerSurface } from '../trigger'
 
 interface MenuContextType {
   isOpen: boolean
@@ -80,14 +82,14 @@ export function MenuTrigger({ children, className }: MenuTriggerProps) {
   const { isOpen, setIsOpen } = useContext(MenuContext)
 
   return (
-    <Pressable
-      onPress={() => setIsOpen(!isOpen)}
+    <TriggerSurface
+      handlers={{ onPress: () => setIsOpen(!isOpen) }}
       accessibilityRole="button"
       accessibilityState={{ expanded: isOpen }}
       className={className}
     >
       {children}
-    </Pressable>
+    </TriggerSurface>
   )
 }
 
@@ -112,18 +114,19 @@ export function MenuList({ children, className }: MenuListProps) {
         className="fixed inset-0 z-40"
         style={{ position: 'absolute' }}
       />
-      {/* Menu */}
-      <View
+      {/* Menu — floating: overlay plane + lift, no ring. */}
+      <Surface
+        elevation={4}
+        rounded={false}
         className={cn(
           'absolute z-50 top-full left-0 mt-1 min-w-[160px]',
-          'bg-surface-elevated rounded-lg shadow-lg border border-hairline',
-          'py-1 overflow-hidden',
+          'rounded-lg py-1 overflow-hidden',
           className
         )}
         accessibilityRole="menu"
       >
         {children}
-      </View>
+      </Surface>
     </>
   )
 }
@@ -175,12 +178,7 @@ export function MenuItem({
       )}
     >
       {icon && <View className="mr-3">{icon}</View>}
-      <Text
-        className={cn(
-          'text-sm',
-          isDestructive ? 'text-status-error' : 'text-text-primary'
-        )}
-      >
+      <Text className={cn('text-sm', isDestructive ? 'text-status-error' : 'text-text-primary')}>
         {children}
       </Text>
     </Pressable>

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

@@ -1,2 +1,9 @@
 export { Menu, MenuTrigger, MenuList, MenuItem, MenuDivider, MenuGroup } from './Menu'
-export type { MenuProps, MenuTriggerProps, MenuListProps, MenuItemProps, MenuDividerProps, MenuGroupProps } from './Menu'
+export type {
+  MenuProps,
+  MenuTriggerProps,
+  MenuListProps,
+  MenuItemProps,
+  MenuDividerProps,
+  MenuGroupProps,
+} from './Menu'

package/src/components/ui/modal/Modal.stories.tsx

@@ -194,8 +194,8 @@ export const ScrollableContent: Story = {
                 <Text className="text-text-primary font-semibold mb-1">Section {i + 1}</Text>
                 <Text className="text-text-secondary text-sm">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-                  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                 </Text>
               </View>
             ))}

package/src/components/ui/modal/Modal.tsx

@@ -1,6 +1,14 @@
 import React, { createContext, useContext } from 'react'
-import { Modal as RNModal, View, Text, Pressable, ScrollView, type ModalProps as RNModalProps } from 'react-native'
+import {
+  Modal as RNModal,
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  type ModalProps as RNModalProps,
+} from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
 export type ModalScrollBehavior = 'inside' | 'outside'
@@ -84,6 +92,8 @@ export function Modal({
       onPress={handleBackdropPress}
       className={cn(
         'flex-1 items-center justify-center',
+        // VW-82: scrims stay raw — Tailwind v3 drops the `/n` modifier on a
+        // `var()` colour, so a translucent role has to be its own token (proposed).
         backdropBlur ? 'bg-black/30 web:backdrop-blur-sm' : 'bg-black/50',
         backdropClassName
       )}
@@ -102,10 +112,7 @@ export function Modal({
         {...props}
       >
         {scrollBehavior === 'outside' ? (
-          <ScrollView
-            contentContainerStyle={{ flexGrow: 1 }}
-            keyboardShouldPersistTaps="handled"
-          >
+          <ScrollView contentContainerStyle={{ flexGrow: 1 }} keyboardShouldPersistTaps="handled">
             {backdropContent}
           </ScrollView>
         ) : (
@@ -132,15 +139,14 @@ export function ModalContent({ children, className }: ModalContentProps) {
       // Prevent backdrop click from propagating
       onPress={(e) => e.stopPropagation()}
     >
-      <View
-        className={cn(
-          'bg-surface-elevated rounded-lg shadow-xl w-full',
-          sizeStyles[size],
-          className
-        )}
+      {/* Floating: overlay plane + the deepest lift, no ring. */}
+      <Surface
+        elevation={5}
+        rounded={false}
+        className={cn('rounded-lg w-full', sizeStyles[size], className)}
       >
         {children}
-      </View>
+      </Surface>
     </Pressable>
   )
 }
@@ -155,7 +161,12 @@ export interface ModalHeaderProps {
  */
 export function ModalHeader({ children, className }: ModalHeaderProps) {
   return (
-    <View className={cn('flex-row items-center justify-between px-6 py-4 border-b border-divider', className)}>
+    <View
+      className={cn(
+        'flex-row items-center justify-between px-6 py-4 border-b border-divider',
+        className
+      )}
+    >
       {children}
     </View>
   )
@@ -230,11 +241,7 @@ export function ModalBody({ children, maxHeight, className }: ModalBodyProps) {
     )
   }
 
-  return (
-    <View className={cn('px-6 py-4', className)}>
-      {children}
-    </View>
-  )
+  return <View className={cn('px-6 py-4', className)}>{children}</View>
 }
 
 export interface ModalFooterProps {
@@ -247,7 +254,12 @@ export interface ModalFooterProps {
  */
 export function ModalFooter({ children, className }: ModalFooterProps) {
   return (
-    <View className={cn('flex-row items-center justify-end gap-2 px-6 py-4 border-t border-divider', className)}>
+    <View
+      className={cn(
+        'flex-row items-center justify-end gap-2 px-6 py-4 border-t border-divider',
+        className
+      )}
+    >
       {children}
     </View>
   )