@devalok/shilp-sutra 0.31.0 → 0.33.0

package/dist/_chunks/date-time-picker.js

@@ -0,0 +1,851 @@
+"use client";
+import { jsxs as M, jsx as t } from "react/jsx-runtime";
+import * as d from "react";
+import { format as U, setMonth as ae, setYear as oe, endOfDay as B, startOfYear as be, subMonths as me, endOfMonth as ce, startOfMonth as le, startOfDay as _, subDays as ne, addMonths as ie, isBefore as pe, isAfter as xe, setHours as K, setMinutes as q, setSeconds as de } from "date-fns";
+import { IconCalendarEvent as fe, IconClock as Me, IconCalendarClock as ye } from "@tabler/icons-react";
+import { Icon as W } from "../ui/icon.js";
+import { cn as N } from "../ui/lib/utils.js";
+import { Popover as X, PopoverTrigger as Z, PopoverContent as ee } from "../ui/popover.js";
+import { C as Q } from "./use-calendar.js";
+const te = d.forwardRef(
+  function({
+    currentYear: e,
+    selectedYear: f,
+    onYearSelect: u,
+    minDate: h,
+    maxDate: S,
+    className: b,
+    ...y
+  }, C) {
+    const w = Math.floor(e / 10) * 10, H = Array.from({ length: 12 }, (i, s) => w + s), [k, R] = d.useState(() => {
+      const i = H.indexOf(f ?? e);
+      return i >= 0 ? i : 0;
+    }), m = d.useRef([]), g = (i) => h != null && i < h.getFullYear() || S != null && i > S.getFullYear(), o = (i) => {
+      let s = k;
+      switch (i.key) {
+        case "ArrowRight":
+          s = Math.min(11, k + 1);
+          break;
+        case "ArrowLeft":
+          s = Math.max(0, k - 1);
+          break;
+        case "ArrowDown":
+          s = Math.min(11, k + 3);
+          break;
+        case "ArrowUp":
+          s = Math.max(0, k - 3);
+          break;
+        case "Home":
+          s = 0;
+          break;
+        case "End":
+          s = 11;
+          break;
+        default:
+          return;
+      }
+      for (i.preventDefault(); s !== k && g(H[s]); )
+        if (s += i.key === "ArrowLeft" || i.key === "ArrowUp" ? -1 : 1, s < 0 || s > 11) return;
+      R(s), m.current[s]?.focus();
+    };
+    return /* @__PURE__ */ M("div", { ref: C, ...y, className: N("w-[252px]", b), children: [
+      /* @__PURE__ */ M("div", { className: "text-center pb-ds-04 text-ds-md font-semibold text-surface-fg", children: [
+        w,
+        " – ",
+        w + 11
+      ] }),
+      /* @__PURE__ */ t("div", { role: "grid", "aria-label": "Year picker", tabIndex: -1, onKeyDown: o, children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ t("div", { role: "row", className: "grid grid-cols-3 gap-ds-02 mb-ds-02 last:mb-0", children: H.slice(i * 3, i * 3 + 3).map((s) => {
+        const P = H.indexOf(s), x = s === f, A = g(s);
+        return /* @__PURE__ */ t(
+          "button",
+          {
+            ref: (v) => {
+              m.current[P] = v;
+            },
+            type: "button",
+            role: "gridcell",
+            tabIndex: P === k ? 0 : -1,
+            disabled: A || !1,
+            onClick: () => !A && u(s),
+            className: N(
+              "h-ds-sm-plus rounded-ds-md text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+              A && "opacity-action-disabled pointer-events-none cursor-not-allowed",
+              x && "bg-accent-9 text-accent-fg",
+              !x && !A && "hover:bg-surface-raised-hover text-surface-fg"
+            ),
+            children: s
+          },
+          s
+        );
+      }) }, i)) })
+    ] });
+  }
+);
+te.displayName = "YearPicker";
+const we = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+], se = d.forwardRef(
+  function({
+    currentYear: e,
+    selectedMonth: f,
+    onMonthSelect: u,
+    minDate: h,
+    maxDate: S,
+    className: b,
+    ...y
+  }, C) {
+    const [w, H] = d.useState(f ?? 0), k = d.useRef([]), R = (g) => h != null && (e < h.getFullYear() || e === h.getFullYear() && g < h.getMonth()) || S != null && (e > S.getFullYear() || e === S.getFullYear() && g > S.getMonth()), m = (g) => {
+      let o = w;
+      switch (g.key) {
+        case "ArrowRight":
+          o = Math.min(11, w + 1);
+          break;
+        case "ArrowLeft":
+          o = Math.max(0, w - 1);
+          break;
+        case "ArrowDown":
+          o = Math.min(11, w + 4);
+          break;
+        case "ArrowUp":
+          o = Math.max(0, w - 4);
+          break;
+        case "Home":
+          o = 0;
+          break;
+        case "End":
+          o = 11;
+          break;
+        default:
+          return;
+      }
+      for (g.preventDefault(); o !== w && R(o); )
+        if (o += g.key === "ArrowLeft" || g.key === "ArrowUp" ? -1 : 1, o < 0 || o > 11) return;
+      H(o), k.current[o]?.focus();
+    };
+    return /* @__PURE__ */ M("div", { ref: C, ...y, className: N("w-[252px]", b), children: [
+      /* @__PURE__ */ t("div", { className: "text-center pb-ds-04 text-ds-md font-semibold text-surface-fg", children: e }),
+      /* @__PURE__ */ t("div", { role: "grid", "aria-label": "Month picker", tabIndex: -1, onKeyDown: m, children: [0, 1, 2].map((g) => /* @__PURE__ */ t("div", { role: "row", className: "grid grid-cols-4 gap-ds-02 mb-ds-02 last:mb-0", children: we.slice(g * 4, g * 4 + 4).map((o, i) => {
+        const s = g * 4 + i, P = s === f, x = R(s);
+        return /* @__PURE__ */ t(
+          "button",
+          {
+            ref: (A) => {
+              k.current[s] = A;
+            },
+            type: "button",
+            role: "gridcell",
+            tabIndex: s === w ? 0 : -1,
+            disabled: x || !1,
+            onClick: () => !x && u(s),
+            className: N(
+              "h-ds-sm-plus rounded-ds-md text-ds-md transition-colors focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+              x && "opacity-action-disabled pointer-events-none cursor-not-allowed",
+              P && "bg-accent-9 text-accent-fg",
+              !P && !x && "hover:bg-surface-raised-hover text-surface-fg"
+            ),
+            children: o
+          },
+          o
+        );
+      }) }, g)) })
+    ] });
+  }
+);
+se.displayName = "MonthPicker";
+const ke = d.forwardRef(
+  function({
+    value: e,
+    onChange: f,
+    placeholder: u = "Pick a date",
+    className: h,
+    formatStr: S = "MMM d, yyyy",
+    minDate: b,
+    maxDate: y,
+    disabledDates: C,
+    ...Y
+  }, w) {
+    const [H, k] = d.useState(!1), [R, m] = d.useState(
+      e ?? /* @__PURE__ */ new Date()
+    ), [g, o] = d.useState("days");
+    d.useEffect(() => {
+      H || o("days");
+    }, [H]);
+    const i = (v) => {
+      f?.(v), k(!1);
+    }, s = () => {
+      o((v) => v === "days" ? "months" : "years");
+    }, P = (v) => {
+      m((T) => ae(T, v)), o("days");
+    }, x = (v) => {
+      m((T) => oe(T, v)), o("months");
+    }, A = () => {
+      switch (g) {
+        case "years":
+          return /* @__PURE__ */ t(
+            te,
+            {
+              currentYear: R.getFullYear(),
+              selectedYear: e?.getFullYear(),
+              onYearSelect: x,
+              minDate: b,
+              maxDate: y
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ t(
+            se,
+            {
+              currentYear: R.getFullYear(),
+              selectedMonth: e?.getMonth(),
+              onMonthSelect: P,
+              minDate: b,
+              maxDate: y
+            }
+          );
+        default:
+          return /* @__PURE__ */ t(
+            Q,
+            {
+              currentMonth: R,
+              selected: e,
+              onSelect: i,
+              onMonthChange: m,
+              onHeaderClick: s,
+              disabledDates: C,
+              minDate: b,
+              maxDate: y
+            }
+          );
+      }
+    };
+    return /* @__PURE__ */ M(X, { open: H, onOpenChange: k, children: [
+      /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ M(
+        "button",
+        {
+          ref: w,
+          type: "button",
+          "aria-label": e ? `Change date, ${U(e, S)}` : u,
+          ...Y,
+          className: N(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-surface-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+            h
+          ),
+          children: [
+            /* @__PURE__ */ t(W, { icon: fe, size: "sm", stroke: "light", className: "text-surface-fg-subtle" }),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: N(
+                  "text-ds-md",
+                  e ? "text-surface-fg" : "text-surface-fg-subtle"
+                ),
+                children: e ? U(e, S) : u
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        ee,
+        {
+          className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: A()
+        }
+      )
+    ] });
+  }
+);
+ke.displayName = "DatePicker";
+const Ne = {
+  today: {
+    label: "Today",
+    getRange: () => {
+      const l = /* @__PURE__ */ new Date();
+      return { start: _(l), end: B(l) };
+    }
+  },
+  yesterday: {
+    label: "Yesterday",
+    getRange: () => {
+      const l = ne(/* @__PURE__ */ new Date(), 1);
+      return { start: _(l), end: B(l) };
+    }
+  },
+  last7days: {
+    label: "Last 7 days",
+    getRange: () => {
+      const l = /* @__PURE__ */ new Date();
+      return { start: _(ne(l, 6)), end: B(l) };
+    }
+  },
+  last30days: {
+    label: "Last 30 days",
+    getRange: () => {
+      const l = /* @__PURE__ */ new Date();
+      return { start: _(ne(l, 29)), end: B(l) };
+    }
+  },
+  thisMonth: {
+    label: "This month",
+    getRange: () => {
+      const l = /* @__PURE__ */ new Date();
+      return { start: le(l), end: ce(l) };
+    }
+  },
+  lastMonth: {
+    label: "Last month",
+    getRange: () => {
+      const e = me(/* @__PURE__ */ new Date(), 1);
+      return { start: le(e), end: ce(e) };
+    }
+  },
+  thisYear: {
+    label: "This year",
+    getRange: () => {
+      const l = /* @__PURE__ */ new Date();
+      return { start: be(l), end: B(l) };
+    }
+  }
+}, he = d.forwardRef(
+  function({ presets: e, onSelect: f, className: u, ...h }, S) {
+    return /* @__PURE__ */ t("div", { ref: S, ...h, className: N("flex flex-col gap-ds-01", u), children: e.map((b) => {
+      const y = Ne[b];
+      return y ? /* @__PURE__ */ t(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const { start: C, end: Y } = y.getRange();
+            f(C, Y);
+          },
+          className: N(
+            "h-ds-sm w-full rounded-ds-md px-ds-03 text-left text-ds-sm",
+            "text-surface-fg transition-colors",
+            "hover:bg-surface-raised-hover",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9"
+          ),
+          children: y.label
+        },
+        b
+      ) : null;
+    }) });
+  }
+);
+he.displayName = "Presets";
+const Se = d.forwardRef(
+  function({
+    startDate: e,
+    endDate: f,
+    onChange: u,
+    placeholder: h = "Pick a date range",
+    className: S,
+    formatStr: b = "MMM d, yyyy",
+    minDate: y,
+    maxDate: C,
+    disabledDates: Y,
+    presets: w,
+    numberOfMonths: H = 1,
+    ...k
+  }, R) {
+    const [m, g] = d.useState(!1), [o, i] = d.useState(
+      e ?? /* @__PURE__ */ new Date()
+    ), [s, P] = d.useState(
+      e ?? null
+    ), [x, A] = d.useState(
+      f ?? null
+    ), [v, T] = d.useState(null), [j, E] = d.useState("days"), V = Math.max(1, H);
+    d.useEffect(() => {
+      P(e ?? null), A(f ?? null);
+    }, [e, f]), d.useEffect(() => {
+      m || E("days");
+    }, [m]);
+    const L = (c) => {
+      if (!s || s && x)
+        P(c), A(null);
+      else {
+        const a = pe(c, s) ? c : s, O = xe(c, s) ? c : s;
+        P(a), A(O), u?.({ start: a, end: O }), g(!1);
+      }
+    }, z = (c, a) => {
+      P(c), A(a), u?.({ start: c, end: a }), g(!1);
+    }, $ = () => {
+      E((c) => c === "days" ? "months" : "years");
+    }, I = (c) => {
+      i((a) => ae(a, c)), E("days");
+    }, F = (c) => {
+      i((a) => oe(a, c)), E("months");
+    }, D = () => s && x ? `${U(s, b)} - ${U(x, b)}` : h, n = () => V === 1 ? /* @__PURE__ */ t(
+      Q,
+      {
+        currentMonth: o,
+        rangeStart: s,
+        rangeEnd: x,
+        hoverDate: v,
+        onSelect: L,
+        onHover: T,
+        onMonthChange: i,
+        onHeaderClick: $,
+        disabledDates: Y,
+        minDate: y,
+        maxDate: C
+      }
+    ) : /* @__PURE__ */ t("div", { className: "flex flex-row gap-ds-04", children: Array.from({ length: V }, (c, a) => /* @__PURE__ */ t(
+      Q,
+      {
+        currentMonth: ie(o, a),
+        rangeStart: s,
+        rangeEnd: x,
+        hoverDate: v,
+        onSelect: L,
+        onHover: T,
+        onMonthChange: (O) => {
+          i(ie(O, -a));
+        },
+        onHeaderClick: $,
+        disabledDates: Y,
+        minDate: y,
+        maxDate: C,
+        hidePrevNav: a > 0,
+        hideNextNav: a < V - 1
+      },
+      a
+    )) }), p = () => {
+      switch (j) {
+        case "years":
+          return /* @__PURE__ */ t(
+            te,
+            {
+              currentYear: o.getFullYear(),
+              selectedYear: s?.getFullYear(),
+              onYearSelect: F,
+              minDate: y,
+              maxDate: C
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ t(
+            se,
+            {
+              currentYear: o.getFullYear(),
+              selectedMonth: s?.getMonth(),
+              onMonthSelect: I,
+              minDate: y,
+              maxDate: C
+            }
+          );
+        default:
+          return n();
+      }
+    }, r = w && w.length > 0;
+    return /* @__PURE__ */ M(X, { open: m, onOpenChange: g, children: [
+      /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ M(
+        "button",
+        {
+          ref: R,
+          type: "button",
+          "aria-label": s && x ? `Change date range, ${D()}` : h,
+          ...k,
+          className: N(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-surface-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+            S
+          ),
+          children: [
+            /* @__PURE__ */ t(W, { icon: fe, size: "sm", stroke: "light", className: "text-surface-fg-subtle" }),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: N(
+                  "text-ds-md",
+                  s && x ? "text-surface-fg" : "text-surface-fg-subtle"
+                ),
+                children: D()
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        ee,
+        {
+          className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: r ? /* @__PURE__ */ M("div", { className: "flex flex-row gap-ds-04", children: [
+            /* @__PURE__ */ t("div", { className: "min-w-[140px] border-r border-surface-border-strong pr-ds-04", children: /* @__PURE__ */ t(he, { presets: w, onSelect: z }) }),
+            /* @__PURE__ */ t("div", { children: p() })
+          ] }) : p()
+        }
+      )
+    ] });
+  }
+);
+Se.displayName = "DateRangePicker";
+function G(l, e, f) {
+  const u = [];
+  for (let h = l; h <= e; h += f)
+    u.push(h);
+  return u;
+}
+function J(l) {
+  return l.toString().padStart(2, "0");
+}
+const ve = d.forwardRef(
+  function({
+    value: e,
+    onChange: f,
+    format: u = "12h",
+    minuteStep: h = 1,
+    secondStep: S = 1,
+    showSeconds: b = !1,
+    placeholder: y = "Pick a time",
+    className: C,
+    disabled: Y = !1,
+    ...w
+  }, H) {
+    const [k, R] = d.useState(!1), m = e ? e.getHours() : null, g = e ? e.getMinutes() : null, o = e ? e.getSeconds() : null, i = m !== null ? m >= 12 ? "PM" : "AM" : null, s = m !== null ? m === 0 ? 12 : m > 12 ? m - 12 : m : null, P = u === "12h" ? G(1, 12, 1) : G(0, 23, 1), x = G(0, 59, h), A = G(0, 59, S), v = (n) => {
+      const p = e ? new Date(e) : /* @__PURE__ */ new Date();
+      let r = n.hours ?? p.getHours();
+      const c = n.minutes ?? p.getMinutes(), a = n.seconds ?? p.getSeconds();
+      u === "12h" && n.hours !== void 0 && ((n.ampm ?? i ?? "AM") === "AM" ? r = n.hours === 12 ? 0 : n.hours : r = n.hours === 12 ? 12 : n.hours + 12);
+      let O = K(p, r);
+      return O = q(O, c), O = de(O, a), O;
+    }, T = (n) => {
+      const p = v({ hours: n });
+      f?.(p);
+    }, j = (n) => {
+      const p = v({ minutes: n });
+      f?.(p);
+    }, E = (n) => {
+      const p = v({ seconds: n });
+      f?.(p);
+    }, V = (n) => {
+      if (!e) {
+        const c = n === "AM" ? 0 : 12;
+        let a = /* @__PURE__ */ new Date();
+        a = K(a, c), a = q(a, 0), a = de(a, 0), f?.(a);
+        return;
+      }
+      const p = e.getHours();
+      let r;
+      n === "AM" ? r = p >= 12 ? p - 12 : p : r = p < 12 ? p + 12 : p, f?.(K(new Date(e), r));
+    }, L = d.useMemo(() => e ? u === "12h" ? U(e, b ? "h:mm:ss a" : "h:mm a") : U(e, b ? "HH:mm:ss" : "HH:mm") : null, [e, u, b]), z = u === "12h" ? s : m, $ = "flex flex-col gap-ds-01 overflow-y-auto max-h-[200px] px-ds-01", I = "flex h-ds-sm w-full items-center justify-center rounded-ds-md text-ds-md transition-colors duration-fast-01 ease-productive-standard cursor-pointer", F = "bg-accent-9 text-accent-fg", D = "text-surface-fg hover:bg-surface-raised-hover";
+    return /* @__PURE__ */ M(X, { open: k, onOpenChange: R, children: [
+      /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ M(
+        "button",
+        {
+          ref: H,
+          type: "button",
+          disabled: Y,
+          ...w,
+          className: N(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-surface-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+            Y && "opacity-action-disabled pointer-events-none",
+            C
+          ),
+          "aria-label": L ? `Selected time: ${L}` : y,
+          children: [
+            /* @__PURE__ */ t(W, { icon: Me, size: "sm", stroke: "light", className: "text-surface-fg-subtle" }),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: N(
+                  "text-ds-md",
+                  L ? "text-surface-fg" : "text-surface-fg-subtle"
+                ),
+                children: L ?? y
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        ee,
+        {
+          className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ M("div", { className: "flex gap-ds-03", role: "group", "aria-label": "Time picker", children: [
+            /* @__PURE__ */ M("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ t("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "Hr" }),
+              /* @__PURE__ */ t("div", { className: N($, "min-w-[48px]"), children: P.map((n) => /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => T(n),
+                  className: N(
+                    I,
+                    z === n ? F : D
+                  ),
+                  "aria-label": `${n} hours`,
+                  "aria-selected": z === n || void 0,
+                  children: u === "24h" ? J(n) : n
+                },
+                n
+              )) })
+            ] }),
+            /* @__PURE__ */ M("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ t("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "Min" }),
+              /* @__PURE__ */ t("div", { className: N($, "min-w-[48px]"), children: x.map((n) => /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => j(n),
+                  className: N(
+                    I,
+                    g === n ? F : D
+                  ),
+                  "aria-label": `${J(n)} minutes`,
+                  "aria-selected": g === n || void 0,
+                  children: J(n)
+                },
+                n
+              )) })
+            ] }),
+            b && /* @__PURE__ */ M("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ t("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "Sec" }),
+              /* @__PURE__ */ t("div", { className: N($, "min-w-[48px]"), children: A.map((n) => /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => E(n),
+                  className: N(
+                    I,
+                    o === n ? F : D
+                  ),
+                  "aria-label": `${J(n)} seconds`,
+                  "aria-selected": o === n || void 0,
+                  children: J(n)
+                },
+                n
+              )) })
+            ] }),
+            u === "12h" && /* @__PURE__ */ M("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ t("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: " " }),
+              /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-01 px-ds-01", children: ["AM", "PM"].map((n) => /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => V(n),
+                  className: N(
+                    I,
+                    "min-w-[44px] font-semibold",
+                    i === n ? F : D
+                  ),
+                  "aria-label": n,
+                  "aria-selected": i === n || void 0,
+                  children: n
+                },
+                n
+              )) })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+ve.displayName = "TimePicker";
+function ue(l) {
+  return l.toString().padStart(2, "0");
+}
+function re(l, e, f) {
+  const u = [];
+  for (let h = l; h <= e; h += f)
+    u.push(h);
+  return u;
+}
+const Ce = d.forwardRef(
+  function({
+    value: e,
+    onChange: f,
+    minDate: u,
+    maxDate: h,
+    disabledDates: S,
+    timeFormat: b = "12h",
+    minuteStep: y = 1,
+    placeholder: C = "Pick date & time",
+    className: Y,
+    ...w
+  }, H) {
+    const [k, R] = d.useState(!1), [m, g] = d.useState(e ?? /* @__PURE__ */ new Date()), [o, i] = d.useState("days");
+    d.useEffect(() => {
+      k || i("days");
+    }, [k]);
+    const s = e ? e.getHours() : 0, P = e ? e.getMinutes() : 0, x = s >= 12 ? "PM" : "AM", A = s === 0 ? 12 : s > 12 ? s - 12 : s, v = b === "12h" ? re(1, 12, 1) : re(0, 23, 1), T = re(0, 59, y), j = b === "12h" ? A : s, E = (r) => {
+      let c = K(r, e ? e.getHours() : s);
+      c = q(c, e ? e.getMinutes() : P), f?.(c);
+    }, V = () => {
+      i((r) => r === "days" ? "months" : "years");
+    }, L = (r) => {
+      g((c) => ae(c, r)), i("days");
+    }, z = (r) => {
+      g((c) => oe(c, r)), i("months");
+    }, $ = (r) => {
+      const c = e ? new Date(e) : /* @__PURE__ */ new Date();
+      let a = r;
+      b === "12h" && ((e ? x : "AM") === "AM" ? a = r === 12 ? 0 : r : a = r === 12 ? 12 : r + 12);
+      const O = K(c, a);
+      f?.(O);
+    }, I = (r) => {
+      const c = e ? new Date(e) : /* @__PURE__ */ new Date(), a = q(c, r);
+      f?.(a);
+    }, F = (r) => {
+      const c = e ? new Date(e) : /* @__PURE__ */ new Date(), a = c.getHours();
+      let O;
+      r === "AM" ? O = a >= 12 ? a - 12 : a : O = a < 12 ? a + 12 : a, f?.(K(c, O));
+    }, D = d.useMemo(() => e ? U(e, b === "12h" ? "MMM d, yyyy h:mm a" : "MMM d, yyyy HH:mm") : null, [e, b]), n = () => {
+      switch (o) {
+        case "years":
+          return /* @__PURE__ */ t(
+            te,
+            {
+              currentYear: m.getFullYear(),
+              selectedYear: e?.getFullYear(),
+              onYearSelect: z,
+              minDate: u,
+              maxDate: h
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ t(
+            se,
+            {
+              currentYear: m.getFullYear(),
+              selectedMonth: e?.getMonth(),
+              onMonthSelect: L,
+              minDate: u,
+              maxDate: h
+            }
+          );
+        default:
+          return /* @__PURE__ */ t(
+            Q,
+            {
+              currentMonth: m,
+              selected: e,
+              onSelect: E,
+              onMonthChange: g,
+              onHeaderClick: V,
+              disabledDates: S,
+              minDate: u,
+              maxDate: h
+            }
+          );
+      }
+    }, p = "h-ds-sm rounded-ds-md border border-surface-border-strong bg-surface-overlay px-ds-02 text-ds-md text-surface-fg transition-colors duration-fast-01 ease-productive-standard hover:border-surface-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 cursor-pointer appearance-none";
+    return /* @__PURE__ */ M(X, { open: k, onOpenChange: R, children: [
+      /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ M(
+        "button",
+        {
+          ref: H,
+          type: "button",
+          ...w,
+          className: N(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-surface-border-strong bg-surface-overlay px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-surface-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
+            Y
+          ),
+          "aria-label": D ? `Selected: ${D}` : C,
+          children: [
+            /* @__PURE__ */ t(W, { icon: ye, size: "sm", stroke: "light", className: "text-surface-fg-subtle" }),
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: N(
+                  "text-ds-md",
+                  D ? "text-surface-fg" : "text-surface-fg-subtle"
+                ),
+                children: D ?? C
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        ee,
+        {
+          className: "w-auto border-surface-border-strong bg-surface-overlay p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ M("div", { className: "flex flex-col gap-ds-04", children: [
+            n(),
+            o === "days" && /* @__PURE__ */ M("div", { className: "flex items-center gap-ds-02 border-t border-surface-border-strong pt-ds-04", children: [
+              /* @__PURE__ */ t("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-surface-fg-subtle", children: "Time" }),
+              /* @__PURE__ */ M(
+                "select",
+                {
+                  value: j ?? "",
+                  onChange: (r) => $(Number(r.target.value)),
+                  className: p,
+                  "aria-label": "Hour",
+                  children: [
+                    !e && /* @__PURE__ */ t("option", { value: "", children: "--" }),
+                    v.map((r) => /* @__PURE__ */ t("option", { value: r, children: b === "24h" ? ue(r) : r }, r))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t("span", { className: "text-ds-md font-semibold text-surface-fg-subtle", children: ":" }),
+              /* @__PURE__ */ M(
+                "select",
+                {
+                  value: e ? P : "",
+                  onChange: (r) => I(Number(r.target.value)),
+                  className: p,
+                  "aria-label": "Minute",
+                  children: [
+                    !e && /* @__PURE__ */ t("option", { value: "", children: "--" }),
+                    T.map((r) => /* @__PURE__ */ t("option", { value: r, children: ue(r) }, r))
+                  ]
+                }
+              ),
+              b === "12h" && /* @__PURE__ */ M(
+                "select",
+                {
+                  value: e ? x : "",
+                  onChange: (r) => F(r.target.value),
+                  className: p,
+                  "aria-label": "AM or PM",
+                  children: [
+                    !e && /* @__PURE__ */ t("option", { value: "", children: "--" }),
+                    /* @__PURE__ */ t("option", { value: "AM", children: "AM" }),
+                    /* @__PURE__ */ t("option", { value: "PM", children: "PM" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+Ce.displayName = "DateTimePicker";
+export {
+  ke as D,
+  se as M,
+  he as P,
+  ve as T,
+  te as Y,
+  Se as a,
+  Ce as b
+};