@duro-app/ui 5.11.0 → 5.13.0

package/src/components/Switch/Switch.native.tsx

@@ -0,0 +1,45 @@
+import {useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {useControllableValue} from '../../hooks/useControllableValue'
+import {styles} from './styles.css'
+import type {SwitchProps} from './Switch.types'
+
+export type {SwitchProps} from './Switch.types'
+
+/**
+ * Native Switch: RSD has no `<input type="checkbox">` on native, so the track
+ * button carries the switch role. `name` and `value` have no form to submit
+ * to here.
+ */
+export function Switch({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onCheckedChange,
+  disabled = false,
+  children,
+}: SwitchProps) {
+  const [checked, setChecked] = useControllableValue(
+    controlledChecked,
+    defaultChecked,
+    onCheckedChange,
+  )
+  const handleClick = useCallback(() => {
+    if (!disabled) setChecked(!checked)
+  }, [disabled, checked, setChecked])
+
+  return (
+    <html.label style={[styles.root, styles.nativeFlex, disabled && styles.rootDisabled]}>
+      <html.button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        disabled={disabled}
+        onClick={handleClick}
+        style={[styles.track, checked ? styles.trackChecked : styles.trackUnchecked]}
+      >
+        <html.span style={[styles.thumb, checked && styles.thumbChecked]} />
+      </html.button>
+      {children && <html.span>{children}</html.span>}
+    </html.label>
+  )
+}

package/src/components/Switch/Switch.tsx

@@ -1,26 +1,11 @@
-import {type ReactNode, useCallback, useRef} from 'react'
+import {useCallback, useRef} from 'react'
 import {html} from 'react-strict-dom'
-import {isNative} from '../../platform'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {styles} from './styles.css'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
+import type {SwitchProps} from './Switch.types'
 
-interface SwitchProps {
-  /** Controlled checked state. */
-  checked?: boolean
-  /** Initial checked state (uncontrolled). */
-  defaultChecked?: boolean
-  /** Callback fired when the checked state changes. */
-  onCheckedChange?: (checked: boolean) => void
-  /** Prevents user interaction. */
-  disabled?: boolean
-  /** Form field name for the hidden input. */
-  name?: string
-  /** Value submitted when checked. */
-  value?: string
-  /** Label content rendered beside the switch. */
-  children?: ReactNode
-}
+export type {SwitchProps} from './Switch.types'
 
 export function Switch({
   checked: controlledChecked,
@@ -48,35 +33,28 @@ export function Switch({
   }, [disabled, checked, setChecked])
 
   return (
-    <html.label
-      style={[styles.root, isNative && styles.nativeFlex, disabled && styles.rootDisabled]}
-    >
-      {!isNative && (
-        // Web: hidden real checkbox carries a11y + form submission. RSD has no
-        // <input type=checkbox> on native, so it's omitted there and the
-        // button below carries the switch role instead.
-        <html.input
-          ref={inputRef}
-          type="checkbox"
-          role="switch"
-          name={name}
-          value={value}
-          checked={controlledChecked !== undefined ? controlledChecked : undefined}
-          defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
-          disabled={disabled}
-          aria-checked={checked}
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            onCheckedChange?.(e.target.checked)
-          }}
-          style={[visuallyHidden.base, styles.input]}
-        />
-      )}
+    <html.label style={[styles.root, disabled && styles.rootDisabled]}>
+      {/* The hidden real checkbox carries a11y and form submission (native:
+          Switch.native.tsx, whose button carries the switch role). */}
+      <html.input
+        ref={inputRef}
+        type="checkbox"
+        role="switch"
+        name={name}
+        value={value}
+        checked={controlledChecked !== undefined ? controlledChecked : undefined}
+        defaultChecked={controlledChecked === undefined ? defaultChecked : undefined}
+        disabled={disabled}
+        aria-checked={checked}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          onCheckedChange?.(e.target.checked)
+        }}
+        style={[visuallyHidden.base, styles.input]}
+      />
       <html.button
         type="button"
         tabIndex={-1}
-        aria-hidden={isNative ? undefined : true}
-        role={isNative ? 'switch' : undefined}
-        aria-checked={isNative ? checked : undefined}
+        aria-hidden
         disabled={disabled}
         onClick={handleClick}
         style={[styles.track, checked ? styles.trackChecked : styles.trackUnchecked]}

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,18 @@
+import type {ReactNode} from 'react'
+
+export interface SwitchProps {
+  /** Controlled checked state. */
+  checked?: boolean
+  /** Initial checked state (uncontrolled). */
+  defaultChecked?: boolean
+  /** Callback fired when the checked state changes. */
+  onCheckedChange?: (checked: boolean) => void
+  /** Prevents user interaction. */
+  disabled?: boolean
+  /** Form field name for the hidden input. */
+  name?: string
+  /** Value submitted when checked. */
+  value?: string
+  /** Label content rendered beside the switch. */
+  children?: ReactNode
+}

