@geomak/ui 4.0.0 → 5.0.1

package/dist/index.js

@@ -2804,7 +2804,7 @@ function NumberInput({
         "div",
         {
           style,
-          className: `flex items-center rounded-lg border ${hasError ? "border-status-error" : "border-border"} ${disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : "bg-surface text-foreground"} focus-within:ring-2 focus-within:ring-accent transition-colors`,
+          className: `flex items-center rounded-lg border overflow-hidden ${hasError ? "border-status-error" : "border-border"} ${disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : "bg-surface text-foreground"} focus-within:ring-2 focus-within:ring-accent transition-colors`,
           children: [
             /* @__PURE__ */ jsx(
               "input",
@@ -3024,25 +3024,22 @@ function Switch({
   uncheckedIcon
 }) {
   const id = useId();
-  return /* @__PURE__ */ jsxs("div", { children: [
-    "// mr-12 was a hardcoded right margin that broke layouts; spacing // is the parent's responsibility now.",
-    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer select-none", children: /* @__PURE__ */ jsx(
-      SwitchPrimitive.Root,
-      {
-        id,
-        checked,
-        onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
-        className: "relative inline-flex h-6 w-14 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
-        children: /* @__PURE__ */ jsx(
-          SwitchPrimitive.Thumb,
-          {
-            className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
-            children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
-          }
-        )
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer select-none", children: /* @__PURE__ */ jsx(
+    SwitchPrimitive.Root,
+    {
+      id,
+      checked,
+      onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
+      className: "relative inline-flex h-6 w-14 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+      children: /* @__PURE__ */ jsx(
+        SwitchPrimitive.Thumb,
+        {
+          className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
+          children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
+        }
+      )
+    }
+  ) }) });
 }
 function AutoComplete({
   disabled,
@@ -3185,11 +3182,17 @@ function TreeSelect({
   const [activeIndex, setActiveIndex] = useState(0);
   const listRef = useRef(null);
   const visible = useMemo(() => flattenVisible(items, expanded), [items, expanded]);
+  const didSyncOnOpenRef = useRef(false);
   useEffect(() => {
-    if (!open) return;
+    if (!open) {
+      didSyncOnOpenRef.current = false;
+      return;
+    }
+    if (didSyncOnOpenRef.current) return;
     const selectedIdx = visible.findIndex((v) => v.node.key === value);
     setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
-  }, [open, visible, value]);
+    didSyncOnOpenRef.current = true;
+  }, [open, value]);
   const selectedNode = useMemo(
     () => value != null ? findNodeByKey(items, value) : null,
     [items, value]
@@ -3503,295 +3506,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