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.
- package/dist/components/NAlert.js +2 -14
- package/dist/components/NAlert.nexa +3 -14
- package/dist/components/NAutocomplete.js +1 -1
- package/dist/components/NAutocomplete.nexa +2 -1
- package/dist/components/NAvatar.js +0 -5
- package/dist/components/NAvatar.nexa +1 -5
- package/dist/components/NBadge.js +0 -6
- package/dist/components/NBadge.nexa +1 -6
- package/dist/components/NBottomSheet.js +0 -5
- package/dist/components/NBottomSheet.nexa +1 -5
- package/dist/components/NButton.js +219 -296
- package/dist/components/NButton.nexa +241 -320
- package/dist/components/NCard.js +39 -82
- package/dist/components/NCard.nexa +27 -71
- package/dist/components/NCheckbox.js +74 -63
- package/dist/components/NCheckbox.nexa +64 -44
- package/dist/components/NChips.nexa +1 -0
- package/dist/components/NDataTable.js +300 -356
- package/dist/components/NDataTable.nexa +265 -320
- package/dist/components/NDatepicker.js +4 -25
- package/dist/components/NDatepicker.nexa +5 -25
- package/dist/components/NForm.nexa +1 -0
- package/dist/components/NFormField.js +0 -5
- package/dist/components/NFormField.nexa +1 -5
- package/dist/components/NImage.js +1 -6
- package/dist/components/NImage.nexa +2 -6
- package/dist/components/NInput.js +96 -263
- package/dist/components/NInput.nexa +89 -259
- package/dist/components/NInputNumber.nexa +1 -1
- package/dist/components/NModal.js +1 -118
- package/dist/components/NModal.nexa +2 -119
- package/dist/components/NMultiSelect.js +1 -1
- package/dist/components/NMultiSelect.nexa +2 -1
- package/dist/components/NPaginator.js +1 -11
- package/dist/components/NPaginator.nexa +2 -11
- package/dist/components/NPassword.nexa +1 -0
- package/dist/components/NProgressBar.js +0 -11
- package/dist/components/NProgressBar.nexa +1 -11
- package/dist/components/NRadio.js +1 -8
- package/dist/components/NRadio.nexa +2 -8
- package/dist/components/NScrollView.js +0 -6
- package/dist/components/NScrollView.nexa +1 -6
- package/dist/components/NSelect.js +7 -35
- package/dist/components/NSelect.nexa +8 -35
- package/dist/components/NSkeleton.js +3 -9
- package/dist/components/NSkeleton.nexa +4 -9
- package/dist/components/NSwitch.js +0 -6
- package/dist/components/NSwitch.nexa +1 -6
- package/dist/components/NTabs.js +0 -11
- package/dist/components/NTabs.nexa +1 -11
- package/dist/components/NTag.js +1 -11
- package/dist/components/NTag.nexa +2 -11
- package/dist/components/NToastContainer.js +3 -27
- package/dist/components/NToastContainer.nexa +4 -27
- package/dist/components/NTooltip.js +0 -13
- package/dist/components/NTooltip.nexa +1 -13
- package/dist/components/NTreeMenu.js +1 -21
- package/dist/components/NTreeMenu.nexa +2 -21
- package/dist/components/NVirtualList.js +0 -2
- package/dist/components/NVirtualList.nexa +1 -2
- package/dist/styles/tokens.css +82 -173
- package/package.json +5 -5
- package/src/components/NAlert.nexa +3 -14
- package/src/components/NAutocomplete.nexa +2 -1
- package/src/components/NAvatar.nexa +1 -5
- package/src/components/NBadge.nexa +1 -6
- package/src/components/NBottomSheet.nexa +1 -5
- package/src/components/NButton.nexa +241 -320
- package/src/components/NCard.nexa +27 -71
- package/src/components/NCheckbox.nexa +64 -44
- package/src/components/NChips.nexa +1 -0
- package/src/components/NDataTable.nexa +265 -320
- package/src/components/NDatepicker.nexa +5 -25
- package/src/components/NForm.nexa +1 -0
- package/src/components/NFormField.nexa +1 -5
- package/src/components/NImage.nexa +2 -6
- package/src/components/NInput.nexa +89 -259
- package/src/components/NInputNumber.nexa +1 -1
- package/src/components/NModal.nexa +2 -119
- package/src/components/NMultiSelect.nexa +2 -1
- package/src/components/NPaginator.nexa +2 -11
- package/src/components/NPassword.nexa +1 -0
- package/src/components/NProgressBar.nexa +1 -11
- package/src/components/NRadio.nexa +2 -8
- package/src/components/NScrollView.nexa +1 -6
- package/src/components/NSelect.nexa +8 -35
- package/src/components/NSkeleton.nexa +4 -9
- package/src/components/NSwitch.nexa +1 -6
- package/src/components/NTabs.nexa +1 -11
- package/src/components/NTag.nexa +2 -11
- package/src/components/NToastContainer.nexa +4 -27
- package/src/components/NTooltip.nexa +1 -13
- package/src/components/NTreeMenu.nexa +2 -21
- package/src/components/NVirtualList.nexa +1 -2
- 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
|
|
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
|
|
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
|
}`
|
package/dist/styles/tokens.css
CHANGED
|
@@ -2,203 +2,112 @@
|
|
|
2
2
|
-webkit-font-smoothing: antialiased;
|
|
3
3
|
-moz-osx-font-smoothing: grayscale;
|
|
4
4
|
|
|
5
|
-
/*
|
|
6
|
-
--n-color-primary: #
|
|
7
|
-
--n-color-primary-hover: #
|
|
8
|
-
--n-color-primary-active: #
|
|
9
|
-
--n-color-primary-light:
|
|
10
|
-
--n-color-primary-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
--n-color-success: #
|
|
14
|
-
--n-color-success-
|
|
15
|
-
|
|
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-
|
|
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-
|
|
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-
|
|
70
|
-
--n-
|
|
71
|
-
--n-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
--n-
|
|
75
|
-
--n-
|
|
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-
|
|
78
|
-
--n-
|
|
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-
|
|
84
|
-
--n-
|
|
85
|
-
--n-
|
|
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-
|
|
88
|
-
--n-
|
|
89
|
-
--n-
|
|
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
|
-
|
|
99
|
-
--n-
|
|
100
|
-
--n-
|
|
101
|
-
--n-
|
|
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
|
-
|
|
112
|
-
--n-shadow-
|
|
113
|
-
--n-shadow-
|
|
114
|
-
--n-shadow-
|
|
115
|
-
--n-shadow-
|
|
116
|
-
|
|
117
|
-
--n-
|
|
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-
|
|
143
|
-
--n-color-
|
|
144
|
-
--n-color-
|
|
145
|
-
--n-color-
|
|
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-
|
|
153
|
-
--n-color-
|
|
93
|
+
--n-color-bg: #f8fafc;
|
|
94
|
+
--n-color-bg-alt: #ffffff;
|
|
154
95
|
|
|
155
|
-
--n-color-
|
|
156
|
-
--n-color-
|
|
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-
|
|
159
|
-
--n-color-
|
|
101
|
+
--n-color-border: #d4d4d8;
|
|
102
|
+
--n-color-border-hover: #a1a1aa;
|
|
103
|
+
--n-color-border-active: #71717a;
|
|
160
104
|
|
|
161
|
-
--n-color-
|
|
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-
|
|
167
|
-
--n-
|
|
168
|
-
|
|
169
|
-
--n-
|
|
170
|
-
--n-
|
|
171
|
-
--n-
|
|
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.
|
|
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.
|
|
26
|
-
"nexa-mobile": "0.11.
|
|
25
|
+
"nexa-framework": "^0.11.9",
|
|
26
|
+
"nexa-mobile": "^0.11.9"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"
|
|
30
|
-
"
|
|
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;
|
|
60
|
-
to { opacity: 1;
|
|
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;
|
|
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>
|