@clasing/ui 2.8.0 → 2.9.1

package/dist/components/multi-select.js

@@ -1,5 +1,5 @@
 import { j as e, c as I } from "../index-C_XDkVGm.js";
-import { B as z } from "../badge-DBOcqSZb.js";
+import { B as z } from "../badge-CaH3b0zW.js";
 import { C as E, f as P, d as O, b as _, c as A, e as F, g as L } from "../command-Cq3FhQXv.js";
 import { P as T, b as W, c as G } from "../popover-CLQxfbEi.js";
 import { CheckIcon as B, CaretUpDownIcon as D, XIcon as U } from "@phosphor-icons/react";
@@ -12,27 +12,27 @@ function ne({
   defaultValues: o,
   onValuesChange: a,
   isLoading: c,
-  onSearchChange: l,
+  onSearchChange: i,
   loadingText: f = "Loading...",
   noResultsText: u = "No results found"
 }) {
   const [d, p] = y(!1), [b, x] = y(
     new Set(r ?? o)
-  ), [v, m] = y(/* @__PURE__ */ new Map()), [h, j] = y("");
+  ), [C, m] = y(/* @__PURE__ */ new Map()), [h, j] = y("");
   function s(n) {
     const g = (w) => {
-      const S = new Set(w);
-      return S.has(n) ? S.delete(n) : S.add(n), S;
+      const v = new Set(w);
+      return v.has(n) ? v.delete(n) : v.add(n), v;
     };
     x(g), a?.([...g(b)]);
   }
