nexa-ui-kit 0.11.6 → 0.11.9

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 (95) hide show
  1. package/dist/components/NAlert.js +2 -14
  2. package/dist/components/NAlert.nexa +3 -14
  3. package/dist/components/NAutocomplete.js +1 -1
  4. package/dist/components/NAutocomplete.nexa +2 -1
  5. package/dist/components/NAvatar.js +0 -5
  6. package/dist/components/NAvatar.nexa +1 -5
  7. package/dist/components/NBadge.js +0 -6
  8. package/dist/components/NBadge.nexa +1 -6
  9. package/dist/components/NBottomSheet.js +0 -5
  10. package/dist/components/NBottomSheet.nexa +1 -5
  11. package/dist/components/NButton.js +219 -296
  12. package/dist/components/NButton.nexa +241 -320
  13. package/dist/components/NCard.js +39 -82
  14. package/dist/components/NCard.nexa +27 -71
  15. package/dist/components/NCheckbox.js +74 -63
  16. package/dist/components/NCheckbox.nexa +64 -44
  17. package/dist/components/NChips.nexa +1 -0
  18. package/dist/components/NDataTable.js +300 -356
  19. package/dist/components/NDataTable.nexa +265 -320
  20. package/dist/components/NDatepicker.js +4 -25
  21. package/dist/components/NDatepicker.nexa +5 -25
  22. package/dist/components/NForm.nexa +1 -0
  23. package/dist/components/NFormField.js +0 -5
  24. package/dist/components/NFormField.nexa +1 -5
  25. package/dist/components/NImage.js +1 -6
  26. package/dist/components/NImage.nexa +2 -6
  27. package/dist/components/NInput.js +96 -263
  28. package/dist/components/NInput.nexa +89 -259
  29. package/dist/components/NInputNumber.nexa +1 -1
  30. package/dist/components/NModal.js +1 -118
  31. package/dist/components/NModal.nexa +2 -119
  32. package/dist/components/NMultiSelect.js +1 -1
  33. package/dist/components/NMultiSelect.nexa +2 -1
  34. package/dist/components/NPaginator.js +1 -11
  35. package/dist/components/NPaginator.nexa +2 -11
  36. package/dist/components/NPassword.nexa +1 -0
  37. package/dist/components/NProgressBar.js +0 -11
  38. package/dist/components/NProgressBar.nexa +1 -11
  39. package/dist/components/NRadio.js +1 -8
  40. package/dist/components/NRadio.nexa +2 -8
  41. package/dist/components/NScrollView.js +0 -6
  42. package/dist/components/NScrollView.nexa +1 -6
  43. package/dist/components/NSelect.js +7 -35
  44. package/dist/components/NSelect.nexa +8 -35
  45. package/dist/components/NSkeleton.js +3 -9
  46. package/dist/components/NSkeleton.nexa +4 -9
  47. package/dist/components/NSwitch.js +0 -6
  48. package/dist/components/NSwitch.nexa +1 -6
  49. package/dist/components/NTabs.js +0 -11
  50. package/dist/components/NTabs.nexa +1 -11
  51. package/dist/components/NTag.js +1 -11
  52. package/dist/components/NTag.nexa +2 -11
  53. package/dist/components/NToastContainer.js +3 -27
  54. package/dist/components/NToastContainer.nexa +4 -27
  55. package/dist/components/NTooltip.js +0 -13
  56. package/dist/components/NTooltip.nexa +1 -13
  57. package/dist/components/NTreeMenu.js +1 -21
  58. package/dist/components/NTreeMenu.nexa +2 -21
  59. package/dist/components/NVirtualList.js +0 -2
  60. package/dist/components/NVirtualList.nexa +1 -2
  61. package/dist/styles/tokens.css +82 -173
  62. package/package.json +5 -5
  63. package/src/components/NAlert.nexa +3 -14
  64. package/src/components/NAutocomplete.nexa +2 -1
  65. package/src/components/NAvatar.nexa +1 -5
  66. package/src/components/NBadge.nexa +1 -6
  67. package/src/components/NBottomSheet.nexa +1 -5
  68. package/src/components/NButton.nexa +241 -320
  69. package/src/components/NCard.nexa +27 -71
  70. package/src/components/NCheckbox.nexa +64 -44
  71. package/src/components/NChips.nexa +1 -0
  72. package/src/components/NDataTable.nexa +265 -320
  73. package/src/components/NDatepicker.nexa +5 -25
  74. package/src/components/NForm.nexa +1 -0
  75. package/src/components/NFormField.nexa +1 -5
  76. package/src/components/NImage.nexa +2 -6
  77. package/src/components/NInput.nexa +89 -259
  78. package/src/components/NInputNumber.nexa +1 -1
  79. package/src/components/NModal.nexa +2 -119
  80. package/src/components/NMultiSelect.nexa +2 -1
  81. package/src/components/NPaginator.nexa +2 -11
  82. package/src/components/NPassword.nexa +1 -0
  83. package/src/components/NProgressBar.nexa +1 -11
  84. package/src/components/NRadio.nexa +2 -8
  85. package/src/components/NScrollView.nexa +1 -6
  86. package/src/components/NSelect.nexa +8 -35
  87. package/src/components/NSkeleton.nexa +4 -9
  88. package/src/components/NSwitch.nexa +1 -6
  89. package/src/components/NTabs.nexa +1 -11
  90. package/src/components/NTag.nexa +2 -11
  91. package/src/components/NToastContainer.nexa +4 -27
  92. package/src/components/NTooltip.nexa +1 -13
  93. package/src/components/NTreeMenu.nexa +2 -21
  94. package/src/components/NVirtualList.nexa +1 -2
  95. package/src/styles/tokens.css +82 -173
