@devalok/shilp-sutra 0.8.3 → 0.9.0

package/dist/_chunks/use-calendar.js

@@ -0,0 +1,990 @@
+"use client";
+import { jsxs as x, jsx as s } from "react/jsx-runtime";
+import * as h from "react";
+import { useState as ke } from "react";
+import { format as j, startOfMonth as q, endOfMonth as fe, startOfWeek as ve, endOfWeek as Pe, addDays as J, subMonths as pe, addMonths as te, isSameMonth as he, isSameDay as X, lastDayOfMonth as Se, isBefore as C, startOfDay as G, isAfter as ee, isWithinInterval as be, setMonth as re, setYear as ne, endOfDay as _, startOfYear as Ye, subDays as ie, setHours as K, setMinutes as se, setSeconds as xe } from "date-fns";
+import { IconChevronLeft as Re, IconChevronRight as Te, IconCalendarEvent as ge, IconClock as Ae, IconCalendarClock as He } from "@tabler/icons-react";
+import { c as k } from "./utils.js";
+import { Popover as oe, PopoverTrigger as ce, PopoverContent as le } from "../ui/popover.js";
+const Oe = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], z = h.forwardRef(
+  function({
+    currentMonth: e,
+    selected: n,
+    rangeStart: o,
+    rangeEnd: f,
+    hoverDate: y,
+    onSelect: m,
+    onHover: d,
+    onMonthChange: b,
+    onHeaderClick: M,
+    disabledDates: g,
+    minDate: P,
+    maxDate: D,
+    hidePrevNav: N,
+    hideNextNav: A,
+    events: v
+  }, R) {
+    const p = h.useRef(null), H = h.useMemo(() => {
+      const c = /* @__PURE__ */ new Map();
+      if (!v) return c;
+      for (const w of v) {
+        const t = j(w.date, "yyyy-MM-dd"), l = c.get(t) ?? [];
+        l.push(w), c.set(t, l);
+      }
+      return c;
+    }, [v]), T = q(e), E = fe(e), S = ve(T), $ = Pe(E), W = [];
+    let O = S;
+    for (; O <= $; )
+      W.push(O), O = J(O, 1);
+    const L = (c) => !!(g != null && g(c) || P && C(c, G(P)) || D && ee(c, G(D))), I = (c) => {
+      if (o && f) {
+        const w = C(o, f) ? o : f, t = ee(f, o) ? f : o;
+        return be(c, { start: w, end: t });
+      }
+      if (o && y) {
+        const w = C(o, y) ? o : y, t = ee(y, o) ? y : o;
+        return be(c, { start: w, end: t });
+      }
+      return !1;
+    }, B = (c) => !!(o && X(c, o) || f && X(c, f)), V = (c) => {
+      if (!p.current) return;
+      const w = j(c, "yyyy-MM-dd"), t = p.current.querySelector(
+        `[data-date="${w}"]`
+      );
+      t ? t.focus() : b(q(c));
+    }, F = (c) => {
+      const t = c.target.getAttribute("data-date");
+      if (!t) return;
+      const l = /* @__PURE__ */ new Date(t + "T00:00:00");
+      let r = null;
+      switch (c.key) {
+        case "ArrowLeft":
+          r = J(l, -1);
+          break;
+        case "ArrowRight":
+          r = J(l, 1);
+          break;
+        case "ArrowUp":
+          r = J(l, -7);
+          break;
+        case "ArrowDown":
+          r = J(l, 7);
+          break;
+        case "Home":
+          r = q(l);
+          break;
+        case "End":
+          r = Se(l);
+          break;
+        case "Enter":
+        case " ": {
+          c.preventDefault(), !L(l) && he(l, e) && m(l);
+          return;
+        }
+        default:
+          return;
+      }
+      r && (c.preventDefault(), V(r));
+    };
+    return /* @__PURE__ */ x("div", { ref: R, className: "w-[252px]", children: [
+      /* @__PURE__ */ x("div", { className: "flex items-center justify-between px-ds-02 pb-ds-04", children: [
+        N ? /* @__PURE__ */ s("span", { className: "h-ds-xs-plus w-ds-xs-plus" }) : /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: () => b(pe(e, 1)),
+            className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-text-placeholder transition-colors duration-fast-01 ease-productive-standard hover:bg-field hover:text-text-secondary",
+            "aria-label": "Previous month",
+            children: /* @__PURE__ */ s(Re, { className: "h-ico-sm w-ico-sm", stroke: 1.5 })
+          }
+        ),
+        /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: M,
+            className: k(
+              "text-ds-md font-semibold text-text-primary",
+              M && "cursor-pointer rounded-ds-md px-ds-02 transition-colors duration-fast-01 ease-productive-standard hover:bg-field"
+            ),
+            "aria-label": "Switch to month/year view",
+            children: j(e, "MMMM yyyy")
+          }
+        ),
+        A ? /* @__PURE__ */ s("span", { className: "h-ds-xs-plus w-ds-xs-plus" }) : /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            onClick: () => b(te(e, 1)),
+            className: "inline-flex h-ds-xs-plus w-ds-xs-plus items-center justify-center rounded-ds-md text-text-placeholder transition-colors duration-fast-01 ease-productive-standard hover:bg-field hover:text-text-secondary",
+            "aria-label": "Next month",
+            children: /* @__PURE__ */ s(Te, { className: "h-ico-sm w-ico-sm", stroke: 1.5 })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ x(
+        "div",
+        {
+          ref: p,
+          className: "grid grid-cols-7 gap-0",
+          role: "grid",
+          tabIndex: 0,
+          "aria-label": "Calendar",
+          onKeyDown: F,
+          children: [
+            Oe.map((c) => /* @__PURE__ */ s(
+              "div",
+              {
+                role: "columnheader",
+                className: "flex h-ds-sm items-center justify-center text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder",
+                children: c
+              },
+              c
+            )),
+            W.map((c, w) => {
+              const t = he(c, e), l = L(c), r = n && X(c, n), i = I(c), a = B(c), Y = X(c, /* @__PURE__ */ new Date()), Q = j(c, "yyyy-MM-dd"), me = H.get(Q) ?? [];
+              return /* @__PURE__ */ x(
+                "button",
+                {
+                  type: "button",
+                  role: "gridcell",
+                  "data-date": Q,
+                  tabIndex: t && !l ? 0 : -1,
+                  disabled: !t || l,
+                  onClick: () => {
+                    t && !l && m(c);
+                  },
+                  onMouseEnter: () => d == null ? void 0 : d(c),
+                  onMouseLeave: () => d == null ? void 0 : d(null),
+                  "aria-label": j(c, "EEEE, MMMM d, yyyy"),
+                  "aria-selected": r || a || void 0,
+                  "aria-disabled": !t || l || void 0,
+                  className: k(
+                    "relative flex h-ds-sm w-ds-sm-plus items-center justify-center rounded-ds-md text-ds-md font-body transition-colors duration-fast-01 ease-productive-standard",
+                    !t && "pointer-events-none opacity-0",
+                    t && l && "opacity-[0.38] pointer-events-none cursor-not-allowed",
+                    t && !l && !r && !a && !i && "text-text-primary hover:bg-field",
+                    i && !a && "rounded-ds-none bg-field text-text-primary",
+                    (r || a) && "bg-interactive text-text-on-color hover:bg-interactive-hover",
+                    Y && !r && !a && !l && "font-semibold text-interactive"
+                  ),
+                  children: [
+                    j(c, "d"),
+                    me.length > 0 && /* @__PURE__ */ s("span", { className: "flex gap-px justify-center absolute bottom-[2px] left-0 right-0", children: me.slice(0, 3).map((we, Ne) => /* @__PURE__ */ s(
+                      "span",
+                      {
+                        "data-event-dot": !0,
+                        className: "h-[4px] w-[4px] rounded-ds-full",
+                        style: { backgroundColor: we.color ?? "var(--color-interactive)" }
+                      },
+                      Ne
+                    )) })
+                  ]
+                },
+                w
+              );
+            })
+          ]
+        }
+      )
+    ] });
+  }
+);
+z.displayName = "CalendarGrid";
+const ae = h.forwardRef(
+  function({
+    currentYear: e,
+    selectedYear: n,
+    onYearSelect: o,
+    minDate: f,
+    maxDate: y
+  }, m) {
+    const d = Math.floor(e / 10) * 10, b = Array.from({ length: 12 }, (M, g) => d + g);
+    return /* @__PURE__ */ x("div", { ref: m, className: "w-[252px]", children: [
+      /* @__PURE__ */ x("div", { className: "text-center pb-ds-04 text-ds-md font-semibold text-text-primary", children: [
+        d,
+        " – ",
+        d + 11
+      ] }),
+      /* @__PURE__ */ s("div", { className: "grid grid-cols-3 gap-ds-02", children: b.map((M) => {
+        const g = M === n, P = f != null && M < f.getFullYear() || y != null && M > y.getFullYear();
+        return /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            disabled: P || !1,
+            onClick: () => !P && o(M),
+            className: k(
+              "h-ds-sm-plus rounded-ds-md text-ds-md transition-colors",
+              P && "opacity-[0.38] pointer-events-none cursor-not-allowed",
+              g && "bg-interactive text-text-on-color",
+              !g && !P && "hover:bg-field text-text-primary"
+            ),
+            children: M
+          },
+          M
+        );
+      }) })
+    ] });
+  }
+);
+ae.displayName = "YearPicker";
+const De = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+], de = h.forwardRef(
+  function({
+    currentYear: e,
+    selectedMonth: n,
+    onMonthSelect: o,
+    minDate: f,
+    maxDate: y
+  }, m) {
+    return /* @__PURE__ */ x("div", { ref: m, className: "w-[252px]", children: [
+      /* @__PURE__ */ s("div", { className: "text-center pb-ds-04 text-ds-md font-semibold text-text-primary", children: e }),
+      /* @__PURE__ */ s("div", { className: "grid grid-cols-4 gap-ds-02", children: De.map((d, b) => {
+        const M = b === n, g = f != null && (e < f.getFullYear() || e === f.getFullYear() && b < f.getMonth()) || y != null && (e > y.getFullYear() || e === y.getFullYear() && b > y.getMonth());
+        return /* @__PURE__ */ s(
+          "button",
+          {
+            type: "button",
+            disabled: g || !1,
+            onClick: () => !g && o(b),
+            className: k(
+              "h-ds-sm-plus rounded-ds-md text-ds-md transition-colors",
+              g && "opacity-[0.38] pointer-events-none cursor-not-allowed",
+              M && "bg-interactive text-text-on-color",
+              !M && !g && "hover:bg-field text-text-primary"
+            ),
+            children: d
+          },
+          d
+        );
+      }) })
+    ] });
+  }
+);
+de.displayName = "MonthPicker";
+const Ee = h.forwardRef(
+  function({
+    value: e,
+    onChange: n,
+    placeholder: o = "Pick a date",
+    className: f,
+    formatStr: y = "MMM d, yyyy",
+    minDate: m,
+    maxDate: d,
+    disabledDates: b
+  }, M) {
+    const [g, P] = h.useState(!1), [D, N] = h.useState(
+      e ?? /* @__PURE__ */ new Date()
+    ), [A, v] = h.useState("days");
+    h.useEffect(() => {
+      g || v("days");
+    }, [g]);
+    const R = (S) => {
+      n == null || n(S), P(!1);
+    }, p = () => {
+      v((S) => S === "days" ? "months" : "years");
+    }, H = (S) => {
+      N(($) => re($, S)), v("days");
+    }, T = (S) => {
+      N(($) => ne($, S)), v("months");
+    }, E = () => {
+      switch (A) {
+        case "years":
+          return /* @__PURE__ */ s(
+            ae,
+            {
+              currentYear: D.getFullYear(),
+              selectedYear: e == null ? void 0 : e.getFullYear(),
+              onYearSelect: T,
+              minDate: m,
+              maxDate: d
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ s(
+            de,
+            {
+              currentYear: D.getFullYear(),
+              selectedMonth: e == null ? void 0 : e.getMonth(),
+              onMonthSelect: H,
+              minDate: m,
+              maxDate: d
+            }
+          );
+        default:
+          return /* @__PURE__ */ s(
+            z,
+            {
+              currentMonth: D,
+              selected: e,
+              onSelect: R,
+              onMonthChange: N,
+              onHeaderClick: p,
+              disabledDates: b,
+              minDate: m,
+              maxDate: d
+            }
+          );
+      }
+    };
+    return /* @__PURE__ */ x(oe, { open: g, onOpenChange: P, children: [
+      /* @__PURE__ */ s(ce, { asChild: !0, children: /* @__PURE__ */ x(
+        "button",
+        {
+          ref: M,
+          type: "button",
+          className: k(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-border bg-layer-01 px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+            f
+          ),
+          children: [
+            /* @__PURE__ */ s(
+              ge,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ s(
+              "span",
+              {
+                className: k(
+                  "text-ds-md",
+                  e ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: e ? j(e, y) : o
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ s(
+        le,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: E()
+        }
+      )
+    ] });
+  }
+);
+Ee.displayName = "DatePicker";
+const $e = {
+  today: {
+    label: "Today",
+    getRange: () => {
+      const u = /* @__PURE__ */ new Date();
+      return { start: G(u), end: _(u) };
+    }
+  },
+  yesterday: {
+    label: "Yesterday",
+    getRange: () => {
+      const u = ie(/* @__PURE__ */ new Date(), 1);
+      return { start: G(u), end: _(u) };
+    }
+  },
+  last7days: {
+    label: "Last 7 days",
+    getRange: () => {
+      const u = /* @__PURE__ */ new Date();
+      return { start: G(ie(u, 6)), end: _(u) };
+    }
+  },
+  last30days: {
+    label: "Last 30 days",
+    getRange: () => {
+      const u = /* @__PURE__ */ new Date();
+      return { start: G(ie(u, 29)), end: _(u) };
+    }
+  },
+  thisMonth: {
+    label: "This month",
+    getRange: () => {
+      const u = /* @__PURE__ */ new Date();
+      return { start: q(u), end: fe(u) };
+    }
+  },
+  lastMonth: {
+    label: "Last month",
+    getRange: () => {
+      const e = pe(/* @__PURE__ */ new Date(), 1);
+      return { start: q(e), end: fe(e) };
+    }
+  },
+  thisYear: {
+    label: "This year",
+    getRange: () => {
+      const u = /* @__PURE__ */ new Date();
+      return { start: Ye(u), end: _(u) };
+    }
+  }
+}, Me = h.forwardRef(
+  function({ presets: e, onSelect: n, className: o }, f) {
+    return /* @__PURE__ */ s("div", { ref: f, className: k("flex flex-col gap-ds-01", o), children: e.map((y) => {
+      const m = $e[y];
+      return m ? /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            const { start: d, end: b } = m.getRange();
+            n(d, b);
+          },
+          className: k(
+            "h-ds-sm w-full rounded-ds-md px-ds-03 text-left text-ds-sm",
+            "text-text-primary transition-colors",
+            "hover:bg-field",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus"
+          ),
+          children: m.label
+        },
+        y
+      ) : null;
+    }) });
+  }
+);
+Me.displayName = "Presets";
+const je = h.forwardRef(
+  function({
+    startDate: e,
+    endDate: n,
+    onChange: o,
+    placeholder: f = "Pick a date range",
+    className: y,
+    formatStr: m = "MMM d, yyyy",
+    minDate: d,
+    maxDate: b,
+    disabledDates: M,
+    presets: g,
+    numberOfMonths: P = 1
+  }, D) {
+    const [N, A] = h.useState(!1), [v, R] = h.useState(
+      e ?? /* @__PURE__ */ new Date()
+    ), [p, H] = h.useState(
+      e ?? null
+    ), [T, E] = h.useState(
+      n ?? null
+    ), [S, $] = h.useState(null), [W, O] = h.useState("days"), L = Math.max(1, P);
+    h.useEffect(() => {
+      H(e ?? null), E(n ?? null);
+    }, [e, n]), h.useEffect(() => {
+      N || O("days");
+    }, [N]);
+    const I = (i) => {
+      if (!p || p && T)
+        H(i), E(null);
+      else {
+        const a = C(i, p) ? i : p, Y = ee(i, p) ? i : p;
+        H(a), E(Y), o == null || o({ start: a, end: Y }), A(!1);
+      }
+    }, B = (i, a) => {
+      H(i), E(a), o == null || o({ start: i, end: a }), A(!1);
+    }, V = () => {
+      O((i) => i === "days" ? "months" : "years");
+    }, F = (i) => {
+      R((a) => re(a, i)), O("days");
+    }, c = (i) => {
+      R((a) => ne(a, i)), O("months");
+    }, w = () => p && T ? `${j(p, m)} - ${j(T, m)}` : f, t = () => L === 1 ? /* @__PURE__ */ s(
+      z,
+      {
+        currentMonth: v,
+        rangeStart: p,
+        rangeEnd: T,
+        hoverDate: S,
+        onSelect: I,
+        onHover: $,
+        onMonthChange: R,
+        onHeaderClick: V,
+        disabledDates: M,
+        minDate: d,
+        maxDate: b
+      }
+    ) : /* @__PURE__ */ s("div", { className: "flex flex-row gap-ds-04", children: Array.from({ length: L }, (i, a) => /* @__PURE__ */ s(
+      z,
+      {
+        currentMonth: te(v, a),
+        rangeStart: p,
+        rangeEnd: T,
+        hoverDate: S,
+        onSelect: I,
+        onHover: $,
+        onMonthChange: (Y) => {
+          R(te(Y, -a));
+        },
+        onHeaderClick: V,
+        disabledDates: M,
+        minDate: d,
+        maxDate: b,
+        hidePrevNav: a > 0,
+        hideNextNav: a < L - 1
+      },
+      a
+    )) }), l = () => {
+      switch (W) {
+        case "years":
+          return /* @__PURE__ */ s(
+            ae,
+            {
+              currentYear: v.getFullYear(),
+              selectedYear: p == null ? void 0 : p.getFullYear(),
+              onYearSelect: c,
+              minDate: d,
+              maxDate: b
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ s(
+            de,
+            {
+              currentYear: v.getFullYear(),
+              selectedMonth: p == null ? void 0 : p.getMonth(),
+              onMonthSelect: F,
+              minDate: d,
+              maxDate: b
+            }
+          );
+        default:
+          return t();
+      }
+    }, r = g && g.length > 0;
+    return /* @__PURE__ */ x(oe, { open: N, onOpenChange: A, children: [
+      /* @__PURE__ */ s(ce, { asChild: !0, children: /* @__PURE__ */ x(
+        "button",
+        {
+          ref: D,
+          type: "button",
+          className: k(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-border bg-layer-01 px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+            y
+          ),
+          children: [
+            /* @__PURE__ */ s(
+              ge,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ s(
+              "span",
+              {
+                className: k(
+                  "text-ds-md",
+                  p && T ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: w()
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ s(
+        le,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: r ? /* @__PURE__ */ x("div", { className: "flex flex-row gap-ds-04", children: [
+            /* @__PURE__ */ s("div", { className: "min-w-[140px] border-r border-border pr-ds-04", children: /* @__PURE__ */ s(Me, { presets: g, onSelect: B }) }),
+            /* @__PURE__ */ s("div", { children: l() })
+          ] }) : l()
+        }
+      )
+    ] });
+  }
+);
+je.displayName = "DateRangePicker";
+function Z(u, e, n) {
+  const o = [];
+  for (let f = u; f <= e; f += n)
+    o.push(f);
+  return o;
+}
+function U(u) {
+  return u.toString().padStart(2, "0");
+}
+const Ie = h.forwardRef(
+  function({
+    value: e,
+    onChange: n,
+    format: o = "12h",
+    minuteStep: f = 1,
+    secondStep: y = 1,
+    showSeconds: m = !1,
+    placeholder: d = "Pick a time",
+    className: b,
+    disabled: M = !1
+  }, g) {
+    const [P, D] = h.useState(!1), N = e ? e.getHours() : null, A = e ? e.getMinutes() : null, v = e ? e.getSeconds() : null, R = N !== null ? N >= 12 ? "PM" : "AM" : null, p = N !== null ? N === 0 ? 12 : N > 12 ? N - 12 : N : null, H = o === "12h" ? Z(1, 12, 1) : Z(0, 23, 1), T = Z(0, 59, f), E = Z(0, 59, y), S = (t) => {
+      const l = e ? new Date(e) : /* @__PURE__ */ new Date();
+      let r = t.hours ?? l.getHours();
+      const i = t.minutes ?? l.getMinutes(), a = t.seconds ?? l.getSeconds();
+      o === "12h" && t.hours !== void 0 && ((t.ampm ?? R ?? "AM") === "AM" ? r = t.hours === 12 ? 0 : t.hours : r = t.hours === 12 ? 12 : t.hours + 12);
+      let Y = K(l, r);
+      return Y = se(Y, i), Y = xe(Y, a), Y;
+    }, $ = (t) => {
+      const l = S({ hours: t });
+      n == null || n(l);
+    }, W = (t) => {
+      const l = S({ minutes: t });
+      n == null || n(l);
+    }, O = (t) => {
+      const l = S({ seconds: t });
+      n == null || n(l);
+    }, L = (t) => {
+      if (!e) {
+        const i = t === "AM" ? 0 : 12;
+        let a = /* @__PURE__ */ new Date();
+        a = K(a, i), a = se(a, 0), a = xe(a, 0), n == null || n(a);
+        return;
+      }
+      const l = e.getHours();
+      let r;
+      t === "AM" ? r = l >= 12 ? l - 12 : l : r = l < 12 ? l + 12 : l, n == null || n(K(new Date(e), r));
+    }, I = h.useMemo(() => e ? o === "12h" ? j(e, m ? "h:mm:ss a" : "h:mm a") : j(e, m ? "HH:mm:ss" : "HH:mm") : null, [e, o, m]), B = o === "12h" ? p : N, V = "flex flex-col gap-ds-01 overflow-y-auto max-h-[200px] px-ds-01", F = "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", c = "bg-interactive text-text-on-color", w = "text-text-primary hover:bg-field";
+    return /* @__PURE__ */ x(oe, { open: P, onOpenChange: D, children: [
+      /* @__PURE__ */ s(ce, { asChild: !0, children: /* @__PURE__ */ x(
+        "button",
+        {
+          ref: g,
+          type: "button",
+          disabled: M,
+          className: k(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-border bg-layer-01 px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+            M && "opacity-[0.38] pointer-events-none",
+            b
+          ),
+          "aria-label": I ? `Selected time: ${I}` : d,
+          children: [
+            /* @__PURE__ */ s(
+              Ae,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ s(
+              "span",
+              {
+                className: k(
+                  "text-ds-md",
+                  I ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: I ?? d
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ s(
+        le,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ x("div", { className: "flex gap-ds-03", role: "group", "aria-label": "Time picker", children: [
+            /* @__PURE__ */ x("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ s("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Hr" }),
+              /* @__PURE__ */ s("div", { className: k(V, "min-w-[48px]"), children: H.map((t) => /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => $(t),
+                  className: k(
+                    F,
+                    B === t ? c : w
+                  ),
+                  "aria-label": `${t} hours`,
+                  "aria-selected": B === t || void 0,
+                  children: o === "24h" ? U(t) : t
+                },
+                t
+              )) })
+            ] }),
+            /* @__PURE__ */ x("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ s("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Min" }),
+              /* @__PURE__ */ s("div", { className: k(V, "min-w-[48px]"), children: T.map((t) => /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => W(t),
+                  className: k(
+                    F,
+                    A === t ? c : w
+                  ),
+                  "aria-label": `${U(t)} minutes`,
+                  "aria-selected": A === t || void 0,
+                  children: U(t)
+                },
+                t
+              )) })
+            ] }),
+            m && /* @__PURE__ */ x("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ s("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Sec" }),
+              /* @__PURE__ */ s("div", { className: k(V, "min-w-[48px]"), children: E.map((t) => /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => O(t),
+                  className: k(
+                    F,
+                    v === t ? c : w
+                  ),
+                  "aria-label": `${U(t)} seconds`,
+                  "aria-selected": v === t || void 0,
+                  children: U(t)
+                },
+                t
+              )) })
+            ] }),
+            o === "12h" && /* @__PURE__ */ x("div", { className: "flex flex-col items-center gap-ds-02", children: [
+              /* @__PURE__ */ s("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: " " }),
+              /* @__PURE__ */ s("div", { className: "flex flex-col gap-ds-01 px-ds-01", children: ["AM", "PM"].map((t) => /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => L(t),
+                  className: k(
+                    F,
+                    "min-w-[44px] font-semibold",
+                    R === t ? c : w
+                  ),
+                  "aria-label": t,
+                  "aria-selected": R === t || void 0,
+                  children: t
+                },
+                t
+              )) })
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+Ie.displayName = "TimePicker";
+function ye(u) {
+  return u.toString().padStart(2, "0");
+}
+function ue(u, e, n) {
+  const o = [];
+  for (let f = u; f <= e; f += n)
+    o.push(f);
+  return o;
+}
+const Le = h.forwardRef(
+  function({
+    value: e,
+    onChange: n,
+    minDate: o,
+    maxDate: f,
+    disabledDates: y,
+    timeFormat: m = "12h",
+    minuteStep: d = 1,
+    placeholder: b = "Pick date & time",
+    className: M
+  }, g) {
+    const [P, D] = h.useState(!1), [N, A] = h.useState(e ?? /* @__PURE__ */ new Date()), [v, R] = h.useState("days");
+    h.useEffect(() => {
+      P || R("days");
+    }, [P]);
+    const p = e ? e.getHours() : 0, H = e ? e.getMinutes() : 0, T = p >= 12 ? "PM" : "AM", E = p === 0 ? 12 : p > 12 ? p - 12 : p, S = m === "12h" ? ue(1, 12, 1) : ue(0, 23, 1), $ = ue(0, 59, d), W = m === "12h" ? E : p, O = (r) => {
+      let i = K(r, e ? e.getHours() : p);
+      i = se(i, e ? e.getMinutes() : H), n == null || n(i);
+    }, L = () => {
+      R((r) => r === "days" ? "months" : "years");
+    }, I = (r) => {
+      A((i) => re(i, r)), R("days");
+    }, B = (r) => {
+      A((i) => ne(i, r)), R("months");
+    }, V = (r) => {
+      const i = e ? new Date(e) : /* @__PURE__ */ new Date();
+      let a = r;
+      m === "12h" && ((e ? T : "AM") === "AM" ? a = r === 12 ? 0 : r : a = r === 12 ? 12 : r + 12);
+      const Y = K(i, a);
+      n == null || n(Y);
+    }, F = (r) => {
+      const i = e ? new Date(e) : /* @__PURE__ */ new Date(), a = se(i, r);
+      n == null || n(a);
+    }, c = (r) => {
+      const i = e ? new Date(e) : /* @__PURE__ */ new Date(), a = i.getHours();
+      let Y;
+      r === "AM" ? Y = a >= 12 ? a - 12 : a : Y = a < 12 ? a + 12 : a, n == null || n(K(i, Y));
+    }, w = h.useMemo(() => e ? j(e, m === "12h" ? "MMM d, yyyy h:mm a" : "MMM d, yyyy HH:mm") : null, [e, m]), t = () => {
+      switch (v) {
+        case "years":
+          return /* @__PURE__ */ s(
+            ae,
+            {
+              currentYear: N.getFullYear(),
+              selectedYear: e == null ? void 0 : e.getFullYear(),
+              onYearSelect: B,
+              minDate: o,
+              maxDate: f
+            }
+          );
+        case "months":
+          return /* @__PURE__ */ s(
+            de,
+            {
+              currentYear: N.getFullYear(),
+              selectedMonth: e == null ? void 0 : e.getMonth(),
+              onMonthSelect: I,
+              minDate: o,
+              maxDate: f
+            }
+          );
+        default:
+          return /* @__PURE__ */ s(
+            z,
+            {
+              currentMonth: N,
+              selected: e,
+              onSelect: O,
+              onMonthChange: A,
+              onHeaderClick: L,
+              disabledDates: y,
+              minDate: o,
+              maxDate: f
+            }
+          );
+      }
+    }, l = "h-ds-sm rounded-ds-md border border-border bg-layer-01 px-ds-02 text-ds-md text-text-primary transition-colors duration-fast-01 ease-productive-standard hover:border-border-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus cursor-pointer appearance-none";
+    return /* @__PURE__ */ x(oe, { open: P, onOpenChange: D, children: [
+      /* @__PURE__ */ s(ce, { asChild: !0, children: /* @__PURE__ */ x(
+        "button",
+        {
+          ref: g,
+          type: "button",
+          className: k(
+            "inline-flex h-ds-sm-plus items-center gap-ds-03 rounded-ds-lg border border-border bg-layer-01 px-ds-04 text-left transition-colors duration-fast-01 ease-productive-standard",
+            "hover:border-border-strong",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2",
+            M
+          ),
+          "aria-label": w ? `Selected: ${w}` : b,
+          children: [
+            /* @__PURE__ */ s(
+              He,
+              {
+                className: "h-ico-sm w-ico-sm text-text-placeholder",
+                stroke: 1.5
+              }
+            ),
+            /* @__PURE__ */ s(
+              "span",
+              {
+                className: k(
+                  "text-ds-md",
+                  w ? "text-text-primary" : "text-text-placeholder"
+                ),
+                children: w ?? b
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ s(
+        le,
+        {
+          className: "w-auto border-border bg-layer-01 p-ds-04",
+          align: "start",
+          sideOffset: 4,
+          children: /* @__PURE__ */ x("div", { className: "flex flex-col gap-ds-04", children: [
+            t(),
+            v === "days" && /* @__PURE__ */ x("div", { className: "flex items-center gap-ds-02 border-t border-border pt-ds-04", children: [
+              /* @__PURE__ */ s("span", { className: "text-ds-xs font-semibold uppercase tracking-wider text-text-placeholder", children: "Time" }),
+              /* @__PURE__ */ x(
+                "select",
+                {
+                  value: W ?? "",
+                  onChange: (r) => V(Number(r.target.value)),
+                  className: l,
+                  "aria-label": "Hour",
+                  children: [
+                    !e && /* @__PURE__ */ s("option", { value: "", children: "--" }),
+                    S.map((r) => /* @__PURE__ */ s("option", { value: r, children: m === "24h" ? ye(r) : r }, r))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ s("span", { className: "text-ds-md font-semibold text-text-placeholder", children: ":" }),
+              /* @__PURE__ */ x(
+                "select",
+                {
+                  value: e ? H : "",
+                  onChange: (r) => F(Number(r.target.value)),
+                  className: l,
+                  "aria-label": "Minute",
+                  children: [
+                    !e && /* @__PURE__ */ s("option", { value: "", children: "--" }),
+                    $.map((r) => /* @__PURE__ */ s("option", { value: r, children: ye(r) }, r))
+                  ]
+                }
+              ),
+              m === "12h" && /* @__PURE__ */ x(
+                "select",
+                {
+                  value: e ? T : "",
+                  onChange: (r) => c(r.target.value),
+                  className: l,
+                  "aria-label": "AM or PM",
+                  children: [
+                    !e && /* @__PURE__ */ s("option", { value: "", children: "--" }),
+                    /* @__PURE__ */ s("option", { value: "AM", children: "AM" }),
+                    /* @__PURE__ */ s("option", { value: "PM", children: "PM" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    ] });
+  }
+);
+Le.displayName = "DateTimePicker";
+function Je(u) {
+  const [e, n] = ke(u ?? /* @__PURE__ */ new Date());
+  return {
+    currentMonth: e,
+    setCurrentMonth: n,
+    goToPreviousMonth: () => n((d) => pe(d, 1)),
+    goToNextMonth: () => n((d) => te(d, 1)),
+    goToMonth: (d) => n((b) => re(b, d)),
+    goToYear: (d) => n((b) => ne(b, d))
+  };
+}
+export {
+  z as C,
+  Ee as D,
+  de as M,
+  Me as P,
+  Ie as T,
+  ae as Y,
+  je as a,
+  Le as b,
+  Je as u
+};