atlas-react-kit 0.10.0 → 0.11.0

package/dist/combobox.js

@@ -5,9 +5,9 @@ import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
-import { listboxOptionId, moveListboxHighlight, scrollOptionIntoView, } from "./internal/listbox-navigation.js";
+import { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
+import { ListboxEmptyStatus, ListboxOption } from "./internal/listbox-option.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { listboxEmpty, optionState } from "./internal/styles.js";
 import { cn, onInputChange } from "./utils.js";
 const CREATE_OPTION_KEY = "__atlas-combobox-create";
 /**
@@ -26,7 +26,7 @@ function defaultCreateLabel(value) {
 /**
  * Value to offer as a new option, or `null` when the query is empty,
  * rejected by `normalize`, or already in the list (value or label,
- * case-insensitive). Domain catalogs stay with the caller.
+ * ignoring case and accents). Domain catalogs stay with the caller.
  */
 function resolveCreateValue(query, options, normalize) {
     const created = normalize(query);
@@ -35,9 +35,9 @@ function resolveCreateValue(query, options, normalize) {
     const value = created.trim();
     if (!value)
         return null;
-    const needle = value.toLowerCase();
-    const exists = options.some((option) => option.value.toLowerCase() === needle ||
-        option.label.toLowerCase() === needle);
+    const needle = foldSearchText(value);
+    const exists = options.some((option) => foldSearchText(option.value) === needle ||
+        foldSearchText(option.label) === needle);
     return exists ? null : value;
 }
 /**
@@ -49,12 +49,14 @@ function resolveCreateValue(query, options, normalize) {
  * Opt-in `creatable` appends a create action when the query is not already
  * an option; choosing it calls `onValueChange` like a normal selection.
  */
-export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText = "No results", disabled, id, className, listClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable = false, normalizeCreateValue = defaultNormalizeCreateValue, createLabel = defaultCreateLabel, }) {
+export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText = "No results", disabled, id, className, listClassName, contentClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable = false, normalizeCreateValue = defaultNormalizeCreateValue, createLabel = defaultCreateLabel, ...props }) {
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
     const [highlight, setHighlight] = React.useState(0);
     const inputRef = React.useRef(null);
     const listId = React.useId();
+    const generatedId = React.useId();
+    const triggerId = id ?? generatedId;
     // A created value may not be in `options` yet (the app owns the catalog).
     // Keep it visible on the trigger and in the list so reopen/Enter still work.
     const resolvedOptions = React.useMemo(() => {
@@ -66,10 +68,10 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
     }, [creatable, options, value]);
     const selected = resolvedOptions.find((option) => option.value === value);
     const filtered = React.useMemo(() => {
-        const needle = query.trim().toLowerCase();
+        const needle = foldSearchText(query.trim());
         if (!needle)
             return resolvedOptions;
-        return resolvedOptions.filter((option) => option.label.toLowerCase().includes(needle));
+        return resolvedOptions.filter((option) => foldSearchText(option.label).includes(needle));
     }, [resolvedOptions, query]);
     const createValue = creatable
         ? resolveCreateValue(query, resolvedOptions, normalizeCreateValue)
@@ -109,24 +111,32 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
         setQuery("");
     };
     const activeOption = list[highlight];
