@clasing/ui 2.8.0 → 2.9.0

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

package/dist/{input-C0PAOim8.js → input-D9gqZjs0.js}

@@ -1,12 +1,12 @@
-import { j as r, c as o } from "./index-C_XDkVGm.js";
-import { EyeSlashIcon as f, EyeIcon as g } from "@phosphor-icons/react";
-import { cva as b } from "class-variance-authority";
-import * as m from "react";
-import { B as x } from "./button-DSpGxL2e.js";
-const d = b(
+import { j as r, c as n } from "./index-C_XDkVGm.js";
+import { EyeSlashIcon as f, EyeIcon as m } from "@phosphor-icons/react";
+import { cva as x } from "class-variance-authority";
+import * as g from "react";
+import { B as b } from "./button-DSpGxL2e.js";
+const o = x(
   `
     flex w-full min-w-0 rounded-md border border-input bg-transparent
-    transition-[color,box-shadow] outline-none
+    focusable-item
     selection:bg-primary selection:text-primary-foreground
     file:inline-flex file:h-7 file:border-0 file:bg-transparent
     file:paragraph-sm file:font-medium file:text-foreground
@@ -29,90 +29,82 @@ const d = b(
   }
 );
 function y({
-  className: l,
+  className: d,
   type: e,
-  size: a,
-  icon: s,
-  iconPosition: t = "left",
-  ...n
+  size: t,
+  icon: a,
+  iconPosition: s = "left",
+  ...i
 }) {
-  const [i, u] = m.useState(!1), p = () => {
-    u(!i);
+  const [l, u] = g.useState(!1), p = () => {
+    u(!l);
   };
-  return !s && e !== "password" ? /* @__PURE__ */ r.jsx(
+  return !a && e !== "password" ? /* @__PURE__ */ r.jsx(
     "input",
     {
       type: e,
       "data-slot": "input",
-      className: o(
-        d({ size: a }),
-        `
-            focus-visible:border-ring focus-visible:ring-[3px]
-            focus-visible:ring-ring
-          `,
+      className: n(
+        o({ size: t }),
         `
             aria-invalid:border-destructive-foreground
             aria-invalid:ring-destructive-foreground/20
             dark:aria-invalid:ring-destructive-foreground/40
           `,
-        l
+        d
       ),
-      ...n
+      ...i
     }
   ) : /* @__PURE__ */ r.jsxs("div", { className: "relative w-full", children: [
-    s && t === "left" && /* @__PURE__ */ r.jsx(
+    a && s === "left" && /* @__PURE__ */ r.jsx(
       "span",
       {
         className: `\r
             absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground\r
           `,
-        children: s
+        children: a
       }
     ),
     /* @__PURE__ */ r.jsx(
       "input",
       {
-        type: e === "password" ? i ? "text" : "password" : e,
+        type: e === "password" ? l ? "text" : "password" : e,
         "data-slot": "input",
-        className: o(
-          d({ size: a }),
-          `
-            focus-visible:border-ring focus-visible:ring-[3px]
-            focus-visible:ring-ring/50
-          `,
+        className: n(
+          o({ size: t }),
           `
             aria-invalid:border-destructive-foreground
             aria-invalid:ring-destructive-foreground/20
             dark:aria-invalid:ring-destructive-foreground/40
           `,
-          s && t === "left" ? "pl-10" : "",
-          s && t === "right" || e === "password" ? "pr-10" : "",
-          l
+          a && s === "left" ? "pl-10" : "",
+          a && s === "right" || e === "password" ? "pr-10" : "",
+          d
         ),
-        ...n
+        ...i
       }
     ),
     e === "password" && /* @__PURE__ */ r.jsx(
-      x,
+      b,
       {
         variant: "secondary",
         type: "button",
         iconOnly: !0,
-        size: a === "xs" || a === "sm" ? "xs" : "md",
+        size: t === "xs" || t === "sm" ? "xs" : "md",
         tabIndex: -1,
-        "aria-label": i ? "Hide password" : "Show password",
+        "aria-label": l ? "Hide password" : "Show password",
         className: "absolute top-1/2 right-3 -translate-y-1/2",
         onClick: p,
-        children: i ? /* @__PURE__ */ r.jsx(f, {}) : /* @__PURE__ */ r.jsx(g, {})
+        children: l ? /* @__PURE__ */ r.jsx(f, {}) : /* @__PURE__ */ r.jsx(m, {})
       }
     ),
-    s && t === "right" && e !== "password" && /* @__PURE__ */ r.jsx(
+    a && s === "right" && e !== "password" && /* @__PURE__ */ r.jsx(
       "span",
       {
         className: `\r
             absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground\r
           `,
-        children: s
+        children: a
       }
     )
   ] });

package/dist/{scroll-area-DQenuQib.js → scroll-area-BTNDZ-p2.js}

@@ -1,43 +1,41 @@
 import { j as r, c as s } from "./index-C_XDkVGm.js";
-import * as o from "@radix-ui/react-scroll-area";
+import * as e from "@radix-ui/react-scroll-area";
 function c({
-  className: e,
+  className: o,
   children: l,
   ...a
 }) {
   return /* @__PURE__ */ r.jsxs(
-    o.Root,
+    e.Root,
     {
       "data-slot": "scroll-area",
-      className: s("relative", e),
+      className: s("relative", o),
       ...a,
       children: [
         /* @__PURE__ */ r.jsx(
-          o.Viewport,
+          e.Viewport,
           {
             "data-slot": "scroll-area-viewport",
             className: `\r
-          size-full rounded-[inherit] text-foreground\r
+          size-full rounded-[inherit] text-foreground focusable-item\r
           transition-[color,box-shadow] outline-none\r
-          focus-visible:ring-[3px] focus-visible:ring-ring/50\r
-          focus-visible:outline-1\r
         `,
             children: l
           }
         ),
         /* @__PURE__ */ r.jsx(t, {}),
-        /* @__PURE__ */ r.jsx(o.Corner, {})
+        /* @__PURE__ */ r.jsx(e.Corner, {})
       ]
     }
   );
 }
 function t({
-  className: e,
+  className: o,
   orientation: l = "vertical",
   ...a
 }) {
   return /* @__PURE__ */ r.jsx(
-    o.ScrollAreaScrollbar,
+    e.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
       orientation: l,
@@ -45,11 +43,11 @@ function t({
         "flex touch-none p-px transition-colors select-none",
         l === "vertical" && "h-full w-2.5 border-l border-l-transparent",
         l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
-        e
+        o
       ),
       ...a,
       children: /* @__PURE__ */ r.jsx(
-        o.ScrollAreaThumb,
+        e.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
           className: "relative flex-1 rounded-full bg-border"

package/dist/{toggle-Bj6sVNqF.js → toggle-Df9QfXij.js}

@@ -1,14 +1,12 @@
-import { j as a, c as i } from "./index-C_XDkVGm.js";
-import * as o from "@radix-ui/react-toggle";
+import { j as n, c as o } from "./index-C_XDkVGm.js";
+import * as i from "@radix-ui/react-toggle";
 import { cva as s } from "class-variance-authority";
 const d = s(
   `
     inline-flex items-center justify-center gap-2 rounded-md paragraph-sm
-    font-semibold whitespace-nowrap text-foreground
+    font-semibold whitespace-nowrap text-foreground focusable-item
     transition-[color,box-shadow] outline-none
     hover:bg-muted hover:text-muted-foreground
-    focus-visible:border-ring focus-visible:ring-[3px]
-    focus-visible:ring-ring/50
     disabled:pointer-events-none disabled:opacity-50
     aria-invalid:border-destructive-foreground
     aria-invalid:ring-destructive-foreground/20
@@ -45,15 +43,15 @@ const d = s(
 function c({
   className: e,
   variant: t,
-  size: r,
-  ...n
+  size: a,
+  ...r
 }) {
-  return /* @__PURE__ */ a.jsx(
-    o.Root,
+  return /* @__PURE__ */ n.jsx(
+    i.Root,
     {
       "data-slot": "toggle",
-      className: i(d({ variant: t, size: r, className: e })),
-      ...n
+      className: o(d({ variant: t, size: a, className: e })),
+      ...r
     }
   );
 }

package/dist/ui.css

@@ -61,15 +61,17 @@
   --color-black: #0d0d0d;
   --color-white: #ffffff;
 
-  --color-neutral-900: #0d0d0d; /* Tu nuevo fondo base */
-  --color-neutral-800: #1a1a1a; /* Superficies elevadas */
-  --color-neutral-700: #262626; /* Bordes suaves */
-  --color-neutral-600: #404040;
-  --color-neutral-500: #737373; /* Texto desactivado */
-  --color-neutral-400: #a3a3a3; /* Texto secundario */
+  --color-neutral-950: #0d0d0d;
+  --color-neutral-900: #171717;
+  --color-neutral-800: #262626;
+  --color-neutral-700: #404040;
+  --color-neutral-600: #525252;
+  --color-neutral-500: #737373;
+  --color-neutral-400: #a3a3a3;
   --color-neutral-300: #d4d4d4;
   --color-neutral-200: #e5e5e5;
-  --color-neutral-100: #f5f5f5; /* Blanco humo */
+  --color-neutral-100: #f5f5f5;
+  --color-neutral-050: #fafafa;
 
   --color-yellow-900: #332400;
   --color-yellow-800: #624600;
@@ -161,9 +163,6 @@
 
   --color-ring-default: var(--color-blue-600);
 
-  --color-accent: var(--color-neutral-000);
-  --color-accent-foreground: var(--color-neutral-1000);
-
   --breakpoint-3xl: 1600px;
   --breakpoint-4xl: 2000px;
   --font-sans: var(--font-sans);
@@ -172,6 +171,7 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -293,19 +293,19 @@
 :root {
   --radius: 1rem;
   --background: var(--color-white);
-  --foreground: var(--color-neutral-900);
-  --card: var(--background);
+  --foreground: var(--color-neutral-950);
+  --card: var(--color-neutral-050);
   --card-foreground: var(--foreground);
-  --popover: var(--background);
+  --popover: var(--color-white);
   --popover-foreground: var(--foreground);
-  --primary: var(--color-neutral-900);
+  --primary: var(--color-neutral-950);
   --primary-foreground: var(--color-neutral-100);
-  --secondary: var(--color-neutral-200);
+  --secondary: var(--color-neutral-100);
   --secondary-foreground: var(--foreground);
   --muted: var(--color-neutral-100);
   --muted-foreground: var(--color-neutral-500);
   --accent: var(--color-neutral-200);
-  --accent-foreground: var(--color-neutral-900);
+  --accent-foreground: var(--color-neutral-800);
   --destructive: var(--color-red-050);
   --destructive-foreground: var(--color-red-600);
   --success: var(--color-green-050);
@@ -315,34 +315,41 @@
   --info: var(--color-blue-050);
   --info-foreground: var(--color-blue-700);
   --border: var(--color-neutral-200);
-  --input: var(--color-neutral-300);
-  --ring: var(--color-ring-default);
-  --sidebar: var(--background);
+  --input: var(--color-neutral-200);
+  --ring: var(--color-blue-600);
+  --chart-1: var(--color-blue-500);
+  --chart-2: var(--color-turquoise-500);
+  --chart-3: var(--color-violet-500);
+  --chart-4: var(--color-orange-500);
+  --chart-5: var(--color-pink-500);
+  --sidebar: var(--color-white);
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
   --sidebar-accent: var(--accent);
   --sidebar-accent-foreground: var(--accent-foreground);
   --sidebar-border: var(--border);
-  --surface: var(--background);
+  --surface: var(--color-neutral-100);
   --surface-foreground: var(--foreground);
+  --code: var(--color-neutral-100);
+  --code-foreground: var(--color-neutral-950);
 }
 
 .dark {
-  --background: var(--color-neutral-900);
+  --background: var(--color-neutral-950);
   --foreground: var(--color-neutral-100);
   --card: var(--color-neutral-900);
   --card-foreground: var(--foreground);
   --popover: var(--color-neutral-900);
   --popover-foreground: var(--foreground);
   --primary: var(--color-neutral-100);
-  --primary-foreground: var(--color-neutral-900);
-  --secondary: var(--color-neutral-800);
+  --primary-foreground: var(--color-neutral-950);
+  --secondary: var(--color-neutral-900);
   --secondary-foreground: var(--color-neutral-100);
-  --muted: var(--color-neutral-800);
+  --muted: var(--color-neutral-900);
   --muted-foreground: var(--color-neutral-400);
   --accent: var(--color-neutral-700);
-  --accent-foreground: var(--color-neutral-100);
+  --accent-foreground: var(--color-neutral-200);
   --destructive: var(--color-red-900);
   --destructive-foreground: var(--color-red-200);
   --success: var(--color-green-900);
@@ -350,11 +357,16 @@
   --warning: var(--color-yellow-900);
   --warning-foreground: var(--color-yellow-200);
   --info: var(--color-blue-900);
-  --info-foreground: var(--color-blue-200);
-  --border: var(--color-neutral-700);
-  --input: var(--color-neutral-700);
-  --ring: var(--color-ring-default);
-  --sidebar: var(--color-neutral-900);
+  --info-foreground: var(--color-blue-300);
+  --border: var(--color-neutral-800);
+  --input: var(--color-neutral-800);
+  --ring: var(--color-blue-500);
+  --chart-1: var(--color-blue-400);
+  --chart-2: var(--color-turquoise-400);
+  --chart-3: var(--color-violet-400);
+  --chart-4: var(--color-orange-400);
+  --chart-5: var(--color-pink-400);
+  --sidebar: var(--color-neutral-950);
   --sidebar-foreground: var(--foreground);
   --sidebar-primary: var(--primary);
   --sidebar-primary-foreground: var(--primary-foreground);
@@ -363,6 +375,8 @@
   --sidebar-border: var(--border);
   --surface: var(--color-neutral-900);
   --surface-foreground: var(--foreground);
+  --code: var(--color-neutral-900);
+  --code-foreground: var(--color-neutral-100);
 }
 /*
   The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -713,9 +727,9 @@ input[type='color']::-webkit-color-swatch {
 }
 
 @utility active-card {
-  @apply border-info-foreground! bg-info lg:hover:bg-info/50 dark:bg-info/50 dark:hover:bg-info/20;
+  @apply border-accent-foreground! bg-accent! hover:bg-accent/80!;
 }
 
 @utility focusable-item {
-  @apply transition-[color,background-color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring-default focus-visible:ring-offset-1 focus-visible:outline-hidden;
+  @apply transition-[color,background-color,box-shadow] focus-visible:ring-[2px] focus-visible:ring-ring-default focus-visible:ring-offset-1 focus-visible:outline-hidden;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clasing/ui",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "type": "module",
   "files": [
     "dist"