atlas-react-kit 0.4.1 → 0.6.0

package/dist/badge.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "./utils.js";
-const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold tracking-widest whitespace-nowrap uppercase transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold tracking-widest whitespace-nowrap uppercase transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
     variants: {
         variant: {
             default: "text-foreground [a]:hover:text-foreground/70",

package/dist/breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * Where the current page sits in a hierarchy. The last item is
+ * `BreadcrumbPage` (plain text with `aria-current="page"`), not a link.
+ */
+declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): React.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+/** Pass `asChild` to render a router link (e.g. Next `Link`) with these styles. */
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/breadcrumb.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
+import { cn } from "./utils.js";
+/**
+ * Where the current page sits in a hierarchy. The last item is
+ * `BreadcrumbPage` (plain text with `aria-current="page"`), not a link.
+ */
+function Breadcrumb({ ...props }) {
+    return _jsx("nav", { "aria-label": "Breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2", className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn("inline-flex items-center gap-1.5", className), ...props }));
+}
+/** Pass `asChild` to render a router link (e.g. Next `Link`) with these styles. */
+function BreadcrumbLink({ asChild, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn("transition-colors outline-none hover:text-selected-foreground focus-visible:text-selected-foreground focus-visible:underline focus-visible:underline-offset-4", className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("font-medium text-foreground", className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-6 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+}
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };

package/dist/button.d.ts

@@ -1,14 +1,15 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 /**
- * Outline and ghost hover/focus: brand purple border and text, optional
- * selected wash, no muted grey fill. Used by quiet actions such as
+ * Outline and ghost hover/focus: selected-foreground border, selected wash, and
+ * `selected-foreground` text (primary in light mode, a lighter purple that
+ * stays readable on dark), no muted grey fill. Used by quiet actions such as
  * "Clear selection" sitting on a selected row.
  */
-declare const quietButtonInteraction = "hover:border-primary hover:bg-selected hover:text-primary focus-visible:border-primary focus-visible:text-primary focus-visible:ring-primary/30 aria-expanded:border-primary aria-expanded:bg-selected aria-expanded:text-primary";
+declare const quietButtonInteraction = "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground focus-visible:text-selected-foreground aria-expanded:border-selected-foreground aria-expanded:bg-selected aria-expanded:text-selected-foreground";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "default" | "link" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/button.js

@@ -4,20 +4,21 @@ import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "./utils.js";
 /**
- * Outline and ghost hover/focus: brand purple border and text, optional
- * selected wash, no muted grey fill. Used by quiet actions such as
+ * Outline and ghost hover/focus: selected-foreground border, selected wash, and
+ * `selected-foreground` text (primary in light mode, a lighter purple that
+ * stays readable on dark), no muted grey fill. Used by quiet actions such as
  * "Clear selection" sitting on a selected row.
  */
-const quietButtonInteraction = "hover:border-primary hover:bg-selected hover:text-primary focus-visible:border-primary focus-visible:text-primary focus-visible:ring-primary/30 aria-expanded:border-primary aria-expanded:bg-selected aria-expanded:text-primary";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
+const quietButtonInteraction = "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground focus-visible:text-selected-foreground aria-expanded:border-selected-foreground aria-expanded:bg-selected aria-expanded:text-selected-foreground";
+const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/80",
             outline: `border-border bg-transparent ${quietButtonInteraction}`,
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
             ghost: quietButtonInteraction,
-            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
-            link: "text-primary underline underline-offset-4 hover:underline",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/20 dark:hover:bg-destructive/30",
+            link: "text-selected-foreground underline underline-offset-4 hover:underline",
         },
         size: {
             default: "h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",

package/dist/calendar.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { DayPicker, type DayButton, type Locale } from "react-day-picker";
 import { Button } from "./button.js";
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, labels, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): React.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {

package/dist/calendar.js

@@ -5,11 +5,29 @@ import { DayPicker, getDefaultClassNames, } from "react-day-picker";
 import { cn } from "./utils.js";
 import { Button, buttonVariants } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, } from "lucide-react";
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, labels, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-3 [--cell-radius:0] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
             formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
             ...formatters,
+        }, labels: {
+            // Day numbers without ordinals ("September 27", not "27th") so the
+            // accessible name contains the visible "27" (WCAG 2.5.3 Label in
+            // Name); speech users can then say "click 27".
+            labelDayButton: (date, modifiers) => {
+                let label = date.toLocaleDateString(locale?.code, {
+                    weekday: "long",
+                    year: "numeric",
+                    month: "long",
+                    day: "numeric",
+                });
+                if (modifiers.today)
+                    label = `Today, ${label}`;
+                if (modifiers.selected)
+                    label = `${label}, selected`;
+                return label;
+            },
+            ...labels,
         }, classNames: {
             root: cn("w-fit", defaultClassNames.root),
             months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
@@ -71,6 +89,6 @@ function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
     return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-selected data-[range-middle=true]:text-selected-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-2 group-data-[focused=true]/day:ring-ring data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-selected data-[range-middle=true]:text-selected-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
 }
 export { Calendar, CalendarDayButton };

