@geomak/ui 3.0.0 → 5.0.0

package/dist/index.js

@@ -3143,6 +3143,26 @@ function AutoComplete({
     }
   ) });
 }
+function flattenVisible(items, expanded, depth = 0, out = []) {
+  for (const node of items) {
+    const isParent2 = !!node.children && node.children.length > 0;
+    out.push({ node, depth, isParent: isParent2 });
+    if (isParent2 && expanded.has(node.key)) {
+      flattenVisible(node.children, expanded, depth + 1, out);
+    }
+  }
+  return out;
+}
+function findNodeByKey(items, key) {
+  for (const n of items) {
+    if (n.key === key) return n;
+    if (n.children) {
+      const found = findNodeByKey(n.children, key);
+      if (found) return found;
+    }
+  }
+  return null;
+}
 function TreeSelect({
   label,
   name,
@@ -3151,106 +3171,231 @@ function TreeSelect({
   disabled,
   layout = "horizontal",
   errorMessage,
-  style = {},
+  style,
   htmlFor,
-  items = []
+  items = [],
+  placeholder = "Select\u2026",
+  parentsSelectable = true,
+  defaultExpandedKeys = []
 }) {
+  const errorId = useId();
+  const hasError = errorMessage != null;
   const [open, setOpen] = useState(false);
-  const [hoveredItem, setHoveredItem] = useState(null);
-  const [innerItems, setInnerItems] = useState([]);
+  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedKeys));
+  const [activeIndex, setActiveIndex] = useState(0);
+  const listRef = useRef(null);
+  const visible = useMemo(() => flattenVisible(items, expanded), [items, expanded]);
   useEffect(() => {
-    setInnerItems(items);
-  }, [items]);
-  const selectItem = (key) => {
+    if (!open) return;
+    const selectedIdx = visible.findIndex((v) => v.node.key === value);
+    setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
+  }, [open, visible, value]);
+  const selectedNode = useMemo(
+    () => value != null ? findNodeByKey(items, value) : null,
+    [items, value]
+  );
+  const toggleExpand = (key) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+  const selectKey = (key) => {
     onChange?.({ target: { value: key, id: htmlFor, name } });
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
-        children: [
-          label && /* @__PURE__ */ jsx(
-            "label",
-            {
-              className: "text-md font-bold ml-1 max-content select-none text-prussian-blue dark:text-white",
-              htmlFor,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-            /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+  const onListKey = (e) => {
+    if (visible.length === 0) return;
+    const cur = visible[activeIndex];
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.min(i + 1, visible.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((i) => Math.max(i - 1, 0));
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      if (cur.isParent) {
+        if (!expanded.has(cur.node.key)) toggleExpand(cur.node.key);
+        else setActiveIndex((i) => Math.min(i + 1, visible.length - 1));
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      if (cur.isParent && expanded.has(cur.node.key)) {
+        toggleExpand(cur.node.key);
+      } else if (cur.depth > 0) {
+        for (let i = activeIndex - 1; i >= 0; i--) {
+          if (visible[i].depth < cur.depth) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+      }
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (cur.node.disabled) return;
+      if (cur.isParent && !parentsSelectable) {
+        toggleExpand(cur.node.key);
+      } else {
+        selectKey(cur.node.key);
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
+        {
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          htmlFor,
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: htmlFor,
+            type: "button",
+            style,
+            role: "combobox",
+            "aria-expanded": open,
+            "aria-haspopup": "listbox",
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            disabled,
+            className: `flex items-center justify-between h-9 rounded-lg border ${hasError ? "border-status-error" : "border-border"} px-3 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[240px]" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm truncate text-left", children: selectedNode ? selectedNode.label : /* @__PURE__ */ jsx("span", { className: "text-foreground-muted", children: placeholder }) }),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
+          Popover.Content,
+          {
+            align: "start",
+            sideOffset: 4,
+            style: { width: style?.width || 280 },
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+              listRef.current?.focus();
+            },
+            children: /* @__PURE__ */ jsx(
               "div",
               {
-                id: htmlFor,
-                style,
-                role: "combobox",
-                "aria-expanded": open,
-                "aria-haspopup": "listbox",
-                className: `flex items-center justify-between relative h-9 rounded-lg p-2 cursor-pointer ${disabled ? "cursor-not-allowed bg-disabled" : "bg-white"}`,
-                tabIndex: disabled ? -1 : 0,
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: `h-7 ${!style?.width ? "min-w-[240px]" : ""} focus:outline-none text-prussian-blue flex items-center gap-1`, children: Array.isArray(value) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                    value.slice(0, 1).map((val, id) => /* @__PURE__ */ jsx(
-                      DropdownPill,
-                      {
-                        hasSiblings: value.length > 1,
-                        value: innerItems.find((it) => it.key === val)?.label
-                      },
-                      id
-                    )),
-                    value.length > 1 && /* @__PURE__ */ jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                  ] }) : value != null ? /* @__PURE__ */ jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label }) : null }),
-                  /* @__PURE__ */ jsx("div", { className: `transition-transform duration-300 ml-2 ${open ? "rotate-180" : "rotate-0"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(
-              Popover.Content,
-              {
-                align: "start",
-                sideOffset: 4,
-                style: { width: style?.width || 240 },
-                className: "bg-ice rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-                children: /* @__PURE__ */ jsx("div", { role: "listbox", className: "max-h-40 overflow-y-auto", children: innerItems.map((item, idx) => /* @__PURE__ */ jsxs(
-                  "div",
+                ref: listRef,
+                role: "tree",
+                tabIndex: -1,
+                "aria-activedescendant": visible[activeIndex] ? `tree-opt-${visible[activeIndex].node.key}` : void 0,
+                onKeyDown: onListKey,
+                className: "max-h-72 overflow-y-auto outline-none",
+                children: visible.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-sm text-foreground-secondary text-center", children: "No items" }) : visible.map((v, idx) => /* @__PURE__ */ jsx(
+                  TreeNodeRow,
                   {
-                    role: "option",
-                    "aria-selected": value === item.key,
-                    "aria-rowindex": idx,
-                    className: `flex items-center justify-between p-2 hover:bg-prussian-blue hover:text-white transition-all duration-150 text-sm text-prussian-blue rounded-lg cursor-pointer`,
-                    onClick: () => selectItem(item.key),
-                    onMouseEnter: () => setHoveredItem(item.key),
-                    onMouseLeave: () => setHoveredItem(null),
-                    children: [
-                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs", children: [
-                        item.icon && /* @__PURE__ */ jsx("div", { children: item.icon }),
-                        item.label
-                      ] }),
-                      value === item.key && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          d: "M4 10l4.5 4.5L16 6",
-                          stroke: hoveredItem === item.key ? "#fff" : colors_default.PALETTE["prussian-blue"],
-                          strokeWidth: "2",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ) })
-                    ]
+                    node: v.node,
+                    depth: v.depth,
+                    isParent: v.isParent,
+                    isExpanded: expanded.has(v.node.key),
+                    isActive: idx === activeIndex,
+                    isSelected: value === v.node.key,
+                    parentsSelectable,
+                    onActivate: () => {
+                      if (v.node.disabled) return;
+                      if (v.isParent && !parentsSelectable) toggleExpand(v.node.key);
+                      else selectKey(v.node.key);
+                    },
+                    onToggle: () => toggleExpand(v.node.key),
+                    onHover: () => setActiveIndex(idx)
                   },
-                  item.key
-                )) })
+                  v.node.key
+                ))
               }