@@ -85,17 +85,14 @@ const __style = `.n-tree-menu[data-v-278e8175]{
85
85
  font-size: var(--n-text-sm);
86
86
  user-select: none;
87
87
  }
88
-
89
88
  .n-tree-item[data-v-278e8175]{
90
89
  --n-tree-depth: 0;
91
90
  position: relative;
92
91
  margin-bottom: 1px;
93
92
  }
94
-
95
93
  .n-tree-item[data-v-278e8175]:last-child{
96
94
  margin-bottom: 0;
97
95
  }
98
-
99
96
  /* Líneas conectoras verticales */
100
97
  .n-tree-item[data-v-278e8175]:not([style*="--n-tree-depth: 0"])::before{
101
98
  content: '';
@@ -107,7 +104,6 @@ const __style = `.n-tree-menu[data-v-278e8175]{
107
104
  background: var(--n-color-border);
108
105
  opacity: 0.35;
109
106
  }
110
-
111
107
  .n-tree-row[data-v-278e8175]{
112
108
  display: flex;
113
109
  align-items: center;
@@ -120,7 +116,6 @@ const __style = `.n-tree-menu[data-v-278e8175]{
120
116
  color: var(--n-color-text);
121
117
  position: relative;
122
118
  }
123
-
124
119
  /* Línea conectora horizontal */
125
120
  .n-tree-item[data-v-278e8175]:not([style*="--n-tree-depth: 0"]) .n-tree-row::before{
126
121
  content: '';
@@ -132,21 +127,17 @@ const __style = `.n-tree-menu[data-v-278e8175]{
132
127
  background: var(--n-color-border);
133
128
  opacity: 0.35;
134
129
  }
135
-
136
130
  .n-tree-row[data-v-278e8175]:hover{
137
- background: linear-gradient(135deg, var(--n-color-surface-hover), color-mix(in srgb, var(--n-color-surface-hover) 85%, var(--n-color-primary) 5%));
131
+ background-color: var(--n-color-surface-hover);
138
132
  }
139
-
140
133
  .n-tree-row[data-v-278e8175]:active{
141
134
  background: color-mix(in srgb, var(--n-color-surface-hover) 80%, var(--n-color-text) 5%);
142
135
  }
143
-
144
136
  .n-tree-item.is-selected > .n-tree-row[data-v-278e8175]{
145
137
  background: var(--n-color-primary-light);
146
138
  color: var(--n-color-primary);
147
139
  font-weight: var(--n-weight-semibold);
148
140
  }
149
-
150
141
  .n-tree-item.is-selected > .n-tree-row[data-v-278e8175]::after{
151
142
  content: '';
152
143
  position: absolute;
@@ -157,7 +148,6 @@ const __style = `.n-tree-menu[data-v-278e8175]{
157
148
  background: var(--n-color-primary);
158
149
  border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
159
150
  }
160
-
161
151
  .n-tree-toggle[data-v-278e8175]{
162
152
  background: var(--n-color-glass);
163
153
  border: 1px solid var(--n-color-border);
@@ -173,47 +163,38 @@ const __style = `.n-tree-menu[data-v-278e8175]{
173
163
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
174
164
  flex-shrink: 0;
175
165
  }
176
-
177
166
  .n-tree-toggle[data-v-278e8175]:hover{
178
167
  background: color-mix(in srgb, var(--n-color-primary-light) 80%, var(--n-color-primary) 10%);
179
168
  border-color: var(--n-color-primary);
180
169
  color: var(--n-color-primary);
181
170
  transform: scale(1.05);
182
171
  }
183
-
184
172
  .n-tree-toggle[data-v-278e8175]:active{
185
173
  transform: scale(0.95);
186
174
  }
187
-
188
175
  .n-tree-toggle[data-v-278e8175]:focus-visible{
189
176
  outline: none;
190
177
  box-shadow: 0 0 0 2px var(--n-color-background), 0 0 0 4px var(--n-color-primary);
191
178
  z-index: 1;
192
179
  }
193
-
194
180
  .n-tree-row[data-v-278e8175]:focus-visible{
195
181
  outline: none;
196
- box-shadow: inset 0 0 0 2px var(--n-color-primary);
197
182
  border-radius: var(--n-radius-md);
198
183
  }
199
-
200
184
  .n-tree-toggle-icon[data-v-278e8175]{
201
185
  font-size: 1rem;
202
186
  line-height: 1;
203
187
  font-weight: 700;
204
188
  }
205
-
206
189
  .n-tree-toggle-placeholder[data-v-278e8175]{
207
190
  width: 20px;
208
191
  height: 20px;
209
192
  flex-shrink: 0;
210
193
  }
211
-
212
194
  .n-tree-icon[data-v-278e8175]{
213
195
  font-size: 1.1rem;
214
196
  flex-shrink: 0;
215
197
  }
216
-
217
198
  .n-tree-label[data-v-278e8175]{
218
199
  flex: 1;
219
200
  min-width: 0;
@@ -223,7 +204,6 @@ const __style = `.n-tree-menu[data-v-278e8175]{
223
204
  font-weight: var(--n-weight-medium);
224
205
  letter-spacing: 0.01em;
225
206
  }
226
-
227
207
  .n-tree-item.is-selected .n-tree-label[data-v-278e8175]{
228
208
  font-weight: var(--n-weight-bold);
229
209
  letter-spacing: 0;
@@ -74,17 +74,14 @@ const toggle = (id, e) => {
74
74
  font-size: var(--n-text-sm);
75
75
  user-select: none;
76
76
  }
77
-
78
77
  .n-tree-item {
79
78
  --n-tree-depth: 0;
80
79
  position: relative;
81
80
  margin-bottom: 1px;
82
81
  }
83
-
84
82
  .n-tree-item:last-child {
85
83
  margin-bottom: 0;
86
84
  }
87
-
88
85
  /* Líneas conectoras verticales */
89
86
  .n-tree-item:not([style*="--n-tree-depth: 0"])::before {
90
87
  content: '';
@@ -96,7 +93,6 @@ const toggle = (id, e) => {
96
93
  background: var(--n-color-border);
97
94
  opacity: 0.35;
98
95
  }
99
-
100
96
  .n-tree-row {
101
97
  display: flex;
102
98
  align-items: center;
@@ -109,7 +105,6 @@ const toggle = (id, e) => {
109
105
  color: var(--n-color-text);
110
106
  position: relative;
111
107
  }
112
-
113
108
  /* Línea conectora horizontal */
114
109
  .n-tree-item:not([style*="--n-tree-depth: 0"]) .n-tree-row::before {
115
110
  content: '';
@@ -121,21 +116,17 @@ const toggle = (id, e) => {
121
116
  background: var(--n-color-border);
122
117
  opacity: 0.35;
123
118
  }
124
-
125
119
  .n-tree-row:hover {
126
- background: linear-gradient(135deg, var(--n-color-surface-hover), color-mix(in srgb, var(--n-color-surface-hover) 85%, var(--n-color-primary) 5%));
120
+ background-color: var(--n-color-surface-hover);
127
121
  }
128
-
129
122
  .n-tree-row:active {
130
123
  background: color-mix(in srgb, var(--n-color-surface-hover) 80%, var(--n-color-text) 5%);
131
124
  }
132
-
133
125
  .n-tree-item.is-selected > .n-tree-row {
134
126
  background: var(--n-color-primary-light);
135
127
  color: var(--n-color-primary);
136
128
  font-weight: var(--n-weight-semibold);
137
129
  }
138
-
139
130
  .n-tree-item.is-selected > .n-tree-row::after {
140
131
  content: '';
141
132
  position: absolute;
@@ -146,7 +137,6 @@ const toggle = (id, e) => {
146
137
  background: var(--n-color-primary);
147
138
  border-radius: 0 var(--n-radius-sm) var(--n-radius-sm) 0;
148
139
  }
149
-
150
140
  .n-tree-toggle {
151
141
  background: var(--n-color-glass);
152
142
  border: 1px solid var(--n-color-border);
@@ -162,47 +152,38 @@ const toggle = (id, e) => {
162
152
  transition: background 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
163
153
  flex-shrink: 0;
164
154
  }
165
-
166
155
  .n-tree-toggle:hover {
167
156
  background: color-mix(in srgb, var(--n-color-primary-light) 80%, var(--n-color-primary) 10%);
168
157
  border-color: var(--n-color-primary);
169
158
  color: var(--n-color-primary);
170
159
  transform: scale(1.05);
171
160
  }
172
-
173
161
  .n-tree-toggle:active {
174
162
  transform: scale(0.95);
175
163
  }
176
-
177
164
  .n-tree-toggle:focus-visible {
178
165
  outline: none;
179
166
  box-shadow: 0 0 0 2px var(--n-color-background), 0 0 0 4px var(--n-color-primary);
180
167
  z-index: 1;
181
168
  }
182
-
183
169
  .n-tree-row:focus-visible {
184
170
  outline: none;
185
- box-shadow: inset 0 0 0 2px var(--n-color-primary);
186
171
  border-radius: var(--n-radius-md);
187
172
  }
188
-
189
173
  .n-tree-toggle-icon {
190
174
  font-size: 1rem;
191
175
  line-height: 1;
192
176
  font-weight: 700;
193
177
  }
194
-
195
178
  .n-tree-toggle-placeholder {
196
179
  width: 20px;
197
180
  height: 20px;
198
181
  flex-shrink: 0;
199
182
  }
200
-
201
183
  .n-tree-icon {
202
184
  font-size: 1.1rem;
203
185
  flex-shrink: 0;
204
186
  }
205
-
206
187
  .n-tree-label {
207
188
  flex: 1;
208
189
  min-width: 0;
@@ -212,9 +193,9 @@ const toggle = (id, e) => {
212
193
  font-weight: var(--n-weight-medium);
213
194
  letter-spacing: 0.01em;
214
195
  }
215
-
216
196
  .n-tree-item.is-selected .n-tree-label {
217
197
  font-weight: var(--n-weight-bold);
218
198
  letter-spacing: 0;
219
199
  }
200
+
220
201
  </style>
@@ -80,11 +80,9 @@ const __style = `.n-virtual-list[data-v-2d5f09ed]{
80
80
  -webkit-overflow-scrolling: touch;
81
81
  overscroll-behavior: contain;
82
82
  }
83
-
84
83
  .n-virtual-list-spacer[data-v-2d5f09ed]{
85
84
  position: relative;
86
85
  }
87
-
88
86
  .n-virtual-list-row[data-v-2d5f09ed]{
89
87
  box-sizing: border-box;
90
88
  }`
@@ -83,12 +83,11 @@ const onScroll = (e) => {
83
83
  -webkit-overflow-scrolling: touch;
84
84
  overscroll-behavior: contain;
85
85
  }
86
-
87
86
  .n-virtual-list-spacer {
88
87
  position: relative;
89
88
  }
90
-
91
89
  .n-virtual-list-row {
92
90
  box-sizing: border-box;
93
91
  }
92
+
94
93
  </style>
@@ -2,203 +2,112 @@
2
2
  -webkit-font-smoothing: antialiased;
3
3
  -moz-osx-font-smoothing: grayscale;
4
4
 
5
- /* ─── Color Palette ─── */
6
- --n-color-primary: #6366f1;
7
- --n-color-primary-hover: #4f46e5;
8
- --n-color-primary-active: #4338ca;
9
- --n-color-primary-light: rgba(99, 102, 241, 0.1);
10
- --n-color-primary-lighter: rgba(99, 102, 241, 0.06);
11
- --n-color-primary-glow: rgba(99, 102, 241, 0.35);
12
-
13
- --n-color-success: #10b981;
14
- --n-color-success-hover: #059669;
15
- --n-color-success-light: rgba(16, 185, 129, 0.1);
16
-
5
+ /* Aura Emerald Theme */
6
+ --n-color-primary: #10b981;
7
+ --n-color-primary-hover: #059669;
8
+ --n-color-primary-active: #047857;
9
+ --n-color-primary-light: #d1fae5;
10
+ --n-color-primary-text: #ffffff;
11
+
12
+ --n-color-success: #22c55e;
13
+ --n-color-success-hover: #16a34a;
14
+ --n-color-success-active: #15803d;
15
+
17
16
  --n-color-warning: #f59e0b;
18
17
  --n-color-warning-hover: #d97706;
19
- --n-color-warning-light: rgba(245, 158, 11, 0.1);
18
+ --n-color-warning-active: #b45309;
20
19
 
21
20
  --n-color-danger: #ef4444;
22
21
  --n-color-danger-hover: #dc2626;
23
- --n-color-danger-light: rgba(239, 68, 68, 0.1);
24
-
25
- --n-color-info: #06b6d4;
26
- --n-color-info-hover: #0891b2;
27
- --n-color-info-light: rgba(6, 182, 212, 0.1);
28
-
29
- /* Surfaces — dark */
30
- --n-color-surface: #0f172a;
31
- --n-color-surface-alt: #1e293b;
32
- --n-color-surface-hover: #1e293b;
33
- --n-color-surface-elevated: #1e293b;
34
-
35
- --n-color-bg: #020617;
36
- --n-color-bg-alt: #0f172a;
37
-
38
- /* Text */
39
- --n-color-text: #f1f5f9;
40
- --n-color-text-secondary: #94a3b8;
41
- --n-color-text-muted: #64748b;
42
- --n-color-text-inverse: #0f172a;
43
-
44
- /* Borders */
45
- --n-color-border: rgba(255, 255, 255, 0.06);
46
- --n-color-border-hover: rgba(255, 255, 255, 0.12);
47
- --n-color-border-active: rgba(255, 255, 255, 0.2);
48
-
49
- /* Overlay / Glass */
50
- --n-color-overlay: rgba(2, 6, 17, 0.6);
51
- --n-color-glass: rgba(255, 255, 255, 0.03);
52
- --n-color-glass-border: rgba(255, 255, 255, 0.06);
53
- --n-color-glass-hover: rgba(255, 255, 255, 0.06);
54
-
55
- /* Semantic borders */
56
- --n-color-primary-border: rgba(99, 102, 241, 0.15);
57
- --n-color-success-border: rgba(16, 185, 129, 0.15);
58
- --n-color-warning-border: rgba(245, 158, 11, 0.15);
59
- --n-color-danger-border: rgba(239, 68, 68, 0.15);
60
- --n-color-info-border: rgba(6, 182, 212, 0.15);
61
-
62
- --n-color-stripe: rgba(255, 255, 255, 0.04);
63
- --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.5);
64
-
65
- /* ─── Typography ─── */
66
- --n-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
67
- --n-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
22
+ --n-color-danger-active: #b91c1c;
68
23
 
69
- --n-text-xs: 0.75rem;
70
- --n-text-sm: 0.8125rem;
71
- --n-text-base: 0.9375rem;
72
- --n-text-lg: 1.0625rem;
73
- --n-text-xl: 1.25rem;
74
- --n-text-2xl: 1.5rem;
75
- --n-text-3xl: 2rem;
24
+ --n-color-info: #3b82f6;
25
+ --n-color-info-hover: #2563eb;
26
+ --n-color-info-active: #1d4ed8;
27
+
28
+ /* Surfaces - Dark */
29
+ --n-color-surface: #18181b;
30
+ --n-color-surface-alt: #27272a;
31
+ --n-color-surface-hover: #3f3f46;
32
+ --n-color-surface-elevated: #27272a;
76
33
 
77
- --n-weight-normal: 400;
78
- --n-weight-medium: 500;
79
- --n-weight-semibold: 600;
80
- --n-weight-bold: 700;
81
- --n-weight-extrabold: 800;
34
+ --n-color-bg: #09090b;
35
+ --n-color-bg-alt: #18181b;
82
36
 
83
- --n-leading-tight: 1.25;
84
- --n-leading-normal: 1.5;
85
- --n-leading-relaxed: 1.75;
37
+ --n-color-text: #f4f4f5;
38
+ --n-color-text-secondary: #a1a1aa;
39
+ --n-color-text-muted: #71717a;
40
+ --n-color-text-inverse: #09090b;
86
41
 
87
- --n-tracking-tight: -0.025em;
88
- --n-tracking-normal: 0;
89
- --n-tracking-wide: 0.05em;
42
+ --n-color-border: #3f3f46;
43
+ --n-color-border-hover: #52525b;
44
+ --n-color-border-active: #71717a;
45
+
46
+ --n-color-overlay: rgba(9, 9, 11, 0.7);
47
+
48
+ --n-ring-primary: 0 0 0 2px #09090b, 0 0 0 4px #10b981;
49
+ --n-ring-success: 0 0 0 2px #09090b, 0 0 0 4px #22c55e;
50
+ --n-ring-warning: 0 0 0 2px #09090b, 0 0 0 4px #f59e0b;
51
+ --n-ring-danger: 0 0 0 2px #09090b, 0 0 0 4px #ef4444;
52
+ --n-ring-info: 0 0 0 2px #09090b, 0 0 0 4px #3b82f6;
53
+ --n-ring-surface: 0 0 0 2px #09090b, 0 0 0 4px #52525b;
54
+
55
+ --n-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
56
+ --n-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
57
+
58
+ --n-text-xs: 0.75rem;
59
+ --n-text-sm: 0.875rem;
60
+ --n-text-base: 1rem;
61
+ --n-text-lg: 1.125rem;
62
+ --n-text-xl: 1.25rem;
90
63
 
91
- /* ─── Spacing (4px base) ─── */
92
64
  --n-space-1: 0.25rem;
93
65
  --n-space-2: 0.5rem;
94
66
  --n-space-3: 0.75rem;
95
67
  --n-space-4: 1rem;
96
68
  --n-space-5: 1.25rem;
97
69
  --n-space-6: 1.5rem;
98
- --n-space-8: 2rem;
99
- --n-space-10: 2.5rem;
100
- --n-space-12: 3rem;
101
- --n-space-16: 4rem;
102
-
103
- /* ─── Border Radius ─── */
104
- --n-radius-sm: 6px;
105
- --n-radius-md: 8px;
106
- --n-radius-lg: 12px;
107
- --n-radius-xl: 16px;
108
- --n-radius-2xl: 24px;
70
+
71
+ --n-radius-sm: 4px;
72
+ --n-radius-md: 6px;
73
+ --n-radius-lg: 8px;
74
+ --n-radius-xl: 12px;
109
75
  --n-radius-full: 9999px;
110
76
 
111
- /* ─── Shadows ─── */
112
- --n-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
113
- --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
114
- --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
115
- --n-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
116
- --n-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
117
- --n-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
118
-
119
- --n-shadow-glow-primary: 0 4px 20px -4px rgba(99, 102, 241, 0.4);
120
- --n-shadow-glow-success: 0 4px 20px -4px rgba(16, 185, 129, 0.4);
121
- --n-shadow-glow-warning: 0 4px 20px -4px rgba(245, 158, 11, 0.4);
122
- --n-shadow-glow-info: 0 4px 20px -4px rgba(6, 182, 212, 0.4);
123
- --n-shadow-glow-danger: 0 4px 20px -4px rgba(239, 68, 68, 0.4);
124
-
125
- /* ─── Transitions (magnetic easing) ─── */
126
- --n-transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
127
- --n-transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
128
- --n-transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
129
- --n-transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
130
-
131
- /* ─── Z-Index Scale ─── */
132
- --n-z-dropdown: 100;
133
- --n-z-sticky: 200;
134
- --n-z-overlay: 500;
135
- --n-z-modal: 2000;
136
- --n-z-toast: 3000;
137
- --n-z-tooltip: 1000;
77
+ --n-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
78
+ --n-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
79
+ --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
80
+ --n-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
81
+ --n-shadow-none: none;
82
+
83
+ --n-transition-fast: 0.15s ease-in-out;
84
+ --n-transition-normal: 0.2s ease-in-out;
138
85
  }
139
86
 
140
- /* ─── Light Theme ─── */
141
87
  [data-theme="light"] {
142
- --n-color-primary: #4f46e5;
143
- --n-color-primary-hover: #4338ca;
144
- --n-color-primary-active: #3730a3;
145
- --n-color-primary-light: rgba(79, 70, 229, 0.08);
146
- --n-color-primary-lighter: rgba(79, 70, 229, 0.04);
147
- --n-color-primary-glow: rgba(79, 70, 229, 0.2);
148
-
149
- --n-color-success: #059669;
150
- --n-color-success-light: rgba(5, 150, 105, 0.08);
88
+ --n-color-surface: #ffffff;
89
+ --n-color-surface-alt: #f4f4f5;
90
+ --n-color-surface-hover: #e4e4e7;
91
+ --n-color-surface-elevated: #ffffff;
151
92
 
152
- --n-color-warning: #d97706;
153
- --n-color-warning-light: rgba(217, 119, 6, 0.08);
93
+ --n-color-bg: #f8fafc;
94
+ --n-color-bg-alt: #ffffff;
154
95
 
155
- --n-color-danger: #dc2626;
156
- --n-color-danger-light: rgba(220, 38, 38, 0.08);
96
+ --n-color-text: #09090b;
97
+ --n-color-text-secondary: #52525b;
98
+ --n-color-text-muted: #71717a;
99
+ --n-color-text-inverse: #ffffff;
157
100
 
158
- --n-color-info: #0891b2;
159
- --n-color-info-light: rgba(8, 145, 178, 0.08);
101
+ --n-color-border: #d4d4d8;
102
+ --n-color-border-hover: #a1a1aa;
103
+ --n-color-border-active: #71717a;
160
104
 
161
- --n-color-surface: #ffffff;
162
- --n-color-surface-alt: #f8fafc;
163
- --n-color-surface-hover: #f1f5f9;
164
- --n-color-surface-elevated: #ffffff;
105
+ --n-color-overlay: rgba(9, 9, 11, 0.4);
165
106
 
166
- --n-color-bg: #f8fafc;
167
- --n-color-bg-alt: #f1f5f9;
168
-
169
- --n-color-text: #0f172a;
170
- --n-color-text-secondary: #475569;
171
- --n-color-text-muted: #94a3b8;
172
- --n-color-text-inverse: #f8fafc;
173
-
174
- --n-color-border: rgba(0, 0, 0, 0.06);
175
- --n-color-border-hover: rgba(0, 0, 0, 0.12);
176
- --n-color-border-active: rgba(0, 0, 0, 0.2);
177
-
178
- --n-color-overlay: rgba(15, 23, 42, 0.4);
179
- --n-color-glass: rgba(255, 255, 255, 0.7);
180
- --n-color-glass-border: rgba(0, 0, 0, 0.04);
181
- --n-color-glass-hover: rgba(255, 255, 255, 0.85);
182
-
183
- --n-color-primary-border: rgba(79, 70, 229, 0.2);
184
- --n-color-success-border: rgba(5, 150, 105, 0.2);
185
- --n-color-warning-border: rgba(217, 119, 6, 0.2);
186
- --n-color-danger-border: rgba(220, 38, 38, 0.2);
187
- --n-color-info-border: rgba(8, 145, 178, 0.2);
188
-
189
- --n-color-stripe: rgba(0, 0, 0, 0.04);
190
- --n-shadow-top-lg: 0 -10px 25px -5px rgba(0, 0, 0, 0.15);
191
-
192
- --n-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
193
- --n-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
194
- --n-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
195
- --n-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
196
- --n-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
197
- --n-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
198
-
199
- --n-shadow-glow-primary: 0 4px 20px -4px rgba(79, 70, 229, 0.25);
200
- --n-shadow-glow-success: 0 4px 20px -4px rgba(5, 150, 105, 0.25);
201
- --n-shadow-glow-warning: 0 4px 20px -4px rgba(217, 119, 6, 0.25);
202
- --n-shadow-glow-info: 0 4px 20px -4px rgba(8, 145, 178, 0.25);
203
- --n-shadow-glow-danger: 0 4px 20px -4px rgba(220, 38, 38, 0.25);
107
+ --n-ring-primary: 0 0 0 2px #ffffff, 0 0 0 4px #10b981;
108
+ --n-ring-success: 0 0 0 2px #ffffff, 0 0 0 4px #22c55e;
109
+ --n-ring-warning: 0 0 0 2px #ffffff, 0 0 0 4px #f59e0b;
110
+ --n-ring-danger: 0 0 0 2px #ffffff, 0 0 0 4px #ef4444;
111
+ --n-ring-info: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
112
+ --n-ring-surface: 0 0 0 2px #ffffff, 0 0 0 4px #a1a1aa;
204
113
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nexa-ui-kit",
3
- "version": "0.11.6",
3
+ "version": "0.11.9",
4
4
  "description": "Premium component library for Nexa Framework",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -22,12 +22,12 @@
22
22
  "src"
23
23
  ],
24
24
  "dependencies": {
25
- "nexa-framework": "0.11.6",
26
- "nexa-mobile": "0.11.6"
25
+ "nexa-framework": "^0.11.9",
26
+ "nexa-mobile": "^0.11.9"
27
27
  },
28
28
  "devDependencies": {
29
- "cpx": "^1.5.0",
30
- "nexa-compiler": "0.11.6"
29
+ "nexa-compiler": "^0.11.9",
30
+ "cpx": "^1.5.0"
31
31
  },
32
32
  "scripts": {
33
33
  "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist && cpx \"src/styles/*.css\" dist/styles",
@@ -51,43 +51,36 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
51
51
  font-size: var(--n-text-sm);
52
52
  line-height: var(--n-leading-normal);
53
53
  animation: n-alert-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
54
- box-shadow: 0 4px 24px rgba(0,0,0,0.06);
55
54
  backdrop-filter: blur(12px);
56
55
  }
57
-
58
56
  @keyframes n-alert-in {
59
- from { opacity: 0; transform: translateY(-8px); }
60
- to { opacity: 1; transform: translateY(0); }
57
+ from { opacity: 0; }
58
+ to { opacity: 1; }
61
59
  }
62
-
63
60
  .is-info {
64
61
  background: var(--n-color-primary-light);
65
62
  border-color: var(--n-color-primary-border);
66
63
  border-left-color: var(--n-color-primary);
67
64
  color: var(--n-color-primary);
68
65
  }
69
-
70
66
  .is-success {
71
67
  background: var(--n-color-success-light);
72
68
  border-color: var(--n-color-success-border);
73
69
  border-left-color: var(--n-color-success);
74
70
  color: var(--n-color-success);
75
71
  }
76
-
77
72
  .is-warning {
78
73
  background: var(--n-color-warning-light);
79
74
  border-color: var(--n-color-warning-border);
80
75
  border-left-color: var(--n-color-warning);
81
76
  color: var(--n-color-warning);
82
77
  }
83
-
84
78
  .is-error {
85
79
  background: var(--n-color-danger-light);
86
80
  border-color: var(--n-color-danger-border);
87
81
  border-left-color: var(--n-color-danger);
88
82
  color: var(--n-color-danger);
89
83
  }
90
-
91
84
  .n-alert-icon {
92
85
  font-size: var(--n-text-base);
93
86
  font-weight: var(--n-weight-bold);
@@ -100,7 +93,6 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
100
93
  height: 20px;
101
94
  margin-top: 2px;
102
95
  }
103
-
104
96
  .n-alert-body {
105
97
  flex: 1;
106
98
  display: flex;
@@ -108,16 +100,13 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
108
100
  gap: var(--n-space-1);
109
101
  color: var(--n-color-text);
110
102
  }
111
-
112
103
  .n-alert-title {
113
104
  font-weight: var(--n-weight-semibold);
114
105
  font-size: var(--n-text-sm);
115
106
  }
116
-
117
107
  .n-alert-text {
118
108
  color: var(--n-color-text-secondary);
119
109
  }
120
-
121
110
  .n-alert-close {
122
111
  background: transparent;
123
112
  border: none;
@@ -129,8 +118,8 @@ const icons = { success: '✓', error: '✕', warning: '⚡', info: 'ℹ' }
129
118
  flex-shrink: 0;
130
119
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
131
120
  }
132
-
133
121
  .n-alert-close:hover {
134
122
  color: var(--n-color-text);
135
123
  }
124
+
136
125
  </style>
@@ -54,5 +54,6 @@ onBeforeUnmount(() => { clearTimeout(completeTimer); close() })
54
54
  </template>
55
55
 
56
56
  <style scoped>
57
- .n-ac{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s ease-out}.n-ac-popup.is-top{animation:n-ac-in-top .2s ease-out}@keyframes n-ac-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes n-ac-in-top{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}
57
+ .n-ac{display:flex;flex-direction:column;gap:var(--n-space-2);width:100%;font-family:var(--n-font-sans)}.n-ac-label{display:block;font-size:var(--n-text-sm);font-weight:var(--n-weight-medium);color:var(--n-color-text-secondary);margin-bottom:var(--n-space-2)}.n-ac-input-wrap{position:relative;display:flex;align-items:center;background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);transition:all var(--n-transition-fast)}.n-ac-input-wrap:focus-within{border-color:var(--n-color-primary);box-shadow:0 0 0 3px var(--n-color-primary-light)}.n-ac-input{width:100%;background:transparent;border:none;outline:none;padding:0.75rem 2.75rem 0.75rem 1rem;color:var(--n-color-text);font-size:var(--n-text-base);font-family:inherit}.n-ac-input::placeholder{color:var(--n-color-text-muted)}.n-ac-actions{position:absolute;right:0.5rem;display:flex;align-items:center;gap:0.15rem}.n-ac-action{background:transparent;border:none;color:var(--n-color-text-muted);cursor:pointer;padding:0.25rem;border-radius:var(--n-radius-sm);transition:all var(--n-transition-fast);line-height:1;display:flex;align-items:center}.n-ac-action:hover:not(:disabled){color:var(--n-color-text);background:var(--n-color-glass)}.n-ac-action:disabled{opacity:0.5;cursor:not-allowed}.n-ac-input-wrap.is-disabled{opacity:0.5;cursor:not-allowed;background:var(--n-color-surface-alt)}.n-ac-popup{background:var(--n-color-surface);border:1px solid var(--n-color-border);border-radius:var(--n-radius-md);box-shadow:var(--n-shadow-lg);overflow:hidden;animation:n-ac-in .2s ease-out}.n-ac-popup.is-top{animation:n-ac-in-top .2s ease-out}@keyframes n-ac-in{from{opacity:0;}to{opacity:1;}}@keyframes n-ac-in-top{from{opacity:0;}to{opacity:1;}}.n-ac-loading{padding:var(--n-space-3) var(--n-space-4);color:var(--n-color-text-muted);font-size:var(--n-text-sm)}.n-ac-list{max-height:260px;overflow:auto;display:flex;flex-direction:column}.n-ac-option{text-align:left;padding:0.7rem 1rem;color:var(--n-color-text-secondary);background:transparent;border:none;cursor:pointer;transition:all var(--n-transition-fast)}.n-ac-option:hover,.n-ac-option.is-focused{background:var(--n-color-glass);color:var(--n-color-text)}.n-ac-empty{padding:var(--n-space-4);color:var(--n-color-text-muted);text-align:center;font-size:var(--n-text-sm)}
58
+
58
59
  </style>