atlas-react-kit 0.9.3 → 0.10.0

package/COMPONENTS.md

@@ -8,6 +8,12 @@ no root component barrel.
 For installation, see [README.md](./README.md); for styling and accessibility,
 see [DESIGN_RULES.md](./DESIGN_RULES.md).
 
+For LLM-assisted implementation of patterns this kit does not export, use
+[COSS UI](https://coss.com/ui) as a reference before building a component from
+scratch. Its Base UI catalog includes input groups, number fields, OTP fields,
+drawers, and segmented controls. COSS is a separate library; its components
+are not Atlas exports.
+
 ## Optional peer dependencies
 
 Core entries need only the kit. These feature entries need an extra install
@@ -131,8 +137,8 @@ action. Pass `side` to prefer a placement; Radix still flips on collision.
 form-control chrome. The popover is one month, a labelled Hour and Minute
 pair (24-hour, stepped by `timeStep`, default 15), and Clear. Picking a day
 keeps the popover open so the time can be set; the time selects stay
-disabled until a day is chosen. The panel is `w-auto`, viewport-clamped, and
-capped at `min(100vw - 2rem, 24rem)` so it stays on-screen at 390px. Pass
+disabled until a day is chosen. The panel is `w-auto`, sized by the
+calendar, and clamped to the viewport so it stays on-screen at 390px. Pass
 `side` to prefer a placement. `FormDateTimePickerField` forwards `className`
 and `timeStep` to that control.
 

package/DESIGN_RULES.md

@@ -107,6 +107,20 @@ column, and `min-w-0` so nested tables scroll instead of widening the card.
 `Dialog` already scrolls inside the viewport on small screens; avoid
 additional height limits.
 
+Apps decide how wide and tall containers and overlays are. The kit sets
+intrinsic control sizes (the button, input, tab and row heights, icons,
+checkboxes, switches, avatars, slider thumbs, and track thickness) and
+clamps overlays to the viewport, but no design widths or heights on
+dialogs, popovers, menus, or lists. Set them with `className`: give each
+`DialogContent` a width such as `sm:max-w-md`, and each `PopoverContent`
+one such as `w-72`. Where the sized part is not the element `className`
+reaches, a prop names it: `InfoTip` takes `contentClassName` (default
+`w-72`), and `Combobox` and `SearchPicker` take `listClassName` (default
+`max-h-60`). `TabsNav` fills a block container but sizes to its links in a
+flex row; add `w-full` to stretch it there. `Tooltip` keeps a `max-w-xs` reading width, `Textarea` a
+`min-h-16` starting height, and toasts their 356px width; override the first
+two with `className`.
+
 `Input`, `SelectTrigger`, `DatePickerButton`, `DateTimePickerButton`, and
 `Combobox` share form-control chrome: 40px height, `px-3`,
 `text-base md:text-sm`, `border-input`, and `shadow-xs`. Do not restyle those

package/README.md

@@ -8,7 +8,7 @@ React 19, Tailwind 4, and Node >=20.19 are required. Next 16 is needed only
 when using `next/tabs-nav-link`.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.9.3
+npm install --save-exact atlas-react-kit@0.10.0
 ```
 
 Import components by subpath:
@@ -128,7 +128,7 @@ artifact with the package owner's npm login:
 ```sh
 mkdir -p release-artifacts
 npm pack --pack-destination release-artifacts
-npm publish ./release-artifacts/atlas-react-kit-0.9.3.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.10.0.tgz --access public
 ```
 
 Pin an exact package version in consuming applications. Roll back an upgrade by

package/dist/combobox.d.ts

@@ -12,7 +12,10 @@ type ComboboxProps = {
     emptyText?: string;
     disabled?: boolean;
     id?: string;
+    /** Classes for the trigger, e.g. its width; the list matches it. */
     className?: string;
+    /** Classes for the listbox, e.g. its height. Defaults to `max-h-60`. */
+    listClassName?: string;
     "aria-invalid"?: boolean;
     /** Name the trigger when there is no `<Label htmlFor={id}>`. */
     "aria-label"?: string;
@@ -43,5 +46,5 @@ type ComboboxProps = {
  * Opt-in `creatable` appends a create action when the query is not already
  * an option; choosing it calls `onValueChange` like a normal selection.
  */
-export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable, normalizeCreateValue, createLabel, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, listClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable, normalizeCreateValue, createLabel, }: ComboboxProps): React.JSX.Element;
 export {};

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 { moveListboxHighlight } from "./internal/listbox-navigation.js";
+import { listboxOptionId, moveListboxHighlight, scrollOptionIntoView, } from "./internal/listbox-navigation.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
-import { optionState } from "./internal/styles.js";
+import { listboxEmpty, optionState } from "./internal/styles.js";
 import { cn, onInputChange } from "./utils.js";
 const CREATE_OPTION_KEY = "__atlas-combobox-create";
 /**
@@ -49,7 +49,7 @@ 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, "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, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable = false, normalizeCreateValue = defaultNormalizeCreateValue, createLabel = defaultCreateLabel, }) {
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
     const [highlight, setHighlight] = React.useState(0);
@@ -96,12 +96,6 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
         const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
         return () => window.cancelAnimationFrame(frame);
     }, [open]);
-    // Callback ref (not an effect) so scroll runs when Radix mounts the list
-    // and when the highlight moves. A layout effect on `open` is too early:
-    // the option node does not exist until the popover content is in the DOM.
-    const scrollHighlightedOption = React.useCallback((node) => {
-        node?.scrollIntoView({ block: "nearest" });
-    }, []);
     const onQueryChange = onInputChange((next) => {
         setQuery(next);
         setHighlight(0);
@@ -114,9 +108,6 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
         setOpen(false);
         setQuery("");
     };
-    // Index-based ids: option values may contain spaces, which are not valid
-    // in an id or an aria-activedescendant reference.
-    const optionId = (index) => `${listId}-option-${index}`;
     const activeOption = list[highlight];
     const onSearchKeyDown = (event) => {
         const nextHighlight = moveListboxHighlight(event.key, highlight, list.length);
@@ -132,10 +123,10 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
                 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 ? optionId(highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", className: "max-h-60 overflow-y-auto p-1", children: list.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (list.map((option, index) => {
+    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) => {
                             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 ? scrollHighlightedOption : undefined, id: optionId(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 (_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));
                         })) })] })] }));
 }

package/dist/date-picker.js

@@ -4,9 +4,9 @@ import * as React from "react";
 import { format, isSameDay, parseISO } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
-import { Calendar } from "./calendar.js";
-import { formControlTriggerClassName } from "./internal/form-control.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";
 /**
@@ -56,16 +56,14 @@ function formatRangeTriggerLabel(from, to, placeholder) {
         return format(from, "PPP");
     return `${format(from, "PPP")} – ${format(to, "PPP")}`;
 }
-/** Gutter used when the calendar popover collides with the viewport. */
-const DATE_PICKER_COLLISION_PADDING = 16;
 /** 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(formControlTriggerClassName, "justify-start data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), label] }) }), _jsx(PopoverContent, { align: "start", side: side, collisionPadding: DATE_PICKER_COLLISION_PADDING, className: "w-auto max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0", children: 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, }) {
     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(Calendar, { mode: "single", selected: date, defaultMonth: defaultMonth ?? date, numberOfMonths: numberOfMonths, onSelect: (next) => {
+    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) => {
                 onChange(next);
                 setOpen(false);
             } }) }));
@@ -86,7 +84,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(Calendar, { mode: "range", selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: months, onSelect: (next, day) => {
+    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) => {
                     const range = restartRef.current ? { from: day, to: day } : next;
                     restartRef.current = false;
                     onChange(range);

package/dist/date-time-picker.js

@@ -4,15 +4,13 @@ import * as React from "react";
 import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
-import { Calendar } from "./calendar.js";
-import { formControlTriggerClassName } from "./internal/form-control.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 { 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;
-/** Gutter used when the calendar popover collides with the viewport. */
-const DATE_TIME_PICKER_COLLISION_PADDING = 16;
 /**
  * Normalize a minute step so option lists stay even (1, 5, 15, 30, 60).
  * Invalid values fall back to 15 so a bad prop cannot empty the minute list.
@@ -81,7 +79,7 @@ export function DateTimePickerButton({ id, value, onChange, timeStep, placeholde
     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(formControlTriggerClassName, "justify-start data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), label] }) }), _jsxs(PopoverContent, { align: "start", side: side, collisionPadding: DATE_TIME_PICKER_COLLISION_PADDING, onInteractOutside: preventDismissForPortaledSelect, className: "w-auto min-w-0 max-w-[min(100vw-2rem,24rem)] max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0", children: [_jsx(Calendar, { mode: "single", selected: date ?? undefined, defaultMonth: defaultMonth ?? date ?? undefined, onSelect: (next) => {
+    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)

package/dist/dialog.js

@@ -21,7 +21,7 @@ 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 }));
 }
 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 sm:max-w-md", 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" })] }) }))] })] }));
+    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 DialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "dialog-header", className: cn("flex flex-col gap-2", className), ...props }));

package/dist/dropdown-menu.js

@@ -7,7 +7,7 @@ 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 min-w-40 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";
+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";
 /** 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 });

package/dist/field.d.ts

@@ -6,7 +6,7 @@ declare function FieldLegend({ className, variant, ...props }: React.ComponentPr
 }): import("react").JSX.Element;
 declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
 declare const fieldVariants: (props?: ({
-    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+    orientation?: "vertical" | "horizontal" | "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/form/date-picker-field.d.ts

@@ -1,5 +1,5 @@
 import { type DateLike } from "../date-picker.js";
-import { type FieldMetaState } from "./field-error.js";
+import type { FieldMetaState } from "./field-error.js";
 type Props = {
     value: DateLike;
     onValueChange: (date: Date | undefined) => void;

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

@@ -1,12 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { DatePickerButton } from "../date-picker.js";
-import { Label } from "../label.js";
-import { FieldError, getFieldErrorMessage, } from "./field-error.js";
+import { FormFieldShell, invalidWhen, metaErrorText } 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, }) {
-    const errorText = meta ? getFieldErrorMessage(meta.errors[0]) : undefined;
+    const errorText = metaErrorText(meta);
     const id = useId();
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(DatePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, className: className, "aria-invalid": errorText ? true : undefined }), _jsx(FieldError, { text: errorText })] }));
+    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) }) }));
 }

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

@@ -1,4 +1,4 @@
-import { type FieldMetaState } from "./field-error.js";
+import type { FieldMetaState } from "./field-error.js";
 type Props = {
     value: Date | null;
     onValueChange: (date: Date | null) => void;

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

@@ -1,12 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { DateTimePickerButton } from "../date-time-picker.js";
-import { Label } from "../label.js";
-import { FieldError, getFieldErrorMessage, } from "./field-error.js";
+import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
 /** Date-time picker with built-in field error text and invalid styling. */
 export function FormDateTimePickerField({ value, onValueChange, label, meta, placeholder, disabled, timeStep, className, }) {
-    const errorText = meta ? getFieldErrorMessage(meta.errors[0]) : undefined;
+    const errorText = metaErrorText(meta);
     const id = useId();
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(DateTimePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, timeStep: timeStep, className: className, "aria-invalid": errorText ? true : undefined }), _jsx(FieldError, { text: errorText })] }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, children: _jsx(DateTimePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, timeStep: timeStep, className: className, "aria-invalid": invalidWhen(errorText) }) }));
 }

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { type FieldMetaState } from "./field-error.js";
+/**
+ * Not a public entry. The layout and error wiring every `form/*` field
+ * shares, so a field only says which control it renders.
+ */
+/** First error in `meta`, or `undefined` when there is no meta or no error. */
+export declare function metaErrorText(meta: FieldMetaState | undefined): string | undefined;
+/** `aria-invalid` for the control: `true` while there is error text. */
+export declare function invalidWhen(errorText: string | undefined): true | undefined;
+/**
+ * Label, control, and error text stacked with the kit's field spacing.
+ * `labelAction` sits on the label's row (the Markdown field's mode toggle).
+ */
+export declare function FormFieldShell({ id, label, labelAction, errorText, children, }: {
+    id: string;
+    label: string;
+    labelAction?: ReactNode;
+    errorText: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/form/field-shell.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from "../label.js";
+import { FieldError, getFieldErrorMessage, } from "./field-error.js";
+/**
+ * Not a public entry. The layout and error wiring every `form/*` field
+ * shares, so a field only says which control it renders.
+ */
+/** First error in `meta`, or `undefined` when there is no meta or no error. */
+export function metaErrorText(meta) {
+    return meta ? getFieldErrorMessage(meta.errors[0]) : undefined;
+}
+/** `aria-invalid` for the control: `true` while there is error text. */
+export function invalidWhen(errorText) {
+    return errorText ? true : undefined;
+}
+/**
+ * Label, control, and error text stacked with the kit's field spacing.
+ * `labelAction` sits on the label's row (the Markdown field's mode toggle).
+ */
+export function FormFieldShell({ id, label, labelAction, errorText, children, }) {
+    const labelNode = _jsx(Label, { htmlFor: id, children: label });
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [labelAction ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [labelNode, labelAction] })) : (labelNode), children, _jsx(FieldError, { text: errorText })] }));
+}

