@duro-app/ui 5.12.0 → 5.14.0

package/dist/shared/ButtonHost.d.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { html } from 'react-strict-dom';
+export type ButtonHostProps = ComponentProps<typeof html.button>;
+/**
+ * The host element of Button and Toggle. On the web it is the <button>
+ * itself, with no component in between (a wrapper changed what a Form's
+ * submit focuses); the native variant (ButtonHost.native.tsx) can swap in an
+ * RN Pressable to carry a Tooltip's accessibility hint.
+ */
+export declare const ButtonHost: typeof html.button;
+//# sourceMappingURL=ButtonHost.d.ts.map

package/dist/shared/ButtonHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonHost.d.ts","sourceRoot":"","sources":["../../src/shared/ButtonHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAA;AACzC,OAAO,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAA;AAErC,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAA;AAEhE;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,OAAO,IAAI,CAAC,MAAoB,CAAA"}

package/dist/shared/pressableChild.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement, ReactNode, Ref } from 'react';
+interface PressableChildProps {
+    onClick?: () => void;
+    ref?: Ref<unknown>;
+}
+/**
+ * Native overlay triggers and closes: native presses do not bubble to a
+ * wrapper as web clicks do, so the one child (a Button) gets the handler
+ * itself, after its own. `ref` also receives the child's host, where focus
+ * returns when the overlay closes.
+ */
+export declare function withPress(children: ReactNode, onPress: () => void, ref?: Ref<unknown>): ReactElement<PressableChildProps, string | import('react').JSXElementConstructor<any>> | null;
+export {};
+//# sourceMappingURL=pressableChild.d.ts.map

package/dist/shared/pressableChild.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pressableChild.d.ts","sourceRoot":"","sources":["../../src/shared/pressableChild.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,GAAG,EACT,MAAM,OAAO,CAAA;AAGd,UAAU,mBAAmB;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC,iGAWrF"}

package/dist/shared/textOf.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+/**
+ * The text a React node would render, read from its props: a native picker's
+ * option label, where there is no DOM `textContent` to read it from.
+ */
+export declare function textOf(node: ReactNode): string;
+//# sourceMappingURL=textOf.d.ts.map

