laif-ds 0.2.49 → 0.2.51

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

@@ -1,25 +1,33 @@
 "use client";
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { useDebounce as le } from "../../hooks/use-debounce.js";
-import { cva as de } from "../../node_modules/class-variance-authority/dist/index.js";
-import * as S from "react";
+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 { cn as v } from "../../lib/utils.js";
-import { Checkbox as ie } from "./checkbox.js";
-import { Command as fe, CommandInput as me, CommandList as ue, CommandEmpty as he, CommandGroup as _, CommandItem as O } from "./command.js";
-import { Icon as Z } from "./icon.js";
-import { Label as ge } from "./label.js";
-import { Popover as pe, PopoverTrigger as xe, PopoverContent as we } from "./popover.js";
-import ye from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
-import Ne from "../../node_modules/lucide-react/dist/esm/icons/check.js";
-const be = de(
-  "flex items-center justify-between whitespace-nowrap rounded-md border border-d-input bg-d-input px-3 py-2 data-[placeholder]:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 ",
+import { designTokens as b } from "../../lib/design-tokens.js";
+import { cn as k } 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";
+import { Label as pe } from "./label.js";
+import { Popover as xe, PopoverTrigger as we, PopoverContent as ye } from "./popover.js";
+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,
+    "flex items-center justify-between whitespace-nowrap transition-all [&>span]:line-clamp-1",
+    "data-[placeholder]:text-d-muted-foreground",
+    "focus:outline-none"
+  ),
   {
     variants: {
       size: {
-        default: "h-9 text-sm",
-        sm: "h-8 text-xs",
-        lg: "h-10 text-lg"
+        default: b.sizes.default,
+        sm: b.sizes.sm,
+        lg: b.sizes.lg
       }
     },
     defaultVariants: {
@@ -27,11 +35,11 @@ const be = de(
     }
   }
 );
