ionbase-ui 0.59.0 → 0.69.0

package/dist/components/DatePicker.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useDatePicker, useButton } from 'react-aria';
+import { useDatePickerState } from 'react-stately';
+import { DateField } from './DateField.js';
+import { SingleCalendar } from './Calendar.js';
+import { CalendarPopover } from './CalendarPopover.js';
+import { toCalendarDate, toIso, wrapUnavailable } from './iso-date.js';
+const CalendarIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M8 2v4m8-4v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/**
+ * 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 function DatePicker({ label, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, size = 'md', value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, name, calendarLabel = 'Open calendar', className, wrapperClassName, id, }) {
+    /*
+     * The ISO boundary, crossed once on the way in and once on the way out.
+     *
+     * `value === undefined` has to survive the conversion as `undefined`, not
+     * become `null`. react-aria reads the two differently: `undefined` means
+     * uncontrolled and `null` means controlled-and-empty, so collapsing them
+     * would make an uncontrolled picker refuse to hold the date it was given.
+     */
+    const ariaProps = {
+        label: typeof label === 'string' ? label : undefined,
+        value: value === undefined ? undefined : toCalendarDate(value, 'value'),
+        defaultValue: toCalendarDate(defaultValue, 'defaultValue') ?? undefined,
+        minValue: toCalendarDate(minValue, 'minValue') ?? undefined,
+        maxValue: toCalendarDate(maxValue, 'maxValue') ?? undefined,
+        isDateUnavailable: wrapUnavailable(isDateUnavailable),
+        isDisabled,
+        isReadOnly,
+        isRequired,
+        isInvalid,
+        /*
+         * `granularity: 'day'` is what keeps this a DATE picker. Left unset,
+         * react-aria infers granularity from the value's type, and a value of
+         * `undefined` infers 'minute' — so an empty picker renders hour and minute
+         * segments that disappear the moment a date-only value arrives.
+         */
+        granularity: 'day',
+        onChange: onChange
+            ? (date) => onChange(date ? toIso(date) : null)
+            : undefined,
+    };
+    const state = useDatePickerState(ariaProps);
+    const groupRef = useRef(null);
+    const buttonRef = useRef(null);
+    const { groupProps, labelProps, fieldProps, buttonProps: triggerProps, dialogProps, calendarProps, descriptionProps, errorMessageProps, } = useDatePicker({ ...ariaProps, id }, state, groupRef);
+    const { buttonProps } = useButton(triggerProps, buttonRef);
+    const helper = isInvalid && errorMessage ? errorMessage : description;
+    return (_jsxs("div", { className: [
+            'ion-field',
+            isInvalid ? 'ion-field--error' : '',
+            wrapperClassName || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label && (
+            // A <span>, not a <label>. The group is a set of spinbuttons rather
+            // than one form control, so `htmlFor` has nothing to point at —
+            // `useDatePicker` wires the name through `aria-labelledby` instead.
+            _jsx("span", { ...labelProps, className: "ion-field__label", children: label })), _jsxs("div", { ...groupProps, ref: groupRef, className: [
+                    'ion-input',
+                    'ion-date-picker',
+                    size !== 'md' ? `ion-input--${size}` : '',
+                    isInvalid ? 'ion-input--invalid' : '',
+                    isDisabled ? 'ion-input--disabled' : '',
+                    isReadOnly ? 'ion-input--readonly' : '',
+                    className || '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), "data-open": state.isOpen || undefined, "data-invalid": isInvalid || undefined, "data-disabled": isDisabled || undefined, children: [_jsx(DateField, { ...fieldProps }), name && (_jsx("input", { type: "hidden", name: name, value: state.value ? toIso(state.value) : '' })), _jsx("button", { ...buttonProps, ref: buttonRef, type: "button", "aria-labelledby": undefined, "aria-label": calendarLabel, className: "ion-date-picker__button", children: _jsx(CalendarIcon, {}) })] }), state.isOpen && !isDisabled && !isReadOnly && (_jsx(CalendarPopover, { state: state, triggerRef: groupRef, dialogProps: dialogProps, children: _jsx(SingleCalendar, { ...calendarProps }) })), helper && (_jsx("span", { ...(isInvalid && errorMessage
+                    ? errorMessageProps
+                    : descriptionProps), className: "ion-field__helper", children: helper }))] }));
+}
+DatePicker.displayName = 'DatePicker';
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../src/components/DatePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/DateRangePicker.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import type { IsoDate } from './iso-date.js';
+export type DateRangePickerSize = 'sm' | 'md' | 'lg';
+/** A closed interval of calendar dates. `end` is included in the range. */
+export interface DateRange {
+    /** `YYYY-MM-DD`. */
+    start: IsoDate;
+    /** `YYYY-MM-DD`, inclusive. */
+    end: IsoDate;
+}
+/**
+ * A shortcut in the rail beside the calendar — "Last 7 days", "Year to date".
+ */
+export interface DateRangePreset {
+    /** What the row reads. Also its accessible name. */
+    label: string;
+    /**
+     * The range it selects.
+     *
+     * A FUNCTION for anything relative to today, which is most of them. A literal
+     * object is evaluated once, when the caller's module is first imported, so
+     * "Last 7 days" built as a literal is seven days before whenever the tab was
+     * opened — correct on load and increasingly wrong for a session left open
+     * overnight. The function is re-run every time the calendar opens.
+     */
+    value: DateRange | (() => DateRange);
+}
+export interface DateRangePickerProps {
+    /** 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?: DateRangePickerSize;
+    /**
+     * The selected range, both ends as `YYYY-MM-DD`. `null` means no range.
+     * A half-open range is not representable on purpose — see `antiPatterns`.
+     */
+    value?: DateRange | null;
+    /** The initial range, for an uncontrolled picker. */
+    defaultValue?: DateRange;
+    /** Fires with both ends, or `null` when the range is cleared. */
+    onChange?: (value: DateRange | null) => void;
+    /** Earliest selectable date, `YYYY-MM-DD`. */
+    minValue?: IsoDate;
+    /** Latest selectable date, `YYYY-MM-DD`. */
+    maxValue?: IsoDate;
+    /**
+     * Individual dates the calendar refuses. Receives `YYYY-MM-DD`.
+     *
+     * A range may not be dragged ACROSS one of these — react-aria stops the
+     * selection at the first unavailable day, which is what makes "book a room
+     * for these nights" correct rather than merely styled.
+     */
+    isDateUnavailable?: (date: IsoDate) => boolean;
+    /** Shortcut rows beside the calendar. Omitted, no rail is rendered. */
+    presets?: readonly DateRangePreset[];
+    /**
+     * How many months the calendar shows at once. Two by default: a range that
+     * crosses a month boundary is the common case, and a one-month calendar
+     * makes the user page back and forth to see both ends of their own selection.
+     */
+    visibleMonths?: 1 | 2 | 3;
+    /** Show a Clear button under the calendar. Defaults to `true`. */
+    isClearable?: boolean;
+    /** Posts `<name>-start` and `<name>-end` for an uncontrolled form. */
+    name?: string;
+    /** Accessible label for the button that opens the calendar. */
+    calendarLabel?: string;
+    clearLabel?: string;
+    presetsLabel?: string;
+    className?: string;
+    wrapperClassName?: string;
+    id?: string;
+}
+/**
+ * DateRangePicker — two segmented date fields with one calendar between them.
+ *
+ * NOT TWO `DatePicker`s SIDE BY SIDE, and the difference is the whole reason
+ * this exists. Two independent pickers cannot stop the end date being before
+ * the start, cannot show the days between them as a band, and give the user two
+ * calendars to reconcile by memory. `useDateRangePicker` owns both ends: the
+ * second click completes the range in whichever order the two dates fall, the
+ * band follows the pointer while it is being dragged out, and a range cannot be
+ * made to run backwards.
+ *
+ * THE VALUE COMMITS LIVE. THERE IS NO APPLY BUTTON.
+ *
+ * `onChange` fires the moment the second end lands, and the calendar closes.
+ * The reference designs this was drawn from put Clear and Apply under the grid,
+ * which is a draft model: the popover holds a pending range and only Apply
+ * promotes it. That was considered and rejected. Escape and an outside click
+ * would then silently discard a selection the user watched themselves make —
+ * and there is no way to tell those two gestures apart from "I am done". A
+ * button labelled Apply beside a value that already applied is worse still.
+ *
+ * Clear stays, because clearing is a real action with no other affordance.
+ *
+ * BOTH ENDS OR NEITHER
+ *
+ * `value` has no half-open form. A range with a start and no end is a state the
+ * calendar passes THROUGH between the two clicks; it is never a value the
+ * caller is handed, because "everything after March" and "March to today" are
+ * different questions and a `null` end cannot say which one was meant. A caller
+ * who wants an open end passes a sentinel of their own choosing as `maxValue`.
+ */
+export declare function DateRangePicker({ label, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, size, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, presets, visibleMonths, isClearable, name, calendarLabel, clearLabel, presetsLabel, className, wrapperClassName, id, }: DateRangePickerProps): React.JSX.Element;
+export declare namespace DateRangePicker {
+    var displayName: string;
+}
+//# sourceMappingURL=DateRangePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../src/components/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAO/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAG7C,MAAM,MAAM,mBAAmB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErD,2EAA2E;AAC3E,MAAM,WAAW,SAAS;IACxB,oBAAoB;IACpB,KAAK,EAAE,OAAO,CAAC;IACf,+BAA+B;IAC/B,GAAG,EAAE,OAAO,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,KAAK,EAAE,SAAS,GAAG,CAAC,MAAM,SAAS,CAAC,CAAC;CACtC;AAcD,MAAM,WAAW,oBAAoB;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,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC;IAC/C,uEAAuE;IACvE,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1B,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sEAAsE;IACtE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAAC,EAC9B,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,OAAO,EACP,aAAiB,EACjB,WAAkB,EAClB,IAAI,EACJ,aAA+B,EAC/B,UAAoB,EACpB,YAAqC,EACrC,SAAS,EACT,gBAAgB,EAChB,EAAE,GACH,EAAE,oBAAoB,qBAuPtB;yBAhRe,eAAe"}

