atlas-react-kit 1.0.0 → 1.2.0

package/dist/date-picker.d.ts

@@ -26,10 +26,20 @@ export type DatePickerSingleProps = DatePickerSharedProps & {
     mode?: "single";
     /** Controlled day, as a `Date` or `yyyy-MM-dd`. Omitted is empty. */
     value?: DateLike;
-    /** Called with the picked day, or `undefined` on Clear. */
+    /**
+     * Called with the picked day. With `clearable`, Clear calls it with
+     * `undefined`; without, a second click on the selected day does.
+     */
     onValueChange?: (date: Date | undefined) => void;
     /** @deprecated Use `onValueChange`; `onChange` keeps working until 2.0. */
     onChange?: (date: Date | undefined) => void;
+    /**
+     * Shows a Clear row under the calendar, which emits `undefined` and
+     * closes the popover. A click on the selected day then keeps it instead
+     * of clearing it, so Clear is the one way to empty the field. Default
+     * `false`.
+     */
+    clearable?: boolean;
 };
 export type DatePickerRangeProps = DatePickerSharedProps & {
     /** Pick a from/to range of days. */
@@ -46,7 +56,8 @@ export type DatePickerButtonProps = DatePickerSingleProps | DatePickerRangeProps
  * Calendar popover trigger styled as a form control (same chrome as Input
  * and SelectTrigger). `mode="single"` (default) accepts `Date` or
  * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
- * `{ from, to }` and emits `DateRange | undefined`. Range mode shows one
+ * `{ from, to }` and emits `DateRange | undefined`. Range mode always has a
+ * Clear row; single mode shows one with `clearable`. Range mode shows one
  * month below `md` and two at `md+` unless `numberOfMonths` is set. The
  * popover clamps to the viewport (`side` is overridable). `className` styles
  * the trigger, `contentClassName` the popover, and `calendarProps` reaches

package/dist/date-picker.js

@@ -1,11 +1,10 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { format, isSameDay } from "date-fns";
 import { toDate, } from "./internal/date-like.js";
 import { MD_MEDIA_QUERY, useMediaQuery } from "./internal/use-media-query.js";
-import { LazyCalendar } from "./lazy-calendar.js";
-import { PickerClearFooter, PickerShell, limitCalendarProps, } from "./picker-shell.js";
+import { PickerShell, } from "./picker-shell.js";
 export { toDate };
 /** Format a Date as a timezone-safe calendar date (`yyyy-MM-dd`). */
 export function formatLocalDate(date) {
@@ -22,16 +21,27 @@ function formatRangeTriggerLabel(from, to, placeholder) {
         return format(from, "PPP");
     return `${format(from, "PPP")} – ${format(to, "PPP")}`;
 }
-function DatePickerSingleButton({ value, onValueChange, onChange, placeholder = "Pick a date", numberOfMonths, defaultMonth, calendarProps, minDate, maxDate, ...shell }) {
+function DatePickerSingleButton({ value, onValueChange, onChange, placeholder = "Pick a date", numberOfMonths, defaultMonth, clearable = false, ...shell }) {
     const [open, setOpen] = React.useState(false);
     const emit = onValueChange ?? onChange;
     const date = toDate(value);
-    return (_jsx(PickerShell, { ...shell, empty: !date, label: date ? format(date, "PPP") : placeholder, dialogLabel: "Choose date", open: open, onOpenChange: setOpen, children: _jsx(LazyCalendar, { ...limitCalendarProps(calendarProps, minDate, maxDate), mode: "single", autoFocus: true, selected: date, defaultMonth: defaultMonth ?? date, numberOfMonths: numberOfMonths, onSelect: (next) => {
-                emit?.(next);
-                setOpen(false);
-            } }) }));
+    const onSelect = (next) => {
+        emit?.(next);
+        setOpen(false);
+    };
+    return (_jsx(PickerShell, { ...shell, empty: !date, label: date ? format(date, "PPP") : placeholder, dialogLabel: "Choose date", open: open, onOpenChange: setOpen, defaultMonth: defaultMonth ?? date, calendar: clearable
+            ? // Day Picker's `required` keeps the day on a second click, so
+                // Clear is the one way out; its type needs the literal `true`.
+                {
+                    mode: "single",
+                    required: true,
+                    selected: date,
+                    numberOfMonths,
+                    onSelect,
+                }
+            : { mode: "single", selected: date, numberOfMonths, onSelect }, onClear: clearable ? () => emit?.(undefined) : undefined, clearDisabled: !date }));
 }
-function DatePickerRangeButton({ value, onValueChange, onChange, placeholder = "Pick a date range", numberOfMonths, defaultMonth, calendarProps, minDate, maxDate, ...shell }) {
+function DatePickerRangeButton({ value, onValueChange, onChange, placeholder = "Pick a date range", numberOfMonths, defaultMonth, ...shell }) {
     const [open, setOpen] = React.useState(false);
     const emit = onValueChange ?? onChange;
     const mdUp = useMediaQuery(MD_MEDIA_QUERY);
@@ -39,25 +49,28 @@ function DatePickerRangeButton({ value, onValueChange, onChange, placeholder = "
     const from = toDate(value?.from);
     const to = toDate(value?.to);
     const selected = from || to ? { from, to } : undefined;
-    return (_jsxs(PickerShell, { ...shell, empty: !from, label: formatRangeTriggerLabel(from, to, placeholder), dialogLabel: "Choose dates", open: open, onOpenChange: setOpen, children: [_jsx(LazyCalendar, { ...limitCalendarProps(calendarProps, minDate, maxDate), mode: "range", 
-                // A click on a complete range (or on none) starts a new one, so a
-                // fresh range never needs Clear first. The start emits `to: undefined`.
-                resetOnSelect: true, autoFocus: true, selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: months, onSelect: (range) => {
-                    emit?.(range);
-                    // Close once the ends differ; a start or a one-day range stays open.
-                    if (range?.from && range.to && !isSameDay(range.from, range.to)) {
-                        setOpen(false);
-                    }
-                } }), _jsx(PickerClearFooter, { disabled: !from && !to, onClear: () => {
-                    emit?.(undefined);
+    return (_jsx(PickerShell, { ...shell, empty: !from, label: formatRangeTriggerLabel(from, to, placeholder), dialogLabel: "Choose dates", open: open, onOpenChange: setOpen, defaultMonth: defaultMonth ?? from ?? to, calendar: {
+            mode: "range",
+            // A click on a complete range (or on none) starts a new one, so a
+            // fresh range never needs Clear first. The start emits `to: undefined`.
+            resetOnSelect: true,
+            selected,
+            numberOfMonths: months,
+            onSelect: (range) => {
+                emit?.(range);
+                // Close once the ends differ; a start or a one-day range stays open.
+                if (range?.from && range.to && !isSameDay(range.from, range.to)) {
                     setOpen(false);
-                } })] }));
+                }
+            },
+        }, onClear: () => emit?.(undefined), clearDisabled: !from && !to }));
 }
 /**
  * Calendar popover trigger styled as a form control (same chrome as Input
  * and SelectTrigger). `mode="single"` (default) accepts `Date` or
  * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
- * `{ from, to }` and emits `DateRange | undefined`. Range mode shows one
+ * `{ from, to }` and emits `DateRange | undefined`. Range mode always has a
+ * Clear row; single mode shows one with `clearable`. Range mode shows one
  * month below `md` and two at `md+` unless `numberOfMonths` is set. The
  * popover clamps to the viewport (`side` is overridable). `className` styles
  * the trigger, `contentClassName` the popover, and `calendarProps` reaches

package/dist/date-time-picker.d.ts

@@ -28,4 +28,4 @@ export declare function resolveTimeStep(step: number | undefined): number;
  * stays on-screen at a 390px width. `className` styles the trigger,
  * `contentClassName` the popover, and `calendarProps` reaches Day Picker.
  */
-export declare function DateTimePickerButton({ value, onValueChange, onChange, timeStep, placeholder, defaultMonth, calendarProps, minDate, maxDate, ...shell }: DateTimePickerButtonProps): React.JSX.Element;
+export declare function DateTimePickerButton({ value, onValueChange, onChange, timeStep, placeholder, defaultMonth, ...shell }: DateTimePickerButtonProps): React.JSX.Element;

package/dist/date-time-picker.js

@@ -2,8 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format } from "date-fns";
-import { LazyCalendar } from "./lazy-calendar.js";
-import { PickerClearFooter, PickerShell, limitCalendarProps, } from "./picker-shell.js";
+import { PickerShell } from "./picker-shell.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
 /** Default clock increment, in minutes. Must divide 60. */
 export const DEFAULT_TIME_STEP = 15;
@@ -48,18 +47,6 @@ function minuteOptions(step, current) {
     return minutes;
 }
 const HOUR_OPTIONS = Array.from({ length: 24 }, (_, hour) => padTimePart(hour));
-/**
- * Keep the date-time popover open when a portaled Select option is clicked.
- * Select content renders outside the popover, so Radix would otherwise treat
- * that pointer down as an outside dismiss.
- */
-function preventDismissForPortaledSelect(event) {
-    const target = event.target;
-    if (target instanceof Element &&
-        target.closest("[data-slot=select-content]")) {
-        event.preventDefault();
-    }
-}
 /**
  * Calendar plus hour/minute popover trigger styled as a form control (same
  * chrome as Input, SelectTrigger, and DatePickerButton). `value` is a `Date`
@@ -68,33 +55,32 @@ function preventDismissForPortaledSelect(event) {
  * stays on-screen at a 390px width. `className` styles the trigger,
  * `contentClassName` the popover, and `calendarProps` reaches Day Picker.
  */
-export function DateTimePickerButton({ value, onValueChange, onChange, timeStep, placeholder = "Pick a date and time", defaultMonth, calendarProps, minDate, maxDate, ...shell }) {
+export function DateTimePickerButton({ value, onValueChange, onChange, timeStep, placeholder = "Pick a date and time", defaultMonth, ...shell }) {
     const [open, setOpen] = React.useState(false);
     const emit = onValueChange ?? onChange;
     const date = value ?? null;
     const step = resolveTimeStep(timeStep);
     const empty = date == null;
-    const hourId = React.useId();
-    const minuteId = React.useId();
-    return (_jsxs(PickerShell, { ...shell, empty: empty, label: date ? format(date, "PPP p") : placeholder, dialogLabel: "Choose date and time", open: open, onOpenChange: setOpen, onInteractOutside: preventDismissForPortaledSelect, children: [_jsx(LazyCalendar, { ...limitCalendarProps(calendarProps, minDate, maxDate), mode: "single", autoFocus: true, selected: date ?? undefined, defaultMonth: defaultMonth ?? date ?? undefined, onSelect: (next) => {
-                    // Re-clicking a selected day would clear it; require Clear instead
-                    // so a time already set is not dropped by an accidental second tap.
-                    if (!next)
-                        return;
-                    emit?.(combineDateAndTime(next, date?.getHours() ?? 0, date?.getMinutes() ?? 0));
-                } }), _jsxs("div", { role: "group", "aria-label": "Time", "data-slot": "date-time-picker-time", className: "flex min-w-0 flex-col gap-2 border-t p-3", children: [_jsx("p", { className: "text-xs font-semibold tracking-wide uppercase", children: "Time" }), _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs(Select, { value: date ? padTimePart(date.getHours()) : undefined, onValueChange: (nextHour) => {
-                                    if (!date)
-                                        return;
-                                    emit?.(combineDateAndTime(date, Number(nextHour), date.getMinutes()));
-                                }, disabled: empty, children: [_jsx(SelectTrigger, { id: hourId, "aria-label": "Hour", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: HOUR_OPTIONS.map((hour) => (_jsx(SelectItem, { value: hour, children: hour }, hour))) })] }), _jsx("span", { className: "text-muted-foreground", "aria-hidden": "true", children: ":" }), _jsxs(Select, { value: date ? padTimePart(date.getMinutes()) : undefined, onValueChange: (nextMinute) => {
-                                    if (!date)
-                                        return;
-                                    emit?.(combineDateAndTime(date, date.getHours(), Number(nextMinute)));
-                                }, disabled: empty, children: [_jsx(SelectTrigger, { id: minuteId, "aria-label": "Minute", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: minuteOptions(step, date?.getMinutes()).map((minute) => {
-                                            const value = padTimePart(minute);
-                                            return (_jsx(SelectItem, { value: value, children: value }, value));
-                                        }) })] })] })] }), _jsx(PickerClearFooter, { disabled: empty, onClear: () => {
-                    emit?.(null);
-                    setOpen(false);
-                } })] }));
+    return (_jsx(PickerShell, { ...shell, empty: empty, label: date ? format(date, "PPP p") : placeholder, dialogLabel: "Choose date and time", open: open, onOpenChange: setOpen, defaultMonth: defaultMonth ?? date ?? undefined, calendar: {
+            mode: "single",
+            selected: date ?? undefined,
+            onSelect: (next) => {
+                // Re-clicking a selected day would clear it; require Clear instead
+                // so a time already set is not dropped by an accidental second tap.
+                if (!next)
+                    return;
+                emit?.(combineDateAndTime(next, date?.getHours() ?? 0, date?.getMinutes() ?? 0));
+            },
+        }, onClear: () => emit?.(null), clearDisabled: empty, children: _jsxs("div", { role: "group", "aria-label": "Time", "data-slot": "date-time-picker-time", className: "flex min-w-0 flex-col gap-2 border-t p-3", children: [_jsx("p", { className: "text-xs font-semibold tracking-wide uppercase", children: "Time" }), _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs(Select, { value: date ? padTimePart(date.getHours()) : undefined, onValueChange: (nextHour) => {
+                                if (!date)
+                                    return;
+                                emit?.(combineDateAndTime(date, Number(nextHour), date.getMinutes()));
+                            }, disabled: empty, children: [_jsx(SelectTrigger, { "aria-label": "Hour", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: HOUR_OPTIONS.map((hour) => (_jsx(SelectItem, { value: hour, children: hour }, hour))) })] }), _jsx("span", { className: "text-muted-foreground", "aria-hidden": "true", children: ":" }), _jsxs(Select, { value: date ? padTimePart(date.getMinutes()) : undefined, onValueChange: (nextMinute) => {
+                                if (!date)
+                                    return;
+                                emit?.(combineDateAndTime(date, date.getHours(), Number(nextMinute)));
+                            }, disabled: empty, children: [_jsx(SelectTrigger, { "aria-label": "Minute", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: minuteOptions(step, date?.getMinutes()).map((minute) => {
+                                        const value = padTimePart(minute);
+                                        return (_jsx(SelectItem, { value: value, children: value }, value));
+                                    }) })] })] })] }) }));
 }

