atlas-react-kit 0.2.1 → 0.3.0

package/COMPONENTS.md

@@ -5,39 +5,39 @@ underlying element or Radix props, including `className`, alongside their option
 Form helpers and `TableBodySkeleton` accept only their documented props. There is
 no root component barrel.
 
-| Subpath                      | Main exports and options                                                                                                           |
-| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `button`                     | `Button`, `buttonVariants`; `variant`, `size`, `asChild`                                                                           |
-| `badge`                      | `Badge`, `badgeVariants`; `variant`, `tone`, `asChild`                                                                             |
-| `calendar`                   | `Calendar`, `CalendarDayButton`; React Day Picker props and `buttonVariant`                                                        |
-| `card`                       | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`; `Card` supports `flush`           |
-| `checkbox`                   | `Checkbox`                                                                                                                         |
-| `combobox`                   | `Combobox`; `options` as `{ value, label }[]`, `value`, `onValueChange`; optional placeholder, search, empty text                  |
-| `date-picker`                | `DatePickerButton`, `toDate`, `formatLocalDate`; `value` is `Date` or `yyyy-MM-dd`                                                 |
-| `dialog`                     | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton` |
-| `empty-panel`                | `EmptyPanel`; required `children`; optional `size`, `muted`, `className`                                                           |
-| `error-boundary`             | `ErrorBoundary`, `ErrorFallback`; optional `message`; retry resets, reload refreshes the page                                      |
-| `field`                      | Field, label, legend, description, group, set, title, content, separator, error; `Field` supports `orientation`                    |
-| `input`, `textarea`, `label` | `Input`, `Textarea`, `Label`                                                                                                       |
-| `popover`                    | `Popover`, trigger, anchor, content, header, title, description                                                                    |
-| `select`                     | Select, trigger, value, content, group, label, item, separator, scroll buttons; trigger `size`                                     |
-| `separator`, `skeleton`      | `Separator`, `Skeleton`                                                                                                            |
-| `sortable-table-head`        | `SortableTableHead`; `sorted`, `direction` (`asc` \| `desc`), `onClick`; sets `aria-sort`                                          |
-| `sonner`                     | `Toaster`; Sonner props, with `next-themes` theme defaults                                                                         |
-| `table`                      | Table, header, body, footer, row, head, cell, caption                                                                              |
-| `table-body-skeleton`        | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                        |
-| `tabs`                       | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`; list `variant` is `default` or `line`             |
-| `toggle`                     | `Toggle`, `toggleVariants`; `variant`, `size`                                                                                      |
-| `toggle-group`               | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`                                                                                |
-| `theme-provider`             | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                    |
-| `form/text-field`            | `FormTextField`, type `TextFieldApi`; controlled field, label, multiline, description, input constraints                           |
-| `form/select-field`          | `FormSelectField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder; select item children                        |
-| `form/date-picker-field`     | `FormDatePickerField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder                                          |
-| `form/field-error`           | `FieldError`, `getFieldErrorMessage`; types `FieldErrorMessage`, `FieldMetaState`                                                  |
-| `form/feedback-field`        | `FormFeedbackField`; nullable `message`                                                                                            |
-| `next/tabs-nav-link`         | `TabsNavLink`; Next Link props and required `active` boolean; requires Next.js 16                                                  |
-| `utils`                      | `cn`, `onInputChange`                                                                                                              |
-| `theme.css`                  | Tailwind 4 theme; installation in [README](./README.md)                                                                            |
+| Subpath                      | Main exports and options                                                                                                                                                                                                       |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `button`                     | `Button`, `buttonVariants`; `variant`, `size`, `asChild`                                                                                                                                                                       |
+| `badge`                      | `Badge`, `badgeVariants`; `variant`, `tone`, `asChild`                                                                                                                                                                         |
+| `calendar`                   | `Calendar`, `CalendarDayButton`; React Day Picker props and `buttonVariant`                                                                                                                                                    |
+| `card`                       | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`; `Card` supports `flush`                                                                                                       |
+| `checkbox`                   | `Checkbox`                                                                                                                                                                                                                     |
+| `combobox`                   | `Combobox`; `options` as `{ value, label }[]`, `value`, `onValueChange`; optional placeholder, search, empty text; keyboard highlight scrolls into view                                                                        |
+| `date-picker`                | `DatePickerButton`, `toDate`, `formatLocalDate`, `DateRange`; `mode` `"single"` (default) or `"range"`; single `value` is `Date` or `yyyy-MM-dd`; range `value` is `{ from, to }`; optional `numberOfMonths` (range default 2) |
+| `dialog`                     | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton`                                                                                             |
+| `empty-panel`                | `EmptyPanel`; required `children`; optional `size`, `muted`, `className`                                                                                                                                                       |
+| `error-boundary`             | `ErrorBoundary`, `ErrorFallback`; optional `message`; retry resets, reload refreshes the page                                                                                                                                  |
+| `field`                      | Field, label, legend, description, group, set, title, content, separator, error; `Field` supports `orientation`                                                                                                                |
+| `input`, `textarea`, `label` | `Input`, `Textarea`, `Label`                                                                                                                                                                                                   |
+| `popover`                    | `Popover`, trigger, anchor, content, header, title, description                                                                                                                                                                |
+| `select`                     | Select, trigger, value, content, group, label, item, separator, scroll buttons; trigger `size`                                                                                                                                 |
+| `separator`, `skeleton`      | `Separator`, `Skeleton`                                                                                                                                                                                                        |
+| `sortable-table-head`        | `SortableTableHead`; `sorted`, `direction` (`asc` \| `desc`), `onClick`; sets `aria-sort`                                                                                                                                      |
+| `sonner`                     | `Toaster`; Sonner props, with `next-themes` theme defaults                                                                                                                                                                     |
+| `table`                      | Table, header, body, footer, row, head, cell, caption                                                                                                                                                                          |
+| `table-body-skeleton`        | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                                                                                                                    |
+| `tabs`                       | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`; list `variant` is `default` or `line`                                                                                                         |
+| `toggle`                     | `Toggle`, `toggleVariants`; `variant`, `size`                                                                                                                                                                                  |
+| `toggle-group`               | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`                                                                                                                                                                            |
+| `theme-provider`             | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                                                                                                                |
+| `form/text-field`            | `FormTextField`, type `TextFieldApi`; controlled field, label, multiline, description, input constraints                                                                                                                       |
+| `form/select-field`          | `FormSelectField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder; select item children                                                                                                                    |
+| `form/date-picker-field`     | `FormDatePickerField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder                                                                                                                                      |
+| `form/field-error`           | `FieldError`, `getFieldErrorMessage`; types `FieldErrorMessage`, `FieldMetaState`                                                                                                                                              |
+| `form/feedback-field`        | `FormFeedbackField`; nullable `message`                                                                                                                                                                                        |
+| `next/tabs-nav-link`         | `TabsNavLink`; Next Link props and required `active` boolean; requires Next.js 16                                                                                                                                              |
+| `utils`                      | `cn`, `onInputChange`                                                                                                                                                                                                          |
+| `theme.css`                  | Tailwind 4 theme; installation in [README](./README.md)                                                                                                                                                                        |
 
 ## Forms
 
