@duro-app/ui 5.12.0 → 5.13.0

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',

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

@@ -0,0 +1,70 @@
+import {html} from 'react-strict-dom'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import {styles} from './styles.css'
+import {RemoveGlyph} from './RemoveGlyph'
+import {variantText, type TagProps} from './types'
+
+export type {TagProps, TagSize, TagVariant} from './types'
+
+const sizeMap = {
+  sm: styles.sizeSm,
+  md: styles.sizeMd,
+} as const
+
+const removableSizeMap = {
+  sm: styles.removableSm,
+  md: styles.removableMd,
+} as const
+
+/**
+ * Native Tag (plan N0, Slice B): the label and, when removable, the remove
+ * button. TagGroup is not ported (its grid keyboard model is web only,
+ * Decision 6), so `value` is unused here; the remove button's name comes from
+ * a string label.
+ */
+export function Tag({
+  variant = 'default',
+  size = 'md',
+  removable = false,
+  onRemove,
+  disabled = false,
+  wrap = false,
+  children,
+}: TagProps) {
+  const removeLabel = typeof children === 'string' ? `Remove ${children}` : 'Remove'
+  // A div, not the web's span: a native span is a Text, which would lay the
+  // remove button out inline, raised off the label's centre line.
+  return (
+    <html.div
+      style={[
+        styles.base,
+        styles.nativeFlex,
+        sizeMap[size],
+        removable && removableSizeMap[size],
+        styles[variant],
+        disabled && styles.disabled,
+        wrap && styles.wrap,
+      ]}
+    >
+      <html.span>{children}</html.span>
+      {removable && (
+        <html.button
+          type="button"
+          aria-label={removeLabel}
+          disabled={disabled}
+          onClick={disabled ? undefined : onRemove}
+          style={[
+            styles.removeButton,
+            styles.nativeButtonFlex,
+            disabled && styles.removeButtonDisabled,
+          ]}
+        >
+          <RemoveGlyph
+            size={size === 'sm' ? SIZES_PX.glyphXs : SIZES_PX.glyphSm}
+            color={variantText[variant]}
+          />
+        </html.button>
+      )}
+    </html.div>
+  )
+}

package/src/components/Tag/Tag.tsx

@@ -1,31 +1,12 @@
-import {type ReactNode, useCallback, useRef} from 'react'
+import {useCallback, useRef} from 'react'
 import {html} from 'react-strict-dom'
+import {SIZES_PX} from '@duro-app/tokens/keys'
 import {useTagGroup} from '../TagGroup/TagGroupContext'
 import {styles} from './styles.css'
+import {RemoveGlyph} from './RemoveGlyph'
+import {variantText, type TagProps} from './types'
 
-export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
-export type TagSize = 'sm' | 'md'
-
-interface TagProps {
-  /** Value identifier — required when used inside TagGroup */
-  value?: string
-  variant?: TagVariant
-  size?: TagSize
-  /** Show remove button. Auto-derived from TagGroup context when inside one. */
-  removable?: boolean
-  /** Called when remove button is clicked. Auto-wired to TagGroup when inside one. */
-  onRemove?: () => void
-  disabled?: boolean
-  /**
-   * Allow the label to wrap / break instead of staying on one line. Tags are
-   * `white-space: nowrap` by default (they read as pills); set this for long
-   * identifier-style values (e.g. `lldap.group.member.remove`) sitting in a
-   * constrained column, so they break within their cell instead of leaking
-   * into the next one.
-   */
-  wrap?: boolean
-  children: ReactNode
-}
+export type {TagProps, TagSize, TagVariant} from './types'
 
 const sizeMap = {
   sm: styles.sizeSm,
@@ -112,19 +93,10 @@ export function Tag({
             tabIndex={-1}
             style={[styles.removeButton, disabled && styles.removeButtonDisabled]}
           >
-            <svg
-              width={size === 'sm' ? 10 : 12}
-              height={size === 'sm' ? 10 : 12}
-              viewBox="0 0 12 12"
-              fill="none"
-            >
-              <path
-                d="M3 3l6 6M9 3l-6 6"
-                stroke="currentColor"
-                strokeWidth={1.5}
-                strokeLinecap="round"
-              />
-            </svg>
+            <RemoveGlyph
+              size={size === 'sm' ? SIZES_PX.glyphXs : SIZES_PX.glyphSm}
+              color={variantText[variant]}
+            />
           </html.button>
         </html.span>
       )}

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

@@ -110,6 +110,15 @@ export const styles = css.create({
     },
     outlineWidth: 0,
   },
+  // RSD on native lays out only display: flex, not the web's inline-flex.
+  nativeFlex: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignSelf: 'flex-start',
+  },
+  nativeButtonFlex: {
+    display: 'flex',
+  },
   removeButtonDisabled: {
     cursor: 'not-allowed',
     opacity: 0.4,

package/src/components/Tag/types.ts

@@ -0,0 +1,43 @@
+import type {ReactNode} from 'react'
+import type {ColorToken} from '@duro-app/tokens/keys'
+
+export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info'
+
+/** Each variant's text colour, which the remove cross draws in. */
+export const variantText = {
+  default: 'text',
+  success: 'successText',
+  warning: 'warningText',
+  error: 'errorText',
+  info: 'infoText',
+} as const satisfies Record<TagVariant, ColorToken>
+
+export type TagSize = 'sm' | 'md'
+
+export interface TagProps {
+  /** Value identifier — required when used inside TagGroup */
+  value?: string
+  variant?: TagVariant
+  size?: TagSize
+  /** Show remove button. Auto-derived from TagGroup context when inside one. */
+  removable?: boolean
+  /** Called when remove button is clicked. Auto-wired to TagGroup when inside one. */
+  onRemove?: () => void
+  disabled?: boolean
+  /**
+   * Allow the label to wrap / break instead of staying on one line. Tags are
+   * `white-space: nowrap` by default (they read as pills); set this for long
+   * identifier-style values (e.g. `lldap.group.member.remove`) sitting in a
+   * constrained column, so they break within their cell instead of leaking
+   * into the next one.
+   */
+  wrap?: boolean
+  children: ReactNode
+}
+
+export interface RemoveGlyphProps {
+  /** px, from the glyph size tokens */
+  size: number
+  /** Native only: the web inherits the tag's text colour. */
+  color: ColorToken
+}

package/src/components/Toast/Toast.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it).',
+    'Transient, self-dismissing notification for the RESULT of an action (saved, sent, revoked, failed). Mount <ToastProvider> once at the app root and call useToast().toast() from anywhere. Toasts stack and portal above dialogs. Variants: success, info, warning, error. The countdown pauses while a toast is hovered or holds focus, and every toast has a close button (`dismissLabel` on the provider names it). On React Native the same API draws through the portal host above every open overlay and the keyboard, as a card with a status-coloured edge, its action and its close in one row; a sideways swipe dismisses, a press holds the countdown, and so does an active screen reader (WCAG 2.2.1).',
   whenToUse: [
     'Confirming an action succeeded (e.g. "Grant revoked")',
     'Reporting an action failed, with the reason',