package/src/components/TableOfContents/styles.css.ts

@@ -94,6 +94,8 @@ export const styles = css.create({
     justifyContent: 'space-between',
     gap: spacing.sm,
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     minHeight: sizes.touchTarget,
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,

package/src/components/Tabs/TabLayout.native.tsx

@@ -0,0 +1,9 @@
+import type {ReactNode} from 'react'
+import {View} from 'react-native'
+import {useReportTabLayout} from './indicator'
+
+/** Native: reports the tab's box to its List, which places the sliding indicator. */
+export function TabLayout({value, children}: {value: string; children: ReactNode}) {
+  const report = useReportTabLayout()
+  return <View onLayout={(e) => report?.(value, e.nativeEvent.layout)}>{children}</View>
+}

package/src/components/Tabs/TabLayout.tsx

@@ -0,0 +1,6 @@
+import type {ReactNode} from 'react'
+
+/** Web: the tab itself; the List measures it in the DOM (TabLayout.native.tsx reports it). */
+export function TabLayout({children}: {value: string; children: ReactNode}) {
+  return children
+}

package/src/components/Tabs/Tabs.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Tabbed interface with keyboard navigation. Supports horizontal and vertical orientation. Compound component — Root is required.',
+    'Tabbed interface with keyboard navigation. Supports horizontal and vertical orientation. Compound component — Root is required. On React Native the indicator follows each tab layout; there is no arrow-key navigation there, each tab is its own screen-reader stop.',
   whenToUse: [
     'Switching between content panels in the same view',
     'Settings pages with multiple sections',

package/src/components/Tabs/Tabs.tsx

@@ -1,8 +1,13 @@
-import {type ReactNode, useRef, useId, useEffect, useLayoutEffect, useState} from 'react'
+import {type ReactNode, useRef, useId, useEffect} from 'react'
 import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
+import {isNative} from '../../platform'
 import {TabsContext, useTabs} from './TabsContext'
 import {useTabsRoot} from './useTabsRoot'
+import {useTabIndicator} from './useTabIndicator'
+import {useTabKeys} from './useTabKeys'
+import {TabLayoutContext} from './indicator'
+import {TabLayout} from './TabLayout'
 
 // --- Root ---
 
@@ -41,120 +46,14 @@ interface ListProps {
 function List({children}: ListProps) {
   const {orientation, activeValue, onSelect, tabsRef, orderRef, setIndicatorActive} = useTabs()
   const listRef = useRef<HTMLDivElement>(null)
-  const [indicator, setIndicator] = useState<{offset: number; size: number} | null>(null)
 
-  // Measure the active tab and drive the sliding indicator. useLayoutEffect so
-  // the first position is set before paint (the indicator element mounts already
-  // in place — no slide-in from zero; only later tab changes animate). Observes
-  // the active tab (its own size, e.g. a changing "(3)" count) and the list
-  // (container resize / reflow). A non-active sibling resizing while you're on
-  // another tab is the one case not caught; it self-corrects on the next
-  // selection or resize.
-  useLayoutEffect(() => {
-    const list = listRef.current
-    if (!list || !activeValue) {
-      setIndicator(null)
-      setIndicatorActive(false)
-      return
-    }
-    const el = list.querySelector<HTMLElement>(`[data-tab-value="${CSS.escape(activeValue)}"]`)
-    if (!el) {
-      setIndicator(null)
-      setIndicatorActive(false)
-      return
-    }
-    const measure = () => {
-      setIndicator(
-        orientation === 'horizontal'
-          ? {offset: el.offsetLeft, size: el.offsetWidth}
-          : {offset: el.offsetTop, size: el.offsetHeight},
-      )
-      setIndicatorActive(true)
-    }
-    measure()
-    const ro = new ResizeObserver(measure)
-    ro.observe(el)
-    ro.observe(list)
-    return () => ro.disconnect()
-  }, [activeValue, orientation, setIndicatorActive])
-
-  useEffect(() => {
-    const el = listRef.current
-    if (!el) return
-    const listEl = el
-
-    function handleKeyDown(e: KeyboardEvent) {
-      const order = orderRef.current
-      const tabs = tabsRef.current
-      if (order.length === 0) return
-
-      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
-      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
-
-      let targetValue: string | null = null
-
-      switch (e.key) {
-        case nextKey: {
-          e.preventDefault()
-          const currentIdx = activeValue ? order.indexOf(activeValue) : -1
-          for (let i = 1; i <= order.length; i++) {
-            const idx = (currentIdx + i) % order.length
-            const val = order[idx]
-            if (!tabs.get(val)) {
-              targetValue = val
-              break
-            }
-          }
-          break
-        }
-        case prevKey: {
-          e.preventDefault()
-          const currentIdx = activeValue ? order.indexOf(activeValue) : 0
-          for (let i = 1; i <= order.length; i++) {
-            const idx = (currentIdx - i + order.length) % order.length
-            const val = order[idx]
-            if (!tabs.get(val)) {
-              targetValue = val
-              break
-            }
-          }
-          break
-        }
-        case 'Home': {
-          e.preventDefault()
-          for (const val of order) {
-            if (!tabs.get(val)) {
-              targetValue = val
-              break
-            }
-          }
-          break
-        }
-        case 'End': {
-          e.preventDefault()
-          for (let i = order.length - 1; i >= 0; i--) {
-            if (!tabs.get(order[i])) {
-              targetValue = order[i]
-              break
-            }
-          }
-          break
-        }
-      }
-
-      if (targetValue) {
-        onSelect(targetValue)
-        // Focus the newly activated tab button
-        const tabEl = listEl.querySelector(
-          `[data-tab-value="${targetValue}"]`,
-        ) as HTMLElement | null
-        tabEl?.focus()
-      }
-    }
-
-    el.addEventListener('keydown', handleKeyDown)
-    return () => el.removeEventListener('keydown', handleKeyDown)
-  }, [orientation, activeValue, onSelect, tabsRef, orderRef])
+  const {indicator, reportTabLayout} = useTabIndicator({
+    listRef,
+    activeValue,
+    orientation,
+    setIndicatorActive,
+  })
+  useTabKeys({listRef, orientation, activeValue, onSelect, tabsRef, orderRef})
 
   return (
     <html.div
@@ -163,7 +62,7 @@ function List({children}: ListProps) {
       aria-orientation={orientation}
       style={[styles.list, orientation === 'vertical' && styles.listVertical]}
     >
-      {children}
+      <TabLayoutContext.Provider value={reportTabLayout}>{children}</TabLayoutContext.Provider>
       {indicator && (
         <html.div
           aria-hidden
@@ -205,27 +104,30 @@ function Tab({value, disabled = false, children}: TabProps) {
   }
 
   return (
-    <html.button
-      type="button"
-      role="tab"
-      id={tabId}
-      aria-selected={isActive}
-      aria-controls={panelId}
-      aria-disabled={disabled || undefined}
-      data-tab-value={value}
-      tabIndex={isActive ? 0 : -1}
-      onClick={handleClick}
-      style={[
-        styles.tab,
-        orientation === 'vertical' && styles.tabVertical,
-        isActive &&
-          (orientation === 'vertical' ? styles.tabActiveVertical : styles.tabActiveHorizontal),
-        isActive && indicatorActive && styles.tabIndicatorActive,
-        disabled && styles.tabDisabled,
-      ]}
-    >
-      {children}
-    </html.button>
+    <TabLayout value={value}>
+      <html.button
+        type="button"
+        role="tab"
+        id={tabId}
+        aria-selected={isActive}
+        aria-controls={panelId}
+        aria-disabled={disabled || undefined}
+        data-tab-value={value}
+        tabIndex={isActive ? 0 : -1}
+        onClick={handleClick}
+        style={[
+          styles.tab,
+          isNative && styles.nativeFlex,
+          orientation === 'vertical' && styles.tabVertical,
+          isActive &&
+            (orientation === 'vertical' ? styles.tabActiveVertical : styles.tabActiveHorizontal),
+          isActive && indicatorActive && styles.tabIndicatorActive,
+          disabled && styles.tabDisabled,
+        ]}
+      >
+        {children}
+      </html.button>
+    </TabLayout>
   )
 }
 

package/src/components/Tabs/indicator.ts

@@ -0,0 +1,36 @@
+import {createContext, useContext} from 'react'
+import type {Orientation} from '../../shared/types'
+
+/** Where the sliding indicator sits along the list, in px. */
+export interface IndicatorBox {
+  offset: number
+  size: number
+}
+
+/** A tab's box inside its list, as native `onLayout` reports it. */
+export interface TabBox {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** Native: each Tab reports its box here, so the List places the indicator. */
+export const TabLayoutContext = createContext<((value: string, box: TabBox) => void) | null>(null)
+
+export function useReportTabLayout() {
+  return useContext(TabLayoutContext)
+}
+
+export interface TabIndicatorInput {
+  listRef: React.RefObject<HTMLDivElement | null>
+  activeValue: string | null
+  orientation: Orientation
+  setIndicatorActive: (active: boolean) => void
+}
+
+export interface TabIndicator {
+  indicator: IndicatorBox | null
+  /** Native only: what the Tabs report their layout to. */
+  reportTabLayout: ((value: string, box: TabBox) => void) | null
+}

package/src/components/Tabs/styles.css.ts

@@ -32,6 +32,13 @@ export const styles = css.create({
     borderRightColor: colors.border,
     gap: 0,
   },
+  // RSD on native lays out only display: flex, not the web's inline-flex,
+  // and its Animated colour transition ends on a near-black colour: native
+  // tabs transition nothing that changes (colour and underline switch at once).
+  nativeFlex: {
+    display: 'flex',
+    transitionProperty: 'opacity',
+  },
   tab: {
     display: 'inline-flex',
     alignItems: 'center',

package/src/components/Tabs/useTabIndicator.native.ts

@@ -0,0 +1,35 @@
+import {useCallback, useEffect, useState} from 'react'
+import type {TabBox, TabIndicator, TabIndicatorInput} from './indicator'
+
+/** Native: the indicator follows the active tab's `onLayout` box. */
+export function useTabIndicator({
+  activeValue,
+  orientation,
+  setIndicatorActive,
+}: TabIndicatorInput): TabIndicator {
+  const [boxes, setBoxes] = useState<ReadonlyMap<string, TabBox>>(() => new Map())
+  const reportTabLayout = useCallback((value: string, box: TabBox) => {
+    setBoxes((prev) => {
+      const old = prev.get(value)
+      if (
+        old &&
+        old.x === box.x &&
+        old.y === box.y &&
+        old.width === box.width &&
+        old.height === box.height
+      ) {
+        return prev
+      }
+      return new Map(prev).set(value, box)
+    })
+  }, [])
+  const box = activeValue ? boxes.get(activeValue) : undefined
+  const indicator = box
+    ? orientation === 'horizontal'
+      ? {offset: box.x, size: box.width}
+      : {offset: box.y, size: box.height}
+    : null
+  const active = indicator !== null
+  useEffect(() => setIndicatorActive(active), [active, setIndicatorActive])
+  return {indicator, reportTabLayout}
+}

package/src/components/Tabs/useTabIndicator.ts

@@ -0,0 +1,49 @@
+import {useLayoutEffect, useState} from 'react'
+import type {IndicatorBox, TabIndicator, TabIndicatorInput} from './indicator'
+
+/** Web: the active tab measured in the DOM, kept current by a ResizeObserver. */
+export function useTabIndicator({
+  listRef,
+  activeValue,
+  orientation,
+  setIndicatorActive,
+}: TabIndicatorInput): TabIndicator {
+  const [indicator, setIndicator] = useState<IndicatorBox | null>(null)
+
+  // Measure the active tab and drive the sliding indicator. useLayoutEffect so
+  // the first position is set before paint (the indicator element mounts already
+  // in place — no slide-in from zero; only later tab changes animate). Observes
+  // the active tab (its own size, e.g. a changing "(3)" count) and the list
+  // (container resize / reflow). A non-active sibling resizing while you're on
+  // another tab is the one case not caught; it self-corrects on the next
+  // selection or resize.
+  useLayoutEffect(() => {
+    const list = listRef.current
+    if (!list || !activeValue) {
+      setIndicator(null)
+      setIndicatorActive(false)
+      return
+    }
+    const el = list.querySelector<HTMLElement>(`[data-tab-value="${CSS.escape(activeValue)}"]`)
+    if (!el) {
+      setIndicator(null)
+      setIndicatorActive(false)
+      return
+    }
+    const measure = () => {
+      setIndicator(
+        orientation === 'horizontal'
+          ? {offset: el.offsetLeft, size: el.offsetWidth}
+          : {offset: el.offsetTop, size: el.offsetHeight},
+      )
+      setIndicatorActive(true)
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(el)
+    ro.observe(list)
+    return () => ro.disconnect()
+  }, [listRef, activeValue, orientation, setIndicatorActive])
+
+  return {indicator, reportTabLayout: null}
+}

package/src/components/Tabs/useTabKeys.native.ts

@@ -0,0 +1,2 @@
+/** Native has no arrow-key navigation (plan N0, Decision 6): each tab is its own stop. */
+export function useTabKeys(_input: unknown) {}

package/src/components/Tabs/useTabKeys.ts

@@ -0,0 +1,99 @@
+import {useEffect} from 'react'
+import type {Orientation} from '../../shared/types'
+
+interface TabKeysInput {
+  listRef: React.RefObject<HTMLDivElement | null>
+  orientation: Orientation
+  activeValue: string | null
+  onSelect: (value: string) => void
+  tabsRef: React.RefObject<Map<string, boolean>>
+  orderRef: React.RefObject<string[]>
+}
+
+/** Web: arrow keys, Home and End move the selection and focus along the list. */
+export function useTabKeys({
+  listRef,
+  orientation,
+  activeValue,
+  onSelect,
+  tabsRef,
+  orderRef,
+}: TabKeysInput) {
+  useEffect(() => {
+    const el = listRef.current
+    if (!el) return
+    const listEl = el
+
+    function handleKeyDown(e: KeyboardEvent) {
+      const order = orderRef.current
+      const tabs = tabsRef.current
+      if (order.length === 0) return
+
+      const prevKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+      const nextKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+
+      let targetValue: string | null = null
+
+      switch (e.key) {
+        case nextKey: {
+          e.preventDefault()
+          const currentIdx = activeValue ? order.indexOf(activeValue) : -1
+          for (let i = 1; i <= order.length; i++) {
+            const idx = (currentIdx + i) % order.length
+            const val = order[idx]
+            if (!tabs.get(val)) {
+              targetValue = val
+              break
+            }
+          }
+          break
+        }
+        case prevKey: {
+          e.preventDefault()
+          const currentIdx = activeValue ? order.indexOf(activeValue) : 0
+          for (let i = 1; i <= order.length; i++) {
+            const idx = (currentIdx - i + order.length) % order.length
+            const val = order[idx]
+            if (!tabs.get(val)) {
+              targetValue = val
+              break
+            }
+          }
+          break
+        }
+        case 'Home': {
+          e.preventDefault()
+          for (const val of order) {
+            if (!tabs.get(val)) {
+              targetValue = val
+              break
+            }
+          }
+          break
+        }
+        case 'End': {
+          e.preventDefault()
+          for (let i = order.length - 1; i >= 0; i--) {
+            if (!tabs.get(order[i])) {
+              targetValue = order[i]
+              break
+            }
+          }
+          break
+        }
+      }
+
+      if (targetValue) {
+        onSelect(targetValue)
+        // Focus the newly activated tab button
+        const tabEl = listEl.querySelector(
+          `[data-tab-value="${targetValue}"]`,
+        ) as HTMLElement | null
+        tabEl?.focus()
+      }
+    }
+
+    el.addEventListener('keydown', handleKeyDown)
+    return () => el.removeEventListener('keydown', handleKeyDown)
+  }, [listRef, orientation, activeValue, onSelect, tabsRef, orderRef])
+}

package/src/components/Tag/RemoveGlyph.native.tsx

@@ -0,0 +1,17 @@
+import Svg, {Path} from 'react-native-svg'
+import {useResolvedColors} from '../ThemeProvider/ThemeProvider'
+import type {RemoveGlyphProps} from './types'
+
+/**
+ * The same cross as the web's, drawn with react-native-svg (the native icon
+ * renderer, plan N0 Decision 9) in the tag's resolved text colour: a raw
+ * host has no CSS `currentColor` to inherit.
+ */
+export function RemoveGlyph({size, color}: RemoveGlyphProps) {
+  const stroke = useResolvedColors()[color]
+  return (
+    <Svg width={size} height={size} viewBox="0 0 12 12" fill="none" aria-hidden>
+      <Path d="M3 3l6 6M9 3l-6 6" stroke={stroke} strokeWidth={1.5} strokeLinecap="round" />
+    </Svg>
+  )
+}

package/src/components/Tag/RemoveGlyph.tsx

@@ -0,0 +1,10 @@
+import type {RemoveGlyphProps} from './types'
+
+/** The tag's remove cross: 1.5 strokes on a 12 box, drawn in the tag's text colour. */
+export function RemoveGlyph({size}: RemoveGlyphProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
+      <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" />
+    </svg>
+  )
+}

package/src/components/Tag/Tag.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Interactive tag/chip with optional remove button. Works standalone or inside TagGroup for collection management. Visually similar to Badge but supports interaction.',
+    'Interactive tag/chip with optional remove button. Works standalone or inside TagGroup for collection management. Visually similar to Badge but supports interaction. On React Native a Tag stands alone (TagGroup is web only): the label and, when removable, a remove button named from a string label.',
   whenToUse: [
     'Removable items in a list (emails, categories)',
     'Inside TagGroup for editable tag collections',