laif-ds 0.2.52 → 0.2.54

package/dist/components/ui/async-select.js

@@ -2,10 +2,10 @@
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import { useDebounce as de } from "../../hooks/use-debounce.js";
 import { cva as ie } from "../../node_modules/class-variance-authority/dist/index.js";
-import * as M from "react";
-import { useState as p, useEffect as N, useCallback as j } from "react";
-import { designTokens as b } from "../../lib/design-tokens.js";
-import { cn as k } from "../../lib/utils.js";
+import * as R from "react";
+import { useState as p, useEffect as b, useCallback as j } from "react";
+import { designTokens as x } from "../../lib/design-tokens.js";
+import { cn as M } from "../../lib/utils.js";
 import { Checkbox as fe } from "./checkbox.js";
 import { Command as me, CommandInput as ue, CommandList as he, CommandEmpty as ge, CommandGroup as O, CommandItem as V } from "./command.js";
 import { Icon as _ } from "./icon.js";
@@ -14,10 +14,10 @@ import { Popover as xe, PopoverTrigger as we, PopoverContent as ye } from "./pop
 import Ne from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
 import be from "../../node_modules/lucide-react/dist/esm/icons/check.js";
 const Ce = ie(
-  k(
-    b.input.base,
-    b.radius.default,
-    b.interaction.disabled,
+  M(
+    x.input.base,
+    x.radius.default,
+    x.interaction.disabled,
     "flex items-center justify-between whitespace-nowrap transition-all [&>span]:line-clamp-1",
     "data-[placeholder]:text-d-muted-foreground",
     "focus:outline-none"
@@ -25,9 +25,9 @@ const Ce = ie(
   {
     variants: {
       size: {
-        default: b.sizes.default,
-        sm: b.sizes.sm,
-        lg: b.sizes.lg
+        default: x.sizes.default,
+        sm: x.sizes.sm,
+        lg: x.sizes.lg
       }
     },
     defaultVariants: {
@@ -38,27 +38,27 @@ const Ce = ie(
 function Be({
   fetcher: i,
   initialOptions: t,
-  debounce: x = 300,
+  debounce: w = 300,
   renderOptionItem: C,
   resolveOptionValue: a,
   renderSelectedValue: s,
   notFound: h,
-  label: y,
+  label: N,
   placeholder: f = "Select...",
   value: n,
   onChange: g,
   disabled: A = !1,
-  className: v,
-  wrpClassName: D,
+  className: D,
+  wrpClassName: v,
   noResultsMessage: E,
   clearable: S = !0,
   multiple: l = !1,
   size: ee
 }) {
-  const [m, L] = p(!1), P = M.useRef(null), F = M.useRef(null), re = M.useRef(null), [ne, I] = p({ loading: !1, error: null }), [X, te] = p(""), W = de(X, x), [B, q] = p(/* @__PURE__ */ new Map()), [$, G] = p([]), [H, se] = p(0), [J, Q] = p(() => t?.length ? new Map(
+  const [m, L] = p(!1), P = R.useRef(null), F = R.useRef(null), re = R.useRef(null), [ne, I] = p({ loading: !1, error: null }), [X, te] = p(""), W = de(X, w), [B, q] = p(/* @__PURE__ */ new Map()), [$, G] = p([]), [H, se] = p(0), [J, Q] = p(() => t?.length ? new Map(
     t.map((e) => [a(e), e])
   ) : /* @__PURE__ */ new Map());
-  N(() => {
+  b(() => {
     t?.length && (q((e) => {
       const o = new Map(e);
       return o.has("") || o.set("", t), o;
@@ -67,15 +67,15 @@ function Be({
       return t.forEach((c) => o.set(a(c), c)), o;
     }));
   }, [t, a]);
-  const [R, Y] = p([]), z = j(
+  const [k, Y] = p([]), z = j(
     (e) => {
       if (!e) {
         Y([]);
         return;
       }
       const c = (Array.isArray(e) ? e : [e]).map((d) => {
-        const w = J.get(d);
-        if (w) return w;
+        const y = J.get(d);
+        if (y) return y;
         if (t?.length) {
           const T = t.find(
             (le) => a(le) === d
@@ -90,11 +90,11 @@ function Be({
     },
     [J, a, t, $]
   );
-  N(() => {
+  b(() => {
     z(n);
   }, [n, z]);
-  const K = M.useMemo(() => l ? null : R[0] ?? null, [l, R]);
-  N(() => {
+  const K = R.useMemo(() => l ? null : k[0] ?? null, [l, k]);
+  b(() => {
     if (!m) return;
     const e = W || "";
     if (B.has(e)) {
@@ -106,8 +106,8 @@ function Be({
         I({ loading: !0, error: null });
         const c = await i(W);
         q((d) => new Map(d).set(e, c)), G(c), Q((d) => {
-          const w = new Map(d);
-          return c.forEach((U) => w.set(a(U), U)), w;
+          const y = new Map(d);
+          return c.forEach((U) => y.set(a(U), U)), y;
         });
       } catch (c) {
         I({
@@ -118,11 +118,11 @@ function Be({
         I((c) => ({ ...c, loading: !1 }));
       }
     })();
-  }, [m, W, B, i, a]), N(() => {
+  }, [m, W, B, i, a]), b(() => {
     m && z(n);
-  }, [m, z, n]), N(() => {
+  }, [m, z, n]), b(() => {
     m && P.current && P.current.focus();
-  }, [m]), N(() => {
+  }, [m]), b(() => {
     if (!m || !F.current) return;
     const e = F.current.getBoundingClientRect();
     se(e.width);
@@ -137,7 +137,7 @@ function Be({
       if (!l) return;
       const o = Array.isArray(n) ? n : [], c = o.includes(e);
       let d;
-      c ? d = o.filter((w) => w !== e) : d = [...o, e], g?.(d);
+      c ? d = o.filter((y) => y !== e) : d = [...o, e], g?.(d);
     },
     [n, g, l]
   ), oe = j(
@@ -145,9 +145,9 @@ function Be({
       e.stopPropagation(), e.preventDefault(), g?.(l ? [] : ""), L(!1);
     },
     [g]
-  ), Z = M.useId();
-  return /* @__PURE__ */ u("div", { className: k("flex flex-col gap-2", D), children: [
-    y && /* @__PURE__ */ r(pe, { htmlFor: Z, children: y }),
+  ), Z = R.useId();
+  return /* @__PURE__ */ u("div", { className: M("flex flex-col gap-1.5", v), children: [
+    N && /* @__PURE__ */ r(pe, { htmlFor: Z, children: N }),
     /* @__PURE__ */ u(xe, { open: m, onOpenChange: L, children: [
       /* @__PURE__ */ r(we, { asChild: !0, children: /* @__PURE__ */ r(
         "button",
@@ -156,18 +156,19 @@ function Be({
           ref: F,
           type: "button",
           disabled: A,
-          className: k(
+          className: M(
             Ce({ size: ee }),
             "!border-d-border/50 border !shadow-none",
             A && "cursor-not-allowed opacity-50",
             "font-normal",
             "w-full",
-            "focus-visible:ring-d-ring focus-visible:ring-1",
-            m && "ring-d-ring ring-1",
-            v
+            "w-full",
+            x.focusRing,
+            m && x.activeRing,
+            D
           ),
           children: /* @__PURE__ */ u("div", { className: "flex w-full flex-1 items-center justify-between overflow-hidden", children: [
-            l ? Array.isArray(n) && n.length > 0 ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: n.length === 1 ? R[0] && s(R[0]) : `${n.length} elementi selezionati` }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }) : K ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: s(K) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }),
+            l ? Array.isArray(n) && n.length > 0 ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: n.length === 1 ? k[0] && s(k[0]) : `${n.length} elementi selezionati` }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }) : K ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: s(K) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }),
             /* @__PURE__ */ u("div", { className: "flex flex-shrink-0 items-center justify-end gap-1", children: [
               S && (l && Array.isArray(n) && n.length > 0 || !l && K) && /* @__PURE__ */ r(
                 "div",
@@ -201,7 +202,7 @@ function Be({
       /* @__PURE__ */ r(
         ye,
         {
-          className: k("p-0"),
+          className: M("p-0"),
           style: { width: H ? `${H}px` : void 0 },
           align: "start",
           side: "bottom",
@@ -237,20 +238,20 @@ function Be({
 function Ae({
   option: i,
   multiple: t,
-  value: x,
+  value: w,
   resolveOptionValue: C,
   renderSelectedValue: a,
   renderOptionItem: s,
   onSelect: h,
-  onSelectMultiple: y
+  onSelectMultiple: N
 }) {
   const f = C(i);
   let n = !1;
-  return t ? n = Array.isArray(x) && x.includes(f) : n = x === f, /* @__PURE__ */ r(
+  return t ? n = Array.isArray(w) && w.includes(f) : n = w === f, /* @__PURE__ */ r(
     V,
     {
       value: f,
-      onSelect: t ? y : h,
+      onSelect: t ? N : h,
       className: "cursor-pointer",
       children: /* @__PURE__ */ u("div", { className: "flex w-full items-center justify-between overflow-hidden", children: [
         /* @__PURE__ */ u("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
@@ -260,7 +261,7 @@ function Ae({
         /* @__PURE__ */ r(
           be,
           {
-            className: k(
+            className: M(
               "ml-2 h-4 w-4 flex-shrink-0",
               n ? "opacity-100" : "opacity-0"
             )
@@ -274,18 +275,18 @@ function Ae({
 function Se({
   inputRef: i,
   commandListRef: t,
-  placeholder: x,
+  placeholder: w,
   searchTerm: C,
   onSearchTermChange: a,
   fetchState: s,
   options: h,
-  notFound: y,
+  notFound: N,
   noResultsMessage: f,
   multiple: n,
   value: g,
   resolveOptionValue: A,
-  renderSelectedValue: v,
-  renderOptionItem: D,
+  renderSelectedValue: D,
+  renderOptionItem: v,
   onSelect: E,
   onSelectMultiple: S
 }) {
@@ -294,7 +295,7 @@ function Se({
       ue,
       {
         ref: i,
-        placeholder: x,
+        placeholder: w,
         className: "placeholder:text-d-muted-foreground",
         value: C,
         onValueChange: a
@@ -303,8 +304,8 @@ function Se({
     s.loading && h.length > 0 && /* @__PURE__ */ r("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ r(Ne, { className: "h-4 w-4 animate-spin" }) }),
     /* @__PURE__ */ u(he, { ref: t, children: [
       s.error && /* @__PURE__ */ r("div", { className: "text-d-destructive p-3 text-center", children: s.error }),
-      s.loading && h.length === 0 && /* @__PURE__ */ r(Me, {}),
-      !s.loading && !s.error && h.length === 0 && (y || /* @__PURE__ */ r(ge, { children: f || "No results found." })),
+      s.loading && h.length === 0 && /* @__PURE__ */ r(Re, {}),
+      !s.loading && !s.error && h.length === 0 && (N || /* @__PURE__ */ r(ge, { children: f || "No results found." })),
       !s.loading && !s.error && h.length > 0 && /* @__PURE__ */ r(O, { children: h.map((l) => /* @__PURE__ */ r(
         Ae,
         {
@@ -312,8 +313,8 @@ function Se({
           multiple: n,
           value: g,
           resolveOptionValue: A,
-          renderSelectedValue: v,
-          renderOptionItem: D,
+          renderSelectedValue: D,
+          renderOptionItem: v,
           onSelect: E,
           onSelectMultiple: S
         },
@@ -322,7 +323,7 @@ function Se({
     ] })
   ] });
 }
-function Me() {
+function Re() {
   return /* @__PURE__ */ r(O, { children: [1, 2, 3].map((i) => /* @__PURE__ */ r(V, { disabled: !0, children: /* @__PURE__ */ u("div", { className: "flex w-full items-center gap-2", children: [
     /* @__PURE__ */ r("div", { className: "bg-d-secondary h-6 w-6 animate-pulse rounded-full" }),
     /* @__PURE__ */ u("div", { className: "flex flex-1 flex-col gap-1", children: [

package/dist/components/ui/button.js

@@ -64,7 +64,7 @@ function N({
     u,
     {
       "data-slot": "button",
-      className: s(m({ variant: a, size: e, className: d }), "relative"),
+      className: s("relative", m({ variant: a, size: e, className: d })),
       ...o,
       children: [
         /* @__PURE__ */ t("span", { className: "absolute inset-0 overflow-hidden rounded-[inherit] pointer-events-none", children: /* @__PURE__ */ t("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out" }) }),

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

@@ -1,98 +1,108 @@
 "use client";
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { Calendar as N } from "./calendar.js";
-import { Icon as k } from "./icon.js";
-import { Popover as I, PopoverTrigger as T, PopoverContent as v } from "./popover.js";
-import { designTokens as t } from "../../lib/design-tokens.js";
-import { cn as z } from "../../lib/utils.js";
-import * as b from "react";
-import { useEffect as E } from "react";
-import { it as R } from "../../node_modules/date-fns/locale/it.js";
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { Calendar as w } from "./calendar.js";
+import { Icon as E } from "./icon.js";
+import { Label as L } from "./label.js";
+import { Popover as q, PopoverTrigger as A, PopoverContent as B } from "./popover.js";
+import { designTokens as o } from "../../lib/design-tokens.js";
+import { cn as P } from "../../lib/utils.js";
+import * as c from "react";
+import { useEffect as F } from "react";
+import { it as G } from "../../node_modules/date-fns/locale/it.js";
 import { formatDate as d } from "../../node_modules/date-fns/format.js";
-import { isSameDay as q } from "../../node_modules/date-fns/isSameDay.js";
-function V({
+import { isSameDay as H } from "../../node_modules/date-fns/isSameDay.js";
+function v({
   value: e,
   onChange: p,
-  placeholder: y = "Seleziona data",
-  dateFormat: m = "dd/MM/yyyy",
-  className: j,
-  disabled: i = !1,
-  size: n = "default",
-  firstDate: a,
-  lastDate: l,
-  availableDates: u,
-  locale: C = R,
-  initialCalendarMonth: h,
-  customCalendarProps: P
+  placeholder: I = "Seleziona data",
+  dateFormat: a = "dd/MM/yyyy",
+  className: M,
+  disabled: n = !1,
+  size: m = "default",
+  firstDate: l,
+  lastDate: u,
+  availableDates: h,
+  locale: N = G,
+  initialCalendarMonth: g,
+  customCalendarProps: j,
+  label: x,
+  wrpClassName: k
 }) {
-  const [o, g] = b.useState(e), [S, x] = b.useState(
-    h
-  ), w = (s) => {
-    g(s), s && x(s), p && p(s);
+  const [r, y] = c.useState(e), [O, C] = c.useState(
+    g
+  ), [S, R] = c.useState(!1), z = (s) => {
+    y(s), s && C(s), p && p(s);
   };
-  let f = [];
-  return a && f.push({ before: a }), l && f.push({ after: l }), u?.length && f.push(
-    (s) => !u.some(
-      (M) => q(M, s)
+  let i = [];
+  l && i.push({ before: l }), u && i.push({ after: u }), h?.length && i.push(
+    (s) => !h.some(
+      (T) => H(T, s)
     )
-  ), i && (f = [!0]), E(() => {
-    g(o), x(o || h);
-  }, [o]), /* @__PURE__ */ c(I, { open: i ? !1 : void 0, children: [
-    /* @__PURE__ */ r(T, { asChild: !0, children: /* @__PURE__ */ r(
-      "div",
-      {
-        className: z(
-          t.input.base,
-          t.radius.default,
-          t.text.base,
-          t.interaction.disabled,
-          "flex items-center justify-between px-3 py-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
-          "focus-visible:ring-d-ring/50 focus-visible:border-d-ring outline-none focus-visible:ring-[3px]",
-          "hover:border-d-ring cursor-pointer transition-colors",
-          !o && "text-d-muted-foreground",
-          i && "cursor-not-allowed opacity-50",
-          n === "default" && t.sizes.default,
-          n === "sm" && t.sizes.sm,
-          n === "lg" && t.sizes.lg,
-          j
-        ),
-        "aria-disabled": i,
-        role: "button",
-        tabIndex: i ? -1 : 0,
-        onClick: i ? void 0 : () => {
-        },
-        children: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-between gap-2", children: [
-          /* @__PURE__ */ r(
-            k,
-            {
-              name: "Calendar",
-              size: n === "default" ? "md" : n === "sm" ? "xs" : "sm"
-            }
+  ), n && (i = [!0]), F(() => {
+    y(r), C(r || g);
+  }, [r]);
+  const b = c.useId();
+  return /* @__PURE__ */ f("div", { className: P("flex flex-col gap-1.5", k), children: [
+    x && /* @__PURE__ */ t(L, { htmlFor: b, children: x }),
+    /* @__PURE__ */ f(q, { open: n ? !1 : S, onOpenChange: R, children: [
+      /* @__PURE__ */ t(A, { asChild: !0, children: /* @__PURE__ */ f(
+        "div",
+        {
+          id: b,
+          className: P(
+            o.input.base,
+            o.radius.default,
+            o.text.base,
+            o.interaction.disabled,
+            "flex items-center gap-2 font-normal whitespace-nowrap [&>span]:line-clamp-1",
+            o.focusRing,
+            S && o.activeRing,
+            "hover:border-d-ring cursor-pointer transition-colors",
+            !r && "text-d-muted-foreground",
+            n && "cursor-not-allowed opacity-50",
+            m === "default" && o.sizes.default,
+            m === "sm" && o.sizes.sm,
+            m === "lg" && o.sizes.lg,
+            M
           ),
-          e && typeof e == "object" && "from" in e ? /* @__PURE__ */ c("span", { children: [
-            e.from && d(e.from, m),
-            e.from && e.to && " - ",
-            e.to && d(e.to, m)
-          ] }) : o ? /* @__PURE__ */ r("span", { children: d(o, m) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground", children: y })
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ r(v, { className: "w-auto p-0", children: /* @__PURE__ */ r(
-      N,
-      {
-        ...P || {
-          mode: "single",
-          selected: o,
-          onSelect: w
-        },
-        autoFocus: !0,
-        disabled: f,
-        locale: C,
-        defaultMonth: S
-      }
-    ) })
+          "aria-disabled": n,
+          role: "button",
+          tabIndex: n ? -1 : 0,
+          onClick: n ? void 0 : () => {
+          },
+          children: [
+            /* @__PURE__ */ t(
+              E,
+              {
+                name: "Calendar",
+                size: m === "lg" ? "sm" : "xs"
+              }
+            ),
+            /* @__PURE__ */ t("div", { children: e && typeof e == "object" && "from" in e ? /* @__PURE__ */ f("span", { children: [
+              e.from && d(e.from, a),
+              e.from && e.to && " - ",
+              e.to && d(e.to, a)
+            ] }) : r ? /* @__PURE__ */ t("span", { children: d(r, a) }) : /* @__PURE__ */ t("span", { className: "text-d-muted-foreground", children: I }) })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(B, { className: "w-auto p-0", children: /* @__PURE__ */ t(
+        w,
+        {
+          ...j || {
+            mode: "single",
+            selected: r,
+            onSelect: z
+          },
+          autoFocus: !0,
+          disabled: i,
+          locale: N,
+          defaultMonth: O
+        }
+      ) })
+    ] })
   ] });
 }
 export {
-  V as DatePicker
+  v as DatePicker
 };