-            ) })
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+            )
+          }
+        ) })
+      ] })
+    ] }),
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
   ] });
 }
+function TreeNodeRow({
+  node,
+  depth,
+  isParent: isParent2,
+  isExpanded,
+  isActive,
+  isSelected,
+  parentsSelectable,
+  onActivate,
+  onToggle,
+  onHover
+}) {
+  const disabled = node.disabled;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: `tree-opt-${node.key}`,
+      role: "treeitem",
+      "aria-selected": isSelected,
+      "aria-expanded": isParent2 ? isExpanded : void 0,
+      "aria-disabled": disabled || void 0,
+      "data-active": isActive ? "" : void 0,
+      onMouseEnter: onHover,
+      className: `flex items-center gap-1 rounded-md px-1 py-1.5 select-none cursor-pointer transition-colors duration-100 ${disabled ? "opacity-40 cursor-not-allowed" : isActive ? "bg-accent text-accent-fg" : isSelected ? "bg-surface-raised" : "hover:bg-surface-raised"}`,
+      style: { paddingLeft: depth * 16 + 4 },
+      children: [
+        isParent2 ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onToggle();
+            },
+            "aria-label": isExpanded ? "Collapse" : "Expand",
+            tabIndex: -1,
+            className: "w-5 h-5 inline-flex items-center justify-center rounded hover:bg-black/10 focus:outline-none",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: 2.5,
+                className: `h-3 w-3 transition-transform duration-150 ${isExpanded ? "rotate-0" : "-rotate-90"}`,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "w-5 h-5 inline-block", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onActivate,
+            disabled,
+            tabIndex: -1,
+            className: "flex-1 flex items-center gap-2 text-sm text-left focus:outline-none disabled:cursor-not-allowed",
+            children: [
+              node.icon,
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label }),
+              isParent2 && !parentsSelectable && /* @__PURE__ */ jsx("span", { className: "ml-auto text-xs text-foreground-muted", children: "parent" })
+            ]
+          }
+        ),
+        isSelected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", className: "ml-1", children: /* @__PURE__ */ jsx("path", { d: "M4 10l4.5 4.5L16 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+      ]
+    }
+  );
+}
 function FileInput({
   allowMultiple = false,
   onChange,
@@ -3358,295 +3503,285 @@ function FileInput({
     )
   );
 }
-var MONTHS = {
-  1: "January",
-  2: "February",
-  3: "March",
-  4: "April",
-  5: "May",
-  6: "June",
-  7: "July",
-  8: "August",
-  9: "September",
-  10: "October",
-  11: "November",
-  12: "December"
-};
-var DAYS = { 0: "Sun", 1: "Mon", 2: "Tue", 3: "Wed", 4: "Thu", 5: "Fri", 6: "Sat" };
-function formatDate(date) {
-  const fmt = new Intl.DateTimeFormat("en-GB", { year: "numeric", month: "numeric", day: "numeric" });
-  const parts = fmt.formatToParts(date);
-  const d = parts.find((x) => x.type === "day").value;
-  const m = parts.find((x) => x.type === "month").value;
-  const y = parts.find((x) => x.type === "year").value;
-  return `${y}-${m}-${d}`;
-}
-function getMonthDays(year, month) {
-  const days = [];
-  for (let i = 1; i <= 31; i++) {
-    const d = new Date(year, month - 1, i);
-    if (d.getMonth() + 1 > month) break;
-    days.push(d);
+var MONTH_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var WEEKDAY_SHORT = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function startOfMonth(d) {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+function addDays(d, n) {
+  const c = new Date(d);
+  c.setDate(c.getDate() + n);
+  return c;
+}
+function addMonths(d, n) {
+  const c = new Date(d);
+  c.setMonth(c.getMonth() + n);
+  return c;
+}
+function defaultFormat(d) {
+  const y = d.getFullYear().toString().padStart(4, "0");
+  const m = (d.getMonth() + 1).toString().padStart(2, "0");
+  const day = d.getDate().toString().padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+function buildGrid(viewMonth, weekStartsOn) {
+  const first = startOfMonth(viewMonth);
+  const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
+  const gridStart = addDays(first, -startOffset);
+  const cells = [];
+  for (let i = 0; i < 42; i++) {
+    const d = addDays(gridStart, i);
+    cells.push({ date: d, outside: d.getMonth() !== viewMonth.getMonth() });
   }
-  return days;
+  const rows = [];
+  for (let r = 0; r < 6; r++) rows.push(cells.slice(r * 7, r * 7 + 7));
+  return rows;
 }
-var ChevronRight3 = ({ color = colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-var DoubleChevronRight2 = ({ color = colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
-var ChevronDown2 = ({ color = colors_default.PALETTE["prussian-blue"] }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) });
-function DatePickerBase({
+function DatePicker({
   value,
   onChange,
-  layout,
   label,
+  placeholder = "Select a date\u2026",
   htmlFor,
-  name,
-  style = {},
+  name: _name,
+  layout = "horizontal",
+  disabled,
   errorMessage,
-  disableBefore,
-  disableAfter,
-  disabled
+  min,
+  max,
+  style,
+  format = defaultFormat,
+  weekStartsOn = 0,
+  clearable = true
 }) {
-  const pickerRef = useRef(null);
-  const calendarRef = useRef(null);
-  const [isExpanded, setExpanded] = useState(false);
-  const [isCloseToBottom, setCloseToBottom] = useState(false);
-  const [currentYear, setCurrentYear] = useState(value.getFullYear());
-  const [currentMonth, setCurrentMonth] = useState(value.getMonth() + 1);
-  const toggle = () => {
-    if (!disabled) setExpanded((p) => !p);
-  };
-  const toNextMonth = () => {
-    if (currentMonth + 1 > 12) {
-      setCurrentMonth(1);
-      setCurrentYear((y) => y + 1);
-    } else setCurrentMonth((m) => m + 1);
-  };
-  const toPrevMonth = () => {
-    if (currentMonth - 1 === 0) {
-      setCurrentMonth(12);
-      setCurrentYear((y) => y - 1);
-    } else setCurrentMonth((m) => m - 1);
-  };
-  const isToday = (d) => {
-    const t = /* @__PURE__ */ new Date();
-    return t.getDate() === d.getDate() && t.getMonth() === d.getMonth() && t.getFullYear() === d.getFullYear();
-  };
-  const isSelected = (d) => value.getDate() === d.getDate() && value.getMonth() === d.getMonth() && value.getFullYear() === d.getFullYear();
-  const isDateDisabled = (d) => {
-    if (disableBefore && d.getTime() < new Date(disableBefore).getTime()) return true;
-    if (disableAfter && d.getTime() > new Date(disableAfter).getTime()) return true;
+  const errorId = useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = useState(false);
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
+  const [focusDate, setFocusDate] = useState(() => value ?? /* @__PURE__ */ new Date());
+  const gridRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const target = value ?? /* @__PURE__ */ new Date();
+    setViewMonth(startOfMonth(target));
+    setFocusDate(target);
+  }, [open, value]);
+  useEffect(() => {
+    if (!open) return;
+    const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
+    cell?.focus();
+  }, [open, focusDate]);
+  const weekdays = useMemo(() => {
+    const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
+    return ordered;
+  }, [weekStartsOn]);
+  const grid = useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
+  const isDisabled = (d) => {
+    if (min && d < min) return true;
+    if (max && d > max) return true;
     return false;
   };
-  const onDateClick = (d) => {
-    const next = new Date(formatDate(d));
-    onChange({ target: { value: next, id: htmlFor, name } });
-    setExpanded(false);
-    setCurrentYear(d.getFullYear());
-    setCurrentMonth(d.getMonth() + 1);
+  const selectDate = (d) => {
+    if (isDisabled(d)) return;
+    onChange?.(d);
+    setOpen(false);
   };
-  const renderCalendar = () => {
-    const days = getMonthDays(currentYear, currentMonth);
-    const firstDay = days[0].getDay();
-    const cols = [[], [], [], [], [], [], []];
-    days.forEach((d) => cols[d.getDay()].push(d));
-    let ordered = [...cols];
-    if (firstDay > 0) {
-      ordered = [...ordered.splice(firstDay), ...ordered];
+  const onKey = (e) => {
+    const next = (delta) => {
+      const nd = addDays(focusDate, delta);
+      setFocusDate(nd);
+      if (nd.getMonth() !== viewMonth.getMonth()) setViewMonth(startOfMonth(nd));
+    };
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      next(-1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      next(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      next(-7);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      next(7);
+    } else if (e.key === "PageUp") {
+      e.preventDefault();
+      const nm = addMonths(viewMonth, -1);
+      setViewMonth(nm);
+      setFocusDate((d) => addMonths(d, -1));
+    } else if (e.key === "PageDown") {
+      e.preventDefault();
+      const nm = addMonths(viewMonth, 1);
+      setViewMonth(nm);
+      setFocusDate((d) => addMonths(d, 1));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      const dow = (focusDate.getDay() - weekStartsOn + 7) % 7;
+      setFocusDate(addDays(focusDate, -dow));
+    } else if (e.key === "End") {
+      e.preventDefault();
+      const dow = (focusDate.getDay() - weekStartsOn + 7) % 7;
+      setFocusDate(addDays(focusDate, 6 - dow));
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      selectDate(focusDate);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
     }
-    return ordered;
   };
-  useEffect(() => {
-    const clickAway = (e) => {
-      if (pickerRef.current && !pickerRef.current.contains(e.target) && calendarRef.current && !calendarRef.current.contains(e.target)) setExpanded(false);
-    };
-    document.addEventListener("mousedown", clickAway);
-    return () => document.removeEventListener("mousedown", clickAway);
-  }, []);
-  useEffect(() => {
-    const bbox = pickerRef.current?.getBoundingClientRect();
-    if (bbox && (bbox.y > window.innerHeight - 220 || bbox.bottom > window.innerHeight - 400)) {
-      setCloseToBottom(true);
-    } else setCloseToBottom(false);
-  }, []);
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex relative ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
-      label && /* @__PURE__ */ jsx("label", { className: "text-md font-bold ml-1 max-content text-prussian-blue dark:text-white", children: label }),
-      /* @__PURE__ */ jsxs(
-        "div",
+  const displayValue = value ? format(value) : "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-center gap-2"}`, children: [
+      label && /* @__PURE__ */ jsx(
+        "label",
         {
-          style,
-          ref: pickerRef,
-          className: `flex items-center justify-between relative h-9 ${disabled ? "bg-disabled cursor-not-allowed" : "bg-white cursor-pointer"} rounded-lg p-2`,
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                onClick: toggle,
-                className: `h-7 focus:outline-none text-prussian-blue ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${!style.width ? "min-w-[240px]" : ""} flex items-center gap-1`,
-                children: formatDate(value)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                onClick: toggle,
-                className: `transition-all duration-300 ml-2 ${isExpanded ? "rotate-180" : "rotate-0 w-4 h-4"}`,
-                children: /* @__PURE__ */ jsx(ChevronDown2, {})
-              }
-            )
-          ]
+          className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+          htmlFor,
+          children: label
         }
       ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref: calendarRef,
-          className: `w-[280px] bg-ice absolute ${isCloseToBottom ? "bottom-[40px]" : "top-[60px]"} z-10 rounded-lg shadow-md transition-all duration-150 ${isExpanded ? "h-max scale-100" : "scale-0 pointer-events-none"}`,
-          children: isExpanded && /* @__PURE__ */ jsxs("div", { className: "pt-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center mx-auto w-max", children: [
-              /* @__PURE__ */ jsx("span", { onClick: () => setCurrentYear((y) => y - 1), className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(DoubleChevronRight2, {}) }),
-              /* @__PURE__ */ jsx("span", { onClick: toPrevMonth, className: "cursor-pointer rotate-180 p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(ChevronRight3, {}) }),
-              /* @__PURE__ */ jsxs("span", { className: "font-bold text-prussian-blue select-none w-[130px] text-center", children: [
-                currentYear,
-                " ",
-                MONTHS[currentMonth]
+      /* @__PURE__ */ jsxs(Popover.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsx(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            id: htmlFor,
+            type: "button",
+            disabled,
+            style,
+            "aria-invalid": hasError || void 0,
+            "aria-describedby": hasError ? errorId : void 0,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            className: `flex items-center justify-between h-9 rounded-lg border px-3 cursor-pointer select-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${hasError ? "border-status-error" : "border-border"} ${disabled ? "cursor-not-allowed bg-surface-raised text-foreground-muted" : "bg-surface text-foreground"} ${!style?.width ? "min-w-[200px]" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: `text-sm truncate ${displayValue ? "" : "text-foreground-muted"}`, children: displayValue || placeholder }),
+              /* @__PURE__ */ jsx(CalendarIcon, {})
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+          Popover.Content,
+          {
+            align: "start",
+            sideOffset: 4,
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setViewMonth(addMonths(viewMonth, -1)),
+                    "aria-label": "Previous month",
+                    className: "w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors",
+                    children: /* @__PURE__ */ jsx(ChevronLeft, {})
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-sm font-semibold select-none", children: [
+                  MONTH_NAMES[viewMonth.getMonth()],
+                  " ",
+                  viewMonth.getFullYear()
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setViewMonth(addMonths(viewMonth, 1)),
+                    "aria-label": "Next month",
+                    className: "w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors",
+                    children: /* @__PURE__ */ jsx(ChevronRight3, {})
+                  }
+                )
               ] }),
-              /* @__PURE__ */ jsx("span", { onClick: toNextMonth, className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(ChevronRight3, {}) }),
-              /* @__PURE__ */ jsx("span", { onClick: () => setCurrentYear((y) => y + 1), className: "cursor-pointer p-1 rounded-lg hover:bg-ice-dark transition-all duration-300", children: /* @__PURE__ */ jsx(DoubleChevronRight2, {}) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: "flex gap-3 p-2", children: renderCalendar().map((weekDay, index) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-center font-bold text-sm text-prussian-blue", children: weekDay[0] ? DAYS[weekDay[0].getDay()] : "" }),
-              weekDay.map((day) => /* @__PURE__ */ jsx(
-                "div",
+              /* @__PURE__ */ jsxs(
+                "table",
                 {
-                  onClick: () => !isDateDisabled(day) && onDateClick(day),
-                  className: `cursor-pointer flex items-center justify-center text-prussian-blue rounded-md w-6 h-6 transition-all duration-300
-                                                    ${isToday(day) ? "border border-prussian-blue" : ""}
-                                                    ${isSelected(day) ? "bg-prussian-blue text-white" : ""}
-                                                    ${!isSelected(day) ? "hover:bg-ice-dark" : ""}
-                                                    ${isDateDisabled(day) ? "bg-ice-dark text-roman-silver cursor-not-allowed pointer-events-none" : ""}`,
-                  children: day.getDate()
-                },
-                day.getDate()
-              ))
-            ] }, index)) }),
-            /* @__PURE__ */ jsx("div", { className: "pb-2 pr-2 flex items-center justify-end", children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                onClick: () => onDateClick(/* @__PURE__ */ new Date()),
-                content: "Today",
-                style: { width: "max-content", padding: "0px 5px", margin: "0" }
-              }
-            ) })
-          ] })
-        }
-      )
+                  ref: gridRef,
+                  role: "grid",
+                  "aria-label": `${MONTH_NAMES[viewMonth.getMonth()]} ${viewMonth.getFullYear()}`,
+                  onKeyDown: onKey,
+                  className: "border-separate border-spacing-0",
+                  children: [
+                    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdays.map((w) => /* @__PURE__ */ jsx("th", { scope: "col", className: "text-[11px] font-medium text-foreground-muted uppercase tracking-wide w-8 h-8", children: w }, w)) }) }),
+                    /* @__PURE__ */ jsx("tbody", { children: grid.map((row, ri) => /* @__PURE__ */ jsx("tr", { children: row.map(({ date, outside }) => {
+                      const dis = isDisabled(date);
+                      const sel = value ? isSameDay(date, value) : false;
+                      const focused = isSameDay(date, focusDate);
+                      const today = isSameDay(date, /* @__PURE__ */ new Date());
+                      return /* @__PURE__ */ jsx("td", { role: "gridcell", className: "p-0", children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          disabled: dis,
+                          tabIndex: focused ? 0 : -1,
+                          "data-day": defaultFormat(date),
+                          "aria-label": defaultFormat(date),
+                          "aria-selected": sel || void 0,
+                          onClick: () => selectDate(date),
+                          className: [
+                            "w-8 h-8 rounded-md text-xs font-medium transition-colors duration-100",
+                            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-surface",
+                            "disabled:opacity-30 disabled:cursor-not-allowed",
+                            sel ? "bg-accent text-accent-fg" : today ? "bg-surface-raised text-foreground ring-1 ring-inset ring-accent" : outside ? "text-foreground-muted hover:bg-surface-raised" : "text-foreground hover:bg-surface-raised"
+                          ].join(" "),
+                          children: date.getDate()
+                        }
+                      ) }, defaultFormat(date));
+                    }) }, ri)) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between gap-2 border-t border-border pt-2", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => selectDate(/* @__PURE__ */ new Date()),
+                    className: "text-xs text-accent hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded-sm px-1",
+                    children: "Today"
+                  }
+                ),
+                clearable && value && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      onChange?.(null);
+                      setOpen(false);
+                    },
+                    className: "text-xs text-foreground-secondary hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent rounded-sm px-1",
+                    children: "Clear"
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+    hasError && /* @__PURE__ */ jsx("div", { id: errorId, className: "text-xs text-status-error ml-1", children: errorMessage })
   ] });
 }
