@godxjp/ui 11.0.1 → 11.1.0

package/dist/{chunk-PGG4IM2Y.js → chunk-2HOTP7RL.js}

@@ -3,8 +3,8 @@ import { Input } from './chunk-VOHTRR5X.js';
 import { Checkbox } from './chunk-BE6GJGKJ.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { ScrollArea } from './chunk-3KPEZ5CF.js';
-import { useTranslation } from './chunk-HTG5VHU7.js';
 import { Label } from './chunk-7PWBC4BY.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
 import { useDebouncedValue } from './chunk-LFW37FGG.js';
 import { cn } from './chunk-U7N2A7A3.js';
 import * as React from 'react';
@@ -16,6 +16,7 @@ function SearchInput({
   defaultValue = "",
   placeholder,
   debounce = 250,
+  onValueChange,
   onSearch,
   label,
   ariaLabel,
@@ -42,6 +43,7 @@ function SearchInput({
   }, [debounced]);
   const setValue = (v) => {
     if (!isControlled) setInternal(v);
+    onValueChange?.(v);
   };
   return /* @__PURE__ */ jsxs("div", { className: cn("ui-search-input", className), children: [
     label !== void 0 ? /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "ui-search-input-label", children: label }) : /* @__PURE__ */ jsx(Label, { htmlFor: inputId, className: "sr-only", children: resolvedAriaLabel }),

package/dist/{chunk-2HXZT2WJ.js → chunk-7BF7U3GG.js}

@@ -1,4 +1,4 @@
-import { Calendar } from './chunk-DNGJHWJZ.js';
+import { Calendar } from './chunk-FTOG7D4T.js';
 import { Input } from './chunk-VOHTRR5X.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
@@ -44,6 +44,7 @@ function DatePicker({
       emit(void 0);
       return;
     }
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
     const parsed = parseDateInput(trimmed);
     if (parsed) {
       emit(parsed);
@@ -64,6 +65,17 @@ function DatePicker({
         "aria-expanded": open,
         "aria-haspopup": "dialog",
         className: "pe-10",
+        onClick: () => {
+          if (!disabled) setOpen(true);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+          } else if (event.key === "Escape" && open) {
+            setOpen(false);
+          }
+        },
         onChange: (event) => {
           setText(event.target.value);
           commit(event.target.value);
@@ -88,25 +100,34 @@ function DatePicker({
           children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ jsx(
-        Calendar,
+      /* @__PURE__ */ jsx(
+        PopoverContent,
         {
-          mode: "single",
-          selected: value,
-          onSelect: (date) => {
-            emit(date);
-            setText(toIsoDate(date));
-            setOpen(false);
-          },
-          locale: dayPickerLocale,
-          disabled: [
-            ...fromDate ? [{ before: fromDate }] : [],
-            ...toDate ? [{ after: toDate }] : []
-          ],
-          startMonth: fromDate,
-          endMonth: toDate
+          className: "w-auto p-0",
+          align: "end",
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "single",
+              selected: value,
+              defaultMonth: value,
+              onSelect: (date) => {
+                emit(date);
+                setText(toIsoDate(date));
+                setOpen(false);
+              },
+              locale: dayPickerLocale,
+              disabled: [
+                ...fromDate ? [{ before: fromDate }] : [],
+                ...toDate ? [{ after: toDate }] : []
+              ],
+              startMonth: fromDate,
+              endMonth: toDate
+            }
+          )
         }
-      ) })
+      )
     ] })
   ] });
 }

package/dist/{chunk-VSM44AYE.js → chunk-F6JGFU6O.js}