-    const onSearchKeyDown = (event) => {
-        const nextHighlight = moveListboxHighlight(event.key, highlight, list.length);
-        if (nextHighlight !== undefined) {
-            event.preventDefault();
-            setHighlight(nextHighlight);
+    const empty = list.length === 0;
+    // APG combobox: ArrowDown, ArrowUp, and Alt+ArrowDown open the list from
+    // the trigger. Radix only opens a popover on Enter, Space, and click.
+    const onTriggerKeyDown = (event) => {
+        if (open || (event.key !== "ArrowDown" && event.key !== "ArrowUp"))
             return;
-        }
-        if (event.key === "Enter") {
-            event.preventDefault();
-            const option = list[highlight];
-            if (option)
-                selectValue(option.value);
-        }
+        event.preventDefault();
+        onOpenChange(true);
+    };
+    const onSearchKeyDown = (event) => {
+        handleListboxKey(event, {
+            highlight,
+            length: list.length,
+            setHighlight,
+            onEnter: (index) => {
+                const option = list[index];
+                if (option)
+                    selectValue(option.value);
+            },
+        });
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, className: cn(formControlTriggerClassName, "justify-between", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption ? listboxOptionId(listId, highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", className: cn("max-h-60 overflow-y-auto p-1", listClassName), children: list.length === 0 ? (_jsx("li", { className: listboxEmpty, children: emptyText })) : (list.map((option, index) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ...props, id: triggerId, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, onKeyDown: onTriggerKeyDown, className: cn(formControlTriggerClassName, "justify-between", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: cn("w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", contentClassName), children: [_jsx("div", { "data-slot": "combobox-search", className: "border-b p-2", children: _jsx(Input, { ref: inputRef, value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption ? listboxOptionId(listId, highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", "data-slot": "combobox-list", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy ?? (ariaLabel ? undefined : triggerId), className: empty
+                            ? "sr-only"
+                            : cn("max-h-60 overflow-y-auto p-1", listClassName), children: list.map((option, index) => {
                             const isCreate = createOption != null && option === createOption;
                             const isSelected = option.value === value && !isCreate;
-                            const isActive = index === highlight;
-                            return (_jsx("li", { role: "none", children: _jsxs("button", { ref: isActive ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", "aria-selected": isSelected, className: cn("relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-left text-sm outline-hidden select-none", isSelected && optionState.selected, isActive && optionState.active), onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }) }, isCreate ? CREATE_OPTION_KEY : option.value));
-                        })) })] })] }));
+                            return (_jsxs(ListboxOption, { "data-slot": "combobox-option", listId: listId, index: index, active: index === highlight, selected: isSelected, className: "pr-8", onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }, isCreate ? CREATE_OPTION_KEY : option.value));
+                        }) }), _jsx(ListboxEmptyStatus, { empty: empty, children: emptyText })] })] }));
 }

package/dist/date-picker.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { DateRange } from "react-day-picker";
-import { PopoverContent } from "./popover.js";
+import { type PickerCalendarProps, type PickerTriggerProps } from "./picker-shell.js";
 export type { DateRange };
 export type DateLike = Date | string | number | null | undefined;
 /** From/to value for `DatePickerButton` in range mode; each side is `DateLike`. */
