@clasing/ui 2.7.5 → 2.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/{badge-DnN1HZI0.js → badge-CaH3b0zW.js} +12 -15
  2. package/dist/{button-C8ApjC1N.js → button-DSpGxL2e.js} +11 -12
  3. package/dist/components/accordion.js +14 -16
  4. package/dist/components/alert-dialog.js +1 -1
  5. package/dist/components/alert.js +1 -1
  6. package/dist/components/badge.js +1 -1
  7. package/dist/components/blocks/interactive-card.js +45 -51
  8. package/dist/components/blocks/selectable-chips.js +33 -32
  9. package/dist/components/button.js +1 -1
  10. package/dist/components/calendar.js +1 -1
  11. package/dist/components/checkbox.js +13 -15
  12. package/dist/components/context-menu.js +7 -7
  13. package/dist/components/dropdown-menu.js +38 -38
  14. package/dist/components/input-otp.js +1 -1
  15. package/dist/components/input.js +1 -1
  16. package/dist/components/menubar.js +1 -1
  17. package/dist/components/multi-select.js +36 -38
  18. package/dist/components/navigation-menu.js +16 -19
  19. package/dist/components/phone-input.js +88 -80
  20. package/dist/components/scroll-area.js +1 -1
  21. package/dist/components/select.js +18 -20
  22. package/dist/components/textarea.js +19 -25
  23. package/dist/components/toggle-group.js +1 -1
  24. package/dist/components/toggle.js +1 -1
  25. package/dist/{input-EFdg0T-Q.js → input-D9gqZjs0.js} +34 -42
  26. package/dist/{scroll-area-DQenuQib.js → scroll-area-BTNDZ-p2.js} +11 -13
  27. package/dist/{toggle-Bj6sVNqF.js → toggle-Df9QfXij.js} +9 -11
  28. package/dist/ui.css +57 -35
  29. package/package.json +1 -1