@@ -109,6 +109,7 @@ function TimeColumn({
 }
 function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
   const { t } = useTranslation();
+  const draftId = React.useId();
   const { hour, minute } = parseHhmm(value);
   const minutes = buildMinutes(minuteStep);
   const snappedMinute = minutes.includes(minute) ? minute : minutes[0];
@@ -174,6 +175,7 @@ function TimePickerPanel({ value, minuteStep, use12h, onChange, onDone }) {
     /* @__PURE__ */ jsx("div", { className: "border-t p-2", children: /* @__PURE__ */ jsx(
       Input,
       {
+        id: draftId,
         value: draft,
         onChange: (e) => {
           setDraft(e.target.value);
@@ -239,6 +241,17 @@ function TimePicker({
         "aria-expanded": open,
         "aria-haspopup": "dialog",
         className: "pe-10 tabular-nums",
+        onClick: () => {
+          if (!disabled) setOpen(true);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+          } else if (event.key === "Escape" && open) {
+            setOpen(false);
+          }
+        },
         onChange: (event) => {
           setText(event.target.value);
           const normalized = normalizeHhmm(event.target.value);
@@ -264,21 +277,29 @@ function TimePicker({
           children: /* @__PURE__ */ jsx(Clock, { className: "size-4 shrink-0", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ jsx(
-        TimePickerPanel,
+      /* @__PURE__ */ jsx(
+        PopoverContent,
         {
-          value: value || "09:00",
-          minuteStep,
-          use12h,
-          onChange: (next) => {
-            setValue(next);
-            setText(next);
-          },
-          onDone: () => {
-            setOpen(false);
-          }
+          className: "w-auto p-0",
+          align: "end",
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          children: /* @__PURE__ */ jsx(
+            TimePickerPanel,
+            {
+              value: value || "09:00",
+              minuteStep,
+              use12h,
+              onChange: (next) => {
+                setValue(next);
+                setText(next);
+              },
+              onDone: () => {
+                setOpen(false);
+              }
+            }
+          )
         }
-      ) })
+      )
     ] })
   ] });
 }

package/dist/{chunk-4S2AAMSS.js → chunk-FAB3LMTK.js}

@@ -1,6 +1,6 @@
-import { Slider } from './chunk-CRERCLIZ.js';
 import { formatBytes } from './chunk-X2VY4MOW.js';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-QHODCQDW.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from './chunk-BG5RNXTH.js';
+import { Slider } from './chunk-CRERCLIZ.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { controlIconClass } from './chunk-IBK5D2Q6.js';
 import { useTranslation } from './chunk-HTG5VHU7.js';

package/dist/{chunk-DNGJHWJZ.js → chunk-FTOG7D4T.js}

@@ -11,11 +11,12 @@ function Calendar({
   showOutsideDays = true,
   ...props
 }) {
+  const rangeDefaults = props.mode === "range" ? { resetOnSelect: props.resetOnSelect ?? true } : null;
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
       showOutsideDays,
-      className: cn("p-3", className),
+      className: cn("w-fit p-3", className),
       classNames: {
         months: cn("flex flex-col gap-4 sm:flex-row", classNames?.months),
         month: cn("relative flex flex-col gap-4", classNames?.month),
@@ -80,7 +81,8 @@ function Calendar({
           return /* @__PURE__ */ jsx(Icon, { className: cn("size-4", chevronClassName), "aria-hidden": "true" });
         }
       },
-      ...props
+      ...props,
+      ...rangeDefaults
     }
   );
 }

package/dist/chunk-LN7GE73P.js

@@ -0,0 +1,318 @@
+import { normalizeTreeOptions, formatPathLabels, getNodeByPath, filterTreeOptions, pathsEqual, pathKey } from './chunk-SMLKNECP.js';
+import { Command, CommandInput } from './chunk-HTEL5DQI.js';
+import { Button } from './chunk-M4PZNAMV.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
+import { ScrollArea, ScrollBar } from './chunk-3KPEZ5CF.js';
+import { useTranslation } from './chunk-HTG5VHU7.js';
+import { cn } from './chunk-U7N2A7A3.js';
+import * as React from 'react';
+import { Check, X, ChevronsUpDown, ChevronRight, Minus } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function pathInValues(path, values) {
+  return values.some((v) => pathsEqual(v, path));
+}
+function togglePath(values, path) {
+  if (pathInValues(path, values)) return values.filter((v) => !pathsEqual(v, path));
+  return [...values, path];
+}
+function CheckboxVisual({
+  checked,
+  indeterminate,
+  disabled,
+  className
+}) {
+  const state = indeterminate ? "indeterminate" : checked ? "checked" : "unchecked";
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "checkbox",
+      "data-state": state,
+      className: cn(
+        "ui-checkbox inline-flex items-center justify-center",
+        // The shared CSS fills the box for [data-state=checked]; mirror that fill for the
+        // indeterminate ("some children selected") state so a partial parent reads as partial.
+        "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+        disabled && "cursor-not-allowed opacity-50",
+        className
+      ),
+      children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : checked ? /* @__PURE__ */ jsx(Check, { className: "ui-checkbox-icon", "aria-hidden": "true" }) : null
+    }
+  );
+}
+function aggregateCheckState(node, path, values) {
+  let total = 0;
+  let selected = 0;
+  const walk = (n, p) => {
+    const isLeaf = (n.children?.length ?? 0) === 0 || n.isLeaf === true;
+    if (isLeaf) {
+      if (n.disabled || n.disableCheckbox) return;
+      total += 1;
+      if (pathInValues(p, values)) selected += 1;
+      return;
+    }
+    for (const child of n.children) walk(child, [...p, child.value]);
+  };
+  for (const child of node.children ?? []) walk(child, [...path, child.value]);
+  if (total === 0 || selected === 0) return "none";
+  return selected === total ? "checked" : "indeterminate";
+}
+function Cascader({
+  options: optionsProp,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple,
+  changeOnSelect,
+  showSearch,
+  placeholder,
+  disabled,
+  className,
+  id,
+  expandTrigger = "click",
+  fieldNames,
+  allowClear = true
+}) {
+  const { t } = useTranslation();
+  const options = React.useMemo(
+    () => normalizeTreeOptions(optionsProp, fieldNames),
+    [optionsProp, fieldNames]
+  );
+  const [open, setOpen] = React.useState(false);
+  const [activePath, setActivePath] = React.useState([]);
+  const [search, setSearch] = React.useState("");
+  const isControlledSingle = !multiple && value !== void 0;
+  const isControlledMulti = multiple && value !== void 0;
+  const [internalSingle, setInternalSingle] = React.useState(
+    multiple ? [] : defaultValue ?? []
+  );
+  const [internalMulti, setInternalMulti] = React.useState(
+    defaultValue ?? []
+  );
+  const singleValue = isControlledSingle ? value : internalSingle;
+  const multiValue = isControlledMulti ? value : internalMulti;
+  const resolvedPlaceholder = placeholder ?? t("dataEntry.cascader.placeholder");
+  const displayLabel = React.useMemo(() => {
+    if (multiple) {
+      if (!multiValue.length) return null;
+      return multiValue.map((path) => formatPathLabels(getNodeByPath(options, path))).join(", ");
+    }
+    if (!singleValue.length) return null;
+    return formatPathLabels(getNodeByPath(options, singleValue));
+  }, [multiple, multiValue, singleValue, options]);
+  const setSingleValue = (path) => {
+    if (!isControlledSingle) setInternalSingle(path);
+    onValueChange?.(path, getNodeByPath(options, path));
+  };
+  const commitSingle = (path) => {
+    setSingleValue(path);
+    setOpen(false);
+    setActivePath([]);
+    setSearch("");
+  };
+  const commitMulti = (paths) => {
+    if (!isControlledMulti) setInternalMulti(paths);
+    onValueChange?.(
+      paths,
+      paths.map((p) => getNodeByPath(options, p))
+    );
+  };
+  const columns = React.useMemo(() => {
+    const cols = [options];
+    for (const segment of activePath) {
+      const col = cols.at(-1);
+      const node = col?.find((n) => n.value === segment);
+      if (node?.children?.length) cols.push(node.children);
+      else break;
+    }
+    return cols;
+  }, [options, activePath]);
+  const handleSelectNode = (node, path) => {
+    const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+    if (multiple) {
+      if (hasChildren && !changeOnSelect) setActivePath(path);
+      else if (!node.disableCheckbox) commitMulti(togglePath(multiValue, path));
+      return;
+    }
+    if (hasChildren) {
+      if (changeOnSelect) setSingleValue(path);
+      setActivePath(path);
+      return;
+    }
+    commitSingle(path);
+  };
+  const isSearching = showSearch && search.trim().length > 0;
+  const searchResults = React.useMemo(
+    () => isSearching ? filterTreeOptions(options, search) : [],
+    [options, search, isSearching]
+  );
+  const handleOpenChange = (next) => {
+    setOpen(next);
+    if (next) {
+      setActivePath(multiple ? [] : singleValue);
+    } else {
+      setSearch("");
+      setActivePath([]);
+    }
+  };
+  const clearValue = (e) => {
+    e.stopPropagation();
+    if (multiple) commitMulti([]);
+    else commitSingle([]);
+  };
+  const renderCascadeColumns = () => /* @__PURE__ */ jsxs(ScrollArea, { className: "w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex max-h-[min(280px,50vh)]", children: columns.map((col, colIndex) => /* @__PURE__ */ jsx(
+      "ul",
+      {
+        role: "listbox",
+        "aria-orientation": "vertical",
+        "aria-multiselectable": multiple ? true : void 0,
+        className: "min-w-[9rem] border-e last:border-e-0",
+        children: col.map((node) => {
+          const path = [...activePath.slice(0, colIndex), node.value];
+          const hasChildren = (node.children?.length ?? 0) > 0 && node.isLeaf !== true;
+          const active = activePath[colIndex] === node.value;
+          const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
+          const aggregate = multiple && hasChildren ? aggregateCheckState(node, path, multiValue) : void 0;
+          return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": selected,
+              "aria-haspopup": hasChildren ? "menu" : void 0,
+              "aria-expanded": hasChildren ? active : void 0,
+              disabled: node.disabled,
+              className: cn(
+                "flex w-full items-center gap-1 px-3 py-2 text-sm outline-none",
+                "hover:bg-accent hover:text-accent-foreground",
+                active && "bg-accent/70 font-medium",
+                node.disabled && "pointer-events-none opacity-50"
+              ),
+              onMouseEnter: (
+                // Hover-expand: a parent opens its children column; a leaf collapses any
+                // deeper column but keeps its own. Never collapse on the column's mouseleave
+                // — moving the pointer toward the next column would strand the deeper levels
+                // and make a depth-3 leaf unreachable.
+                expandTrigger === "hover" && !node.disabled ? () => setActivePath(hasChildren ? path : path.slice(0, -1)) : void 0
+              ),
+              onClick: () => !node.disabled && handleSelectNode(node, path),
+              children: [
+                multiple && /* @__PURE__ */ jsx(
+                  CheckboxVisual,
+                  {
+                    checked: aggregate ? aggregate === "checked" : selected,
+                    indeterminate: aggregate === "indeterminate",
+                    disabled: node.disabled || node.disableCheckbox,
+                    className: "me-1"
+                  }
+                ),
+                !multiple && selected && /* @__PURE__ */ jsx(Check, { className: "me-1 size-4 shrink-0", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-start", children: node.label }),
+                hasChildren && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" })
+              ]
+            }
+          ) }, node.value);
+        })
+      },
+      colIndex
+    )) }),
+    /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })
+  ] });
+  const showClear = allowClear && displayLabel && !disabled;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          id,
+          type: "button",
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          disabled,
+          className: cn(
+            "w-full justify-start font-normal",
+            // Reserve trailing room for the clear + chevron overlay rendered below.
+            showClear ? "pe-14" : "pe-9",
+            !displayLabel && "text-muted-foreground"
+          ),
+          children: /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel ?? resolvedPlaceholder })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          className: "w-auto min-w-[var(--radix-popover-trigger-width)] p-0",
+          align: "start",
+          children: [
+            showSearch && /* @__PURE__ */ jsx("div", { className: "border-b p-2", children: /* @__PURE__ */ jsx(Command, { shouldFilter: false, children: /* @__PURE__ */ jsx(
+              CommandInput,
+              {
+                placeholder: t("dataEntry.cascader.searchPlaceholder"),
+                value: search,
+                onValueChange: setSearch
+              }
+            ) }) }),
+            isSearching ? /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[min(300px,50vh)]", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "p-1",
+                role: "listbox",
+                "aria-multiselectable": multiple ? true : void 0,
+                children: searchResults.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground py-6 text-center text-sm", children: t("dataEntry.cascader.empty") }) : searchResults.map(({ path, labels }) => {
+                  const label = labels.join(" / ");
+                  const selected = multiple ? pathInValues(path, multiValue) : pathsEqual(path, singleValue);
+                  return /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      role: "option",
+                      "aria-selected": selected,
+                      className: cn(
+                        "flex w-full items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+                        "hover:bg-accent hover:text-accent-foreground",
+                        selected && "bg-accent/60"
+                      ),
+                      onClick: () => handleSelectNode({ value: path.at(-1)}, path),
+                      children: [
+                        multiple ? /* @__PURE__ */ jsx(CheckboxVisual, { checked: selected, className: "me-2" }) : /* @__PURE__ */ jsx(
+                          Check,
+                          {
+                            className: cn(
+                              "me-2 size-4 shrink-0",
+                              selected ? "opacity-100" : "opacity-0"
+                            ),
+                            "aria-hidden": "true"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("span", { className: "truncate text-start", children: label })
+                      ]
+                    },
+                    pathKey(path)
+                  );
+                })
+              }
+            ) }) : renderCascadeColumns()
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute inset-y-0 end-3 flex items-center gap-1", children: [
+      showClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": t("dataEntry.cascader.clear"),
+          className: "pointer-events-auto flex size-4 items-center justify-center rounded-sm opacity-50 hover:opacity-100 focus-visible:opacity-100",
+          onClick: clearValue,
+          children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+        }
+      ),
+      /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": "true" })
+    ] })
+  ] });
+}
+
+export { Cascader };

