@duro-app/ui 5.11.0 → 5.13.0

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/Textarea/styles.css.ts

@@ -8,6 +8,8 @@ import {borders} from '@duro-app/tokens/tokens/borders.css'
 export const styles = css.create({
   base: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
     paddingTop: spacing.sm,
     paddingBottom: spacing.sm,
     paddingLeft: spacing.md,

package/src/components/ThemeProvider/ThemeProvider.native.tsx

@@ -1,13 +1,23 @@
 // Native (React Native / Expo) ThemeProvider — Metro resolves this over
 // ThemeProvider.tsx via the platform extension. The web version uses
 // `display:contents` + a fixed portal-mount, neither of which exists on RN, so
-// this applies the theme StyleX styles to a plain flex-column container and
-// drops the portal mount (native overlays don't portal to a fixed div).
-import {createContext, type ReactNode, useContext} from 'react'
+// this applies the theme to a plain flex-column container, and passive
+// overlays (toasts) draw through the host registry instead (plan N0,
+// Decision 2).
+import {createContext, type ReactNode, useContext, useMemo, useState} from 'react'
 import {css, html} from 'react-strict-dom'
+import type {ColorToken} from '@duro-app/tokens/keys'
+import {darkColors, highContrastColors, lightColors, type RawColors} from '@duro-app/tokens/raw'
 import {colors} from '@duro-app/tokens/tokens/colors.css'
 import {lightTheme, lightShadows} from '@duro-app/tokens/themes/light.css'
 import {highContrastTheme, highContrastShadows} from '@duro-app/tokens/themes/high-contrast.css'
+import {createHostRegistry, type HostRegistry} from '../../shared/portal/hostRegistry'
+import {HostRegistryContext, PortalHost} from '../../shared/portal/PortalHost'
+import {
+  ResolvedColorsContext,
+  ThemeScopeContext,
+  type ThemeScope,
+} from '../../shared/portal/themeScope'
 
 export type ThemeName = 'dark' | 'light' | 'high-contrast'
 
@@ -16,34 +26,84 @@ interface ThemeProviderProps {
   children: ReactNode
 }
 
-const themeMap: Partial<Record<ThemeName, readonly [typeof lightTheme, typeof lightShadows]>> = {
+// On the web, `dark` is the base vars and needs no theme. On native,
+// createTheme is a runtime call, so dark gets an explicit one: a dark
+// provider nested in a light one then draws dark, and its resolved colours
+// (below) agree with what RSD draws.
+const darkTheme = css.createTheme(colors, darkColors)
+
+const themeMap: Record<ThemeName, readonly unknown[]> = {
+  dark: [darkTheme],
   light: [lightTheme, lightShadows],
   'high-contrast': [highContrastTheme, highContrastShadows],
 }
 
+const palettes: Record<ThemeName, RawColors> = {
+  dark: darkColors,
+  light: lightColors,
+  'high-contrast': highContrastColors,
+}
+
 const styles = css.create({
   // No `display:contents` on RN. RSD uses web flex semantics on native, so
-  // declare flex + column explicitly; flex:1 lets a root provider fill.
+  // declare flex + column explicitly.
   root: {
     display: 'flex',
     flexDirection: 'column',
-    flex: 1,
     color: colors.text,
   },
+  // The app canvas: the web paints it on body from vars.css; native has no
+  // body, so the outermost provider paints it and fills its host (height,
+  // not flex: the host is an RN view, which RSD does not know is flex).
+  canvas: {
+    backgroundColor: colors.bg,
+    height: '100%',
+  },
 })
 
 type DivStyle = Parameters<typeof html.div>[0]['style']
 
 // Parity with the web export — there's no portal mount on native, so this is
-// always null. (The components that consume it aren't in the native barrel.)
+// always null.
 const PortalMountContext = createContext<HTMLElement | null>(null)
 
 export function usePortalMount(): HTMLElement | null {
   return useContext(PortalMountContext)
 }
 
+/**
+ * The nearest ThemeProvider's colours as real colour strings, for native hosts
+ * that cannot read a `var(--…)` reference: an Icon renderer, an animated
+ * backdrop, a Pressable. RSD styles keep using the `colors` tokens.
+ */
+export function useResolvedColors(): Record<ColorToken, string> {
+  return useContext(ResolvedColorsContext)
+}
+
 export function ThemeProvider({theme = 'dark', children}: ThemeProviderProps) {
-  const overrides = themeMap[theme]
-  const themeStyles = [overrides?.[0], overrides?.[1], styles.root] as DivStyle
-  return <html.div style={themeStyles}>{children}</html.div>
+  const outerRegistry = useContext(HostRegistryContext)
+  const outerScope = useContext(ThemeScopeContext)
+  // The outermost provider owns the registry and draws the root host.
+  const [ownRegistry] = useState<HostRegistry | null>(() =>
+    outerRegistry ? null : createHostRegistry(),
+  )
+  const registry = outerRegistry ?? ownRegistry
+  const themeStyles = themeMap[theme]
+  const scope = useMemo<ThemeScope>(
+    () => ({styles: [...outerScope.styles, ...themeStyles]}),
+    [outerScope, themeStyles],
+  )
+
+  return (
+    <HostRegistryContext.Provider value={registry}>
+      <ThemeScopeContext.Provider value={scope}>
+        <ResolvedColorsContext.Provider value={palettes[theme]}>
+          <html.div style={[...themeStyles, styles.root, ownRegistry && styles.canvas] as DivStyle}>
+            {children}
+            {ownRegistry ? <PortalHost placement="base" /> : null}
+          </html.div>
+        </ResolvedColorsContext.Provider>
+      </ThemeScopeContext.Provider>
+    </HostRegistryContext.Provider>
+  )
 }

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

package/src/components/Toast/ToastProvider.native.tsx

@@ -0,0 +1,226 @@
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from 'react'
+import {
+  AccessibilityInfo,
+  type LayoutChangeEvent,
+  Platform,
+  Pressable,
+  StyleSheet,
+} from 'react-native'
+import {Gesture, GestureDetector} from 'react-native-gesture-handler'
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import {scheduleOnRN} from 'react-native-worklets'
+import {html} from 'react-strict-dom'
+import {DURATION_MS, LAYERS, SPACING_PX} from '@duro-app/tokens/keys'
+import {Icon} from '../Icon/Icon'
+import {Portal} from '../../shared/portal/PortalHost'
+import {useSafeAreaInsets} from '../../shared/safeArea'
+import {useKeyboardHeight} from '../../shared/useKeyboardHeight'
+import {useScreenReaderEnabled} from '../../shared/useScreenReaderEnabled'
+import {DISMISS_DURATION, DRAG_SLOP, SNAP_DURATION, shouldDismissEdge} from '../Drawer/sheetPhysics'
+import {nativeStyles} from './native.css'
+import {createToastStore, type ToastContextValue, type ToastEntry, type ToastStore} from './store'
+
+export type {ToastAction, ToastContextValue, ToastOptions, ToastVariant} from './store'
+
+const ToastContext = createContext<ToastContextValue | null>(null)
+
+export function useToast(): ToastContextValue {
+  const ctx = useContext(ToastContext)
+  if (!ctx) throw new Error('useToast must be used within a <ToastProvider>')
+  return ctx
+}
+
+const easeOut = Easing.out(Easing.cubic)
+
+function ToastItem({
+  entry,
+  store,
+  onDismiss,
+  dismissLabel,
+  screenReader,
+}: {
+  entry: ToastEntry
+  store: ToastStore
+  onDismiss: (id: string) => void
+  dismissLabel: string
+  screenReader: boolean
+}) {
+  const {id, variant, message, action, duration} = entry
+  const [pressed, setPressed] = useState(false)
+  // A press holds the toast as hover does on the web; a screen reader holds
+  // it for as long as it is on (WCAG 2.2.1).
+  const paused = pressed || screenReader
+
+  // The store keeps what is left, so a toast that moves to another host
+  // (a Dialog above it closed) carries on where it was.
+  useEffect(() => {
+    if (duration <= 0 || paused) return
+    const started = Date.now()
+    const timer = setTimeout(() => onDismiss(id), Math.max(store.remaining(id), 0))
+    return () => {
+      clearTimeout(timer)
+      store.spend(id, Date.now() - started)
+    }
+  }, [id, duration, paused, onDismiss, store])
+
+  // iOS has no live regions: announce the message once. Android reads the
+  // live region itself, so announcing there too would read it twice.
+  const announced = useRef(false)
+  useEffect(() => {
+    if (Platform.OS !== 'ios' || announced.current || typeof message !== 'string') return
+    announced.current = true
+    AccessibilityInfo.announceForAccessibility(message)
+  }, [message])
+
+  const x = useSharedValue(0)
+  const shown = useSharedValue(0)
+  const width = useSharedValue(1)
+  useEffect(() => {
+    shown.value = withTiming(1, {duration: DURATION_MS.brisk, easing: easeOut})
+  }, [shown])
+
+  const pan = useMemo(
+    () =>
+      Gesture.Pan()
+        .activeOffsetX([-DRAG_SLOP, DRAG_SLOP])
+        .failOffsetY([-DRAG_SLOP, DRAG_SLOP])
+        .onUpdate((e) => {
+          x.value = e.translationX
+        })
+        .onEnd((e) => {
+          const distance = Math.abs(e.translationX)
+          if (shouldDismissEdge(distance, width.value, Math.abs(e.velocityX) / 1000)) {
+            const off = Math.sign(e.translationX || e.velocityX) * width.value
+            x.value = withTiming(off, {duration: DISMISS_DURATION}, (done) => {
+              if (done) scheduleOnRN(onDismiss, id)
+            })
+          } else {
+            x.value = withTiming(0, {duration: SNAP_DURATION, easing: easeOut})
+          }
+        }),
+    [id, onDismiss, x, width],
+  )
+
+  const motion = useAnimatedStyle(() => ({
+    opacity: shown.value * (1 - Math.min(1, Math.abs(x.value) / width.value)),
+    transform: [{translateX: x.value}, {translateY: (1 - shown.value) * SPACING_PX.sm}],
+  }))
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    width.value = e.nativeEvent.layout.width
+  }
+
+  return (
+    <GestureDetector gesture={pan}>
+      <Animated.View onLayout={onLayout} style={[layout.row, motion]}>
+        <Pressable
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}
+          accessible={false}
+          style={layout.row}
+        >
+          <html.div
+            role={variant === 'error' ? 'alert' : 'status'}
+            aria-live={variant === 'error' ? 'assertive' : 'polite'}
+            style={[nativeStyles.toast, nativeStyles[variant]]}
+          >
+            <html.div style={nativeStyles.message}>{message}</html.div>
+            {action ? (
+              <html.button
+                type="button"
+                style={nativeStyles.action}
+                onClick={() => {
+                  action.onClick()
+                  onDismiss(id)
+                }}
+              >
+                {action.label}
+              </html.button>
+            ) : null}
+            <html.button
+              type="button"
+              aria-label={dismissLabel}
+              style={nativeStyles.close}
+              onClick={() => onDismiss(id)}
+            >
+              <Icon name="x" size="sm" color="textMuted" />
+            </html.button>
+          </html.div>
+        </Pressable>
+      </Animated.View>
+    </GestureDetector>
+  )
+}
+
+// Layout-only: each toast row spans the region and centres its card.
+const layout = StyleSheet.create({row: {width: '100%', alignItems: 'center'}})
+
+export interface ToastProviderProps {
+  /** Accessible name of each toast's close button, e.g. from the app's message catalog. */
+  dismissLabel?: string
+  children: ReactNode
+}
+
+/**
+ * Native ToastProvider (plan N0, Slice B): the same store and countdown as
+ * the web, drawn through the portal host at `LAYERS.toast`, so a toast shows
+ * above the app, every open Duro overlay (a sheet included) and the
+ * keyboard. A sideways swipe or the close button dismisses it.
+ */
+export function ToastProvider({dismissLabel = 'Dismiss', children}: ToastProviderProps) {
+  const storeRef = useRef<ToastStore>(null)
+  if (storeRef.current === null) storeRef.current = createToastStore()
+  const store = storeRef.current
+  const entries = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot)
+  const insets = useSafeAreaInsets()
+  const keyboard = useKeyboardHeight()
+  const screenReader = useScreenReaderEnabled()
+
+  const value = useMemo<ToastContextValue>(
+    () => ({toast: (opts) => store.add(opts), dismiss: (id) => store.remove(id)}),
+    [store],
+  )
+  const dismiss = useCallback((id: string) => store.remove(id), [store])
+  const bottom = Math.max(insets.bottom, keyboard) + SPACING_PX.md
+
+  return (
+    <ToastContext.Provider value={value}>
+      {children}
+      {entries.length > 0 && (
+        <Portal layer={LAYERS.toast}>
+          <html.div
+            role="region"
+            aria-label="Notifications"
+            style={[nativeStyles.region, nativeStyles.regionBottom(bottom)]}
+          >
+            {entries.map((entry) => (
+              <ToastItem
+                key={entry.id}
+                entry={entry}
+                store={store}
+                onDismiss={dismiss}
+                dismissLabel={dismissLabel}
+                screenReader={screenReader}
+              />
+            ))}
+          </html.div>
+        </Portal>
+      )}
+    </ToastContext.Provider>
+  )
+}