@@ -16,22 +16,14 @@ export type DatePickerRangeValue = {
 export declare function toDate(value: DateLike): Date | undefined;
 /** Format a Date as a timezone-safe calendar date (`yyyy-MM-dd`). */
 export declare function formatLocalDate(date: Date): string;
-type DatePickerSharedProps = {
-    id?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    "aria-invalid"?: boolean;
+export type { PickerCalendarProps as DatePickerCalendarProps };
+type DatePickerSharedProps = PickerTriggerProps & {
     /**
      * Visible months in the popover calendar. Defaults to 1 in single mode.
      * In range mode, defaults to 1 below the `md` breakpoint and 2 at `md`
      * and above so two stacked months do not open off-screen on mobile.
      */
     numberOfMonths?: number;
-    /** Popover side. Defaults to `bottom`; Radix still flips on collision. */
-    side?: React.ComponentProps<typeof PopoverContent>["side"];
-    /** Month shown when the popover opens; falls back to the selected date. */
-    defaultMonth?: Date;
 };
 export type DatePickerSingleProps = DatePickerSharedProps & {
     mode?: "single";
@@ -50,7 +42,9 @@ export type DatePickerButtonProps = DatePickerSingleProps | DatePickerRangeProps
  * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
  * `{ from, to }` and emits `DateRange | undefined`. Range mode shows one
  * month below `md` and two at `md+` unless `numberOfMonths` is set. The
- * popover clamps to the viewport (`side` is overridable). Square corners
- * follow the shared shape rules.
+ * popover clamps to the viewport (`side` is overridable). `className` styles
+ * the trigger, `contentClassName` the popover, and `calendarProps` reaches
+ * Day Picker (disabled days, `startMonth`, `weekStartsOn`, `locale`). Square
+ * corners follow the shared shape rules.
  */
 export declare function DatePickerButton(props: DatePickerButtonProps): React.JSX.Element;

package/dist/date-picker.js

@@ -2,13 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format, isSameDay, parseISO } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Button } from "./button.js";
-import { PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, } from "./internal/form-control.js";
 import { MD_MEDIA_QUERY, useMediaQuery } from "./internal/use-media-query.js";
-import { LazyCalendar, preloadCalendar } from "./lazy-calendar.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { cn } from "./utils.js";
+import { LazyCalendar } from "./lazy-calendar.js";
+import { PickerClearFooter, PickerShell, } from "./picker-shell.js";
 /**
  * Coerce a date-like value to a local `Date`.
  * Plain calendar dates (`yyyy-MM-dd`) parse as local midnight so they do not
@@ -56,19 +52,15 @@ function formatRangeTriggerLabel(from, to, placeholder) {
         return format(from, "PPP");
     return `${format(from, "PPP")} – ${format(to, "PPP")}`;
 }
-/** Shared trigger + auto-sized popover chrome for single and range modes. */
-function DatePickerShell({ id, disabled, ariaInvalid, className, empty, label, open, onOpenChange, side, children, }) {
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "data-empty": empty, className: cn(pickerTriggerClassName, className), onPointerEnter: preloadCalendar, onFocus: preloadCalendar, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), label] }) }), _jsx(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, className: cn("w-auto", pickerContentClassName), children: children })] }));
-}
-function DatePickerSingleButton({ id, value, onChange, placeholder = "Pick a date", disabled, className, "aria-invalid": ariaInvalid, numberOfMonths, side, defaultMonth, }) {
+function DatePickerSingleButton({ value, onChange, placeholder = "Pick a date", numberOfMonths, defaultMonth, calendarProps, ...shell }) {
     const [open, setOpen] = React.useState(false);
     const date = toDate(value);
-    return (_jsx(DatePickerShell, { id: id, disabled: disabled, ariaInvalid: ariaInvalid, className: className, empty: !date, label: date ? format(date, "PPP") : placeholder, open: open, onOpenChange: setOpen, side: side, children: _jsx(LazyCalendar, { mode: "single", selected: date, defaultMonth: defaultMonth ?? date, numberOfMonths: numberOfMonths, onSelect: (next) => {
+    return (_jsx(PickerShell, { ...shell, empty: !date, label: date ? format(date, "PPP") : placeholder, dialogLabel: "Choose date", open: open, onOpenChange: setOpen, children: _jsx(LazyCalendar, { ...calendarProps, mode: "single", autoFocus: true, selected: date, defaultMonth: defaultMonth ?? date, numberOfMonths: numberOfMonths, onSelect: (next) => {
                 onChange(next);
                 setOpen(false);
             } }) }));
 }
-function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date range", disabled, className, "aria-invalid": ariaInvalid, numberOfMonths, side, defaultMonth, }) {
+function DatePickerRangeButton({ value, onChange, placeholder = "Pick a date range", numberOfMonths, defaultMonth, calendarProps, ...shell }) {
     const [open, setOpen] = React.useState(false);
     const mdUp = useMediaQuery(MD_MEDIA_QUERY);
     const months = numberOfMonths ?? (mdUp ? 2 : 1);
@@ -84,7 +76,7 @@ function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date
             restartRef.current = Boolean(from && to);
         setOpen(next);
     };
-    return (_jsxs(DatePickerShell, { id: id, disabled: disabled, ariaInvalid: ariaInvalid, className: className, empty: !from, label: formatRangeTriggerLabel(from, to, placeholder), open: open, onOpenChange: onOpenChange, side: side, children: [_jsx(LazyCalendar, { mode: "range", selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: months, onSelect: (next, day) => {
+    return (_jsxs(PickerShell, { ...shell, empty: !from, label: formatRangeTriggerLabel(from, to, placeholder), dialogLabel: "Choose dates", open: open, onOpenChange: onOpenChange, children: [_jsx(LazyCalendar, { ...calendarProps, mode: "range", autoFocus: true, selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: months, onSelect: (next, day) => {
                     const range = restartRef.current ? { from: day, to: day } : next;
                     restartRef.current = false;
                     onChange(range);
@@ -93,10 +85,10 @@ function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date
                     if (range?.from && range.to && !isSameDay(range.from, range.to)) {
                         setOpen(false);
                     }
-                } }), _jsx("div", { className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: !from && !to, onClick: () => {
-                        onChange(undefined);
-                        setOpen(false);
-                    }, children: "Clear" }) })] }));
+                } }), _jsx(PickerClearFooter, { disabled: !from && !to, onClear: () => {
+                    onChange(undefined);
+                    setOpen(false);
+                } })] }));
 }
 /**
  * Calendar popover trigger styled as a form control (same chrome as Input
@@ -104,8 +96,10 @@ function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date
  * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
  * `{ from, to }` and emits `DateRange | undefined`. Range mode shows one
  * month below `md` and two at `md+` unless `numberOfMonths` is set. The
- * popover clamps to the viewport (`side` is overridable). Square corners
- * follow the shared shape rules.
+ * popover clamps to the viewport (`side` is overridable). `className` styles
+ * the trigger, `contentClassName` the popover, and `calendarProps` reaches
+ * Day Picker (disabled days, `startMonth`, `weekStartsOn`, `locale`). Square
+ * corners follow the shared shape rules.
  */
 export function DatePickerButton(props) {
     if (props.mode === "range") {

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

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { PopoverContent } from "./popover.js";
+import { type PickerTriggerProps } from "./picker-shell.js";
 /** Default clock increment, in minutes. Must divide 60. */
 export declare const DEFAULT_TIME_STEP = 15;
-export type DateTimePickerButtonProps = {
+export type DateTimePickerButtonProps = PickerTriggerProps & {
     /** Controlled instant. `null` or omitted is empty. */
     value?: Date | null;
     onChange: (date: Date | null) => void;
@@ -11,15 +11,6 @@ export type DateTimePickerButtonProps = {
      * Values that do not divide 60 fall back to 15 so the list stays even.
      */
     timeStep?: number;
-    id?: string;
-    placeholder?: string;
-    disabled?: boolean;
-    className?: string;
-    "aria-invalid"?: boolean;
-    /** Popover side. Defaults to `bottom`; Radix still flips on collision. */
-    side?: React.ComponentProps<typeof PopoverContent>["side"];
-    /** Month shown when the popover opens; falls back to the selected date. */
-    defaultMonth?: Date;
 };
 /**
  * Normalize a minute step so option lists stay even (1, 5, 15, 30, 60).
@@ -31,6 +22,7 @@ export declare function resolveTimeStep(step: number | undefined): number;
  * chrome as Input, SelectTrigger, and DatePickerButton). `value` is a `Date`
  * or `null`. Picking a day keeps the popover open so the time can be set;
  * Clear emits `null`. One month only, clamped to the viewport, so the panel
- * stays on-screen at a 390px width.
+ * stays on-screen at a 390px width. `className` styles the trigger,
+ * `contentClassName` the popover, and `calendarProps` reaches Day Picker.
  */
-export declare function DateTimePickerButton({ id, value, onChange, timeStep, placeholder, disabled, className, "aria-invalid": ariaInvalid, side, defaultMonth, }: DateTimePickerButtonProps): React.JSX.Element;
+export declare function DateTimePickerButton({ value, onChange, timeStep, placeholder, defaultMonth, calendarProps, ...shell }: DateTimePickerButtonProps): React.JSX.Element;

package/dist/date-time-picker.js

@@ -2,13 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Button } from "./button.js";
-import { PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, } from "./internal/form-control.js";
-import { LazyCalendar, preloadCalendar } from "./lazy-calendar.js";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { LazyCalendar } from "./lazy-calendar.js";
+import { PickerClearFooter, PickerShell, } from "./picker-shell.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
-import { cn } from "./utils.js";
 /** Default clock increment, in minutes. Must divide 60. */
 export const DEFAULT_TIME_STEP = 15;
 /**
@@ -69,35 +65,35 @@ function preventDismissForPortaledSelect(event) {
  * chrome as Input, SelectTrigger, and DatePickerButton). `value` is a `Date`
  * or `null`. Picking a day keeps the popover open so the time can be set;
  * Clear emits `null`. One month only, clamped to the viewport, so the panel
- * stays on-screen at a 390px width.
+ * stays on-screen at a 390px width. `className` styles the trigger,
+ * `contentClassName` the popover, and `calendarProps` reaches Day Picker.
  */
-export function DateTimePickerButton({ id, value, onChange, timeStep, placeholder = "Pick a date and time", disabled, className, "aria-invalid": ariaInvalid, side, defaultMonth, }) {
+export function DateTimePickerButton({ value, onChange, timeStep, placeholder = "Pick a date and time", defaultMonth, calendarProps, ...shell }) {
     const [open, setOpen] = React.useState(false);
     const date = value ?? null;
     const step = resolveTimeStep(timeStep);
     const empty = date == null;
-    const label = date ? format(date, "PPP p") : placeholder;
     const hourId = React.useId();
     const minuteId = React.useId();
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "data-empty": empty, className: cn(pickerTriggerClassName, className), onPointerEnter: preloadCalendar, onFocus: preloadCalendar, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), label] }) }), _jsxs(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, onInteractOutside: preventDismissForPortaledSelect, className: cn("w-auto min-w-0", pickerContentClassName), children: [_jsx(LazyCalendar, { mode: "single", 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;
-                            onChange(combineDateAndTime(next, date?.getHours() ?? 0, date?.getMinutes() ?? 0));
-                        } }), _jsxs("div", { role: "group", "aria-label": "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;
-                                            onChange(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;
-                                            onChange(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("div", { className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: empty, onClick: () => {
-                                onChange(null);
-                                setOpen(false);
-                            }, children: "Clear" }) })] })] }));
+    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, { ...calendarProps, 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;
+                    onChange(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;
+                                    onChange(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;
+                                    onChange(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: () => {
+                    onChange(null);
+                    setOpen(false);
+                } })] }));
 }