package/dist/dropdown-menu.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import { menuLabel, optionIcon, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
-import { dataDisabledState, optionState } from "./internal/styles.js";
+import { menuLabel, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { dataDisabledState, inlineIcon, optionState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /** Menu row: the shared option row with menu padding and the inset slot. */
-const menuItemClassName = cn(optionRow, optionState.focus, dataDisabledState, optionIcon, "pr-3 data-inset:pl-9");
+const menuItemClassName = cn(optionRow, optionState.focus, dataDisabledState, inlineIcon.default, "pr-3 data-inset:pl-9");
 const menuContentClassName = cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "z-50 overflow-x-hidden overflow-y-auto p-1");
 /** Action menu for commands (row actions, overflow menus). Use `Select` to pick a value. */
 function DropdownMenu({ ...props }) {

package/dist/form/date-picker-field.d.ts

@@ -7,7 +7,12 @@ type Props = PickerFieldBaseProps & {
     onValueChange: (date: Date | undefined) => void;
     /** Trigger text while no day is picked. Default "Pick a date". */
     placeholder?: string;
+    /**
+     * Shows a Clear row in the popover, which calls `onValueChange` with
+     * `undefined`. Default `false`.
+     */
+    clearable?: boolean;
 };
 /** Date picker with built-in field error text and invalid styling. */
-export declare function FormDatePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
+export declare function FormDatePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
 export {};

package/dist/form/date-picker-field.js

@@ -4,8 +4,9 @@ import { useId } from "react";
 import { DatePickerButton } from "../date-picker.js";
 import { FormFieldShell, metaErrorText, pickerFieldAria, } from "./field-shell.js";
 /** Date picker with built-in field error text and invalid styling. */
-export function FormDatePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
+export function FormDatePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta, { submitted, showError });
-    const id = useId();
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
     return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsx(DatePickerButton, { ...picker, id: id, onValueChange: onValueChange, ...pickerFieldAria(id, errorText, required) }) }));
 }