package/dist/components/DateRangePicker.js

@@ -0,0 +1,152 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { useDateRangePicker, useButton } from 'react-aria';
+import { useDateRangePickerState } from 'react-stately';
+import { DateField } from './DateField.js';
+import { RangeCalendar } from './Calendar.js';
+import { CalendarPopover } from './CalendarPopover.js';
+import { toCalendarDate, toIso, wrapUnavailable } from './iso-date.js';
+const CalendarIcon = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M8 2v4m8-4v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+/** Resolves a preset's `value`, which may be a literal or a function. */
+const resolvePreset = (p) => typeof p.value === 'function' ? p.value() : p.value;
+/**
+ * DateRangePicker — two segmented date fields with one calendar between them.
+ *
+ * NOT TWO `DatePicker`s SIDE BY SIDE, and the difference is the whole reason
+ * this exists. Two independent pickers cannot stop the end date being before
+ * the start, cannot show the days between them as a band, and give the user two
+ * calendars to reconcile by memory. `useDateRangePicker` owns both ends: the
+ * second click completes the range in whichever order the two dates fall, the
+ * band follows the pointer while it is being dragged out, and a range cannot be
+ * made to run backwards.
+ *
+ * THE VALUE COMMITS LIVE. THERE IS NO APPLY BUTTON.
+ *
+ * `onChange` fires the moment the second end lands, and the calendar closes.
+ * The reference designs this was drawn from put Clear and Apply under the grid,
+ * which is a draft model: the popover holds a pending range and only Apply
+ * promotes it. That was considered and rejected. Escape and an outside click
+ * would then silently discard a selection the user watched themselves make —
+ * and there is no way to tell those two gestures apart from "I am done". A
+ * button labelled Apply beside a value that already applied is worse still.
+ *
+ * Clear stays, because clearing is a real action with no other affordance.
+ *
+ * BOTH ENDS OR NEITHER
+ *
+ * `value` has no half-open form. A range with a start and no end is a state the
+ * calendar passes THROUGH between the two clicks; it is never a value the
+ * caller is handed, because "everything after March" and "March to today" are
+ * different questions and a `null` end cannot say which one was meant. A caller
+ * who wants an open end passes a sentinel of their own choosing as `maxValue`.
+ */
+export function DateRangePicker({ label, description, errorMessage, isInvalid, isDisabled, isReadOnly, isRequired, size = 'md', value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, presets, visibleMonths = 2, isClearable = true, name, calendarLabel = 'Open calendar', clearLabel = 'Clear', presetsLabel = 'Date range shortcuts', className, wrapperClassName, id, }) {
+    /*
+     * The ISO boundary. `undefined` has to stay `undefined` — react-aria reads it
+     * as "uncontrolled" where `null` means "controlled and empty", so collapsing
+     * the two makes an uncontrolled picker refuse to hold its own value.
+     */
+    const toRange = (r, prop) => r == null
+        ? null
+        : {
+            start: toCalendarDate(r.start, `${prop}.start`),
+            end: toCalendarDate(r.end, `${prop}.end`),
+        };
+    const ariaProps = {
+        label: typeof label === 'string' ? label : undefined,
+        value: value === undefined ? undefined : toRange(value, 'value'),
+        defaultValue: toRange(defaultValue, 'defaultValue') ?? undefined,
+        minValue: toCalendarDate(minValue, 'minValue') ?? undefined,
+        maxValue: toCalendarDate(maxValue, 'maxValue') ?? undefined,
+        isDateUnavailable: wrapUnavailable(isDateUnavailable),
+        isDisabled,
+        isReadOnly,
+        isRequired,
+        isInvalid,
+        /*
+         * Same reason as DatePicker: left unset, react-aria infers granularity from
+         * the value, and an empty picker infers 'minute' and grows time segments
+         * that vanish the moment a date arrives.
+         */
+        granularity: 'day',
+        onChange: onChange
+            ? (r) => onChange(r ? { start: toIso(r.start), end: toIso(r.end) } : null)
+            : undefined,
+    };
+    const state = useDateRangePickerState(ariaProps);
+    const groupRef = useRef(null);
+    const buttonRef = useRef(null);
+    const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps: triggerProps, dialogProps, calendarProps, descriptionProps, errorMessageProps, } = useDateRangePicker({ ...ariaProps, id }, state, groupRef);
+    const { buttonProps } = useButton(triggerProps, buttonRef);
+    /*
+     * Resolved once per open, not once per render.
+     *
+     * `state.isOpen` is the dependency on purpose. A relative preset is a
+     * function of today, so re-resolving it on every render would be correct and
+     * wasteful; resolving it once when the module loads would be cheap and wrong
+     * by morning. Re-resolving each time the calendar opens is the only cadence
+     * at which "Last 7 days" is both stable while the user reads it and accurate
+     * when they come back to it.
+     */
+    const resolvedPresets = useMemo(() => (presets ?? []).map((p) => ({ label: p.label, ...resolvePreset(p) })), 
+    // `state.isOpen` is in here as a CADENCE, not as a value this reads —
+    // see above. An exhaustive-deps rule would call it extraneous and be
+    // wrong: dropping it is what makes a relative preset go stale.
+    [presets, state.isOpen]);
+    const selectedIso = state.value?.start &&
+        state.value?.end && {
+        start: toIso(state.value.start),
+        end: toIso(state.value.end),
+    };
+    const helper = isInvalid && errorMessage ? errorMessage : description;
+    const rail = resolvedPresets.length ? (_jsx("div", { className: "ion-range-presets", role: "group", "aria-label": presetsLabel, children: resolvedPresets.map((p) => {
+            const isSelected = selectedIso?.start === p.start && selectedIso?.end === p.end;
+            return (_jsx("button", { type: "button", className: "ion-range-presets__item", "aria-pressed": isSelected, "data-selected": isSelected || undefined, onClick: () => {
+                    state.setValue({
+                        start: toCalendarDate(p.start, `preset "${p.label}"`),
+                        end: toCalendarDate(p.end, `preset "${p.label}"`),
+                    });
+                    /*
+                     * Closed explicitly. A complete range from the GRID closes the
+                     * calendar on its own, and a preset produces the same complete
+                     * range — leaving it open after a shortcut was pressed would make
+                     * the two paths behave differently for no reason the user could
+                     * see.
+                     */
+                    state.setOpen(false);
+                }, children: p.label }, p.label));
+        }) })) : null;
+    const footer = isClearable && state.value ? (_jsx("div", { className: "ion-range-footer", children: _jsx("button", { type: "button", className: "ion-range-footer__clear", onClick: () => {
+                state.setValue(null);
+                /*
+                 * Deliberately left OPEN. Clearing is nearly always the first half
+                 * of choosing something else; closing the calendar would make the
+                 * user reopen it to do the thing they cleared it for.
+                 */
+            }, children: clearLabel }) })) : null;
+    return (_jsxs("div", { className: [
+            'ion-field',
+            isInvalid ? 'ion-field--error' : '',
+            wrapperClassName || '',
+        ]
+            .filter(Boolean)
+            .join(' '), children: [label && (
+            // A <span>, not a <label> — the group holds two fields of spinbuttons
+            // rather than one form control, so `htmlFor` has nothing to point at.
+            _jsx("span", { ...labelProps, className: "ion-field__label", children: label })), _jsxs("div", { ...groupProps, ref: groupRef, className: [
+                    'ion-input',
+                    'ion-date-range-picker',
+                    size !== 'md' ? `ion-input--${size}` : '',
+                    isInvalid ? 'ion-input--invalid' : '',
+                    isDisabled ? 'ion-input--disabled' : '',
+                    isReadOnly ? 'ion-input--readonly' : '',
+                    className || '',
+                ]
+                    .filter(Boolean)
+                    .join(' '), "data-open": state.isOpen || undefined, "data-invalid": isInvalid || undefined, "data-disabled": isDisabled || undefined, children: [_jsx(DateField, { ...startFieldProps }), _jsx("span", { className: "ion-date-range-picker__dash", "aria-hidden": "true", children: "\u2013" }), _jsx(DateField, { ...endFieldProps }), name && (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: `${name}-start`, value: state.value?.start ? toIso(state.value.start) : '' }), _jsx("input", { type: "hidden", name: `${name}-end`, value: state.value?.end ? toIso(state.value.end) : '' })] })), _jsx("button", { ...buttonProps, ref: buttonRef, type: "button", "aria-labelledby": undefined, "aria-label": calendarLabel, className: "ion-date-range-picker__button", children: _jsx(CalendarIcon, {}) })] }), state.isOpen && !isDisabled && !isReadOnly && (_jsx(CalendarPopover, { state: state, triggerRef: groupRef, dialogProps: dialogProps, className: "ion-calendar-popover--range", children: _jsx(RangeCalendar, { ...calendarProps, visibleMonths: visibleMonths, aside: rail, footer: footer }) })), helper && (_jsx("span", { ...(isInvalid && errorMessage
+                    ? errorMessageProps
+                    : descriptionProps), className: "ion-field__helper", children: helper }))] }));
+}
+DateRangePicker.displayName = 'DateRangePicker';
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/components/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../src/components/DateRangePicker.tsx"],"names":[],"mappings":"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"}

