@komensal/ui 0.2.1 → 0.3.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 (6) hide show
  1. package/dist/index.d.ts +539 -3
  2. package/dist/index.js +70 -17
  3. package/dist/index.js.map +1 -1
  4. package/dist/styles/index.css +0 -5
  5. package/dist/styles/theme.css +24 -50
  6. package/package.json +4 -1
package/dist/styles/theme.css CHANGED
@@ -1,9 +1,4 @@
1
- /* ── Capa 1: Primitivos ────────────────────────────────────────────────────
2
- Valores reales del design system. Solo esta capa cambia cuando
3
- UI/UX entregue actualizaciones — los tokens semánticos no se tocan.
4
- ─────────────────────────────────────────────────────────────────────────── */
5
1
  :root {
6
- /* Brand — Naranja */
7
2
  --brand-100: #fdf0ea;
8
3
  --brand-200: #facdb4;
9
4
  --brand-300: #f5a478;
@@ -12,7 +7,6 @@
12
7
  --brand-600: #b84418;
13
8
  --brand-700: #8a3011;
14
9
 
15
- /* Neutral */
16
10
  --neutral-0: #ffffff;
17
11
  --neutral-50: #f9f8f7;
18
12
  --neutral-100: #f2f0ee;
@@ -24,7 +18,6 @@
24
18
  --neutral-900: #1e1e1e;
25
19
  --neutral-950: #000000;
26
20
 
27
- /* Feedback */
28
21
  --success-500: #2d9b6f;
29
22
  --success-100: #e8f7f1;
30
23
  --warning-500: #d4820a;
@@ -35,42 +28,30 @@
35
28
  --info-100: #eaf3fb;
36
29
  }
37
30
 