package/dist/{input-EFdg0T-Q.js → input-D9gqZjs0.js} RENAMED
@@ -1,12 +1,12 @@
1
- import { j as r, c as o } from "./index-C_XDkVGm.js";
2
- import { EyeSlashIcon as f, EyeIcon as g } from "@phosphor-icons/react";
3
- import { cva as b } from "class-variance-authority";
4
- import * as m from "react";
5
- import { B as x } from "./button-C8ApjC1N.js";
6
- const d = b(
1
+ import { j as r, c as n } from "./index-C_XDkVGm.js";
2
+ import { EyeSlashIcon as f, EyeIcon as m } from "@phosphor-icons/react";
3
+ import { cva as x } from "class-variance-authority";
4
+ import * as g from "react";
5
+ import { B as b } from "./button-DSpGxL2e.js";
6
+ const o = x(
7
7
  `
8
8
  flex w-full min-w-0 rounded-md border border-input bg-transparent
9
- transition-[color,box-shadow] outline-none
9
+ focusable-item
10
10
  selection:bg-primary selection:text-primary-foreground
11
11
  file:inline-flex file:h-7 file:border-0 file:bg-transparent
12
12
  file:paragraph-sm file:font-medium file:text-foreground
@@ -29,90 +29,82 @@ const d = b(
29
29
  }
30
30
  );
31
31
  function y({
32
- className: l,
32
+ className: d,
33
33
  type: e,
34
- size: a,
35
- icon: s,
36
- iconPosition: t = "left",
37
- ...n
34
+ size: t,
35
+ icon: a,
36
+ iconPosition: s = "left",
37
+ ...i
38
38
  }) {
39
- const [i, u] = m.useState(!1), p = () => {
40
- u(!i);
39
+ const [l, u] = g.useState(!1), p = () => {
40
+ u(!l);
41
41
  };
42
- return !s && e !== "password" ? /* @__PURE__ */ r.jsx(
42
+ return !a && e !== "password" ? /* @__PURE__ */ r.jsx(
43
43
  "input",
44
44
  {
45
45
  type: e,
46
46
  "data-slot": "input",
47
- className: o(
48
- d({ size: a }),
49
- `
50
- focus-visible:border-ring focus-visible:ring-[3px]
51
- focus-visible:ring-ring
52
- `,
47
+ className: n(
48
+ o({ size: t }),
53
49
  `
54
50
  aria-invalid:border-destructive-foreground
55
51
  aria-invalid:ring-destructive-foreground/20
56
52
  dark:aria-invalid:ring-destructive-foreground/40
57
53
  `,
58
- l
54
+ d
59
55
  ),
60
- ...n
56
+ ...i
61
57
  }
62
58
  ) : /* @__PURE__ */ r.jsxs("div", { className: "relative w-full", children: [
63
- s && t === "left" && /* @__PURE__ */ r.jsx(
59
+ a && s === "left" && /* @__PURE__ */ r.jsx(
64
60
  "span",
65
61
  {
66
62
  className: `\r
67
63
  absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground\r
68
64
  `,
69
- children: s
65
+ children: a
70
66
  }
71
67
  ),
72
68
  /* @__PURE__ */ r.jsx(
73
69
  "input",
74
70
  {
75
- type: e === "password" ? i ? "text" : "password" : e,
71
+ type: e === "password" ? l ? "text" : "password" : e,
76
72
  "data-slot": "input",
77
- className: o(
78
- d({ size: a }),
79
- `
80
- focus-visible:border-ring focus-visible:ring-[3px]
81
- focus-visible:ring-ring/50
82
- `,
73
+ className: n(
74
+ o({ size: t }),
83
75
  `
84
76
  aria-invalid:border-destructive-foreground
85
77
  aria-invalid:ring-destructive-foreground/20
86
78
  dark:aria-invalid:ring-destructive-foreground/40
87
79
  `,
88
- s && t === "left" ? "pl-10" : "",
89
- s && t === "right" || e === "password" ? "pr-10" : "",
90
- l
80
+ a && s === "left" ? "pl-10" : "",
81
+ a && s === "right" || e === "password" ? "pr-10" : "",
82
+ d
91
83
  ),
92
- ...n
84
+ ...i
93
85
  }
94
86
  ),
95
87
  e === "password" && /* @__PURE__ */ r.jsx(
96
- x,
88
+ b,
97
89
  {
98
90
  variant: "secondary",
99
91
  type: "button",
100
92
  iconOnly: !0,
101
- size: a === "xs" || a === "sm" ? "xs" : "md",
93
+ size: t === "xs" || t === "sm" ? "xs" : "md",
102
94
  tabIndex: -1,
103
- "aria-label": i ? "Hide password" : "Show password",
95
+ "aria-label": l ? "Hide password" : "Show password",
104
96
  className: "absolute top-1/2 right-3 -translate-y-1/2",
105
97
  onClick: p,
106
- children: i ? /* @__PURE__ */ r.jsx(f, {}) : /* @__PURE__ */ r.jsx(g, {})
98
+ children: l ? /* @__PURE__ */ r.jsx(f, {}) : /* @__PURE__ */ r.jsx(m, {})
107
99
  }
108
100
  ),
109
- s && t === "right" && e !== "password" && /* @__PURE__ */ r.jsx(
101
+ a && s === "right" && e !== "password" && /* @__PURE__ */ r.jsx(
110
102
  "span",
111
103
  {
112
104
  className: `\r
113
105
  absolute top-1/2 right-3 -translate-y-1/2 text-muted-foreground\r
114
106
  `,
115
- children: s
107
+ children: a
116
108
  }
117
109
  )
118
110
  ] });
package/dist/{scroll-area-DQenuQib.js → scroll-area-BTNDZ-p2.js} RENAMED
@@ -1,43 +1,41 @@
1
1
  import { j as r, c as s } from "./index-C_XDkVGm.js";
2
- import * as o from "@radix-ui/react-scroll-area";
2
+ import * as e from "@radix-ui/react-scroll-area";
3
3
  function c({
4
- className: e,
4
+ className: o,
5
5
  children: l,
6
6
  ...a
7
7
  }) {
8
8
  return /* @__PURE__ */ r.jsxs(
9
- o.Root,
9
+ e.Root,
10
10
  {
11
11
  "data-slot": "scroll-area",
12
- className: s("relative", e),
12
+ className: s("relative", o),
13
13
  ...a,
14
14
  children: [
15
15
  /* @__PURE__ */ r.jsx(
16
- o.Viewport,
16
+ e.Viewport,
17
17
  {
18
18
  "data-slot": "scroll-area-viewport",
19
19
  className: `\r
20
- size-full rounded-[inherit] text-foreground\r
20
+ size-full rounded-[inherit] text-foreground focusable-item\r
21
21
  transition-[color,box-shadow] outline-none\r
22
- focus-visible:ring-[3px] focus-visible:ring-ring/50\r
23
- focus-visible:outline-1\r
24
22
  `,
25
23
  children: l
26
24
  }
27
25
  ),
28
26
  /* @__PURE__ */ r.jsx(t, {}),
29
- /* @__PURE__ */ r.jsx(o.Corner, {})
27
+ /* @__PURE__ */ r.jsx(e.Corner, {})
30
28
  ]
31
29
  }
32
30
  );
33
31
  }
34
32
  function t({
35
- className: e,
33
+ className: o,
36
34
  orientation: l = "vertical",
37
35
  ...a
38
36
  }) {
39
37
  return /* @__PURE__ */ r.jsx(
40
- o.ScrollAreaScrollbar,
38
+ e.ScrollAreaScrollbar,
41
39
  {
42
40
  "data-slot": "scroll-area-scrollbar",
43
41
  orientation: l,
@@ -45,11 +43,11 @@ function t({
45
43
  "flex touch-none p-px transition-colors select-none",
46
44
  l === "vertical" && "h-full w-2.5 border-l border-l-transparent",
47
45
  l === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
48
- e
46
+ o
49
47
  ),
50
48
  ...a,
51
49
  children: /* @__PURE__ */ r.jsx(
52
- o.ScrollAreaThumb,
50
+ e.ScrollAreaThumb,
53
51
  {
54
52
  "data-slot": "scroll-area-thumb",
55
53
  className: "relative flex-1 rounded-full bg-border"
package/dist/{toggle-Bj6sVNqF.js → toggle-Df9QfXij.js} RENAMED
@@ -1,14 +1,12 @@
1
- import { j as a, c as i } from "./index-C_XDkVGm.js";
2
- import * as o from "@radix-ui/react-toggle";
1
+ import { j as n, c as o } from "./index-C_XDkVGm.js";
2
+ import * as i from "@radix-ui/react-toggle";
3
3
  import { cva as s } from "class-variance-authority";
4
4
  const d = s(
5
5
  `
6
6
  inline-flex items-center justify-center gap-2 rounded-md paragraph-sm
7
- font-semibold whitespace-nowrap text-foreground
7
+ font-semibold whitespace-nowrap text-foreground focusable-item
8
8
  transition-[color,box-shadow] outline-none
9
9
  hover:bg-muted hover:text-muted-foreground
10
- focus-visible:border-ring focus-visible:ring-[3px]
11
- focus-visible:ring-ring/50
12
10
  disabled:pointer-events-none disabled:opacity-50
13
11
  aria-invalid:border-destructive-foreground
14
12
  aria-invalid:ring-destructive-foreground/20
@@ -45,15 +43,15 @@ const d = s(
45
43
  function c({
46
44
  className: e,
47
45
  variant: t,
48
- size: r,
49
- ...n
46
+ size: a,
47
+ ...r
50
48
  }) {
51
- return /* @__PURE__ */ a.jsx(
52
- o.Root,
49
+ return /* @__PURE__ */ n.jsx(
50
+ i.Root,
53
51
  {
54
52
  "data-slot": "toggle",
55
- className: i(d({ variant: t, size: r, className: e })),
56
- ...n
53
+ className: o(d({ variant: t, size: a, className: e })),
54
+ ...r
57
55
  }
58
56
  );
59
57
  }
package/dist/ui.css CHANGED
@@ -61,15 +61,17 @@
61
61
  --color-black: #0d0d0d;
62
62
  --color-white: #ffffff;
63
63
 
64
- --color-neutral-900: #0d0d0d; /* Tu nuevo fondo base */
65
- --color-neutral-800: #1a1a1a; /* Superficies elevadas */
66
- --color-neutral-700: #262626; /* Bordes suaves */
67
- --color-neutral-600: #404040;
68
- --color-neutral-500: #737373; /* Texto desactivado */
69
- --color-neutral-400: #a3a3a3; /* Texto secundario */
64
+ --color-neutral-950: #0d0d0d;
65
+ --color-neutral-900: #171717;
66
+ --color-neutral-800: #262626;
67
+ --color-neutral-700: #404040;
68
+ --color-neutral-600: #525252;
69
+ --color-neutral-500: #737373;
70
+ --color-neutral-400: #a3a3a3;
70
71
  --color-neutral-300: #d4d4d4;
71
72
  --color-neutral-200: #e5e5e5;
72
- --color-neutral-100: #f5f5f5; /* Blanco humo */
73
+ --color-neutral-100: #f5f5f5;
74
+ --color-neutral-050: #fafafa;
73
75
 
74
76
  --color-yellow-900: #332400;
75
77
  --color-yellow-800: #624600;
@@ -161,9 +163,6 @@
161
163
 
162
164
  --color-ring-default: var(--color-blue-600);
163
165
 
164
- --color-accent: var(--color-neutral-000);
165
- --color-accent-foreground: var(--color-neutral-1000);
166
-
167
166
  --breakpoint-3xl: 1600px;
168
167
  --breakpoint-4xl: 2000px;
169
168
  --font-sans: var(--font-sans);
@@ -172,6 +171,7 @@
172
171
  --radius-md: calc(var(--radius) - 2px);
173
172
  --radius-lg: var(--radius);
174
173
  --radius-xl: calc(var(--radius) + 4px);
174
+
175
175
  --color-background: var(--background);
176
176
  --color-foreground: var(--foreground);
177
177
  --color-card: var(--card);
@@ -293,19 +293,19 @@
293
293
  :root {
294
294
  --radius: 1rem;
295
295
  --background: var(--color-white);
296
- --foreground: var(--color-neutral-900);
297
- --card: var(--background);
296
+ --foreground: var(--color-neutral-950);
297
+ --card: var(--color-neutral-050);
298
298
  --card-foreground: var(--foreground);
299
- --popover: var(--background);
299
+ --popover: var(--color-white);
300
300
  --popover-foreground: var(--foreground);
301
- --primary: var(--color-neutral-900);
301
+ --primary: var(--color-neutral-950);
302
302
  --primary-foreground: var(--color-neutral-100);
303
- --secondary: var(--color-neutral-200);
303
+ --secondary: var(--color-neutral-100);
304
304
  --secondary-foreground: var(--foreground);
305
- --muted: var(--color-neutral-200);
305
+ --muted: var(--color-neutral-100);
306
306
  --muted-foreground: var(--color-neutral-500);
307
307
  --accent: var(--color-neutral-200);
308
- --accent-foreground: var(--color-neutral-900);
308
+ --accent-foreground: var(--color-neutral-800);
309
309
  --destructive: var(--color-red-050);
310
310
  --destructive-foreground: var(--color-red-600);
311
311
  --success: var(--color-green-050);
@@ -315,34 +315,41 @@
315
315
  --info: var(--color-blue-050);
316
316
  --info-foreground: var(--color-blue-700);
317
317
  --border: var(--color-neutral-200);
318
- --input: var(--color-neutral-300);
319
- --ring: var(--color-neutral-900);
320
- --sidebar: var(--background);
318
+ --input: var(--color-neutral-200);
319
+ --ring: var(--color-blue-600);
320
+ --chart-1: var(--color-blue-500);
321
+ --chart-2: var(--color-turquoise-500);
322
+ --chart-3: var(--color-violet-500);
323
+ --chart-4: var(--color-orange-500);
324
+ --chart-5: var(--color-pink-500);
325
+ --sidebar: var(--color-white);
321
326
  --sidebar-foreground: var(--foreground);
322
327
  --sidebar-primary: var(--primary);
323
328
  --sidebar-primary-foreground: var(--primary-foreground);
324
329
  --sidebar-accent: var(--accent);
325
330
  --sidebar-accent-foreground: var(--accent-foreground);
326
331
  --sidebar-border: var(--border);
327
- --surface: var(--background);
332
+ --surface: var(--color-neutral-100);
328
333
  --surface-foreground: var(--foreground);
334
+ --code: var(--color-neutral-100);
335
+ --code-foreground: var(--color-neutral-950);
329
336
  }
330
337
 
331
338
  .dark {
332
- --background: var(--color-neutral-900);
339
+ --background: var(--color-neutral-950);
333
340
  --foreground: var(--color-neutral-100);
334
- --card: var(--color-neutral-800);
341
+ --card: var(--color-neutral-900);
335
342
  --card-foreground: var(--foreground);
336
- --popover: var(--color-neutral-800);
343
+ --popover: var(--color-neutral-900);
337
344
  --popover-foreground: var(--foreground);
338
345
  --primary: var(--color-neutral-100);
339
- --primary-foreground: var(--color-neutral-900);
340
- --secondary: var(--color-neutral-800);
346
+ --primary-foreground: var(--color-neutral-950);
347
+ --secondary: var(--color-neutral-900);
341
348
  --secondary-foreground: var(--color-neutral-100);
342
- --muted: var(--color-neutral-800);
349
+ --muted: var(--color-neutral-900);
343
350
  --muted-foreground: var(--color-neutral-400);
344
- --accent: var(--color-neutral-800);
345
- --accent-foreground: var(--color-neutral-100);
351
+ --accent: var(--color-neutral-700);
352
+ --accent-foreground: var(--color-neutral-200);
346
353
  --destructive: var(--color-red-900);
347
354
  --destructive-foreground: var(--color-red-200);
348
355
  --success: var(--color-green-900);
@@ -350,19 +357,26 @@
350
357
  --warning: var(--color-yellow-900);
351
358
  --warning-foreground: var(--color-yellow-200);
352
359
  --info: var(--color-blue-900);
353
- --info-foreground: var(--color-blue-200);
354
- --border: var(--color-neutral-700);
355
- --input: var(--color-neutral-700);
356
- --ring: var(--color-neutral-300);
357
- --sidebar: var(--color-neutral-900);
360
+ --info-foreground: var(--color-blue-300);
361
+ --border: var(--color-neutral-800);
362
+ --input: var(--color-neutral-800);
363
+ --ring: var(--color-blue-500);
364
+ --chart-1: var(--color-blue-400);
365
+ --chart-2: var(--color-turquoise-400);
366
+ --chart-3: var(--color-violet-400);
367
+ --chart-4: var(--color-orange-400);
368
+ --chart-5: var(--color-pink-400);
369
+ --sidebar: var(--color-neutral-950);
358
370
  --sidebar-foreground: var(--foreground);
359
371
  --sidebar-primary: var(--primary);
360
372
  --sidebar-primary-foreground: var(--primary-foreground);
361
373
  --sidebar-accent: var(--accent);
362
374
  --sidebar-accent-foreground: var(--accent-foreground);
363
375
  --sidebar-border: var(--border);
364
- --surface: var(--color-neutral-800);
376
+ --surface: var(--color-neutral-900);
365
377
  --surface-foreground: var(--foreground);
378
+ --code: var(--color-neutral-900);
379
+ --code-foreground: var(--color-neutral-100);
366
380
  }
367
381
  /*
368
382
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
@@ -711,3 +725,11 @@ input[type='color']::-webkit-color-swatch {
711
725
  ::-webkit-scrollbar-thumb:hover {
712
726
  background-color: var(--color-neutral-200);
713
727
  }
728
+
729
+ @utility active-card {
730
+ @apply border-accent-foreground! bg-accent! hover:bg-accent/80!;
731
+ }
732
+
733
+ @utility focusable-item {
734
+ @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;
735
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clasing/ui",
3
- "version": "2.7.5",
3
+ "version": "2.9.0",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "dist"