package/dist/form/markdown-field.js

@@ -1,13 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { Label } from "../label.js";
-import { Markdown } from "../markdown.js";
+import { lazy, Suspense, useState } from "react";
+import { Spinner } from "../spinner.js";
 import { Textarea } from "../textarea.js";
 import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
 import { fieldSurface } from "../internal/styles.js";
 import { cn, onInputChange } from "../utils.js";
-import { FieldError, getFieldErrorMessage } from "./field-error.js";
+import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
+// The renderer (react-markdown + remark-gfm) is fetched the first time
+// Preview is shown or hovered, so a form in Write mode stays light.
+const loadMarkdown = () => import("../markdown.js");
+const preloadMarkdown = () => void loadMarkdown();
+const Markdown = lazy(() => loadMarkdown().then((module) => ({ default: module.Markdown })));
 /**
  * GFM body field: Write is a textarea, Preview is the sanitized Markdown
  * renderer. String-in/string-out — not a WYSIWYG document model.
@@ -15,13 +19,11 @@ import { FieldError, getFieldErrorMessage } from "./field-error.js";
 export function FormMarkdownField({ field, id = field.name, label, placeholder = "Markdown supported", rows = 5, showError = true, }) {
     const [mode, setMode] = useState("write");
     const onChange = onInputChange(field.handleChange);
-    const errorText = showError
-        ? getFieldErrorMessage(field.state.meta.errors[0])
-        : undefined;
+    const errorText = showError ? metaErrorText(field.state.meta) : undefined;
     const trimmed = field.state.value.trim();
     function handleModeChange(value) {
         if (value === "write" || value === "preview")
             setMode(value);
     }
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: handleModeChange, variant: "outline", size: "sm", spacing: 0, "aria-label": `${label} mode`, children: [_jsx(ToggleGroupItem, { value: "write", children: "Write" }), _jsx(ToggleGroupItem, { value: "preview", children: "Preview" })] })] }), mode === "write" ? (_jsx(Textarea, { id: id, value: field.state.value, onChange: onChange, onBlur: field.handleBlur, placeholder: placeholder, rows: rows, "aria-invalid": errorText ? true : undefined })) : (_jsx("div", { className: cn(fieldSurface, "min-h-16"), "aria-live": "polite", children: trimmed ? (_jsx(Markdown, { content: trimmed })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to preview" })) })), showError ? _jsx(FieldError, { text: errorText }) : null] }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, labelAction: _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: handleModeChange, variant: "outline", size: "sm", spacing: 0, "aria-label": `${label} mode`, children: [_jsx(ToggleGroupItem, { value: "write", children: "Write" }), _jsx(ToggleGroupItem, { value: "preview", onPointerEnter: preloadMarkdown, onFocus: preloadMarkdown, children: "Preview" })] }), children: mode === "write" ? (_jsx(Textarea, { id: id, value: field.state.value, onChange: onChange, onBlur: field.handleBlur, placeholder: placeholder, rows: rows, "aria-invalid": invalidWhen(errorText) })) : (_jsx("div", { className: cn(fieldSurface, "min-h-16"), "aria-live": "polite", children: trimmed ? (_jsx(Suspense, { fallback: _jsx(Spinner, { "aria-label": "Loading preview" }), children: _jsx(Markdown, { content: trimmed }) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to preview" })) })) }));
 }

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

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { type FieldMetaState } from "./field-error.js";
+import type { FieldMetaState } from "./field-error.js";
 type Props = {
     value: string | undefined;
     meta?: FieldMetaState;

package/dist/form/select-field.js

@@ -1,12 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import { Label } from "../label.js";
 import { Select, SelectContent, SelectTrigger, SelectValue } from "../select.js";
-import { FieldError, getFieldErrorMessage, } from "./field-error.js";
+import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
 /** Select control with built-in field error text and invalid styling. */
 export function FormSelectField({ value, meta, label, onValueChange, placeholder, children, }) {
-    const errorText = meta ? getFieldErrorMessage(meta.errors[0]) : undefined;
+    const errorText = metaErrorText(meta);
     const id = useId();
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(Select, { value: value, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { id: id, "aria-invalid": errorText ? true : undefined, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: children })] }), _jsx(FieldError, { text: errorText })] }));
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, children: _jsxs(Select, { value: value, onValueChange: onValueChange, children: [_jsx(SelectTrigger, { id: id, "aria-invalid": invalidWhen(errorText), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: children })] }) }));
 }

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