package/dist/components/Header.d.ts

@@ -15,6 +15,16 @@ export interface HeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
     onOpenChange?: (open: boolean) => void;
     /** Accessible name for the mobile menu toggle. */
     menuLabel?: string;
+    /**
+     * What the mobile toggle opens.
+     *
+     * `panel` (default) is Figma's Mobile-Open: `center` and `end` drop below the
+     * bar. `dialog` is for an app whose navigation lives in a Sidebar: the toggle
+     * sits at the start of the bar and only reports `onOpenChange`, the caller
+     * opens a Drawer with it, and `center` and `end` stay in the bar at every
+     * width — so keep `center` empty and `end` short.
+     */
+    menuType?: 'panel' | 'dialog';
     children?: React.ReactNode;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA2BxE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;iEAC6D;IAC7D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kFAAkF;IAClF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,iFAwElB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AA2BxE,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EACjC,UAAU,CACX;IACC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;iEAC6D;IAC7D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,kFAAkF;IAClF,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mDAAmD;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,eAAO,MAAM,MAAM,iFAgGlB,CAAC"}

package/dist/components/Header.js

@@ -42,7 +42,7 @@ const CloseGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "ari
  * A `<header>` element with no explicit role: it is a landmark already when it
  * is a direct child of body, which is where a page header sits.
  */
