ionbase-ui 0.51.0 → 0.69.0

package/dist/components/Checkbox.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle, useEffect, } from 'react';
 import { resolveDisabled } from './resolve-disabled.js';
+import { resolveSelection } from './resolve-selection.js';
 /** Figma's check glyph. Inlined for the same reason as Select's chevron: it is
  *  part of the control, not a slot a caller fills. */
 const CheckMark = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m5 13 4 4L19 7", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }));
@@ -19,8 +20,9 @@ const DashMark = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-
  * declaratively and it must be written after every render.
  */
 export const Checkbox = forwardRef((props, forwardedRef) => {
-    const { size = 'md', intent = 'brand', isIndeterminate = false, className, children, isDisabled, disabled, ...rest } = props;
+    const { size = 'md', intent = 'brand', isIndeterminate = false, className, children, isDisabled, disabled, isSelected, checked, onChange, onSelectionChange, ...rest } = props;
     const resolvedDisabled = resolveDisabled(isDisabled, disabled);
+    const selection = resolveSelection(isSelected, checked, onChange, onSelectionChange);
     const domRef = useRef(null);
     useImperativeHandle(forwardedRef, () => domRef.current);
     useEffect(() => {
@@ -36,7 +38,7 @@ export const Checkbox = forwardRef((props, forwardedRef) => {
     ]
         .filter(Boolean)
         .join(' ');
-    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", disabled: resolvedDisabled, className: "ion-checkbox__input" }), _jsx("span", { className: "ion-checkbox__indicator", "aria-hidden": "true", children: _jsx("span", { className: "ion-checkbox__mark", children: isIndeterminate ? _jsx(DashMark, {}) : _jsx(CheckMark, {}) }) }), children && _jsx("span", { className: "ion-checkbox__label", children: children })] }));
+    return (_jsxs("label", { className: classNames, children: [_jsx("input", { ...rest, ref: domRef, type: "checkbox", checked: selection.checked, onChange: selection.onChange, disabled: resolvedDisabled, className: "ion-checkbox__input" }), _jsx("span", { className: "ion-checkbox__indicator", "aria-hidden": "true", children: _jsx("span", { className: "ion-checkbox__mark", children: isIndeterminate ? _jsx(DashMark, {}) : _jsx(CheckMark, {}) }) }), children && _jsx("span", { className: "ion-checkbox__label", children: children })] }));
 });
 Checkbox.displayName = 'Checkbox';
 //# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AA4BxD;sDACsD;AACtD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,UAAU,EACZ,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,OAAO,EAChB,eAAe,GAAG,KAAK,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAE/D,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,OAAO;YAAE,MAAM,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;IACrE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,UAAU,GAAG;QACjB,cAAc;QACd,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACnD,gBAAgB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;QAChD,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,qBAAqB,GAC/B,EACF,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,YAC1D,eAAM,SAAS,EAAC,oBAAoB,YACjC,eAAe,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC1C,GACF,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAQ,IAC9D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/components/Checkbox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EACZ,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAuB,MAAM,wBAAwB,CAAC;AA4B/E;sDACsD;AACtD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,gBAAgB,EAClB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CACrB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,UAAU,EACZ,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,GACrB,GACE,CACP,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;IACtB,MAAM,EACJ,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,OAAO,EAChB,eAAe,GAAG,KAAK,EACvB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,UAAU,EACV,OAAO,EACP,QAAQ,EACR,iBAAiB,EACjB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,gBAAgB,GAAG,eAAe,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC/D,MAAM,SAAS,GAAG,gBAAgB,CAChC,UAAU,EACV,OAAO,EACP,QAAQ,EACR,iBAAiB,CAClB,CAAC;IAEF,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,OAAQ,CAAC,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,CAAC,OAAO;YAAE,MAAM,CAAC,OAAO,CAAC,aAAa,GAAG,eAAe,CAAC;IACrE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,UAAU,GAAG;QACjB,cAAc;QACd,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,iBAAiB,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;QACnD,gBAAgB,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;QAChD,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,iBAAO,SAAS,EAAE,UAAU,aAC1B,mBACM,IAAI,EACR,GAAG,EAAE,MAAM,EACX,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,QAAQ,EAAE,gBAAgB,EAC1B,SAAS,EAAC,qBAAqB,GAC/B,EACF,eAAM,SAAS,EAAC,yBAAyB,iBAAa,MAAM,YAC1D,eAAM,SAAS,EAAC,oBAAoB,YACjC,eAAe,CAAC,CAAC,CAAC,KAAC,QAAQ,KAAG,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,GAC1C,GACF,EACN,QAAQ,IAAI,eAAM,SAAS,EAAC,qBAAqB,YAAE,QAAQ,GAAQ,IAC9D,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Combobox.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+export type ComboboxSize = 'sm' | 'md' | 'lg';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    /** Second line in the row. Part of the option's name, so it is searchable. */
+    description?: string;
+    isDisabled?: boolean;
+}
+export interface ComboboxProps {
+    /** The full option list. Filtering happens here, against what is typed. */
+    options: readonly ComboboxOption[];
+    /** Field label. Required for a usable control — see `a11y.requires`. */
+    label?: React.ReactNode;
+    /** Helper text below the field. */
+    description?: React.ReactNode;
+    /** Replaces the helper text when `isInvalid` is set. */
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    /** Matches Input's `Size` variant: Small, Medium, Large. */
+    size?: ComboboxSize;
+    placeholder?: string;
+    /** Controlled selection. `null` means nothing is selected. */
+    selectedKey?: string | null;
+    defaultSelectedKey?: string;
+    onSelectionChange?: (key: string | null) => void;
+    /** Controlled text. Usually only needed for async/remote filtering. */
+    inputValue?: string;
+    defaultInputValue?: string;
+    onInputChange?: (value: string) => void;
+    /**
+     * Accept text that matches no option. Off by default: a combobox whose value
+     * is a free string is a text field with suggestions, and the caller should
+     * have to say that is what they want.
+     */
+    allowsCustomValue?: boolean;
+    /**
+     * What opens the list. `input` — react-aria's default and this one — opens it
+     * on the first keystroke; the chevron opens it on demand. `focus` opens it
+     * the moment the field is tabbed into, which is loud in a long form.
+     */
+    menuTrigger?: 'focus' | 'input' | 'manual';
+    /** Shown in place of the list when nothing matches. */
+    emptyLabel?: React.ReactNode;
+    /** Accessible label for the disclosure button. */
+    buttonLabel?: string;
+    /** Posts the selected value under this name, for an uncontrolled form. */
+    name?: string;
+    className?: string;
+    wrapperClassName?: string;
+    id?: string;
+}
+/**
+ * Combobox — a text field that filters a list, with one selected value.
+ *
+ * Drawn in Figma as `Combobox` (1370:2359) — three sizes by seven states, the
+ * same axes `Input` carries, because the field IS Input's box. The open list is
+ * a second Figma component, `Combobox Menu`, with no React export behind it.
+ *
+ * WHY THIS IS NOT `Select` WITH A SEARCH BOX
+ *
+ * `Select` wraps a native `<select>`, whose list the browser owns: it cannot be
+ * filtered, and its rows can only hold text. Everything above about twenty
+ * options needs filtering, and `Select`'s own contract has pointed at "a
+ * combobox — not yet in this system" since it was written. This is it.
+ *
+ * The cost is that everything the native control gave away for free — keyboard
+ * handling, the mobile picker, screen-reader semantics — now has to be built.
+ * React Aria's `useComboBox` builds it: `role="combobox"` with `aria-expanded`,
+ * `aria-controls` and `aria-activedescendant`, arrow keys that move a virtual
+ * focus while the real focus stays in the input, and Escape that reverts.
+ *
+ * FILTERING IS LOCALE-AWARE, NOT `toLowerCase().includes()`
+ *
+ * `useFilter({ sensitivity: 'base' })` is `Intl.Collator` underneath, so
+ * "resume" matches "résumé" and Turkish dotted/dotless I behave the way a
+ * Turkish reader expects. The lowercase-and-includes version fails both, and
+ * fails them silently in exactly the locales least likely to be tested.
+ */
+export declare function Combobox({ options, label, description, errorMessage, isInvalid, isDisabled, isReadOnly, size, placeholder, selectedKey, defaultSelectedKey, onSelectionChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, menuTrigger, emptyLabel, buttonLabel, name, className, wrapperClassName, id, }: ComboboxProps): React.JSX.Element;
+export declare namespace Combobox {
+    var displayName: string;
+}
+//# sourceMappingURL=Combobox.d.ts.map

package/dist/components/Combobox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAiBzD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,OAAO,EAAE,SAAS,cAAc,EAAE,CAAC;IACnC,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wDAAwD;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACjD,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC3C,uDAAuD;IACvD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAyMD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,IAAW,EACX,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,WAAqB,EACrB,UAAyB,EACzB,WAAgC,EAChC,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,EAAE,GACH,EAAE,aAAa,qBAyPf;yBAjRe,QAAQ"}

package/dist/components/Combobox.js

@@ -0,0 +1,261 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { Overlay, usePopover, useComboBox, useListBox, useOption, useButton, useFilter, DismissButton, mergeProps, } from 'react-aria';
+import { useComboBoxState, Item } from 'react-stately';
+const ChevronDown = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m6 9 6 6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/* ------------------------------------------------------------------ option */
+function ComboboxOptionRow({ item, state, }) {
+    const ref = useRef(null);
+    const { optionProps, isSelected, isFocused, isDisabled } = useOption({ key: item.key }, state, ref);
+    const option = item.value;
+    return (_jsxs("li", { ...optionProps, ref: ref, className: [
+            'ion-combobox-menu__option',
+            isSelected ? 'ion-combobox-menu__option--selected' : '',
+            isFocused ? 'ion-combobox-menu__option--focused' : '',
+            isDisabled ? 'ion-combobox-menu__option--disabled' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), "data-focused": isFocused || undefined, "data-selected": isSelected || undefined, "data-disabled": isDisabled || undefined, children: [_jsx("span", { className: "ion-combobox-menu__label", children: item.rendered }), option?.description && (_jsx("span", { className: "ion-combobox-menu__description", children: option.description }))] }));
+}
+/** Breathing room kept between the menu and the viewport edge, in px. */
+const GUTTER = 8;
+/**
+ * The listbox, in its own component because it is mounted only while open.
+ *
+ * Same split as Popover and Drawer, and for the same reason: `usePopover`
+ * positions against a ref in an effect that runs when the component CALLING it
+ * mounts. Called beside `useComboBoxState` in the parent, that is the moment
+ * the input mounts, and the panel is then positioned once, at the origin,
+ * before it exists.
+ */
+function ComboboxListBox({ state, listBoxRef, popoverRef, triggerRef, listBoxProps, emptyLabel, }) {
+    const { popoverProps } = usePopover({
+        triggerRef,
+        popoverRef,
+        placement: 'bottom start',
+        offset: 4,
+        /*
+         * Non-modal, unlike every other overlay in this system. A modal popover
+         * moves focus into itself and hides the rest of the page — correct for a
+         * dialog, fatal here, because the user is still typing in the input and
+         * focus must never leave it. The input keeps focus and drives the list
+         * through `aria-activedescendant`.
+         */
+        isNonModal: true,
+    }, state);
+    const { listBoxProps: innerListBoxProps } = useListBox({ ...listBoxProps, disallowEmptySelection: true }, state, listBoxRef);
+    /*
+     * The menu matches the field's width rather than hugging its content.
+     * `usePopover` sizes to the panel, and a list narrower or wider than the
+     * control it belongs to reads as a different element. Measured rather than
+     * assumed, because the field is fluid.
+     *
+     * READ DURING RENDER, NOT FROM A ResizeObserver — and this cost an afternoon.
+     *
+     * The first version kept the width in state and synced it from a
+     * ResizeObserver on the field. It measured correctly and closed the menu:
+     * every open flashed a listbox that was gone about a hundred milliseconds
+     * later, before any option could take virtual focus. Writing a width onto a
+     * positioned popover feeds back into `usePopover`'s own position pass, and
+     * its scroll handling closes the overlay. Bisecting the panel down to nothing
+     * was the only way to see it — the symptom looked like a keyboard bug.
+     *
+     * The panel mounts only while open, so the trigger is already laid out by the
+     * time this runs. One read, no state, no observer, nothing to feed back.
+     */
+    const rect = triggerRef.current?.getBoundingClientRect();
+    /*
+     * Clamped to what is actually to the right of the trigger. A field running
+     * the full bleed of the page sits flush to the viewport edge, and a menu that
+     * matched its width exactly would start at the field's left and end past the
+     * edge — a horizontal scrollbar, which `useCloseOnScroll` reads as a scroll
+     * and closes the menu on. The failure mode was a combobox that could not be
+     * opened at all, so the clamp trades a slightly narrow menu for one that
+     * exists.
+     */
+    const width = rect
+        ? Math.min(rect.width, document.documentElement.clientWidth - rect.left - GUTTER)
+        : undefined;
+    const isEmpty = state.collection.size === 0;
+    return (_jsx(Overlay, { children: _jsxs("div", { ...popoverProps, ref: popoverRef, className: "ion-combobox-menu", style: { ...popoverProps.style, width }, children: [_jsx(DismissButton, { onDismiss: () => state.close() }), _jsx("ul", { ...mergeProps(innerListBoxProps), ref: listBoxRef, className: "ion-combobox-menu__list", children: [...state.collection].map((item) => (_jsx(ComboboxOptionRow, { item: item, state: state }, item.key))) }), isEmpty && (_jsx("div", { className: "ion-combobox-menu__empty", role: "presentation", children: emptyLabel })), _jsx(DismissButton, { onDismiss: () => state.close() })] }) }));
+}
+/* ---------------------------------------------------------------- combobox */
+/**
+ * Combobox — a text field that filters a list, with one selected value.
+ *
+ * Drawn in Figma as `Combobox` (1370:2359) — three sizes by seven states, the
+ * same axes `Input` carries, because the field IS Input's box. The open list is
+ * a second Figma component, `Combobox Menu`, with no React export behind it.
+ *
+ * WHY THIS IS NOT `Select` WITH A SEARCH BOX
+ *
+ * `Select` wraps a native `<select>`, whose list the browser owns: it cannot be
+ * filtered, and its rows can only hold text. Everything above about twenty
+ * options needs filtering, and `Select`'s own contract has pointed at "a
+ * combobox — not yet in this system" since it was written. This is it.
+ *
+ * The cost is that everything the native control gave away for free — keyboard
+ * handling, the mobile picker, screen-reader semantics — now has to be built.
+ * React Aria's `useComboBox` builds it: `role="combobox"` with `aria-expanded`,
+ * `aria-controls` and `aria-activedescendant`, arrow keys that move a virtual
+ * focus while the real focus stays in the input, and Escape that reverts.
+ *
+ * FILTERING IS LOCALE-AWARE, NOT `toLowerCase().includes()`
+ *
+ * `useFilter({ sensitivity: 'base' })` is `Intl.Collator` underneath, so
+ * "resume" matches "résumé" and Turkish dotted/dotless I behave the way a
+ * Turkish reader expects. The lowercase-and-includes version fails both, and
+ * fails them silently in exactly the locales least likely to be tested.
+ */
+export function Combobox({ options, label, description, errorMessage, isInvalid, isDisabled, isReadOnly, size = 'md', placeholder, selectedKey, defaultSelectedKey, onSelectionChange, inputValue, defaultInputValue, onInputChange, allowsCustomValue, menuTrigger = 'input', emptyLabel = 'No matches', buttonLabel = 'Show suggestions', name, className, wrapperClassName, id, }) {
+    const { contains } = useFilter({ sensitivity: 'base' });
+    /*
+     * The description is searchable, but it is NOT part of `textValue`.
+     *
+     * That distinction cost a test to find. `textValue` does double duty in
+     * react-stately: it is what the filter reads AND what the input is set to
+     * once an option is chosen. Folding the description into it made "Australia"
+     * searchable by "Oceania" and then wrote `Australia Oceania` into the field.
+     *
+     * So `textValue` stays the label, and the filter is widened instead —
+     * keyed by label, which is what a Node carries back to it.
+     */
+    const searchable = useMemo(() => {
+        const map = new Map();
+        for (const o of options) {
+            map.set(o.label, [o.label, o.description].filter(Boolean).join(' '));
+        }
+        return map;
+    }, [options]);
+    /*
+     * Filtering is done HERE, not handed to react-stately's `defaultFilter`.
+     *
+     * `defaultFilter` is only consulted for an UNCONTROLLED collection — one
+     * passed as `defaultItems`. Passed as `items`, as it is here, react-stately
+     * takes the list as final and the filter is silently ignored: no error, no
+     * warning, and a combobox that lists every option no matter what is typed.
+     * Three tests failed on it before the cause was obvious.
+     *
+     * `items` is the right half of that trade anyway. `defaultItems` snapshots
+     * the list on first render, so a caller whose options arrive from a fetch
+     * would get an empty combobox forever.
+     */
+    const [typed, setTyped] = useState(defaultInputValue ?? '');
+    const text = inputValue ?? typed;
+    const filtered = useMemo(() => {
+        if (!text)
+            return options;
+        /*
+         * An exact label match shows the WHOLE list, which looks like a bug and is
+         * the opposite. Selecting an option writes its label into the input, and a
+         * filter applied to that would narrow the list to the one row already
+         * chosen — so reopening it to change your mind would offer nothing else.
+         */
+        if (options.some((o) => o.label === text))
+            return options;
+        return options.filter((o) => contains(searchable.get(o.label) ?? o.label, text));
+    }, [contains, options, searchable, text]);
+    const disabledKeys = useMemo(() => options.filter((o) => o.isDisabled).map((o) => o.value), [options]);
+    const state = useComboBoxState({
+        label: typeof label === 'string' ? label : undefined,
+        items: filtered,
+        children: (item) => (_jsx(Item, { textValue: item.label, children: item.label }, item.value)),
+        disabledKeys,
+        menuTrigger,
+        /*
+         * The list stays mounted with nothing in it so the empty message can be
+         * shown. Left off, react-aria closes the popover the moment the filter
+         * matches nothing, and the user sees the list vanish with no explanation.
+         */
+        allowsEmptyCollection: true,
+        allowsCustomValue,
+        isDisabled,
+        isReadOnly,
+        selectedKey,
+        defaultSelectedKey,
+        onSelectionChange: onSelectionChange
+            ? (key) => onSelectionChange(key === null ? null : String(key))
+            : undefined,
+        inputValue,
+        defaultInputValue,
+        onInputChange: (value) => {
+            setTyped(value);
+            onInputChange?.(value);
+        },
+    });
+    const inputRef = useRef(null);
+    const listBoxRef = useRef(null);
+    const popoverRef = useRef(null);
+    const buttonRef = useRef(null);
+    const boxRef = useRef(null);
+    const { buttonProps: triggerProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, } = useComboBox({
+        /*
+         * `id` goes to useComboBox, not to useComboBoxState. The state owns the
+         * collection; the hook owns the DOM wiring — the input's id, the label's
+         * htmlFor, and the aria-controls that points at the listbox. Setting it
+         * on the state is accepted by neither and silently does nothing.
+         */
+        id,
+        label: typeof label === 'string' ? label : undefined,
+        placeholder,
+        isDisabled,
+        isReadOnly,
+        isInvalid,
+        inputRef,
+        listBoxRef,
+        popoverRef,
+        buttonRef,
+    }, state);
+    const { buttonProps } = useButton({
+        ...triggerProps,
+        'aria-label': buttonLabel,
+    }, buttonRef);
+    const helper = isInvalid && errorMessage ? errorMessage : description;
+    const boxClassNames = [
+        'ion-input',
+        'ion-combobox',
+        size !== 'md' ? `ion-input--${size}` : '',
+        isInvalid ? 'ion-input--invalid' : '',
+        isDisabled ? 'ion-input--disabled' : '',
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs("div", { className: [
+            'ion-field',
+            isInvalid ? 'ion-field--error' : '',
+            wrapperClassName || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label && (_jsx("label", { ...labelProps, className: "ion-field__label", children: label })), _jsxs("div", { ref: boxRef, className: boxClassNames, "data-open": state.isOpen || undefined, "data-invalid": isInvalid || undefined, "data-disabled": isDisabled || undefined, children: [_jsx("input", { ...inputProps, ref: inputRef, className: "ion-input__field" }), name && (_jsx("input", { type: "hidden", name: name, value: state.selectedKey == null ? '' : String(state.selectedKey) })), _jsx("button", { ...buttonProps, "aria-labelledby": undefined, "aria-label": buttonLabel, 
+                        /*
+                         * The press must not move focus to the button.
+                         *
+                         * `useComboBox` closes the list the moment focus leaves the input, so
+                         * a disclosure button that takes focus opens the list and closes it
+                         * again within the same gesture. A test caught exactly that: the
+                         * listbox was found and was gone by the next assertion. Chromium
+                         * focuses a button on mousedown, so this is not hypothetical.
+                         *
+                         * `preventDefault` on mousedown is what stops that — and the caret
+                         * goes to the field instead, which is where someone pressing a
+                         * chevron to browse a list wants to type next anyway.
+                         */
+                        onMouseDown: (e) => {
+                            e.preventDefault();
+                            inputRef.current?.focus();
+                        }, ref: buttonRef, type: "button", 
+                        /*
+                         * Out of the tab order on purpose, and this is the ARIA pattern
+                         * rather than an oversight. The input already reaches the list with
+                         * ArrowDown, so a tab stop on the disclosure button would make every
+                         * combobox in a form cost two tabs to pass and offer nothing the
+                         * input does not.
+                         */
+                        tabIndex: -1, className: "ion-combobox__button", children: _jsx(ChevronDown, {}) })] }), state.isOpen && (_jsx(ComboboxListBox, { state: state, listBoxRef: listBoxRef, popoverRef: popoverRef, triggerRef: boxRef, listBoxProps: listBoxProps, emptyLabel: emptyLabel })), helper && (_jsx("span", { ...(isInvalid && errorMessage
+                    ? errorMessageProps
+                    : descriptionProps), className: "ion-field__helper", children: helper }))] }));
+}
+Combobox.displayName = 'Combobox';
+//# sourceMappingURL=Combobox.js.map

package/dist/components/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/components/Combobox.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EACL,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,SAAS,EACT,SAAS,EACT,aAAa,EACb,UAAU,GACX,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AA6DvD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,iBAAa,MAAM,EAAC,SAAS,EAAC,OAAO,YACvE,eACE,CAAC,EAAC,cAAc,EAChB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACtB,GACE,CACP,CAAC;AAEF,+EAA+E;AAE/E,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,KAAK,GAIN;IACC,MAAM,GAAG,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACxC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,SAAS,CAClE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EACjB,KAAK,EACL,GAAG,CACJ,CAAC;IACF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;IAE1B,OAAO,CACL,iBACM,WAAW,EACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,2BAA2B;YAC3B,UAAU,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE;YACvD,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EAAE;YACrD,UAAU,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,EAAE;SACxD;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,kBACE,SAAS,IAAI,SAAS,mBACrB,UAAU,IAAI,SAAS,mBACvB,UAAU,IAAI,SAAS,aAEtC,eAAM,SAAS,EAAC,0BAA0B,YAAE,IAAI,CAAC,QAAQ,GAAQ,EAChE,MAAM,EAAE,WAAW,IAAI,CACtB,eAAM,SAAS,EAAC,gCAAgC,YAC7C,MAAM,CAAC,WAAW,GACd,CACR,IACE,CACN,CAAC;AACJ,CAAC;AAED,yEAAyE;AACzE,MAAM,MAAM,GAAG,CAAC,CAAC;AAmBjB;;;;;;;;GAQG;AACH,SAAS,eAAe,CAAC,EACvB,KAAK,EACL,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,EACZ,UAAU,GACQ;IAClB,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CACjC;QACE,UAAU;QACV,UAAU;QACV,SAAS,EAAE,cAAc;QACzB,MAAM,EAAE,CAAC;QACT;;;;;;WAMG;QACH,UAAU,EAAE,IAAI;KACjB,EACD,KAAK,CACN,CAAC;IAEF,MAAM,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,UAAU,CACpD,EAAE,GAAG,YAAY,EAAE,sBAAsB,EAAE,IAAI,EAAE,EACjD,KAAK,EACL,UAA+C,CAChD,CAAC;IAEF;;;;;;;;;;;;;;;;;;OAkBG;IACH,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACzD;;;;;;;;OAQG;IACH,MAAM,KAAK,GAAG,IAAI;QAChB,CAAC,CAAC,IAAI,CAAC,GAAG,CACN,IAAI,CAAC,KAAK,EACV,QAAQ,CAAC,eAAe,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,CAC1D;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,KAAC,OAAO,cACN,kBACM,YAAY,EAChB,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EAAE,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,aAOvC,KAAC,aAAa,IAAC,SAAS,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAI,EACjD,gBACM,UAAU,CAAC,iBAAiB,CAAC,EACjC,GAAG,EAAE,UAAU,EACf,SAAS,EAAC,yBAAyB,YAElC,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnC,KAAC,iBAAiB,IAEhB,IAAI,EAAE,IAA4B,EAClC,KAAK,EAAE,KAAK,IAFP,IAAI,CAAC,GAAG,CAGb,CACH,CAAC,GACC,EAMJ,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,0BAA0B,EAAC,IAAI,EAAC,cAAc,YAC1D,UAAU,GACP,CACP,EACD,KAAC,aAAa,IAAC,SAAS,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,GAAI,IAC7C,GACE,CACX,CAAC;AACJ,CAAC;AAED,+EAA+E;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,IAAI,GAAG,IAAI,EACX,WAAW,EACX,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,WAAW,GAAG,OAAO,EACrB,UAAU,GAAG,YAAY,EACzB,WAAW,GAAG,kBAAkB,EAChC,IAAI,EACJ,SAAS,EACT,gBAAgB,EAChB,EAAE,GACY;IACd,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IAExD;;;;;;;;;;OAUG;IACH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,GAAG,GAAG,IAAI,GAAG,EAAkB,CAAC;QACtC,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE,CAAC;YACxB,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACvE,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,iBAAiB,IAAI,EAAE,CAAC,CAAC;IAC5D,MAAM,IAAI,GAAG,UAAU,IAAI,KAAK,CAAC;IAEjC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAO,OAAO,CAAC;QAC1B;;;;;WAKG;QACH,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC;YAAE,OAAO,OAAO,CAAC;QAC1D,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAC1B,QAAQ,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,CACnD,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC;IAE1C,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAC7D,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,KAAK,GAAG,gBAAgB,CAAiB;QAC7C,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QACpD,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE,CAAC,IAAoB,EAAE,EAAE,CAAC,CAClC,KAAC,IAAI,IAAkB,SAAS,EAAE,IAAI,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,IADF,IAAI,CAAC,KAAK,CAEd,CACR;QACD,YAAY;QACZ,WAAW;QACX;;;;WAIG;QACH,qBAAqB,EAAE,IAAI;QAC3B,iBAAiB;QACjB,UAAU;QACV,UAAU;QACV,WAAW;QACX,kBAAkB;QAClB,iBAAiB,EAAE,iBAAiB;YAClC,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,iBAAiB,CAAC,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YAC/D,CAAC,CAAC,SAAS;QACb,UAAU;QACV,iBAAiB;QACjB,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;YACvB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;KACF,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE5C,MAAM,EACJ,WAAW,EAAE,YAAY,EACzB,UAAU,EACV,YAAY,EACZ,UAAU,EACV,gBAAgB,EAChB,iBAAiB,GAClB,GAAG,WAAW,CACb;QACE;;;;;WAKG;QACH,EAAE;QACF,KAAK,EAAE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS;QACpD,WAAW;QACX,UAAU;QACV,UAAU;QACV,SAAS;QACT,QAAQ;QACR,UAAU;QACV,UAAU;QACV,SAAS;KACV,EACD,KAAK,CACN,CAAC;IAEF,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,CAC/B;QACE,GAAG,YAAY;QACf,YAAY,EAAE,WAAW;KAC1B,EACD,SAAS,CACV,CAAC;IAEF,MAAM,MAAM,GAAG,SAAS,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAC;IAEtE,MAAM,aAAa,GAAG;QACpB,WAAW;QACX,cAAc;QACd,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,cAAc,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE;QACzC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;QACrC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;QACvC,SAAS,IAAI,EAAE;KAChB;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO,CACL,eACE,SAAS,EAAE;YACT,WAAW;YACX,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;YACnC,gBAAgB,IAAI,EAAE;SACvB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,aAEX,KAAK,IAAI,CACR,mBAAW,UAAU,EAAE,SAAS,EAAC,kBAAkB,YAChD,KAAK,GACA,CACT,EAED,eACE,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,aAAa,eACb,KAAK,CAAC,MAAM,IAAI,SAAS,kBACtB,SAAS,IAAI,SAAS,mBACrB,UAAU,IAAI,SAAS,aAEtC,mBAAW,UAAU,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAC,kBAAkB,GAAG,EAMpE,IAAI,IAAI,CACP,gBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GACjE,CACH,EACD,oBACM,WAAW,qBASE,SAAS,gBACd,WAAW;wBACvB;;;;;;;;;;;;2BAYG;wBACH,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;4BACjB,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;wBAC5B,CAAC,EACD,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ;wBACb;;;;;;2BAMG;wBACH,QAAQ,EAAE,CAAC,CAAC,EACZ,SAAS,EAAC,sBAAsB,YAEhC,KAAC,WAAW,KAAG,GACR,IACL,EAEL,KAAK,CAAC,MAAM,IAAI,CACf,KAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,CACH,EAEA,MAAM,IAAI,CACT,kBACM,CAAC,SAAS,IAAI,YAAY;oBAC5B,CAAC,CAAC,iBAAiB;oBACnB,CAAC,CAAC,gBAAgB,CAAC,EACrB,SAAS,EAAC,mBAAmB,YAE5B,MAAM,GACF,CACR,IACG,CACP,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/DateField.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { AriaDatePickerProps, DateValue } from 'react-aria';
+interface DateFieldProps extends AriaDatePickerProps<DateValue> {
+    className?: string;
+}
+/**
+ * The field itself. Rendered inside the picker's `.ion-input` box, which owns
+ * the border, the background and the states — exactly as Combobox reuses it.
+ */
+export declare function DateField({ className, ...props }: DateFieldProps): React.JSX.Element;
+export declare namespace DateField {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=DateField.d.ts.map

package/dist/components/DateField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.d.ts","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AA4DjE,UAAU,cAAe,SAAQ,mBAAmB,CAAC,SAAS,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAyDD;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,qBAqChE;yBArCe,SAAS"}

package/dist/components/DateField.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useDateField, useDateSegment, useLocale } from 'react-aria';
+import { useDateFieldState } from 'react-stately';
+import { createCalendar } from '@internationalized/date';
+/**
+ * One segment — a month, a day, a year, or a literal separator.
+ *
+ * The literal is rendered by the same component rather than being filtered out
+ * before the map. `useDateSegment` returns the separator's own props, including
+ * the `aria-hidden` that keeps `/` and `.` out of the announcement, and
+ * re-deriving that here would mean re-deriving it wrongly the first time a
+ * locale used a separator nobody tested.
+ */
+function Segment({ segment, state, }) {
+    const ref = useRef(null);
+    const { segmentProps } = useDateSegment(segment, state, ref);
+    return (_jsx("div", { ...segmentProps, ref: ref, className: [
+            'ion-date-field__segment',
+            segment.isPlaceholder ? 'ion-date-field__segment--placeholder' : '',
+            segment.type === 'literal' ? 'ion-date-field__segment--literal' : '',
+        ]
+            .filter(Boolean)
+            .join(' '), "data-placeholder": segment.isPlaceholder || undefined, style: {
+            /*
+             * Reserves the width of the widest value this segment can hold, so the
+             * field does not jitter as it is filled.
+             *
+             * `maxValue` is the segment's own maximum — 31 for a day, 12 for a
+             * month — not a guess at digit count, which is what makes it correct
+             * for a locale whose year segment is two digits or whose month segment
+             * is a name. A literal has no maxValue and needs no reservation.
+             *
+             * `ch` rather than `em`: the digits are what is being measured, and in
+             * every sans-serif worth shipping the digits are tabular-width.
+             */
+            minWidth: segment.maxValue != null
+                ? `${String(segment.maxValue).length}ch`
+                : undefined,
+        }, children: segment.text }));
+}
+/**
+ * The field itself. Rendered inside the picker's `.ion-input` box, which owns
+ * the border, the background and the states — exactly as Combobox reuses it.
+ */
+export function DateField({ className, ...props }) {
+    /*
+     * `useLocale` reads react-aria's I18nProvider, falling back to the browser's
+     * own locale when there is none. That fallback is why a consumer who never
+     * mounts a provider still gets their own date order rather than en-US.
+     */
+    const { locale } = useLocale();
+    const state = useDateFieldState({
+        ...props,
+        locale,
+        /*
+         * `createCalendar` is passed rather than imported by react-stately on
+         * purpose: it is the whole calendar-systems bundle, and a library that
+         * imported it directly would put every calendar in every consumer's bundle
+         * whether or not they render one. Handing it in is the opt-in.
+         */
+        createCalendar,
+    });
+    const ref = useRef(null);
+    const { fieldProps } = useDateField(props, state, ref);
+    return (_jsx("div", { ...fieldProps, ref: ref, className: ['ion-date-field', className].filter(Boolean).join(' '), children: state.segments.map((segment, i) => (
+        // Keyed by position, which is the only stable identity a segment
+        // has: the list is rebuilt whole when the locale changes, and two
+        // segments of the same type never coexist.
+        _jsx(Segment, { segment: segment, state: state }, i))) }));
+}
+DateField.displayName = 'DateField';
+//# sourceMappingURL=DateField.js.map

package/dist/components/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../src/components/DateField.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAiEzD;;;;;;;;GAQG;AACH,SAAS,OAAO,CAAC,EACf,OAAO,EACP,KAAK,GAIN;IACC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAE7D,OAAO,CACL,iBACM,YAAY,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE;YACT,yBAAyB;YACzB,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE;YACnE,OAAO,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE;SACrE;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,sBACM,OAAO,CAAC,aAAa,IAAI,SAAS,EACpD,KAAK,EAAE;YACL;;;;;;;;;;;eAWG;YACH,QAAQ,EACN,OAAO,CAAC,QAAQ,IAAI,IAAI;gBACtB,CAAC,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,IAAI;gBACxC,CAAC,CAAC,SAAS;SAChB,YAEA,OAAO,CAAC,IAAI,GACT,CACP,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IAC/D;;;;OAIG;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;IAE/B,MAAM,KAAK,GAAG,iBAAiB,CAAC;QAC9B,GAAG,KAAK;QACR,MAAM;QACN;;;;;WAKG;QACH,cAAc;KACf,CAAC,CAAC;IAEH,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,EAAE,UAAU,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IAEvD,OAAO,CACL,iBACM,UAAU,EACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,YAEjE,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC;QAClC,iEAAiE;QACjE,kEAAkE;QAClE,2CAA2C;QAC3C,KAAC,OAAO,IAAS,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,IAAjC,CAAC,CAAoC,CACpD,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,81 @@
+import React from 'react';
+import type { IsoDate } from './iso-date.js';
+export type DatePickerSize = 'sm' | 'md' | 'lg';
+export interface DatePickerProps {
+    /** Field label. Required for a usable control — see `a11y.requires`. */
+    label?: React.ReactNode;
+    /** Helper text below the field. */
+    description?: React.ReactNode;
+    /** Replaces the helper text when `isInvalid` is set. */
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    /** Matches Input's `Size` variant: Small, Medium, Large. */
+    size?: DatePickerSize;
+    /**
+     * The selected date as `YYYY-MM-DD`. `null` means nothing is selected.
+     *
+     * Not a `Date` and not a timestamp — a calendar date has no time and no
+     * timezone, so it cannot shift across midnight the way `new Date('2026-04-12')`
+     * does for every reader west of Greenwich. A malformed value throws rather
+     * than rendering an empty field.
+     */
+    value?: IsoDate | null;
+    /** The initial date as `YYYY-MM-DD`, for an uncontrolled picker. */
+    defaultValue?: IsoDate;
+    /** Fires with `YYYY-MM-DD`, or `null` when the field is cleared. */
+    onChange?: (value: IsoDate | null) => void;
+    /** Earliest selectable date, `YYYY-MM-DD`. Earlier dates are unreachable. */
+    minValue?: IsoDate;
+    /** Latest selectable date, `YYYY-MM-DD`. */
+    maxValue?: IsoDate;
+    /**
+     * Individual dates the calendar refuses — weekends, holidays, booked days.
+     * Receives `YYYY-MM-DD`. Use `minValue`/`maxValue` for a continuous bound;
+     * this is for the holes inside it.
+     */
+    isDateUnavailable?: (date: IsoDate) => boolean;
+    /** Posts the value under this name, for an uncontrolled form. */
+    name?: string;
+    /** Accessible label for the button that opens the calendar. */
+    calendarLabel?: string;
+    className?: string;
+    wrapperClassName?: string;
+    id?: string;
+}
+/**
+ * DatePicker — a segmented date field with a calendar attached.
+ *
+ * WHY NOT `<input type="date">`
+ *
+ * The native control is genuinely good on mobile and genuinely unusable as a
+ * design system component on desktop: its calendar cannot be styled at all, it
+ * cannot express an unavailable date that is not part of a continuous min/max
+ * range, and Safari on macOS renders no calendar button whatsoever. A system
+ * whose date field looks like a different control in every browser is not a
+ * design system, so this rebuilds it — and pays for that by having to rebuild
+ * the keyboard handling and the screen-reader semantics the native control gave
+ * away for free. React Aria's `useDatePicker` is what builds them back.
+ *
+ * THE VALUE IS A STRING, THE DISPLAY IS NOT
+ *
+ * `value` is always `YYYY-MM-DD` in the Gregorian calendar. What the user SEES
+ * is their own locale's field order and their own calendar system, resolved
+ * from `Intl` — so a German reader edits DD.MM.YYYY and the value still comes
+ * back as `2026-04-12`. See `iso-date.ts` for why the public type is not
+ * react-aria's `CalendarDate`.
+ *
+ * THE FIELD IS EDITABLE WITHOUT THE CALENDAR, AND THAT IS THE POINT
+ *
+ * Typing a date is faster than clicking one for anybody who knows the date they
+ * want, and paging a calendar back to a birth year is miserable. The segments
+ * take digits and arrow keys directly; the calendar is for the cases where the
+ * date is being chosen rather than recalled.
+ */
+export declare function DatePicker({ label, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, size, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, name, calendarLabel, className, wrapperClassName, id, }: DatePickerProps): React.JSX.Element;
+export declare namespace DatePicker {
+    var displayName: string;
+}
+//# sourceMappingURL=DatePicker.d.ts.map

package/dist/components/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAOtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAchD,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mCAAmC;IACnC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wDAAwD;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACvB,oEAAoE;IACpE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAC/C,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,IAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,IAAI,EACJ,aAA+B,EAC/B,SAAS,EACT,gBAAgB,EAChB,EAAE,GACH,EAAE,eAAe,qBAiJjB;yBArKe,UAAU"}