package/dist/dialog.d.ts

@@ -5,8 +5,12 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogP
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
-declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function DialogContent({ className, children, showCloseButton, overlayClassName, closeButtonClassName, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
+    /** Classes for the backdrop, e.g. a darker scrim. */
+    overlayClassName?: string;
+    /** Classes for the built-in close button, e.g. its position. */
+    closeButtonClassName?: string;
 }): React.JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DialogFooter({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/dialog.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
+import { overlayFade, overlayFadeZoom, overlaySurface, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 import { Button } from "./button.js";
 import { XIcon } from "lucide-react";
@@ -18,10 +19,10 @@ function DialogClose({ ...props }) {
     return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
 }
 function DialogOverlay({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-black/20 duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 supports-backdrop-filter:backdrop-blur-sm", className), ...props }));
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn(overlayFade, "fixed inset-0 isolate z-50 bg-black/20 supports-backdrop-filter:backdrop-blur-sm", className), ...props }));
 }
-function DialogContent({ className, children, showCloseButton = true, ...props }) {
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn("fixed top-1/2 left-1/2 z-50 grid max-h-[90dvh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 overflow-y-auto rounded-none bg-popover p-6 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon-sm", className: "absolute top-4 right-4 text-muted-foreground hover:text-foreground", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
+function DialogContent({ className, children, showCloseButton = true, overlayClassName, closeButtonClassName, ...props }) {
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, { className: overlayClassName }), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn(overlaySurface, overlayFadeZoom, "fixed top-1/2 left-1/2 z-50 grid max-h-[90dvh] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 overflow-y-auto p-6 text-sm outline-none", className), ...props, children: [children, showCloseButton && (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close-button", asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon-sm", className: cn("absolute top-4 right-4 text-muted-foreground hover:text-foreground", closeButtonClassName), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }) }))] })] }));
 }
 function DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));

