asheeui 0.6.7 → 0.6.9

package/dist/components/date-picker/DatePicker.js

@@ -1,482 +1,210 @@
 "use client";
-import { jsx as r, jsxs as h, Fragment as xe } from "react/jsx-runtime";
-import { useClick as ve, useDismiss as ye, useRole as Se, useInteractions as we, FloatingFocusManager as De } from "@floating-ui/react";
-import { forwardRef as Ne, useId as Me, useState as R, useCallback as U, useMemo as Ae } from "react";
-import { createPortal as ke } from "react-dom";
-import { CalendarIcon as Ie } from "../../icons/CalendarIcon.js";
-import { ChevronLeftIcon as Fe } from "../../icons/ChevronLeftIcon.js";
-import { ChevronRightIcon as _e } from "../../icons/ChevronRightIcon.js";
-import { ClearIcon as Re } from "../../icons/ClearIcon.js";
-import { ClockIcon as Te } from "../../icons/ClockIcon.js";
-import { useAsheeConfig as Ce } from "../../libs/context.js";
-import { resolveCascade as I, resolveRadiusKey as Pe, resolveClassKey as ee } from "../../utils/resolve-token.js";
-import { FieldShell as Ee } from "../field/FieldShell.js";
-import { FALLBACK_DATE_PICKER_CONFIG as p } from "./date-picker-config.js";
-import { CALENDAR_COLOR_CLASSES as O, DATE_PICKER_CELL_SIZE_CLASS as $e, DATE_PICKER_STATUS_BORDER_CLASS as Le, DATE_PICKER_SIZE_CLASS as Ye } from "./date-picker-styles.js";
-import { resolveVariantClass as Ke } from "../../shared/variant.js";
-import { RADIUS_CLASS as te } from "../../shared/radius.js";
-import { useSelectFloating as je } from "../select-menu/use-select-floating.js";
-import { cn as d } from "../../utils/cn.js";
-const Oe = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], ze = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-function T(e) {
-  return String(e).padStart(2, "0");
-}
-function He(e, n) {
-  const i = T(e.getDate()), m = T(e.getMonth() + 1), l = e.getFullYear(), a = T(e.getHours()), u = T(e.getMinutes());
-  switch (n) {
-    case "date":
-      return `${i}/${m}/${l}`;
-    case "time":
-      return `${a}:${u}`;
-    case "datetime":
-      return `${i}/${m}/${l} ${a}:${u}`;
-  }
-}
-function Ve(e) {
-  switch (e) {
-    case "date":
-      return "Select date...";
-    case "time":
-      return "Select time...";
-    case "datetime":
-      return "Select date & time...";
-  }
-}
-function Je(e, n) {
-  const i = new Date(e, n + 1, 0).getDate(), m = new Date(e, n, 1).getDay(), l = [
-    ...Array(m).fill(null),
-    ...Array.from({ length: i }, (a, u) => u + 1)
-  ];
-  for (; l.length % 7 !== 0; ) l.push(null);
-  return l;
-}
-function oe({
-  value: e,
-  max: n,
-  label: i,
-  onChange: m,
-  resolvedColor: l,
-  radiusClass: a
-}) {
-  const u = () => m(e >= n ? 0 : e + 1), y = () => m(e <= 0 ? n : e - 1), S = O[l] ?? O.primary;
-  return /* @__PURE__ */ h("div", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ r("span", { className: "text-[10px] uppercase tracking-widest text-foreground/70 select-none", children: i }),
-    /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        className: d(
-          "w-10 h-7 flex items-center justify-center text-xs text-foreground/70 transition-colors",
-          a,
-          S.hover
-        ),
-        onClick: u,
-        "aria-label": `Increment ${i}`,
-        children: "▲"
-      }
-    ),
-    /* @__PURE__ */ r(
-      "div",
-      {
-        className: d(
-          "w-10 h-10 flex items-center justify-center text-base font-mono font-bold text-foreground bg-background border border-border select-none",
-          a
-        ),
-        children: T(e)
-      }
-    ),
-    /* @__PURE__ */ r(
-      "button",
-      {
-        type: "button",
-        className: d(
-          "w-10 h-7 flex items-center justify-center text-xs text-foreground/70 transition-colors",
-          a,
-          S.hover
-        ),
-        onClick: y,
-        "aria-label": `Decrement ${i}`,
-        children: "▼"
-      }
-    )
-  ] });
-}
-function Be({
-  selected: e,
-  mode: n,
-  isClearable: i,
-  resolvedSizeKey: m,
-  resolvedColor: l,
-  radiusClass: a,
-  onSelect: u,
-  onClose: y,
-  disableFuture: S = !1
-}) {
-  const c = /* @__PURE__ */ new Date(), [g, C] = R(
-    (e == null ? void 0 : e.getFullYear()) ?? c.getFullYear()
-  ), [f, N] = R(
-    (e == null ? void 0 : e.getMonth()) ?? c.getMonth()
-  ), [b, P] = R((e == null ? void 0 : e.getHours()) ?? 0), [F, z] = R((e == null ? void 0 : e.getMinutes()) ?? 0), x = O[l] ?? O.primary;
-  function E(t, s) {
-    const _ = e ?? /* @__PURE__ */ new Date();
-    u(
-      new Date(_.getFullYear(), _.getMonth(), _.getDate(), t, s, 0, 0)
-    );
-  }
-  function H(t) {
-    P(t), E(t, F);
-  }
-  function V(t) {
-    z(t), E(b, t);
-  }
-  function J(t) {
-    u(new Date(g, f, t, b, F, 0, 0)), n === "date" && y();
-  }
-  function M() {
-    f === 0 ? (N(11), C((t) => t - 1)) : N((t) => t - 1);
-  }
-  function A() {
-    f === 11 ? (N(0), C((t) => t + 1)) : N((t) => t + 1);
-  }
-  function o(t) {
-    return !!e && e.getFullYear() === g && e.getMonth() === f && e.getDate() === t;
-  }
-  function B(t) {
-    return c.getFullYear() === g && c.getMonth() === f && c.getDate() === t;
-  }
-  const G = new Date(
-    c.getFullYear(),
-    c.getMonth(),
-    c.getDate()
-  );
-  function w(t) {
-    return S ? new Date(g, f, t) > G : !1;
-  }
-  const $ = !S || g < c.getFullYear() || g === c.getFullYear() && f < c.getMonth(), L = n === "date" || n === "datetime", Y = n === "time" || n === "datetime", K = n !== "date" || i && !!e, k = Je(g, f), v = Ae(() => k.map((t, s) => ({
-    key: t !== null ? `day-${t}` : `empty-slot-${s}`,
-    day: t
-  })), [k]);
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: d(
-        "bg-background border border-border shadow-xl select-none p-3 min-w-70",
-        a
-      ),
-      children: [
-        L && /* @__PURE__ */ h(xe, { children: [
-          /* @__PURE__ */ h("div", { className: "flex items-center justify-between pb-2 mb-2 border-b border-border", children: [
-            /* @__PURE__ */ r(
-              "button",
-              {
-                type: "button",
-                onClick: M,
-                "aria-label": "Previous month",
-                className: d(
-                  "p-1 text-foreground transition-colors",
-                  a,
-                  x.hover
-                ),
-                children: /* @__PURE__ */ r(Fe, {})
-              }
-            ),
-            /* @__PURE__ */ h("span", { className: "font-medium text-sm text-foreground", children: [
-              ze[f],
-              " ",
-              g
-            ] }),
-            /* @__PURE__ */ r(
-              "button",
-              {
-                type: "button",
-                onClick: A,
-                disabled: !$,
-                "aria-label": "Next month",
-                className: d(
-                  "p-1 text-foreground transition-colors disabled:opacity-30 disabled:cursor-not-allowed",
-                  a,
-                  x.hover
-                ),
-                children: /* @__PURE__ */ r(_e, {})
-              }
-            )
-          ] }),
-          /* @__PURE__ */ h("div", { className: "grid grid-cols-7 gap-1 text-center", children: [
-            Oe.map((t) => /* @__PURE__ */ r(
-              "div",
-              {
-                className: "text-xs font-semibold text-foreground/70 py-1",
-                children: t
-              },
-              t
-            )),
-            v.map(
-              ({ key: t, day: s }) => s === null ? /* @__PURE__ */ r("div", {}, t) : /* @__PURE__ */ r(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => J(s),
-                  disabled: w(s),
-                  className: d(
-                    "w-full flex items-center justify-center font-medium transition-colors",
-                    $e[m],
-                    a,
-                    w(s) ? "opacity-30 cursor-not-allowed text-foreground/70" : o(s) ? d(x.bg, "font-semibold") : B(s) ? d("border", x.border, x.text) : d("text-foreground", x.hover)
-                  ),
-                  children: s
-                },
-                s
-              )
-            )
-          ] })
-        ] }),
-        Y && /* @__PURE__ */ h("div", { className: "flex items-center justify-center gap-4 py-3 border-t border-border mt-2", children: [
-          /* @__PURE__ */ r(
-            oe,
-            {
-              value: b,
-              max: 23,
-              label: "HH",
-              onChange: H,
-              resolvedColor: l,
-              radiusClass: a
-            }
-          ),
-          /* @__PURE__ */ r("span", { className: "text-xl font-bold text-foreground/70 select-none pt-3", children: ":" }),
-          /* @__PURE__ */ r(
-            oe,
-            {
-              value: F,
-              max: 59,
-              label: "MM",
-              onChange: V,
-              resolvedColor: l,
-              radiusClass: a
-            }
-          )
-        ] }),
-        K && /* @__PURE__ */ h("div", { className: "flex items-center justify-between border-t border-border pt-2 mt-2", children: [
-          i && e && /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                u(null), y();
-              },
-              className: "text-xs text-foreground/70 hover:text-danger transition-colors",
-              children: "Clear"
-            }
-          ),
-          n !== "date" && /* @__PURE__ */ r(
-            "button",
-            {
-              type: "button",
-              onClick: y,
-              className: d(
-                "ml-auto text-xs font-medium px-3 py-1.5 hover:opacity-90 transition-opacity",
-                a,
-                x.bg
-              ),
-              children: "Done"
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-const Ge = Ne(
+import { jsx as n, jsxs as g, Fragment as de } from "react/jsx-runtime";
+import { useClick as me, useDismiss as fe, useRole as pe, useInteractions as ve, FloatingFocusManager as ye } from "@floating-ui/react";
+import { forwardRef as Ie, useId as Pe, useState as h, useRef as Re, useEffect as Se, useCallback as d } from "react";
+import { createPortal as Fe } from "react-dom";
+import { CalendarIcon as Ne } from "../../icons/CalendarIcon.js";
+import { ClearIcon as xe } from "../../icons/ClearIcon.js";
+import { ClockIcon as Ae } from "../../icons/ClockIcon.js";
+import { useAsheeConfig as De } from "../../libs/context.js";
+import { resolveCascade as m, resolveRadiusKey as Ke, resolveClassKey as we } from "../../utils/resolve-token.js";
+import { Input as Ee } from "../input/Input.js";
+import { Calendar as _e } from "./Calendar.js";
+import { formatDisplay as I, parseDateString as Le, getNewCursorPosition as Te, getDefaultPlaceholder as ze } from "./date-picker.helpers.js";
+import { FALLBACK_DATE_PICKER_CONFIG as f } from "./date-picker-config.js";
+import { RADIUS_CLASS as Oe } from "../../shared/radius.js";
+import { useSelectFloating as be } from "../select-menu/use-select-floating.js";
+import { cn as Me } from "../../utils/cn.js";
+import { FALLBACK_SELECT_MENU_CONFIG as Ve } from "../select-menu/select-menu-config.js";
+const ge = Ie(
   ({
-    selected: e,
-    onChange: n,
-    mode: i,
-    size: m,
-    radius: l,
-    variant: a,
-    color: u,
-    status: y,
-    label: S,
-    labelAlign: c,
-    description: g,
-    message: C,
-    required: f,
-    isLoading: N,
-    disabled: b,
-    isClearable: P = !1,
-    disableFuture: F = !1,
-    placeholder: z,
-    className: x,
-    id: E,
-    style: H,
-    portal: V,
-    portalTarget: J
-  }, M) => {
-    var X;
-    const A = Ce(), o = (X = A.components) == null ? void 0 : X.datePicker, B = Me(), G = E ?? B, [w, $] = R(!1), L = I(
-      m,
-      o == null ? void 0 : o.size,
+    selected: r,
+    onChange: t,
+    mode: j,
+    isClearable: x = !1,
+    disableFuture: B = !1,
+    placeholder: G,
+    size: A,
+    radius: P,
+    color: D,
+    disabled: u,
+    picker: l,
+    ...K
+  }, c) => {
+    var T, z, O;
+    const R = De(), e = (T = R.components) == null ? void 0 : T.datePicker, U = Pe(), W = K.id ?? U, [p, v] = h(!1), [S, a] = h(""), w = Re(null), s = m(
+      j,
+      e == null ? void 0 : e.mode,
       void 0,
-      p.size
-    ), Y = I(
-      a,
-      o == null ? void 0 : o.variant,
-      A.defaultVariant,
-      p.variant
-    ), K = I(
-      u,
-      o == null ? void 0 : o.color,
-      A.defaultColor,
-      p.color
-    ), k = Pe(
-      typeof l == "string" ? l : void 0,
-      typeof (o == null ? void 0 : o.radius) == "string" ? o.radius : void 0,
-      A.defaultRadius,
-      p.radius
-    ), v = y ?? p.status, t = I(
-      c,
-      o == null ? void 0 : o.labelAlign,
+      f.mode
+    ), q = m(
+      l == null ? void 0 : l.portal,
+      (z = e == null ? void 0 : e.picker) == null ? void 0 : z.portal,
       void 0,
-      p.labelAlign
-    ), s = i ?? (o == null ? void 0 : o.mode) ?? p.mode, _ = I(
-      V,
-      o == null ? void 0 : o.portal,
+      Ve.portal
+    ), H = m(
+      l == null ? void 0 : l.portalTarget,
+      (O = e == null ? void 0 : e.picker) == null ? void 0 : O.portalTarget,
       void 0,
-      p.portal
-    ), re = I(
-      J,
-      o == null ? void 0 : o.portalTarget,
+      null
+    ), J = m(
+      A,
+      e == null ? void 0 : e.size,
       void 0,
-      p.portalTarget
-    ), ne = Ke(
-      Y,
-      v === "error" ? "danger" : v === "success" ? "success" : v === "warning" ? "warning" : K
-    ), ae = v !== "default" ? Le[v] : "", se = Y === "underlined" ? "rounded-none" : ee(
-      k,
-      te,
-      p.radius
-    ), le = ee(
-      k === "full" ? "xl" : k,
-      te,
-      p.radius
-    ), { refs: W, floatingStyles: ie, context: j } = je({
-      isOpen: w,
-      onOpenChange: $,
-      disabled: b
-    }), ce = ve(j, { enabled: !b }), ue = ye(j), de = Se(j, { role: "dialog" }), { getReferenceProps: me, getFloatingProps: fe } = we([
-      ce,
-      ue,
-      de
-    ]), pe = U(
-      (D) => n == null ? void 0 : n(D),
-      [n]
-    ), he = U(() => $(!1), []), ge = U(
-      (D) => {
-        D.stopPropagation(), n == null || n(null);
+      f.size
+    ), Q = m(
+      D,
+      e == null ? void 0 : e.color,
+      R.defaultColor,
+      f.color
+    ), E = Ke(
+      typeof P == "string" ? P : void 0,
+      typeof (e == null ? void 0 : e.radius) == "string" ? e.radius : void 0,
+      R.defaultRadius,
+      f.radius
+    ), X = we(
+      E === "full" ? "xl" : E,
+      Oe,
+      f.radius
+    ), { refs: F, floatingStyles: Y, context: y } = be({
+      isOpen: p,
+      onOpenChange: v,
+      disabled: u,
+      matchReferenceWidth: !1
+      // Allow calendar to size naturally side-by-side
+    }), Z = me(y, { enabled: !u }), $ = fe(y, {
+      enabled: !u,
+      outsidePress: !0,
+      outsidePressEvent: "mousedown",
+      escapeKey: !0
+    }), C = pe(y, { role: "dialog" }), { getReferenceProps: k, getFloatingProps: ee } = ve([
+      Z,
+      $,
+      C
+    ]);
+    Se(() => {
+      a(r ? I(r, s) : "");
+    }, [r, s]);
+    const te = d(
+      (o) => {
+        t == null || t(o), a(o ? I(o, s) : ""), (s === "date" || o === null) && v(!1);
+      },
+      [t, s]
+    ), oe = d(() => v(!1), []), se = d(
+      (o) => {
+        var i;
+        o.stopPropagation(), t == null || t(null), a(""), v(!1), (i = w.current) == null || i.focus();
+      },
+      [t]
+    ), re = d(
+      (o) => {
+        const i = o.target, ie = i.value, ue = S, ce = i.selectionStart ?? 0, b = ie.replace(/\D/g, "");
+        if (b.length === 0) {
+          a(""), t == null || t(null);
+          return;
+        }
+        const N = Le(
+          b,
+          s,
+          r ?? void 0
+        );
+        if (N) {
+          t == null || t(N);
+          const M = I(N, s);
+          a(M);
+          const V = Te(
+            ue,
+            M,
+            ce
+          );
+          requestAnimationFrame(() => {
+            i.setSelectionRange(V, V);
+          });
+        } else
+          a(r ? I(r, s) : "");
       },
-      [n]
-    ), be = z ?? Ve(s), Z = e ? He(e, s) : null, q = w ? /* @__PURE__ */ r(De, { context: j, modal: !1, children: /* @__PURE__ */ r(
-      "div",
+      [s, r, t, S]
+    ), le = G ?? ze(s), ae = /* @__PURE__ */ g(de, { children: [
+      x && r && !u && /* @__PURE__ */ n(
+        "button",
+        {
+          type: "button",
+          onClick: se,
+          "aria-label": "Clear selection",
+          className: "p-0.5 rounded text-foreground/70 hover:text-foreground transition-colors",
+          children: /* @__PURE__ */ n(xe, { className: "size-3.5" })
+        }
+      ),
+      /* @__PURE__ */ n("span", { className: "text-foreground/70 pointer-events-none", children: s === "time" ? /* @__PURE__ */ n(Ae, {}) : /* @__PURE__ */ n(Ne, {}) })
+    ] }), _ = p ? /* @__PURE__ */ n(
+      ye,
       {
-        ref: W.setFloating,
-        style: { ...ie, zIndex: 999999 },
-        className: "outline-none",
-        ...fe(),
-        children: /* @__PURE__ */ r("div", { className: "animate-in fade-in-0 zoom-in-95 duration-150 ease-out", children: /* @__PURE__ */ r(
-          Be,
+        context: y,
+        modal: !1,
+        initialFocus: -1,
+        returnFocus: !1,
+        children: /* @__PURE__ */ n(
+          "div",
           {
-            selected: e,
-            mode: s,
-            isClearable: P,
-            resolvedSizeKey: L,
-            onSelect: pe,
-            onClose: he,
-            disableFuture: F,
-            resolvedColor: K,
-            radiusClass: le
+            ref: F.setFloating,
+            style: {
+              ...Y,
+              width: "max-content",
+              minWidth: "fit-content"
+            },
+            className: Me(
+              "z-100 outline-none animate-in fade-in-0 zoom-in-95 duration-150 ease-out",
+              l == null ? void 0 : l.className
+            ),
+            ...ee(),
+            children: /* @__PURE__ */ n(
+              _e,
+              {
+                selected: r,
+                mode: s,
+                isClearable: x,
+                resolvedSizeKey: J,
+                onSelect: te,
+                onClose: oe,
+                disableFuture: B,
+                resolvedColor: Q,
+                radiusClass: X
+              }
+            )
           }
-        ) })
-      }
-    ) }) : null, Q = re ?? (typeof document < "u" ? document.body : null);
-    return /* @__PURE__ */ r(
-      Ee,
-      {
-        id: G,
-        label: S,
-        labelAlign: t,
-        description: g,
-        message: C,
-        status: v,
-        required: f,
-        isLoading: N,
-        children: /* @__PURE__ */ h("div", { className: "w-full relative inline-block", children: [
-          /* @__PURE__ */ h(
-            "div",
-            {
-              ref: (D) => {
-                W.setReference(D), typeof M == "function" ? M(D) : M && (M.current = D);
-              },
-              role: "combobox",
-              tabIndex: b ? -1 : 0,
-              "aria-expanded": w,
-              "aria-haspopup": "dialog",
-              "aria-invalid": v === "error",
-              "aria-disabled": b,
-              className: d(
-                "w-full flex items-center justify-between cursor-pointer text-foreground outline-none transition-colors select-none shrink-0",
-                "focus-visible:ring-2 focus-visible:ring-offset-2",
-                b && "pointer-events-none opacity-50 cursor-not-allowed",
-                Ye[L],
-                ne,
-                ae,
-                se,
-                x
-              ),
-              style: H,
-              ...me(),
-              children: [
-                /* @__PURE__ */ r(
-                  "span",
-                  {
-                    className: Z ? "text-foreground" : "text-foreground/70",
-                    children: Z ?? be
-                  }
-                ),
-                /* @__PURE__ */ h("div", { className: "flex items-center gap-1.5 ml-2 shrink-0", children: [
-                  P && e && !b && /* @__PURE__ */ r(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: ge,
-                      "aria-label": "Clear selection",
-                      className: "p-0.5 rounded text-foreground/70 hover:text-foreground transition-colors",
-                      children: /* @__PURE__ */ r(Re, { className: "size-3.5" })
-                    }
-                  ),
-                  /* @__PURE__ */ r("span", { className: "text-foreground/70 pointer-events-none", children: s === "time" ? /* @__PURE__ */ r(Te, {}) : /* @__PURE__ */ r(Ie, {}) })
-                ] })
-              ]
-            }
-          ),
-          w && (_ && Q ? ke(q, Q) : q)
-        ] })
+        )
       }
+    ) : null, L = H ?? (typeof document < "u" ? document.body : null), ne = d(
+      (o) => {
+        o && (F.setReference(o), w.current = o, typeof c == "function" ? c(o) : c && (c.current = o));
+      },
+      [F, c]
     );
+    return /* @__PURE__ */ g("div", { className: "w-full relative inline-block", children: [
+      /* @__PURE__ */ n(
+        Ee,
+        {
+          ...K,
+          ref: ne,
+          id: W,
+          size: A,
+          radius: P,
+          color: D,
+          placeholder: le,
+          value: S,
+          onChange: re,
+          endContent: ae,
+          disabled: u,
+          "aria-expanded": p,
+          "aria-haspopup": "dialog",
+          ...k()
+        }
+      ),
+      p && (q && L ? Fe(_, L) : _)
+    ] });
   }
 );
-Ge.displayName = "DatePicker";
+ge.displayName = "DatePicker";
 export {
-  Ge as DatePicker
+  ge as DatePicker
 };