-function Ie({
+function Be({
   fetcher: i,
   initialOptions: t,
   debounce: x = 300,
-  renderOptionItem: b,
+  renderOptionItem: C,
   resolveOptionValue: a,
   renderSelectedValue: s,
   notFound: h,
@@ -39,92 +47,92 @@ function Ie({
   placeholder: f = "Select...",
   value: n,
   onChange: g,
-  disabled: C = !1,
-  className: D,
-  wrpClassName: T,
-  noResultsMessage: z,
-  clearable: A = !0,
+  disabled: A = !1,
+  className: v,
+  wrpClassName: D,
+  noResultsMessage: E,
+  clearable: S = !0,
   multiple: l = !1,
-  size: V
+  size: ee
 }) {
-  const [m, E] = p(!1), L = S.useRef(null), P = S.useRef(null), ee = S.useRef(null), [re, F] = p({ loading: !1, error: null }), [U, ne] = p(""), I = le(U, x), [W, X] = p(/* @__PURE__ */ new Map()), [B, $] = p([]), [q, te] = p(0), [H, J] = p(() => t?.length ? new Map(
+  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(
     t.map((e) => [a(e), e])
   ) : /* @__PURE__ */ new Map());
   N(() => {
-    t?.length && (X((e) => {
+    t?.length && (q((e) => {
       const o = new Map(e);
       return o.has("") || o.set("", t), o;
-    }), $((e) => e.length ? e : t), J((e) => {
+    }), G((e) => e.length ? e : t), Q((e) => {
       const o = new Map(e);
       return t.forEach((c) => o.set(a(c), c)), o;
     }));
   }, [t, a]);
-  const [M, Q] = p([]), R = j(
+  const [R, Y] = p([]), z = j(
     (e) => {
       if (!e) {
-        Q([]);
+        Y([]);
         return;
       }
       const c = (Array.isArray(e) ? e : [e]).map((d) => {
-        const w = H.get(d);
+        const w = J.get(d);
         if (w) return w;
         if (t?.length) {
-          const k = t.find(
-            (oe) => a(oe) === d
+          const T = t.find(
+            (le) => a(le) === d
           );
-          if (k) return k;
+          if (T) return T;
         }
-        return B.find(
-          (k) => a(k) === d
+        return $.find(
+          (T) => a(T) === d
         ) ?? null;
       }).filter(Boolean);
-      Q(c);
+      Y(c);
     },
-    [H, a, t, B]
+    [J, a, t, $]
   );
   N(() => {
-    R(n);
-  }, [n, R]);
-  const G = S.useMemo(() => l ? null : M[0] ?? null, [l, M]);
+    z(n);
+  }, [n, z]);
+  const K = M.useMemo(() => l ? null : R[0] ?? null, [l, R]);
   N(() => {
     if (!m) return;
-    const e = I || "";
-    if (W.has(e)) {
-      $(W.get(e));
+    const e = W || "";
+    if (B.has(e)) {
+      G(B.get(e));
       return;
     }
     (async () => {
       try {
-        F({ loading: !0, error: null });
-        const c = await i(I);
-        X((d) => new Map(d).set(e, c)), $(c), J((d) => {
+        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((K) => w.set(a(K), K)), w;
+          return c.forEach((U) => w.set(a(U), U)), w;
         });
       } catch (c) {
-        F({
+        I({
           loading: !1,
           error: c instanceof Error ? c.message : "Failed to fetch options"
         });
       } finally {
-        F((c) => ({ ...c, loading: !1 }));
+        I((c) => ({ ...c, loading: !1 }));
       }
     })();
-  }, [m, I, W, i, a]), N(() => {
-    m && R(n);
-  }, [m, R, n]), N(() => {
-    m && L.current && L.current.focus();
+  }, [m, W, B, i, a]), N(() => {
+    m && z(n);
+  }, [m, z, n]), N(() => {
+    m && P.current && P.current.focus();
   }, [m]), N(() => {
-    if (!m || !P.current) return;
-    const e = P.current.getBoundingClientRect();
-    te(e.width);
+    if (!m || !F.current) return;
+    const e = F.current.getBoundingClientRect();
+    se(e.width);
   }, [m]);
-  const se = j(
+  const ce = j(
     (e) => {
-      g?.(A && e === n ? "" : e), E(!1);
+      g?.(S && e === n ? "" : e), L(!1);
     },
-    [n, g, A]
-  ), ce = j(
+    [n, g, S]
+  ), ae = j(
     (e) => {
       if (!l) return;
       const o = Array.isArray(n) ? n : [], c = o.includes(e);
@@ -132,44 +140,44 @@ function Ie({
       c ? d = o.filter((w) => w !== e) : d = [...o, e], g?.(d);
     },
     [n, g, l]
-  ), ae = j(
+  ), oe = j(
     (e) => {
-      e.stopPropagation(), e.preventDefault(), g?.(l ? [] : ""), E(!1);
+      e.stopPropagation(), e.preventDefault(), g?.(l ? [] : ""), L(!1);
     },
     [g]
-  ), Y = S.useId();
-  return /* @__PURE__ */ u("div", { className: v("flex flex-col gap-2", T), children: [
-    y && /* @__PURE__ */ r(ge, { htmlFor: Y, children: y }),
-    /* @__PURE__ */ u(pe, { open: m, onOpenChange: E, children: [
-      /* @__PURE__ */ r(xe, { asChild: !0, children: /* @__PURE__ */ r(
+  ), Z = M.useId();
+  return /* @__PURE__ */ u("div", { className: k("flex flex-col gap-2", D), children: [
+    y && /* @__PURE__ */ r(pe, { htmlFor: Z, children: y }),
+    /* @__PURE__ */ u(xe, { open: m, onOpenChange: L, children: [
+      /* @__PURE__ */ r(we, { asChild: !0, children: /* @__PURE__ */ r(
         "button",
         {
-          id: Y,
-          ref: P,
+          id: Z,
+          ref: F,
           type: "button",
-          disabled: C,
-          className: v(
-            be({ size: V }),
+          disabled: A,
+          className: k(
+            Ce({ size: ee }),
             "!border-d-border/50 border !shadow-none",
-            C && "cursor-not-allowed opacity-50",
+            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",
-            D
+            v
           ),
           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 ? M[0] && s(M[0]) : `${n.length} elementi selezionati` }) : /* @__PURE__ */ r("span", { className: "text-d-muted-foreground truncate text-left", children: f }) : G ? /* @__PURE__ */ r("div", { className: "min-w-0 flex-1 truncate text-left", children: s(G) }) : /* @__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 ? 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 }),
             /* @__PURE__ */ u("div", { className: "flex flex-shrink-0 items-center justify-end gap-1", children: [
-              A && (l && Array.isArray(n) && n.length > 0 || !l && G) && /* @__PURE__ */ r(
+              S && (l && Array.isArray(n) && n.length > 0 || !l && K) && /* @__PURE__ */ r(
                 "div",
                 {
                   className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
-                  onClick: ae,
+                  onClick: oe,
                   onMouseDown: (e) => e.preventDefault(),
                   "aria-label": "Clear selection",
                   children: /* @__PURE__ */ r(
-                    Z,
+                    _,
                     {
                       name: "X",
                       size: "xs",
@@ -179,7 +187,7 @@ function Ie({
                 }
               ),
               /* @__PURE__ */ r(
-                Z,
+                _,
                 {
                   name: "ChevronsUpDown",
                   size: "xs",
@@ -191,34 +199,34 @@ function Ie({
         }
       ) }),
       /* @__PURE__ */ r(
-        we,
+        ye,
         {
-          className: v("p-0"),
-          style: { width: q ? `${q}px` : void 0 },
+          className: k("p-0"),
+          style: { width: H ? `${H}px` : void 0 },
           align: "start",
           side: "bottom",
           sideOffset: 4,
           onWheel: (e) => e.stopPropagation(),
           avoidCollisions: !1,
           children: /* @__PURE__ */ r(
-            Ae,
+            Se,
             {
-              inputRef: L,
-              commandListRef: ee,
+              inputRef: P,
+              commandListRef: re,
               placeholder: f,
-              searchTerm: U,
-              onSearchTermChange: ne,
-              fetchState: re,
-              options: B,
+              searchTerm: X,
+              onSearchTermChange: te,
+              fetchState: ne,
+              options: $,
               notFound: h,
-              noResultsMessage: z,
+              noResultsMessage: E,
               multiple: l,
               value: n,
               resolveOptionValue: a,
               renderSelectedValue: s,
-              renderOptionItem: b,
-              onSelect: se,
-              onSelectMultiple: ce
+              renderOptionItem: C,
+              onSelect: ce,
+              onSelectMultiple: ae
             }
           )
         }
@@ -226,33 +234,33 @@ function Ie({
     ] })
   ] });
 }
-function Ce({
+function Ae({
   option: i,
   multiple: t,
   value: x,
-  resolveOptionValue: b,
+  resolveOptionValue: C,
   renderSelectedValue: a,
   renderOptionItem: s,
   onSelect: h,
   onSelectMultiple: y
 }) {
-  const f = b(i);
+  const f = C(i);
   let n = !1;
   return t ? n = Array.isArray(x) && x.includes(f) : n = x === f, /* @__PURE__ */ r(
-    O,
+    V,
     {
       value: f,
       onSelect: t ? y : 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: [
-          t && /* @__PURE__ */ r(ie, { checked: n }),
+          t && /* @__PURE__ */ r(fe, { checked: n }),
           s ? /* @__PURE__ */ r("div", { className: "truncate", children: s(i) }) : /* @__PURE__ */ r("span", { className: "truncate", children: a(i) })
         ] }),
         /* @__PURE__ */ r(
-          Ne,
+          be,
           {
-            className: v(
+            className: k(
               "ml-2 h-4 w-4 flex-shrink-0",
               n ? "opacity-100" : "opacity-0"
             )
@@ -263,11 +271,11 @@ function Ce({
     f
   );
 }
-function Ae({
+function Se({
   inputRef: i,
   commandListRef: t,
   placeholder: x,
-  searchTerm: b,
+  searchTerm: C,
   onSearchTermChange: a,
   fetchState: s,
   options: h,
@@ -275,47 +283,47 @@ function Ae({
   noResultsMessage: f,
   multiple: n,
   value: g,
-  resolveOptionValue: C,
-  renderSelectedValue: D,
-  renderOptionItem: T,
-  onSelect: z,
-  onSelectMultiple: A
+  resolveOptionValue: A,
+  renderSelectedValue: v,
+  renderOptionItem: D,
+  onSelect: E,
+  onSelectMultiple: S
 }) {
-  return /* @__PURE__ */ u(fe, { shouldFilter: !1, className: "w-full border-none shadow-sm", children: [
+  return /* @__PURE__ */ u(me, { shouldFilter: !1, className: "w-full border-none shadow-sm", children: [
     /* @__PURE__ */ r(
-      me,
+      ue,
       {
         ref: i,
         placeholder: x,
         className: "placeholder:text-d-muted-foreground",
-        value: b,
+        value: C,
         onValueChange: a
       }
     ),
-    s.loading && h.length > 0 && /* @__PURE__ */ r("div", { className: "flex items-center justify-center p-2", children: /* @__PURE__ */ r(ye, { className: "h-4 w-4 animate-spin" }) }),
-    /* @__PURE__ */ u(ue, { ref: t, children: [
+    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(Se, {}),
-      !s.loading && !s.error && h.length === 0 && (y || /* @__PURE__ */ r(he, { children: f || "No results found." })),
-      !s.loading && !s.error && h.length > 0 && /* @__PURE__ */ r(_, { children: h.map((l) => /* @__PURE__ */ r(
-        Ce,
+      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 && !s.error && h.length > 0 && /* @__PURE__ */ r(O, { children: h.map((l) => /* @__PURE__ */ r(
+        Ae,
         {
           option: l,
           multiple: n,
           value: g,
-          resolveOptionValue: C,
-          renderSelectedValue: D,
-          renderOptionItem: T,
-          onSelect: z,
-          onSelectMultiple: A
+          resolveOptionValue: A,
+          renderSelectedValue: v,
+          renderOptionItem: D,
+          onSelect: E,
+          onSelectMultiple: S
         },
-        C(l)
+        A(l)
       )) })
     ] })
   ] });
 }
-function Se() {
-  return /* @__PURE__ */ r(_, { children: [1, 2, 3].map((i) => /* @__PURE__ */ r(O, { disabled: !0, children: /* @__PURE__ */ u("div", { className: "flex w-full items-center gap-2", children: [
+function Me() {
+  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: [
       /* @__PURE__ */ r("div", { className: "bg-d-secondary h-4 w-24 animate-pulse rounded" }),
@@ -324,6 +332,6 @@ function Se() {
   ] }) }, i)) });
 }
 export {
-  Ie as AsyncSelect,
-  be as selectTriggerVariants
+  Be as AsyncSelect,
+  Ce as selectTriggerVariants
 };

package/dist/components/ui/badge.js

@@ -1,11 +1,18 @@
 "use client";
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { Root as v } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as p } from "../../node_modules/class-variance-authority/dist/index.js";
-import { cn as c } from "../../lib/utils.js";
-import { Icon as g } from "./icon.js";
-const u = p(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:ring-[3px] aria-invalid:ring-d-destructive/20 aria-invalid:border-d-destructive transition-[color,box-shadow] overflow-hidden",
+import { jsx as e, jsxs as v } from "react/jsx-runtime";
+import { Root as p } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
+import { cva as h } from "../../node_modules/class-variance-authority/dist/index.js";
+import { designTokens as t } from "../../lib/design-tokens.js";
+import { cn as a } from "../../lib/utils.js";
+import { Icon as u } from "./icon.js";
+const b = h(
+  a(
+    t.badge.base,
+    t.radius.default,
+    t.focusRing,
+    "transition-[color,box-shadow] overflow-hidden",
+    "[&>svg]:size-3 [&>svg]:pointer-events-none"
+  ),
   {
     variants: {
       variant: {
@@ -32,46 +39,46 @@ const u = p(
     }
   }
 );
-function y({
-  className: t,
-  variant: a,
-  asChild: d = !1,
-  disabled: n = !1,
-  iconLeft: o,
-  iconRight: s,
+function k({
+  className: o,
+  variant: d,
+  asChild: n = !1,
+  disabled: s = !1,
+  iconLeft: c,
+  iconRight: i,
   ...r
 }) {
-  const i = d ? v : "span";
-  return d ? /* @__PURE__ */ e(
-    i,
+  const g = n ? p : "span";
+  return n ? /* @__PURE__ */ e(
+    g,
     {
       "data-slot": "badge",
-      className: c(
-        u({ variant: a }),
-        n && "cursor-not-allowed opacity-50",
-        t
+      className: a(
+        b({ variant: d }),
+        s && "cursor-not-allowed opacity-50",
+        o
       ),
       ...r
     }
-  ) : /* @__PURE__ */ b(
-    i,
+  ) : /* @__PURE__ */ v(
+    g,
     {
       "data-slot": "badge",
-      className: c(
-        u({ variant: a }),
-        n && "cursor-not-allowed opacity-50",
-        t
+      className: a(
+        b({ variant: d }),
+        s && "cursor-not-allowed opacity-50",
+        o
       ),
       ...r,
       children: [
-        o && /* @__PURE__ */ e(g, { name: o }),
+        c && /* @__PURE__ */ e(u, { name: c }),
         r.children,
-        s && /* @__PURE__ */ e(g, { name: s })
+        i && /* @__PURE__ */ e(u, { name: i })
       ]
     }
   );
 }
 export {
-  y as Badge,
-  u as badgeVariants
+  k as Badge,
+  b as badgeVariants
 };