@clasing/ui 2.7.5 → 2.9.0

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-EFdg0T-Q.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

package/dist/components/select.js

@@ -1,6 +1,6 @@
 import { j as e, c as r } from "../index-C_XDkVGm.js";
 import * as s from "@radix-ui/react-select";
-import { CheckIcon as d, CaretDownIcon as i, CaretUpIcon as c } from "@phosphor-icons/react";
+import { CheckIcon as i, CaretDownIcon as d, CaretUpIcon as c } from "@phosphor-icons/react";
 function f({
   ...t
 }) {
@@ -19,8 +19,8 @@ function h({
 function b({
   className: t,
   size: a = "md",
-  children: o,
-  variant: l = "default",
+  children: l,
+  variant: o = "default",
   ...n
 }) {
   return /* @__PURE__ */ e.jsxs(
@@ -28,14 +28,12 @@ function b({
     {
       "data-slot": "select-trigger",
       "data-size": a,
-      "data-variant": l,
+      "data-variant": o,
       className: r(
         `
           flex w-fit items-center justify-between gap-2 rounded-md border
           border-input bg-transparent whitespace-nowrap text-foreground
-          transition-[color,box-shadow] outline-none
-          focus-visible:border-ring focus-visible:ring-[3px]
-          focus-visible:ring-ring
+          focusable-item
           disabled:cursor-not-allowed disabled:opacity-50
           aria-invalid:border-destructive-foreground
           aria-invalid:ring-destructive-foreground/20
@@ -51,7 +49,7 @@ function b({
           [&_svg:not([class*='size-'])]:size-4
         `,
         // Variante de filtro: cuando hay valor seleccionado, texto y borde en color ring
-        l === "filter" && `
+        o === "filter" && `
             not-data-placeholder:border-ring not-data-placeholder:text-ring
             dark:not-data-placeholder:text-blue-300
           `,
@@ -66,8 +64,8 @@ function b({
       ),
       ...n,
       children: [
-        o,
-        /* @__PURE__ */ e.jsx(s.Icon, { asChild: !0, children: /* @__PURE__ */ e.jsx(i, { className: "size-4 opacity-50" }) })
+        l,
+        /* @__PURE__ */ e.jsx(s.Icon, { asChild: !0, children: /* @__PURE__ */ e.jsx(d, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -75,8 +73,8 @@ function b({
 function v({
   className: t,
   children: a,
-  position: o = "popper",
-  collisionPadding: l = 24,
+  position: l = "popper",
+  collisionPadding: o = 24,
   ...n
 }) {
   return /* @__PURE__ */ e.jsx(s.Portal, { children: /* @__PURE__ */ e.jsxs(
@@ -98,7 +96,7 @@ function v({
             data-[state=open]:animate-in data-[state=open]:fade-in-0
             data-[state=open]:zoom-in-95
           `,
-        o === "popper" && `
+        l === "popper" && `
               data-[side=bottom]:translate-y-1
               data-[side=left]:-translate-x-1
               data-[side=right]:translate-x-1
@@ -106,8 +104,8 @@ function v({
             `,
         t
       ),
-      collisionPadding: l,
-      position: o,
+      collisionPadding: o,
+      position: l,
       ...n,
       children: [
         /* @__PURE__ */ e.jsx(u, {}),
@@ -116,7 +114,7 @@ function v({
           {
             className: r(
               "p-1",
-              o === "popper" && `
+              l === "popper" && `
                 h-(--radix-select-trigger-height) w-full
                 min-w-(--radix-select-trigger-width) scroll-my-1
               `
@@ -148,7 +146,7 @@ function j({
 function y({
   className: t,
   children: a,
-  ...o
+  ...l
 }) {
   return /* @__PURE__ */ e.jsxs(
     s.Item,
@@ -167,9 +165,9 @@ function y({
         `,
         t
       ),
-      ...o,
+      ...l,
       children: [
-        /* @__PURE__ */ e.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e.jsx(s.ItemIndicator, { children: /* @__PURE__ */ e.jsx(d, { className: "size-4" }) }) }),
+        /* @__PURE__ */ e.jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ e.jsx(s.ItemIndicator, { children: /* @__PURE__ */ e.jsx(i, { className: "size-4" }) }) }),
         /* @__PURE__ */ e.jsx(s.ItemText, { children: a })
       ]
     }
@@ -218,7 +216,7 @@ function p({
         t
       ),
       ...a,
-      children: /* @__PURE__ */ e.jsx(i, { className: "size-4" })
+      children: /* @__PURE__ */ e.jsx(d, { className: "size-4" })
     }
   );
 }

package/dist/components/textarea.js

@@ -30,27 +30,24 @@ const u = v(
     }
   }
 );
-function b({
+function m({
   className: n,
-  size: l,
-  resize: o,
-  icon: i,
+  size: d,
+  resize: l,
+  icon: a,
   maxLength: e,
   showCharacterCount: c = !1,
-  ...a
+  ...t
 }) {
-  const t = a.value ? String(a.value).length : 0, d = c || e;
-  return !i && !d ? /* @__PURE__ */ r.jsx(
+  const i = t.value ? String(t.value).length : 0, o = c || e;
+  return !a && !o ? /* @__PURE__ */ r.jsx(
     "textarea",
     {
       "data-slot": "textarea",
       maxLength: e,
       className: s(
-        u({ size: l, resize: o }),
-        `
-            focus-visible:border-ring focus-visible:ring-[3px]
-            focus-visible:ring-ring
-          `,
+        u({ size: d, resize: l }),
+        "focusable-item",
         `
             aria-invalid:border-destructive-foreground
             aria-invalid:ring-destructive-foreground/20
@@ -58,7 +55,7 @@ function b({
           `,
         n
       ),
-      ...a
+      ...t
     }
   ) : /* @__PURE__ */ r.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ r.jsxs("div", { className: "relative w-full", children: [
@@ -68,35 +65,32 @@ function b({
           "data-slot": "textarea",
           maxLength: e,
           className: s(
-            u({ size: l, resize: o }),
-            `
-              focus-visible:border-ring focus-visible:ring-[3px]
-              focus-visible:ring-ring
-            `,
+            u({ size: d, resize: l }),
+            "focusable-item",
             `
               aria-invalid:border-destructive-foreground
               aria-invalid:ring-destructive-foreground/20
               dark:aria-invalid:ring-destructive-foreground/40
             `,
-            i ? "pr-10" : "",
+            a ? "pr-10" : "",
             n
           ),
-          ...a
+          ...t
         }
       ),
-      i && i
+      a && a
     ] }),
-    d && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ r.jsx(
+    o && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ r.jsx(
       "span",
       {
         className: s("paragraph-xs text-muted-foreground", {
-          "text-destructive": e && t > e
+          "text-destructive": e && i > e
         }),
-        children: e ? `${t}/${e}` : t
+        children: e ? `${i}/${e}` : i
       }
     ) })
   ] });
 }
 export {
-  b as Textarea
+  m as Textarea
 };

package/dist/components/toggle-group.js

@@ -1,7 +1,7 @@
 import { j as i, c as s } from "../index-C_XDkVGm.js";
 import * as d from "@radix-ui/react-toggle-group";
 import * as l from "react";
-import { t as m } from "../toggle-Bj6sVNqF.js";
+import { t as m } from "../toggle-Df9QfXij.js";
 const u = l.createContext({
   size: "md",
   variant: "default"

package/dist/components/toggle.js

@@ -1,4 +1,4 @@
-import { T as o, t } from "../toggle-Bj6sVNqF.js";
+import { T as o, t } from "../toggle-Df9QfXij.js";
 export {
   o as Toggle,
   t as toggleVariants