laif-ds 0.2.52 → 0.2.54

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

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

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cn as r } from "../../lib/utils.js";
+import { cva as k } from "../../node_modules/class-variance-authority/dist/index.js";
+import * as c from "react";
+import { Label as g } from "./label.js";
+import { Tooltip as z, TooltipTrigger as B, TooltipContent as C } from "./tooltip.js";
+const x = k(
+  "inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-d-ring focus-visible:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "hover:text-d-foreground text-d-muted-foreground",
+        primary: "hover:text-d-primary text-d-primary/70",
+        secondary: "hover:text-d-secondary-foreground text-d-secondary-foreground/70",
+        accent: "hover:text-d-accent-foreground text-d-accent-foreground/70",
+        muted: "hover:text-d-muted-foreground text-d-muted-foreground/50",
+        ghost: "hover:bg-d-accent hover:text-d-accent-foreground"
+      },
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function E({
+  content: o,
+  children: n,
+  label: t,
+  labelClassName: i,
+  header: f,
+  variant: v = "primary",
+  triggerVariant: l = "default",
+  size: u = "default",
+  className: m,
+  wrpClassName: p,
+  contentClassName: h,
+  side: b = "top",
+  align: y = "center",
+  sideOffset: T = 4,
+  matchTriggerWidth: s = !1,
+  delayDuration: N = 200,
+  disabled: R = !1,
+  asChild: j = !1
+}) {
+  const [w, A] = c.useState(), a = c.useRef(null);
+  return c.useEffect(() => {
+    s && a.current && A(a.current.getBoundingClientRect().width);
+  }, [s]), R ? /* @__PURE__ */ d("div", { className: r("flex flex-col gap-2", p), children: [
+    t && /* @__PURE__ */ e(g, { className: i, children: t }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: r(
+          x({ variant: l, size: u }),
+          m
+        ),
+        children: n
+      }
+    )
+  ] }) : /* @__PURE__ */ d("div", { className: r("flex flex-col gap-2", p), children: [
+    t && /* @__PURE__ */ e(g, { className: i, children: t }),
+    /* @__PURE__ */ d(z, { delayDuration: N, children: [
+      /* @__PURE__ */ e(B, { asChild: j, children: /* @__PURE__ */ e(
+        "div",
+        {
+          ref: a,
+          className: r(
+            x({ variant: l, size: u }),
+            m
+          ),
+          children: n
+        }
+      ) }),
+      /* @__PURE__ */ d(
+        C,
+        {
+          variant: v,
+          side: b,
+          align: y,
+          sideOffset: T,
+          className: r(h),
+          style: {
+            width: s ? w : void 0
+          },
+          children: [
+            f && /* @__PURE__ */ e("div", { className: "border-d-border mb-2 border-b pb-2 font-semibold", children: f }),
+            o
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function F({
+  text: o,
+  className: n,
+  variant: t = "primary",
+  truncate: i = !0
+}) {
+  return /* @__PURE__ */ e(E, { content: o, variant: t, asChild: !0, children: /* @__PURE__ */ e(
+    "span",
+    {
+      className: r(
+        "text-d-secondary-foreground block w-full min-w-0",
+        i && "truncate",
+        n
+      ),
+      children: o
+    }
+  ) });
+}
+export {
+  F as AppTextTooltip,
+  E as AppTooltip,
+  E as default
+};