package/dist/shared/textOf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textOf.d.ts","sourceRoot":"","sources":["../../src/shared/textOf.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAA;AAEpD;;;GAGG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,SAAS,GAAG,MAAM,CAM9C"}

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, m as gt, R as it, H as kt, n as pt, o as bt, p as ft, q as mt, b as ht, t as yt, r as St, v as Tt } from "./Table-ColfpgKV.js";
+import { M as F, q as gt, R as it, H as kt, t as pt, v as bt, w as ft, x as mt, b as ht, g as yt, r as St, y as Tt } from "./Table-DnaoH-h5.js";
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-BuugS4D0.js";
 import { flexRender as E, useReactTable as rt, getPaginationRowModel as Ct, getFilteredRowModel as vt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.12.0",
+  "version": "5.14.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -39,6 +39,7 @@
       "types": "./dist/table.d.ts"
     },
     "./form": {
+      "react-native": "./src/form.native.ts",
       "source": "./src/form.ts",
       "import": "./dist/form.js",
       "types": "./dist/form.d.ts"
@@ -90,7 +91,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.12.0"
+    "@duro-app/tokens": "^5.14.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/AppShell/AppShell.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    "An application's frame: a navigation rail (a labelled nav, the brand at its top, an optional footer at its foot) beside the main content (main), with an optional Header. Below collapseBelow (sm default, md or lg), measured on the shell's own width, the rail is hidden and one sticky bar (a banner, appBarH tall) holds a Menu button that opens the same navigation in a left Drawer, the brand, and the Header's content when there is one — a shell without a Header still has its navigation on a phone. Above it the Header is a row that scrolls with the page and the rail stays sticky. CSS makes the switch: the server renders one HTML for every width with the brand in both places, and display: none hides the inactive copy, so nothing moves after hydration. A skip link (the first tab stop) focuses Main; an Aside inside Main sticks below the bar. Labels come from props. Compound component — Root is required.",
+    "An application's frame: a navigation rail (a labelled nav, the brand at its top, an optional footer at its foot) beside the main content (main), with an optional Header. Below collapseBelow (sm default, md or lg), measured on the shell's own width, the rail is hidden and one sticky bar (a banner, appBarH tall) holds a Menu button that opens the same navigation in a left Drawer, the brand, and the Header's content when there is one — a shell without a Header still has its navigation on a phone. Above it the Header is a row that scrolls with the page and the rail stays sticky. CSS makes the switch: the server renders one HTML for every width with the brand in both places, and display: none hides the inactive copy, so nothing moves after hydration. A skip link (the first tab stop) focuses Main; an Aside inside Main sticks below the bar. Labels come from props. Compound component — Root is required. On React Native it is always the narrow shape: the bar below the status bar, Main under it, and the Rail in a left Drawer; there is no skip link.",
   whenToUse: [
     'The frame of an app with a persistent navigation rail: an admin, a docs site, a dashboard',
     'A layout whose navigation must collapse into a drawer on a phone',

package/src/components/AppShell/AppShell.native.tsx

@@ -0,0 +1,174 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {Button} from '../Button/Button'
+import {Drawer} from '../Drawer/Drawer'
+import {Icon} from '../Icon'
+import {useSafeAreaInsets} from '../../shared/safeArea'
+import {nativeStyles} from './native.css'
+
+export type AppShellCollapse = 'sm' | 'md' | 'lg'
+
+interface AppShellContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  closeLabel: string
+}
+
+const AppShellContext = createContext<AppShellContextValue | null>(null)
+
+// True only where Root placed a Header itself, as on the web.
+const HeaderSlotContext = createContext(false)
+
+function useAppShell(): AppShellContextValue {
+  const ctx = useContext(AppShellContext)
+  if (!ctx) throw new Error('AppShell compound components must be used within AppShell.Root')
+  return ctx
+}
+
+interface RootProps {
+  /** The button that opens the navigation ("Menu"), from your text catalog. */
+  menuLabel: string
+  /** The accessible name of the drawer's close button ("Close navigation"). */
+  closeLabel: string
+  /** Web only: native has no skip link (no keyboard tab order to skip). */
+  skipLabel: string
+  /** The app's name or logo, shown in the bar beside the Menu button. */
+  brand?: ReactNode
+  /** Web only: a phone is below every breakpoint, so native always shows the bar and the drawer. */
+  collapseBelow?: AppShellCollapse
+  /** `AppShell.Rail`, `AppShell.Main` and an optional `AppShell.Header`, as direct children. */
+  children: ReactNode
+}
+
+/**
+ * Native AppShell (plan N0, Slice B): the narrow shape the web shows below
+ * `collapseBelow`, always — the bar on top (Menu button, brand, the Header's
+ * content) below the top safe-area inset, Main under it, and the Rail's
+ * navigation in a left Drawer. The same parts and props as the web.
+ */
+function Root({menuLabel, closeLabel, brand, children}: RootProps) {
+  const [open, setOpen] = useState(false)
+  const insets = useSafeAreaInsets()
+
+  let header: ReactNode = null
+  const rest: ReactNode[] = []
+  Children.forEach(children, (child) => {
+    if (isValidElement<HeaderProps>(child) && child.type === Header) {
+      header = child
+      return
+    }
+    rest.push(child)
+  })
+
+  const value = useMemo(() => ({open, setOpen, closeLabel}), [open, closeLabel])
+
+  return (
+    <AppShellContext.Provider value={value}>
+      <html.div style={nativeStyles.shell}>
+        <html.header style={[nativeStyles.bar, nativeStyles.barTop(insets.top)]}>
+          <Button
+            variant="secondary"
+            size="small"
+            aria-expanded={open}
+            onClick={() => setOpen(true)}
+          >
+            <Icon name="menu" size="sm" />
+            {menuLabel}
+          </Button>
+          {brand}
+          <HeaderSlotContext.Provider value={true}>{header}</HeaderSlotContext.Provider>
+        </html.header>
+        {rest}
+      </html.div>
+    </AppShellContext.Provider>
+  )
+}
+
+export interface AppShellRailState {
+  /** Closes the drawer. Call it after any selection in the navigation. */
+  close: () => void
+}
+
+type RailContent = ReactNode | ((state: AppShellRailState) => ReactNode)
+
+interface RailProps {
+  /** Names the navigation and the drawer ("Navigation"); required. */
+  'aria-label': string
+  /** The navigation (a SideNav, a Tree), shown in the drawer; a function receives `close`. */
+  children: RailContent
+  /** What sits at the end of the drawer; a function receives `close`. */
+  footer?: RailContent
+}
+
+function Rail({'aria-label': ariaLabel, children, footer}: RailProps) {
+  const {open, setOpen, closeLabel} = useAppShell()
+  const close = useCallback(() => setOpen(false), [setOpen])
+  const content = typeof children === 'function' ? children({close}) : children
+  const foot = typeof footer === 'function' ? footer({close}) : footer
+
+  return (
+    <Drawer.Root anchor="left" open={open} onOpenChange={setOpen}>
+      <Drawer.Portal size="sm">
+        <Drawer.Header>
+          <Drawer.Title>{ariaLabel}</Drawer.Title>
+          <Drawer.Close aria-label={closeLabel} />
+        </Drawer.Header>
+        <Drawer.Body>
+          <html.nav aria-label={ariaLabel}>
+            {content}
+            {foot != null && <html.div style={nativeStyles.drawerFooter}>{foot}</html.div>}
+          </html.nav>
+        </Drawer.Body>
+      </Drawer.Portal>
+    </Drawer.Root>
+  )
+}
+
+interface HeaderProps {
+  /** The header's content: a search field, the account menu. It sits in the bar. */
+  children?: ReactNode
+}
+
+function Header({children}: HeaderProps) {
+  useAppShell()
+  if (!useContext(HeaderSlotContext)) {
+    throw new Error(
+      'AppShell.Header must be a direct child of AppShell.Root (not inside a fragment or another component)',
+    )
+  }
+  return <html.div style={nativeStyles.header}>{children}</html.div>
+}
+
+interface MainProps {
+  children: ReactNode
+  /** Web only: the skip link's target. */
+  id?: string
+  /** The main region's host, e.g. to hand `useContainerBelow`. */
+  ref?: Ref<HTMLElement>
+}
+
+function Main({children, ref}: MainProps) {
+  useAppShell()
+  return (
+    <html.main ref={ref} style={nativeStyles.main}>
+      {children}
+    </html.main>
+  )
+}
+
+export const AppShell = {
+  Root,
+  Rail,
+  Header,
+  Main,
+}

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,9 +1,10 @@
 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 {useFormSubmit} from '../Form/FormSubmitContext'
 import {styles} from './styles.css'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'inverseSecondary' | 'link' | 'danger'
@@ -50,14 +51,24 @@ export function Button({
   children,
 }: ButtonProps) {
   const grouped = useGroupedControl<HTMLButtonElement>({disabled})
+  // Native Form only (no DOM submit event); the web Form provides none.
+  const formSubmit = useFormSubmit()
+  const submit = type === 'submit' ? formSubmit : null
   return (
-    <html.button
+    <ButtonHost
       ref={isNative ? ref : mergeRefs(ref, grouped.ref)}
       tabIndex={grouped.tabIndex}
       onFocus={grouped.onFocus}
       type={type}
       disabled={disabled}
-      onClick={onClick}
+      onClick={
+        submit
+          ? () => {
+              onClick?.()
+              submit()
+            }
+          : onClick
+      }
       aria-label={ariaLabel}
       aria-expanded={ariaExpanded}
       aria-controls={ariaControls}
@@ -72,6 +83,6 @@ export function Button({
       ]}
     >
       {children}
-    </html.button>
+    </ButtonHost>
   )
 }

package/src/components/ColorMode/ColorMode.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves "system" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it.',
+    'Color-mode controller + toggle. ColorModeProvider owns the preference (system/light/dark/high-contrast), resolves "system" against the OS scheme, persists it to localStorage, and applies the resolved theme via ThemeProvider. ColorModeToggle is an icon button that cycles the preference; useColorMode() reads it. On React Native "system" follows the OS appearance (useColorScheme) and nothing is stored: persist the preference yourself through preference and onPreferenceChange.',
   whenToUse: [
     'App-level light/dark (and high-contrast) switching that persists across reloads',
     'Respecting the OS prefers-color-scheme with a user override',

package/src/components/ColorMode/ColorMode.tsx

@@ -12,6 +12,8 @@ import {isNative} from '../../platform'
 import {Icon, type IconName, type IconSize} from '../Icon/Icon'
 import {ThemeProvider, type ThemeName} from '../ThemeProvider/ThemeProvider'
 import {styles} from './styles.css'
+import {useSystemScheme} from './useSystemScheme'
+import {readStoredRaw, writeStoredRaw} from './storage'
 
 /**
  * The user's *preference*. `'system'` follows the OS `prefers-color-scheme`;
@@ -62,31 +64,13 @@ export function useColorMode(): ColorModeContextValue {
   return ctx
 }
 
-const canUseDom =
-  !isNative && typeof window !== 'undefined' && typeof window.matchMedia === 'function'
-
 function isPreference(value: unknown): value is ColorModePreference {
   return typeof value === 'string' && (PREFERENCES as readonly string[]).includes(value)
 }
 
 function readStored(key: string | null): ColorModePreference | null {
-  if (!key || isNative || typeof window === 'undefined') return null
-  try {
-    const raw = window.localStorage.getItem(key)
-    return isPreference(raw) ? raw : null
-  } catch {
-    // Private mode / blocked storage — degrade to no persistence.
-    return null
-  }
-}
-
-function writeStored(key: string | null, value: ColorModePreference): void {
-  if (!key || isNative || typeof window === 'undefined') return
-  try {
-    window.localStorage.setItem(key, value)
-  } catch {
-    /* ignore */
-  }
+  const raw = readStoredRaw(key)
+  return isPreference(raw) ? raw : null
 }
 
 interface ColorModeProviderProps {
@@ -100,7 +84,8 @@ interface ColorModeProviderProps {
   onPreferenceChange?: (preference: ColorModePreference) => void
   /** Cycle order for `cycle()` / `<ColorModeToggle>`. Default `['light', 'dark']`. */
   modes?: readonly ColorModePreference[]
-  /** localStorage key for persistence; `null` disables it. Default `'duro-color-mode'`. */
+  /** localStorage key for persistence; `null` disables it. Default `'duro-color-mode'`.
+   * Native has no localStorage: persist through `preference` and `onPreferenceChange`. */
   storageKey?: string | null
   /** Wrap children in the DS `ThemeProvider` with the resolved theme. Default `true`.
    * Set `false` to drive your own ThemeProvider from `useColorMode().theme`. */
@@ -136,26 +121,15 @@ export function ColorModeProvider({
   const setPreference = useCallback(
     (next: ColorModePreference) => {
       if (controlled === undefined) setInternal(next)
-      writeStored(storageKey, next)
+      writeStoredRaw(storageKey, next)
       onPreferenceChange?.(next)
     },
     [controlled, storageKey, onPreferenceChange],
   )
 
-  // Track the OS scheme so `'system'` stays live. The initial value MUST be the
-  // SSR-stable default ('dark', what the server renders without a DOM) so the
-  // first client render matches the server — reading matchMedia in the
-  // initializer would diverge (server 'dark' vs client's real scheme) and trip
-  // a hydration mismatch. The effect reconciles to the real scheme after mount.
-  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>('dark')
-  useEffect(() => {
-    if (!canUseDom) return
-    const mq = window.matchMedia('(prefers-color-scheme: dark)')
-    const onChange = () => setSystemTheme(mq.matches ? 'dark' : 'light')
-    onChange()
-    mq.addEventListener('change', onChange)
-    return () => mq.removeEventListener('change', onChange)
-  }, [])
+  // Track the OS scheme so `'system'` stays live (web: prefers-color-scheme,
+  // after mount so hydration matches; native: RN Appearance).
+  const systemTheme = useSystemScheme()
 
   const theme: ThemeName = preference === 'system' ? systemTheme : preference
 
@@ -196,7 +170,12 @@ export function ColorModeToggle({size = 'md', 'aria-label': ariaLabel}: ColorMod
   const label = ariaLabel ?? `Color mode: ${LABEL[preference]}. Switch to ${LABEL[next]}.`
 
   return (
-    <html.button type="button" aria-label={label} onClick={cycle} style={styles.button}>
+    <html.button
+      type="button"
+      aria-label={label}
+      onClick={cycle}
+      style={[styles.button, isNative && styles.buttonNative]}
+    >
       <Icon name={ICON[preference]} size={size} />
     </html.button>
   )

package/src/components/ColorMode/storage.native.ts

@@ -0,0 +1,8 @@
+// Native has no localStorage: an app persists the preference itself, through
+// ColorModeProvider's `preference` and `onPreferenceChange`.
+
+export function readStoredRaw(_key: string | null): string | null {
+  return null
+}
+
+export function writeStoredRaw(_key: string | null, _value: string): void {}

package/src/components/ColorMode/storage.ts

@@ -0,0 +1,19 @@
+/** The stored preference, as a raw string; null without storage or a value. */
+export function readStoredRaw(key: string | null): string | null {
+  if (!key || typeof window === 'undefined') return null
+  try {
+    return window.localStorage.getItem(key)
+  } catch {
+    // Private mode / blocked storage — degrade to no persistence.
+    return null
+  }
+}
+
+export function writeStoredRaw(key: string | null, value: string): void {
+  if (!key || typeof window === 'undefined') return
+  try {
+    window.localStorage.setItem(key, value)
+  } catch {
+    /* ignore */
+  }
+}

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

@@ -31,4 +31,10 @@ export const styles = css.create({
     outlineColor: colors.accent,
     outlineOffset: borders.focusOffset,
   },
+  // RSD on native lays out only display: flex (not inline-flex), and a colour
+  // transition there ends near-black: keep the layout, drop the colour easing.
+  buttonNative: {
+    display: 'flex',
+    transitionProperty: 'opacity',
+  },
 })

package/src/components/ColorMode/useSystemScheme.native.ts

@@ -0,0 +1,6 @@
+import {useColorScheme} from 'react-native'
+
+/** The OS colour scheme, live, from RN Appearance; no answer reads as dark. */
+export function useSystemScheme(): 'light' | 'dark' {
+  return useColorScheme() === 'light' ? 'light' : 'dark'
+}

package/src/components/ColorMode/useSystemScheme.ts

@@ -0,0 +1,19 @@
+import {useEffect, useState} from 'react'
+
+/**
+ * The OS colour scheme, live. The first render answers `'dark'`, what the
+ * server renders without a DOM, so hydration matches; the effect then reads
+ * `prefers-color-scheme` and follows its changes.
+ */
+export function useSystemScheme(): 'light' | 'dark' {
+  const [scheme, setScheme] = useState<'light' | 'dark'>('dark')
+  useEffect(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return
+    const mq = window.matchMedia('(prefers-color-scheme: dark)')
+    const onChange = () => setScheme(mq.matches ? 'dark' : 'light')
+    onChange()
+    mq.addEventListener('change', onChange)
+    return () => mq.removeEventListener('change', onChange)
+  }, [])
+  return scheme
+}

package/src/components/Combobox/Combobox.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Searchable dropdown for selecting a value from a filterable list. Combines a text input with a popup listbox. Compound component — Root is required.',
+    "Searchable dropdown for selecting a value from a filterable list. Combines a text input with a popup listbox. Compound component — Root is required. Combobox.Popup takes label (the list's accessible name). On React Native the field opens a bottom sheet at its large detent, above the keyboard, titled by label with a Cancel text button (cancelLabel): a search field is pinned under the header and focused, the list below filters as you type, Combobox.Empty shows when nothing matches, and a press picks an option and closes the sheet. The sheet's search text starts empty each time; Combobox.Trigger renders nothing on native.",
   whenToUse: [
     'Large option lists where users benefit from typing to filter (e.g. country, city, user picker)',
     'Autocomplete or typeahead scenarios',