38
- /* ── Capa 2: Semánticos ────────────────────────────────────────────────────
39
- Los componentes solo conocen estos tokens, nunca los primitivos.
40
- @theme inline genera las utilidades de Tailwind (bg-*, text-*, etc.)
41
- Naming: sin prefijo bg-/text- porque Tailwind lo agrega en la clase.
42
- bg-page, bg-surface, bg-subtle, bg-hover, bg-brand, bg-brand-subtle
43
- text-primary → text-foreground (evita colisión con brand primary)
44
- ─────────────────────────────────────────────────────────────────────────── */
45
31
  @theme {
46
- /* ── Brand / Primary ── */
47
- --color-primary: var(--brand-500); /* bg-brand, text-brand */
48
- --color-primary-hover: var(--brand-400); /* hover de botón primario */
49
- --color-primary-dark: var(--brand-600); /* pressed/active de botón */
50
- --color-brand-subtle: var(--brand-100); /* chips, tags de marca */
51
- --color-brand-200: var(--brand-200); /* active card background */
52
- --color-brand-border: var(--brand-300); /* bordes activos, focus ring */
32
+ --color-primary: var(--brand-500);
33
+ --color-primary-hover: var(--brand-400);
34
+ --color-primary-dark: var(--brand-600);
35
+ --color-brand-subtle: var(--brand-100);
36
+ --color-brand-200: var(--brand-200);
37
+ --color-brand-border: var(--brand-300);
53
38
 
54
- /* ── Surfaces ── */
55
- --color-page: var(--neutral-0); /* bg-page → fondo de página */
56
- --color-surface: var(--neutral-0); /* bg-surface → cards, modales */
57
- --color-subtle: var(--neutral-50); /* bg-subtle → sidebars, alternas */
58
- --color-hover: var(--neutral-100); /* bg-hover → filas, list items */
39
+ --color-page: var(--neutral-0);
40
+ --color-surface: var(--neutral-0);
41
+ --color-subtle: var(--neutral-50);
42
+ --color-hover: var(--neutral-100);
59
43
 
60
- /* ── Text ── */
61
- --color-foreground: var(--neutral-950); /* text-foreground → títulos, cuerpo */
62
- --color-title: var(--neutral-900); /* text-title → titulos */
63
- --color-subtitle: var(--neutral-400); /* text-subtitle → párrafos */
64
- --color-body: var(--neutral-600); /* text-body → párrafos */
65
- --color-muted: var(--neutral-500); /* text-muted → descripciones, meta */
66
- --color-disabled: var(--neutral-300); /* text-disabled → inputs off */
67
- --color-inverse: var(--neutral-0); /* text-inverse → sobre fondos oscuros */
44
+ --color-foreground: var(--neutral-950);
45
+ --color-title: var(--neutral-900);
46
+ --color-subtitle: var(--neutral-400);
47
+ --color-body: var(--neutral-600);
48
+ --color-muted: var(--neutral-500);
49
+ --color-disabled: var(--neutral-300);
50
+ --color-inverse: var(--neutral-0);
68
51
 
69
- /* ── Estados de componentes interactivos ── */
70
- --color-inactive: var(--neutral-200); /* bg disabled */
71
- --color-inactive-text: var(--neutral-400); /* text disabled */
52
+ --color-inactive: var(--neutral-200);
53
+ --color-inactive-text: var(--neutral-400);
72
54
 
73
- /* ── Feedback ── */
74
55
  --color-success: var(--success-500);
75
56
  --color-success-subtle: var(--success-100);
76
57
  --color-warning: var(--warning-500);
@@ -81,25 +62,18 @@
81
62
  --color-info-subtle: var(--info-100);
82
63
  --color-wait: var(--info-500);
83
64
 
84
- /* ── UI Components ── */
85
- --color-border: var(--neutral-300); /* bordes de inputs */
86
- --color-input: var(--neutral-0); /* fondo de inputs = blanco */
87
- --color-placeholder: var(--neutral-300); /* placeholder text */
88
- --color-icon-muted: var(--neutral-400); /* iconos inactivos */
65
+ --color-border: var(--neutral-300);
66
+ --color-input: var(--neutral-0);
67
+ --color-placeholder: var(--neutral-300);
68
+ --color-icon-muted: var(--neutral-400);
89
69
  --color-tooltip: var(--neutral-900);
90
70
  --color-tooltip-foreground: var(--neutral-0);
91
71
 
92
- /* ── Spinner ── */
93
72
  --color-spinner-light: var(--neutral-50);
94
73
  --color-spinner-primary: var(--brand-500);
95
74
  --color-spinner-secondary: var(--neutral-900);
96
75
 
97
- /* ── Sistema ── */
98
- --color-ring: var(--brand-300); /* focus outline — brand-300, 2px per spec */
76
+ --color-ring: var(--brand-300);
99
77
 
100
- /* ── Fuentes ──
101
- DM Sans es la tipografía global (definida en global.css).
102
- Poppins es excepción puntual — solo donde UX lo indique (p. ej. título del login).
103
- */
104
78
  --font-poppins: 'Poppins', sans-serif;
105
79
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@komensal/ui",
3
- "version": "0.2.1",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
@@ -20,6 +20,7 @@
20
20
  }
21
21
  },
22
22
  "peerDependencies": {
23
+ "i18next": "^25.0.0",
23
24
  "react": "^19.0.0",
24
25
  "react-dom": "^19.0.0",
25
26
  "react-hook-form": "^7.0.0",
@@ -37,6 +38,7 @@
37
38
  "class-variance-authority": "^0.7.1",
38
39
  "clsx": "^2.1.1",
39
40
  "cmdk": "^1.1.1",
41
+ "i18next": "^26.3.1",
40
42
  "input-otp": "^1.4.2",
41
43
  "lucide-react": "^0.575.0",
42
44
  "react-icons": "^5.5.0",
@@ -46,6 +48,7 @@
46
48
  "@types/google.maps": "^3.64.0",
47
49
  "@types/react": "^19.2.14",
48
50
  "@types/react-dom": "^19.2.3",
51
+ "i18next": "^25.8.12",
49
52
  "react-hook-form": "^7.71.1",
50
53
  "react-i18next": "^16.5.4",
51
54
  "tsup": "^8.5.0",