package/dist/form/date-time-picker-field.d.ts

@@ -10,5 +10,5 @@ type Props = PickerFieldBaseProps & {
     timeStep?: number;
 };
 /** Date-time picker with built-in field error text and invalid styling. */
-export declare function FormDateTimePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
+export declare function FormDateTimePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
 export {};

package/dist/form/date-time-picker-field.js

@@ -4,8 +4,9 @@ import { useId } from "react";
 import { DateTimePickerButton } from "../date-time-picker.js";
 import { FormFieldShell, metaErrorText, pickerFieldAria, } from "./field-shell.js";
 /** Date-time picker with built-in field error text and invalid styling. */
-export function FormDateTimePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
+export function FormDateTimePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta, { submitted, showError });
-    const id = useId();
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
     return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsx(DateTimePickerButton, { ...picker, id: id, onValueChange: onValueChange, ...pickerFieldAria(id, errorText, required) }) }));
 }

package/dist/form/field-error.d.ts

@@ -16,9 +16,10 @@ export type FieldMetaState = {
 /** When a field shows its error: the `form/*` fields' shared timing props. */
 export type ErrorTimingProps = {
     /**
-     * Set once the form has been submitted (TanStack Form:
-     * `form.state.submissionAttempts > 0`), so an untouched field shows its
-     * error too. Only matters when `meta.isTouched` is passed.
+     * Set once the form has been submitted, so an untouched field shows its
+     * error too. For form libraries that do not mark fields touched on
+     * submit; TanStack Form does, so its users pass `meta` only. Only matters
+     * when `meta.isTouched` is passed.
      */
     submitted?: boolean;
     /** When false, never shows error text or invalid styling. Default true. */

package/dist/form/field-shell.d.ts

@@ -20,11 +20,6 @@ export declare function labelIdFor(id: string): string;
 export declare function descriptionIdFor(id: string): string;
 /** Id of the error text `FormFieldShell` renders for control `id`. */
 export declare function errorIdFor(id: string): string;
-/**
- * Id of the hidden "Required" text `FormFieldShell` renders for a required
- * control `id`, for controls that cannot carry `required` themselves.
- */
-export declare function requiredIdFor(id: string): string;
 /**
  * `aria-describedby` for the control: the given hint ids, plus the error
  * text while there is one, or `undefined` when there is nothing to read.
@@ -35,6 +30,12 @@ export declare function describedBy(id: string, errorText: string | undefined, .
  * `onValueChange`, and `placeholder`.
  */
 export type PickerFieldBaseProps = FormFieldBaseProps & FormFieldMetaProps & {
+    /**
+     * Id of the trigger the label points at. Defaults to a generated id;
+     * pass the field name (`id={field.name}`) so a submit handler such as
+     * `focusFirstInvalid` can find the control.
+     */
+    id?: string;
     /** Disables the trigger so no date can be picked. */
     disabled?: boolean;
     /** Marks the label and adds "Required" to the trigger's description. */

package/dist/form/field-shell.js

@@ -40,7 +40,7 @@ export function errorIdFor(id) {
  * Id of the hidden "Required" text `FormFieldShell` renders for a required
  * control `id`, for controls that cannot carry `required` themselves.
  */
-export function requiredIdFor(id) {
+function requiredIdFor(id) {
     return `${id}-required`;
 }
 /**

package/dist/form/focus-first-invalid.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The part of a form library's invalid-submit event this helper reads: the
+ * form state's per-field meta, keyed by field name (TanStack Form's
+ * `onSubmitInvalid` passes `{ formApi }` with this shape).
+ */
+export type InvalidSubmitEvent = {
+    formApi: {
+        state: {
+            fieldMeta: Partial<Record<string, {
+                errors: readonly unknown[];
+            }>>;
+        };
+    };
+};
+/**
+ * Invalid-submit handler that focuses the first field, in page order, whose
+ * meta has errors. It reads the form state, not the rendered `aria-invalid`,
+ * so it works before React has re-rendered. Fields are matched by control
+ * id, so give each `form/*` field `id={field.name}` (`FormTextField`
+ * defaults to it). The form library needs no focus API of its own.
+ *
+ * ```tsx
+ * const form = useForm({ onSubmitInvalid: focusFirstInvalid("order-form") })
+ * <form id="order-form" onSubmit={...}>
+ *   <FormSelectField id={field.name} ... />
+ * ```
+ */
+export declare function focusFirstInvalid(formId: string): ({ formApi }: InvalidSubmitEvent) => void;

package/dist/form/focus-first-invalid.js

@@ -0,0 +1,29 @@
+/**
+ * Invalid-submit handler that focuses the first field, in page order, whose
+ * meta has errors. It reads the form state, not the rendered `aria-invalid`,
+ * so it works before React has re-rendered. Fields are matched by control
+ * id, so give each `form/*` field `id={field.name}` (`FormTextField`
+ * defaults to it). The form library needs no focus API of its own.
+ *
+ * ```tsx
+ * const form = useForm({ onSubmitInvalid: focusFirstInvalid("order-form") })
+ * <form id="order-form" onSubmit={...}>
+ *   <FormSelectField id={field.name} ... />
+ * ```
+ */
+export function focusFirstInvalid(formId) {
+    return ({ formApi }) => {
+        const form = document.getElementById(formId);
+        if (!(form instanceof HTMLFormElement))
+            return;
+        const invalid = new Set(Object.entries(formApi.state.fieldMeta)
+            .filter(([, meta]) => meta?.errors.length)
+            .map(([name]) => name));
+        for (const element of form.elements) {
+            if (element instanceof HTMLElement && invalid.has(element.id)) {
+                element.focus();
+                return;
+            }
+        }
+    };
+}

package/dist/form/select-field.d.ts

@@ -7,6 +7,12 @@ type Props = FormFieldBaseProps & FormFieldMetaProps & {
     onValueChange: (value: string) => void;
     /** Trigger text while no item is selected. */
     placeholder?: string;
+    /**
+     * Id of the trigger the label points at. Defaults to a generated id;
+     * pass the field name (`id={field.name}`) so a submit handler such as
+     * `focusFirstInvalid` can find the control.
+     */
+    id?: string;
     /** Requires a value (native form validation) and marks the label. */
     required?: boolean;
     /** Forwarded to the select trigger. */
@@ -17,5 +23,5 @@ type Props = FormFieldBaseProps & FormFieldMetaProps & {
     children: ReactNode;
 };
 /** Select control with built-in field error text and invalid styling. */
-export declare function FormSelectField({ value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }: Props): import("react").JSX.Element;
+export declare function FormSelectField({ id: idProp, value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }: Props): import("react").JSX.Element;
 export {};

package/dist/form/select-field.js

@@ -4,8 +4,9 @@ import { useId } from "react";
 import { Select, SelectContent, SelectTrigger, SelectValue } from "../select.js";
 import { describedBy, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
 /** Select control with built-in field error text and invalid styling. */
-export function FormSelectField({ value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }) {
+export function FormSelectField({ id: idProp, value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }) {
     const errorText = metaErrorText(meta, { submitted, showError });
-    const id = useId();
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
     return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsxs(Select, { value: value, onValueChange: onValueChange, required: required, children: [_jsx(SelectTrigger, { id: id, className: className, "aria-required": required || undefined, "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { className: contentClassName, children: children })] }) }));
 }

package/dist/info-tip.js

@@ -3,15 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { CircleHelpIcon } from "lucide-react";
 import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./popover.js";
-import { focusRing, hitArea44 } from "./internal/styles.js";
+import { focusRing, hitArea44, quietTextHover } from "./internal/styles.js";
+import { HOVER_MEDIA_QUERY, useMediaQuery } from "./internal/use-media-query.js";
 import { cn } from "./utils.js";
-/**
- * True when a mouse can hover. Touch and coarse pointers must use click;
- * a hover-open popover would trap them after the first tap.
- */
-function canHoverOpen() {
-    return window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-}
 /**
  * Longer help than a Tooltip: a Popover with a 20px glyph and a 44px hit
  * area. Hover opens only on a fine pointer; click, tap, and keyboard always
@@ -25,6 +19,8 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
     const openedBy = React.useRef(null);
     const titleId = React.useId();
     const inline = layout === "inline";
+    // Hover opens only for a pointer that can hover; touch must click.
+    const canHoverOpen = useMediaQuery(HOVER_MEDIA_QUERY);
     const cancelClose = () => {
         if (closeTimer.current !== null) {
             window.clearTimeout(closeTimer.current);
@@ -32,7 +28,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
         }
     };
     const openFromHover = () => {
-        if (!canHoverOpen())
+        if (!canHoverOpen)
             return;
         cancelClose();
         if (open)
@@ -41,7 +37,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
         setOpen(true);
     };
     const closeFromHover = () => {
-        if (!canHoverOpen() || openedBy.current !== "hover")
+        if (!canHoverOpen || openedBy.current !== "hover")
             return;
         cancelClose();
         // Leave a beat so the pointer can travel from the glyph into the panel.
@@ -55,7 +51,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
             if (next)
                 openedBy.current = "click";
             setOpen(next);
-        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ...props, type: "button", "aria-label": label, "data-slot": "info-tip-trigger", "data-layout": layout, className: cn(focusRing, "relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground hover:text-selected-foreground focus-visible:text-selected-foreground", inline ? cn("size-5 align-middle", hitArea44) : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, onClick: (event) => {
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ...props, type: "button", "aria-label": label, "data-slot": "info-tip-trigger", "data-layout": layout, className: cn(focusRing, "relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground", quietTextHover, inline ? cn("size-5 align-middle", hitArea44) : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, onClick: (event) => {
                         // Hover already opened the panel; this click pins it instead of
                         // toggling it closed (Playwright and real mice both hover before
                         // they click). Preventing default skips Radix's toggle.

package/dist/internal/listbox-navigation.d.ts

@@ -1,5 +1,3 @@
-/** Return the next highlighted index for a listbox navigation key. */
-export declare function moveListboxHighlight(key: string, index: number, length: number): number | undefined;
 /**
  * Option id for `aria-activedescendant`. Index-based because option values
  * may contain spaces, which are not valid in an id reference.
@@ -12,15 +10,6 @@ export declare function listboxOptionId(listId: string, index: number): string;
  * so the ref is stable without `useCallback`.
  */
 export declare function scrollOptionIntoView(node: HTMLElement | null): void;
-/**
- * True while an IME is composing (Japanese, Chinese, Korean input). Enter
- * then commits the composition and must not select an option. `keyCode`
- * 229 covers Safari, which ends composition before the keydown.
- */
-export declare function isComposingKey(event: {
-    nativeEvent: KeyboardEvent;
-    keyCode: number;
-}): boolean;
 /**
  * Shared keydown for a search input that drives a listbox: navigation keys
  * move the highlight, Enter picks the highlighted index. Returns `true` when
@@ -39,8 +28,3 @@ export declare function handleListboxKey(event: {
     setHighlight: (index: number) => void;
     onEnter: (index: number) => void;
 }): boolean;
-/**
- * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
- * Combobox and SearchPicker (which re-exports it).
- */
-export declare function foldSearchText(value: string): string;

package/dist/internal/listbox-navigation.js

@@ -1,7 +1,7 @@
 /** Page keys move ten rows, a little more than one max-h-60 list viewport. */
 const PAGE_SIZE = 10;
 /** Return the next highlighted index for a listbox navigation key. */
-export function moveListboxHighlight(key, index, length) {
+function moveListboxHighlight(key, index, length) {
     switch (key) {
         case "ArrowDown":
             return length === 0 ? 0 : Math.min(index + 1, length - 1);
@@ -40,7 +40,7 @@ export function scrollOptionIntoView(node) {
  * then commits the composition and must not select an option. `keyCode`
  * 229 covers Safari, which ends composition before the keydown.
  */
-export function isComposingKey(event) {
+function isComposingKey(event) {
     return event.nativeEvent.isComposing || event.keyCode === 229;
 }
 /**
@@ -66,10 +66,3 @@ export function handleListboxKey(event, { highlight, length, setHighlight, onEnt
     }
     return false;
 }
-/**
- * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
- * Combobox and SearchPicker (which re-exports it).
- */
-export function foldSearchText(value) {
-    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
-}

package/dist/internal/listbox-option.d.ts

@@ -1,19 +1,4 @@
 import * as React from "react";
-type ListboxOptionProps = Omit<React.ComponentProps<"button">, "id" | "role" | "type" | "tabIndex" | "aria-selected"> & {
-    /** The listbox id; the option id derives from it for aria-activedescendant. */
-    listId: string;
-    index: number;
-    /** Keyboard or pointer highlight (tracked in state, not DOM focus). */
-    active: boolean;
-    selected: boolean;
-};
-/**
- * One option of a search-driven listbox (Combobox, SearchPicker): a
- * non-focusable button in a presentational `li`, highlighted by state and
- * scrolled into view while active. Pass `data-slot`, handlers, and the
- * component's right padding and indicator.
- */
-export declare function ListboxOption({ listId, index, active, selected, className, ...props }: ListboxOptionProps): React.JSX.Element;
 type PickerOptionProps<T> = {
     item: T;
     getLabel: (item: T) => string;

package/dist/internal/listbox-option.js

@@ -11,7 +11,7 @@ import { listboxEmpty, optionState } from "./styles.js";
  * scrolled into view while active. Pass `data-slot`, handlers, and the
  * component's right padding and indicator.
  */
-export function ListboxOption({ listId, index, active, selected, className, ...props }) {
+function ListboxOption({ listId, index, active, selected, className, ...props }) {
     return (_jsx("li", { role: "none", children: _jsx("button", { ref: active ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", tabIndex: -1, "aria-selected": selected, className: cn(optionRow, selected && optionState.selected, active && optionState.active, className), ...props }) }));
 }
 /** Only the old and new active rows rerender during keyboard navigation. */

package/dist/internal/overlay-styles.d.ts

@@ -22,7 +22,5 @@ export declare const overlayFadeZoom = "duration-100 data-open:animate-in data-o
  * indicator, plus the highlight from `optionState`.
  */
 export declare const optionRow = "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pl-3 text-left text-sm outline-hidden select-none";
-/** Icons in a row: no pointer events, no shrinking, 14px unless sized. */
-export declare const optionIcon = "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 /** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
 export declare const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";

package/dist/internal/overlay-styles.js

@@ -22,7 +22,5 @@ export const overlayFadeZoom = `${overlayFade} data-open:zoom-in-95 data-closed:
  * indicator, plus the highlight from `optionState`.
  */
 export const optionRow = "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pl-3 text-left text-sm outline-hidden select-none";
-/** Icons in a row: no pointer events, no shrinking, 14px unless sized. */
-export const optionIcon = "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 /** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
 export const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";

package/dist/internal/search.d.ts

@@ -1,6 +1,10 @@
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
+ * Combobox and SearchPicker (which re-exports it).
+ */
+export declare function foldSearchText(value: string): string;
 /** Fold the query once; item labels are folded when their catalog changes. */
 export declare function normalizeSearchQuery(query: string): string;
-export declare function matchesSearchLabel(label: string, needle: string): boolean;
 export declare function createSearchIndex<T>(items: T[], getLabel: (item: T) => string): {
     item: T;
     label: string;