laif-ds 0.1.88 → 0.1.89

package/dist/components/ui/button.js

@@ -1,19 +1,19 @@
 "use client";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
 import { Root as v } from "../../node_modules/@radix-ui/react-slot/dist/index.js";
-import { cva as h } from "../../node_modules/class-variance-authority/dist/index.js";
+import { cva as m } from "../../node_modules/class-variance-authority/dist/index.js";
 import { cn as l } from "../../lib/utils.js";
 import { Icon as u } from "./icon.js";
-const m = h(
-  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:ring-[3px] aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive  transition-all duration-200",
+const b = m(
+  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-d-ring focus-visible:ring-d-ring/50 focus-visible:ring-[3px] aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive transition-all duration-200 ease-out transform-gpu active:scale-[0.98] active:shadow-sm overflow-hidden relative group",
   {
     variants: {
       variant: {
-        default: "bg-d-primary text-d-primary-foreground shadow-xs hover:bg-d-primary/90",
-        destructive: "bg-d-destructive text-white shadow-xs hover:bg-d-destructive/90 focus-visible:ring-d-destructive/20 dark:focus-visible:ring-d-destructive/40 dark:bg-d-destructive/60",
-        outline: "border bg-d-background shadow-xs hover:bg-d-accent hover:text-d-accent-foreground dark:bg-d-input/30 dark:border-d-input dark:hover:bg-d-input/50",
-        "outline-primary": "border !border-d-primary bg-d-background shadow-xs text-d-primary/80 hover:!text-d-primary",
-        secondary: "bg-d-secondary text-d-secondary-foreground shadow-xs hover:bg-d-secondary/80 hover:text-d-secondary-foreground",
+        default: "bg-d-primary text-d-primary-foreground shadow-xs hover:bg-d-primary/90 hover:shadow-d-primary/25 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
+        destructive: "bg-d-destructive text-white shadow-xs hover:bg-d-destructive/90 hover:shadow-d-destructive/25 focus-visible:ring-d-destructive/20 dark:focus-visible:ring-d-destructive/40 dark:bg-d-destructive/60 before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:translate-x-[-100%] hover:before:translate-x-[100%] before:transition-transform before:duration-700 before:ease-out",
+        outline: "border bg-d-background shadow-xs hover:bg-d-accent hover:text-d-accent-foreground hover:border-d-accent dark:bg-d-input/30 dark:border-d-input dark:hover:bg-d-input/50",
+        "outline-primary": "border !border-d-primary bg-d-background shadow-xs text-d-primary/80 hover:!text-d-primary hover:bg-d-primary/5 hover:border-d-primary/80 ",
+        secondary: "bg-d-secondary text-d-secondary-foreground shadow-xs hover:bg-d-secondary/80 hover:text-d-secondary-foreground ",
         ghost: "hover:bg-d-accent hover:text-d-accent-foreground dark:hover:bg-d-accent",
         link: "text-d-primary underline-offset-4 hover:underline"
       },
@@ -30,42 +30,42 @@ const m = h(
     }
   }
 );
-function k({
-  className: d,
-  variant: o,
-  size: r,
-  asChild: a = !1,
+function w({
+  className: o,
+  variant: a,
+  size: e,
+  asChild: d = !1,
   iconLeft: n,
-  iconRight: i,
-  isLoading: g = !1,
+  iconRight: s,
+  isLoading: f = !1,
   ...t
 }) {
-  const s = a ? v : "button";
-  return a ? /* @__PURE__ */ e(
-    s,
+  const i = d ? v : "button";
+  return d ? /* @__PURE__ */ r(
+    i,
     {
       "data-slot": "button",
-      className: l(m({ variant: o, size: r, className: d })),
+      className: l(b({ variant: a, size: e, className: o })),
       ...t
     }
   ) : /* @__PURE__ */ c(
-    s,
+    i,
     {
       "data-slot": "button",
-      className: l(m({ variant: o, size: r, className: d }), "relative"),
+      className: l(b({ variant: a, size: e, className: o }), "relative"),
       ...t,
       children: [
-        g ? /* @__PURE__ */ c(
+        f ? /* @__PURE__ */ c(
           "svg",
           {
             className: "mr-1 -ml-1 animate-spin",
             xmlns: "http://www.w3.org/2000/svg",
             fill: "none",
             viewBox: "0 0 24 24",
-            width: r === "sm" ? 14 : r === "lg" ? 20 : 16,
-            height: r === "sm" ? 14 : r === "lg" ? 20 : 16,
+            width: e === "sm" ? 14 : e === "lg" ? 20 : 16,
+            height: e === "sm" ? 14 : e === "lg" ? 20 : 16,
             children: [
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ r(
                 "circle",
                 {
                   className: "opacity-25",
@@ -76,7 +76,7 @@ function k({
                   strokeWidth: "4"
                 }
               ),
-              /* @__PURE__ */ e(
+              /* @__PURE__ */ r(
                 "path",
                 {
                   className: "opacity-75",
@@ -86,19 +86,19 @@ function k({
               )
             ]
           }
-        ) : n && /* @__PURE__ */ e(
+        ) : n && /* @__PURE__ */ r(
           u,
           {
             name: n,
-            size: r === "default" ? "md" : r === "sm" ? "xs" : "sm"
+            size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
           }
         ),
         t.children,
-        i && /* @__PURE__ */ e(
+        s && /* @__PURE__ */ r(
           u,
           {
-            name: i,
-            size: r === "default" ? "md" : r === "sm" ? "xs" : "sm"
+            name: s,
+            size: e === "default" ? "md" : e === "sm" ? "xs" : "sm"
           }
         )
       ]
@@ -106,6 +106,6 @@ function k({
   );
 }
 export {
-  k as Button,
-  m as buttonVariants
+  w as Button,
+  b as buttonVariants
 };

package/dist/components/ui/calendar.js

@@ -64,7 +64,7 @@ function B({
           t.dropdowns
         ),
         dropdown_root: e(
-          "relative has-focus:border-ring border border-d-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "relative has-focus:border-ring border border-d-input shadow-xs has-focus:ring-d-ring/50 has-focus:ring-[3px] rounded-md",
           t.dropdown_root
         ),
         dropdown: e("absolute inset-0 opacity-0", t.dropdown),
@@ -159,7 +159,7 @@ function v({
       "data-range-end": r.range_end,
       "data-range-middle": r.range_middle,
       className: e(
-        "data-[selected-single=true]:bg-d-primary data-[selected-single=true]:text-d-primary-foreground data-[range-middle=true]:bg-d-accent data-[range-middle=true]:text-d-accent-foreground data-[range-start=true]:bg-d-primary data-[range-start=true]:text-d-primary-foreground data-[range-end=true]:bg-d-primary data-[range-end=true]:text-d-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-d-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[1px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-d-primary data-[selected-single=true]:text-d-primary-foreground data-[range-middle=true]:bg-d-accent data-[range-middle=true]:text-d-accent-foreground data-[range-start=true]:bg-d-primary data-[range-start=true]:text-d-primary-foreground data-[range-end=true]:bg-d-primary data-[range-end=true]:text-d-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-d-ring/50 dark:hover:text-d-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[1px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
         s.day,
         c
       ),

package/dist/components/ui/date-picker.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import * as d from "react";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
 import { cn as g } from "../../lib/utils.js";
 import { buttonVariants as x } from "./button.js";
 import { Icon as h } from "./icon.js";
@@ -17,20 +17,20 @@ function E({
   disabled: t = !1,
   size: o = "default"
 }) {
-  const [r, i] = d.useState(n);
-  d.useEffect(() => {
+  const [r, i] = c.useState(n);
+  c.useEffect(() => {
     i(n);
   }, [n]);
   const p = (s) => {
     i(s), a && a(s);
   };
-  return /* @__PURE__ */ c(w, { open: t ? !1 : void 0, children: [
+  return /* @__PURE__ */ d(w, { open: t ? !1 : void 0, children: [
     /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(
       "div",
       {
         className: g(
           x({ variant: u, size: o }),
-          "border-d-input text-d-foreground hover:bg-d-accent bg-d-input ring-offset-background data-[placeholder]:text-d-muted-foreground focus:ring-ring flex items-center justify-between border px-3 py-2 font-normal whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none [&>span]:line-clamp-1",
+          "border-d-input text-d-foreground hover:bg-d-accent bg-d-input ring-offset-background data-[placeholder]:text-d-muted-foreground focus:ring-d-ring flex items-center justify-between border px-3 py-2 font-normal whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none [&>span]:line-clamp-1",
           !r && "text-d-muted-foreground",
           t && "cursor-not-allowed opacity-50",
           f,
@@ -42,7 +42,7 @@ function E({
         tabIndex: t ? -1 : 0,
         onClick: t ? void 0 : () => {
         },
-        children: /* @__PURE__ */ c("div", { className: "flex w-full items-center justify-between gap-2", children: [
+        children: /* @__PURE__ */ d("div", { className: "flex w-full items-center justify-between gap-2", children: [
           /* @__PURE__ */ e(
             h,
             {

package/dist/components/ui/input.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import * as x from "react";
 import { cva as g } from "../../node_modules/class-variance-authority/dist/index.js";
-import { cn as a } from "../../lib/utils.js";
+import { cn as s } from "../../lib/utils.js";
 import { Label as v } from "./label.js";
 import { Icon as l } from "./icon.js";
 const b = g(
-  "file:text-d-foreground placeholder:text-d-muted-foreground selection:bg-d-primary selection:text-d-primary-foreground border-d-input flex w-full min-w-0 rounded-md border bg-d-input px-3 py-1 text-base shadow-sm transition-colors outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+  "file:text-d-foreground placeholder:text-d-muted-foreground selection:bg-d-primary selection:text-d-primary-foreground border-d-input flex w-full min-w-0 rounded-md border bg-d-input px-3 py-1 text-base shadow-sm transition-all duration-200 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:shadow-md",
   {
     variants: {
       size: {
@@ -27,14 +27,14 @@ const b = g(
     labelClassName: u,
     id: p,
     iconLeft: i,
-    iconRight: s,
+    iconRight: d,
     size: t,
     ...f
   }, c) => {
     const n = p || (r ? `input-${Math.random().toString(36).substring(2, 9)}` : void 0);
-    return /* @__PURE__ */ d("div", { className: a("space-y-1.5", o), children: [
+    return /* @__PURE__ */ a("div", { className: s("space-y-1.5", o), children: [
       r && /* @__PURE__ */ e(v, { htmlFor: n, className: u, children: r }),
-      /* @__PURE__ */ d("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ a("div", { className: "relative w-full", children: [
         i && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 left-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: i, size: t === "lg" ? "sm" : "xs" }) }),
         /* @__PURE__ */ e(
           "input",
@@ -42,19 +42,18 @@ const b = g(
             id: n,
             type: m,
             "data-slot": "input",
-            className: a(
+            className: s(
               b({ size: t }),
-              "focus-visible:ring-ring focus-visible:ring-1 focus-visible:outline-none",
+              "focus-visible:ring-d-ring focus-visible:ring-1 focus-visible:outline-none",
               "aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive",
-              "shadow-sm",
               i ? t !== "lg" ? "pl-9" : "pl-10" : "",
-              s ? t !== "lg" ? "pr-9" : "pr-10" : ""
+              d ? t !== "lg" ? "pr-9" : "pr-10" : ""
             ),
             ref: c,
             ...f
           }
         ),
-        s && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: s, size: t === "lg" ? "sm" : "xs" }) })
+        d && /* @__PURE__ */ e("div", { className: "text-d-muted-foreground pointer-events-none absolute top-1/2 right-3 -translate-y-1/2", children: /* @__PURE__ */ e(l, { name: d, size: t === "lg" ? "sm" : "xs" }) })
       ] })
     ] });
   }

package/dist/components/ui/multiple-selector.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as r, jsxs as L, Fragment as G } from "react/jsx-runtime";
-import { Command as ue, useCommandState as ce } from "../../node_modules/cmdk/dist/index.js";
+import { Command as ae, useCommandState as ce } from "../../node_modules/cmdk/dist/index.js";
 import * as o from "react";
 import { useEffect as C, forwardRef as fe } from "react";
-import { Popover as me, PopoverTrigger as he, PopoverContent as ge } from "./popover.js";
+import { Popover as me, PopoverTrigger as ge, PopoverContent as he } from "./popover.js";
 import { Badge as pe } from "./badge.js";
 import { CommandItem as I, Command as q, CommandList as ve, CommandGroup as be } from "./command.js";
 import { cn as p } from "../../lib/utils.js";
-import { Label as xe } from "./label.js";
-import { Icon as we } from "./icon.js";
+import { Label as we } from "./label.js";
+import { Icon as xe } from "./icon.js";
 import Ne from "../../node_modules/lucide-react/dist/esm/icons/x.js";
 function ye(s, l) {
-  const [i, u] = o.useState(s);
+  const [i, a] = o.useState(s);
   return C(() => {
-    const a = setTimeout(() => u(s), l);
+    const u = setTimeout(() => a(s), l);
     return () => {
-      clearTimeout(a);
+      clearTimeout(u);
     };
   }, [s, l]), i;
 }
@@ -27,26 +27,26 @@ function T(s, l) {
       "": s
     };
   const i = {};
-  return s.forEach((u) => {
-    const a = u[l] || "";
-    i[a] || (i[a] = []), i[a].push(u);
+  return s.forEach((a) => {
+    const u = a[l] || "";
+    i[u] || (i[u] = []), i[u].push(a);
   }), i;
 }
 function Ce(s, l) {
   const i = JSON.parse(JSON.stringify(s));
-  for (const [u, a] of Object.entries(i))
-    i[u] = a.filter(
+  for (const [a, u] of Object.entries(i))
+    i[a] = u.filter(
       (V) => !l.find((c) => c.value === V.value)
     );
   return i;
 }
 function Ee(s, l) {
   for (const [, i] of Object.entries(s))
-    if (i.some((u) => l.find((a) => a.value === u.value)))
+    if (i.some((a) => l.find((u) => u.value === a.value)))
       return !0;
   return !1;
 }
-const Q = fe(({ className: s, ...l }, i) => ce((a) => a.filtered.count === 0) ? /* @__PURE__ */ r(
+const Q = fe(({ className: s, ...l }, i) => ce((u) => u.filtered.count === 0) ? /* @__PURE__ */ r(
   "div",
   {
     ref: i,
@@ -62,8 +62,8 @@ const Oe = o.forwardRef(
     value: s,
     onChange: l,
     placeholder: i,
-    defaultOptions: u = [],
-    options: a,
+    defaultOptions: a = [],
+    options: u,
     delay: V,
     onSearch: c,
     onSearchSync: X,
@@ -84,23 +84,23 @@ const Oe = o.forwardRef(
     hideClearAllButton: ee = !1,
     label: W
   }, te) => {
-    const h = o.useRef(null), [f, S] = o.useState(!1), [ne, z] = o.useState(!1), [H, $] = o.useState(!1), [re, oe] = o.useState(
+    const g = o.useRef(null), [f, S] = o.useState(!1), [ne, z] = o.useState(!1), [H, $] = o.useState(!1), [re, oe] = o.useState(
       void 0
     ), j = o.useRef(null), F = o.useRef(null), [t, y] = o.useState(s || []), [b, J] = o.useState(
-      T(u, v)
-    ), [g, K] = o.useState(""), x = ye(g, V || 500);
+      T(a, v)
+    ), [h, K] = o.useState(""), w = ye(h, V || 500);
     o.useImperativeHandle(
       te,
       () => ({
         selectedValue: [...t],
-        input: h.current,
-        focus: () => h?.current?.focus(),
+        input: g.current,
+        focus: () => g?.current?.focus(),
         reset: () => y([])
       }),
       [t]
     );
-    const w = (e) => {
-      j.current && !j.current.contains(e.target) && h.current && !h.current.contains(e.target) && (S(!1), h.current.blur());
+    const x = (e) => {
+      j.current && !j.current.contains(e.target) && g.current && !g.current.contains(e.target) && (S(!1), g.current.blur());
     }, M = o.useCallback(
       (e) => {
         const n = t.filter((d) => d.value !== e.value);
@@ -109,53 +109,53 @@ const Oe = o.forwardRef(
       [l, t]
     ), se = o.useCallback(
       (e) => {
-        const n = h.current;
+        const n = g.current;
         n && ((e.key === "Delete" || e.key === "Backspace") && n.value === "" && t.length > 0 && (t[t.length - 1].fixed || M(t[t.length - 1])), e.key === "Escape" && n.blur());
       },
       [M, t]
     );
     C(() => {
       if (typeof document < "u")
-        return f ? (document.addEventListener("mousedown", w), document.addEventListener("touchend", w)) : (document.removeEventListener("mousedown", w), document.removeEventListener("touchend", w)), () => {
-          document.removeEventListener("mousedown", w), document.removeEventListener("touchend", w);
+        return f ? (document.addEventListener("mousedown", x), document.addEventListener("touchend", x)) : (document.removeEventListener("mousedown", x), document.removeEventListener("touchend", x)), () => {
+          document.removeEventListener("mousedown", x), document.removeEventListener("touchend", x);
         };
-    }, [f, w]), C(() => {
+    }, [f, x]), C(() => {
       s && y(s);
     }, [s]), C(() => {
-      if (!a || c)
+      if (!u || c)
         return;
-      const e = T(a || [], v);
+      const e = T(u || [], v);
       JSON.stringify(e) !== JSON.stringify(b) && J(e);
-    }, [u, a, v, c, b]), C(() => {
+    }, [a, u, v, c, b]), C(() => {
       const e = () => {
-        const d = X?.(x);
+        const d = X?.(w);
         J(T(d || [], v));
       };
       (async () => {
-        !X || !f || (R && e(), x && e());
+        !X || !f || (R && e(), w && e());
       })();
-    }, [x, v, f, R]), C(() => {
+    }, [w, v, f, R]), C(() => {
       const e = async () => {
         $(!0);
-        const d = await c?.(x);
+        const d = await c?.(w);
         J(T(d || [], v)), $(!1);
       };
       (async () => {
-        !c || !f || (R && await e(), x && await e());
+        !c || !f || (R && await e(), w && await e());
       })();
-    }, [x, v, f, R]), o.useEffect(() => {
+    }, [w, v, f, R]), o.useEffect(() => {
       if (f && F.current) {
         const e = F.current.getBoundingClientRect();
         oe(e.width);
       }
     }, [f]);
     const le = () => {
-      if (!E || Ee(b, [{ value: g, label: g }]) || t.find((n) => n.value === g))
+      if (!E || Ee(b, [{ value: h, label: h }]) || t.find((n) => n.value === h))
         return;
       const e = /* @__PURE__ */ r(
         I,
         {
-          value: g,
+          value: h,
           className: "cursor-pointer",
           onMouseDown: (n) => {
             n.preventDefault(), n.stopPropagation();
@@ -169,10 +169,10 @@ const Oe = o.forwardRef(
             const d = [...t, { value: n, label: n }];
             y(d), l?.(d);
           },
-          children: `Create "${g}"`
+          children: `Create "${h}"`
         }
       );
-      if (!c && g.length > 0 || c && x.length > 0 && !H)
+      if (!c && h.length > 0 || c && w.length > 0 && !H)
         return e;
     }, ie = o.useCallback(() => {
       if (D)
@@ -180,14 +180,14 @@ const Oe = o.forwardRef(
     }, [E, D, c, b]), de = o.useMemo(
       () => Ce(b, t),
       [b, t]
-    ), ae = o.useCallback(() => {
+    ), ue = o.useCallback(() => {
       if (m?.filter)
         return m.filter;
       if (E)
         return (e, n) => e.toLowerCase().includes(n.toLowerCase()) ? 1 : -1;
     }, [E, m?.filter]);
     return /* @__PURE__ */ L("div", { className: "flex flex-col space-y-1.5", children: [
-      W && /* @__PURE__ */ r(xe, { children: W }),
+      W && /* @__PURE__ */ r(we, { children: W }),
       /* @__PURE__ */ r(
         q,
         {
@@ -201,15 +201,17 @@ const Oe = o.forwardRef(
             m?.className
           ),
           shouldFilter: m?.shouldFilter !== void 0 ? m.shouldFilter : !c,
-          filter: ae(),
+          filter: ue(),
           children: /* @__PURE__ */ L(me, { open: f, onOpenChange: S, children: [
-            /* @__PURE__ */ r(he, { asChild: !0, children: /* @__PURE__ */ r(
+            /* @__PURE__ */ r(ge, { asChild: !0, children: /* @__PURE__ */ r(
               "div",
               {
                 ref: F,
                 className: p(
-                  // asyncSelectTriggerVariants({ size: "default" }),
-                  "border-d-input ring-offset-d-background focus-within:ring-d-ring min-h-10 rounded-md border text-base focus-within:ring-1 md:text-sm",
+                  "border-d-input ring-offset-d-background min-h-10 rounded-md border text-base md:text-sm",
+                  "focus-within:outline-none",
+                  "focus-visible-within:ring-d-ring focus-visible-within:ring-1",
+                  f && "ring-d-ring ring-1",
                   {
                     "px-3 py-2": t.length !== 0,
                     "cursor-text": !N && t.length !== 0,
@@ -253,11 +255,11 @@ const Oe = o.forwardRef(
                     e.value
                   )),
                   /* @__PURE__ */ r(
-                    ue.Input,
+                    ae.Input,
                     {
                       ...O,
-                      ref: h,
-                      value: g,
+                      ref: g,
+                      value: h,
                       disabled: N,
                       onValueChange: (e) => {
                         K(e), O?.onValueChange?.(e);
@@ -292,7 +294,7 @@ const Oe = o.forwardRef(
                       },
                       "aria-label": "Clear selection",
                       children: /* @__PURE__ */ r(
-                        we,
+                        xe,
                         {
                           name: "X",
                           size: "xs",
@@ -305,7 +307,7 @@ const Oe = o.forwardRef(
               }
             ) }),
             /* @__PURE__ */ r(
-              ge,
+              he,
               {
                 className: "border-none p-0 shadow-lg",
                 style: { width: re },
@@ -321,7 +323,7 @@ const Oe = o.forwardRef(
                       z(!0);
                     },
                     onMouseUp: () => {
-                      h?.current?.focus();
+                      g?.current?.focus();
                     },
                     children: H ? /* @__PURE__ */ r(G, { children: Y }) : /* @__PURE__ */ L(G, { children: [
                       ie(),

package/dist/components/ui/select.js

@@ -2,7 +2,7 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import * as c from "react";
 import { Root as p, Group as f, Value as g, Trigger as x, Icon as h, Portal as v, Content as b, Viewport as y, Label as S, Item as w, ItemIndicator as z, ItemText as N, Separator as C, ScrollUpButton as I, ScrollDownButton as _ } from "../../node_modules/@radix-ui/react-select/dist/index.js";
-import { cn as o } from "../../lib/utils.js";
+import { cn as r } from "../../lib/utils.js";
 import { Label as j } from "./label.js";
 import u from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
 import k from "../../node_modules/lucide-react/dist/esm/icons/check.js";
@@ -11,12 +11,12 @@ function q({
   size: t = "default",
   label: a,
   className: s,
-  labelClassName: r,
+  labelClassName: o,
   ...d
 }) {
   const n = c.useId();
-  return /* @__PURE__ */ i("div", { className: o("space-y-1.5", s), children: [
-    a && /* @__PURE__ */ e(j, { htmlFor: n, className: r, children: a }),
+  return /* @__PURE__ */ i("div", { className: r("space-y-1.5", s), children: [
+    a && /* @__PURE__ */ e(j, { htmlFor: n, className: o, children: a }),
     /* @__PURE__ */ e(m.Provider, { value: { size: t, id: n }, children: /* @__PURE__ */ e(p, { "data-slot": "select", ...d }) })
   ] });
 }
@@ -35,7 +35,7 @@ function H({
   className: t,
   size: a,
   children: s,
-  ...r
+  ...o
 }) {
   const { size: d, id: n } = L(), l = a || d;
   return /* @__PURE__ */ i(
@@ -44,17 +44,22 @@ function H({
       id: n,
       "data-slot": "select-trigger",
       "data-size": l,
-      className: o(
-        "border-d-input ring-offset-background data-[placeholder]:text-d-muted-foreground focus:ring-ring bg-d-input flex items-center justify-between rounded-md border px-3 py-2 whitespace-nowrap shadow-sm focus:ring-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className: r(
+        "border-d-input ring-offset-background data-[placeholder]:text-d-muted-foreground bg-d-input flex items-center justify-between rounded-md border px-3 py-2 whitespace-nowrap shadow-sm focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        "focus-visible:ring-d-ring focus-visible:ring-1",
+        // Ring solo con tastiera
+        "data-[state=open]:ring-d-ring data-[state=open]:ring-1",
+        // Ring quando dropdown è aperto
         "aria-invalid:ring-d-destructive/20 dark:aria-invalid:ring-d-destructive/40 aria-invalid:border-d-destructive",
         "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+        "transition-all duration-300",
         l === "default" && "h-9 text-sm",
         l === "sm" && "h-8 text-xs",
         l === "lg" && "h-10 text-lg",
         t
       ),
-      ...r,
+      ...o,
       children: [
         s,
         /* @__PURE__ */ e(h, { asChild: !0, children: /* @__PURE__ */ e(u, { className: "size-4 opacity-50" }) })
@@ -66,25 +71,25 @@ function J({
   className: t,
   children: a,
   position: s = "popper",
-  ...r
+  ...o
 }) {
   return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ i(
     b,
     {
       "data-slot": "select-content",
-      className: o(
+      className: r(
         "bg-d-popover text-d-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border-d-border relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
         s === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         t
       ),
       position: s,
-      ...r,
+      ...o,
       children: [
         /* @__PURE__ */ e(D, {}),
         /* @__PURE__ */ e(
           y,
           {
-            className: o(
+            className: r(
               "p-1",
               s === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
             ),
@@ -104,7 +109,7 @@ function K({
     S,
     {
       "data-slot": "select-label",
-      className: o(
+      className: r(
         "text-d-secondary-foreground px-2 py-1.5 text-xs",
         t
       ),
@@ -121,7 +126,7 @@ function M({
     w,
     {
       "data-slot": "select-item",
-      className: o(
+      className: r(
         "focus:bg-d-accent focus:text-d-accent-foreground [&_svg:not([class*='text-'])]:text-d-secondary-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         t
       ),
@@ -141,7 +146,7 @@ function O({
     C,
     {
       "data-slot": "select-separator",
-      className: o(
+      className: r(
         "bg-d-border pointer-events-none -mx-1 my-1 h-px",
         t
       ),
@@ -157,7 +162,7 @@ function D({
     I,
     {
       "data-slot": "select-scroll-up-button",
-      className: o(
+      className: r(
         "flex cursor-default items-center justify-center py-1",
         t
       ),
@@ -174,7 +179,7 @@ function R({
     _,
     {
       "data-slot": "select-scroll-down-button",
-      className: o(
+      className: r(
         "flex cursor-default items-center justify-center py-1",
         t
       ),