laif-ds 0.2.69 → 0.2.71

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

@@ -1,135 +1,231 @@
 "use client";
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { designTokens as r } from "../design-tokens.js";
-import { Calendar as O } from "./calendar.js";
-import { Icon as J } from "./icon.js";
-import { Label as K } from "./label.js";
-import { Popover as Q, PopoverTrigger as U, PopoverContent as W } from "./popover.js";
-import { cn as k } from "../../lib/utils.js";
-import * as d from "react";
-import { useEffect as X } from "react";
-import { it as Y } from "../../node_modules/date-fns/locale/it.js";
-import { formatDate as v } from "../../node_modules/date-fns/format.js";
-import { isSameDay as Z } from "../../node_modules/date-fns/isSameDay.js";
-function de(e) {
+import { jsxs as m, jsx as s } from "react/jsx-runtime";
+import { designTokens as i } from "../design-tokens.js";
+import { TimePickerColumn as M } from "./app-time-picker.js";
+import { Calendar as V } from "./calendar.js";
+import { Icon as q } from "./icon.js";
+import { Label as de } from "./label.js";
+import { Popover as ce, PopoverTrigger as me, PopoverContent as ue } from "./popover.js";
+import { cn as E } from "../../lib/utils.js";
+import * as f from "react";
+import { useCallback as L, useMemo as p, useEffect as fe } from "react";
+import { it as he } from "../../node_modules/date-fns/locale/it.js";
+import { formatDate as w } from "../../node_modules/date-fns/format.js";
+import { isSameDay as ge } from "../../node_modules/date-fns/isSameDay.js";
+function Pe(t) {
   const {
-    placeholder: F = "Seleziona data",
-    dateFormat: g = "dd/MM/yyyy",
-    className: R,
-    disabled: s = !1,
-    size: m = "default",
-    firstDate: p,
-    lastDate: b,
-    availableDates: C,
-    locale: l = Y,
-    initialCalendarMonth: c,
-    customCalendarProps: x,
-    label: D,
-    wrpClassName: T,
-    id: j,
-    "data-testid": V,
-    minDate: M,
-    maxDate: S,
-    numberOfMonths: q
-  } = e, a = e.mode === "range", [f, y] = d.useState(
-    a ? void 0 : e.value
-  ), [o, I] = d.useState(
-    a ? e.value : void 0
-  ), [z, u] = d.useState(
-    c
-  ), [N, E] = d.useState(!1), L = (t) => {
-    y(t), t && u(t), !a && e.onChange && e.onChange(t);
-  }, w = (t) => {
-    I(t), t?.from && u(t.from), a && e.onChange && e.onChange(t);
+    placeholder: X = "Seleziona data",
+    dateFormat: B,
+    className: G,
+    disabled: l = !1,
+    size: h = "default",
+    firstDate: N,
+    lastDate: S,
+    availableDates: H,
+    locale: u = he,
+    initialCalendarMonth: g,
+    customCalendarProps: P,
+    label: k,
+    labelClassName: J,
+    wrpClassName: K,
+    id: Q,
+    "data-testid": U,
+    minDate: O,
+    maxDate: z,
+    numberOfMonths: W,
+    clearable: Y = !1,
+    onClear: I
+  } = t, o = t.mode === "range", C = !o && t.showTime === !0, T = !o && t.withSeconds === !0, x = B ?? (C ? T ? "dd/MM/yyyy HH:mm:ss" : "dd/MM/yyyy HH:mm" : "dd/MM/yyyy"), [n, b] = f.useState(
+    o ? void 0 : t.value
+  ), [r, y] = f.useState(
+    o ? t.value : void 0
+  ), [F, v] = f.useState(
+    g
+  ), [j, A] = f.useState(!1), Z = (e) => {
+    const a = e ? new Date(e) : void 0;
+    C && a && n && a.setHours(
+      n.getHours(),
+      n.getMinutes(),
+      n.getSeconds()
+    ), b(a), a && v(a), !o && t.onChange && t.onChange(a), !C && a && A(!1);
+  }, $ = L(() => {
+    o ? (y(void 0), t.onChange && t.onChange(void 0)) : (b(void 0), t.onChange && t.onChange(void 0)), I?.();
+  }, [o, t.onChange, I]), ee = n?.getHours(), te = n?.getMinutes(), ae = n?.getSeconds(), oe = p(
+    () => Array.from({ length: 24 }, (e, a) => a),
+    []
+  ), ne = p(
+    () => Array.from({ length: 60 }, (e, a) => a),
+    []
+  ), se = p(
+    () => Array.from({ length: 60 }, (e, a) => a),
+    []
+  ), D = L(
+    (e, a) => {
+      const c = n ? new Date(n) : /* @__PURE__ */ new Date();
+      n || c.setHours(0, 0, 0, 0), e === "hour" ? c.setHours(a) : e === "minute" ? c.setMinutes(a) : e === "second" && c.setSeconds(a), b(c), !o && t.onChange && t.onChange(c);
+    },
+    [n, o, t.onChange]
+  ), re = (e) => {
+    y(e), e?.from && v(e.from), o && t.onChange && t.onChange(e);
   };
-  let i = [];
-  p && i.push({ before: p }), b && i.push({ after: b }), C?.length && i.push(
-    (t) => !C.some(
-      (H) => Z(H, t)
+  let d = [];
+  N && d.push({ before: N }), S && d.push({ after: S }), H?.length && d.push(
+    (e) => !H.some(
+      (a) => ge(a, e)
     )
-  ), s && (i = [!0]), X(() => {
-    if (a) {
-      I(e.value);
-      const t = e.value?.from;
-      u(t ?? c);
+  ), l && (d = [!0]), fe(() => {
+    if (o) {
+      y(t.value);
+      const e = t.value?.from;
+      v(e ?? g);
     } else
-      y(e.value), u(
-        e.value ?? c
+      b(t.value), v(
+        t.value ?? g
       );
-  }, [e.value, a, c]);
-  const A = d.useId(), P = j ?? A, B = a ? !!o?.from : !!f, G = () => a && o ? /* @__PURE__ */ h("span", { children: [
-    o.from && v(o.from, g, { locale: l }),
-    o.from && o.to && " - ",
-    o.to && v(o.to, g, { locale: l })
-  ] }) : !a && f ? /* @__PURE__ */ n("span", { children: v(f, g, { locale: l }) }) : /* @__PURE__ */ n("span", { className: "text-d-muted-foreground", children: F });
-  return /* @__PURE__ */ h("div", { className: k("flex flex-col gap-1.5", T), children: [
-    D && /* @__PURE__ */ n(K, { htmlFor: P, children: D }),
-    /* @__PURE__ */ h(Q, { open: s ? !1 : N, onOpenChange: E, children: [
-      /* @__PURE__ */ n(U, { asChild: !0, children: /* @__PURE__ */ h(
-        "div",
-        {
-          id: P,
-          "data-testid": V,
-          className: k(
-            r.input.base,
-            r.radius.default,
-            r.text.base,
-            r.interaction.disabled,
-            "flex items-center gap-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
-            r.focusRing,
-            N && r.activeRing,
-            "hover:border-d-ring cursor-pointer transition-colors",
-            !B && "text-d-muted-foreground",
-            s && "cursor-not-allowed opacity-50",
-            m === "default" && r.sizes.default,
-            m === "sm" && r.sizes.sm,
-            m === "lg" && r.sizes.lg,
-            R
-          ),
-          "aria-disabled": s,
-          role: "button",
-          tabIndex: s ? -1 : 0,
-          onClick: s ? void 0 : () => {
-          },
-          children: [
-            /* @__PURE__ */ n(J, { name: "Calendar", size: m === "lg" ? "sm" : "xs" }),
-            /* @__PURE__ */ n("div", { children: G() })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ n(W, { className: "w-auto p-0 shadow", children: a ? /* @__PURE__ */ n(
-        O,
-        {
-          ...x || {},
-          mode: "range",
-          selected: o,
-          onSelect: w,
-          autoFocus: !0,
-          disabled: i,
-          locale: l,
-          defaultMonth: z,
-          numberOfMonths: q ?? 1,
-          minDate: M,
-          maxDate: S
-        }
-      ) : /* @__PURE__ */ n(
-        O,
-        {
-          ...x || {},
-          mode: "single",
-          selected: f,
-          onSelect: L,
-          autoFocus: !0,
-          disabled: i,
-          locale: l,
-          defaultMonth: z,
-          minDate: M,
-          maxDate: S
-        }
-      ) })
-    ] })
+  }, [t.value, o, g]);
+  const ie = f.useId(), R = Q ?? ie, _ = o ? !!r?.from : !!n, le = () => o && r ? /* @__PURE__ */ m("span", { children: [
+    r.from && w(r.from, x, { locale: u }),
+    r.from && r.to && " - ",
+    r.to && w(r.to, x, { locale: u })
+  ] }) : !o && n ? /* @__PURE__ */ s("span", { children: w(n, x, { locale: u }) }) : /* @__PURE__ */ s("span", { className: "text-d-muted-foreground", children: X });
+  return /* @__PURE__ */ m("div", { className: E("flex flex-col gap-1.5", K), children: [
+    k && /* @__PURE__ */ s(de, { htmlFor: R, className: J, children: k }),
+    /* @__PURE__ */ m(
+      ce,
+      {
+        open: l ? !1 : j,
+        onOpenChange: A,
+        modal: !0,
+        children: [
+          /* @__PURE__ */ s(me, { asChild: !0, children: /* @__PURE__ */ m(
+            "div",
+            {
+              id: R,
+              "data-testid": U,
+              className: E(
+                i.input.base,
+                i.radius.default,
+                i.text.base,
+                i.interaction.disabled,
+                "flex items-center gap-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
+                i.focusRing,
+                j && i.activeRing,
+                "hover:border-d-ring cursor-pointer transition-colors",
+                !_ && "text-d-muted-foreground",
+                l && "cursor-not-allowed opacity-50",
+                h === "default" && i.sizes.default,
+                h === "sm" && i.sizes.sm,
+                h === "lg" && i.sizes.lg,
+                G
+              ),
+              "aria-disabled": l,
+              role: "button",
+              tabIndex: l ? -1 : 0,
+              onClick: l ? void 0 : () => {
+              },
+              children: [
+                /* @__PURE__ */ s(q, { name: "Calendar", size: h === "lg" ? "sm" : "xs" }),
+                /* @__PURE__ */ s("div", { className: "min-w-0 flex-1", children: le() }),
+                Y && _ && /* @__PURE__ */ s(
+                  "div",
+                  {
+                    role: "button",
+                    className: "bg-d-accent hover:bg-d-accent/80 border-d-border flex shrink-0 cursor-pointer items-center justify-center rounded-full border p-1 transition-colors",
+                    onClick: (e) => {
+                      e.stopPropagation(), e.preventDefault(), $();
+                    },
+                    onMouseDown: (e) => e.preventDefault(),
+                    "aria-label": "Clear selection",
+                    children: /* @__PURE__ */ s(
+                      q,
+                      {
+                        name: "X",
+                        size: "xs",
+                        className: "!text-d-foreground opacity-50"
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ) }),
+          " ",
+          /* @__PURE__ */ m(
+            ue,
+            {
+              className: "flex min-h-0 w-auto flex-row p-0 shadow",
+              align: "start",
+              children: [
+                o ? /* @__PURE__ */ s(
+                  V,
+                  {
+                    ...P || {},
+                    mode: "range",
+                    selected: r,
+                    onSelect: re,
+                    autoFocus: !0,
+                    disabled: d,
+                    locale: u,
+                    defaultMonth: F,
+                    numberOfMonths: W ?? 1,
+                    minDate: O,
+                    maxDate: z
+                  }
+                ) : /* @__PURE__ */ s(
+                  V,
+                  {
+                    ...P || {},
+                    mode: "single",
+                    selected: n,
+                    onSelect: Z,
+                    autoFocus: !0,
+                    disabled: d,
+                    locale: u,
+                    defaultMonth: F,
+                    minDate: O,
+                    maxDate: z
+                  }
+                ),
+                C && /* @__PURE__ */ m("div", { className: "border-d-border/50 flex max-h-[300px] min-h-0 flex-1 flex-row border-l", children: [
+                  /* @__PURE__ */ s(
+                    M,
+                    {
+                      type: "hour",
+                      value: ee,
+                      options: oe,
+                      onChange: (e) => D("hour", e),
+                      className: "flex flex-1"
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    M,
+                    {
+                      type: "minute",
+                      value: te,
+                      options: ne,
+                      onChange: (e) => D("minute", e),
+                      className: "flex flex-1"
+                    }
+                  ),
+                  T && /* @__PURE__ */ s(
+                    M,
+                    {
+                      type: "second",
+                      value: ae,
+                      options: se,
+                      onChange: (e) => D("second", e),
+                      className: "flex flex-1"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 export {
-  de as DatePicker
+  Pe as DatePicker
 };