package/dist/checkbox.js

@@ -5,6 +5,6 @@ import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { cn } from "./utils.js";
 import { CheckIcon } from "lucide-react";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
 }
 export { Checkbox };

package/dist/color-legend.d.ts

@@ -0,0 +1,22 @@
+import type * as React from "react";
+export type ColorLegendItem = {
+    /** CSS color from the app (map bins, status scales). The kit does not own it. */
+    color: string;
+    range?: string;
+    label: string;
+};
+export type ColorLegendProps = {
+    title?: string;
+    items: ColorLegendItem[];
+    caption?: React.ReactNode;
+    children?: React.ReactNode;
+    "aria-label"?: string;
+    className?: string;
+};
+/**
+ * Key for a color scale: swatch, optional range, and label. Overlay chrome
+ * (absolute position, card fill) is the caller's `className`. Attribution
+ * and license lines stay in the app.
+ */
+declare function ColorLegend({ title, items, caption, children, "aria-label": ariaLabel, className, }: ColorLegendProps): React.JSX.Element;
+export { ColorLegend };

package/dist/color-legend.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/**
+ * Key for a color scale: swatch, optional range, and label. Overlay chrome
+ * (absolute position, card fill) is the caller's `className`. Attribution
+ * and license lines stay in the app.
+ */
+function ColorLegend({ title, items, caption, children, "aria-label": ariaLabel, className, }) {
+    return (_jsxs("figure", { "data-slot": "color-legend", "aria-label": ariaLabel, className: cn("flex flex-col gap-2 text-sm", className), children: [title ? (_jsx("figcaption", { className: "font-heading text-xs font-semibold tracking-widest text-muted-foreground uppercase", children: title })) : null, _jsx("ul", { className: "flex flex-col gap-1.5", children: items.map((item) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 shrink-0 border border-input", style: { backgroundColor: item.color } }), item.range ? (_jsx("span", { className: "w-16 shrink-0 tabular-nums text-muted-foreground", children: item.range })) : null, _jsx("span", { children: item.label })] }, `${item.color}-${item.range ?? ""}-${item.label}`))) }), caption ? (_jsx("p", { className: "text-xs text-muted-foreground", children: caption })) : null, children] }));
+}
+export { ColorLegend };

package/dist/combobox.d.ts

@@ -14,6 +14,9 @@ type ComboboxProps = {
     id?: string;
     className?: string;
     "aria-invalid"?: boolean;
+    /** Name the trigger when there is no `<Label htmlFor={id}>`. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
 };
 /**
  * Searchable single-select built from Button, Popover, and Input.
@@ -22,5 +25,5 @@ type ComboboxProps = {
  * Keyboard highlight (arrows, Home/End, PageUp/PageDown) scrolls the active
  * option into view inside the overflow list.
  */
-export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, "aria-invalid": ariaInvalid, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: ComboboxProps): React.JSX.Element;
 export {};

package/dist/combobox.js

@@ -20,7 +20,7 @@ const LISTBOX_PAGE_SIZE = 10;
  * Keyboard highlight (arrows, Home/End, PageUp/PageDown) scrolls the active
  * option into view inside the overflow list.
  */
-export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText = "No results", disabled, id, className, "aria-invalid": ariaInvalid, }) {
+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, }) {
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
     const [highlight, setHighlight] = React.useState(0);
@@ -61,10 +61,17 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
         setQuery(next);
         setHighlight(0);
     });
+    // Closing from here does not go through Radix's onOpenChange, so clear the
+    // query too. A stale query would filter the next open while the highlight
+    // is computed against the full list, and Enter would pick the wrong option.
     const selectValue = (next) => {
         onValueChange(next);
         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 = filtered[highlight];
     const onSearchKeyDown = (event) => {
         if (event.key === "ArrowDown") {
@@ -102,11 +109,10 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             setHighlight((index) => Math.max(index - LISTBOX_PAGE_SIZE, 0));
         }
     };
-    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, 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
-                                ? `${listId}-option-${activeOption.value}`
-                                : undefined }) }), _jsx("ul", { id: listId, role: "listbox", className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (filtered.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 ? optionId(highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (filtered.map((option, index) => {
                             const isSelected = option.value === value;
                             const isActive = index === highlight;
-                            return (_jsx("li", { role: "none", children: _jsxs("button", { ref: isActive ? scrollHighlightedOption : undefined, id: `${listId}-option-${option.value}`, 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 && "bg-selected text-selected-foreground", isActive && "bg-accent text-accent-foreground"), 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] }) }, option.value));
+                            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 && "bg-selected text-selected-foreground", isActive &&
+                                        "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--color-ring)]"), 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] }) }, option.value));
                         })) })] })] }));
 }