package/dist/dropdown-menu.js

@@ -3,11 +3,12 @@ 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 { cn } from "./utils.js";
-/** Item highlight and selected chrome shared with `SelectItem`. */
-const menuItemClassName = cn(optionState.focus, dataDisabledState, "relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5");
-const menuContentClassName = "z-50 overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95";
+/** 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 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 }) {
     return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
@@ -37,7 +38,7 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
     return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn(menuItemClassName, "pl-9", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-3 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx("span", { className: "block size-1.5 rounded-full bg-current" }) }) }), children] }));
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
-    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset || undefined, className: cn("px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase data-inset:pl-9", className), ...props }));
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset || undefined, className: cn(menuLabel, "data-inset:pl-9", className), ...props }));
 }
 function DropdownMenuSeparator({ className, ...props }) {
     return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props }));

package/dist/empty-panel.d.ts

@@ -1,10 +1,11 @@
-type Props = {
+import type * as React from "react";
+type Props = React.ComponentProps<"div"> & {
     children: React.ReactNode;
     /** Tighter padding for compact widgets; default is standard form empty states. */
     size?: "sm" | "md" | "lg";
     muted?: boolean;
     className?: string;
 };
-/** Dashed empty-state panel for lists, widgets, and form sections. */
-export declare function EmptyPanel({ children, size, muted, className, }: Props): import("react").JSX.Element;
+/** Dashed empty-state panel for lists, widgets, and form sections. Other props go to the root `div`. */
+export declare function EmptyPanel({ children, size, muted, className, ...props }: Props): React.JSX.Element;
 export {};