@@ -1,4 +1,4 @@
-import { type FieldMetaState } from "./field-error.js";
+import type { FieldMetaState } from "./field-error.js";
 export type TextFieldApi = {
     name: string;
     state: {

package/dist/form/text-field.js

@@ -1,15 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "../input.js";
-import { Label } from "../label.js";
 import { Textarea } from "../textarea.js";
 import { onInputChange } from "../utils.js";
-import { FieldError, getFieldErrorMessage, } from "./field-error.js";
+import { FormFieldShell, invalidWhen, metaErrorText } from "./field-shell.js";
 export function FormTextField({ field, id = field.name, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError = true, autoComplete, required, minLength, }) {
     const onChange = onInputChange(field.handleChange);
-    const errorText = showError
-        ? getFieldErrorMessage(field.state.meta.errors[0])
-        : undefined;
+    const errorText = showError ? metaErrorText(field.state.meta) : undefined;
     const controlProps = {
         id,
         value: field.state.value,
@@ -19,7 +16,7 @@ export function FormTextField({ field, id = field.name, label, placeholder, desc
         autoComplete,
         required,
         minLength,
-        "aria-invalid": errorText ? true : undefined,
+        "aria-invalid": invalidWhen(errorText),
     };
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: description })) : null, multiline ? (_jsx(Textarea, { ...controlProps, rows: rows })) : (_jsx(Input, { ...controlProps, type: inputType, autoFocus: autoFocus })), showError ? _jsx(FieldError, { text: errorText }) : null] }));
+    return (_jsxs(FormFieldShell, { id: id, label: label, errorText: errorText, children: [description ? (_jsx("p", { className: "text-xs text-muted-foreground", children: description })) : null, multiline ? (_jsx(Textarea, { ...controlProps, rows: rows })) : (_jsx(Input, { ...controlProps, type: inputType, autoFocus: autoFocus }))] }));
 }

