@titan-design/react-ui 0.12.1 → 0.13.0

package/src/components/ui/switch/Switch.tsx

@@ -1,6 +1,8 @@
 import React, { forwardRef } from 'react'
 import { Pressable, View, Text, type PressableProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { liftStyle } from '../../../theme/lift'
+import { useSurfaceMode } from '../surface'
 
 export type SwitchSize = 'sm' | 'md' | 'lg'
 
@@ -51,6 +53,7 @@ export const Switch = forwardRef<View, SwitchProps>(function Switch(
   ref
 ) {
   const styles = sizeStyles[size]
+  const mode = useSurfaceMode()
 
   const handlePress = () => {
     if (!isDisabled) {
@@ -66,12 +69,14 @@ export const Switch = forwardRef<View, SwitchProps>(function Switch(
         isChecked ? 'bg-brand-primary' : 'bg-hairline-strong'
       )}
     >
+      {/* The thumb is a raised control resting in its track: one plane of lift. */}
       <View
         className={cn(
-          'rounded-full bg-white shadow-sm transition-transform',
+          'rounded-full bg-white transition-transform',
           styles.thumb,
           isChecked && styles.translate
         )}
+        style={liftStyle(1, mode)}
       />
     </View>
   )
@@ -84,11 +89,7 @@ export const Switch = forwardRef<View, SwitchProps>(function Switch(
       accessibilityRole="switch"
       accessibilityState={{ checked: isChecked, disabled: isDisabled }}
       accessibilityLabel={label}
-      className={cn(
-        'flex-row items-center gap-2',
-        isDisabled && 'opacity-50',
-        className
-      )}
+      className={cn('flex-row items-center gap-2', isDisabled && 'opacity-50', className)}
       {...props}
     >
       {label && labelPosition === 'left' && (

package/src/components/ui/tabs/Tabs.stories.tsx

@@ -5,7 +5,7 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'
 const meta: Meta<typeof Tabs> = {
   title: 'Components/Molecules/Tabs',
   component: Tabs,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',

package/src/components/ui/tabs/Tabs.tsx

@@ -75,10 +75,7 @@ export function Tabs({
   return (
     <TabsContext.Provider value={{ activeIndex, setActiveIndex, variant, orientation }}>
       <View
-        className={cn(
-          orientation === 'vertical' ? 'flex-row' : 'flex-col',
-          className
-        )}
+        className={cn(orientation === 'vertical' ? 'flex-row' : 'flex-col', className)}
         {...props}
       >
         {children}
@@ -99,9 +96,7 @@ export function TabList({ children, className }: TabListProps) {
   const { variant, orientation } = useContext(TabsContext)
 
   const variantStyles = {
-    line: orientation === 'horizontal'
-      ? 'border-b border-hairline'
-      : 'border-r border-hairline',
+    line: orientation === 'horizontal' ? 'border-b border-hairline' : 'border-r border-hairline',
     enclosed: 'bg-surface-raised rounded-lg p-1',
     'soft-rounded': 'bg-surface-raised rounded-full p-1',
   }
@@ -151,12 +146,7 @@ export interface TabProps {
 /**
  * Individual tab button.
  */
-export function Tab({
-  index = 0,
-  isDisabled = false,
-  className,
-  children,
-}: TabProps) {
+export function Tab({ index = 0, isDisabled = false, className, children }: TabProps) {
   const { activeIndex, setActiveIndex, variant, orientation } = useContext(TabsContext)
   const isActive = activeIndex === index
 
@@ -170,17 +160,16 @@ export function Tab({
         ? 'border-brand-primary text-brand-primary'
         : 'border-transparent text-text-secondary web:hover:text-text-primary'
     ),
+    // The active enclosed tab is an indicator, not a plane: tone alone marks it.
     enclosed: cn(
       'px-4 py-2 rounded-md',
       isActive
-        ? 'bg-surface-elevated text-text-primary shadow-sm'
+        ? 'bg-surface-elevated text-text-primary'
         : 'text-text-secondary web:hover:text-text-primary'
     ),
     'soft-rounded': cn(
       'px-4 py-2 rounded-full',
-      isActive
-        ? 'bg-brand-primary text-white'
-        : 'text-text-secondary web:hover:text-text-primary'
+      isActive ? 'bg-brand-primary text-white' : 'text-text-secondary web:hover:text-text-primary'
     ),
   }
 
@@ -245,9 +234,5 @@ export interface TabPanelProps {
  * Individual tab panel content.
  */
 export function TabPanel({ children, className }: TabPanelProps) {
-  return (
-    <View className={cn('py-4', className)}>
-      {children}
-    </View>
-  )
+  return <View className={cn('py-4', className)}>{children}</View>
 }

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

@@ -1,10 +1,4 @@
-export {
-  Tabs,
-  TabList,
-  Tab,
-  TabPanels,
-  TabPanel,
-} from './Tabs'
+export { Tabs, TabList, Tab, TabPanels, TabPanel } from './Tabs'
 export type {
   TabsProps,
   TabListProps,

package/src/components/ui/tile/Tile.stories.tsx

@@ -9,7 +9,7 @@ const SUCCESS = getSemanticColors('dark')['status-success']
 const meta: Meta<typeof Tile> = {
   title: 'Components/Atoms/Tile',
   component: Tile,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:candidate', '!status:review'],
   parameters: {
     docs: {
       description: {

package/src/components/ui/tile/Tile.tsx

@@ -23,6 +23,9 @@ export interface TileProps extends ViewProps {
  * @example
  * <Tile label="Volume" value="76%" />
  * <Tile label="Fatigue" value="MOD" valueColor="#F5A623" />
+ *
+ * @deprecated Use the `Card` stat preset (roadmap decision 1) — removed after
+ * AW-127 consumer migration.
  */
 export function Tile({
   label,

package/src/components/ui/toast/Toast.stories.tsx

@@ -6,7 +6,7 @@ import { Button, ButtonText } from '../button'
 const meta: Meta<typeof Toast> = {
   title: 'Components/Molecules/Toast',
   component: Toast,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     status: {
       control: 'select',

package/src/components/ui/toast/Toast.test.tsx

@@ -90,11 +90,7 @@ describe('ToastProvider', () => {
     const { addToast, removeAllToasts } = useToast()
     return (
       <div>
-        <button
-          onClick={() =>
-            addToast({ title: 'New Toast', status: 'success' })
-          }
-        >
+        <button onClick={() => addToast({ title: 'New Toast', status: 'success' })}>
           Add Toast
         </button>
         <button onClick={removeAllToasts}>Clear All</button>
@@ -179,9 +175,7 @@ describe('ToastProvider', () => {
       return null
     }
 
-    expect(() => render(<BadConsumer />)).toThrow(
-      'useToast must be used within a ToastProvider'
-    )
+    expect(() => render(<BadConsumer />)).toThrow('useToast must be used within a ToastProvider')
   })
 
   describe('positions', () => {

package/src/components/ui/toast/Toast.tsx

@@ -1,9 +1,16 @@
 import React, { createContext, useContext, useState, useCallback, useEffect } from 'react'
 import { View, Text, Pressable, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
 
 export type ToastStatus = 'success' | 'error' | 'warning' | 'info'
-export type ToastPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left'
+export type ToastPosition =
+  | 'top'
+  | 'top-right'
+  | 'top-left'
+  | 'bottom'
+  | 'bottom-right'
+  | 'bottom-left'
 
 export interface ToastConfig {
   /** Unique ID for the toast */
@@ -44,10 +51,10 @@ export interface ToastProviderProps {
 }
 
 const positionStyles: Record<ToastPosition, string> = {
-  'top': 'top-4 left-1/2 -translate-x-1/2',
+  top: 'top-4 left-1/2 -translate-x-1/2',
   'top-right': 'top-4 right-4',
   'top-left': 'top-4 left-4',
-  'bottom': 'bottom-4 left-1/2 -translate-x-1/2',
+  bottom: 'bottom-4 left-1/2 -translate-x-1/2',
   'bottom-right': 'bottom-4 right-4',
   'bottom-left': 'bottom-4 left-4',
 }
@@ -73,23 +80,26 @@ export function ToastProvider({
 }: ToastProviderProps) {
   const [toasts, setToasts] = useState<ToastConfig[]>([])
 
-  const addToast = useCallback((config: Omit<ToastConfig, 'id'>) => {
-    const id = `toast-${++toastIdCounter}`
-    const newToast: ToastConfig = {
-      id,
-      duration: defaultDuration,
-      isClosable: true,
-      status: 'info',
-      ...config,
-    }
+  const addToast = useCallback(
+    (config: Omit<ToastConfig, 'id'>) => {
+      const id = `toast-${++toastIdCounter}`
+      const newToast: ToastConfig = {
+        id,
+        duration: defaultDuration,
+        isClosable: true,
+        status: 'info',
+        ...config,
+      }
 
-    setToasts((prev) => {
-      const updated = [newToast, ...prev]
-      return updated.slice(0, maxToasts)
-    })
+      setToasts((prev) => {
+        const updated = [newToast, ...prev]
+        return updated.slice(0, maxToasts)
+      })
 
-    return id
-  }, [defaultDuration, maxToasts])
+      return id
+    },
+    [defaultDuration, maxToasts]
+  )
 
   const removeToast = useCallback((id: string) => {
     setToasts((prev) => prev.filter((t) => t.id !== id))
@@ -104,10 +114,7 @@ export function ToastProvider({
       {children}
       {/* Toast Container */}
       <View
-        className={cn(
-          'fixed z-[9999] flex flex-col gap-2',
-          positionStyles[position]
-        )}
+        className={cn('fixed z-[9999] flex flex-col gap-2', positionStyles[position])}
         pointerEvents="box-none"
       >
         {toasts.map((toast) => (
@@ -200,12 +207,10 @@ function ToastItem({
   }, [duration, onClose])
 
   return (
-    <View
-      className={cn(
-        'min-w-[280px] max-w-[400px] rounded-lg border-l-4 shadow-lg',
-        'bg-surface-elevated',
-        border
-      )}
+    <Surface
+      elevation={5}
+      rounded={false}
+      className={cn('min-w-[280px] max-w-[400px] rounded-lg border-l-4', border)}
       accessibilityRole="alert"
     >
       <View className={cn('flex-row items-start p-3', bg)}>
@@ -216,14 +221,8 @@ function ToastItem({
 
         {/* Content */}
         <View className="flex-1">
-          <Text className="text-sm font-semibold text-text-primary">
-            {title}
-          </Text>
-          {description && (
-            <Text className="text-sm text-text-secondary mt-0.5">
-              {description}
-            </Text>
-          )}
+          <Text className="text-sm font-semibold text-text-primary">{title}</Text>
+          {description && <Text className="text-sm text-text-secondary mt-0.5">{description}</Text>}
         </View>
 
         {/* Close button */}
@@ -237,7 +236,7 @@ function ToastItem({
           </Pressable>
         )}
       </View>
-    </View>
+    </Surface>
   )
 }
 
@@ -281,13 +280,10 @@ export function Toast({
   const { bg, border, icon } = statusStyles[status]
 
   return (
-    <View
-      className={cn(
-        'min-w-[280px] max-w-[400px] rounded-lg border-l-4 shadow-lg',
-        'bg-surface-elevated',
-        border,
-        className
-      )}
+    <Surface
+      elevation={5}
+      rounded={false}
+      className={cn('min-w-[280px] max-w-[400px] rounded-lg border-l-4', border, className)}
       accessibilityRole="alert"
       {...props}
     >
@@ -301,14 +297,8 @@ export function Toast({
 
         {/* Content */}
         <View className="flex-1">
-          <Text className="text-sm font-semibold text-text-primary">
-            {title}
-          </Text>
-          {description && (
-            <Text className="text-sm text-text-secondary mt-0.5">
-              {description}
-            </Text>
-          )}
+          <Text className="text-sm font-semibold text-text-primary">{title}</Text>
+          {description && <Text className="text-sm text-text-secondary mt-0.5">{description}</Text>}
         </View>
 
         {/* Close button */}
@@ -322,6 +312,6 @@ export function Toast({
           </Pressable>
         )}
       </View>
-    </View>
+    </Surface>
   )
 }

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

@@ -6,4 +6,3 @@ export type {
   ToastStatus,
   ToastPosition,
 } from './Toast'
-

package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx

@@ -6,7 +6,7 @@ import { ToolbarButton, ToolbarButtonGroup } from './ToolbarButton'
 const meta: Meta<typeof ToolbarButton> = {
   title: 'Components/Molecules/ToolbarButton',
   component: ToolbarButton,
-  tags: ['autodocs'],
+  tags: ['autodocs', 'status:stable', '!status:review'],
   argTypes: {
     variant: {
       control: 'select',
@@ -40,19 +40,34 @@ type Story = StoryObj<typeof ToolbarButton>
 // These simulate MUI SvgIcon components at 20x20
 const SettingsIcon = ({ color }: { color?: string }) => (
   <View style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}>
-    <Text className={color ? undefined : 'text-text-secondary'} style={{ fontSize: 16, ...(color ? { color } : {}) }}>⚙</Text>
+    <Text
+      className={color ? undefined : 'text-text-secondary'}
+      style={{ fontSize: 16, ...(color ? { color } : {}) }}
+    >
+      ⚙
+    </Text>
   </View>
 )
 
 const FilterIcon = ({ color }: { color?: string }) => (
   <View style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}>
-    <Text className={color ? undefined : 'text-text-secondary'} style={{ fontSize: 16, ...(color ? { color } : {}) }}>⏣</Text>
+    <Text
+      className={color ? undefined : 'text-text-secondary'}
+      style={{ fontSize: 16, ...(color ? { color } : {}) }}
+    >
+      ⏣
+    </Text>
   </View>
 )
 
 const ViewIcon = ({ color }: { color?: string }) => (
   <View style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}>
-    <Text className={color ? undefined : 'text-text-secondary'} style={{ fontSize: 16, ...(color ? { color } : {}) }}>◉</Text>
+    <Text
+      className={color ? undefined : 'text-text-secondary'}
+      style={{ fontSize: 16, ...(color ? { color } : {}) }}
+    >
+      ◉
+    </Text>
   </View>
 )
 
@@ -72,30 +87,19 @@ export const ActiveVsInactive: Story = {
         <Text className="text-text-secondary text-xs mb-1">
           isActive=true - sunken/dark look, ORANGE icon, white text
         </Text>
-        <ToolbarButton 
-          label="Active (orange icon)" 
-          icon={<FilterIcon />} 
-          isActive={true}
-        />
+        <ToolbarButton label="Active (orange icon)" icon={<FilterIcon />} isActive={true} />
       </View>
       <View>
         <Text className="text-text-secondary text-xs mb-1">
           isActive=undefined - sunken/dark look, white icon (default state)
         </Text>
-        <ToolbarButton 
-          label="Default (white icon)" 
-          icon={<FilterIcon />}
-        />
+        <ToolbarButton label="Default (white icon)" icon={<FilterIcon />} />
       </View>
       <View>
         <Text className="text-text-secondary text-xs mb-1">
           isActive=false - elevated/light look, gray icon
         </Text>
-        <ToolbarButton 
-          label="Inactive (gray icon)" 
-          icon={<FilterIcon />} 
-          isActive={false}
-        />
+        <ToolbarButton label="Inactive (gray icon)" icon={<FilterIcon />} isActive={false} />
       </View>
     </View>
   ),
@@ -109,8 +113,8 @@ export const Interactive: Story = {
         <Text className="text-text-secondary text-xs">
           Click to toggle. When active=true, icon turns orange:
         </Text>
-        <ToolbarButton 
-          label="Toggle Me" 
+        <ToolbarButton
+          label="Toggle Me"
           icon={<SettingsIcon />}
           isActive={active}
           onPress={() => setActive(!active)}
@@ -130,24 +134,19 @@ export const IconOnly: Story = {
         Icon-only buttons. Active button has orange icon:
       </Text>
       <View style={{ flexDirection: 'row', gap: 8 }}>
-        <ToolbarButton 
-          label="Settings" 
-          icon={<SettingsIcon />} 
+        <ToolbarButton
+          label="Settings"
+          icon={<SettingsIcon />}
           showLabel={false}
           isActive={false}
         />
-        <ToolbarButton 
-          label="Filter (active)" 
-          icon={<FilterIcon />} 
-          showLabel={false} 
-          isActive={true}
-        />
-        <ToolbarButton 
-          label="View" 
-          icon={<ViewIcon />} 
+        <ToolbarButton
+          label="Filter (active)"
+          icon={<FilterIcon />}
           showLabel={false}
-          isActive={false}
+          isActive={true}
         />
+        <ToolbarButton label="View" icon={<ViewIcon />} showLabel={false} isActive={false} />
       </View>
     </View>
   ),
@@ -166,15 +165,15 @@ export const Disabled: Story = {
         Note: Orange icon IS shown when isActive=true (matching original XP behavior)
       </Text>
       <View style={{ flexDirection: 'row', gap: 8 }}>
-        <ToolbarButton 
-          label="Disabled Active" 
-          icon={<SettingsIcon />} 
+        <ToolbarButton
+          label="Disabled Active"
+          icon={<SettingsIcon />}
           isActive={true}
           isDisabled={true}
         />
-        <ToolbarButton 
-          label="Disabled Inactive" 
-          icon={<SettingsIcon />} 
+        <ToolbarButton
+          label="Disabled Inactive"
+          icon={<SettingsIcon />}
           isActive={false}
           isDisabled={true}
         />
@@ -193,16 +192,8 @@ export const HoverStates: Story = {
         Active: #3C3C3C → #4C4C4C | Inactive: #6E6E6E → #5D5D5D | Shadows: removed
       </Text>
       <View style={{ flexDirection: 'row', gap: 8 }}>
-        <ToolbarButton 
-          label="Hover Me (Active)" 
-          icon={<SettingsIcon />}
-          isActive={true}
-        />
-        <ToolbarButton 
-          label="Hover Me (Inactive)" 
-          icon={<SettingsIcon />}
-          isActive={false}
-        />
+        <ToolbarButton label="Hover Me (Active)" icon={<SettingsIcon />} isActive={true} />
+        <ToolbarButton label="Hover Me (Inactive)" icon={<SettingsIcon />} isActive={false} />
       </View>
     </View>
   ),
@@ -217,9 +208,24 @@ export const WithMenu: Story = {
         isActive={false}
         menuContent={
           <View style={{ paddingVertical: 8 }}>
-            <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>Grid View</Text>
-            <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>List View</Text>
-            <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>Compact View</Text>
+            <Text
+              className="text-text-primary"
+              style={{ paddingHorizontal: 16, paddingVertical: 8 }}
+            >
+              Grid View
+            </Text>
+            <Text
+              className="text-text-primary"
+              style={{ paddingHorizontal: 16, paddingVertical: 8 }}
+            >
+              List View
+            </Text>
+            <Text
+              className="text-text-primary"
+              style={{ paddingHorizontal: 16, paddingVertical: 8 }}
+            >
+              Compact View
+            </Text>
           </View>
         }
       />
@@ -230,27 +236,27 @@ export const WithMenu: Story = {
 export const ButtonGroup: Story = {
   render: function Render() {
     const [activeIndex, setActiveIndex] = useState<number | null>(1)
-    
+
     return (
       <View style={{ gap: 16 }}>
         <Text className="text-text-secondary text-xs mb-1">
           Click to select (one active at a time):
         </Text>
         <ToolbarButtonGroup gap="sm">
-          <ToolbarButton 
-            label="Filter" 
+          <ToolbarButton
+            label="Filter"
             icon={<FilterIcon />}
             isActive={activeIndex === 0}
             onPress={() => setActiveIndex(activeIndex === 0 ? null : 0)}
           />
-          <ToolbarButton 
-            label="Settings" 
+          <ToolbarButton
+            label="Settings"
             icon={<SettingsIcon />}
             isActive={activeIndex === 1}
             onPress={() => setActiveIndex(activeIndex === 1 ? null : 1)}
           />
-          <ToolbarButton 
-            label="View" 
+          <ToolbarButton
+            label="View"
             icon={<ViewIcon />}
             isActive={activeIndex === 2}
             onPress={() => setActiveIndex(activeIndex === 2 ? null : 2)}
@@ -265,7 +271,7 @@ export const ToolbarExample: Story = {
   render: function Render() {
     const [filterActive, setFilterActive] = useState(true)
     const [settingsActive, setSettingsActive] = useState(false)
-    
+
     return (
       <View>
         <Text className="text-text-secondary text-xs mb-3">
@@ -290,8 +296,18 @@ export const ToolbarExample: Story = {
             isActive={false}
             menuContent={
               <View style={{ paddingVertical: 8 }}>
-                <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>Grid</Text>
-                <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>List</Text>
+                <Text
+                  className="text-text-primary"
+                  style={{ paddingHorizontal: 16, paddingVertical: 8 }}
+                >
+                  Grid
+                </Text>
+                <Text
+                  className="text-text-primary"
+                  style={{ paddingHorizontal: 16, paddingVertical: 8 }}
+                >
+                  List
+                </Text>
               </View>
             }
           />
@@ -304,7 +320,7 @@ export const ToolbarExample: Story = {
 export const CompactMode: Story = {
   render: function Render() {
     const [isCompact, setIsCompact] = useState(false)
-    
+
     return (
       <View style={{ gap: 16 }}>
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
@@ -333,12 +349,7 @@ export const CompactMode: Story = {
             showLabel={!isCompact}
             isActive={false}
           />
-          <ToolbarButton
-            label="View"
-            icon={<ViewIcon />}
-            showLabel={!isCompact}
-            isActive={false}
-          />
+          <ToolbarButton label="View" icon={<ViewIcon />} showLabel={!isCompact} isActive={false} />
         </ToolbarButtonGroup>
       </View>
     )
@@ -351,14 +362,24 @@ export const Variants: Story = {
       <View>
         <Text className="text-text-secondary text-xs mb-2">Neumorphic (with 3D inset shadows)</Text>
         <View style={{ flexDirection: 'row', gap: 8 }}>
-          <ToolbarButton label="Inactive" icon={<SettingsIcon />} variant="raised" isActive={false} />
+          <ToolbarButton
+            label="Inactive"
+            icon={<SettingsIcon />}
+            variant="raised"
+            isActive={false}
+          />
           <ToolbarButton label="Active" icon={<SettingsIcon />} variant="raised" isActive={true} />
         </View>
       </View>
       <View>
         <Text className="text-text-secondary text-xs mb-2">Flat (no shadows)</Text>
         <View style={{ flexDirection: 'row', gap: 8 }}>
-          <ToolbarButton label="Inactive" icon={<SettingsIcon />} variant="default" isActive={false} />
+          <ToolbarButton
+            label="Inactive"
+            icon={<SettingsIcon />}
+            variant="default"
+            isActive={false}
+          />
           <ToolbarButton label="Active" icon={<SettingsIcon />} variant="default" isActive={true} />
         </View>
       </View>