-  const i = V((n, g) => {
+  const l = V((n, g) => {
     m((w) => w.get(n) === g ? w : new Map(w).set(n, g));
-  }, []), C = V(
+  }, []), S = V(
     (n) => {
-      j(n), l?.(n);
+      j(n), i?.(n);
     },
-    [l]
+    [i]
   );
   return /* @__PURE__ */ e.jsx(
     R,
@@ -42,11 +42,11 @@ function ne({
         setOpen: p,
         selectedValues: r ? new Set(r) : b,
         toggleValue: s,
-        items: v,
-        onItemAdded: i,
+        items: C,
+        onItemAdded: l,
         isLoading: c,
         searchValue: h,
-        onSearchChange: C,
+        onSearchChange: S,
         loadingText: f,
         noResultsText: u
       },
@@ -73,9 +73,7 @@ function re({
         `
             flex w-fit items-center justify-between gap-2 overflow-hidden
             rounded-md border border-input bg-transparent whitespace-nowrap
-            transition-[color,box-shadow] outline-none
-            focus-visible:border-ring focus-visible:ring-[3px]
-            focus-visible:ring-ring/50
+            focusable-item
             disabled:cursor-not-allowed disabled:opacity-50
             aria-invalid:border-destructive-foreground
             aria-invalid:ring-destructive-foreground/20
@@ -109,22 +107,22 @@ function se({
   overflowBehavior: a = "wrap-when-open",
   ...c
 }) {
-  const { selectedValues: l, toggleValue: f, items: u, open: d } = N(), [p, b] = y(0), x = M(null), v = M(null), m = M(/* @__PURE__ */ new Set()), h = a === "wrap" || a === "wrap-when-open" && d;
+  const { selectedValues: i, toggleValue: f, items: u, open: d } = N(), [p, b] = y(0), x = M(null), C = M(null), m = M(/* @__PURE__ */ new Set()), h = a === "wrap" || a === "wrap-when-open" && d;
   k(() => {
     h && m.current.forEach((s) => s.style.removeProperty("display"));
   }, [h]);
   const j = V(() => {
     if (x.current == null) return;
-    const s = x.current, i = v.current;
-    i != null && (i.style.display = "none"), m.current.forEach((n) => n.style.removeProperty("display"));
-    let C = 0;
+    const s = x.current, l = C.current;
+    l != null && (l.style.display = "none"), m.current.forEach((n) => n.style.removeProperty("display"));
+    let S = 0;
     for (let n = m.current.size - 1; n >= 0; n--) {
       const g = [...m.current][n];
       if (s.scrollWidth <= s.clientWidth)
         break;
-      C = m.current.size - n, g.style.display = "none", i?.style.removeProperty("display");
+      S = m.current.size - n, g.style.display = "none", l?.style.removeProperty("display");
     }
-    b(C);
+    b(S);
   }, []);
   return k(() => {
     if (x.current == null) return;
@@ -132,7 +130,7 @@ function se({
     return s.observe(x.current), () => s.disconnect();
   }, [j]), q(() => {
     j();
-  }, [l, j]), l.size === 0 && t ? /* @__PURE__ */ e.jsx("span", { className: "font-regular text-muted-foreground", children: t }) : /* @__PURE__ */ e.jsxs(
+  }, [i, j]), i.size === 0 && t ? /* @__PURE__ */ e.jsx("span", { className: "font-regular text-muted-foreground", children: t }) : /* @__PURE__ */ e.jsxs(
     "div",
     {
       ...c,
@@ -143,19 +141,19 @@ function se({
         o
       ),
       children: [
-        [...l].filter((s) => u.has(s)).map((s) => /* @__PURE__ */ e.jsxs(
+        [...i].filter((s) => u.has(s)).map((s) => /* @__PURE__ */ e.jsxs(
           z,
           {
-            ref: (i) => {
-              if (i != null)
-                return m.current.add(i), () => {
-                  m.current.delete(i);
+            ref: (l) => {
+              if (l != null)
+                return m.current.add(l), () => {
+                  m.current.delete(l);
                 };
             },
             variant: "outline",
             className: "group flex items-center gap-1",
-            onClick: r ? (i) => {
-              i.stopPropagation(), f(s);
+            onClick: r ? (l) => {
+              l.stopPropagation(), f(s);
             } : void 0,
             children: [
               u.get(s),
@@ -179,7 +177,7 @@ function se({
               display: p > 0 && !h ? "block" : "none"
             },
             variant: "outline",
-            ref: v,
+            ref: C,
             children: [
               "+",
               p
@@ -195,7 +193,7 @@ function oe({
   children: r,
   ...o
 }) {
-  const { isLoading: a, onSearchChange: c, searchValue: l, noResultsText: f, loadingText: u } = N(), d = typeof t == "object" ? !0 : t;
+  const { isLoading: a, onSearchChange: c, searchValue: i, noResultsText: f, loadingText: u } = N(), d = typeof t == "object" ? !0 : t;
   return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { style: { display: "none" }, children: /* @__PURE__ */ e.jsx(E, { children: /* @__PURE__ */ e.jsx(P, { children: r }) }) }),
     /* @__PURE__ */ e.jsx(W, { className: "min-w-(--radix-popover-trigger-width) p-0", children: /* @__PURE__ */ e.jsxs(E, { ...o, children: [
@@ -203,7 +201,7 @@ function oe({
         O,
         {
           placeholder: typeof t == "object" ? t.placeholder : void 0,
-          value: l,
+          value: i,
           onValueChange: c
         }
       ) : /* @__PURE__ */ e.jsx("button", { autoFocus: !0, "aria-hidden": "true", className: "sr-only" }),
@@ -224,7 +222,7 @@ function ae({
   onSelect: a,
   ...c
 }) {
-  const { toggleValue: l, selectedValues: f, onItemAdded: u } = N(), d = f.has(t);
+  const { toggleValue: i, selectedValues: f, onItemAdded: u } = N(), d = f.has(t);
   return k(() => {
     u(t, o ?? r);
   }, [t, r, u, o]), /* @__PURE__ */ e.jsxs(
@@ -233,7 +231,7 @@ function ae({
       ...c,
       value: t,
       onSelect: (p) => {
-        l(p), a?.(p);
+        i(p), a?.(p);
       },
       children: [
         /* @__PURE__ */ e.jsx(
@@ -247,10 +245,10 @@ function ae({
     }
   );
 }
-function ie(t) {
+function le(t) {
   return /* @__PURE__ */ e.jsx(A, { ...t });
 }
-function le(t) {
+function ie(t) {
   return /* @__PURE__ */ e.jsx(L, { ...t });
 }
 function N() {
@@ -264,9 +262,9 @@ function N() {
 export {
   ne as MultiSelect,
   oe as MultiSelectContent,
-  ie as MultiSelectGroup,
+  le as MultiSelectGroup,
   ae as MultiSelectItem,
-  le as MultiSelectSeparator,
+  ie as MultiSelectSeparator,
   re as MultiSelectTrigger,
   se as MultiSelectValue
 };

package/dist/components/navigation-menu.js

@@ -1,7 +1,7 @@
 import { j as e, c as o } from "../index-C_XDkVGm.js";
 import * as n from "@radix-ui/react-navigation-menu";
 import { cva as s } from "class-variance-authority";
-import { CaretDownIcon as u } from "@phosphor-icons/react";
+import { CaretDownIcon as d } from "@phosphor-icons/react";
 function v({
   className: t,
   children: a,
@@ -28,7 +28,7 @@ function v({
     }
   );
 }
-function f({
+function p({
   className: t,
   ...a
 }) {
@@ -44,7 +44,7 @@ function f({
     }
   );
 }
-function p({
+function f({
   className: t,
   ...a
 }) {
@@ -57,14 +57,13 @@ function p({
     }
   );
 }
-const d = s(
+const u = s(
   `
     group inline-flex h-9 w-max items-center justify-center rounded-md
-    bg-background px-4 py-2 paragraph-sm font-medium
+    bg-background px-4 py-2 paragraph-sm font-medium focusable-item
     transition-[color,box-shadow] outline-none
     hover:bg-accent hover:text-accent-foreground
     focus:bg-accent focus:text-accent-foreground
-    focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1
     disabled:pointer-events-none disabled:opacity-50
     data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground
     data-[state=open]:hover:bg-accent
@@ -80,13 +79,13 @@ function x({
     n.Trigger,
     {
       "data-slot": "navigation-menu-trigger",
-      className: o(d(), "group", t),
+      className: o(u(), "group", t),
       ...i,
       children: [
         a,
         " ",
         /* @__PURE__ */ e.jsx(
-          u,
+          d,
           {
             className: `\r
           relative top-px ml-1 size-3 transition duration-300\r
@@ -174,7 +173,7 @@ function l({
     }
   );
 }
-function b({
+function h({
   className: t,
   ...a
 }) {
@@ -184,12 +183,10 @@ function b({
       "data-slot": "navigation-menu-link",
       className: o(
         `
-          flex flex-col gap-1 rounded-sm p-2 paragraph-sm transition-all
-          outline-none
+          flex flex-col gap-1 rounded-sm p-2 paragraph-sm focusable-item
+          transition-all outline-none
           hover:bg-accent hover:text-accent-foreground
           focus:bg-accent focus:text-accent-foreground
-          focus-visible:ring-[3px] focus-visible:ring-ring/50
-          focus-visible:outline-1
           data-[active=true]:bg-accent/50
           data-[active=true]:text-accent-foreground
           data-[active=true]:hover:bg-accent
@@ -202,7 +199,7 @@ function b({
     }
   );
 }
-function h({
+function b({
   className: t,
   ...a
 }) {
@@ -233,11 +230,11 @@ function h({
 export {
   v as NavigationMenu,
   w as NavigationMenuContent,
-  h as NavigationMenuIndicator,
-  p as NavigationMenuItem,
-  b as NavigationMenuLink,
-  f as NavigationMenuList,
+  b as NavigationMenuIndicator,
+  f as NavigationMenuItem,
+  h as NavigationMenuLink,
+  p as NavigationMenuList,
   x as NavigationMenuTrigger,
   l as NavigationMenuViewport,
-  d as navigationMenuTriggerStyle
+  u as navigationMenuTriggerStyle
 };

package/dist/components/phone-input.js

@@ -1,35 +1,35 @@
 import { j as e, c as p } from "../index-C_XDkVGm.js";
-import { C as k, d as A, f as F, b as L, c as D, e as N } from "../command-Cq3FhQXv.js";
-import { I as M } from "../input-C0PAOim8.js";
+import { C as O, d as A, f as F, b as L, c as D, e as N } from "../command-Cq3FhQXv.js";
+import { I as M } from "../input-D9gqZjs0.js";
 import { P as q, c as H, b as G } from "../popover-CLQxfbEi.js";
-import { S as W } from "../scroll-area-DQenuQib.js";
+import { S as W } from "../scroll-area-BTNDZ-p2.js";
 import { CaretDownIcon as $, CheckIcon as B } from "@phosphor-icons/react";
-import * as t from "react";
+import * as n from "react";
 import * as I from "react-phone-number-input";
 import J from "react-phone-number-input/flags";
 import K from "react-phone-number-input/locale/en";
 import Q from "react-phone-number-input/locale/es";
 import U from "react-phone-number-input/locale/fr";
-function X(r, n) {
-  const [o, s] = t.useState(r);
-  return t.useEffect(() => {
+function X(r, o) {
+  const [t, s] = n.useState(r);
+  return n.useEffect(() => {
     const a = setTimeout(() => {
       s(r);
-    }, n);
+    }, o);
     return () => {
       clearTimeout(a);
     };
-  }, [r, n]), o;
+  }, [r, o]), t;
 }
-const Y = t.forwardRef(
+const Y = n.forwardRef(
   ({
     className: r,
-    onChange: n,
-    value: o,
+    onChange: o,
+    value: t,
     size: s = "md",
     rounded: a = "default",
-    locale: d = "en",
-    ...u
+    locale: u = "en",
+    ...d
   }, c) => /* @__PURE__ */ e.jsx(
     I.default,
     {
@@ -39,66 +39,66 @@ const Y = t.forwardRef(
       countrySelectComponent: E,
       inputComponent: P,
       smartCaret: !1,
-      labels: d === "es" ? Q : d === "fr" ? U : K,
-      value: o || void 0,
-      onChange: (h) => n?.(h || ""),
+      labels: u === "es" ? Q : u === "fr" ? U : K,
+      value: t || void 0,
+      onChange: (h) => o?.(h || ""),
       countrySelectProps: {
         size: s,
         rounded: a,
-        ...u
+        ...d
       },
       numberInputProps: {
         size: s,
         rounded: a,
-        ...u
+        ...d
       },
-      ...u
+      ...d
     }
   )
 );
 Y.displayName = "PhoneInput";
-const P = t.forwardRef(({ className: r, rounded: n = "default", size: o, ...s }, a) => {
-  const { "data-country": d, ...u } = s;
+const P = n.forwardRef(({ className: r, rounded: o = "default", size: t, ...s }, a) => {
+  const { "data-country": u, ...d } = s;
   return /* @__PURE__ */ e.jsx(
     M,
     {
-      size: o,
+      size: t,
       className: p(
         "w-full",
         {
-          "rounded-s-none rounded-e-lg": n !== "full",
-          "rounded-s-none rounded-e-full": n === "full",
-          "rounded-e-sm": o === "sm",
-          "rounded-e-md": o === "md",
-          "rounded-e-lg": o === "lg"
+          "rounded-s-none rounded-e-lg": o !== "full",
+          "rounded-s-none rounded-e-full": o === "full",
+          "rounded-e-sm": t === "sm",
+          "rounded-e-md": t === "md",
+          "rounded-e-lg": t === "lg"
         },
         r
       ),
-      ...u,
+      ...d,
       ref: a
     }
   );
 });
 P.displayName = "InputComponent";
-const E = t.memo(
+const E = n.memo(
   ({
     disabled: r,
-    value: n,
-    options: o,
+    value: o,
+    options: t,
     onChange: s,
     size: a = "md",
-    rounded: d = "default",
-    ...u
+    rounded: u = "default",
+    ...d
   }) => {
-    const c = t.useRef(null), [h, j] = t.useState(""), [b, v] = t.useState(!1), [y, w] = t.useState(20), f = X(h, 100), m = t.useMemo(() => f ? o.filter(
+    const c = n.useRef(null), [h, j] = n.useState(""), [b, v] = n.useState(!1), [w, y] = n.useState(20), f = X(h, 100), m = n.useMemo(() => f ? t.filter(
       ({ label: l, value: i }) => i && (l.toLowerCase().includes(f.toLowerCase()) || i.toLowerCase().includes(f.toLowerCase()))
-    ) : o, [o, f]), g = t.useMemo(
-      () => m.slice(0, y),
-      [m, y]
+    ) : t, [t, f]), g = n.useMemo(
+      () => m.slice(0, w),
+      [m, w]
     );
-    return t.useEffect(() => {
-      w(20);
-    }, [f]), t.useEffect(() => {
+    return n.useEffect(() => {
+      y(20);
+    }, [f]), n.useEffect(() => {
       if (!b) return;
       const l = setTimeout(() => {
         if (!c.current) return;
@@ -107,9 +107,9 @@ const E = t.memo(
         );
         if (!x) return;
         const S = () => {
-          const { scrollTop: V, scrollHeight: R, clientHeight: _ } = x;
-          V + _ >= R - 100 && w(
-            (O) => Math.min(O + 20, m.length)
+          const { scrollTop: _, scrollHeight: V, clientHeight: R } = x;
+          _ + R >= V - 100 && y(
+            (k) => Math.min(k + 20, m.length)
           );
         };
         x.addEventListener("scroll", S, {
@@ -136,18 +136,15 @@ const E = t.memo(
             "button",
             {
               type: "button",
-              "aria-invalid": u["aria-invalid"],
+              "aria-invalid": d["aria-invalid"],
               className: p(
                 `
                 flex w-fit min-w-0 items-center justify-center border border-r-0
-                border-input bg-transparent paragraph-md
-                transition-[color,box-shadow] outline-none
+                border-input bg-transparent paragraph-md focusable-item
                 selection:bg-primary selection:text-primary-foreground
                 file:inline-flex file:border-0 file:bg-transparent
                 file:paragraph-sm file:font-semibold file:text-foreground
                 placeholder:text-muted-foreground
-                focus-visible:z-1 focus-visible:border-ring
-                focus-visible:ring-[3px] focus-visible:ring-ring/50
                 disabled:pointer-events-none disabled:cursor-not-allowed
                 disabled:opacity-50
                 aria-invalid:border-destructive-foreground
@@ -156,7 +153,7 @@ const E = t.memo(
                 dark:bg-input/30
                 dark:aria-invalid:ring-destructive-foreground/40
               `,
-                d === "default" ? "rounded-e-none" : "rounded-s-full rounded-e-none",
+                u === "default" ? "rounded-e-none" : "rounded-s-full rounded-e-none",
                 {
                   "h-8 rounded-s-sm px-2 py-1 label-md": a === "sm",
                   "h-12 rounded-s-md px-3 py-1 label-lg": a === "md",
@@ -164,13 +161,13 @@ const E = t.memo(
                 }
               ),
               disabled: r,
-              ...u,
+              ...d,
               children: [
                 /* @__PURE__ */ e.jsx(
                   C,
                   {
-                    country: n,
-                    countryName: n,
+                    country: o,
+                    countryName: o,
                     disabled: r
                   }
                 ),
@@ -186,7 +183,7 @@ const E = t.memo(
               ]
             }
           ) }),
-          /* @__PURE__ */ e.jsx(G, { className: "w-[300px] p-0", children: /* @__PURE__ */ e.jsxs(k, { children: [
+          /* @__PURE__ */ e.jsx(G, { className: "w-75 p-0", children: /* @__PURE__ */ e.jsxs(O, { children: [
             /* @__PURE__ */ e.jsx(
               A,
               {
@@ -205,15 +202,15 @@ const E = t.memo(
               }
             ),
             /* @__PURE__ */ e.jsx(F, { children: /* @__PURE__ */ e.jsxs(W, { ref: c, className: "h-72", children: [
-              /* @__PURE__ */ e.jsx(L, { children: g.length === 0 && o.length > 20 ? "Too many results. Please refine your search." : "No country found." }),
+              /* @__PURE__ */ e.jsx(L, { children: g?.length === 0 && t?.length > 20 ? "Too many results. Please refine your search." : "No country found." }),
               /* @__PURE__ */ e.jsxs(D, { children: [
-                g.map(
+                g?.map(
                   ({ value: l, label: i }) => l ? /* @__PURE__ */ e.jsx(
                     T,
                     {
                       country: l,
                       countryName: i,
-                      selectedCountry: n,
+                      selectedCountry: o,
                       onChange: s,
                       onSelectComplete: () => v(!1)
                     },
@@ -244,39 +241,48 @@ const E = t.memo(
   }
 );
 E.displayName = "CountrySelect";
-const T = t.memo(
+const T = n.memo(
   ({
     country: r,
-    countryName: n,
-    selectedCountry: o,
+    countryName: o,
+    selectedCountry: t,
     onChange: s,
     onSelectComplete: a
   }) => {
-    const d = t.useCallback(() => {
+    const u = n.useCallback(() => {
       s(r), a();
     }, [r, s, a]);
-    return /* @__PURE__ */ e.jsxs(N, { className: "gap-2", onSelect: d, children: [
-      /* @__PURE__ */ e.jsx(C, { country: r, countryName: n }),
-      /* @__PURE__ */ e.jsx("span", { className: "flex-1 paragraph-sm", children: n }),
-      /* @__PURE__ */ e.jsx("span", { className: "paragraph-sm text-foreground/50", children: `+${I.getCountryCallingCode(r)}` }),
-      /* @__PURE__ */ e.jsx(
-        B,
-        {
-          className: p(
-            "ml-auto size-4",
-            r === o ? "opacity-100" : "opacity-0"
+    return /* @__PURE__ */ e.jsxs(
+      N,
+      {
+        keywords: [o, r],
+        value: r,
+        className: "gap-2",
+        onSelect: u,
+        children: [
+          /* @__PURE__ */ e.jsx(C, { country: r, countryName: o }),
+          /* @__PURE__ */ e.jsx("span", { className: "flex-1 paragraph-sm", children: o }),
+          /* @__PURE__ */ e.jsx("span", { className: "paragraph-sm text-foreground/50", children: `+${I.getCountryCallingCode(r)}` }),
+          /* @__PURE__ */ e.jsx(
+            B,
+            {
+              className: p(
+                "ml-auto size-4",
+                r === t ? "opacity-100" : "opacity-0"
+              )
+            }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
 T.displayName = "CountrySelectOption";
-const C = t.memo(
+const C = n.memo(
   ({
     country: r,
-    countryName: n,
-    disabled: o
+    countryName: o,
+    disabled: t
   }) => {
     const s = J[r];
     return /* @__PURE__ */ e.jsx(
@@ -285,11 +291,13 @@ const C = t.memo(
         className: p(
           `
             flex h-4 w-6 overflow-hidden rounded-[4px] bg-foreground/20
-            [&_svg:not([class*='size-'])]:size-full
+            [&_svg]:h-auto [&_svg]:w-6!
+            [&_svg:not([class*='size-'])]:h-auto
+            [&_svg:not([class*='size-'])]:w-full
           `,
-          { "opacity-50": o }
+          { "opacity-50": t }
         ),
-        children: s ? /* @__PURE__ */ e.jsx(s, { title: n }) : null
+        children: s ? /* @__PURE__ */ e.jsx(s, { title: o }) : null
       }
     );
   }

package/dist/components/scroll-area.js

@@ -1,4 +1,4 @@
-import { S as l, a as o } from "../scroll-area-DQenuQib.js";
+import { S as l, a as o } from "../scroll-area-BTNDZ-p2.js";
 export {
   l as ScrollArea,
   o as ScrollBar