package/dist/info-tip.d.ts

@@ -14,14 +14,17 @@ export type InfoTipProps = {
     align?: React.ComponentProps<typeof PopoverContent>["align"];
     badge?: React.ReactNode;
     icon?: React.ReactNode;
+    /** Classes for the trigger button. */
     className?: string;
+    /** Classes for the panel, e.g. its width. Defaults to `w-72`. */
+    contentClassName?: string;
 };
 /**
  * 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
  * toggle it. Not a glossary or "coming soon" chip — pass that copy in.
  */
-declare function InfoTip({ label, title, description, children, layout, side, align, badge, icon, className, }: InfoTipProps): React.JSX.Element;
+declare function InfoTip({ label, title, description, children, layout, side, align, badge, icon, className, contentClassName, }: InfoTipProps): React.JSX.Element;
 /** InfoTip that sits in a line of text without stretching the line box. */
 declare function InlineTip(props: Omit<InfoTipProps, "layout">): React.JSX.Element;
 export { InfoTip, InlineTip };

package/dist/info-tip.js

@@ -17,7 +17,7 @@ function canHoverOpen() {
  * area. Hover opens only on a fine pointer; click, tap, and keyboard always
  * toggle it. Not a glossary or "coming soon" chip — pass that copy in.
  */
-function InfoTip({ label, title, description, children, layout = "box", side = "top", align = "center", badge, icon, className, }) {
+function InfoTip({ label, title, description, children, layout = "box", side = "top", align = "center", badge, icon, className, contentClassName, }) {
     const [open, setOpen] = React.useState(false);
     const closeTimer = React.useRef(null);
     const hoverOpened = React.useRef(false);
@@ -55,7 +55,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
             setOpen(next);
         }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { 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
                         ? "size-5 align-middle after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2"
-                        : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: icon ?? (_jsx(CircleHelpIcon, { className: "size-5", "data-icon": "info-tip", "aria-hidden": true })) }) }), _jsxs(PopoverContent, { side: side, align: align, className: "w-72", onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: [_jsxs(PopoverHeader, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [title ? _jsx(PopoverTitle, { children: title }) : null, badge] }), description ? (_jsx(PopoverDescription, { children: description })) : null] }), children] })] }));
+                        : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: icon ?? (_jsx(CircleHelpIcon, { className: "size-5", "data-icon": "info-tip", "aria-hidden": true })) }) }), _jsxs(PopoverContent, { side: side, align: align, className: cn("w-72", contentClassName), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: [_jsxs(PopoverHeader, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [title ? _jsx(PopoverTitle, { children: title }) : null, badge] }), description ? (_jsx(PopoverDescription, { children: description })) : null] }), children] })] }));
 }
 /** InfoTip that sits in a line of text without stretching the line box. */
 function InlineTip(props) {

package/dist/internal/form-control.d.ts

@@ -7,3 +7,12 @@
  * outline Button's purple selected wash.
  */
 export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
+/**
+ * Date and date-time picker trigger: the form-control chrome, start-aligned,
+ * with muted text while empty (`data-empty`).
+ */
+export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background justify-start data-[empty=true]:text-muted-foreground";
+/** Calendar popover body: fits the viewport height and scrolls inside it. */
+export declare const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
+/** Gutter used when a calendar popover collides with the viewport. */
+export declare const PICKER_COLLISION_PADDING = 16;

package/dist/internal/form-control.js

@@ -7,3 +7,12 @@
  * outline Button's purple selected wash.
  */
 export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
+/**
+ * Date and date-time picker trigger: the form-control chrome, start-aligned,
+ * with muted text while empty (`data-empty`).
+ */
+export const pickerTriggerClassName = `${formControlTriggerClassName} justify-start data-[empty=true]:text-muted-foreground`;
+/** Calendar popover body: fits the viewport height and scrolls inside it. */
+export const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
+/** Gutter used when a calendar popover collides with the viewport. */
+export const PICKER_COLLISION_PADDING = 16;

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

@@ -1,2 +1,14 @@
 /** 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.
+ */
+export declare function listboxOptionId(listId: string, index: number): string;
+/**
+ * Callback ref for the highlighted option. It runs when the option mounts
+ * (including when a popover first renders the list) and when the highlight
+ * moves, keeping the option in view inside the overflow list. Module-level,
+ * so the ref is stable without `useCallback`.
+ */
+export declare function scrollOptionIntoView(node: HTMLElement | null): void;

package/dist/internal/listbox-navigation.js

@@ -19,3 +19,19 @@ export function moveListboxHighlight(key, index, length) {
             return undefined;
     }
 }