@@ -62,6 +62,34 @@ accept the same error meta shape. `FormDatePickerField` takes a `Date` or
 `yyyy-MM-dd` string and calls `onValueChange` with `Date | undefined`.
 `FieldError` accepts either `message` or pre-resolved `text`.
 
+`DatePickerButton` is single-day by default. For a from/to range, set
+`mode="range"`; `value` is `{ from, to }` (each side `Date` or `yyyy-MM-dd`)
+and `onChange` receives `DateRange | undefined`. The popover shows two months
+unless `numberOfMonths` is set, stays `w-auto` so it does not collapse to the
+default popover width, and includes a Clear action.
+
+```tsx
+import { DatePickerButton, type DateRange } from "atlas-react-kit/date-picker"
+
+export function ExportRange({
+  value,
+  onChange,
+}: {
+  value: DateRange | undefined
+  onChange: (range: DateRange | undefined) => void
+}) {
+  return (
+    <DatePickerButton
+      mode="range"
+      value={value}
+      onChange={onChange}
+      numberOfMonths={2}
+      placeholder="Export range"
+    />
+  )
+}
+```
+
 ## Theme
 
 ```tsx

package/DESIGN_RULES.md

@@ -37,7 +37,8 @@ Next adapter provides `TabsNavLink` with this behavior.
 
 Use `FormTextField`, `FormSelectField`, `FormDatePickerField`, and
 `FormFeedbackField` for portable form controls, and `FieldError` for field
-messages. `Combobox`, `DatePickerButton`, `ThemeProvider`, `ErrorBoundary`, and
-`SortableTableHead` are first-class kit pieces. Domain data and application
-shells stay with the application: currency or timezone option lists, query-library
-error views, markdown editors, kanban boards, and dashboard widgets.
+messages. `Combobox`, `DatePickerButton` (including `mode="range"`),
+`ThemeProvider`, `ErrorBoundary`, and `SortableTableHead` are first-class kit
+pieces. Domain data and application shells stay with the application: currency
+or timezone option lists, query-library error views, markdown editors, kanban
+boards, and dashboard widgets.

package/README.md

@@ -4,7 +4,7 @@ Shared React components and a Tailwind theme with square corners, semantic
 colors, and distinct selected states. React 19 and Tailwind 4 are required.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.2.1
+npm install --save-exact atlas-react-kit@0.3.0
 ```
 
 Import components by subpath:
