laif-ds 1.1.3 → 1.1.5

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

@@ -1,452 +1,651 @@
 "use client";
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { useState as x, useRef as U, useId as je, useCallback as C, useMemo as w, useEffect as ae, useLayoutEffect as Ee } from "react";
-import { designTokens as p } from "../design-tokens.js";
-import { Badge as Fe } from "./badge.js";
-import { Command as Be, CommandInput as $e, CommandList as Ge, CommandEmpty as We, CommandGroup as ne, CommandItem as se } from "./command.js";
-import { Label as Xe } from "./label.js";
-import { cn as S } from "../../lib/utils.js";
-import { Button as He } from "./button.js";
-import { Checkbox as Ke } from "./checkbox.js";
-import { Icon as O } from "./icon.js";
-import { Popover as Ue, PopoverTrigger as _e, PopoverContent as Je } from "./popover.js";
-import Qe from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
-const Ye = {
-  sm: p.sizes.sm,
-  default: p.sizes.default,
-  lg: p.sizes.lg
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { useState as I, useRef as O, useId as tt, useCallback as T, useMemo as R, useLayoutEffect as re } from "react";
+import rt from "../../node_modules/react-remove-scroll/dist/es2015/Combination.js";
+import { designTokens as c } from "../design-tokens.js";
+import { Badge as at } from "./badge.js";
+import { Command as nt, CommandInput as lt, CommandList as it, CommandEmpty as ot, CommandGroup as ge, CommandItem as be } from "./command.js";
+import { Label as st } from "./label.js";
+import { cn as g } from "../../lib/utils.js";
+import { Button as dt } from "./button.js";
+import { Checkbox as ct } from "./checkbox.js";
+import { Icon as E } from "./icon.js";
+import { Popover as ut, PopoverTrigger as ft, PopoverContent as mt } from "./popover.js";
+import pt from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const ve = {
+  sm: c.sizes.sm,
+  default: c.sizes.default,
+  lg: c.sizes.lg
+}, ht = 24, xe = g(
+  c.motion.duration,
+  "-mx-1 flex shrink-0 cursor-pointer items-center rounded-sm p-1 opacity-50 outline-none transition-opacity enabled:hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-d-ring disabled:cursor-not-allowed"
+), gt = {
+  width: 0,
+  height: 0,
+  innerHeight: 0,
+  paddingLeft: 0,
+  paddingRight: 0
+}, ye = (u) => typeof u.label == "string" ? u.label : u.keywords?.[0] ?? String(u.value), we = (u) => {
+  const z = typeof u.label == "string" ? [u.label] : [];
+  return u.keywords && z.push(...u.keywords), z.length > 0 ? z : [String(u.value)];
 };
-function ut(A) {
-  const {
+function Lt(u) {
+  const z = u, {
     multiple: a = !1,
-    options: d,
-    value: oe,
-    defaultValue: ie,
-    renderValue: D,
-    onValueChange: M,
-    onClear: R,
-    placeholder: q = "Seleziona...",
-    emptyPlaceholder: ce = "Nessun risultato",
-    searchPlaceholder: de = "Cerca...",
-    addItemPlaceholder: ue = "Aggiungi",
-    itemCountMessage: me = (e) => `${e} elementi selezionati`,
-    maxSelectedMessage: fe = (e) => `Puoi selezionare fino a ${e} elementi`,
+    options: f,
+    value: Ce,
+    defaultValue: Ne,
+    renderValue: B,
+    onValueChange: $,
+    onClear: j,
+    placeholder: D = "Seleziona...",
+    emptyPlaceholder: Se = "Nessun risultato",
+    searchPlaceholder: Ie = "Cerca...",
+    addItemPlaceholder: ke = "Aggiungi",
+    itemCountMessage: Re = (e) => e === 1 ? "1 elemento selezionato" : `${e} elementi selezionati`,
+    maxSelectedMessage: ze = (e) => `Puoi selezionare fino a ${e} elementi`,
     label: b,
-    className: he = "",
-    labelClassName: pe = "",
-    wrpClassName: be = "",
-    searchable: T = !1,
-    creatable: ge = !1,
-    noGroupLabel: _ = "Nessun gruppo",
-    maxSelected: i,
-    showChipsInsteadOfCount: ve = !1,
-    disabled: N,
-    size: ye = "default",
-    isSingleSelectClearable: xe = !1,
-    id: Ce,
-    "data-testid": we,
-    "aria-label": J,
-    "aria-labelledby": j,
-    portalContainer: Ne
-  } = A, L = A.multiple ? A.selectableAll ?? !0 : !1, [u, I] = x(!1), [g, E] = x(""), F = U(null), B = U(null), [Q, ke] = x(0), Y = je(), $ = `${Y}-label`, z = `${Y}-value`, [Z, Ie] = x(void 0), P = U(null), [Se, G] = x(void 0), W = C(
-    () => P.current?.querySelector(
-      '[cmdk-item][aria-selected="true"]'
-    ) ?? void 0,
-    []
-  ), Ae = C((e) => {
-    P.current = e, Ie(e?.querySelector("[cmdk-list]")?.id);
-  }, []), X = Object.prototype.hasOwnProperty.call(A, "value"), [De, Le] = x(ie), v = X ? oe : De, m = C(
+    className: De = "",
+    labelClassName: Le = "",
+    wrpClassName: Ae = "",
+    searchable: H = !1,
+    creatable: Pe = !1,
+    noGroupLabel: ae = "Nessun gruppo",
+    maxSelected: m,
+    showChipsInsteadOfCount: K = !1,
+    disabled: d,
+    size: ne = "default",
+    isSingleSelectClearable: Oe = !1,
+    required: le = !1,
+    "aria-invalid": M = !1,
+    id: Te,
+    "data-testid": Be,
+    selectableAll: He,
+    "aria-label": G,
+    "aria-labelledby": L,
+    portalContainer: Me,
+    // Caller attributes that are merged with the trigger's own, not replaced.
+    "aria-describedby": _e,
+    onKeyDown: Ve,
+    // Every remaining prop is an HTML attribute for the trigger.
+    ...Fe
+  } = z, _ = a ? He ?? !0 : !1, [C, V] = I(!1), qe = C && document.body.hasAttribute("data-scroll-locked"), [N, W] = I(""), X = O(null), Y = O(null), F = O(null), ie = O(null), Z = O(!1), [y, Ee] = I(
+    gt
+  ), [$e, je] = I(0), [Ke, oe] = I(!1), [Ge, se] = I(
+    Number.POSITIVE_INFINITY
+  ), J = tt(), A = `${J}-label`, q = `${J}-value`, de = `${J}-summary`, Q = Object.prototype.hasOwnProperty.call(u, "value"), [We, Xe] = I(Ne), k = Q ? Ce : We, v = T(
     (e) => {
-      X || Le(e), M?.(
+      Q || Xe(e), $?.(
         a ? Array.isArray(e) ? e : [] : Array.isArray(e) ? e[0] : e
       );
     },
-    [X, a, M]
-  ), n = w(() => a ? Array.isArray(v) ? v : [] : v != null ? [v] : [], [v, a]), f = w(() => {
-    const e = d.filter((l) => n.includes(l.value));
+    [Q, a, $]
+  ), i = R(() => {
+    const e = a ? Array.isArray(k) ? k : [] : k != null ? [k] : [];
+    return f.some((t) => t.value === "") ? e : e.filter((t) => t !== "");
+  }, [k, a, f]), s = R(() => {
+    const e = f.filter((t) => i.includes(t.value));
     if (a) {
-      const l = n.filter((t) => !e.find((s) => s.value === t)).map((t) => ({ value: t, label: t }));
-      return [...e, ...l];
-    } else if (n.length && !e.length)
-      return [{ value: n[0], label: n[0] }];
+      const t = i.filter((r) => !e.find((l) => l.value === r)).map((r) => ({ value: r, label: r }));
+      return [...e, ...t];
+    } else if (i.length && !e.length)
+      return [{ value: i[0], label: i[0] }];
     return e;
-  }, [d, n, a]), H = w(() => {
-    const e = f[0];
-    if (e)
-      return String(e.value).trim();
-  }, [f]), [ze, V] = x(void 0), ee = C(() => {
-    V(H), I(!0);
-  }, [H]), te = (e) => {
-    if (!e.disabled)
+  }, [f, i, a]), ce = (e) => {
+    if (!(d || e.disabled))
       if (a) {
-        const l = n.includes(e.value);
-        if (!l && i !== void 0 && n.length >= i)
+        const t = i.includes(e.value);
+        if (t && e.fixed || !t && m !== void 0 && i.length >= m)
           return;
-        m(
-          l ? n.filter((t) => t !== e.value) : [...n, e.value]
+        v(
+          t ? i.filter((r) => r !== e.value) : [...i, e.value]
         );
       } else
-        m(e.value), I(!1);
-  }, le = C(() => {
-    m(a ? [] : void 0), E(""), R && R();
-  }, [m, R, a]), Pe = () => Array.from(
-    P.current?.querySelectorAll(
-      '[cmdk-item]:not([aria-disabled="true"])'
-    ) ?? []
-  ), Ve = (e) => {
-    const l = Pe();
-    if (l.length === 0) return;
-    const t = l.findIndex(
-      (Te) => Te.getAttribute("aria-selected") === "true"
-    ), s = l.length - 1, k = e === "Home" ? 0 : e === "End" ? s : e === "ArrowDown" ? t < 0 ? 0 : Math.min(t + 1, s) : t <= 0 ? 0 : t - 1, o = l[k];
-    V(o.getAttribute("data-value") ?? void 0), G(o.id), o.scrollIntoView({ block: "nearest" });
-  }, Oe = () => {
-    W()?.click();
-  }, Me = (e) => {
-    if (!N && e.target === e.currentTarget) {
-      if (e.key === "Enter" || e.key === " ") {
-        if (e.preventDefault(), !u) {
-          ee();
-          return;
-        }
-        if (e.key === "Enter") {
-          Oe();
-          return;
-        }
-        I(!1);
+        v(e.value), V(!1);
+  }, ue = T(() => {
+    if (!d) {
+      if (a) {
+        const e = new Set(
+          f.filter((t) => t.fixed).map((t) => t.value)
+        );
+        v(i.filter((t) => e.has(t)));
+      } else
+        v(void 0);
+      W(""), j && j();
+    }
+  }, [d, a, f, i, v, j]), Ye = s.some((e) => !e.fixed), U = () => {
+    (F.current?.querySelector("input") ?? F.current)?.focus();
+  }, Ze = (e) => {
+    if (!(d || e.target !== e.currentTarget) && ["Enter", " ", "ArrowDown"].includes(e.key)) {
+      if (e.preventDefault(), C) {
+        U();
         return;
       }
-      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
-        if (e.preventDefault(), !u) {
-          ee();
-          return;
-        }
-        Ve(e.key);
-      }
+      Z.current = !0, V(!0);
     }
-  }, re = C(
+  }, fe = T(
     (e) => {
-      const l = g.toLocaleLowerCase();
-      return l ? (typeof e.label == "string" ? e.label : String(e.value)).toLocaleLowerCase().includes(l) : !0;
+      const t = N.toLocaleLowerCase();
+      return t ? we(e).some(
+        (r) => r.toLocaleLowerCase().includes(t)
+      ) : !0;
     },
-    [g]
-  ), h = w(
-    () => d.filter((e) => !e.disabled && re(e)),
-    [d, re]
-  ), K = w(
-    () => h.filter((e) => n.includes(e.value)).length,
-    [h, n]
-  ), y = w(() => {
-    if (K === 0) return "none";
-    const e = i !== void 0 && n.length >= i;
-    return K >= h.length || e ? "all" : "some";
+    [N]
+  ), w = R(
+    () => f.filter((e) => !e.disabled && fe(e)),
+    [f, fe]
+  ), ee = R(
+    () => w.filter((e) => i.includes(e.value)).length,
+    [w, i]
+  ), S = R(() => {
+    if (ee === 0) return "none";
+    const e = m !== void 0 && i.length >= m;
+    return ee >= w.length || e ? "all" : "some";
   }, [
-    K,
-    h.length,
-    n.length,
-    i
-  ]), Re = C(() => {
+    ee,
+    w.length,
+    i.length,
+    m
+  ]), Je = T(() => {
     if (!a) return;
-    if (y === "all") {
-      const t = new Set(h.map((o) => o.value)), s = new Set(
-        d.filter((o) => o.fixed).map((o) => o.value)
-      ), k = n.filter(
-        (o) => !t.has(o) || s.has(o)
+    if (S === "all") {
+      const r = new Set(w.map((o) => o.value)), l = new Set(
+        f.filter((o) => o.fixed).map((o) => o.value)
+      ), p = i.filter(
+        (o) => !r.has(o) || l.has(o)
       );
-      m(k);
+      v(p);
       return;
     }
-    const e = new Set(n), l = [...n];
-    for (const t of h)
-      if (!e.has(t.value)) {
-        if (i !== void 0 && l.length >= i) break;
-        l.push(t.value), e.add(t.value);
+    const e = new Set(i), t = [...i];
+    for (const r of w)
+      if (!e.has(r.value)) {
+        if (m !== void 0 && t.length >= m) break;
+        t.push(r.value), e.add(r.value);
       }
-    m(l);
+    v(t);
   }, [
     a,
-    y,
-    d,
-    n,
-    h,
+    S,
+    f,
     i,
-    m
-  ]), qe = w(() => {
-    const e = d.some((l) => l.group);
-    return d.reduce((l, t) => {
-      const s = e ? t.group || _ : "";
-      return l[s] = l[s] || [], l[s].push(t), l;
+    w,
+    m,
+    v
+  ]), Qe = R(() => {
+    const e = f.some((t) => t.group);
+    return f.reduce((t, r) => {
+      const l = e ? r.group || ae : "";
+      return t[l] = t[l] || [], t[l].push(r), t;
     }, {});
-  }, [d, _]);
-  return ae(() => {
-    F.current && ke(F.current.getBoundingClientRect().width);
-  }, [u, n, d]), Ee(() => {
-    if (!u) return;
+  }, [f, ae]);
+  re(() => {
+    const e = X.current;
+    if (!e) return;
+    const t = () => {
+      const l = e.getBoundingClientRect(), p = window.getComputedStyle(e);
+      Ee({
+        width: l.width,
+        height: l.height,
+        innerHeight: e.clientHeight,
+        paddingLeft: parseFloat(p.paddingLeft),
+        paddingRight: parseFloat(p.paddingRight)
+      });
+    };
+    if (t(), typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(t);
+    return r.observe(e), () => r.disconnect();
+  }, [C]);
+  const me = s.length > 0, Ue = s.some(
+    (e) => !e.fixed && !e.disabled
+  ), et = T((e) => {
+    const t = e?.querySelector('[data-slot="badge"]');
+    t && je(t.offsetHeight);
+  }, []);
+  re(() => {
+    if (!C || a) return;
     const e = requestAnimationFrame(() => {
-      B.current && B.current?.scrollIntoView({
+      Y.current && Y.current?.scrollIntoView({
         behavior: "instant",
         block: "center"
       });
     });
     return () => cancelAnimationFrame(e);
-  }, [u]), ae(() => {
-    const e = P.current;
-    if (!u || !e) {
-      G(void 0);
+  }, [C, a]), re(() => {
+    const e = ie.current;
+    if (!e || !K) {
+      oe(!1), se(Number.POSITIVE_INFINITY);
       return;
     }
-    const l = () => G(W()?.id);
-    l();
-    const t = new MutationObserver(l);
-    return t.observe(e, {
-      subtree: !0,
-      childList: !0,
-      attributes: !0,
-      attributeFilter: ["aria-selected"]
-    }), () => t.disconnect();
-  }, [u, Z, W]), /* @__PURE__ */ c("div", { className: S("flex flex-col gap-1.5", be), children: [
-    b && /* @__PURE__ */ r(Xe, { id: $, className: pe, children: b }),
-    /* @__PURE__ */ c(
-      Ue,
+    const t = () => {
+      const l = e.scrollWidth > e.clientWidth, p = Array.from(e.children).filter(
+        (x) => x instanceof HTMLElement
+      );
+      let o = p.length;
+      if (l) {
+        const x = e.clientWidth - ht, P = p.findIndex(
+          (he) => he.offsetLeft + he.offsetWidth > x
+        );
+        P !== -1 && (o = Math.max(1, P));
+      }
+      oe(l), se(o);
+    };
+    if (t(), typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(t);
+    r.observe(e);
+    for (const l of Array.from(e.children))
+      r.observe(l);
+    return () => r.disconnect();
+  }, [s, K]);
+  const pe = (e, t) => /* @__PURE__ */ h(
+    at,
+    {
+      variant: "secondary",
+      className: "bg-d-secondary/50 border-d-border flex max-w-full items-center gap-1 border",
+      children: [
+        /* @__PURE__ */ n("span", { className: "min-w-0 truncate", children: e.label }),
+        !e.fixed && !e.disabled && /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            tabIndex: t ? void 0 : -1,
+            disabled: d,
+            "aria-label": `Rimuovi ${ye(e)}`,
+            className: "hover:bg-d-secondary focus-visible:ring-d-ring -my-0.5 -mr-1.5 flex shrink-0 cursor-pointer items-center rounded-sm p-0.5 outline-none focus-visible:ring-2 focus-visible:ring-inset",
+            onMouseDown: (r) => r.preventDefault(),
+            onClick: (r) => {
+              r.stopPropagation(), r.preventDefault();
+              const l = r.currentTarget, p = t && document.activeElement === l, o = p ? Array.from(
+                l.closest('[role="list"]')?.querySelectorAll("button") ?? []
+              ) : [], x = o.indexOf(l);
+              if (ce(e), !p) return;
+              const P = o[x + 1] ?? o[x - 1];
+              requestAnimationFrame(() => {
+                P?.isConnected ? P.focus() : U();
+              });
+            },
+            children: /* @__PURE__ */ n(E, { name: "X", size: "xs" })
+          }
+        )
+      ]
+    }
+  ), te = a && s.length > 0 ? `${s.length} ${s.length === 1 ? "selezionato" : "selezionati"}: ${s.map(ye).join(", ")}` : void 0;
+  return /* @__PURE__ */ h("div", { className: g("flex flex-col gap-1.5", Ae), children: [
+    b && // The trigger is a div, so `htmlFor` cannot bind to it: it is named via
+    // aria-labelledby and a click here focuses it, like a native <select>.
+    /* @__PURE__ */ h(
+      st,
       {
-        open: N ? !1 : u,
-        onOpenChange: (e) => {
-          N || (e && V(H), I(e));
+        id: A,
+        className: g(
+          "gap-0.5",
+          !d && "cursor-pointer",
+          Le
+        ),
+        onClick: () => {
+          d || X.current?.focus();
         },
+        children: [
+          b,
+          le && !M && /* @__PURE__ */ n("span", { "aria-hidden": !0, children: "*" }),
+          M && /* @__PURE__ */ n("span", { "aria-hidden": !0, className: "text-d-destructive", children: "*" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ h(
+      ut,
+      {
+        open: d ? !1 : C,
+        onOpenChange: (e) => !d && V(e),
         modal: !1,
         children: [
-          /* @__PURE__ */ r(_e, { asChild: !0, children: /* @__PURE__ */ c(
+          /* @__PURE__ */ n(ft, { asChild: !0, children: /* @__PURE__ */ h(
             "div",
             {
-              ref: F,
-              id: Ce,
-              "data-testid": we,
+              ...Fe,
+              ref: X,
+              id: Te,
+              "data-testid": Be,
               role: "combobox",
-              tabIndex: N ? -1 : 0,
-              "aria-haspopup": "listbox",
-              "aria-controls": Z,
-              "aria-activedescendant": u ? Se : void 0,
-              "aria-labelledby": b ? `${$} ${z}` : j || void 0,
-              "aria-label": b || j ? void 0 : J ?? q,
-              "aria-disabled": N || void 0,
-              onKeyDown: Me,
-              className: S(
-                p.input.base,
-                p.radius.default,
-                p.focusRingWithin,
+              "aria-expanded": C,
+              "aria-haspopup": "dialog",
+              "aria-disabled": d || void 0,
+              "aria-required": le || void 0,
+              "aria-invalid": M || void 0,
+              "aria-labelledby": b ? a ? A : `${A} ${q}` : L || void 0,
+              "aria-label": b || L ? void 0 : G ?? D,
+              "aria-describedby": [_e, te && de].filter(Boolean).join(" ") || void 0,
+              tabIndex: d ? -1 : 0,
+              onKeyDown: (e) => {
+                Ve?.(e), e.defaultPrevented || Ze(e);
+              },
+              className: g(
+                c.input.base,
+                c.radius.default,
+                // focus-visible, not focus-within: the trigger is the focusable
+                // element, and focus-within would keep the ring after a mouse
+                // pick and light it when an inner clear button is focused.
+                c.focusRing,
                 "flex w-full min-w-[100px] cursor-pointer items-center justify-between gap-2",
-                u && p.activeRing,
-                Ye[ye],
-                N && "cursor-not-allowed opacity-50",
-                he
+                // Multiple: the open popover covers the trigger, and its ring
+                // would only show as a halo around the popover's edge.
+                C && !a && c.activeRing,
+                // aria-invalid: out-specifies activeRing and sorts after
+                // focus-visible, so the error wins while open or focused.
+                c.input.invalid,
+                ve[ne],
+                d && "cursor-not-allowed opacity-50",
+                De
               ),
               children: [
-                f.length === 0 ? /* @__PURE__ */ r("span", { id: z, className: "text-d-muted-foreground", children: q }) : a ? /* @__PURE__ */ c("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ r(
+                s.length === 0 ? /* @__PURE__ */ n("span", { id: q, className: "text-d-muted-foreground", children: D }) : a ? /* @__PURE__ */ h("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ n(
                     "div",
                     {
-                      id: z,
-                      className: "flex min-w-0 flex-nowrap gap-1 overflow-auto",
-                      children: ve ? f.map(
-                        (e) => D ? D(e) : /* @__PURE__ */ c(
-                          Fe,
-                          {
-                            variant: "secondary",
-                            className: "hover:bg-d-secondary/100 bg-d-secondary/50 border-d-border flex cursor-pointer items-center gap-1 border",
-                            onClick: (l) => {
-                              l.stopPropagation(), te(e);
-                            },
-                            children: [
-                              e.label,
-                              !e.fixed && /* @__PURE__ */ r(O, { name: "X", size: "xs" })
-                            ]
-                          },
-                          e.value
-                        )
-                      ) : /* @__PURE__ */ r("div", { children: me(f.length) })
+                      ref: ie,
+                      id: q,
+                      "aria-hidden": !0,
+                      className: g(
+                        "relative flex min-w-0 flex-1 flex-nowrap items-center gap-1 overflow-hidden",
+                        // mask-image instead of a colored gradient: the trigger
+                        // background can be overridden via className and turns
+                        // translucent when disabled.
+                        Ke && "[mask-image:linear-gradient(to_right,#000_calc(100%-1.5rem),transparent)]"
+                      ),
+                      children: K ? s.map((e, t) => /* @__PURE__ */ n(
+                        "span",
+                        {
+                          inert: t >= Ge,
+                          className: "flex max-w-full min-w-0 shrink-0",
+                          children: B ? B(e) : pe(e, !1)
+                        },
+                        e.value
+                      )) : /* @__PURE__ */ n("div", { className: "truncate", children: Re(s.length) })
                     }
                   ),
-                  a && /* @__PURE__ */ r(
-                    "div",
+                  Ye && /* @__PURE__ */ n(
+                    "button",
                     {
-                      className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
+                      type: "button",
+                      disabled: d,
+                      className: xe,
                       onClick: (e) => {
-                        e.stopPropagation(), e.preventDefault(), le();
+                        e.stopPropagation(), e.preventDefault(), ue();
                       },
                       onMouseDown: (e) => e.preventDefault(),
-                      "aria-label": "Clear selection",
-                      children: /* @__PURE__ */ r(
-                        O,
-                        {
-                          name: "X",
-                          size: "xs",
-                          className: "!text-d-foreground opacity-50"
-                        }
-                      )
+                      "aria-label": "Rimuovi tutte le selezioni",
+                      children: /* @__PURE__ */ n(E, { name: "X", size: "xs", className: "!text-d-foreground" })
                     }
                   )
-                ] }) : /* @__PURE__ */ c("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ r("div", { id: z, className: "min-w-0 flex-1 truncate", children: D ? D(f[0]) : typeof f[0]?.label == "string" ? /* @__PURE__ */ r("span", { children: f[0]?.label }) : f[0]?.label }),
-                  xe && v !== void 0 && v !== null && /* @__PURE__ */ r(
-                    "div",
+                ] }) : /* @__PURE__ */ h("div", { className: "flex h-full w-full min-w-0 items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ n("div", { id: q, className: "min-w-0 flex-1 truncate", children: B ? B(s[0]) : typeof s[0]?.label == "string" ? /* @__PURE__ */ n("span", { children: s[0]?.label }) : s[0]?.label }),
+                  Oe && s.length > 0 && /* @__PURE__ */ n(
+                    "button",
                     {
-                      role: "button",
-                      className: "border-d-input bg-d-accent cursor-pointer rounded-full p-1",
+                      type: "button",
+                      disabled: d,
+                      className: xe,
                       onClick: (e) => {
-                        e.stopPropagation(), e.preventDefault(), le();
+                        e.stopPropagation(), e.preventDefault(), ue();
                       },
                       onMouseDown: (e) => e.preventDefault(),
-                      "aria-label": "Clear selection",
-                      children: /* @__PURE__ */ r(
-                        O,
-                        {
-                          name: "X",
-                          size: "xs",
-                          className: "!text-d-foreground opacity-50"
-                        }
-                      )
+                      "aria-label": "Rimuovi selezione",
+                      children: /* @__PURE__ */ n(E, { name: "X", size: "xs", className: "!text-d-foreground" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ r(Qe, { className: "h-4 w-4 opacity-50" })
+                /* @__PURE__ */ n(pt, { className: "h-4 w-4 opacity-50" })
               ]
             }
           ) }),
-          /* @__PURE__ */ r(
-            Je,
+          /* @__PURE__ */ n(
+            mt,
             {
-              container: Ne,
-              className: "p-0",
-              style: { width: Q > 0 ? Q : "auto" },
+              container: Me,
+              "aria-labelledby": b ? A : L || void 0,
+              "aria-label": b || L ? void 0 : G ?? D,
+              className: g(
+                "p-0",
+                // Multiple: the popover covers the trigger (see sideOffset), so it
+                // only fades — sliding or zooming would move the chips it lands
+                // on. The overrides beat tw-animate-css's zoom/slide variables.
+                // The height cap keeps it inside the viewport: the list shrinks.
+                // Flipped above the trigger (data-side=top, set by Radix after
+                // measuring), the order is reversed so that the top row still lands
+                // on the trigger, now at the bottom. Variants rather than React
+                // state: the side is known only once positioned, so no wrong frame.
+                a && "group/select-popover flex max-h-[var(--radix-popover-content-available-height)] flex-col ![--tw-enter-scale:1] ![--tw-enter-translate-x:0] ![--tw-enter-translate-y:0] ![--tw-exit-scale:1] data-[side=top]:flex-col-reverse",
+                a && M && "border-d-destructive"
+              ),
+              style: {
+                width: y.width > 0 ? y.width : "auto"
+              },
               align: "start",
-              sideOffset: 4,
+              sideOffset: a ? -y.height : 4,
               avoidCollisions: !0,
               collisionPadding: 8,
-              onOpenAutoFocus: (e) => e.preventDefault(),
-              children: /* @__PURE__ */ c(
-                Be,
+              onOpenAutoFocus: (e) => {
+                e.preventDefault();
+                const t = Z.current;
+                Z.current = !1, H || t ? U() : a && F.current?.focus();
+              },
+              children: /* @__PURE__ */ h(
+                rt,
                 {
-                  ref: Ae,
-                  value: ze,
-                  onValueChange: V,
-                  shouldFilter: T,
-                  filter: (e, l, t) => {
-                    const s = l.toLocaleLowerCase();
-                    return s ? [e, ...t ?? []].some(
-                      (o) => o.toLocaleLowerCase().includes(s)
-                    ) ? 1 : 0 : 1;
-                  },
-                  className: "w-full",
+                  allowPinchZoom: !0,
+                  noIsolation: !qe,
+                  removeScrollBar: !1,
+                  className: "contents",
                   children: [
-                    (T || a && L) && /* @__PURE__ */ c(
+                    a && // The top row lines up with the covered trigger: same horizontal
+                    // padding and a trigger-high first row. The popover border is 1px
+                    // like the trigger's, so the content starts at the same point.
+                    // bg-d-input and the corner radius on the trigger's side: some
+                    // themes give the input a different surface than the popover.
+                    /* @__PURE__ */ n(
                       "div",
                       {
-                        className: S(
-                          "relative",
-                          a && L && "[&_[data-slot=command-d-input-wrapper]>svg]:hidden"
+                        className: g(
+                          ve[ne],
+                          c.radius.default,
+                          // box-content: the one-row min-height below excludes the 1px
+                          // separator, so the row can shrink down to exactly the trigger.
+                          "border-d-border bg-d-input box-content flex h-auto flex-col border-b py-0",
+                          "rounded-b-none group-data-[side=top]/select-popover:rounded-t-none group-data-[side=top]/select-popover:rounded-b-md group-data-[side=top]/select-popover:border-t group-data-[side=top]/select-popover:border-b-0"
                         ),
-                        children: [
-                          T ? /* @__PURE__ */ r(
-                            $e,
-                            {
-                              placeholder: de,
-                              className: S(
-                                "placeholder:text-d-muted-foreground",
-                                a && L && "pl-7"
-                              ),
-                              value: g,
-                              onValueChange: E
-                            }
-                          ) : /* @__PURE__ */ r("div", { className: "border-d-border h-9 border-b" }),
-                          a && L && /* @__PURE__ */ r(
-                            He,
-                            {
-                              type: "button",
-                              variant: "ghost",
-                              size: "sm",
-                              disabled: h.length === 0,
-                              "aria-label": y === "all" ? "Deselect all" : "Select all",
-                              "aria-checked": y === "all" ? !0 : y === "some" ? "mixed" : !1,
-                              role: "checkbox",
-                              className: "text-d-muted-foreground hover:text-d-foreground absolute top-1/2 left-2 size-6 -translate-y-1/2 px-0",
-                              onMouseDown: (e) => {
-                                e.stopPropagation(), e.preventDefault();
-                              },
-                              onClick: (e) => {
-                                e.stopPropagation(), e.preventDefault(), Re();
-                              },
-                              children: /* @__PURE__ */ r(
-                                O,
-                                {
-                                  name: h.length === 0 ? "SquareDot" : y === "all" ? "SquareCheck" : y === "some" ? "SquareMinus" : "Square",
-                                  size: "xs"
-                                }
+                        style: {
+                          paddingLeft: y.paddingLeft,
+                          // With badges the right padding moves into the scrolling list,
+                          // so its scrollbar sits against the popover edge.
+                          paddingRight: me ? 0 : y.paddingRight,
+                          // One row: on a short viewport the badge area shrinks down to
+                          // its first row (and scrolls) instead of squeezing the list.
+                          minHeight: y.innerHeight
+                        },
+                        children: me ? /* @__PURE__ */ n(
+                          "div",
+                          {
+                            ref: et,
+                            role: "list",
+                            "aria-label": "Selezionati",
+                            tabIndex: Ue ? void 0 : 0,
+                            className: g(
+                              c.focusRing,
+                              c.radius.sm,
+                              // Flipped: the first row goes at the bottom, on the trigger.
+                              "flex max-h-24 flex-wrap gap-1 overflow-y-auto overscroll-contain group-data-[side=top]/select-popover:flex-wrap-reverse"
+                            ),
+                            style: {
+                              paddingRight: y.paddingRight,
+                              paddingBlock: Math.max(
+                                0,
+                                (y.innerHeight - $e) / 2
                               )
-                            }
-                          )
-                        ]
+                            },
+                            children: s.map((e) => /* @__PURE__ */ n(
+                              "span",
+                              {
+                                role: "listitem",
+                                className: "flex max-w-full min-w-0",
+                                children: pe(e, !0)
+                              },
+                              e.value
+                            ))
+                          }
+                        ) : /* @__PURE__ */ n(
+                          "div",
+                          {
+                            "aria-hidden": !0,
+                            className: "text-d-muted-foreground flex items-center",
+                            style: { minHeight: y.innerHeight },
+                            children: D
+                          }
+                        )
                       }
                     ),
-                    /* @__PURE__ */ c(
-                      Ge,
+                    /* @__PURE__ */ h(
+                      nt,
                       {
-                        "aria-labelledby": b ? $ : j || void 0,
-                        label: typeof b == "string" && b ? b : J ?? q,
-                        className: "max-h-60 overflow-auto overscroll-contain",
+                        ref: F,
+                        defaultValue: "__none__",
+                        shouldFilter: H,
+                        filter: (e, t, r) => {
+                          const l = t.toLocaleLowerCase();
+                          return (r?.length ? r : [e]).some(
+                            (o) => o.toLocaleLowerCase().includes(l)
+                          ) ? 1 : 0;
+                        },
+                        className: g(
+                          "w-full",
+                          // Flipped: search next to the top row (now at the bottom), list
+                          // above it; separators move to the other side.
+                          a && "min-h-0 group-data-[side=top]/select-popover:flex-col-reverse"
+                        ),
                         children: [
-                          /* @__PURE__ */ r(We, { children: ce }),
-                          ge && g && /* @__PURE__ */ r(ne, { children: /* @__PURE__ */ r(
-                            se,
+                          (H || a && _) && /* @__PURE__ */ h(
+                            "div",
                             {
-                              className: "cursor-pointer",
-                              onSelect: () => {
-                                g && (m(a ? [...n, g] : g), E(""), a || I(!1));
-                              },
-                              children: /* @__PURE__ */ c("div", { className: "text-d-foreground text-xs", children: [
-                                ue,
-                                " “",
-                                g,
-                                "”"
-                              ] })
+                              className: g(
+                                "relative",
+                                a && _ && "[&_[data-slot=command-d-input-wrapper]>svg]:hidden",
+                                a && "group-data-[side=top]/select-popover:[&>[data-slot=command-d-input-wrapper]]:border-t group-data-[side=top]/select-popover:[&>[data-slot=command-d-input-wrapper]]:border-b-0"
+                              ),
+                              children: [
+                                H ? /* @__PURE__ */ n(
+                                  lt,
+                                  {
+                                    placeholder: Ie,
+                                    className: g(
+                                      "placeholder:text-d-muted-foreground",
+                                      a && _ && "pl-7"
+                                    ),
+                                    value: N,
+                                    onValueChange: W
+                                  }
+                                ) : /* @__PURE__ */ n("div", { className: "border-d-border h-9 border-b group-data-[side=top]/select-popover:border-t group-data-[side=top]/select-popover:border-b-0" }),
+                                a && _ && /* @__PURE__ */ n(
+                                  dt,
+                                  {
+                                    type: "button",
+                                    variant: "ghost",
+                                    size: "sm",
+                                    disabled: w.length === 0,
+                                    "aria-label": S === "all" ? "Deseleziona tutto" : "Seleziona tutto",
+                                    "aria-checked": S === "all" ? !0 : S === "some" ? "mixed" : !1,
+                                    role: "checkbox",
+                                    className: g(
+                                      "text-d-muted-foreground hover:text-d-foreground absolute inset-y-0 left-2 my-auto size-6 px-0",
+                                      S === "all" && "text-d-primary hover:text-d-primary interactive:hover:text-d-primary"
+                                    ),
+                                    onMouseDown: (e) => {
+                                      e.stopPropagation(), e.preventDefault();
+                                    },
+                                    onClick: (e) => {
+                                      e.stopPropagation(), e.preventDefault(), Je();
+                                    },
+                                    children: /* @__PURE__ */ n(
+                                      E,
+                                      {
+                                        name: w.length === 0 ? "SquareDot" : S === "all" ? "SquareCheck" : S === "some" ? "SquareMinus" : "Square",
+                                        size: "xs"
+                                      }
+                                    )
+                                  }
+                                )
+                              ]
                             }
-                          ) }),
-                          Object.entries(qe).map(([e, l]) => /* @__PURE__ */ r(ne, { heading: e || void 0, children: l.map((t) => {
-                            const s = n.includes(t.value), k = a && i !== void 0 && !s && n.length >= i, o = t.disabled || k;
-                            return /* @__PURE__ */ c(
-                              se,
-                              {
-                                ref: s ? B : null,
-                                value: String(t.value).trim(),
-                                keywords: typeof t.label == "string" ? [t.label] : void 0,
-                                disabled: o || void 0,
-                                "aria-checked": a ? s : void 0,
-                                onSelect: () => !o && te(t),
-                                className: S(
-                                  "cursor-pointer",
-                                  p.dropdownItem.hover,
-                                  o && "cursor-not-allowed opacity-50",
-                                  !a && s && p.dropdownItem.selected
-                                ),
-                                children: [
-                                  a && /* @__PURE__ */ r(
-                                    Ke,
-                                    {
-                                      checked: s,
-                                      "aria-hidden": "true",
-                                      tabIndex: -1,
-                                      className: "mr-1"
-                                    }
-                                  ),
-                                  typeof t.label == "string" ? /* @__PURE__ */ r("span", { children: t.label }) : t.label
-                                ]
-                              },
-                              t.value
-                            );
-                          }) }, e))
+                          ),
+                          /* @__PURE__ */ h(
+                            it,
+                            {
+                              "aria-labelledby": b ? A : L || void 0,
+                              label: typeof b == "string" && b ? b : G ?? D,
+                              className: "max-h-60 overflow-auto overscroll-contain",
+                              children: [
+                                /* @__PURE__ */ n(ot, { children: Se }),
+                                Pe && N && /* @__PURE__ */ n(ge, { children: /* @__PURE__ */ n(
+                                  be,
+                                  {
+                                    className: "cursor-pointer",
+                                    onSelect: () => {
+                                      N && (v(a ? [...i, N] : N), W(""), a || V(!1));
+                                    },
+                                    children: /* @__PURE__ */ h("div", { className: "text-d-foreground text-xs", children: [
+                                      ke,
+                                      " “",
+                                      N,
+                                      "”"
+                                    ] })
+                                  }
+                                ) }),
+                                Object.entries(Qe).map(([e, t]) => /* @__PURE__ */ n(
+                                  ge,
+                                  {
+                                    heading: e || void 0,
+                                    className: "[&_[cmdk-group-heading]]:bg-d-muted [&_[cmdk-group-heading]]:rounded-sm",
+                                    children: t.map((r) => {
+                                      const l = i.includes(r.value), p = a && m !== void 0 && !l && i.length >= m, o = a && l && r.fixed, x = r.disabled || p || o;
+                                      return /* @__PURE__ */ h(
+                                        be,
+                                        {
+                                          ref: !a && l ? Y : null,
+                                          value: String(r.value).trim(),
+                                          keywords: we(r),
+                                          disabled: x || void 0,
+                                          "aria-checked": a ? l : void 0,
+                                          onSelect: () => !x && ce(r),
+                                          className: g(
+                                            "cursor-pointer",
+                                            c.dropdownItem.hover,
+                                            x && "cursor-not-allowed opacity-50",
+                                            !a && l && c.dropdownItem.selected
+                                          ),
+                                          children: [
+                                            a && /* @__PURE__ */ n(
+                                              ct,
+                                              {
+                                                checked: l,
+                                                "aria-hidden": "true",
+                                                tabIndex: -1,
+                                                className: "mr-1"
+                                              }
+                                            ),
+                                            typeof r.label == "string" ? /* @__PURE__ */ n("span", { children: r.label }) : r.label
+                                          ]
+                                        },
+                                        r.value
+                                      );
+                                    })
+                                  },
+                                  e
+                                ))
+                              ]
+                            }
+                          ),
+                          a && m !== void 0 && i.length >= m && /* @__PURE__ */ n("div", { className: "border-d-border text-d-muted-foreground border-t px-2 py-1 text-xs group-data-[side=top]/select-popover:border-t-0 group-data-[side=top]/select-popover:border-b", children: ze(m) })
                         ]
                       }
-                    ),
-                    a && i !== void 0 && n.length >= i && /* @__PURE__ */ r("div", { className: "border-d-border text-d-muted-foreground border-t px-2 py-1 text-xs", children: fe(i) })
+                    )
                   ]
                 }
               )
@@ -454,9 +653,10 @@ function ut(A) {
           )
         ]
       }
-    )
+    ),
+    te && /* @__PURE__ */ n("span", { id: de, className: "sr-only", children: te })
   ] });
 }
 export {
-  ut as AppSelect
+  Lt as AppSelect
 };