+/**
+ * Option id for `aria-activedescendant`. Index-based because option values
+ * may contain spaces, which are not valid in an id reference.
+ */
+export function listboxOptionId(listId, index) {
+    return `${listId}-option-${index}`;
+}
+/**
+ * Callback ref for the highlighted option. It runs when the option mounts
+ * (including when a popover first renders the list) and when the highlight
+ * moves, keeping the option in view inside the overflow list. Module-level,
+ * so the ref is stable without `useCallback`.
+ */
+export function scrollOptionIntoView(node) {
+    node?.scrollIntoView({ block: "nearest" });
+}

package/dist/internal/styles.d.ts

@@ -37,6 +37,8 @@ export declare const selectedState: {
     /** Quiet buttons and toggles on hover. */
     hover: string;
 };
+/** The "No results" row of a listbox. */
+export declare const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
 /** Options in menus and listboxes. */
 export declare const optionState: {
     /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */

package/dist/internal/styles.js

@@ -37,6 +37,8 @@ export const selectedState = {
     /** Quiet buttons and toggles on hover. */
     hover: "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground",
 };
+/** The "No results" row of a listbox. */
+export const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
 /** Options in menus and listboxes. */
 export const optionState = {
     /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */

package/dist/lazy-calendar.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+/** Start fetching the calendar early, e.g. when the trigger is hovered. */
+export declare function preloadCalendar(): void;
+declare const LazyCalendarInner: React.LazyExoticComponent<typeof import("./calendar.js").Calendar>;
+export declare function LazyCalendar(props: React.ComponentProps<typeof LazyCalendarInner>): React.JSX.Element;
+export {};

package/dist/lazy-calendar.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Spinner } from "./spinner.js";
+/**
+ * Calendar for the picker popovers, fetched on first use so a page that only
+ * shows the trigger does not download Day Picker. Not a public entry: apps
+ * that want an inline calendar import `atlas-react-kit/calendar`.
+ */
+const loadCalendar = () => import("./calendar.js");
+/** Start fetching the calendar early, e.g. when the trigger is hovered. */
+export function preloadCalendar() {
+    void loadCalendar();
+}
+const LazyCalendarInner = React.lazy(() => loadCalendar().then((module) => ({ default: module.Calendar })));
+export function LazyCalendar(props) {
+    return (_jsx(React.Suspense, { fallback: _jsx("div", { className: "flex h-72 w-64 items-center justify-center", children: _jsx(Spinner, { "aria-label": "Loading calendar" }) }), children: _jsx(LazyCalendarInner, { ...props }) }));
+}

package/dist/popover.js

@@ -10,7 +10,7 @@ function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({ className, align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn("z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden 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-[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 }) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn("z-50 flex max-w-(--radix-popover-content-available-width) origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-none bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden 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-[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 }) }));
 }
 function PopoverAnchor({ ...props }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });

package/dist/search-picker.d.ts

@@ -20,11 +20,13 @@ export type SearchPickerProps<T> = {
     listLabel?: string;
     disabled?: boolean;
     className?: string;
+    /** Classes for the listbox, e.g. its height. Defaults to `max-h-60`. */
+    listClassName?: string;
 };
 /**
  * Always-visible combobox: a labelled input and a listbox. Unlike Combobox,
  * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
  * Enter, Escape.
  */
-declare function SearchPicker<T>({ items, getValue, getLabel, filter, value, onSelect, label, placeholder, emptyText, listLabel, disabled, className, }: SearchPickerProps<T>): React.JSX.Element;
+declare function SearchPicker<T>({ items, getValue, getLabel, filter, value, onSelect, label, placeholder, emptyText, listLabel, disabled, className, listClassName, }: SearchPickerProps<T>): React.JSX.Element;
 export { SearchPicker };

package/dist/search-picker.js

@@ -3,8 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
-import { moveListboxHighlight } from "./internal/listbox-navigation.js";
-import { optionState } from "./internal/styles.js";
+import { listboxOptionId, moveListboxHighlight, scrollOptionIntoView, } from "./internal/listbox-navigation.js";
+import { listboxEmpty, optionState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Case-fold and strip combining marks so "nino" matches "Niño".
@@ -26,7 +26,7 @@ export function defaultSearchFilter(item, query, getLabel) {
  * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
  * Enter, Escape.
  */
-function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText = "No results", listLabel, disabled, className, }) {
+function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText = "No results", listLabel, disabled, className, listClassName, }) {
     const [query, setQuery] = React.useState("");
     const listId = React.useId();
     const inputId = React.useId();
@@ -49,14 +49,19 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         return index >= 0 ? index : 0;
     }, [filtered, getValue, value]);
     const [highlight, setHighlight] = React.useState(selectedIndex);