package/dist/empty-panel.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "./utils.js";
-/** Dashed empty-state panel for lists, widgets, and form sections. */
-export function EmptyPanel({ children, size = "md", muted = true, className, }) {
-    return (_jsx("div", { className: cn("rounded-none border border-dashed text-center text-sm text-muted-foreground", muted && "bg-muted/30", size === "sm" && "px-3 py-4", size === "md" && "px-4 py-6", size === "lg" && "px-4 py-8", className), children: children }));
+/** Dashed empty-state panel for lists, widgets, and form sections. Other props go to the root `div`. */
+export function EmptyPanel({ children, size = "md", muted = true, className, ...props }) {
+    return (_jsx("div", { "data-slot": "empty-panel", ...props, className: cn("rounded-none border border-dashed text-center text-sm text-muted-foreground", muted && "bg-muted/30", size === "sm" && "px-3 py-4", size === "md" && "px-4 py-6", size === "lg" && "px-4 py-8", className), children: children }));
 }

package/dist/error-boundary.d.ts

@@ -4,12 +4,14 @@ type ErrorFallbackProps = {
     message?: string;
     onRetry?: () => void;
     onReload?: () => void;
+    className?: string;
 };
 /**
- * Presentational recovery UI used by `ErrorBoundary`. Exported so the markup
- * can be tested without throwing during render.
+ * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
+ * with the message and recovery buttons. Exported so the markup can be
+ * tested without throwing during render.
  */
-export declare function ErrorFallback({ message, onRetry, onReload, }: ErrorFallbackProps): import("react").JSX.Element;
+export declare function ErrorFallback({ message, onRetry, onReload, className, }: ErrorFallbackProps): import("react").JSX.Element;
 type ErrorBoundaryProps = {
     children: ReactNode;
     /** Overrides the default recovery message. */

package/dist/error-boundary.js

@@ -2,12 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Component } from "react";
 import { Button } from "./button.js";
+import { EmptyPanel } from "./empty-panel.js";
+import { cn } from "./utils.js";
 /**
- * Presentational recovery UI used by `ErrorBoundary`. Exported so the markup
- * can be tested without throwing during render.
+ * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
+ * with the message and recovery buttons. Exported so the markup can be
+ * tested without throwing during render.
  */
-export function ErrorFallback({ message = "Something went wrong.", onRetry, onReload, }) {
-    return (_jsxs("div", { role: "alert", "data-slot": "error-boundary", className: "flex flex-col items-center gap-4 rounded-none border border-dashed bg-muted/30 px-4 py-8 text-center", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: message }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [onRetry ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: "Try again" })) : null, onReload ? (_jsx(Button, { type: "button", size: "sm", onClick: onReload, children: "Reload" })) : null] })] }));
+export function ErrorFallback({ message = "Something went wrong.", onRetry, onReload, className, }) {
+    return (_jsxs(EmptyPanel, { role: "alert", "data-slot": "error-boundary", size: "lg", 
+        // The panel's muted text is for its message; the buttons keep their own.
+        className: cn("flex flex-col items-center gap-4 text-foreground", className), children: [_jsx("p", { className: "text-sm text-muted-foreground", children: message }), _jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2", children: [onRetry ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: "Try again" })) : null, onReload ? (_jsx(Button, { type: "button", size: "sm", onClick: onReload, children: "Reload" })) : null] })] }));
 }
 /**
  * Generic React error boundary with retry (reset) and full-page reload.

package/dist/field.d.ts

@@ -4,9 +4,22 @@ declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldse
 declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
     variant?: "legend" | "label";
 }): import("react").JSX.Element;
+/**
+ * Stack of fields and the `@container/field-group` that responsive fields
+ * query. It keeps `w-full`: an inline-size container has no intrinsic
+ * width, so without it the group collapses to zero in a flex row or any
+ * shrink-to-fit parent. Override with `className` (`w-auto`, `max-w-md`).
+ */
 declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+/**
+ * Vertical (and responsive, below `@md`) fields are a flex column, so
+ * children stretch to the field's width by default (`align-items: stretch`)
+ * while a child's own width class (`w-32`, `w-fit`) still wins. The field
+ * itself sets no width: it fills a block or column parent and sizes to its
+ * content in a row.
+ */
 declare const fieldVariants: (props?: ({
-    orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;

package/dist/field.js

@@ -11,15 +11,28 @@ function FieldSet({ className, ...props }) {
 function FieldLegend({ className, variant = "legend", ...props }) {
     return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs", className), ...props }));
 }
+/**
+ * Stack of fields and the `@container/field-group` that responsive fields
+ * query. It keeps `w-full`: an inline-size container has no intrinsic
+ * width, so without it the group collapses to zero in a flex row or any
+ * shrink-to-fit parent. Override with `className` (`w-auto`, `max-w-md`).
+ */
 function FieldGroup({ className, ...props }) {
     return (_jsx("div", { "data-slot": "field-group", className: cn("group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
 }
-const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+/**
+ * Vertical (and responsive, below `@md`) fields are a flex column, so
+ * children stretch to the field's width by default (`align-items: stretch`)
+ * while a child's own width class (`w-32`, `w-fit`) still wins. The field
+ * itself sets no width: it fills a block or column parent and sizes to its
+ * content in a row.
+ */
+const fieldVariants = cva("group/field flex gap-3 data-[invalid=true]:text-destructive", {
     variants: {
         orientation: {
-            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+            vertical: "flex-col",
             horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-            responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            responsive: "flex-col @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         },
     },
     defaultVariants: {

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

@@ -1,4 +1,4 @@
-import { type DateLike } from "../date-picker.js";
+import { type DateLike, type DatePickerCalendarProps } from "../date-picker.js";
 import type { FieldMetaState } from "./field-error.js";
 type Props = {
     value: DateLike;
@@ -9,7 +9,13 @@ type Props = {
     disabled?: boolean;
     /** Forwarded to the date picker trigger. */
     className?: string;
+    /** Classes for the field wrapper (label, trigger, and error). */
+    fieldClassName?: string;
+    /** Forwarded to the date picker popover. */
+    contentClassName?: string;
+    /** Day Picker options forwarded to the calendar (disabled days, etc.). */
+    calendarProps?: DatePickerCalendarProps;
 };
 /** Date picker with built-in field error text and invalid styling. */
-export declare function FormDatePickerField({ value, onValueChange, label, meta, placeholder, disabled, className, }: Props): import("react").JSX.Element;
+export declare function FormDatePickerField({ onValueChange, label, meta, fieldClassName, ...picker }: Props): import("react").JSX.Element;
 export {};

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
-import { DatePickerButton } from "../date-picker.js";
-import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
+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({ value, onValueChange, label, meta, placeholder, disabled, className, }) {
+export function FormDatePickerField({ onValueChange, label, meta, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta);
     const id = useId();
-    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, children: _jsx(DatePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, className: className, "aria-invalid": invalidWhen(errorText) }) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, className: fieldClassName, children: _jsx(DatePickerButton, { ...picker, id: id, onChange: onValueChange, ...pickerFieldAria(id, errorText) }) }));
 }