@@ -59,7 +59,7 @@ without compilation and processed by the consuming application's Tailwind build.
 The optional Next.js 16 adapter requires Next only when imported. The package
 does not bundle React.
 
-0.1.0 and 0.2.0 are already on npm. Bumping the version in `package.json` and
+0.2.1 is already on npm. Bumping the version in `package.json` and
 merging to `main` (path-filtered to package files) or running
 `workflow_dispatch` publishes through npm OIDC trusted publishing after
 check, test, and pack gates. Versions already on npm are skipped.
@@ -70,7 +70,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.2.1.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.3.0.tgz --access public
 ```
 
 Pin an exact package version in consuming applications. Roll back an upgrade by

package/dist/combobox.d.ts

@@ -18,6 +18,8 @@ type ComboboxProps = {
 /**
  * Searchable single-select built from Button, Popover, and Input.
  * Options are a plain `{ value, label }` list; domain data stays in the app.
+ * 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 {};

package/dist/combobox.js

@@ -6,9 +6,17 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn, onInputChange } from "./utils.js";
+/**
+ * PageUp/PageDown jump size. The option list is `max-h-60`; ten rows is a
+ * bit more than one viewport so long lists (timezones, currencies) move
+ * without requiring an End key.
+ */
+const LISTBOX_PAGE_SIZE = 10;
 /**
  * Searchable single-select built from Button, Popover, and Input.
  * Options are a plain `{ value, label }` list; domain data stays in the app.
+ * 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, }) {
     const [open, setOpen] = React.useState(false);
@@ -23,18 +31,30 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             return options;
         return options.filter((option) => option.label.toLowerCase().includes(needle));
     }, [options, query]);
-    // Highlight and search reset when the popover opens or closes; options/value
-    // are read for the initial highlight rather than subscribed as deps.
-    React.useEffect(() => {
-        if (!open) {
+    const onOpenChange = (next) => {
+        setOpen(next);
+        if (!next) {
             setQuery("");
             return;
         }
+        // Set the highlight in the same turn as open so the first painted list
+        // already points at the selected option (a timezone at the end of 400
+        // rows) instead of flashing index 0 and scrolling twice.
         const selectedIndex = options.findIndex((option) => option.value === value);
         setHighlight(selectedIndex >= 0 ? selectedIndex : 0);
+    };
+    React.useEffect(() => {
+        if (!open)
+            return;
         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);
@@ -59,7 +79,8 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             if (option)
                 selectValue(option.value);
         }
-        // Home/End jump the highlight; preventDefault so the search caret stays put.
+        // Home/End/Page jump the highlight; preventDefault so the search caret
+        // stays put and the page behind the list does not scroll.
         if (event.key === "Home") {
             event.preventDefault();
             setHighlight(0);
@@ -68,12 +89,22 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             event.preventDefault();
             setHighlight(filtered.length === 0 ? 0 : filtered.length - 1);
         }
+        if (event.key === "PageDown") {
+            event.preventDefault();
+            setHighlight((index) => filtered.length === 0
+                ? 0
+                : Math.min(index + LISTBOX_PAGE_SIZE, filtered.length - 1));
+        }
+        if (event.key === "PageUp") {
+            event.preventDefault();
+            setHighlight((index) => Math.max(index - LISTBOX_PAGE_SIZE, 0));
+        }
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, 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("h-10 w-full justify-between font-normal tracking-normal normal-case", !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
+    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("h-10 w-full justify-between font-normal tracking-normal normal-case", !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) => {
                             const isSelected = option.value === value;
                             const isActive = index === highlight;
-                            return (_jsx("li", { role: "none", children: _jsxs("button", { 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: `${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));
                         })) })] })] }));
 }

package/dist/date-picker.d.ts

@@ -1,5 +1,12 @@
 import * as React from "react";
+import type { DateRange } from "react-day-picker";
+export type { DateRange };
 export type DateLike = Date | string | number | null | undefined;
+/** From/to value for `DatePickerButton` in range mode; each side is `DateLike`. */
+export type DatePickerRangeValue = {
+    from?: DateLike;
+    to?: DateLike;
+};
 /**
  * Coerce a date-like value to a local `Date`.
  * Plain calendar dates (`yyyy-MM-dd`) parse as local midnight so they do not
@@ -8,18 +15,35 @@ export type DateLike = Date | string | number | null | undefined;
 export declare function toDate(value: DateLike): Date | undefined;
 /** Format a Date as a timezone-safe calendar date (`yyyy-MM-dd`). */
 export declare function formatLocalDate(date: Date): string;
