@titan-design/react-ui 0.12.1 → 0.14.0

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

@@ -2,9 +2,12 @@ import React, { useState, useCallback, createContext, useContext } from 'react'
 import { View, Text, Pressable, type ViewProps, StyleSheet, Platform } from 'react-native'
 import { cn } from '../../../utils/cn'
 import { getHoverColors } from '../../../theme'
-import { greyRamp } from '../../../theme/tokens/primitives'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
+import { greyRamp, primitiveColors } from '../../../theme/tokens/primitives'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getPressedRecessShadow } from '../../../theme/elevation'
+import { liftStyle } from '../../../theme/lift'
+import { alpha } from '../../../utils/colors'
+import { Surface, useSurfaceMode } from '../surface'
 
 export type ToolbarButtonVariant = 'default' | 'raised'
 export type ToolbarButtonSize = 'sm' | 'md' | 'lg'
@@ -14,6 +17,14 @@ interface ToolbarButtonContextType {
   setIsOpen: (open: boolean) => void
 }
 
+/**
+ * Idle icon/label tone. VW-82: no token resolves to this — it sits between
+ * `text-secondary` (#A29F9D) and `text-primary` (#F9F6F3) and is cooler than
+ * either, so snapping it to the warm grey ramp is a visual change awaiting the
+ * proposed `on-control-idle` role rather than a silent swap.
+ */
+const ICON_IDLE = '#D1D1D1'
+
 const ToolbarButtonContext = createContext<ToolbarButtonContextType>({
   isOpen: false,
   setIsOpen: () => {},
@@ -24,7 +35,7 @@ export interface ToolbarButtonProps extends ViewProps {
   label: string
   /** Icon component */
   icon?: React.ReactNode
-  /** 
+  /**
    * Whether the button is in active/selected state.
    * - `true`: pressed/active appearance (darker, white text, orange icon)
    * - `undefined`: pressed appearance (darker, white text/icon)
@@ -49,19 +60,8 @@ export interface ToolbarButtonProps extends ViewProps {
   className?: string
 }
 
-const SEMANTIC = getSemanticColors('dark')
-
-// Base button colours. These were raw `#3C3C3C`/`#2C2C2C` literals — old cold
-// charcoal steps that survived the grey migration only because they were plain
-// strings rather than scale references.
+// Base button colours.
 const BUTTON_BG = greyRamp[800]
-const MENU_BG = greyRamp[900]
-
-// Inline depth is a HAIRLINE, not a shadow (TD-07.16). On a ~10% lightness
-// surface a dual-opposing neumorphic shadow has no room below to read; alpha
-// composites by the same amount over any plane, so the edge holds everywhere.
-const EDGE = { borderWidth: 1, borderColor: SEMANTIC['hairline-default'] } as const
-const EDGE_PRESSED = { borderWidth: 1, borderColor: SEMANTIC['hairline-strong'] } as const
 
 // Calculate hover colors using color math
 const hoverColors = getHoverColors(BUTTON_BG, 'medium')
@@ -83,11 +83,11 @@ const textSizeStyles: Record<ToolbarButtonSize, string> = {
  * ToolbarButton component for toolbar actions with toggle state support.
  *
  * Features:
- * - Neumorphic styling with inset shadows for pressed/raised 3D effect
+ * - Depth from the fill plus the lift (raised) or the inset recess (active)
  * - Active (pressed) state is the default visual appearance
  * - Set isActive={false} explicitly for the raised/inactive appearance
  * - Orange accent color on icon when isActive={true}
- * - Hover states that lighten background and remove shadows
+ * - Hover states that lighten the background
  *
  * @example
  * // Toggle button - orange icon when active
@@ -123,6 +123,7 @@ export function ToolbarButton({
 }: ToolbarButtonProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
+  const mode = useSurfaceMode()
 
   const handlePress = useCallback(() => {
     if (isDisabled) return
@@ -143,31 +144,24 @@ export function ToolbarButton({
   // Determine icon color based on state
   const getIconColor = () => {
     if (isActive === true) return resolveColor('brand-primary')
-    return showActive ? '#FFFFFF' : '#D1D1D1'
+    return showActive ? primitiveColors.white : ICON_IDLE
   }
 
-  // Get shadow and background styles for neumorphic variant
   /**
-   * Raised/pressed treatment. Depth comes from the FILL plus a hairline edge —
-   * pressed sits darker with a stronger edge, raised sits lighter with a quieter
-   * one. It used to come from a two-layer neumorphic shadow, which the surface
-   * exploration ruled out for inline hierarchy: it needs a mid-tone background
-   * for the dark half to have somewhere to fall, and these buttons sit at ~10%
-   * lightness.
+   * Raised/pressed treatment on the depth model: the raised face is a plane one
+   * step above the toolbar and wears the lift, the active face is pressed into
+   * it and wears the recess. The hairline ring both used to carry is an edge,
+   * not depth, and is gone with the rest of the rings on this pass.
    */
   const getRaisedStyle = () => {
-    if (isDisabled) {
-      return styles.disabledBg
-    }
+    if (isDisabled) return styles.disabledBg
     if (showActive) {
-      return {
-        backgroundColor: isHovered ? hoverColors.pressed : greyRamp[900],
-        ...EDGE_PRESSED,
-      }
+      const fill = isHovered ? hoverColors.pressed : greyRamp[900]
+      return { backgroundColor: fill, ...getPressedRecessShadow(fill, mode) }
     }
     return {
       backgroundColor: isHovered ? hoverColors.raised : BUTTON_BG,
-      ...EDGE,
+      ...liftStyle(1, mode),
     }
   }
 
@@ -202,20 +196,19 @@ export function ToolbarButton({
         >
           {icon && (
             <View className="w-5 h-5 items-center justify-center">
-              {React.isValidElement(icon) 
+              {React.isValidElement(icon)
                 ? React.cloneElement(icon as React.ReactElement<any>, {
                     size: 20,
                     width: 20,
                     height: 20,
                     color: getIconColor(),
-                    style: { 
+                    style: {
                       color: getIconColor(),
                       width: 20,
                       height: 20,
                     },
                   })
-                : icon
-              }
+                : icon}
             </View>
           )}
           {showLabel && (
@@ -237,22 +230,18 @@ export function ToolbarButton({
         {menuContent && isOpen && (
           <>
             {/* Backdrop */}
-            <Pressable
-              onPress={handleClose}
-              style={StyleSheet.absoluteFill}
-              className="z-40"
-            />
-            {/* Menu Content */}
-            <View
+            <Pressable onPress={handleClose} style={StyleSheet.absoluteFill} className="z-40" />
+            {/* Menu Content — floating: overlay plane + lift, no ring. */}
+            <Surface
+              elevation={4}
+              rounded={false}
               className={cn(
                 'absolute z-50 top-full left-0 mt-1',
-                'rounded-lg shadow-lg border border-hairline',
-                'min-w-[150px] overflow-hidden',
-                `bg-[${MENU_BG}]`
+                'rounded-lg min-w-[150px] overflow-hidden'
               )}
             >
               {menuContent}
-            </View>
+            </Surface>
           </>
         )}
       </View>
@@ -264,7 +253,7 @@ export function ToolbarButton({
 const styles = StyleSheet.create({
   // Disabled - flat gray background, no shadows
   disabledBg: {
-    backgroundColor: 'rgba(255, 255, 255, 0.12)',
+    backgroundColor: alpha(primitiveColors.white, 0.12),
     ...Platform.select({
       web: { boxShadow: 'none' } as any,
       default: { shadowOpacity: 0, elevation: 0 },

package/src/components/ui/tooltip/Tooltip.stories.tsx

@@ -10,7 +10,16 @@ const meta: Meta<typeof Tooltip> = {
   argTypes: {
     placement: {
       control: 'select',
-      options: ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'right'],
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'right',
+      ],
     },
     hasArrow: { control: 'boolean' },
     isDisabled: { control: 'boolean' },
@@ -118,8 +127,8 @@ export const OnText: Story = {
         Hover over the{' '}
         <Tooltip label="This is helpful information">
           <Text className="text-brand-primary underline">underlined text</Text>
-        </Tooltip>
-        {' '}to see a tooltip.
+        </Tooltip>{' '}
+        to see a tooltip.
       </Text>
     </View>
   ),

package/src/components/ui/tooltip/Tooltip.test.tsx

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { render, screen, fireEvent } from '@testing-library/react'
+import { Text } from 'react-native'
 import { axe } from 'jest-axe'
 import { Tooltip } from './Tooltip'
 
@@ -202,9 +203,7 @@ describe('Tooltip', () => {
       hoverTrigger('Hover me')
       expect(screen.getByText('Portal tooltip')).toBeInTheDocument()
       expect(screen.getByTestId('tooltip-portal')).toBeInTheDocument()
-      expect(screen.getByTestId('tooltip-portal').parentElement).toBe(
-        document.body
-      )
+      expect(screen.getByTestId('tooltip-portal').parentElement).toBe(document.body)
     })
 
     it('applies fixed positioning and z-index to portal tooltip', () => {
@@ -260,3 +259,22 @@ describe('Tooltip', () => {
     })
   })
 })
+
+describe('controlled visibility', () => {
+  it('follows isOpen instead of its own hover, and renders no pressable wrapper', () => {
+    const { rerender } = render(
+      <Tooltip label="Controlled" isOpen={false}>
+        <Text>Trigger</Text>
+      </Tooltip>
+    )
+    hoverTrigger('Trigger')
+    expect(screen.queryByText('Controlled')).not.toBeInTheDocument()
+    rerender(
+      <Tooltip label="Controlled" isOpen>
+        <Text>Trigger</Text>
+      </Tooltip>
+    )
+    expect(screen.getByText('Controlled')).toBeInTheDocument()
+    expect(screen.getByText('Trigger').parentElement).not.toHaveAttribute('tabindex')
+  })
+})

package/src/components/ui/tooltip/Tooltip.tsx

@@ -1,6 +1,8 @@
-import React, { useState, useRef, useEffect } from 'react'
-import { View, Text, Pressable, Platform, type ViewProps } from 'react-native'
+import React, { useState, useRef, useEffect, useCallback } from 'react'
+import { View, Text, Platform, type ViewProps } from 'react-native'
 import { cn } from '../../../utils/cn'
+import { Surface } from '../surface'
+import { TriggerSurface } from '../trigger'
 
 let createPortal: typeof import('react-dom').createPortal | undefined
 if (Platform.OS === 'web') {
@@ -45,6 +47,21 @@ export interface TooltipProps extends ViewProps {
   className?: string
   /** Render tooltip via portal to escape overflow:hidden ancestors (web only) */
   usePortal?: boolean
+  /**
+   * Controlled visibility. In this mode the tooltip renders no Pressable of its
+   * own, so it can sit inside a pressable row without taking its press; the
+   * caller owns hover (see {@link useHoverState}). Needed because RNW ends a
+   * wrapper's hover the moment a nested Pressable claims the pointer.
+   */
+  isOpen?: boolean
+}
+
+/** Hover state from pointer enter/leave on any View, for driving a controlled Tooltip. */
+export function useHoverState() {
+  const [hovered, setHovered] = useState(false)
+  const onPointerEnter = useCallback(() => setHovered(true), [])
+  const onPointerLeave = useCallback(() => setHovered(false), [])
+  return { hovered, hoverProps: { onPointerEnter, onPointerLeave } }
 }
 
 /**
@@ -74,9 +91,11 @@ export function Tooltip({
   isDisabled = false,
   className,
   usePortal: usePortalProp = false,
+  isOpen,
   ...props
 }: TooltipProps) {
-  const [isVisible, setIsVisible] = useState(false)
+  const [hovered, setHovered] = useState(false)
+  const isVisible = isOpen ?? hovered
   const [portalPos, setPortalPos] = useState<PortalPosition | null>(null)
   const openTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
@@ -129,31 +148,37 @@ export function Tooltip({
     if (isDisabled) return
     clearTimeouts()
     if (openDelay > 0) {
-      openTimeoutRef.current = setTimeout(() => setIsVisible(true), openDelay)
+      openTimeoutRef.current = setTimeout(() => setHovered(true), openDelay)
     } else {
-      setIsVisible(true)
+      setHovered(true)
     }
   }
 
   const hide = () => {
     clearTimeouts()
     if (closeDelay > 0) {
-      closeTimeoutRef.current = setTimeout(() => setIsVisible(false), closeDelay)
+      closeTimeoutRef.current = setTimeout(() => setHovered(false), closeDelay)
     } else {
-      setIsVisible(false)
+      setHovered(false)
     }
   }
 
-  // Arrow positioning
+  // Arrow positioning. The arrow is a border triangle, so it takes the same surface token as the box.
   const arrowStyles = {
-    top: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800',
-    'top-start': 'bottom-0 left-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800',
-    'top-end': 'bottom-0 right-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-neutral-800',
-    bottom: 'top-0 left-1/2 -translate-x-1/2 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800',
-    'bottom-start': 'top-0 left-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800',
-    'bottom-end': 'top-0 right-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-neutral-800',
-    left: 'right-0 top-1/2 translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-neutral-800',
-    right: 'left-0 top-1/2 -translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-neutral-800',
+    top: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-surface-overlay',
+    'top-start':
+      'bottom-0 left-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-surface-overlay',
+    'top-end':
+      'bottom-0 right-4 translate-y-full border-l-transparent border-r-transparent border-b-transparent border-t-surface-overlay',
+    bottom:
+      'top-0 left-1/2 -translate-x-1/2 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-surface-overlay',
+    'bottom-start':
+      'top-0 left-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-surface-overlay',
+    'bottom-end':
+      'top-0 right-4 -translate-y-full border-l-transparent border-r-transparent border-t-transparent border-b-surface-overlay',
+    left: 'right-0 top-1/2 translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-surface-overlay',
+    right:
+      'left-0 top-1/2 -translate-x-full -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-surface-overlay',
   }
 
   // Tooltip positioning
@@ -168,18 +193,12 @@ export function Tooltip({
     right: 'left-full top-1/2 -translate-y-1/2 ml-2',
   }
 
+  // Floating: overlay plane + lift, no ring.
   const tooltipContent = (
-    <View className="bg-neutral-800 px-3 py-2 rounded-md shadow-lg max-w-xs">
-      {content ?? <Text className="text-white text-sm">{label}</Text>}
-      {hasArrow && (
-        <View
-          className={cn(
-            'absolute w-0 h-0 border-4',
-            arrowStyles[placement]
-          )}
-        />
-      )}
-    </View>
+    <Surface elevation={4} rounded={false} className="px-3 py-2 rounded-md max-w-xs">
+      {content ?? <Text className="text-text-primary text-sm">{label}</Text>}
+      {hasArrow && <View className={cn('absolute w-0 h-0 border-4', arrowStyles[placement])} />}
+    </Surface>
   )
 
   const renderPortalTooltip = () => {
@@ -205,15 +224,15 @@ export function Tooltip({
 
   return (
     <View className="relative" ref={triggerRef} {...props}>
-      <Pressable
-        onHoverIn={show}
-        onHoverOut={hide}
-        onLongPress={show}
-        onPressOut={hide}
-        delayLongPress={500}
-      >
-        {children}
-      </Pressable>
+      {isOpen === undefined ? (
+        <TriggerSurface
+          handlers={{ onHoverIn: show, onHoverOut: hide, onLongPress: show, onPressOut: hide }}
+        >
+          {children}
+        </TriggerSurface>
+      ) : (
+        children
+      )}
 
       {isPortalMode
         ? renderPortalTooltip()

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

@@ -1,2 +1,2 @@
-export { Tooltip } from './Tooltip'
+export { Tooltip, useHoverState } from './Tooltip'
 export type { TooltipProps, TooltipPlacement } from './Tooltip'

package/src/components/ui/trigger/TriggerSurface.test.tsx

@@ -0,0 +1,215 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { View, Text } from 'react-native'
+import { TriggerSurface } from './TriggerSurface'
+import { Button, ButtonText } from '../button'
+import { Menu, MenuTrigger, MenuList, MenuItem } from '../menu'
+import { Popover, PopoverTrigger, PopoverContent } from '../popover'
+import { Tooltip } from '../tooltip'
+
+/**
+ * A real pointer press, not a bare synthetic click.
+ *
+ * The bug (AW-130) only shows when the whole gesture reaches the innermost
+ * element: React Native Web's PressResponder calls `stopPropagation()` on the
+ * click it handles, so an outer Pressable wrapping a Pressable child never runs
+ * its handler. `fireEvent.click` on the outer element sidesteps that entirely.
+ */
+function pressWithPointer(element: Element) {
+  fireEvent.mouseDown(element, { button: 0, detail: 1 })
+  fireEvent.mouseUp(element, { button: 0, detail: 1 })
+  fireEvent.click(element, { button: 0, detail: 1 })
+}
+
+/**
+ * Hover the element itself. Enter events do not bubble, and RNW's `useHover`
+ * contains hover to the innermost node, so a wrapper never learns about a hover
+ * that lands on a Pressable child.
+ */
+function hoverWithPointer(element: Element) {
+  fireEvent.pointerEnter(element)
+  fireEvent.mouseEnter(element)
+}
+
+describe('TriggerSurface', () => {
+  it('fires when the child is a Pressable component that claims the gesture', () => {
+    const onPress = vi.fn()
+    render(
+      <TriggerSurface handlers={{ onPress }} accessibilityRole="button">
+        <Button>
+          <ButtonText>Options</ButtonText>
+        </Button>
+      </TriggerSurface>
+    )
+
+    pressWithPointer(screen.getByText('Options'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires exactly once, not once per nested pressable', () => {
+    const onPress = vi.fn()
+    render(
+      <TriggerSurface handlers={{ onPress }} accessibilityRole="button">
+        <Button>
+          <ButtonText>Options</ButtonText>
+        </Button>
+      </TriggerSurface>
+    )
+
+    pressWithPointer(screen.getByText('Options'))
+    pressWithPointer(screen.getByText('Options'))
+    expect(onPress).toHaveBeenCalledTimes(2)
+  })
+
+  it('keeps the child own onPress alongside the trigger handler', () => {
+    const onPress = vi.fn()
+    const childPress = vi.fn()
+    render(
+      <TriggerSurface handlers={{ onPress }} accessibilityRole="button">
+        <Button onPress={childPress}>
+          <ButtonText>Options</ButtonText>
+        </Button>
+      </TriggerSurface>
+    )
+
+    pressWithPointer(screen.getByText('Options'))
+    expect(childPress).toHaveBeenCalledTimes(1)
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires when the child is a host element that cannot take onPress', () => {
+    const onPress = vi.fn()
+    render(
+      <TriggerSurface handlers={{ onPress }} accessibilityRole="button">
+        <span>Options</span>
+      </TriggerSurface>
+    )
+
+    pressWithPointer(screen.getByText('Options'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires when the child is a component with no press handling of its own', () => {
+    const onPress = vi.fn()
+    render(
+      <TriggerSurface handlers={{ onPress }} accessibilityRole="button">
+        <View>
+          <Text>Options</Text>
+        </View>
+      </TriggerSurface>
+    )
+
+    pressWithPointer(screen.getByText('Options'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+
+  it('leaves a single button role rather than nesting two', () => {
+    const { container } = render(
+      <TriggerSurface
+        handlers={{ onPress: () => {} }}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: false }}
+      >
+        <Button>
+          <ButtonText>Options</ButtonText>
+        </Button>
+      </TriggerSurface>
+    )
+
+    expect(container.querySelectorAll('[role="button"]')).toHaveLength(1)
+    expect(container.querySelector('button button')).toBeNull()
+  })
+
+  it('keeps the wrapper out of the tab order when the child owns the press', () => {
+    const { container } = render(
+      <TriggerSurface handlers={{ onPress: () => {} }} accessibilityRole="button">
+        <Button>
+          <ButtonText>Options</ButtonText>
+        </Button>
+      </TriggerSurface>
+    )
+
+    expect(container.querySelectorAll('[tabindex="0"]')).toHaveLength(1)
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(
+      <TriggerSurface
+        handlers={{ onPress: () => {} }}
+        accessibilityRole="button"
+        accessibilityState={{ expanded: false }}
+      >
+        <Button>
+          <ButtonText>Options</ButtonText>
+        </Button>
+      </TriggerSurface>
+    )
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})
+
+describe('trigger families under a real pointer press', () => {
+  it('Menu opens when its Button trigger is pressed', () => {
+    render(
+      <Menu>
+        <MenuTrigger>
+          <Button>
+            <ButtonText>Options</ButtonText>
+          </Button>
+        </MenuTrigger>
+        <MenuList>
+          <MenuItem>Edit</MenuItem>
+        </MenuList>
+      </Menu>
+    )
+
+    pressWithPointer(screen.getByText('Options'))
+    expect(screen.getByText('Edit')).toBeInTheDocument()
+  })
+
+  it('Popover opens when its Button trigger is pressed', () => {
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <Button>
+            <ButtonText>Open</ButtonText>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent>
+          <Text>Details</Text>
+        </PopoverContent>
+      </Popover>
+    )
+
+    pressWithPointer(screen.getByText('Open'))
+    expect(screen.getByText('Details')).toBeInTheDocument()
+  })
+
+  it('Tooltip shows when its Button child is hovered', () => {
+    render(
+      <Tooltip label="Helpful hint">
+        <Button>
+          <ButtonText>Hover me</ButtonText>
+        </Button>
+      </Tooltip>
+    )
+
+    hoverWithPointer(screen.getByRole('button'))
+    expect(screen.getByText('Helpful hint')).toBeInTheDocument()
+  })
+
+  it('Tooltip leaves its Button child clickable', () => {
+    const onPress = vi.fn()
+    render(
+      <Tooltip label="Helpful hint">
+        <Button onPress={onPress}>
+          <ButtonText>Hover me</ButtonText>
+        </Button>
+      </Tooltip>
+    )
+
+    pressWithPointer(screen.getByText('Hover me'))
+    expect(onPress).toHaveBeenCalledTimes(1)
+  })
+})