@duro-app/ui 5.11.0 → 5.13.0

package/src/components/AppShell/native.css.ts

@@ -0,0 +1,56 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * The native AppShell: a phone is below every `collapseBelow`, so it is
+ * always the narrow shape — the bar on top, Main below, the rail in a Drawer.
+ */
+export const nativeStyles = css.create({
+  shell: {
+    flexGrow: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    color: colors.text,
+    backgroundColor: colors.bg,
+  },
+  bar: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    minHeight: sizes.appBarH,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+    backgroundColor: colors.bgCard,
+    borderBottomWidth: borders.hairline,
+    borderBottomStyle: 'solid',
+    borderBottomColor: colors.border,
+  },
+  // The bar sits below the status bar: the top safe-area inset is its padding.
+  barTop: (top: number) => ({paddingTop: top}),
+  header: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  main: {
+    flexGrow: 1,
+    flexShrink: 1,
+    paddingTop: spacing.lg,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+  },
+  drawerFooter: {
+    marginTop: spacing.md,
+    paddingTop: spacing.md,
+    borderTopWidth: borders.hairline,
+    borderTopStyle: 'solid',
+    borderTopColor: colors.border,
+  },
+})

package/src/components/Button/Button.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode, Ref} from 'react'
-import {html} from 'react-strict-dom'
 import {isNative} from '../../platform'
 import {mergeRefs} from '../../shared/mergeRefs'
