@geomak/ui 5.4.0 → 5.5.0

package/dist/index.cjs

@@ -1835,8 +1835,8 @@ function CatalogCarousel({ items, buttonText, onOpen }) {
     )
   ] }) });
 }
-function Catalog({ display = "grid", items = [], buttonText, onOpen }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: display === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsxRuntime.jsx(CatalogCarousel, { items, buttonText, onOpen }) });
+function Catalog({ display: display2 = "grid", items = [], buttonText, onOpen }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: display2 === "grid" ? /* @__PURE__ */ jsxRuntime.jsx(CatalogGrid, { items, buttonText, onOpen }) : /* @__PURE__ */ jsxRuntime.jsx(CatalogCarousel, { items, buttonText, onOpen }) });
 }
 function ContextMenu({ items, children }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenuPrimitive__namespace.Root, { children: [
@@ -5036,6 +5036,646 @@ function TagsInput({
     }
   );
 }
+var BOX_SIZE = {
+  sm: "h-9 w-8 text-sm",
+  md: "h-11 w-10 text-base",
+  lg: "h-14 w-12 text-lg"
+};
+function OtpInput({
+  length = 6,
+  value = "",
+  onChange,
+  onComplete,
+  label,
+  htmlFor,
+  name,
+  mode = "numeric",
+  masked = false,
+  size = "md",
+  disabled,
+  errorMessage,
+  required,
+  groupAfter
+}) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
+  const refs = React8.useRef([]);
+  const chars = Array.from({ length }, (_, i) => value[i] ?? "");
+  const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
+  const emit = (next) => {
+    onChange?.(next);
+    if (next.length === length && !next.includes(" ") && [...next].every(Boolean)) {
+      onComplete?.(next);
+    }
+  };
+  const setCharAt = (idx, char) => {
+    const arr = chars.slice();
+    arr[idx] = char;
+    emit(arr.join(""));
+  };
+  const focusBox = (idx) => {
+    const el = refs.current[Math.max(0, Math.min(length - 1, idx))];
+    el?.focus();
+    el?.select();
+  };
+  const onBoxChange = (idx, raw) => {
+    const char = raw.slice(-1);
+    if (char && !pattern.test(char)) return;
+    setCharAt(idx, char);
+    if (char) focusBox(idx + 1);
+  };
+  const onKeyDown = (idx, e) => {
+    if (e.key === "Backspace") {
+      if (chars[idx]) {
+        setCharAt(idx, "");
+      } else if (idx > 0) {
+        setCharAt(idx - 1, "");
+        focusBox(idx - 1);
+      }
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusBox(idx - 1);
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusBox(idx + 1);
+    }
+  };
+  const onPaste = (e) => {
+    e.preventDefault();
+    const text = e.clipboardData.getData("text").trim();
+    const valid = [...text].filter((c) => pattern.test(c)).slice(0, length);
+    if (valid.length === 0) return;
+    emit(valid.join(""));
+    focusBox(valid.length);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, required, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[idx] = el;
+        },
+        id: idx === 0 ? htmlFor : void 0,
+        name: idx === 0 ? name : void 0,
+        value: char,
+        disabled,
+        inputMode: mode === "numeric" ? "numeric" : "text",
+        autoComplete: idx === 0 ? "one-time-code" : "off",
+        type: masked && char ? "password" : "text",
+        maxLength: 1,
+        "aria-label": `Digit ${idx + 1}`,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        onChange: (e) => onBoxChange(idx, e.target.value),
+        onKeyDown: (e) => onKeyDown(idx, e),
+        onPaste,
+        onFocus: (e) => e.target.select(),
+        className: [
+          BOX_SIZE[size],
+          "text-center font-medium rounded-lg border bg-surface text-foreground",
+          "transition-[border-color,box-shadow] duration-150",
+          hasError ? "border-status-error" : "border-border",
+          "hover:border-border-strong",
+          "focus:outline-none focus:border-accent focus:ring-[3px] focus:ring-focus-ring",
+          "disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed"
+        ].join(" ")
+      }
+    ),
+    groupAfter && (idx + 1) % groupAfter === 0 && idx < length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 text-center text-foreground-muted", "aria-hidden": "true", children: "\xB7" })
+  ] }, idx)) }) });
+}
+var ICON_SIZE = { sm: "w-4 h-4", md: "w-5 h-5", lg: "w-7 h-7" };
+var Star = (filled) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: filled ? "currentColor" : "none", stroke: "currentColor", strokeWidth: filled ? 0 : 1.5, className: "w-full h-full", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11.48 3.5a.56.56 0 011.04 0l2.13 4.77 5.18.5a.56.56 0 01.32.97l-3.9 3.46 1.15 5.1a.56.56 0 01-.83.6L12 16.8l-4.57 2.6a.56.56 0 01-.83-.6l1.15-5.1-3.9-3.46a.56.56 0 01.32-.97l5.18-.5L11.48 3.5z" }) });
+function Rating({
+  value,
+  defaultValue = 0,
+  onChange,
+  count = 5,
+  allowHalf = false,
+  readOnly = false,
+  clearable = true,
+  label,
+  size = "md",
+  disabled,
+  icon = Star,
+  errorMessage,
+  name
+}) {
+  const errorId = React8.useId();
+  const [internal, setInternal] = React8.useState(defaultValue);
+  const [hover, setHover] = React8.useState(null);
+  const current = value ?? internal;
+  const display2 = hover ?? current;
+  const interactive = !readOnly && !disabled;
+  const commit = (next) => {
+    const v = clearable && next === current ? 0 : next;
+    setInternal(v);
+    onChange?.(v);
+  };
+  const onKeyDown = (e) => {
+    if (!interactive) return;
+    const step = allowHalf ? 0.5 : 1;
+    if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+      e.preventDefault();
+      commit(Math.min(count, current + step));
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+      e.preventDefault();
+      commit(Math.max(0, current - step));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      commit(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      commit(count);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, errorId, errorMessage, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: interactive ? "slider" : "img",
+      "aria-label": typeof label === "string" ? label : "Rating",
+      "aria-valuenow": interactive ? current : void 0,
+      "aria-valuemin": interactive ? 0 : void 0,
+      "aria-valuemax": interactive ? count : void 0,
+      "aria-valuetext": `${current} of ${count}`,
+      tabIndex: interactive ? 0 : -1,
+      onKeyDown,
+      onMouseLeave: () => setHover(null),
+      className: "inline-flex items-center gap-1 text-accent focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring rounded-md w-max",
+      children: [
+        name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: current }),
+        Array.from({ length: count }, (_, i) => {
+          const starValue = i + 1;
+          const fillFraction = Math.max(0, Math.min(1, display2 - i));
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: `relative ${ICON_SIZE[size]} ${interactive ? "cursor-pointer" : ""} ${disabled ? "opacity-50" : ""}`,
+              onMouseMove: (e) => {
+                if (!interactive) return;
+                if (allowHalf) {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const half = e.clientX - rect.left < rect.width / 2;
+                  setHover(i + (half ? 0.5 : 1));
+                } else {
+                  setHover(starValue);
+                }
+              },
+              onClick: (e) => {
+                if (!interactive) return;
+                if (allowHalf) {
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  const half = e.clientX - rect.left < rect.width / 2;
+                  commit(i + (half ? 0.5 : 1));
+                } else {
+                  commit(starValue);
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 text-foreground-muted", children: icon(false) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 overflow-hidden",
+                    style: { width: `${fillFraction * 100}%` },
+                    children: icon(true)
+                  }
+                )
+              ]
+            },
+            i
+          );
+        })
+      ]
+    }
+  ) });
+}
+var pad = (n) => n.toString().padStart(2, "0");
+function parse(value) {
+  if (!value) return null;
+  const [h, m, s] = value.split(":").map(Number);
+  if (Number.isNaN(h) || Number.isNaN(m)) return null;
+  return { h, m, s: Number.isNaN(s) ? 0 : s };
+}
+function display(value, use12, withSeconds) {
+  const p = parse(value);
+  if (!p) return "";
+  if (use12) {
+    const period = p.h >= 12 ? "PM" : "AM";
+    const h12 = p.h % 12 === 0 ? 12 : p.h % 12;
+    return `${h12}:${pad(p.m)}${withSeconds ? `:${pad(p.s)}` : ""} ${period}`;
+  }
+  return `${pad(p.h)}:${pad(p.m)}${withSeconds ? `:${pad(p.s)}` : ""}`;
+}
+function TimePicker({
+  value,
+  onChange,
+  label,
+  htmlFor,
+  name,
+  placeholder = "Select a time\u2026",
+  layout = "vertical",
+  size = "md",
+  use12Hours = false,
+  withSeconds = false,
+  minuteStep = 1,
+  disabled,
+  errorMessage,
+  required,
+  style
+}) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = React8.useState(false);
+  const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
+  const update = (next) => {
+    const merged = { ...parsed, ...next };
+    onChange?.(`${pad(merged.h)}:${pad(merged.m)}${withSeconds ? `:${pad(merged.s)}` : ""}`);
+  };
+  const hours = use12Hours ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  const seconds = Array.from({ length: 60 }, (_, i) => i);
+  const selectedHourCol = use12Hours ? parsed.h % 12 === 0 ? 12 : parsed.h % 12 : parsed.h;
+  const period = parsed.h >= 12 ? "PM" : "AM";
+  const setHour12 = (h12, p) => {
+    const h24 = p === "AM" ? h12 === 12 ? 0 : h12 : h12 === 12 ? 12 : h12 + 12;
+    update({ h: h24 });
+  };
+  const Column = ({ items, selected, onPick, fmt }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col overflow-y-auto max-h-48 w-14 hidden-scrollbar", role: "listbox", children: items.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected === n,
+      onClick: () => onPick(n),
+      className: `py-1.5 text-sm rounded-md text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${selected === n ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+      children: fmt ? fmt(n) : pad(n)
+    },
+    n
+  )) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          id: htmlFor,
+          type: "button",
+          disabled,
+          style,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          className: `flex items-center justify-between cursor-pointer select-none ${!style?.width ? "min-w-[160px]" : ""} ${fieldShell({ size, hasError, disabled })}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm truncate ${value ? "" : "text-foreground-muted"}`, children: display(value, use12Hours, withSeconds) || placeholder }),
+            /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, className: "w-4 h-4 flex-shrink-0 text-foreground-muted ml-2", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 7v5l3 2", strokeLinecap: "round" })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Popover__namespace.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 flex gap-1 animate-in fade-in-0 zoom-in-95",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Column,
+              {
+                items: hours,
+                selected: selectedHourCol,
+                onPick: (h) => use12Hours ? setHour12(h, period) : update({ h }),
+                fmt: use12Hours ? (n) => String(n) : pad
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(Column, { items: minutes, selected: parsed.m, onPick: (m) => update({ m }) }),
+            withSeconds && /* @__PURE__ */ jsxRuntime.jsx(Column, { items: seconds, selected: parsed.s, onPick: (s) => update({ s }) }),
+            use12Hours && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 w-12", children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setHour12(selectedHourCol, p),
+                className: `py-1.5 text-sm rounded-md transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${period === p ? "bg-accent text-accent-fg" : "text-foreground hover:bg-surface-raised"}`,
+                children: p
+              },
+              p
+            )) })
+          ]
+        }
+      ) })
+    ] }),
+    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: value ?? "" })
+  ] });
+}
+var MONTH_NAMES2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+var WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+var startOfMonth2 = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
+var addMonths2 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
+var addDays2 = (d, n) => {
+  const c = new Date(d);
+  c.setDate(c.getDate() + n);
+  return c;
+};
+var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var defaultFmt = (d) => `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, "0")}-${`${d.getDate()}`.padStart(2, "0")}`;
+function buildGrid2(viewMonth, weekStartsOn) {
+  const first = startOfMonth2(viewMonth);
+  const offset = (first.getDay() - weekStartsOn + 7) % 7;
+  const gridStart = addDays2(first, -offset);
+  return Array.from({ length: 42 }, (_, i) => {
+    const d = addDays2(gridStart, i);
+    return { date: d, outside: d.getMonth() !== viewMonth.getMonth() };
+  });
+}
+function DateRangePicker({
+  value = { start: null, end: null },
+  onChange,
+  label,
+  htmlFor,
+  placeholder = "Select a date range\u2026",
+  layout = "vertical",
+  size = "md",
+  min,
+  max,
+  weekStartsOn = 0,
+  presets,
+  format = defaultFmt,
+  disabled,
+  errorMessage,
+  required,
+  style
+}) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = React8.useState(false);
+  const [leftMonth, setLeftMonth] = React8.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
+  const [pendingStart, setPendingStart] = React8.useState(null);
+  const [hoverDate, setHoverDate] = React8.useState(null);
+  const weekdays = React8.useMemo(
+    () => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
+    [weekStartsOn]
+  );
+  const isDisabled = (d) => min && d < startOfDay(min) || max && d > startOfDay(max);
+  const effective = pendingStart ? { start: pendingStart, end: hoverDate } : value;
+  const inRange = (d) => {
+    const { start, end } = effective;
+    if (!start || !end) return false;
+    const [a, b] = start <= end ? [start, end] : [end, start];
+    return d >= startOfDay(a) && d <= startOfDay(b);
+  };
+  const onDayClick = (d) => {
+    if (isDisabled(d)) return;
+    if (!pendingStart) {
+      setPendingStart(d);
+      setHoverDate(d);
+      onChange?.({ start: d, end: null });
+    } else {
+      const [start, end] = pendingStart <= d ? [pendingStart, d] : [d, pendingStart];
+      onChange?.({ start, end });
+      setPendingStart(null);
+      setHoverDate(null);
+      setOpen(false);
+    }
+  };
+  const triggerText = value.start && value.end ? `${format(value.start)} \u2013 ${format(value.end)}` : value.start ? `${format(value.start)} \u2013 \u2026` : "";
+  const renderMonth = (viewMonth) => {
+    const cells = buildGrid2(viewMonth, weekStartsOn);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-center mb-2 select-none", children: [
+        MONTH_NAMES2[viewMonth.getMonth()],
+        " ",
+        viewMonth.getFullYear()
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-7 gap-y-1", children: [
+        weekdays.map((w) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] font-medium text-foreground-muted uppercase text-center", children: w }, w)),
+        cells.map(({ date, outside }) => {
+          const dis = isDisabled(date);
+          const isStart = effective.start && isSameDay2(date, effective.start);
+          const isEnd = effective.end && isSameDay2(date, effective.end);
+          const within = inRange(date) && !isStart && !isEnd;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              disabled: dis,
+              onMouseEnter: () => pendingStart && setHoverDate(date),
+              onClick: () => onDayClick(date),
+              className: [
+                "h-8 text-xs font-medium transition-colors",
+                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                "disabled:opacity-30 disabled:cursor-not-allowed",
+                isStart || isEnd ? "bg-accent text-accent-fg rounded-md" : within ? "bg-surface-raised text-foreground rounded-none" : outside ? "text-foreground-muted hover:bg-surface-raised rounded-md" : "text-foreground hover:bg-surface-raised rounded-md"
+              ].join(" "),
+              children: date.getDate()
+            },
+            defaultFmt(date)
+          );
+        })
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => {
+    if (!disabled) {
+      setOpen(o);
+      if (!o) {
+        setPendingStart(null);
+        setHoverDate(null);
+      }
+    }
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        id: htmlFor,
+        type: "button",
+        disabled,
+        style,
+        "aria-invalid": hasError || void 0,
+        "aria-describedby": hasError ? errorId : void 0,
+        className: `flex items-center justify-between cursor-pointer select-none ${!style?.width ? "min-w-[240px]" : ""} ${fieldShell({ size, hasError, disabled })}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm truncate ${triggerText ? "" : "text-foreground-muted"}`, children: triggerText || placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, className: "w-4 h-4 flex-shrink-0 text-foreground-muted ml-2", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9h18M8 3v4M16 3v4", strokeLinecap: "round" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Popover__namespace.Content,
+      {
+        align: "start",
+        sideOffset: 4,
+        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 flex gap-3 animate-in fade-in-0 zoom-in-95",
+        children: [
+          presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 pr-3 border-r border-border min-w-[120px]", children: presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onChange?.(p.range());
+                setOpen(false);
+              },
+              className: "text-left text-xs px-2 py-1.5 rounded-md text-foreground-secondary hover:bg-surface-raised hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+              children: p.label
+            },
+            p.label
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setLeftMonth(addMonths2(leftMonth, -1)),
+                  "aria-label": "Previous month",
+                  className: "absolute -top-1 left-0 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",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
+                }
+              ),
+              renderMonth(leftMonth)
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setLeftMonth(addMonths2(leftMonth, 1)),
+                  "aria-label": "Next month",
+                  className: "absolute -top-1 right-0 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",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+                }
+              ),
+              renderMonth(addMonths2(leftMonth, 1))
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] }) });
+}
+var DEFAULT_SWATCHES = [
+  "#0466c8",
+  "#1e8449",
+  "#d68910",
+  "#c0392b",
+  "#8e44ad",
+  "#16a085",
+  "#2c3e50",
+  "#7f8c8d",
+  "#e84393",
+  "#00b894",
+  "#fdcb6e",
+  "#0a1929"
+];
+var HEX_RE = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
+function ColorPicker({
+  value = "",
+  onChange,
+  label,
+  htmlFor,
+  name,
+  layout = "vertical",
+  size = "md",
+  swatches = DEFAULT_SWATCHES,
+  allowCustom = true,
+  disabled,
+  errorMessage,
+  required,
+  placeholder = "Pick a colour\u2026"
+}) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
+  const [open, setOpen] = React8.useState(false);
+  const [draft, setDraft] = React8.useState(value);
+  const valid = HEX_RE.test(value);
+  const pick = (hex) => {
+    onChange?.(hex);
+    setDraft(hex);
+  };
+  const commitDraft = (raw) => {
+    const hex = raw.startsWith("#") ? raw : `#${raw}`;
+    setDraft(hex);
+    if (HEX_RE.test(hex)) onChange?.(hex);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field, { label, htmlFor, errorId, errorMessage, layout, required, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          id: htmlFor,
+          type: "button",
+          disabled,
+          "aria-invalid": hasError || void 0,
+          "aria-describedby": hasError ? errorId : void 0,
+          className: `flex items-center gap-2 cursor-pointer select-none ${fieldShell({ size, hasError, disabled })}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "h-4 w-4 flex-shrink-0 rounded border border-border",
+                style: { backgroundColor: valid ? value : "transparent" },
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex-1 text-left text-sm truncate ${valid ? "text-foreground" : "text-foreground-muted"}`, children: valid ? value.toLowerCase() : placeholder })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        Popover__namespace.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 w-56 animate-in fade-in-0 zoom-in-95",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-2 mb-3", children: swatches.map((sw) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  pick(sw);
+                  setOpen(false);
+                },
+                "aria-label": sw,
+                className: `h-7 w-7 rounded-md border transition-transform hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${value.toLowerCase() === sw.toLowerCase() ? "border-accent ring-2 ring-focus-ring" : "border-border"}`,
+                style: { backgroundColor: sw }
+              },
+              sw
+            )) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  value: draft,
+                  onChange: (e) => commitDraft(e.target.value),
+                  placeholder: "#0466c8",
+                  "aria-label": "Hex colour",
+                  className: `flex-1 ${fieldShell({ size: "sm" })}`
+                }
+              ),
+              allowCustom && /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "color",
+                  value: valid ? value : "#000000",
+                  onChange: (e) => pick(e.target.value),
+                  "aria-label": "Custom colour",
+                  className: "h-7 w-9 rounded-md border border-border bg-surface cursor-pointer p-0.5"
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] }),
+    name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: valid ? value : "" })
+  ] });
+}
 
 Object.defineProperty(exports, "COLORS", {
   enumerable: true,
@@ -5062,7 +5702,9 @@ exports.Catalog = Catalog;
 exports.CatalogCarousel = CatalogCarousel;
 exports.CatalogGrid = CatalogGrid;
 exports.Checkbox = Checkbox;
+exports.ColorPicker = ColorPicker;
 exports.ContextMenu = ContextMenu;
+exports.DateRangePicker = DateRangePicker;
 exports.Drawer = Drawer;
 exports.Dropdown = Dropdown;
 exports.FadingBase = FadingBase;
@@ -5079,9 +5721,11 @@ exports.Modal = Modal;
 exports.NotificationProvider = NotificationProvider;
 exports.NumberInput = NumberInput;
 exports.OpaqueGridCard = OpaqueGridCard;
+exports.OtpInput = OtpInput;
 exports.Password = Password;
 exports.Portal = Portal;
 exports.RadioGroup = RadioGroup;
+exports.Rating = Rating;
 exports.ScalableContainer = ScalableContainer;
 exports.SearchInput = SearchInput_default;
 exports.SegmentedControl = SegmentedControl;
@@ -5100,6 +5744,7 @@ exports.TextArea = TextArea;
 exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitch = ThemeSwitch;
+exports.TimePicker = TimePicker;
 exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;