@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/date-range-picker-B2hGsffw.js

@@ -0,0 +1,274 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as Q, useState as v, useRef as U, useCallback as X, useMemo as Z, useImperativeHandle as z } from "react";
+import { useTranslation as ee } from "react-i18next";
+import * as m from "@radix-ui/react-popover";
+import { u as te } from "./form-field-context-94LwgYTQ.js";
+import { a as ae, g as ne, b as re, e as I, c as se, C as oe, d as ie, t as de, p as ce, D as le, f as pe, h as ue } from "./react-day-picker-C04L_28V.js";
+import { c as fe, b as N, s as ge, f as R, d as me } from "./isSameMonth-5wNF2f4I.js";
+import { u as ye } from "./registry-C9nwlNyL.js";
+function D(t, s, n) {
+  return fe(t, -s, n);
+}
+function he(t, s, n) {
+  return ae(t, -1, n);
+}
+const ke = {
+  id: "date-range-picker",
+  capabilities: ["range_pick", "open", "close"],
+  state: {
+    range: {
+      type: "{ from: iso-date | null, to: iso-date | null }",
+      descriptionKey: "ui.agent.dateRangePicker.state.range",
+      description: "Currently-selected ISO date range endpoints, each possibly null.",
+      read: (t) => {
+        var n, l;
+        const s = t.getRange();
+        return {
+          from: ((n = s.from) == null ? void 0 : n.toISOString()) ?? null,
+          to: ((l = s.to) == null ? void 0 : l.toISOString()) ?? null
+        };
+      }
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.dateRangePicker.state.isOpen",
+      description: "Whether the range calendar popover is open.",
+      read: (t) => t.isOpen()
+    }
+  },
+  actions: {
+    set_range: {
+      safety: "write",
+      argsType: "{ from: string, to: string }",
+      descriptionKey: "ui.agent.dateRangePicker.actions.setRange",
+      description: "Replace the selected range with the given ISO endpoints.",
+      invoke: (t, s) => {
+        t.setRange({ from: new Date(s.from), to: new Date(s.to) });
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.dateRangePicker.actions.clear",
+      description: "Clear the selected range.",
+      invoke: (t) => {
+        t.clear();
+      }
+    },
+    open: {
+      safety: "read",
+      descriptionKey: "ui.agent.dateRangePicker.actions.open",
+      description: "Open the range calendar popover.",
+      invoke: (t) => {
+        t.open();
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.agent.dateRangePicker.actions.close",
+      description: "Close the range calendar popover.",
+      invoke: (t) => {
+        t.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "date-range-picker",
+      description: "Marks the DateRangePicker wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, be = Q(
+  ({
+    value: t,
+    defaultValue: s,
+    onChange: n,
+    minDate: l,
+    maxDate: T,
+    presets: y,
+    mergePresets: W = !1,
+    size: P = "md",
+    disabled: V,
+    placeholder: K,
+    className: L,
+    id: F
+  }, j) => {
+    const { t: o, i18n: A } = ee(), c = te(), h = F ?? c.id, w = c.disabled || V, B = c.invalid ? "error" : "default", i = ne(A.language), H = K ?? o("ui.inputs.dateRangePicker.placeholder", "Select date range"), k = t !== void 0, [_, $] = v(
+      t ?? s ?? {}
+    ), a = k ? t : _, [p, u] = v(!1), [Y, M] = v(
+      a.from ?? /* @__PURE__ */ new Date()
+    ), q = U(null), d = X(
+      (e) => {
+        k || $(e), n == null || n(e);
+      },
+      [k, n]
+    ), E = re(l, T), O = [
+      {
+        label: o("ui.inputs.dateRangePicker.presets.today", "Today"),
+        range: () => {
+          const e = /* @__PURE__ */ new Date();
+          return { from: e, to: e };
+        }
+      },
+      {
+        label: o("ui.inputs.dateRangePicker.presets.yesterday", "Yesterday"),
+        range: () => {
+          const e = D(/* @__PURE__ */ new Date(), 1);
+          return { from: e, to: e };
+        }
+      },
+      {
+        label: o("ui.inputs.dateRangePicker.presets.last7", "Last 7 days"),
+        range: () => ({
+          from: D(/* @__PURE__ */ new Date(), 6),
+          to: /* @__PURE__ */ new Date()
+        })
+      },
+      {
+        label: o("ui.inputs.dateRangePicker.presets.thisWeek", "This week"),
+        range: () => ({
+          from: N(/* @__PURE__ */ new Date(), { locale: i }),
+          to: I(/* @__PURE__ */ new Date(), { locale: i })
+        })
+      },
+      {
+        label: o("ui.inputs.dateRangePicker.presets.lastWeek", "Last week"),
+        range: () => {
+          const e = he(/* @__PURE__ */ new Date());
+          return {
+            from: N(e, { locale: i }),
+            to: I(e, { locale: i })
+          };
+        }
+      },
+      {
+        label: o("ui.inputs.dateRangePicker.presets.thisMonth", "This month"),
+        range: () => ({
+          from: ge(/* @__PURE__ */ new Date()),
+          to: se(/* @__PURE__ */ new Date())
+        })
+      },
+      {
+        label: o("ui.inputs.dateRangePicker.presets.last30", "Last 30 days"),
+        range: () => ({
+          from: D(/* @__PURE__ */ new Date(), 29),
+          to: /* @__PURE__ */ new Date()
+        })
+      }
+    ], x = y ? W ? [...O, ...y] : y : O, G = (e) => {
+      d(e ? { from: e.from, to: e.to } : {});
+    }, J = (e) => {
+      const f = e.range();
+      d(f), M(f.from), u(!1);
+    }, S = (() => {
+      if (a.from && a.to) {
+        const e = R(a.from, "MMM d, yyyy", { locale: i }), f = R(a.to, "MMM d, yyyy", { locale: i });
+        return `${e} – ${f}`;
+      }
+      return a.from ? R(a.from, "MMM d, yyyy", { locale: i }) : "";
+    })(), C = (() => {
+      if (a.from && a.to) {
+        const e = me(a.to, a.from) + 1;
+        return o("ui.inputs.dateRangePicker.days", "{{count}} days", { count: e });
+      }
+      return "";
+    })(), b = Z(
+      () => ({
+        getRange: () => a,
+        setRange: (e) => d(e),
+        clear: () => d({}),
+        isOpen: () => p,
+        open: () => u(!0),
+        close: () => u(!1)
+      }),
+      [a, d, p]
+    );
+    return z(j, () => b, [b]), ye(ke, b, h), /* @__PURE__ */ r(m.Root, { open: p, onOpenChange: u, children: /* @__PURE__ */ g(
+      "div",
+      {
+        className: L,
+        "data-component": "date-range-picker",
+        "data-component-id": h,
+        children: [
+          /* @__PURE__ */ r(m.Trigger, { asChild: !0, disabled: w, children: /* @__PURE__ */ g(
+            "button",
+            {
+              ref: q,
+              id: h,
+              type: "button",
+              disabled: w,
+              "aria-describedby": c.describedBy || void 0,
+              "aria-invalid": c.invalid || void 0,
+              "aria-haspopup": "dialog",
+              "aria-expanded": p,
+              className: de({ size: P, tone: B }),
+              children: [
+                /* @__PURE__ */ r("span", { className: S ? "ds:text-foreground" : "ds:text-muted-foreground", children: S || H }),
+                /* @__PURE__ */ r("span", { "aria-hidden": "true", className: ie({ size: P }), children: /* @__PURE__ */ r(oe, {}) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ r(m.Portal, { children: /* @__PURE__ */ r(
+            m.Content,
+            {
+              sideOffset: 4,
+              align: "start",
+              className: ue(),
+              children: /* @__PURE__ */ g("div", { className: "ds:flex ds:gap-[var(--spacing-md)]", children: [
+                x.length > 0 ? /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:min-w-[8rem] ds:border-e ds:border-border ds:pe-[var(--spacing-md)]", children: x.map((e) => /* @__PURE__ */ r(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => J(e),
+                    className: ce(),
+                    children: e.label
+                  },
+                  e.label
+                )) }) : null,
+                /* @__PURE__ */ g("div", { children: [
+                  /* @__PURE__ */ r(
+                    le,
+                    {
+                      mode: "range",
+                      selected: a.from ? { from: a.from, to: a.to } : void 0,
+                      onSelect: G,
+                      month: Y,
+                      onMonthChange: M,
+                      numberOfMonths: 2,
+                      disabled: E,
+                      locale: i,
+                      showOutsideDays: !0,
+                      fixedWeeks: !0,
+                      pagedNavigation: !0,
+                      components: { Chevron: pe }
+                    }
+                  ),
+                  C ? /* @__PURE__ */ r(
+                    "div",
+                    {
+                      role: "status",
+                      "aria-live": "polite",
+                      className: "type-body-sm ds:text-muted-foreground ds:mt-[var(--spacing-sm)] ds:text-center",
+                      children: C
+                    }
+                  ) : null
+                ] })
+              ] })
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+be.displayName = "DateRangePicker";
+export {
+  be as D,
+  ke as d
+};
+//# sourceMappingURL=date-range-picker-B2hGsffw.js.map

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

@@ -0,0 +1,293 @@
+import { jsx as r, jsxs as T } from "react/jsx-runtime";
+import { forwardRef as oe, useState as p, useRef as de, useCallback as F, useMemo as ce, useImperativeHandle as le } from "react";
+import { c as ue } from "./index-D2ZczOXr.js";
+import { useTranslation as me } from "react-i18next";
+import * as k from "@radix-ui/react-popover";
+import { u as pe } from "./form-field-context-94LwgYTQ.js";
+import { T as fe } from "./time-picker-B8AMIrX7.js";
+import { g as ge, b as he, i as ve, j as be, C as ye, d as Te, t as ke, D as we, f as De, h as Pe } from "./react-day-picker-C04L_28V.js";
+import { f as xe } from "./isSameMonth-5wNF2f4I.js";
+import { u as Ce } from "./registry-C9nwlNyL.js";
+import { t as j } from "./isSameDay-ecuM8PBB.js";
+function K(e, s, a) {
+  const i = j(e, a == null ? void 0 : a.in);
+  return i.setHours(s), i;
+}
+function A(e, s, a) {
+  const i = j(e, a == null ? void 0 : a.in);
+  return i.setMinutes(s), i;
+}
+const Oe = {
+  id: "date-time-picker",
+  capabilities: ["pick", "open", "close"],
+  state: {
+    value: {
+      type: "iso-datetime",
+      descriptionKey: "ui.agent.dateTimePicker.state.value",
+      description: "Currently-selected ISO datetime, or null.",
+      read: (e) => {
+        var s;
+        return ((s = e.getValue()) == null ? void 0 : s.toISOString()) ?? null;
+      }
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.dateTimePicker.state.isOpen",
+      description: "Whether the datetime popover is open.",
+      read: (e) => e.isOpen()
+    }
+  },
+  actions: {
+    set_datetime: {
+      safety: "write",
+      argsType: "{ datetime: string }",
+      descriptionKey: "ui.agent.dateTimePicker.actions.setDatetime",
+      description: "Select a specific datetime (ISO string).",
+      invoke: (e, s) => {
+        e.setValue(new Date(s.datetime));
+      }
+    },
+    clear: {
+      safety: "destructive",
+      descriptionKey: "ui.agent.dateTimePicker.actions.clear",
+      description: "Clear the selected datetime.",
+      invoke: (e) => {
+        e.clear();
+      }
+    },
+    open: {
+      safety: "read",
+      descriptionKey: "ui.agent.dateTimePicker.actions.open",
+      description: "Open the datetime popover.",
+      invoke: (e) => {
+        e.open();
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.agent.dateTimePicker.actions.close",
+      description: "Close the datetime popover.",
+      invoke: (e) => {
+        e.close();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "date-time-picker",
+      description: "Marks the DateTimePicker wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+function Me(e, s) {
+  var a;
+  try {
+    const i = { timeZoneName: "short" };
+    return s && s !== "local" && (i.timeZone = s === "utc" ? "UTC" : s), ((a = new Intl.DateTimeFormat(e, i).formatToParts(/* @__PURE__ */ new Date()).find((d) => d.type === "timeZoneName")) == null ? void 0 : a.value) ?? "";
+  } catch {
+    return "";
+  }
+}
+function Ne(e) {
+  if (!e || e === "local") return !1;
+  try {
+    const s = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return e === "utc" ? s !== "UTC" : s !== e;
+  } catch {
+    return !1;
+  }
+}
+const Ve = ue(
+  [
+    "ds:w-full ds:rounded-[var(--radius-sm)]",
+    "ds:bg-primary ds:text-primary-foreground",
+    "ds:hover:bg-primary-hover ds:cursor-pointer",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:h-8 ds:text-[length:var(--font-size-sm)]",
+        md: "ds:h-[var(--min-target-size)] ds:text-[length:var(--font-size-base)]",
+        lg: "ds:h-12 ds:text-[length:var(--font-size-lg)]"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+), Ie = oe(
+  ({
+    value: e,
+    defaultValue: s,
+    onChange: a,
+    timezone: i,
+    showTimezone: w,
+    minDate: d,
+    maxDate: f,
+    hour12: B,
+    minuteStep: Z = 1,
+    size: g = "md",
+    disabled: _,
+    placeholder: z,
+    className: E,
+    id: U
+  }, W) => {
+    const { t: c, i18n: N } = me(), l = pe(), D = U ?? l.id, V = l.disabled || _, q = l.invalid ? "error" : "default", I = ge(N.language), G = z ?? c("ui.inputs.dateTimePicker.placeholder", "Select date and time"), J = c("ui.inputs.dateTimePicker.apply", "Apply"), Q = c(
+      "ui.inputs.dateTimePicker.outOfRange",
+      "Date/time is out of allowed range"
+    ), S = (w !== void 0 ? w : Ne(i)) ? Me(N.language, i) : "", P = e !== void 0, [X, Y] = p(
+      e ?? s
+    ), n = P ? e : X, [o, h] = p(n), [v, b] = p(!1), [$, x] = p(n ?? /* @__PURE__ */ new Date()), [L, u] = p(!1), R = de(null), y = F(
+      (t) => {
+        P || Y(t), a == null || a(t);
+      },
+      [P, a]
+    ), ee = he(d, f), C = F(
+      (t) => !(d && ve(t, d) || f && be(t, f)),
+      [d, f]
+    ), te = (t) => {
+      t && (h(n ?? /* @__PURE__ */ new Date()), x(n ?? /* @__PURE__ */ new Date()), u(!1)), b(t);
+    }, se = (t) => {
+      if (!t) return;
+      const M = o ?? /* @__PURE__ */ new Date(), m = A(K(t, M.getHours()), M.getMinutes());
+      h(m), u(!C(m));
+    }, ae = (t) => {
+      const m = A(K(o ?? /* @__PURE__ */ new Date(), t.hours), t.minutes);
+      h(m), u(!C(m));
+    }, re = () => {
+      var t;
+      if (o) {
+        if (!C(o)) {
+          u(!0);
+          return;
+        }
+        y(o), b(!1), (t = R.current) == null || t.focus();
+      }
+    }, H = n ? xe(n, "MMM d, yyyy HH:mm", { locale: I }) : "", ie = c("ui.inputs.datePicker.gridLabel", "Calendar"), ne = c("ui.inputs.timePicker.groupLabel", "Time"), O = ce(
+      () => ({
+        getValue: () => n,
+        setValue: (t) => y(t),
+        clear: () => y(void 0),
+        isOpen: () => v,
+        // Mirror the trigger's open behaviour so draft state seeds correctly.
+        open: () => {
+          h(n ?? /* @__PURE__ */ new Date()), x(n ?? /* @__PURE__ */ new Date()), u(!1), b(!0);
+        },
+        close: () => b(!1)
+      }),
+      [n, y, v]
+    );
+    return le(W, () => O, [O]), Ce(Oe, O, D), /* @__PURE__ */ r(k.Root, { open: v, onOpenChange: te, children: /* @__PURE__ */ T(
+      "div",
+      {
+        className: E,
+        "data-component": "date-time-picker",
+        "data-component-id": D,
+        children: [
+          /* @__PURE__ */ r(k.Trigger, { asChild: !0, disabled: V, children: /* @__PURE__ */ T(
+            "button",
+            {
+              ref: R,
+              id: D,
+              type: "button",
+              disabled: V,
+              "aria-describedby": l.describedBy || void 0,
+              "aria-invalid": l.invalid || void 0,
+              "aria-haspopup": "dialog",
+              "aria-expanded": v,
+              className: ke({ size: g, tone: q }),
+              children: [
+                /* @__PURE__ */ r("span", { className: H ? "ds:text-foreground" : "ds:text-muted-foreground", children: H || G }),
+                /* @__PURE__ */ r("span", { "aria-hidden": "true", className: Te({ size: g }), children: /* @__PURE__ */ r(ye, {}) })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ r(k.Portal, { children: /* @__PURE__ */ r(
+            k.Content,
+            {
+              sideOffset: 4,
+              align: "start",
+              className: Pe(),
+              children: /* @__PURE__ */ T("div", { className: "ds:flex ds:flex-col ds:sm:flex-row ds:gap-[var(--spacing-md)]", children: [
+                /* @__PURE__ */ r("div", { role: "region", "aria-label": ie, children: /* @__PURE__ */ r(
+                  we,
+                  {
+                    mode: "single",
+                    selected: o,
+                    onSelect: se,
+                    month: $,
+                    onMonthChange: x,
+                    disabled: ee,
+                    locale: I,
+                    showOutsideDays: !0,
+                    fixedWeeks: !0,
+                    components: { Chevron: De }
+                  }
+                ) }),
+                /* @__PURE__ */ T(
+                  "div",
+                  {
+                    role: "region",
+                    "aria-label": ne,
+                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:sm:border-s ds:sm:border-border ds:sm:ps-[var(--spacing-md)] ds:min-w-[10rem]",
+                    children: [
+                      /* @__PURE__ */ r(
+                        fe,
+                        {
+                          value: o ? { hours: o.getHours(), minutes: o.getMinutes() } : { hours: 0, minutes: 0 },
+                          onChange: ae,
+                          hour12: B,
+                          minuteStep: Z,
+                          size: g
+                        }
+                      ),
+                      S ? /* @__PURE__ */ r(
+                        "span",
+                        {
+                          className: "type-meta ds:text-muted-foreground",
+                          children: S
+                        }
+                      ) : null,
+                      L ? /* @__PURE__ */ r(
+                        "span",
+                        {
+                          role: "alert",
+                          className: "type-meta ds:text-destructive",
+                          children: Q
+                        }
+                      ) : null,
+                      /* @__PURE__ */ r(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: re,
+                          disabled: !o || L,
+                          className: Ve({ size: g }),
+                          children: J
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            }
+          ) })
+        ]
+      }
+    ) });
+  }
+);
+Ie.displayName = "DateTimePicker";
+export {
+  Ie as D,
+  Oe as d
+};
+//# sourceMappingURL=date-time-picker-Bzt0S8yO.js.map