ionbase-ui 0.51.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/Drawer.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { AriaModalOverlayProps } from 'react-aria';
+export type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg';
+export interface DrawerProps extends AriaModalOverlayProps {
+    /** Whether the drawer is shown. */
+    isOpen?: boolean;
+    /** Called with the next open state — `false` when the drawer asks to close. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Which edge it enters from. `start` and `end` follow writing direction, so
+     * a right-hand drawer in English is a left-hand one in Arabic without a
+     * second variant.
+     */
+    placement?: DrawerPlacement;
+    size?: DrawerSize;
+    /** Required: the dialog's accessible name, wired via `aria-labelledby`. */
+    title: React.ReactNode;
+    /** Supporting copy under the title. */
+    description?: React.ReactNode;
+    /** Action row, pinned to the bottom edge. */
+    footer?: React.ReactNode;
+    showClose?: boolean;
+    closeLabel?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Drawer — a modal panel anchored to an edge.
+ *
+ * WHY IT IS A MODAL AND NOT A SIDEBAR
+ *
+ * It takes focus, traps it, closes on Escape and on an outside click, and marks
+ * the rest of the page inert — all of `Modal`'s behaviour, differing only in
+ * where the panel sits and how it enters. A persistent side panel that does not
+ * do those things is layout, not a drawer, and belongs in the page rather than
+ * in an overlay.
+ *
+ * WHEN TO REACH FOR MODAL INSTEAD
+ *
+ * A drawer suits work that is long or list-shaped — filters, a record's detail,
+ * a sequence of settings — because an edge panel can be tall without becoming a
+ * square that fights the viewport. A decision, especially a destructive one,
+ * belongs in a Modal: it is centred, it is smaller, and it does not invite
+ * scrolling past the thing being confirmed.
+ *
+ * RENDERS NOTHING WHEN CLOSED, and portals when open, for the reasons recorded
+ * on Modal: a closed overlay left in the tree is still keyboard-focusable, and
+ * an inline one inherits whatever `overflow` and stacking context surrounds it.
+ */
+export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/components/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AASvE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,qBAAqB;IACxD,mCAAmC;IACnC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+EAA+E;IAC/E,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,uCAAuC;IACvC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkGD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,MAAM,oFAUjB,CAAC"}

package/dist/components/Drawer.js

@@ -0,0 +1,66 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle } from 'react';
+import { Overlay, useModalOverlay, useDialog, useButton, mergeProps, } from 'react-aria';
+import { useOverlayTriggerState } from 'react-stately';
+const CloseGlyph = () => (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+/**
+ * The panel. Mounted only while open, which is what makes the hooks work.
+ *
+ * `useDialog` resolves the title id and moves focus in effects keyed on the
+ * panel ref — effects that run when the component CALLING them mounts. Called
+ * beside `useOverlayTriggerState` in `Drawer` below, that moment would be when
+ * the trigger mounts, with this panel not yet in the DOM: no `aria-labelledby`,
+ * and focus never entering the drawer, so Escape never reaches the key handler.
+ * Silent in every case. AGENTS.md records the same split for Modal and Popover.
+ */
+function DrawerDialog(props, forwardedRef) {
+    const { state, placement = 'end', size = 'md', title, description, footer, showClose = true, closeLabel = 'Close drawer', children, className, } = props;
+    const panelRef = useRef(null);
+    useImperativeHandle(forwardedRef, () => panelRef.current);
+    const { modalProps, underlayProps } = useModalOverlay(props, state, panelRef);
+    const { dialogProps, titleProps } = useDialog({ role: 'dialog' }, panelRef);
+    const closeRef = useRef(null);
+    const { buttonProps } = useButton({ onPress: () => state.close(), 'aria-label': closeLabel }, closeRef);
+    const panelClassNames = [
+        'ion-drawer',
+        `ion-drawer--${placement}`,
+        `ion-drawer--${size}`,
+        className || '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsx("div", { ...underlayProps, className: "ion-drawer__scrim", children: _jsxs("div", { ...mergeProps(modalProps, dialogProps), ref: panelRef, className: panelClassNames, children: [_jsxs("div", { className: "ion-drawer__header", children: [_jsxs("div", { className: "ion-drawer__heading", children: [_jsx("h2", { ...titleProps, className: "ion-drawer__title", children: title }), description && (_jsx("p", { className: "ion-drawer__description", children: description }))] }), showClose && (_jsx("button", { ...buttonProps, ref: closeRef, type: "button", className: "ion-drawer__close", children: _jsx(CloseGlyph, {}) }))] }), children && _jsx("div", { className: "ion-drawer__body", children: children }), footer && _jsx("div", { className: "ion-drawer__footer", children: footer })] }) }));
+}
+const DrawerDialogWithRef = forwardRef(DrawerDialog);
+/**
+ * Drawer — a modal panel anchored to an edge.
+ *
+ * WHY IT IS A MODAL AND NOT A SIDEBAR
+ *
+ * It takes focus, traps it, closes on Escape and on an outside click, and marks
+ * the rest of the page inert — all of `Modal`'s behaviour, differing only in
+ * where the panel sits and how it enters. A persistent side panel that does not
+ * do those things is layout, not a drawer, and belongs in the page rather than
+ * in an overlay.
+ *
+ * WHEN TO REACH FOR MODAL INSTEAD
+ *
+ * A drawer suits work that is long or list-shaped — filters, a record's detail,
+ * a sequence of settings — because an edge panel can be tall without becoming a
+ * square that fights the viewport. A decision, especially a destructive one,
+ * belongs in a Modal: it is centred, it is smaller, and it does not invite
+ * scrolling past the thing being confirmed.
+ *
+ * RENDERS NOTHING WHEN CLOSED, and portals when open, for the reasons recorded
+ * on Modal: a closed overlay left in the tree is still keyboard-focusable, and
+ * an inline one inherits whatever `overflow` and stacking context surrounds it.
+ */
+export const Drawer = forwardRef((props, ref) => {
+    const state = useOverlayTriggerState(props);
+    if (!state.isOpen)
+        return null;
+    return (_jsx(Overlay, { children: _jsx(DrawerDialogWithRef, { ...props, state: state, ref: ref }) }));
+});
+Drawer.displayName = 'Drawer';
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer.js.map

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

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+export type FileUploadSize = 'sm' | 'md';
+/** A file the control refused, and the reason, so the caller can say so. */
+export interface RejectedFile {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+    message: string;
+}
+export interface FileUploadProps {
+    /** Field label. Also the accessible name of the file input. */
+    label?: React.ReactNode;
+    /** Helper text below the control. */
+    description?: React.ReactNode;
+    /** Replaces the helper text when `isInvalid` is set. */
+    errorMessage?: React.ReactNode;
+    isInvalid?: boolean;
+    isDisabled?: boolean;
+    /** Matches the Figma `Size` variant when drawn. Height of the drop target. */
+    size?: FileUploadSize;
+    /** Native `accept` — a comma-separated list of extensions or MIME types. */
+    accept?: string;
+    /** Allow more than one file. */
+    multiple?: boolean;
+    /** Reject anything larger, in bytes. */
+    maxSize?: number;
+    /** Reject once this many files are held. Only meaningful with `multiple`. */
+    maxFiles?: number;
+    /**
+     * The files held. Pass it to control the list; omit and the component keeps
+     * its own. A controlled list is the usual case, because the caller is the
+     * only thing that knows which uploads have since succeeded or failed.
+     */
+    files?: readonly File[];
+    /** Fires with the full list after every add or remove, never with a delta. */
+    onChange?: (files: File[]) => void;
+    /** Fires with anything refused by `accept`, `maxSize` or `maxFiles`. */
+    onReject?: (rejected: RejectedFile[]) => void;
+    /** Call-to-action inside the drop target. */
+    prompt?: React.ReactNode;
+    /** Second line inside the drop target — the constraints, in words. */
+    hint?: React.ReactNode;
+    /** Accessible label for each file's remove button. Receives the file name. */
+    removeLabel?: (name: string) => string;
+    className?: string;
+    wrapperClassName?: string;
+    id?: string;
+    name?: string;
+}
+/**
+ * FileUpload — a drop target wrapped around a real `<input type="file">`.
+ *
+ * Drawn in Figma as `File Upload` (1367:2333) — two sizes by five states. The
+ * measurements came from `Input` and `EmptyState` rather than being invented:
+ * the border, radius and disabled treatment are Input's; the centred
+ * icon-over-text stack is EmptyState's. Figma draws the drop zone alone, the
+ * same split `Input` makes against `Form Field`.
+ *
+ * THE INPUT IS THE CONTROL. THE DROP ZONE IS DECORATION.
+ *
+ * The usual build of this component is a `<div>` with drag handlers and a
+ * click that calls `input.click()`. That version cannot be reached by keyboard,
+ * has no accessible name, does not participate in a form, and does not work in
+ * any environment without a pointer — which includes switch access, voice
+ * control and most screen-reader browse modes.
+ *
+ * Here the file input is a real, focusable, labelled control that is visually
+ * hidden but NOT `display: none` — it keeps its place in the tab order and its
+ * label. Drag-and-drop is layered on top as an enhancement, and every path it
+ * offers is also reachable without it. That ordering is the whole component.
+ *
+ * VALIDATION IS ADVISORY, NOT SECURITY. `accept` and `maxSize` are checked here
+ * so the user finds out immediately instead of after an upload. A server that
+ * trusts either one is trusting a value the client chose.
+ */
+export declare function FileUpload({ label, description, errorMessage, isInvalid, isDisabled: isDisabledProp, size, accept, multiple, maxSize, maxFiles, files: controlledFiles, onChange, onReject, prompt, hint, removeLabel, className, wrapperClassName, id: providedId, name: inputName, }: FileUploadProps): React.JSX.Element;
+export declare namespace FileUpload {
+    var displayName: string;
+}
+//# sourceMappingURL=FileUpload.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../src/components/FileUpload.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAEpE,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,4EAA4E;AAC5E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qCAAqC;IACrC,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,8EAA8E;IAC9E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAC9C,6CAA6C;IAC7C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAmED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EAAE,cAAc,EAC1B,IAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,WAAwC,EACxC,SAAS,EACT,gBAAgB,EAChB,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,SAAS,GAChB,EAAE,eAAe,qBAuPjB;yBA5Qe,UAAU"}