-    React.useEffect(() => {
+    // Reset the highlight while rendering, not in an effect, when the query or
+    // the selected row changes: an effect commits every keystroke twice, once
+    // with the stale highlight and again with the reset.
+    const [highlightFor, setHighlightFor] = React.useState({
+        query,
+        selectedIndex,
+    });
+    if (highlightFor.query !== query ||
+        highlightFor.selectedIndex !== selectedIndex) {
+        setHighlightFor({ query, selectedIndex });
         setHighlight(query ? 0 : selectedIndex);
-    }, [query, selectedIndex]);
-    const optionId = (index) => `${listId}-option-${index}`;
+    }
     const active = filtered[highlight];
-    const scrollHighlightedOption = React.useCallback((node) => {
-        node?.scrollIntoView({ block: "nearest" });
-    }, []);
     const selectItem = (item) => {
         onSelect(item);
         setQuery("");
@@ -82,11 +87,11 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
             event.currentTarget.blur();
         }
     };
-    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? optionId(highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: "max-h-60 overflow-y-auto border border-input bg-background", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (filtered.map((item, index) => {
+    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: cn("max-h-60 overflow-y-auto border border-input bg-background", listClassName), children: filtered.length === 0 ? (_jsx("li", { className: listboxEmpty, children: emptyText })) : (filtered.map((item, index) => {
                     const itemValue = getValue(item);
                     const isSelected = itemValue === value;
                     const isActive = index === highlight;
-                    return (_jsx("li", { role: "none", children: _jsx("button", { ref: isActive ? scrollHighlightedOption : undefined, id: optionId(index), type: "button", role: "option", "aria-selected": isSelected, disabled: disabled, className: cn("relative flex w-full cursor-default items-center rounded-none py-2 pr-3 pl-3 text-left text-sm outline-hidden select-none", isSelected && optionState.selected, isActive && optionState.active, isActive &&
+                    return (_jsx("li", { role: "none", children: _jsx("button", { ref: isActive ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", "aria-selected": isSelected, disabled: disabled, className: cn("relative flex w-full cursor-default items-center rounded-none py-2 pr-3 pl-3 text-left text-sm outline-hidden select-none", isSelected && optionState.selected, isActive && optionState.active, isActive &&
                                 !isSelected &&
                                 "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectItem(item), children: _jsx("span", { className: "truncate", children: getLabel(item) }) }) }, itemValue));
                 })) })] }));

package/dist/select.js

@@ -5,6 +5,7 @@ import { Select as SelectPrimitive } from "radix-ui";
 import { dataDisabledState, disabledState, fieldSurface, focusRing, invalidState, optionState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
+const scrollButtonClassName = "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5";
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -19,7 +20,7 @@ function SelectTrigger({ className, size = "default", children, ...props }) {
 }
 function SelectContent({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none 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", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: cn("data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", position === "popper" && ""), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase", className), ...props }));
@@ -31,9 +32,9 @@ function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1.5 my-1.5 h-px bg-border/50", className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5", className), ...props, children: _jsx(ChevronUpIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn(scrollButtonClassName, className), ...props, children: _jsx(ChevronUpIcon, {}) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5", className), ...props, children: _jsx(ChevronDownIcon, {}) }));
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn(scrollButtonClassName, className), ...props, children: _jsx(ChevronDownIcon, {}) }));
 }
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/table-body-skeleton.js

@@ -3,5 +3,5 @@ import { Skeleton } from "./skeleton.js";
 import { TableBody, TableCell, TableRow } from "./table.js";
 /** Skeleton table body rows for client query loading states. */
 export function TableBodySkeleton({ columns, rows = 5 }) {
-    return (_jsx(TableBody, { children: Array.from({ length: rows }, (_, row) => (_jsx(TableRow, { children: Array.from({ length: columns }, (_, col) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-full max-w-[12rem]" }) }, col))) }, row))) }));
+    return (_jsx(TableBody, { children: Array.from({ length: rows }, (_, row) => (_jsx(TableRow, { children: Array.from({ length: columns }, (_, col) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-full" }) }, col))) }, row))) }));
 }

package/dist/tabs.js

@@ -60,6 +60,6 @@ function TabsContent({ className, ...props }) {
  * `overflow-x-auto`.
  */
 function TabsNav({ className, children, ...props }) {
-    return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs min-w-0 w-full max-w-full", className), ...props, children: _jsx(TabsScroller, { children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: cn(tabsListVariants(), "bg-transparent"), children: children }) }) }));
+    return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs min-w-0 max-w-full", className), ...props, children: _jsx(TabsScroller, { children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: cn(tabsListVariants(), "bg-transparent"), children: children }) }) }));
 }
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",