@titan-design/react-ui 0.12.1 → 0.14.0

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) => (
@@ -150,24 +157,26 @@ interface ToastItemProps extends ToastConfig {
   onClose: () => void
 }
 
+// `-subtle` is the wash ladder's lightest rung. It replaces a `/10` opacity
+// modifier, which emitted no rule at all against a var()-backed token (VW-308).
 const statusStyles: Record<ToastStatus, { bg: string; border: string; icon: string }> = {
   success: {
-    bg: 'bg-status-success/10',
+    bg: 'bg-status-success-subtle',
     border: 'border-status-success',
     icon: '✓',
   },
   error: {
-    bg: 'bg-status-error/10',
+    bg: 'bg-status-error-subtle',
     border: 'border-status-error',
     icon: '✕',
   },
   warning: {
-    bg: 'bg-status-warning/10',
+    bg: 'bg-status-warning-subtle',
     border: 'border-status-warning',
     icon: '⚠',
   },
   info: {
-    bg: 'bg-status-info/10',
+    bg: 'bg-status-info-subtle',
     border: 'border-status-info',
     icon: 'ℹ',
   },
@@ -200,12 +209,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 +223,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 +238,7 @@ function ToastItem({
           </Pressable>
         )}
       </View>
-    </View>
+    </Surface>
   )
 }
 
@@ -281,13 +282,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 +299,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 +314,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>

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

@@ -11,12 +11,7 @@ describe('ToolbarButton', () => {
   })
 
   it('renders icon when provided', () => {
-    render(
-      <ToolbarButton
-        label="Settings"
-        icon={<span data-testid="icon">gear</span>}
-      />
-    )
+    render(<ToolbarButton label="Settings" icon={<span data-testid="icon">gear</span>} />)
     expect(screen.getByTestId('icon')).toBeInTheDocument()
   })
 
@@ -108,24 +103,14 @@ describe('ToolbarButton', () => {
 
   describe('menu content', () => {
     it('shows menu when pressed with menuContent', () => {
-      render(
-        <ToolbarButton
-          label="Options"
-          menuContent={<span>Menu item</span>}
-        />
-      )
+      render(<ToolbarButton label="Options" menuContent={<span>Menu item</span>} />)
 
       fireEvent.click(screen.getByRole('button', { name: 'Options' }))
       expect(screen.getByText('Menu item')).toBeInTheDocument()
     })
 
     it('hides menu when pressed again', () => {
-      render(
-        <ToolbarButton
-          label="Options"
-          menuContent={<span>Menu item</span>}
-        />
-      )
+      render(<ToolbarButton label="Options" menuContent={<span>Menu item</span>} />)
 
       const button = screen.getByRole('button', { name: 'Options' })
       fireEvent.click(button)