laif-ds 0.2.62 → 0.2.64

package/dist/components/ui/app-stepper.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as l, jsxs as s } from "react/jsx-runtime";
-import { Stepper as g, StepperNav as z, StepperItem as V, StepperTrigger as S, StepperIndicator as b, StepperTitle as N, StepperSeparator as w, StepperPanel as C, StepperContent as I } from "./stepper.js";
-import { cva as e } from "../../node_modules/class-variance-authority/dist/index.js";
-const T = e("", {
+import { Stepper as V, StepperNav as S, StepperItem as b, StepperTrigger as N, StepperIndicator as w, StepperTitle as C, StepperSeparator as I, StepperPanel as T, StepperContent as j } from "./stepper.js";
+import { cva as t } from "../../node_modules/class-variance-authority/dist/index.js";
+const k = t("", {
   variants: {
     align: {
       horizontal: "flex w-full flex-col",
@@ -12,7 +12,7 @@ const T = e("", {
   defaultVariants: {
     align: "horizontal"
   }
-}), j = e(
+}), y = t(
   "rounded-lg p-6 shadow w-full max-w-6xl",
   {
     variants: {
@@ -25,7 +25,7 @@ const T = e("", {
       align: "horizontal"
     }
   }
-), k = e("", {
+), A = t("", {
   variants: {
     align: {
       horizontal: "flex flex-col gap-3",
@@ -35,7 +35,7 @@ const T = e("", {
   defaultVariants: {
     align: "horizontal"
   }
-}), y = e("relative", {
+}), W = t("relative", {
   variants: {
     align: {
       horizontal: "flex-1 items-start",
@@ -45,7 +45,7 @@ const T = e("", {
   defaultVariants: {
     align: "horizontal"
   }
-}), A = e("", {
+}), q = t("", {
   variants: {
     align: {
       horizontal: "w-full",
@@ -55,7 +55,7 @@ const T = e("", {
   defaultVariants: {
     align: "horizontal"
   }
-}), W = e("", {
+}), B = t("", {
   variants: {
     size: {
       sm: "w-6 h-6 text-sm font-medium",
@@ -65,7 +65,7 @@ const T = e("", {
   defaultVariants: {
     size: "sm"
   }
-}), q = e("", {
+}), D = t("", {
   variants: {
     size: {
       sm: "text-sm font-medium",
@@ -75,7 +75,7 @@ const T = e("", {
   defaultVariants: {
     size: "sm"
   }
-}), B = e(
+}), E = t(
   "group-data-[state=completed]/step:bg-d-primary",
   {
     variants: {
@@ -105,7 +105,7 @@ const T = e("", {
       size: "sm"
     }
   }
-), D = e("flex flex-1", {
+), F = t("flex flex-1", {
   variants: {
     align: {
       horizontal: "justify-center",
@@ -115,7 +115,7 @@ const T = e("", {
   defaultVariants: {
     align: "horizontal"
   }
-}), E = e("flex flex-1 flex-col", {
+}), G = t("flex flex-1 flex-col", {
   variants: {
     align: {
       horizontal: "items-center",
@@ -126,87 +126,98 @@ const T = e("", {
     align: "horizontal"
   }
 });
-function J({
-  steps: r,
-  align: t = "horizontal",
+function L({
+  steps: i,
+  align: e = "horizontal",
   size: n = "sm",
   showSeparators: f = !0,
   defaultStep: u,
   allowStepNavigation: c = !0,
-  allowClickOnlyCompleted: p = !1,
-  onStepClick: d,
+  allowClickOnlyCompleted: d = !1,
+  onStepClick: p,
   indicators: h,
+  id: v,
+  "data-testid": x,
   ...o
 }) {
-  const v = (a, i) => {
-    if (d) {
-      d(a, i);
+  const g = (a, r) => {
+    if (p) {
+      p(a, r);
       return;
     }
-    c && !a.disabled && (!p || a.completed) && o.onValueChange?.(a.id);
-  }, x = o.value ?? u ?? r[0]?.id;
+    c && !a.disabled && (!d || a.completed) && o.onValueChange?.(a.id);
+  }, z = o.value ?? u ?? i[0]?.id;
   return /* @__PURE__ */ l(
-    g,
+    V,
     {
       ...o,
-      value: x,
-      orientation: t,
+      value: z,
+      orientation: e,
       indicators: h,
-      children: /* @__PURE__ */ s("div", { className: T({ align: t }), children: [
-        /* @__PURE__ */ l(z, { className: A({ align: t }), children: r.map((a, i) => {
-          const m = c && !a.disabled && (!p || a.completed);
-          return /* @__PURE__ */ s(
-            V,
-            {
-              step: a.id,
-              completed: a.completed,
-              disabled: a.disabled,
-              loading: a.loading,
-              className: y({ align: t }),
-              children: [
-                /* @__PURE__ */ s(
-                  S,
-                  {
-                    className: k({ align: t }),
-                    onClick: () => v(a, i),
-                    style: { cursor: m ? "pointer" : "default" },
-                    children: [
-                      /* @__PURE__ */ l(
-                        b,
-                        {
-                          className: W({ size: n }),
-                          children: a.id
-                        }
-                      ),
-                      /* @__PURE__ */ l(N, { className: q({ size: n }), children: a.label })
-                    ]
-                  }
-                ),
-                f && i < r.length - 1 && /* @__PURE__ */ l(
-                  w,
-                  {
-                    className: B({ align: t, size: n })
-                  }
-                )
-              ]
-            },
-            a.id
-          );
-        }) }),
-        /* @__PURE__ */ l(C, { className: D({ align: t }), children: r.map((a) => /* @__PURE__ */ l(
-          I,
-          {
-            value: a.id,
-            className: E({ align: t }),
-            children: /* @__PURE__ */ l("div", { className: j({ align: t }), children: a.component })
-          },
-          a.id
-        )) })
-      ] })
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          id: v,
+          "data-testid": x,
+          className: k({ align: e }),
+          children: [
+            /* @__PURE__ */ l(S, { className: q({ align: e }), children: i.map((a, r) => {
+              const m = c && !a.disabled && (!d || a.completed);
+              return /* @__PURE__ */ s(
+                b,
+                {
+                  step: a.id,
+                  completed: a.completed,
+                  disabled: a.disabled,
+                  loading: a.loading,
+                  className: W({ align: e }),
+                  children: [
+                    /* @__PURE__ */ s(
+                      N,
+                      {
+                        className: A({ align: e }),
+                        onClick: () => g(a, r),
+                        style: { cursor: m ? "pointer" : "default" },
+                        "data-testid": a["data-testid"],
+                        children: [
+                          /* @__PURE__ */ l(
+                            w,
+                            {
+                              className: B({ size: n }),
+                              children: a.id
+                            }
+                          ),
+                          /* @__PURE__ */ l(C, { className: D({ size: n }), children: a.label })
+                        ]
+                      }
+                    ),
+                    f && r < i.length - 1 && /* @__PURE__ */ l(
+                      I,
+                      {
+                        className: E({ align: e, size: n })
+                      }
+                    )
+                  ]
+                },
+                a.id
+              );
+            }) }),
+            /* @__PURE__ */ l(T, { className: F({ align: e }), children: i.map((a) => /* @__PURE__ */ l(
+              j,
+              {
+                value: a.id,
+                className: G({ align: e }),
+                children: /* @__PURE__ */ l("div", { className: y({ align: e }), children: a.component })
+              },
+              a.id
+            )) })
+          ]
+        }
+      )
     }
   );
 }
 export {
-  J as AppStepper,
-  J as default
+  L as AppStepper,
+  L as default
 };

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

@@ -1,18 +1,18 @@
 "use client";
 import { jsxs as x, jsx as r } from "react/jsx-runtime";
-import { useDebounce as le } from "../../hooks/use-debounce.js";
-import { cva as ie } from "../../node_modules/class-variance-authority/dist/index.js";
+import { useDebounce as me } from "../../hooks/use-debounce.js";
+import { cva as ue } from "../../node_modules/class-variance-authority/dist/index.js";
 import * as k from "react";
 import { useState as y, useEffect as A, useCallback as j } from "react";
 import { designTokens as u } from "../design-tokens.js";
 import { cn as z } 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 _, CommandItem as O } from "./command.js";
+import { Checkbox as he } from "./checkbox.js";
+import { Command as ge, CommandInput as pe, CommandList as we, CommandEmpty as xe, CommandGroup as _, CommandItem as O } from "./command.js";
 import { Icon as Z } from "./icon.js";
-import { Label as pe } from "./label.js";
-import { Popover as we, PopoverTrigger as xe, PopoverContent as ye } from "./popover.js";
-import Ne from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
-const be = ie(
+import { Label as ye } from "./label.js";
+import { Popover as Ne, PopoverTrigger as be, PopoverContent as Ce } from "./popover.js";
+import Ae from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+const Se = ue(
   z(
     u.input.base,
     u.radius.default,
@@ -34,9 +34,9 @@ const be = ie(
     }
   }
 );
-function Fe({
+function $e({
   fetcher: i,
-  initialOptions: t,
+  initialOptions: n,
   debounce: N = 300,
   renderOptionItem: S,
   resolveOptionValue: s,
@@ -44,25 +44,27 @@ function Fe({
   notFound: h,
   label: C,
   placeholder: f = "Select...",
-  value: n,
+  value: t,
   onChange: g,
   disabled: M = !1,
   className: v,
   wrpClassName: E,
-  noResultsMessage: P,
+  noResultsMessage: I,
   clearable: R = !0,
   multiple: o = !1,
-  size: V
+  size: V,
+  id: ee,
+  "data-testid": re
 }) {
-  const [m, I] = y(!1), L = k.useRef(null), F = k.useRef(null), ee = k.useRef(null), [re, W] = y({ loading: !1, error: null }), [X, ne] = y(""), B = le(X, N), [$, te] = y(/* @__PURE__ */ new Map()), [G, K] = y([]), [q, se] = y(0), [H, J] = y(() => t?.length ? new Map(
-    t.map((e) => [s(e), e])
+  const [m, P] = y(!1), L = k.useRef(null), F = k.useRef(null), te = k.useRef(null), [ne, W] = y({ loading: !1, error: null }), [X, se] = y(""), B = me(X, N), [$, ce] = y(/* @__PURE__ */ new Map()), [G, K] = y([]), [q, ae] = y(0), [H, J] = y(() => n?.length ? new Map(
+    n.map((e) => [s(e), e])
   ) : /* @__PURE__ */ new Map());
   A(() => {
-    t?.length && (K((e) => e.length ? e : t), J((e) => {
+    n?.length && (K((e) => e.length ? e : n), J((e) => {
       const p = new Map(e);
-      return t.forEach((a) => p.set(s(a), a)), p;
+      return n.forEach((a) => p.set(s(a), a)), p;
     }));
-  }, [t, s]);
+  }, [n, s]);
   const [D, Q] = y([]), T = j(
     (e) => {
       if (!e) {
@@ -72,9 +74,9 @@ function Fe({
       const a = (Array.isArray(e) ? e : [e]).map((l) => {
         const d = H.get(l);
         if (d) return d;
-        if (t?.length) {
-          const b = t.find(
-            (de) => s(de) === l
+        if (n?.length) {
+          const b = n.find(
+            (fe) => s(fe) === l
           );
           if (b) return b;
         }
@@ -84,11 +86,11 @@ function Fe({
       }).filter(Boolean);
       Q(a);
     },
-    [H, s, t, G]
+    [H, s, n, G]
   );
   A(() => {
-    T(n);
-  }, [n, T]);
+    T(t);
+  }, [t, T]);
   const U = k.useMemo(() => o ? null : D[0] ?? null, [o, D]);
   A(() => {
     if (!m) return;
@@ -101,15 +103,15 @@ function Fe({
       try {
         W({ loading: !0, error: null });
         const a = await i(B), l = (() => {
-          if (!t?.length) return a;
+          if (!n?.length) return a;
           const d = /* @__PURE__ */ new Map();
-          return t.forEach((w) => {
+          return n.forEach((w) => {
             d.set(s(w), w);
           }), a.forEach((w) => {
             d.set(s(w), w);
           }), Array.from(d.values());
         })();
-        te((d) => new Map(d).set(e, l)), K(l), J((d) => {
+        ce((d) => new Map(d).set(e, l)), K(l), J((d) => {
           const w = new Map(d);
           return l.forEach((b) => w.set(s(b), b)), w;
         });
@@ -128,47 +130,48 @@ function Fe({
     $,
     i,
     s,
-    t
+    n
   ]), A(() => {
-    m && T(n);
-  }, [m, T, n]), A(() => {
+    m && T(t);
+  }, [m, T, t]), A(() => {
     m && L.current && L.current.focus();
   }, [m]), A(() => {
     if (!m || !F.current) return;
     const e = F.current.getBoundingClientRect();
-    se(e.width);
+    ae(e.width);
   }, [m]);
-  const ce = j(
+  const oe = j(
     (e) => {
-      g?.(R && e === n ? "" : e), I(!1);
+      g?.(R && e === t ? "" : e), P(!1);
     },
-    [n, g, R]
-  ), ae = j(
+    [t, g, R]
+  ), de = j(
     (e) => {
       if (!o) return;
-      const p = Array.isArray(n) ? n : [], a = p.includes(e);
+      const p = Array.isArray(t) ? t : [], a = p.includes(e);
       let l;
       a ? l = p.filter((d) => d !== e) : l = [...p, e], g?.(l);
     },
-    [n, g, o]
-  ), oe = j(
+    [t, g, o]
+  ), le = j(
     (e) => {
-      e.stopPropagation(), e.preventDefault(), g?.(o ? [] : ""), I(!1);
+      e.stopPropagation(), e.preventDefault(), g?.(o ? [] : ""), P(!1);
     },
     [g]
-  ), Y = k.useId();
+  ), ie = k.useId(), Y = ee ?? ie;
   return /* @__PURE__ */ x("div", { className: z("flex flex-col gap-1.5", E), children: [
-    C && /* @__PURE__ */ r(pe, { htmlFor: Y, children: C }),
-    /* @__PURE__ */ x(we, { open: m, onOpenChange: I, children: [
-      /* @__PURE__ */ r(xe, { asChild: !0, children: /* @__PURE__ */ r(
+    C && /* @__PURE__ */ r(ye, { htmlFor: Y, children: C }),
+    /* @__PURE__ */ x(Ne, { open: m, onOpenChange: P, children: [
+      /* @__PURE__ */ r(be, { asChild: !0, children: /* @__PURE__ */ r(
         "button",
         {
           id: Y,
+          "data-testid": re,
           ref: F,
           type: "button",
           disabled: M,
           className: z(
-            be({ size: V }),
+            Se({ size: V }),
             "!border-d-border/50 border !shadow-none",
             M && "cursor-not-allowed opacity-50",
             "font-normal",
@@ -179,13 +182,13 @@ function Fe({
             v
           ),
           children: /* @__PURE__ */ x("div", { className: "flex w-full flex-1 items-center justify-between overflow-hidden", children: [
-            o ? Array.isArray(n) && n.length > 0 ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: n.length === 1 ? D[0] && c(D[0]) : `${n.length} elementi selezionati` }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }) : U ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: c(U) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }),
+            o ? Array.isArray(t) && t.length > 0 ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: t.length === 1 ? D[0] && c(D[0]) : `${t.length} elementi selezionati` }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }) : U ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: c(U) }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }),
             /* @__PURE__ */ x("div", { className: "flex flex-shrink-0 items-center justify-end gap-1", children: [
-              R && (o && Array.isArray(n) && n.length > 0 || !o && U) && /* @__PURE__ */ r(
+              R && (o && Array.isArray(t) && t.length > 0 || !o && U) && /* @__PURE__ */ r(
                 "div",
                 {
                   className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
-                  onClick: oe,
+                  onClick: le,
                   onMouseDown: (e) => e.preventDefault(),
                   "aria-label": "Clear selection",
                   children: /* @__PURE__ */ r(
@@ -211,7 +214,7 @@ function Fe({
         }
       ) }),
       /* @__PURE__ */ r(
-        ye,
+        Ce,
         {
           className: z("p-0"),
           style: { width: q ? `${q}px` : void 0 },
@@ -222,24 +225,24 @@ function Fe({
           avoidCollisions: !0,
           collisionPadding: 8,
           children: /* @__PURE__ */ r(
-            Ae,
+            Re,
             {
               inputRef: L,
-              commandListRef: ee,
+              commandListRef: te,
               placeholder: f,
               searchTerm: X,
-              onSearchTermChange: ne,
-              fetchState: re,
+              onSearchTermChange: se,
+              fetchState: ne,
               options: G,
               notFound: h,
-              noResultsMessage: P,
+              noResultsMessage: I,
               multiple: o,
-              value: n,
+              value: t,
               resolveOptionValue: s,
               renderSelectedValue: c,
               renderOptionItem: S,
-              onSelect: ce,
-              onSelectMultiple: ae
+              onSelect: oe,
+              onSelectMultiple: de
             }
           )
         }
@@ -247,9 +250,9 @@ function Fe({
     ] })
   ] });
 }
-function Ce({
+function Me({
   option: i,
-  multiple: t,
+  multiple: n,
   value: N,
   resolveOptionValue: S,
   renderSelectedValue: s,
@@ -258,28 +261,28 @@ function Ce({
   onSelectMultiple: C
 }) {
   const f = S(i);
-  let n = !1;
-  return t ? n = Array.isArray(N) && N.includes(f) : n = N === f, /* @__PURE__ */ r(
+  let t = !1;
+  return n ? t = Array.isArray(N) && N.includes(f) : t = N === f, /* @__PURE__ */ r(
     O,
     {
       value: f,
-      onSelect: t ? C : h,
+      onSelect: n ? C : h,
       className: z(
         "cursor-pointer",
         u.dropdownItem.hover,
-        n && u.dropdownItem.selected
+        t && u.dropdownItem.selected
       ),
       children: /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between overflow-hidden", children: /* @__PURE__ */ x("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        t && /* @__PURE__ */ r(fe, { checked: n }),
+        n && /* @__PURE__ */ r(he, { checked: t }),
         c ? /* @__PURE__ */ r("div", { className: "truncate", children: c(i) }) : /* @__PURE__ */ r("span", { className: "truncate", children: s(i) })
       ] }) })
     },
     f
   );
 }
-function Ae({
+function Re({
   inputRef: i,
-  commandListRef: t,
+  commandListRef: n,
   placeholder: N,
   searchTerm: S,
   onSearchTermChange: s,
@@ -287,17 +290,17 @@ function Ae({
   options: h,
   notFound: C,
   noResultsMessage: f,
-  multiple: n,
+  multiple: t,
   value: g,
   resolveOptionValue: M,
   renderSelectedValue: v,
   renderOptionItem: E,
-  onSelect: P,
+  onSelect: I,
   onSelectMultiple: R
 }) {
-  return /* @__PURE__ */ x(me, { shouldFilter: !1, className: "w-full border-none shadow-sm", children: [
+  return /* @__PURE__ */ x(ge, { shouldFilter: !1, className: "w-full border-none shadow-sm", children: [
     /* @__PURE__ */ r(
-      ue,
+      pe,
       {
         ref: i,
         placeholder: N,
@@ -306,21 +309,21 @@ function Ae({
         onValueChange: s
       }
     ),
-    c.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__ */ x(he, { ref: t, children: [
+    c.loading && h.length > 0 && /* @__PURE__ */ r("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ r(Ae, { className: "h-4 w-4 animate-spin" }) }),
+    /* @__PURE__ */ x(we, { ref: n, children: [
       c.error && /* @__PURE__ */ r("div", { className: "text-d-destructive p-3 text-center", children: c.error }),
-      c.loading && h.length === 0 && /* @__PURE__ */ r(Se, {}),
-      !c.loading && !c.error && h.length === 0 && (C || /* @__PURE__ */ r(ge, { children: f || "No results found." })),
+      c.loading && h.length === 0 && /* @__PURE__ */ r(ke, {}),
+      !c.loading && !c.error && h.length === 0 && (C || /* @__PURE__ */ r(xe, { children: f || "No results found." })),
       !c.loading && !c.error && h.length > 0 && /* @__PURE__ */ r(_, { children: h.map((o) => /* @__PURE__ */ r(
-        Ce,
+        Me,
         {
           option: o,
-          multiple: n,
+          multiple: t,
           value: g,
           resolveOptionValue: M,
           renderSelectedValue: v,
           renderOptionItem: E,
-          onSelect: P,
+          onSelect: I,
           onSelectMultiple: R
         },
         M(o)
@@ -328,7 +331,7 @@ function Ae({
     ] })
   ] });
 }
-function Se() {
+function ke() {
   return /* @__PURE__ */ r(_, { children: [1, 2, 3].map((i) => /* @__PURE__ */ r(O, { disabled: !0, children: /* @__PURE__ */ x("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__ */ x("div", { className: "flex flex-1 flex-col gap-1", children: [
@@ -338,6 +341,6 @@ function Se() {
   ] }) }, i)) });
 }
 export {
-  Fe as AsyncSelect,
-  be as selectTriggerVariants
+  $e as AsyncSelect,
+  Se as selectTriggerVariants
 };