@nubitio/admin 0.6.3 → 0.6.8

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 (2) hide show
  1. package/dist/style.css +108 -63
  2. package/package.json +7 -7
package/dist/style.css CHANGED
@@ -139,21 +139,21 @@ html[data-density=comfortable] {
139
139
  .nb-feature-hub__header {
140
140
  display: flex;
141
141
  flex-direction: column;
142
- gap: 0.35rem;
143
- padding: 1.5rem 1.5rem 0;
142
+ gap: var(--space-1);
143
+ padding: var(--page-padding) var(--page-padding) 0;
144
144
  }
145
145
 
146
146
  .nb-feature-hub__title {
147
147
  margin: 0;
148
- font-size: 1.5rem;
149
- font-weight: 700;
148
+ font-size: var(--font-size-2xl);
149
+ font-weight: var(--font-weight-bold);
150
150
  letter-spacing: -0.02em;
151
151
  color: var(--text-primary);
152
152
  }
153
153
 
154
154
  .nb-feature-hub__subtitle {
155
155
  margin: 0;
156
- font-size: 0.875rem;
156
+ font-size: var(--font-size-md);
157
157
  color: var(--text-secondary);
158
158
  max-width: 36rem;
159
159
  }
@@ -161,30 +161,31 @@ html[data-density=comfortable] {
161
161
  .nb-feature-hub__tabs {
162
162
  display: flex;
163
163
  flex-wrap: wrap;
164
- gap: 0.25rem;
165
- margin: 1.25rem 1.5rem 0;
166
- padding: 0.25rem;
164
+ gap: var(--space-1);
165
+ margin-top: var(--space-5);
166
+ padding: var(--space-1);
167
167
  background: var(--surface-1);
168
168
  border: 1px solid var(--border-subtle, var(--border-color));
169
- border-radius: 10px;
169
+ border-radius: var(--radius-xl);
170
170
  box-shadow: var(--shadow-sm);
171
171
  }
172
172
 
173
173
  .nb-feature-hub__tab {
174
174
  display: inline-flex;
175
175
  align-items: center;
176
- gap: 0.45rem;
177
- padding: 0.55rem 0.9rem;
178
- font-size: 0.8125rem;
179
- font-weight: 600;
176
+ gap: var(--space-2);
177
+ min-height: var(--control-height);
178
+ padding: 0 var(--space-3);
179
+ font-size: var(--font-size-sm);
180
+ font-weight: var(--font-weight-semibold);
180
181
  color: var(--text-secondary);
181
182
  text-decoration: none;
182
183
  border: 1px solid transparent;
183
- border-radius: 7px;
184
- transition: color 0.15s, background 0.15s, border-color 0.15s;
184
+ border-radius: var(--radius-lg);
185
+ transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
185
186
  }
186
187
  .nb-feature-hub__tab .ph {
187
- font-size: 1rem;
188
+ font-size: var(--control-icon-size);
188
189
  opacity: 0.75;
189
190
  }
190
191
  .nb-feature-hub__tab:hover {
@@ -193,7 +194,7 @@ html[data-density=comfortable] {
193
194
  }
194
195
  .nb-feature-hub__tab--active {
195
196
  color: var(--accent-color);
196
- background: var(--accent-subtle, color-mix(in srgb, var(--accent-color) 10%, #fff));
197
+ background: var(--accent-subtle);
197
198
  border-color: color-mix(in srgb, var(--accent-color) 22%, transparent);
198
199
  box-shadow: var(--shadow-sm);
199
200
  }
@@ -201,67 +202,64 @@ html[data-density=comfortable] {
201
202
  opacity: 1;
202
203
  }
203
204
 
204
- .nb-feature-hub--compact .nb-feature-hub__header {
205
- padding: 0.65rem 1rem 0;
205
+ .nb-feature-hub__tabs--underline {
206
+ margin-top: var(--space-4);
207
+ padding: 0;
208
+ gap: 0;
209
+ background: transparent;
210
+ border: none;
211
+ border-bottom: 1px solid var(--border-subtle, var(--border-color));
212
+ border-radius: 0;
213
+ box-shadow: none;
206
214
  }
207
- .nb-feature-hub--compact .nb-feature-hub__tabs-card {
208
- align-items: center;
209
- background: var(--surface-1);
210
- border: 1px solid var(--border-subtle, var(--border-color));
211
- border-radius: 10px;
212
- box-shadow: var(--shadow-sm);
213
- display: flex;
214
- flex: 1 1 auto;
215
- flex-wrap: wrap;
216
- gap: 0.5rem 1rem;
217
- justify-content: space-between;
218
- min-width: 0;
219
- padding: 0.35rem 0.45rem 0.35rem 0.85rem;
220
- width: 100%;
215
+ .nb-feature-hub__tabs--underline .nb-feature-hub__tab {
216
+ position: relative;
217
+ min-height: calc(var(--control-height) + var(--space-2));
218
+ padding: var(--space-2) var(--space-3);
219
+ margin-bottom: -1px;
220
+ font-weight: var(--font-weight-medium, 500);
221
+ border: none;
222
+ border-radius: 0;
223
+ background: transparent;
221
224
  }
222
- .nb-feature-hub--compact .nb-feature-hub__title {
223
- font-size: 1.125rem;
224
- line-height: 1.2;
225
- margin: 0;
225
+ .nb-feature-hub__tabs--underline .nb-feature-hub__tab:hover:not(.nb-feature-hub__tab--active) {
226
+ color: var(--text-primary);
227
+ background: color-mix(in srgb, var(--accent-color) 8%, transparent);
226
228
  }
227
- .nb-feature-hub--compact .nb-feature-hub__tabs {
228
- flex: 1 1 auto;
229
- justify-content: flex-end;
230
- margin: 0;
231
- padding: 0.15rem;
232
- border: none;
233
- border-radius: 8px;
229
+ .nb-feature-hub__tabs--underline .nb-feature-hub__tab--active {
230
+ color: var(--accent-color);
234
231
  background: transparent;
232
+ border: none;
235
233
  box-shadow: none;
236
- min-width: min(100%, 520px);
237
- }
238
- .nb-feature-hub--compact .nb-feature-hub__tab {
239
- padding: 0.38rem 0.7rem;
240
- font-size: 0.75rem;
241
234
  }
242
- .nb-feature-hub--compact .nb-feature-hub__tab .ph {
243
- font-size: 0.9rem;
235
+ .nb-feature-hub__tabs--underline .nb-feature-hub__tab--active::after {
236
+ content: "";
237
+ position: absolute;
238
+ right: var(--space-3);
239
+ bottom: 0;
240
+ left: var(--space-3);
241
+ height: 2px;
242
+ border-radius: 2px 2px 0 0;
243
+ background: var(--accent-color);
244
244
  }
245
- .nb-feature-hub--compact .nb-feature-hub__banner {
246
- margin: 0.5rem 1rem 0;
247
- padding: 0.45rem 0.65rem;
248
- font-size: 0.75rem;
245
+ .nb-feature-hub__tabs--underline .nb-feature-hub__tab--active .ph {
246
+ opacity: 1;
249
247
  }
250
248
 
251
249
  .nb-feature-hub__banner {
252
250
  display: flex;
253
251
  align-items: flex-start;
254
- gap: 0.6rem;
255
- margin: 0.85rem 1.5rem 0;
256
- padding: 0.7rem 0.9rem;
257
- font-size: 0.8125rem;
252
+ gap: var(--space-3);
253
+ margin: var(--space-4) var(--page-padding) 0;
254
+ padding: var(--space-3) var(--space-4);
255
+ font-size: var(--font-size-sm);
258
256
  line-height: 1.45;
259
- border-radius: 8px;
257
+ border-radius: var(--radius-lg);
260
258
  }
261
259
  .nb-feature-hub__banner .ph {
262
260
  flex-shrink: 0;
263
261
  margin-top: 0.1rem;
264
- font-size: 1rem;
262
+ font-size: var(--control-icon-size);
265
263
  }
266
264
  .nb-feature-hub__banner--info {
267
265
  color: var(--status-info-text, #0369a1);
@@ -280,10 +278,57 @@ html[data-density=comfortable] {
280
278
  overflow: auto;
281
279
  display: flex;
282
280
  flex-direction: column;
281
+ padding-top: var(--content-padding);
283
282
  }
284
283
 
285
- .nb-feature-hub--compact .nb-feature-hub__content {
286
- padding-top: 0.35rem;
284
+ .nb-feature-hub--compact .nb-feature-hub__header {
285
+ padding: var(--space-2) var(--page-padding) 0;
286
+ }
287
+ .nb-feature-hub--compact .nb-feature-hub__tabs-card {
288
+ align-items: center;
289
+ background: var(--surface-1);
290
+ border: 1px solid var(--border-subtle, var(--border-color));
291
+ border-radius: var(--radius-xl);
292
+ box-shadow: var(--shadow-sm);
293
+ display: flex;
294
+ flex: 1 1 auto;
295
+ flex-wrap: wrap;
296
+ gap: var(--space-2) var(--space-5);
297
+ justify-content: space-between;
298
+ min-width: 0;
299
+ padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
300
+ width: 100%;
301
+ }
302
+ .nb-feature-hub--compact .nb-feature-hub__title {
303
+ font-size: var(--font-size-xl);
304
+ line-height: 1.2;
305
+ margin: 0;
306
+ }
307
+ .nb-feature-hub--compact .nb-feature-hub__tabs {
308
+ flex: 1 1 auto;
309
+ justify-content: flex-end;
310
+ margin: 0;
311
+ padding: var(--space-1);
312
+ border: none;
313
+ border-radius: var(--radius-lg);
314
+ background: transparent;
315
+ box-shadow: none;
316
+ min-width: min(100%, 520px);
317
+ }
318
+ .nb-feature-hub--compact .nb-feature-hub__tabs.nb-feature-hub__tabs--underline {
319
+ padding: 0;
320
+ border-bottom: 1px solid var(--border-subtle, var(--border-color));
321
+ }
322
+ .nb-feature-hub--compact .nb-feature-hub__tab {
323
+ font-size: var(--font-size-xs);
324
+ }
325
+ .nb-feature-hub--compact .nb-feature-hub__tab .ph {
326
+ font-size: var(--font-size-sm);
327
+ }
328
+ .nb-feature-hub--compact .nb-feature-hub__banner {
329
+ margin: var(--space-2) var(--page-padding) 0;
330
+ padding: var(--space-2) var(--space-3);
331
+ font-size: var(--font-size-xs);
287
332
  }
288
333
  .nb-admin-shell {
289
334
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nubitio/admin",
3
- "version": "0.6.3",
3
+ "version": "0.6.8",
4
4
  "type": "module",
5
5
  "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
6
6
  "license": "MIT",
@@ -50,12 +50,12 @@
50
50
  },
51
51
  "peerDependencies": {
52
52
  "@tanstack/react-query": "^5.0.0",
53
- "react": "^19.0.0",
54
- "react-dom": "^19.0.0",
53
+ "react": "^18.2.0 || ^19.0.0",
54
+ "react-dom": "^18.2.0 || ^19.0.0",
55
55
  "react-router-dom": "^6.0.0",
56
- "@nubitio/core": "^0.6.3",
57
- "@nubitio/crud": "^0.6.3",
58
- "@nubitio/ui": "^0.6.3",
59
- "@nubitio/hydra": "^0.6.3"
56
+ "@nubitio/crud": "^0.6.8",
57
+ "@nubitio/core": "^0.6.8",
58
+ "@nubitio/hydra": "^0.6.8",
59
+ "@nubitio/ui": "^0.6.8"
60
60
  }
61
61
  }