@duro-app/ui 5.13.0 → 5.15.0

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, p as gt, R as it, H as kt, q as pt, t as bt, v as ft, w as mt, b as ht, f as yt, r as St, x as Tt } from "./Table-Bms2ftt3.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.13.0",
+  "version": "5.15.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,11 +91,13 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.13.0"
+    "qrcode": "^1.5.4",
+    "@duro-app/tokens": "^5.15.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",
     "@hookform/resolvers": "^5.0.0",
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.0.0",

package/src/components/Button/Button.tsx

@@ -4,6 +4,7 @@ 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,6 +51,9 @@ 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 (
     <ButtonHost
       ref={isNative ? ref : mergeRefs(ref, grouped.ref)}
@@ -57,7 +61,14 @@ export function Button({
       onFocus={grouped.onFocus}
       type={type}
       disabled={disabled}
-      onClick={onClick}
+      onClick={
+        submit
+          ? () => {
+              onClick?.()
+              submit()
+            }
+          : onClick
+      }
       aria-label={ariaLabel}
       aria-expanded={ariaExpanded}
       aria-controls={ariaControls}

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

package/src/components/Combobox/Combobox.native.tsx

@@ -0,0 +1,295 @@
+import {
+  createContext,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
+import {Pressable} from 'react-native'
+import {html} from 'react-strict-dom'
+import {DURATION_MS} from '@duro-app/tokens/keys'
+import {styles} from './styles.css'
+import {nativeStyles} from './native.css'
+import {matchesQuery, useComboboxState} from './comboboxState'
+import {Drawer} from '../Drawer/Drawer'
+import {Listbox} from '../Listbox/Listbox'
+import {sheetStyles} from '../Listbox/native.css'
+import {Button} from '../Button/Button'
+import {Icon} from '../Icon/Icon'
+import {Chevron} from '../SideNav/Chevron'
+import {focusForAccessibility} from '../../shared/accessibilityFocus'
+import {focusInput} from '../../shared/focusInput'
+import {textOf} from '../../shared/textOf'
+
+/** The picker sheet's detents (plan N0, Decision 5); a Combobox opens at large. */
+const SNAP_POINTS = ['medium', 'large'] as const
+
+interface NativeComboboxContextValue {
+  value: string | null
+  open: boolean
+  setOpen: (open: boolean) => void
+  choose: (value: string) => void
+  labels: Record<string, string>
+  registerLabel: (value: string, label: string) => void
+  /** The labels of the Items rendered now, by value: what Empty matches against */
+  items: ReadonlyMap<string, string>
+  registerItem: (value: string, label: string) => () => void
+  /** What is typed in the sheet's search field */
+  query: string
+  setQuery: (query: string) => void
+  /** The field's placeholder, also the search field's */
+  placeholder: string | undefined
+  setPlaceholder: (placeholder: string | undefined) => void
+  listboxId: string
+  triggerRef: RefObject<unknown>
+}
+
+const ComboboxContext = createContext<NativeComboboxContextValue | null>(null)
+
+function useCombobox() {
+  const ctx = useContext(ComboboxContext)
+  if (!ctx) throw new Error('Combobox compound components must be used within Combobox.Root')
+  return ctx
+}
+
+/** True while Popup renders its items unseen, so each registers its label. */
+const CollectContext = createContext(false)
+
+interface RootProps {
+  /** The web's hidden form input; native has no form post. */
+  name?: string
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string | null) => void
+  /** The field's text: the chosen option's label on native */
+  inputValue?: string
+  onInputChange?: (value: string) => void
+  initialLabels?: Record<string, string>
+  children: ReactNode
+}
+
+/**
+ * Native Combobox (plan N0, Slice C): the field opens a bottom sheet at its
+ * large detent, above the keyboard, with a search field pinned under the
+ * header and focused; the list below filters as you type, and a press picks
+ * an option and closes the sheet (C0 direction A, "Check"). The search text
+ * is the sheet's own and starts empty each time it opens.
+ */
+function Root({
+  defaultValue,
+  value,
+  onValueChange,
+  inputValue,
+  onInputChange,
+  initialLabels,
+  children,
+}: RootProps) {
+  const state = useComboboxState({
+    defaultValue,
+    value,
+    onValueChange,
+    inputValue,
+    onInputChange,
+    initialLabels,
+  })
+  const {open, setOpen, chooseValue} = state
+  const [query, setQuery] = useState('')
+  const [items, setItems] = useState<ReadonlyMap<string, string>>(new Map())
+  const registerItem = useCallback((itemValue: string, label: string) => {
+    setItems((prev) => new Map(prev).set(itemValue, label))
+    return () =>
+      setItems((prev) => {
+        const next = new Map(prev)
+        next.delete(itemValue)
+        return next
+      })
+  }, [])
+  const [placeholder, setPlaceholder] = useState<string | undefined>(undefined)
+  const listboxId = useId()
+  const triggerRef = useRef<unknown>(null)
+
+  const wasOpen = useRef(open)
+  useEffect(() => {
+    if (open !== wasOpen.current) setQuery('')
+    if (wasOpen.current && !open) focusForAccessibility(triggerRef.current, 'Combobox')
+    wasOpen.current = open
+  }, [open])
+
+  const ctx: NativeComboboxContextValue = {
+    value: state.value,
+    open,
+    setOpen,
+    choose: chooseValue,
+    labels: state.labels,
+    registerLabel: state.registerLabel,
+    items,
+    registerItem,
+    query,
+    setQuery,
+    placeholder,
+    setPlaceholder,
+    listboxId,
+    triggerRef,
+  }
+
+  return (
+    <ComboboxContext.Provider value={ctx}>
+      <Drawer.Root
+        open={open}
+        onOpenChange={setOpen}
+        anchor="bottom"
+        snapPoints={SNAP_POINTS}
+        defaultSnapPoint="large"
+      >
+        <html.div style={[styles.root, nativeStyles.nativeFlex]}>{children}</html.div>
+      </Drawer.Root>
+    </ComboboxContext.Provider>
+  )
+}
+
+/**
+ * The closed field: the chosen option's label, or the placeholder. A press
+ * opens the sheet, where the typing happens.
+ */
+function Input({placeholder, children}: {placeholder?: string; children?: ReactNode}) {
+  const {value, labels, open, setOpen, setPlaceholder, triggerRef} = useCombobox()
+  const display = value ? (labels[value] ?? value) : null
+
+  useEffect(() => {
+    setPlaceholder(placeholder)
+  }, [placeholder, setPlaceholder])
+
+  return (
+    <Pressable
+      ref={triggerRef as RefObject<never>}
+      onPress={() => setOpen(true)}
+      accessibilityRole="combobox"
+      accessibilityLabel={display ?? placeholder}
+      accessibilityState={{expanded: open}}
+    >
+      <html.div style={[styles.inputWrapper, nativeStyles.field]}>
+        <html.span style={[nativeStyles.fieldText, !display && nativeStyles.fieldPlaceholder]}>
+          {display ?? placeholder}
+        </html.span>
+        {children}
+        <html.div style={nativeStyles.chevronDown}>
+          <Chevron color="textMuted" />
+        </html.div>
+      </html.div>
+    </Pressable>
+  )
+}
+
+/** The web's open/close button; on native the whole field opens the sheet. */
+function Trigger(_props: {children?: ReactNode}) {
+  return null
+}
+
+interface PopupProps {
+  children: ReactNode
+  /** The sheet's title (native) and the list's accessible name. */
+  label?: string
+  /** The sheet header's text button that closes it unchanged (native). Default: 'Cancel' */
+  cancelLabel?: string
+}
+
+function Popup({children, label, cancelLabel = 'Cancel'}: PopupProps) {
+  const {open, choose, query, setQuery, placeholder, listboxId} = useCombobox()
+  const inputRef = useRef<unknown>(null)
+
+  // Focus the search field once the sheet has entered: a TextInput's
+  // autoFocus fires on mount, before iOS has presented the Modal.
+  useEffect(() => {
+    if (!open) return
+    const timer = setTimeout(() => focusInput(inputRef.current), DURATION_MS.base)
+    return () => clearTimeout(timer)
+  }, [open])
+
+  return (
+    <>
+      <CollectContext.Provider value={true}>{children}</CollectContext.Provider>
+      <Drawer.Portal>
+        <Drawer.Header titleAlign="center">
+          {label ? <Drawer.Title>{label}</Drawer.Title> : null}
+          <Drawer.Close>
+            <Button variant="link">{cancelLabel}</Button>
+          </Drawer.Close>
+        </Drawer.Header>
+        <html.div style={sheetStyles.search}>
+          <Icon name="search" size="sm" color="textMuted" />
+          <html.input
+            ref={inputRef as Ref<never>}
+            type="search"
+            autoComplete="off"
+            autoCapitalize="none"
+            spellCheck={false}
+            value={query}
+            placeholder={placeholder}
+            aria-label={label ?? placeholder}
+            onChange={(e: {target: {value: string}}) => setQuery(e.target.value)}
+            style={sheetStyles.searchInput}
+          />
+        </html.div>
+        <Drawer.Body flush>
+          <Listbox.Root id={listboxId} open={open} onSelect={choose} aria-label={label}>
+            {children}
+          </Listbox.Root>
+        </Drawer.Body>
+      </Drawer.Portal>
+    </>
+  )
+}
+
+interface ItemProps {
+  value: string
+  children: ReactNode
+}
+
+function Item({value: itemValue, children}: ItemProps) {
+  const collecting = useContext(CollectContext)
+  const {value, labels, query, registerLabel, registerItem} = useCombobox()
+  const label = textOf(children)
+  useEffect(() => {
+    if (collecting && label) registerLabel(itemValue, label)
+  }, [collecting, itemValue, label, registerLabel])
+  useEffect(() => {
+    if (collecting) return registerItem(itemValue, label || itemValue)
+  }, [collecting, itemValue, label, registerItem])
+  if (collecting || !matchesQuery(labels[itemValue] ?? label, query)) return null
+  return (
+    <Listbox.Option value={itemValue} selected={value === itemValue}>
+      {children}
+    </Listbox.Option>
+  )
+}
+
+function ItemText({children}: {children: ReactNode}) {
+  return <html.span>{children}</html.span>
+}
+
+/** Shown under the search field when nothing matches what is typed. */
+function Empty({children}: {children: ReactNode}) {
+  const collecting = useContext(CollectContext)
+  const {query, items} = useCombobox()
+  if (collecting) return null
+  // Only the Items rendered now count: an initialLabels entry with no Item
+  // would otherwise hide Empty while the list shows nothing.
+  const anyMatch = [...items.values()].some((label) => matchesQuery(label, query))
+  if (anyMatch) return null
+  return <Listbox.Empty>{children}</Listbox.Empty>
+}
+
+export const Combobox = {
+  Root,
+  Input,
+  Trigger,
+  Popup,
+  Item,
+  ItemText,
+  Empty,
+}

package/src/components/Combobox/Combobox.tsx

@@ -3,6 +3,7 @@ import {html} from 'react-strict-dom'
 import {styles} from './styles.css'
 import {ComboboxContext, useCombobox} from './ComboboxContext'
 import {useComboboxRoot} from './useComboboxRoot'
+import {matchesQuery} from './comboboxState'
 import {Listbox, getAnchorProps} from '../Listbox/Listbox'
 
 // --- Root ---
@@ -134,7 +135,15 @@ function Trigger({children}: {children?: ReactNode}) {
 // A Listbox placed under the input, as wide as the field: rendered into the
 // ThemeProvider portal mount so it escapes ancestor `overflow: hidden` /
 // `transform` containing blocks (notably Dialog and Drawer).
-function Popup({children}: {children: ReactNode}) {
+interface PopupProps {
+  children: ReactNode
+  /** The list's accessible name; on native also the sheet's title. */
+  label?: string
+  /** Native only: the sheet header's text button that closes it unchanged. Default: 'Cancel' */
+  cancelLabel?: string
+}
+
+function Popup({children, label}: PopupProps) {
   const {open, listboxId, rootRef, highlightedId, setHighlightedId, setValue} = useCombobox()
   const anchor = useCallback(() => rootRef.current?.getBoundingClientRect(), [rootRef])
 
@@ -147,6 +156,7 @@ function Popup({children}: {children: ReactNode}) {
       highlightedId={highlightedId}
       onHighlight={setHighlightedId}
       onSelect={setValue}
+      aria-label={label}
       maxHeight="listMaxHSm"
     >
       {children}
@@ -167,9 +177,7 @@ function Item({value: itemValue, children}: ItemProps) {
   const isSelected = selectedValue === itemValue
 
   // Filter: check if this item matches the input
-  const label = labels[itemValue] ?? itemValue
-  const query = inputValue.toLowerCase()
-  const isVisible = !query || label.toLowerCase().includes(query)
+  const isVisible = matchesQuery(labels[itemValue] ?? itemValue, inputValue)
 
   useEffect(() => {
     const el = ref.current
@@ -205,10 +213,8 @@ function Empty({children}: {children: ReactNode}) {
   if (!open) return null
 
   // Check if any items are visible
-  const query = inputValue.toLowerCase()
-  const hasVisibleItems = query
-    ? Object.values(labels).some((label) => label.toLowerCase().includes(query))
-    : true
+  const hasVisibleItems =
+    !inputValue || Object.values(labels).some((label) => matchesQuery(label, inputValue))
 
   if (hasVisibleItems) return null