package/dist/date-picker.js

@@ -77,11 +77,22 @@ function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date
     const from = toDate(value?.from);
     const to = toDate(value?.to);
     const selected = from || to ? { from, to } : undefined;
-    return (_jsxs(DatePickerShell, { id: id, disabled: disabled, ariaInvalid: ariaInvalid, className: className, empty: !from, label: formatRangeTriggerLabel(from, to, placeholder), open: open, onOpenChange: setOpen, side: side, children: [_jsx(Calendar, { mode: "range", selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: months, onSelect: (next) => {
-                    onChange(next);
+    // Opening on a complete range means the next click starts a new one.
+    // Without this, Day Picker extends the old range and the popover closes
+    // on that first click, so a fresh range needs Clear first.
+    const restartRef = React.useRef(false);
+    const onOpenChange = (next) => {
+        if (next)
+            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) => {
+                    const range = restartRef.current ? { from: day, to: day } : next;
+                    restartRef.current = false;
+                    onChange(range);
                     // First click is a same-day range; keep the popover open so the
                     // user can set `to`. Close once the ends differ.
-                    if (next?.from && next.to && !isSameDay(next.from, next.to)) {
+                    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: () => {

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

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { PopoverContent } from "./popover.js";
+/** Default clock increment, in minutes. Must divide 60. */
+export declare const DEFAULT_TIME_STEP = 15;
+export type DateTimePickerButtonProps = {
+    /** Controlled instant. `null` or omitted is empty. */
+    value?: Date | null;
+    onChange: (date: Date | null) => void;
+    /**
+     * Minute increment for the time selects (1, 5, 15, 30, or 60).
+     * 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).
+ * Invalid values fall back to 15 so a bad prop cannot empty the minute list.
+ */
+export declare function resolveTimeStep(step: number | undefined): number;
+/**
+ * Calendar plus hour/minute popover trigger styled as a form control (same
+ * 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.
+ */
+export declare function DateTimePickerButton({ id, value, onChange, timeStep, placeholder, disabled, className, "aria-invalid": ariaInvalid, side, defaultMonth, }: DateTimePickerButtonProps): React.JSX.Element;

package/dist/date-time-picker.js

@@ -0,0 +1,105 @@
+"use client";
+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 { Calendar } from "./calendar.js";
+import { formControlTriggerClassName } from "./internal/form-control.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.
+ */
+export function resolveTimeStep(step) {
+    if (step == null)
+        return DEFAULT_TIME_STEP;
+    if (!Number.isInteger(step) || step <= 0 || step > 60 || 60 % step !== 0) {
+        return DEFAULT_TIME_STEP;
+    }
+    return step;
+}
+/** Two-digit clock fragment (`00`–`23` / `00`–`59`). */
+function padTimePart(value) {
+    return String(value).padStart(2, "0");
+}
+/**
+ * Build a local Date from a calendar day and a clock time.
+ * Seconds and milliseconds stay zero so a stepped minute remains exact.
+ */
+function combineDateAndTime(day, hours, minutes) {
+    const next = new Date(day);
+    next.setHours(hours, minutes, 0, 0);
+    return next;
+}
+/**
+ * Minute options for `timeStep`, plus the current minute when it is off-step
+ * so a loaded value such as 14:07 still appears in the select.
+ */
+function minuteOptions(step, current) {
+    const minutes = [];
+    for (let minute = 0; minute < 60; minute += step) {
+        minutes.push(minute);
+    }
+    if (current != null && !minutes.includes(current)) {
+        minutes.push(current);
+        minutes.sort((a, b) => a - b);
+    }
+    return minutes;
+}
+const HOUR_OPTIONS = Array.from({ length: 24 }, (_, hour) => padTimePart(hour));
+/**
+ * Keep the date-time popover open when a portaled Select option is clicked.
+ * Select content renders outside the popover, so Radix would otherwise treat
+ * that pointer down as an outside dismiss.
+ */
+function preventDismissForPortaledSelect(event) {
+    const target = event.target;
+    if (target instanceof Element &&
+        target.closest("[data-slot=select-content]")) {
+        event.preventDefault();
+    }
+}
+/**
+ * Calendar plus hour/minute popover trigger styled as a form control (same
+ * chrome as Input, SelectTrigger, and DatePickerButton). `value` is a `Date`
+ * 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.
+ */
+export function DateTimePickerButton({ id, value, onChange, timeStep, placeholder = "Pick a date and time", disabled, className, "aria-invalid": ariaInvalid, side, defaultMonth, }) {
+    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(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) => {
+                            // 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" }) })] })] }));
+}

package/dist/dropdown-menu.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+/** Action menu for commands (row actions, overflow menus). Use `Select` to pick a value. */
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, collisionPadding, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/dropdown-menu.js

@@ -0,0 +1,56 @@
+"use client";
+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 { cn } from "./utils.js";
+/** Item highlight and selected chrome shared with `SelectItem`. */
+const menuItemClassName = "relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)] data-disabled:pointer-events-none data-disabled:opacity-50 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";
+/** 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 });
+}
+function DropdownMenuPortal({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props }));
+}
+function DropdownMenuTrigger({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
+}
+function DropdownMenuContent({ className, align = "start", sideOffset = 4, collisionPadding = 8, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(menuContentClassName, "max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin)", className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset || undefined, "data-variant": variant, className: cn(menuItemClassName, "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive", className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn(menuItemClassName, "pl-9", className), checked: checked, ...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(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (_jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+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 }));
+}
+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 }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset || undefined, className: cn(menuItemClassName, "data-open:bg-accent data-open:text-accent-foreground", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn(menuContentClassName, "origin-(--radix-dropdown-menu-content-transform-origin)", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/error-boundary.d.ts

@@ -29,6 +29,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     componentDidCatch(error: Error, info: ErrorInfo): void;
     retry: () => void;
     reload: () => void;
-    render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
 }
 export {};

package/dist/field.js

@@ -39,7 +39,7 @@ function FieldTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-xs font-semibold uppercase group-data-[disabled=true]/field:opacity-50 in-data-[slot=field-label]:font-semibold", className), ...props }));
 }
 function FieldDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+    return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-selected-foreground", className), ...props }));
 }
 function FieldSeparator({ children, className, ...props }) {
     return (_jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [_jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && (_jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));

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

@@ -0,0 +1,16 @@
+import { type FieldMetaState } from "./field-error.js";
+type Props = {
+    value: Date | null;
+    onValueChange: (date: Date | null) => void;
+    label: string;
+    meta?: FieldMetaState;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Minute increment forwarded to the picker. */
+    timeStep?: number;
+    /** Forwarded to the date-time picker trigger. */
+    className?: string;
+};
+/** Date-time picker with built-in field error text and invalid styling. */
+export declare function FormDateTimePickerField({ value, onValueChange, label, meta, placeholder, disabled, timeStep, className, }: Props): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } 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";
+/** 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 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 })] }));
+}