-function TemporalPickerBase({
-  value,
-  onChange,
-  lowerLimit = 2e3,
-  upperLimit = (/* @__PURE__ */ new Date()).getFullYear(),
-  errorMessage,
-  label,
-  layout,
-  style = {}
-}) {
-  const pickerRef = useRef(null);
-  const calendarRef = useRef(null);
-  const valueRefs = useRef([]);
-  const [isExpanded, setExpanded] = useState(false);
-  const [isCloseToBottom, setCloseToBottom] = useState(false);
-  const innerValues = useMemo(() => {
-    const vals = [];
-    for (let i = lowerLimit; i <= upperLimit; i++) vals.push(i);
-    return vals;
-  }, [lowerLimit, upperLimit]);
-  useEffect(() => {
-    const clickAway = (e) => {
-      if (pickerRef.current && !pickerRef.current.contains(e.target) && calendarRef.current && !calendarRef.current.contains(e.target)) setExpanded(false);
-    };
-    document.addEventListener("mousedown", clickAway);
-    return () => document.removeEventListener("mousedown", clickAway);
-  }, []);
-  useEffect(() => {
-    const bbox = pickerRef.current?.getBoundingClientRect();
-    if (bbox && bbox.y > window.innerHeight - 220) setCloseToBottom(true);
-    else setCloseToBottom(false);
-  }, []);
-  useEffect(() => {
-    if (!isExpanded) return;
-    const t = setTimeout(() => {
-      const node = valueRefs.current.find((n) => n.value === value);
-      node?.ref.scrollIntoView({ block: "end", inline: "nearest", behavior: "smooth" });
-    }, 150);
-    return () => clearTimeout(t);
-  }, [isExpanded, value]);
-  const navigate = (delta) => {
-    const next = value + delta;
-    if (next < lowerLimit || next > upperLimit) return;
-    onChange({ target: { value: next } });
-    const node = valueRefs.current.find((n) => n.value === next);
-    node?.ref.scrollIntoView({ block: "end", inline: "nearest", behavior: "smooth" });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "mt-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: `flex relative ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
-      label && /* @__PURE__ */ jsx("label", { className: "text-md font-bold ml-1 max-content text-prussian-blue dark:text-white", children: label }),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style,
-          ref: pickerRef,
-          className: "flex items-center justify-between relative h-9 bg-white rounded-lg p-2 cursor-pointer",
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                onClick: () => setExpanded((p) => !p),
-                className: `h-7 ${!style.width ? "min-w-[240px]" : ""} focus:outline-none text-prussian-blue cursor-pointer flex items-center gap-1`,
-                children: innerValues.includes(value) ? value : "N/A"
-              }
-            ),
-            /* @__PURE__ */ jsx("div", { onClick: () => setExpanded((p) => !p), className: `transition-all duration-300 ml-2 ${isExpanded ? "rotate-180" : "rotate-0 w-4 h-4"}`, children: /* @__PURE__ */ jsx(ChevronDown2, {}) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: { width: style.width },
-          ref: calendarRef,
-          className: `${!style.width ? "w-[280px]" : ""} bg-ice absolute z-10 ${isCloseToBottom ? "bottom-[40px]" : "top-10"} rounded-lg shadow-md transition-all duration-150 right-0 overflow-hidden ${isExpanded ? "h-max scale-100" : "scale-0 pointer-events-none"}`,
-          children: [
-            /* @__PURE__ */ jsx("div", { onClick: () => navigate(-1), className: "flex items-center justify-center rotate-180 transition-all duration-300 hover:bg-ice-dark cursor-pointer rounded-br-lg rounded-bl-lg", children: /* @__PURE__ */ jsx(ChevronDown2, {}) }),
-            /* @__PURE__ */ jsx("div", { className: "h-8 overflow-hidden", children: innerValues.map((val) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                ref: (ref) => {
-                  if (!valueRefs.current.find((n) => n.value === val) && ref)
-                    valueRefs.current.push({ value: val, ref });
-                },
-                className: "font-bold text-center text-lg",
-                children: val
-              },
-              val
-            )) }),
-            /* @__PURE__ */ jsx("div", { onClick: () => navigate(1), className: "flex items-center justify-center transition-all hover:bg-ice-dark cursor-pointer rounded-br-lg rounded-bl-lg", children: /* @__PURE__ */ jsx(ChevronDown2, {}) })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "text-center text-error dark:text-prussian-blue min-h-0", children: errorMessage })
+function CalendarIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, className: "w-4 h-4 flex-shrink-0", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 9h18M8 3v4M16 3v4", strokeLinecap: "round" })
   ] });
 }
-var Temporal = {};
-Temporal.DatePicker = DatePickerBase;
-Temporal.TemporalPicker = TemporalPickerBase;
-var DatePicker_default = Temporal;
+function ChevronLeft() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) });
+}
+function ChevronRight3() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
+}
 
-export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
+export { AppShell, AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, Portal, ScalableContainer, SearchInput_default as SearchInput, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Switch, Table, Tabs, DatePicker as Temporal, TextInput, ThemeProvider, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map