laif-ds 0.2.49 → 0.2.50

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

@@ -1,104 +1,107 @@
 "use client";
-import { jsxs as s, jsx as l, Fragment as le } from "react/jsx-runtime";
-import { Badge as re } from "./badge.js";
-import { Command as ne, CommandInput as ae, CommandList as te, CommandEmpty as se, CommandGroup as j, CommandItem as M } from "./command.js";
-import { Label as ie } from "./label.js";
-import { cn as w } from "../../lib/utils.js";
-import { useState as h, useRef as oe, useMemo as N, useCallback as de, useEffect as ce } from "react";
-import { Checkbox as ue } from "./checkbox.js";
+import { jsxs as s, jsx as l, Fragment as re } from "react/jsx-runtime";
+import { Badge as ne } from "./badge.js";
+import { Command as ae, CommandInput as te, CommandList as se, CommandEmpty as ie, CommandGroup as A, CommandItem as B } from "./command.js";
+import { Label as oe } from "./label.js";
+import { designTokens as p } from "../../lib/design-tokens.js";
+import { cn as N } from "../../lib/utils.js";
+import { useState as h, useRef as de, useMemo as y, useCallback as ce, useEffect as ue } from "react";
+import { Checkbox as me } from "./checkbox.js";
 import { Icon as S } from "./icon.js";