-export const Header = forwardRef(({ brand, center, end, open: openProp, defaultOpen = false, onOpenChange, menuLabel = 'Menu', className, children, ...rest }, ref) => {
+export const Header = forwardRef(({ brand, center, end, open: openProp, defaultOpen = false, onOpenChange, menuLabel = 'Menu', menuType = 'panel', className, children, ...rest }, ref) => {
     const menuId = useId();
     const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
     const isControlled = openProp !== undefined;
@@ -59,12 +59,27 @@ export const Header = forwardRef(({ brand, center, end, open: openProp, defaultO
      * and it is handled on the header rather than the document so a header that
      * is never open never listens.
      */
+    const isDialog = menuType === 'dialog';
     const handleKeyDown = (event) => {
-        if (event.key === 'Escape' && isOpen)
+        // A dialog owns its own Escape; the header only closes its own panel.
+        if (event.key === 'Escape' && isOpen && !isDialog)
             toggle();
         rest.onKeyDown?.(event);
     };
-    return (_jsxs("header", { ...rest, onKeyDown: handleKeyDown, ref: ref, "data-open": isOpen || undefined, className: ['ion-header', className].filter(Boolean).join(' '), children: [brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsxs("div", { className: "ion-header__menu", id: menuId, children: [_jsx("div", { className: "ion-header__center", children: center }), _jsx("div", { className: "ion-header__end", children: end })] }), children, _jsx("button", { type: "button", className: "ion-header__toggle", "aria-expanded": isOpen, "aria-controls": menuId, "aria-label": menuLabel, onClick: toggle, children: isOpen ? _jsx(CloseGlyph, {}) : _jsx(MenuGlyph, {}) })] }));
+    /*
+     * As a panel the toggle discloses the menu wrapper, which is always in the
+     * DOM, so aria-controls can point at it. As a dialog it opens something the
+     * caller mounts only while open — an aria-controls pointing at a missing id
+     * is an error — so it says what it opens with aria-haspopup instead.
+     */
+    const toggleButton = (_jsx("button", { type: "button", className: "ion-header__toggle", "aria-expanded": isOpen, "aria-controls": isDialog ? undefined : menuId, "aria-haspopup": isDialog ? 'dialog' : undefined, "aria-label": menuLabel, onClick: toggle, children: isOpen && !isDialog ? _jsx(CloseGlyph, {}) : _jsx(MenuGlyph, {}) }));
+    return (_jsxs("header", { ...rest, onKeyDown: handleKeyDown, ref: ref, "data-open": (isOpen && !isDialog) || undefined, className: [
+            'ion-header',
+            isDialog ? 'ion-header--dialog-menu' : '',
+            className,
+        ]
+            .filter(Boolean)
+            .join(' '), children: [isDialog && toggleButton, brand && _jsx("div", { className: "ion-header__brand", children: brand }), _jsxs("div", { className: "ion-header__menu", id: menuId, children: [_jsx("div", { className: "ion-header__center", children: center }), _jsx("div", { className: "ion-header__end", children: end })] }), children, !isDialog && toggleButton] }));
 });
 Header.displayName = 'Header';
 //# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"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"}

package/dist/components/NumberInput.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { AriaNumberFieldProps } from 'react-aria';
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+type NumberInputDOMProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, keyof AriaNumberFieldProps | 'size' | 'type' | 'min' | 'max' | 'step' | 'disabled' | 'value' | 'defaultValue' | 'onChange'>;
+export interface NumberInputProps extends Omit<AriaNumberFieldProps, 'value' | 'defaultValue' | 'onChange'>, NumberInputDOMProps {
+    /**
+     * Controlled value. `null` is empty — never `NaN`, which is what the
+     * underlying hook uses and which fails every `===` check a caller writes.
+     */
+    value?: number | null;
+    /** Uncontrolled starting value. `null` for empty. */
+    defaultValue?: number | null;
+    /**
+     * Fires when the value is committed — on blur, Enter, a step button or an
+     * arrow key — not on every keystroke. `null` when the field was cleared.
+     */
+    onChange?: (value: number | null) => void;
+    /** Matches Input's `size`: Small, Medium, Large. */
+    size?: NumberInputSize;
+    /**
+     * The − and + buttons. On by default; turn off for a dense table cell where
+     * the arrow keys are enough.
+     */
+    showStepper?: boolean;
+    /** Class names for the control box (`.ion-input`). */
+    className?: string;
+    /** Class names for the `.ion-field` wrapper when a label or helper is shown. */
+    wrapperClassName?: string;
+}
+/**
+ * NumberInput — a quantity, with formatting, bounds and steps.
+ *
+ * NOT `<input type="number">`, and the list of reasons is the component:
+ *
+ *   It scrolls. A focused `type="number"` changes value under the mouse wheel,
+ *   so a user scrolling the page past a price field edits the price. The wheel
+ *   is OFF here by default (`isWheelDisabled`), and a caller has to ask for it.
+ *
+ *   It cannot format. "1,234.50", "€12", "15%" are text to the browser's number
+ *   input, which rejects them. `formatOptions` takes `Intl.NumberFormatOptions`,
+ *   so currency, percent and units display and parse in the user's locale —
+ *   including "1.234,50" for a German user.
+ *
+ *   It is not a number to the browser's validation either. `type="text"` with
+ *   the right `inputMode` gets the numeric keyboard on a phone without
+ *   Firefox letting letters in and Chrome silently reporting an empty value.
+ *
+ * EMPTY IS `null`, NOT `NaN`. React Aria reports an empty field as `NaN`, and
+ * `NaN === NaN` is false — so every "is it empty" check a caller writes is
+ * wrong. This converts at the boundary, both ways.
+ *
+ * − AND + SIT SIDE BY SIDE, NOT STACKED. Stacked chevrons split the field's
+ * height in two, which puts a Small field's targets at 16px — under the 24px
+ * WCAG 2.5.8 asks. Side by side, every size clears it. They are out of the tab
+ * order, as React Aria sets them: the arrow keys do the same job from the field,
+ * and two extra tab stops per number on a form is a tax on every keyboard user.
+ *
+ * The box is Input's, class for class, so every state — hover, focus, invalid,
+ * read-only, disabled — is Input's and cannot drift from it.
+ */
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};
+//# sourceMappingURL=NumberInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EAAmB,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAIxE,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,KAAK,mBAAmB,GAAG,IAAI,CAC7B,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EACzC,MAAM,oBAAoB,GAC1B,MAAM,GACN,MAAM,GACN,KAAK,GACL,KAAK,GACL,MAAM,GACN,UAAU,GACV,OAAO,GACP,cAAc,GACd,UAAU,CACb,CAAC;AAEF,MAAM,WAAW,gBACf,SACE,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC,EACjE,mBAAmB;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC1C,oDAAoD;IACpD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gFAAgF;IAChF,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAoDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,WAAW,2FA4HvB,CAAC"}