@titan-design/react-ui 0.12.1 → 0.13.0

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)

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

@@ -3,8 +3,10 @@ import { View, Text, Pressable, type ViewProps, StyleSheet, Platform } from 'rea
 import { cn } from '../../../utils/cn'
 import { getHoverColors } from '../../../theme'
 import { greyRamp } from '../../../theme/tokens/primitives'
-import { getSemanticColors } from '../../../theme/tokens/semantic'
 import { resolveColor } from '../../../theme/resolve-color'
+import { getPressedRecessShadow } from '../../../theme/elevation'
+import { liftStyle } from '../../../theme/lift'
+import { Surface, useSurfaceMode } from '../surface'
 
 export type ToolbarButtonVariant = 'default' | 'raised'
 export type ToolbarButtonSize = 'sm' | 'md' | 'lg'
@@ -24,7 +26,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 +51,10 @@ 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.
 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 +76,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 +116,7 @@ export function ToolbarButton({
 }: ToolbarButtonProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [isHovered, setIsHovered] = useState(false)
+  const mode = useSurfaceMode()
 
   const handlePress = useCallback(() => {
     if (isDisabled) return
@@ -146,28 +140,21 @@ export function ToolbarButton({
     return showActive ? '#FFFFFF' : '#D1D1D1'
   }
 
-  // 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 +189,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 +223,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>

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)
+  })
+})