+import {ButtonHost} from '../../shared/ButtonHost'
 import type {ControlSize} from '../../shared/types'
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {styles} from './styles.css'
@@ -24,7 +24,8 @@ interface ButtonProps {
   'aria-controls'?: string
   /**
    * The underlying <button>, e.g. to anchor a Popover or return focus to it.
-   * Web only: on native the ref is not attached.
+   * On native it is react-strict-dom's element (a Pressable host), which
+   * measures with `measureInWindow` and takes accessibility focus.
    */
   ref?: Ref<HTMLButtonElement>
   children: ReactNode
@@ -50,8 +51,8 @@ export function Button({
 }: ButtonProps) {
   const grouped = useGroupedControl<HTMLButtonElement>({disabled})
   return (
-    <html.button
-      ref={isNative ? undefined : mergeRefs(ref, grouped.ref)}
+    <ButtonHost
+      ref={isNative ? ref : mergeRefs(ref, grouped.ref)}
       tabIndex={grouped.tabIndex}
       onFocus={grouped.onFocus}
       type={type}
@@ -71,6 +72,6 @@ export function Button({
       ]}
     >
       {children}
-    </html.button>
+    </ButtonHost>
   )
 }

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

@@ -130,6 +130,8 @@ export const styles = css.create({
   },
   fullWidth: {
     width: '100%',
+    // Native has no border-box reset (the web's global-reset.css); declare it.
+    boxSizing: 'border-box',
   },
   disabled: {
     opacity: 0.5,

package/src/components/Callout/Callout.tsx

@@ -2,6 +2,8 @@ import type {ReactNode} from 'react'
 import {html} from 'react-strict-dom'
 import {Icon} from '../Icon'
 import type {IconName} from '../Icon'
+import type {ColorToken} from '@duro-app/tokens/keys'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 export type CalloutVariant = 'error' | 'success' | 'warning' | 'info'
@@ -13,6 +15,15 @@ const defaultIcons: Record<CalloutVariant, IconName> = {
   error: 'x-circle-filled',
 }
 
+// On native an Icon cannot inherit the variant's text colour, so it is passed
+// (the web keeps inheriting it).
+const iconColor = {
+  error: 'errorText',
+  success: 'successText',
+  warning: 'warningText',
+  info: 'infoText',
+} as const satisfies Record<CalloutVariant, ColorToken>
+
 interface CalloutProps {
   variant?: CalloutVariant
   /** Built-in icon name, custom ReactNode, or false to hide. Defaults to variant icon. */
@@ -28,8 +39,9 @@ interface CalloutProps {
 
 function resolveIcon(icon: CalloutProps['icon'], variant: CalloutVariant): ReactNode | null {
   if (icon === false) return null
-  if (icon === undefined) return <Icon name={defaultIcons[variant]} size="xl" />
-  if (typeof icon === 'string') return <Icon name={icon as IconName} size="xl" />
+  const color = isNative ? iconColor[variant] : undefined
+  if (icon === undefined) return <Icon name={defaultIcons[variant]} size="xl" color={color} />
+  if (typeof icon === 'string') return <Icon name={icon as IconName} size="xl" color={color} />
   return icon
 }
 
@@ -45,7 +57,9 @@ export function Callout({variant = 'info', icon, align = 'center', children}: Ca
         align === 'center' ? styles.alignCenter : styles.alignStart,
       ]}
     >
-      {resolvedIcon && <html.span style={styles.icon}>{resolvedIcon}</html.span>}
+      {resolvedIcon && (
+        <html.span style={[styles.icon, isNative && styles.nativeFlex]}>{resolvedIcon}</html.span>
+      )}
       <html.div style={styles.content}>{children}</html.div>
     </html.div>
   )

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

@@ -55,4 +55,9 @@ export const styles = css.create({
     borderColor: colors.infoBorder,
     color: colors.infoText,
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native only.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/Checkbox/Checkbox.native.tsx

@@ -0,0 +1,67 @@
+import {type ReactNode, useState, useCallback} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+
+interface CheckboxProps {
+  name?: string
+  value?: string
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  /** Accessible label when no visible label (children) is provided. */
+  'aria-label'?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  children?: ReactNode
+}
+
+export function Checkbox({
+  name,
+  value,
+  checked: controlledChecked,
+  defaultChecked = false,
+  disabled = false,
+  'aria-label': ariaLabel,
+  onChange,
+  children,
+}: CheckboxProps) {
+  const isControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isControlled ? controlledChecked : internalChecked
+
+  // RSD only makes <button> pressable and has no <input type=checkbox>, so the
+  // whole row is a button and we synthesize the change payload that consumers
+  // read (e.target.checked).
+  const handlePress = useCallback(() => {
+    if (disabled) return
+    const next = !isChecked
+    if (!isControlled) {
+      setInternalChecked(next)
+    }
+    onChange?.({
+      target: {checked: next, name, value},
+    } as unknown as React.ChangeEvent<HTMLInputElement>)
+  }, [disabled, isChecked, isControlled, onChange, name, value])
+
+  return (
+    <html.button
+      type="button"
+      onClick={handlePress}
+      disabled={disabled}
+      role="checkbox"
+      aria-checked={isChecked}
+      aria-label={!children ? ariaLabel : undefined}
+      style={[styles.root, styles.nativeFlex, styles.nativeButton, disabled && styles.rootDisabled]}
+    >
+      <html.div
+        style={[styles.box, styles.nativeFlex, isChecked ? styles.boxChecked : styles.boxUnchecked]}
+      >
+        {/* CSS-border checkmark (rotated right+bottom borders) — no SVG, no
+              react-native-svg dep, so nothing is added to the web bundle. */}
+        <html.div
+          style={[styles.checkmark, isChecked ? styles.checkmarkVisible : styles.checkmarkHidden]}
+        />
+      </html.div>
+      {children && <html.span style={styles.labelText}>{children}</html.span>}
+    </html.button>
+  )
+}

package/src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,5 @@
 import {type ReactNode, useState, useCallback} from 'react'
 import {html} from 'react-strict-dom'
-import {isNative} from '../../platform'
 import {styles} from './styles.css'
 import {visuallyHidden} from '../../styles/visually-hidden.css'
 
@@ -30,7 +29,7 @@ export function Checkbox({
   const [internalChecked, setInternalChecked] = useState(defaultChecked)
   const isChecked = isControlled ? controlledChecked : internalChecked
 
-  // Web: the real <input type=checkbox> drives toggling, a11y and form submit.
+  // The real <input type=checkbox> drives toggling, a11y and form submit.
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       if (!isControlled) {
@@ -41,54 +40,6 @@ export function Checkbox({
     [isControlled, onChange],
   )
 
-  // Native: RSD only makes <button> pressable and has no <input type=checkbox>,
-  // so the whole row is a button and we synthesize the change payload that
-  // consumers read (e.target.checked).
-  const handlePress = useCallback(() => {
-    if (disabled) return
-    const next = !isChecked
-    if (!isControlled) {
-      setInternalChecked(next)
-    }
-    onChange?.({
-      target: {checked: next, name, value},
-    } as unknown as React.ChangeEvent<HTMLInputElement>)
-  }, [disabled, isChecked, isControlled, onChange, name, value])
-
-  if (isNative) {
-    return (
-      <html.button
-        type="button"
-        onClick={handlePress}
-        disabled={disabled}
-        role="checkbox"
-        aria-checked={isChecked}
-        aria-label={!children ? ariaLabel : undefined}
-        style={[
-          styles.root,
-          styles.nativeFlex,
-          styles.nativeButton,
-          disabled && styles.rootDisabled,
-        ]}
-      >
-        <html.div
-          style={[
-            styles.box,
-            styles.nativeFlex,
-            isChecked ? styles.boxChecked : styles.boxUnchecked,
-          ]}
-        >
-          {/* CSS-border checkmark (rotated right+bottom borders) — no SVG, no
-              react-native-svg dep, so nothing is added to the web bundle. */}
-          <html.div
-            style={[styles.checkmark, isChecked ? styles.checkmarkVisible : styles.checkmarkHidden]}
-          />
-        </html.div>
-        {children && <html.span style={styles.labelText}>{children}</html.span>}
-      </html.button>
-    )
-  }
-
   return (
     <html.label style={[styles.root, disabled && styles.rootDisabled]}>
       <html.input

package/src/components/ConfirmDialog/ConfirmDialog.tsx

@@ -74,6 +74,9 @@ export function ConfirmDialog({
                 value={typed}
                 onChange={(e) => setTyped(e.target.value)}
                 autoFocus
+                // The phrase must match exactly: no capitalising or correcting it.
+                autoCapitalize="none"
+                spellCheck={false}
                 aria-label="confirmation phrase"
               />
             </Field.Root>

package/src/components/DetailPanel/DetailPanel.tsx

@@ -10,7 +10,8 @@ import {
   useRef,
 } from 'react'
 import {html} from 'react-strict-dom'
-import {DURATION_MS, type DurationToken} from '@duro-app/tokens/keys'
+import type {DurationToken} from '@duro-app/tokens/keys'
+import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
 import {styles} from './styles.css'
 
 // --- Types ---
@@ -71,34 +72,19 @@ function Root({
   onOpenChange,
   closeAnimationDuration = 'base',
 }: RootProps) {
-  const isControlled = controlledOpen !== undefined
-  const [internalOpen, setInternalOpen] = useState(defaultOpen)
-  const [present, setPresent] = useState(defaultOpen)
-  const [closing, setClosing] = useState(false)
-  const closingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const {present, closing, requestOpen, requestClose} = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'at-once',
+  })
   const panelRef = useRef<HTMLDivElement>(null)
   const previousFocusRef = useRef<Element | null>(null)
 
   const titleId = useId()
   const [labelId, setLabelId] = useState<string | undefined>(undefined)
 
-  const isOpen = isControlled ? controlledOpen : internalOpen
-
-  // Sync presence with open state
-  useEffect(() => {
-    if (isOpen && !present) {
-      setPresent(true)
-      setClosing(false)
-    } else if (!isOpen && present && !closing) {
-      setClosing(true)
-      closingTimerRef.current = setTimeout(() => {
-        setClosing(false)
-        setPresent(false)
-        closingTimerRef.current = null
-      }, DURATION_MS[closeAnimationDuration])
-    }
-  }, [isOpen, present, closing, closeAnimationDuration])
-
   // Focus management: move focus on open, restore on close
   useEffect(() => {
     if (present && !closing) {
@@ -131,28 +117,6 @@ function Root({
     return () => document.removeEventListener('keydown', onKeyDown)
   }, [present, closing]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  // Clean up timer on unmount
-  useEffect(() => {
-    return () => {
-      if (closingTimerRef.current) clearTimeout(closingTimerRef.current)
-    }
-  }, [])
-
-  const requestOpen = useCallback(() => {
-    if (closingTimerRef.current) {
-      clearTimeout(closingTimerRef.current)
-      closingTimerRef.current = null
-      setClosing(false)
-    }
-    if (!isControlled) setInternalOpen(true)
-    onOpenChange?.(true)
-  }, [isControlled, onOpenChange])
-
-  const requestClose = useCallback(() => {
-    if (!isControlled) setInternalOpen(false)
-    onOpenChange?.(false)
-  }, [isControlled, onOpenChange])
-
   const registerTitle = useCallback((id: string) => {
     setLabelId(id)
   }, [])

package/src/components/Dialog/Dialog.native.tsx

@@ -0,0 +1,296 @@
+import {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
+import {
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native'
+import {html} from 'react-strict-dom'
+import type {DurationToken} from '@duro-app/tokens/keys'
+import {mergeRefs} from '../../shared/mergeRefs'
+import {ModalContext} from '../../shared/ModalContext'
+import {OverlayModal} from '../../shared/portal/OverlayModal'
+import {focusForAccessibility} from '../../shared/accessibilityFocus'
+import {useOverlayOpenState} from '../../shared/useOverlayOpenState'
+import {ControlContextBoundary} from '../Toolbar/ControlContextBoundary'
+import {Icon} from '../Icon/Icon'
+import {nativeStyles} from './native.css'
+import {partStyles} from './parts.css'
+import {
+  Description,
+  DialogContext,
+  Footer,
+  Header,
+  Title,
+  useDialog,
+  type DialogSize,
+} from './parts'
+
+export type {DialogSize}
+
+const exitDurationMap = {
+  instant: nativeStyles.exitInstant,
+  minimal: nativeStyles.exitMinimal,
+  quick: nativeStyles.exitQuick,
+  fast: nativeStyles.exitFast,
+  brisk: nativeStyles.exitBrisk,
+  base: nativeStyles.exitBase,
+  slow: nativeStyles.exitSlow,
+} as const satisfies Record<DurationToken, unknown>
+
+/** Native-only wiring: where accessibility focus goes on open and returns on close. */
+interface NativeDialogContextValue {
+  triggerRef: RefObject<unknown>
+  panelRef: RefObject<View | null>
+  closeOnEscape: boolean
+}
+
+const NativeDialogContext = createContext<NativeDialogContextValue | null>(null)
+
+function useNativeDialog() {
+  const ctx = useContext(NativeDialogContext)
+  if (!ctx) throw new Error('Dialog compound components must be used within Dialog.Root')
+  return ctx
+}
+
+interface RootProps {
+  children: ReactNode
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Whether pressing the backdrop closes the dialog. Default: true */
+  dismissable?: boolean
+  /** Whether Android's back button closes the dialog (Escape on the web). Default: true */
+  closeOnEscape?: boolean
+  /** Web only: on native, screen-reader focus moves to the dialog itself. */
+  initialFocus?: RefObject<HTMLElement | null>
+  closeAnimationDuration?: DurationToken
+}
+
+/**
+ * Native Dialog (plan N0, Slice A): the same compound API, rendered in an
+ * OverlayModal. The backdrop press and Android's back button close it; the
+ * screen reader's focus moves into the panel on open and back to the trigger
+ * on close.
+ */
+function Root({
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  dismissable = true,
+  closeOnEscape = true,
+  closeAnimationDuration = 'fast',
+}: RootProps) {
+  const {present, closing, requestOpen, requestClose} = useOverlayOpenState({
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    exitDuration: closeAnimationDuration,
+    closeNotice: 'after-exit',
+  })
+  const titleId = useId()
+  const descriptionId = useId()
+  const popupRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<unknown>(null)
+  const panelRef = useRef<View>(null)
+  const registerClose = useCallback(() => () => {}, [])
+
+  // Back to the trigger once the dialog is gone.
+  const wasPresent = useRef(present)
+  useEffect(() => {
+    if (wasPresent.current && !present) focusForAccessibility(triggerRef.current, 'Dialog')
+    wasPresent.current = present
+  }, [present])
+
+  return (
+    <DialogContext.Provider
+      value={{
+        open: present,
+        closing,
+        closeDuration: closeAnimationDuration,
+        dismissable,
+        requestOpen,
+        requestClose,
+        titleId,
+        descriptionId,
+        popupRef,
+        registerClose,
+      }}
+    >
+      <NativeDialogContext.Provider value={{triggerRef, panelRef, closeOnEscape}}>
+        {children}
+      </NativeDialogContext.Provider>
+    </DialogContext.Provider>
+  )
+}
+
+interface PressableChildProps {
+  onClick?: () => void
+  ref?: Ref<unknown>
+}
+
+/**
+ * Opens the dialog from its one child (a Button). Native presses do not
+ * bubble to a wrapper as web clicks do, so the child gets the handler, and
+ * its ref is where focus returns on close.
+ */
+function Trigger({children}: {children: ReactNode}) {
+  const {requestOpen} = useDialog()
+  const {triggerRef} = useNativeDialog()
+  const child = Children.only(children)
+  if (!isValidElement<PressableChildProps>(child)) return null
+  const own = child.props.onClick
+  return cloneElement(child as ReactElement<PressableChildProps>, {
+    ref: mergeRefs(child.props.ref, triggerRef),
+    onClick: () => {
+      own?.()
+      requestOpen()
+    },
+  })
+}
+
+interface PortalProps {
+  children: ReactNode
+  size?: DialogSize
+}
+
+function Portal({children, size = 'md'}: PortalProps) {
+  const {open, closing, closeDuration, dismissable, requestClose, titleId} = useDialog()
+  const {panelRef, closeOnEscape} = useNativeDialog()
+  // First frame hidden, then shown: the enter transition has a start state.
+  const [entered, setEntered] = useState(false)
+  useEffect(() => {
+    if (!open) {
+      setEntered(false)
+      return
+    }
+    const frame = requestAnimationFrame(() => setEntered(true))
+    return () => cancelAnimationFrame(frame)
+  }, [open])
+
+  // 85% of the window, as the web caps the panel at 85vh.
+  const maxPanelHeight = useWindowDimensions().height * 0.85
+  const shown = entered && !closing
+  const visibility = shown ? nativeStyles.shown : nativeStyles.hidden
+  return (
+    <OverlayModal
+      visible={open}
+      onRequestClose={() => {
+        if (closeOnEscape) requestClose()
+      }}
+      onShow={() => focusForAccessibility(panelRef.current, 'Dialog')}
+    >
+      <html.div
+        aria-hidden
+        onClick={dismissable ? requestClose : undefined}
+        style={[
+          nativeStyles.fill,
+          nativeStyles.backdrop,
+          shown ? nativeStyles.shown : nativeStyles.hidden,
+          closing && exitDurationMap[closeDuration],
+        ]}
+      />
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={StyleSheet.absoluteFill}
+        pointerEvents="box-none"
+      >
+        <View style={localStyles.viewport} pointerEvents="box-none">
+          <html.div style={nativeStyles.inset}>
+            <View ref={panelRef} accessibilityViewIsModal style={localStyles.panelHost}>
+              <html.div
+                role="dialog"
+                aria-modal
+                aria-labelledby={titleId}
+                style={[
+                  nativeStyles.popup,
+                  nativeStyles.maxHeight(maxPanelHeight),
+                  partStyles[size],
+                  visibility,
+                  closing && exitDurationMap[closeDuration],
+                ]}
+              >
+                <ModalContext.Provider value={true}>
+                  <ControlContextBoundary>{children}</ControlContextBoundary>
+                </ModalContext.Provider>
+              </html.div>
+            </View>
+          </html.div>
+        </View>
+      </KeyboardAvoidingView>
+    </OverlayModal>
+  )
+}
+
+// Layout-only RN views: the centring viewport lets presses outside the panel
+// through to the backdrop (`box-none`, which RSD styles cannot express), and
+// the panel host spans the width so the panel's size cap applies.
+const localStyles = StyleSheet.create({
+  viewport: {flex: 1, alignItems: 'center', justifyContent: 'center'},
+  panelHost: {width: '100%', alignItems: 'center'},
+  body: {flexGrow: 0, flexShrink: 1},
+})
+
+/** Native Body: a ScrollView, since a native div does not scroll its overflow. */
+function Body({children}: {children: ReactNode}) {
+  return (
+    <ScrollView style={localStyles.body}>
+      <html.div style={nativeStyles.bodyContent}>{children}</html.div>
+    </ScrollView>
+  )
+}
+
+interface CloseProps {
+  children?: ReactNode
+  'aria-label'?: string
+}
+
+function Close({children, 'aria-label': ariaLabel = 'Close'}: CloseProps) {
+  const {requestClose} = useDialog()
+  if (children) {
+    const child = Children.only(children)
+    if (!isValidElement<PressableChildProps>(child)) return null
+    const own = child.props.onClick
+    return cloneElement(child as ReactElement<PressableChildProps>, {
+      onClick: () => {
+        own?.()
+        requestClose()
+      },
+    })
+  }
+  return (
+    <html.button onClick={requestClose} aria-label={ariaLabel} style={partStyles.closeButton}>
+      <Icon name="x" size="sm" color="textMuted" />
+    </html.button>
+  )
+}
+
+export const Dialog = {
+  Root,
+  Trigger,
+  Portal,
+  Header,
+  Title,
+  Description,
+  Body,
+  Footer,
+  Close,
+}