package/dist/{chunk-PDXFQS7M.js → chunk-Q4WWD4VV.js}

@@ -48,7 +48,7 @@ var PaginationLink = React.forwardRef(
       disabled: disabled || void 0,
       "data-state": disabled ? "disabled" : void 0,
       className: cn(
-        "ui-pagination-link ui-button--compact-icon ui-pagination-page",
+        "ui-pagination-link ui-pagination-page",
         isActive ? "ui-pagination-link-active" : void 0,
         disabled ? "ui-pagination-link-disabled" : void 0,
         className
@@ -63,7 +63,7 @@ PaginationLink.displayName = "PaginationLink";
 var PaginationEllipsis = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
-    className: cn("ui-pagination-ellipsis ui-button--compact-icon", className),
+    className: cn("ui-pagination-ellipsis", className),
     "aria-hidden": "true",
     role: "presentation",
     ...props,
@@ -196,7 +196,6 @@ function Pagination({
             {
               "aria-label": t("navigation.pagination.prev"),
               onClick: () => go(safeCurrent - 1),
-              className: "ui-button--compact-icon",
               disabled: Boolean(disabled) || safeCurrent <= 1,
               children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
             }
@@ -220,7 +219,6 @@ function Pagination({
             {
               "aria-label": t("navigation.pagination.next"),
               onClick: () => go(safeCurrent + 1),
-              className: "ui-button--compact-icon",
               disabled: Boolean(disabled) || safeCurrent >= totalPages,
               children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
             }

package/dist/{chunk-GDDCSKCB.js → chunk-QWALQSBS.js}

@@ -1,4 +1,4 @@
-import { Calendar } from './chunk-DNGJHWJZ.js';
+import { Calendar } from './chunk-FTOG7D4T.js';
 import { Input } from './chunk-VOHTRR5X.js';
 import { Button } from './chunk-M4PZNAMV.js';
 import { Popover, PopoverTrigger, PopoverContent } from './chunk-DY5C44UP.js';
@@ -41,7 +41,9 @@ function DateRangePicker({
     onValueChange?.(next);
   };
   const commitEdge = (edge, raw) => {
-    const parsed = raw.trim() === "" ? void 0 : parseDateInput(raw.trim()) ?? void 0;
+    const trimmed = raw.trim();
+    if (trimmed !== "" && !/^\d{4}-\d{2}-\d{2}$/.test(trimmed)) return;
+    const parsed = trimmed === "" ? void 0 : parseDateInput(trimmed) ?? void 0;
     const next = { from: value?.from, to: value?.to, [edge]: parsed };
     emit(next.from || next.to ? next : void 0);
   };
@@ -58,6 +60,17 @@ function DateRangePicker({
         autoComplete: "off",
         "aria-label": t("dataEntry.dateRangePicker.from") ?? "From",
         className: "tabular-nums",
+        onClick: () => {
+          if (!disabled) setOpen(true);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+          } else if (event.key === "Escape" && open) {
+            setOpen(false);
+          }
+        },
         onChange: (event) => {
           setFromText(event.target.value);
           commitEdge("from", event.target.value);
@@ -80,6 +93,17 @@ function DateRangePicker({
         autoComplete: "off",
         "aria-label": t("dataEntry.dateRangePicker.to") ?? "To",
         className: "tabular-nums",
+        onClick: () => {
+          if (!disabled) setOpen(true);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setOpen(true);
+          } else if (event.key === "Escape" && open) {
+            setOpen(false);
+          }
+        },
         onChange: (event) => {
           setToText(event.target.value);
           commitEdge("to", event.target.value);
@@ -104,25 +128,35 @@ function DateRangePicker({
           children: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4 shrink-0", "aria-hidden": "true" })
         }
       ) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "end", children: /* @__PURE__ */ jsx(
-        Calendar,
+      /* @__PURE__ */ jsx(
+        PopoverContent,
         {
-          mode: "range",
-          selected: value,
-          onSelect: (range) => {
-            emit(range);
-            setFromText(toIsoDate(range?.from));
-            setToText(toIsoDate(range?.to));
-          },
-          locale: dayPickerLocale,
-          disabled: [
-            ...fromDate ? [{ before: fromDate }] : [],
-            ...toDate ? [{ after: toDate }] : []
-          ],
-          startMonth: fromDate,
-          endMonth: toDate
+          className: "w-auto p-0",
+          align: "end",
+          onOpenAutoFocus: (event) => event.preventDefault(),
+          children: /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              mode: "range",
+              selected: value,
+              defaultMonth: value?.from,
+              numberOfMonths: 2,
+              onSelect: (range) => {
+                emit(range);
+                setFromText(toIsoDate(range?.from));
+                setToText(toIsoDate(range?.to));
+              },
+              locale: dayPickerLocale,
+              disabled: [
+                ...fromDate ? [{ before: fromDate }] : [],
+                ...toDate ? [{ after: toDate }] : []
+              ],
+              startMonth: fromDate,
+              endMonth: toDate
+            }
+          )
         }
-      ) })
+      )
     ] })
   ] });
 }