-import { Popover as me, PopoverTrigger as fe, PopoverContent as he } from "./popover.js";
-import pe from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-const ge = {
-  sm: "min-h-8 h-8 text-xs py-1.5",
-  default: "min-h-9 h-9 text-sm py-2",
-  lg: "min-h-10 h-10 text-base py-2"
+import { Popover as fe, PopoverTrigger as pe, PopoverContent as he } from "./popover.js";
+import ge from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const ve = {
+  sm: p.sizes.sm,
+  default: p.sizes.default,
+  lg: p.sizes.lg
 };
-function Oe(P) {
+function Ve(z) {
   const {
     multiple: n = !1,
-    options: m,
-    value: A,
-    defaultValue: B,
-    onValueChange: R,
-    onClear: p,
-    placeholder: X = "Seleziona...",
-    emptyPlaceholder: E = "Nessun risultato",
-    searchPlaceholder: F = "Cerca...",
-    addItemPlaceholder: L = "Aggiungi",
-    itemCountMessage: T = (e) => `${e} elementi selezionati`,
-    maxSelectedMessage: W = (e) => `Puoi selezionare fino a ${e} elementi`,
-    label: D,
-    className: $ = "",
-    wrpClassName: G = "",
-    searchable: O = !1,
-    creatable: q = !1,
-    groupBy: g = "group",
+    options: d,
+    value: R,
+    defaultValue: T,
+    onValueChange: X,
+    onClear: g,
+    placeholder: E = "Seleziona...",
+    emptyPlaceholder: F = "Nessun risultato",
+    searchPlaceholder: L = "Cerca...",
+    addItemPlaceholder: W = "Aggiungi",
+    itemCountMessage: $ = (e) => `${e} elementi selezionati`,
+    maxSelectedMessage: G = (e) => `Puoi selezionare fino a ${e} elementi`,
+    label: P,
+    className: q = "",
+    wrpClassName: H = "",
+    searchable: D = !1,
+    creatable: J = !1,
+    groupBy: v = "group",
     maxSelected: o,
-    showChipsInsteadOfCount: H = !1,
+    showChipsInsteadOfCount: K = !1,
     disabled: b,
-    size: J = "default",
-    isSingleSelectClearable: K = !1
-  } = P, [v, x] = h(!1), [d, C] = h(""), y = oe(null), [Q, U] = h(0), V = P.hasOwnProperty("value"), [Y, Z] = h(B), i = V ? A : Y, c = (e) => {
-    V || Z(e), R?.(e);
-  }, a = N(() => n ? Array.isArray(i) ? i : [] : i != null ? [i] : [], [i, n]), u = N(() => {
-    const e = m.filter((t) => a.includes(t.value));
+    size: Q = "default",
+    isSingleSelectClearable: U = !1
+  } = z, [O, x] = h(!1), [c, C] = h(""), w = de(null), [V, Y] = h(0), k = z.hasOwnProperty("value"), [Z, _] = h(T), i = k ? R : Z, u = (e) => {
+    k || _(e), X?.(e);
+  }, a = y(() => n ? Array.isArray(i) ? i : [] : i != null ? [i] : [], [i, n]), m = y(() => {
+    const e = d.filter((t) => a.includes(t.value));
     if (n) {
       const t = a.filter((r) => !e.find((f) => f.value === r)).map((r) => ({ value: r, label: r }));
       return [...e, ...t];
     } else if (a.length && !e.length)
       return [{ value: a[0], label: a[0] }];
     return e;
-  }, [m, a, n]), z = (e) => {
+  }, [d, a, n]), I = (e) => {
     if (!e.disabled)
       if (n) {
         const t = a.includes(e.value);
         if (!t && o !== void 0 && a.length >= o)
           return;
-        c(
+        u(
           t ? a.filter((r) => r !== e.value) : [...a, e.value]
         );
       } else
-        c(e.value), x(!1);
-  }, k = de(() => {
-    c(n ? [] : void 0), C(""), p && p();
-  }, [c, p, n]), _ = N(() => g ? m.reduce(
+        u(e.value), x(!1);
+  }, j = ce(() => {
+    u(n ? [] : void 0), C(""), g && g();
+  }, [u, g, n]), ee = y(() => v ? d.reduce(
     (e, t) => {
-      const r = t[g] || "";
+      const r = t[v] || "";
       return e[r] = e[r] || [], e[r].push(t), e;
     },
     {}
-  ) : { "": m }, [m, g]);
-  return ce(() => {
-    v && y.current && U(y.current.getBoundingClientRect().width);
-  }, [v]), /* @__PURE__ */ s("div", { className: w("flex flex-col gap-2", G), children: [
-    D && /* @__PURE__ */ l(ie, { children: D }),
+  ) : { "": d }, [d, v]);
+  return ue(() => {
+    w.current && Y(w.current.getBoundingClientRect().width);
+  }, [O, a, d]), /* @__PURE__ */ s("div", { className: N("flex flex-col gap-2", H), children: [
+    P && /* @__PURE__ */ l(oe, { children: P }),
     /* @__PURE__ */ s(
-      me,
+      fe,
       {
-        open: b ? !1 : v,
+        open: b ? !1 : O,
         onOpenChange: (e) => !b && x(e),
         modal: !0,
         children: [
-          /* @__PURE__ */ l(fe, { asChild: !0, children: /* @__PURE__ */ s(
+          /* @__PURE__ */ l(pe, { asChild: !0, children: /* @__PURE__ */ s(
             "div",
             {
-              ref: y,
-              className: w(
-                "bg-d-input border-d-border/50 focus-within:ring-d-ring flex min-h-10 w-full min-w-[100px] cursor-pointer items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm focus-within:ring-1",
-                ge[J],
+              ref: w,
+              className: N(
+                p.input.base,
+                p.radius.default,
+                "focus-within:ring-d-ring/50 focus-within:border-d-ring flex w-full min-w-[100px] cursor-pointer items-center justify-between gap-2 focus-within:ring-[3px]",
+                ve[Q],
                 b && "cursor-not-allowed opacity-50",
-                $
+                q
               ),
               children: [
-                u.length === 0 ? /* @__PURE__ */ l("span", { className: "text-d-muted-foreground", children: X }) : n ? /* @__PURE__ */ s("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-nowrap gap-1 overflow-auto", children: H ? /* @__PURE__ */ l(le, { children: u.map((e) => /* @__PURE__ */ s(
-                    re,
+                m.length === 0 ? /* @__PURE__ */ l("span", { className: "text-d-muted-foreground", children: E }) : n ? /* @__PURE__ */ s("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ l("div", { className: "flex min-w-0 flex-nowrap gap-1 overflow-auto", children: K ? /* @__PURE__ */ l(re, { children: m.map((e) => /* @__PURE__ */ s(
+                    ne,
                     {
                       variant: "secondary",
                       className: "hover:bg-d-secondary/100 bg-d-secondary/50 border-d-border flex cursor-pointer items-center gap-1 border",
                       onClick: (t) => {
-                        t.stopPropagation(), z(e);
+                        t.stopPropagation(), I(e);
                       },
                       children: [
                         e.label,
@@ -106,13 +109,13 @@ function Oe(P) {
                       ]
                     },
                     e.value
-                  )) }) : /* @__PURE__ */ l("div", { children: T(u.length) }) }),
+                  )) }) : /* @__PURE__ */ l("div", { children: $(m.length) }) }),
                   n && /* @__PURE__ */ l(
                     "div",
                     {
                       className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
                       onClick: (e) => {
-                        e.stopPropagation(), e.preventDefault(), k();
+                        e.stopPropagation(), e.preventDefault(), j();
                       },
                       onMouseDown: (e) => e.preventDefault(),
                       "aria-label": "Clear selection",
@@ -127,13 +130,13 @@ function Oe(P) {
                     }
                   )
                 ] }) : /* @__PURE__ */ s("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ l("div", { className: "min-w-0 flex-1 truncate", children: typeof u[0]?.label == "string" ? /* @__PURE__ */ l("span", { children: u[0]?.label }) : u[0]?.label }),
-                  K && i !== void 0 && i !== null && /* @__PURE__ */ l(
+                  /* @__PURE__ */ l("div", { className: "min-w-0 flex-1 truncate", children: typeof m[0]?.label == "string" ? /* @__PURE__ */ l("span", { children: m[0]?.label }) : m[0]?.label }),
+                  U && i !== void 0 && i !== null && /* @__PURE__ */ l(
                     "div",
                     {
                       className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
                       onClick: (e) => {
-                        e.stopPropagation(), e.preventDefault(), k();
+                        e.stopPropagation(), e.preventDefault(), j();
                       },
                       onMouseDown: (e) => e.preventDefault(),
                       "aria-label": "Clear selection",
@@ -148,7 +151,7 @@ function Oe(P) {
                     }
                   )
                 ] }),
-                /* @__PURE__ */ l(pe, { className: "h-4 w-4 opacity-50" })
+                /* @__PURE__ */ l(ge, { className: "h-4 w-4 opacity-50" })
               ]
             }
           ) }),
@@ -156,50 +159,50 @@ function Oe(P) {
             he,
             {
               className: "p-0",
-              style: { width: Q },
+              style: { width: V > 0 ? V : "auto" },
               align: "start",
               sideOffset: 4,
-              children: /* @__PURE__ */ s(ne, { shouldFilter: !!O, className: "w-full", children: [
-                O && /* @__PURE__ */ l(
-                  ae,
+              children: /* @__PURE__ */ s(ae, { shouldFilter: !!D, className: "w-full", children: [
+                D && /* @__PURE__ */ l(
+                  te,
                   {
-                    placeholder: F,
+                    placeholder: L,
                     className: "placeholder:text-d-muted-foreground",
-                    value: d,
+                    value: c,
                     onValueChange: C
                   }
                 ),
-                /* @__PURE__ */ s(te, { className: "max-h-60 overflow-auto overscroll-contain", children: [
-                  /* @__PURE__ */ l(se, { children: E }),
-                  q && d && /* @__PURE__ */ l(j, { children: /* @__PURE__ */ l(
-                    M,
+                /* @__PURE__ */ s(se, { className: "max-h-60 overflow-auto overscroll-contain", children: [
+                  /* @__PURE__ */ l(ie, { children: F }),
+                  J && c && /* @__PURE__ */ l(A, { children: /* @__PURE__ */ l(
+                    B,
                     {
                       className: "cursor-pointer",
                       onSelect: () => {
-                        d && (c(n ? [...a, d] : d), C(""), !n && x(!1));
+                        c && (u(n ? [...a, c] : c), C(""), !n && x(!1));
                       },
                       children: /* @__PURE__ */ s("div", { className: "text-d-foreground text-xs", children: [
-                        L,
+                        W,
                         " “",
-                        d,
+                        c,
                         "”"
                       ] })
                     }
                   ) }),
-                  Object.entries(_).map(([e, t]) => /* @__PURE__ */ l(j, { heading: e || void 0, children: t.map((r) => {
-                    const f = a.includes(r.value), ee = n && o !== void 0 && !f && a.length >= o, I = r.disabled || ee;
+                  Object.entries(ee).map(([e, t]) => /* @__PURE__ */ l(A, { heading: e || void 0, children: t.map((r) => {
+                    const f = a.includes(r.value), le = n && o !== void 0 && !f && a.length >= o, M = r.disabled || le;
                     return /* @__PURE__ */ s(
-                      M,
+                      B,
                       {
                         value: typeof r.label == "string" ? r.label : String(r.value),
-                        onSelect: () => !I && z(r),
-                        className: w(
+                        onSelect: () => !M && I(r),
+                        className: N(
                           "cursor-pointer",
-                          I && "cursor-not-allowed opacity-50",
+                          M && "cursor-not-allowed opacity-50",
                           !n && f && "bg-d-accent/75 text-d-accent-foreground"
                         ),
                         children: [
-                          n && /* @__PURE__ */ l(ue, { checked: f, className: "mr-1" }),
+                          n && /* @__PURE__ */ l(me, { checked: f, className: "mr-1" }),
                           typeof r.label == "string" ? /* @__PURE__ */ l("span", { children: r.label }) : r.label
                         ]
                       },
@@ -207,7 +210,7 @@ function Oe(P) {
                     );
                   }) }, e))
                 ] }),
-                n && o !== void 0 && a.length >= o && /* @__PURE__ */ l("div", { className: "border-d-border text-d-muted-foreground border-t px-2 py-1 text-xs", children: W(o) })
+                n && o !== void 0 && a.length >= o && /* @__PURE__ */ l("div", { className: "border-d-border text-d-muted-foreground border-t px-2 py-1 text-xs", children: G(o) })
               ] })
             }
           )
@@ -217,5 +220,5 @@ function Oe(P) {
   ] });
 }
 export {
-  Oe as AppSelect
+  Ve as AppSelect
 };