-type DatePickerButtonProps = {
+type DatePickerSharedProps = {
     id?: string;
-    value?: DateLike;
-    onChange: (date: Date | undefined) => void;
     placeholder?: string;
     disabled?: boolean;
     className?: string;
     "aria-invalid"?: boolean;
+    /**
+     * Visible months in the popover calendar. Defaults to 1 in single mode
+     * and 2 in range mode.
+     */
+    numberOfMonths?: number;
+    /** Month shown when the popover opens; falls back to the selected date. */
+    defaultMonth?: Date;
+};
+export type DatePickerSingleProps = DatePickerSharedProps & {
+    mode?: "single";
+    value?: DateLike;
+    onChange: (date: Date | undefined) => void;
+};
+export type DatePickerRangeProps = DatePickerSharedProps & {
+    mode: "range";
+    value?: DatePickerRangeValue;
+    onChange: (range: DateRange | undefined) => void;
 };
+export type DatePickerButtonProps = DatePickerSingleProps | DatePickerRangeProps;
 /**
- * Calendar popover trigger. Accepts `Date` or `yyyy-MM-dd` strings; emits
- * `Date | undefined`. Square corners follow the shared shape rules.
+ * Calendar popover trigger. `mode="single"` (default) accepts `Date` or
+ * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
+ * `{ from, to }` and emits `DateRange | undefined`. Square corners follow
+ * the shared shape rules.
  */
-export declare function DatePickerButton({ id, value, onChange, placeholder, disabled, className, "aria-invalid": ariaInvalid, }: DatePickerButtonProps): React.JSX.Element;
-export {};
+export declare function DatePickerButton(props: DatePickerButtonProps): React.JSX.Element;

package/dist/date-picker.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { format, parseISO } from "date-fns";
+import { format, isSameDay, parseISO } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
@@ -44,14 +44,54 @@ export function formatLocalDate(date) {
     return format(date, "yyyy-MM-dd");
 }
 /**
- * Calendar popover trigger. Accepts `Date` or `yyyy-MM-dd` strings; emits
- * `Date | undefined`. Square corners follow the shared shape rules.
+ * Trigger label for a range: one PPP date while the end is missing or the
+ * same day as the start, otherwise `from – to`.
  */
-export function DatePickerButton({ id, value, onChange, placeholder = "Pick a date", disabled, className, "aria-invalid": ariaInvalid, }) {
+function formatRangeTriggerLabel(from, to, placeholder) {
+    if (!from)
+        return placeholder;
+    if (!to || isSameDay(from, to))
+        return format(from, "PPP");
+    return `${format(from, "PPP")} – ${format(to, "PPP")}`;
+}
+/** Shared trigger + auto-sized popover chrome for single and range modes. */
+function DatePickerShell({ id, disabled, ariaInvalid, className, empty, label, open, onOpenChange, 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("h-10 w-full justify-start font-normal tracking-normal normal-case data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), label] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto rounded-none p-0", children: children })] }));
+}
+function DatePickerSingleButton({ id, value, onChange, placeholder = "Pick a date", disabled, className, "aria-invalid": ariaInvalid, numberOfMonths, defaultMonth, }) {
     const [open, setOpen] = React.useState(false);
     const date = toDate(value);
-    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": !date, className: cn("h-10 w-full justify-start font-normal tracking-normal normal-case data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), date ? format(date, "PPP") : placeholder] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto rounded-none p-0", children: _jsx(Calendar, { mode: "single", selected: date, defaultMonth: date, onSelect: (next) => {
-                        onChange(next);
+    return (_jsx(DatePickerShell, { id: id, disabled: disabled, ariaInvalid: ariaInvalid, className: className, empty: !date, label: date ? format(date, "PPP") : placeholder, open: open, onOpenChange: setOpen, children: _jsx(Calendar, { mode: "single", selected: date, defaultMonth: defaultMonth ?? date, numberOfMonths: numberOfMonths, onSelect: (next) => {
+                onChange(next);
+                setOpen(false);
+            } }) }));
+}
+function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date range", disabled, className, "aria-invalid": ariaInvalid, numberOfMonths = 2, defaultMonth, }) {
+    const [open, setOpen] = React.useState(false);
+    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, children: [_jsx(Calendar, { mode: "range", selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: numberOfMonths, onSelect: (next) => {
+                    onChange(next);
+                    // 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)) {
+                        setOpen(false);
+                    }
+                } }), _jsx("div", { className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: !from && !to, onClick: () => {
+                        onChange(undefined);
                         setOpen(false);
-                    } }) })] }));
+                    }, children: "Clear" }) })] }));
+}
+/**
+ * Calendar popover trigger. `mode="single"` (default) accepts `Date` or
+ * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
+ * `{ from, to }` and emits `DateRange | undefined`. Square corners follow
+ * the shared shape rules.
+ */
+export function DatePickerButton(props) {
+    if (props.mode === "range") {
+        return _jsx(DatePickerRangeButton, { ...props });
+    }
+    return _jsx(DatePickerSingleButton, { ...props });
 }

package/package.json

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