@spartan-ng/cli 0.0.1-alpha.718 → 0.0.1-alpha.719

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 (36) hide show
  1. package/package.json +1 -1
  2. package/src/generators/base/generator.js +30 -0
  3. package/src/generators/base/generator.js.map +1 -1
  4. package/src/generators/base/lib/build-dependency-array.js +13 -0
  5. package/src/generators/base/lib/build-dependency-array.js.map +1 -1
  6. package/src/generators/base/versions.d.ts +1 -1
  7. package/src/generators/base/versions.js +1 -1
  8. package/src/generators/migrate-naming-convention/__snapshots__/generator.spec.ts.snap +1 -1
  9. package/src/generators/ui/libs/avatar/files/lib/hlm-avatar-badge.ts.template +2 -2
  10. package/src/generators/ui/libs/breadcrumb/files/lib/hlm-breadcrumb-ellipsis.ts.template +9 -4
  11. package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-next.ts.template +3 -4
  12. package/src/generators/ui/libs/carousel/files/lib/hlm-carousel-previous.ts.template +3 -4
  13. package/src/generators/ui/libs/checkbox/files/lib/hlm-checkbox.ts.template +3 -4
  14. package/src/generators/ui/libs/dialog/files/lib/hlm-dialog-content.ts.template +4 -4
  15. package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-item-sub-indicator.ts.template +1 -1
  16. package/src/generators/ui/libs/input-otp/files/lib/hlm-input-otp-separator.ts.template +2 -3
  17. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-content.ts.template +4 -4
  18. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-button.ts.template +1 -1
  19. package/src/generators/ui/libs/spinner/files/lib/hlm-spinner.ts.template +1 -1
  20. package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-paginated-list.ts.template +7 -8
  21. package/src/generators/ui/primitive-deps.js +19 -20
  22. package/src/generators/ui/primitive-deps.js.map +1 -1
  23. package/src/generators/ui/primitives.d.ts +1 -1
  24. package/src/generators/ui/style-luma.css +43 -43
  25. package/src/generators/ui/style-lyra.css +44 -44
  26. package/src/generators/ui/style-maia.css +43 -43
  27. package/src/generators/ui/style-mira.css +48 -48
  28. package/src/generators/ui/style-nova.css +45 -45
  29. package/src/generators/ui/style-vega.css +43 -43
  30. package/src/generators/ui/supported-ui-libraries.json +41 -49
  31. package/src/generators/ui/libs/icon/files/index.ts.template +0 -7
  32. package/src/generators/ui/libs/icon/files/lib/hlm-icon.token.ts.template +0 -20
  33. package/src/generators/ui/libs/icon/files/lib/hlm-icon.ts.template +0 -35
  34. package/src/generators/ui/libs/icon/generator.d.ts +0 -3
  35. package/src/generators/ui/libs/icon/generator.js +0 -9
  36. package/src/generators/ui/libs/icon/generator.js.map +0 -1
package/src/generators/ui/style-lyra.css CHANGED
@@ -12,7 +12,7 @@
12
12
  }
13
13
 
14
14
  .spartan-accordion-trigger {
15
- @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-none py-2.5 text-start text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[calc(var(--spacing)*4)];
15
+ @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground! rounded-none py-2.5 text-start text-xs font-medium hover:underline focus-visible:ring-1 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:text-[length:--spacing(4)];
16
16
  }
17
17
 
18
18
  .spartan-accordion-content {
@@ -25,7 +25,7 @@
25
25
 
26
26
  /* MARK: Alert */
27
27
  .spartan-alert {
28
- @apply grid gap-0.5 rounded-none border px-2.5 py-2 text-start text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0 *:[ng-icon]:text-current *:[ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
28
+ @apply grid gap-0.5 rounded-none border px-2.5 py-2 text-start text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>ng-icon]:grid-cols-[auto_1fr] has-[>ng-icon]:gap-x-2 *:[ng-icon]:row-span-2 *:[ng-icon]:translate-y-0 *:[ng-icon]:text-current *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
29
29
  }
30
30
 
31
31
  .spartan-alert-variant-default {
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  .spartan-alert-dialog-media {
65
- @apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*6)];
65
+ @apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[ng-icon:not([class*='text-'])]:text-[length:--spacing(6)];
66
66
  }
67
67
 
68
68
  .spartan-alert-dialog-title {
@@ -87,7 +87,7 @@
87
87
  }
88
88
 
89
89
  .spartan-autocomplete-item-indicator {
90
- @apply absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)];
90
+ @apply absolute end-2 flex items-center justify-center text-[length:--spacing(4)];
91
91
  }
92
92
 
93
93
  .spartan-autocomplete-empty {
@@ -124,12 +124,12 @@
124
124
  }
125
125
 
126
126
  .spartan-avatar-group-count {
127
- @apply bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>ng-icon]:text-[calc(var(--spacing)*4)] group-has-data-[size=lg]/avatar-group:[&>ng-icon]:text-[calc(var(--spacing)*5)] group-has-data-[size=sm]/avatar-group:[&>ng-icon]:text-[calc(var(--spacing)*3)];
127
+ @apply bg-muted text-muted-foreground size-8 rounded-full text-xs group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>ng-icon]:text-[length:--spacing(4)] group-has-data-[size=lg]/avatar-group:[&>ng-icon]:text-[length:--spacing(5)] group-has-data-[size=sm]/avatar-group:[&>ng-icon]:text-[length:--spacing(3)];
128
128
  }
129
129
 
130
130
  /* MARK: Badge */
131
131
  .spartan-badge {
132
- @apply h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>ng-icon]:text-[calc(var(--spacing)*3)];
132
+ @apply h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>ng-icon]:text-[length:--spacing(3)];
133
133
  }
134
134
 
135
135
  .spartan-badge-variant-default {
@@ -174,16 +174,16 @@
174
174
  }
175
175
 
176
176
  .spartan-breadcrumb-separator {
177
- @apply [&>ng-icon]:text-[calc(var(--spacing)*3.5)];
177
+ @apply [&>ng-icon]:text-[length:--spacing(3.5)];
178
178
  }
179
179
 
180
180
  .spartan-breadcrumb-ellipsis {
181
- @apply size-5 [&>ng-icon]:text-[calc(var(--spacing)*4)];
181
+ @apply size-5 [&>ng-icon]:text-[length:--spacing(4)];
182
182
  }
183
183
 
184
184
  /* MARK: Button */
185
185
  .spartan-button {
186
- @apply focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
186
+ @apply focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 active:not-aria-[haspopup]:translate-y-px data-[matches-spartan-invalid=true]:ring-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
187
187
  }
188
188
 
189
189
  .spartan-button-variant-default {
@@ -211,11 +211,11 @@
211
211
  }
212
212
 
213
213
  .spartan-button-size-xs {
214
- @apply h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)];
214
+ @apply h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)];
215
215
  }
216
216
 
217
217
  .spartan-button-size-sm {
218
- @apply h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
218
+ @apply h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)];
219
219
  }
220
220
 
221
221
  .spartan-button-size-default {
@@ -227,7 +227,7 @@
227
227
  }
228
228
 
229
229
  .spartan-button-size-icon-xs {
230
- @apply size-6 rounded-none [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)];
230
+ @apply size-6 rounded-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)];
231
231
  }
232
232
 
233
233
  .spartan-button-size-icon-sm {
@@ -248,7 +248,7 @@
248
248
  }
249
249
 
250
250
  .spartan-button-group-text {
251
- @apply bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
251
+ @apply bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
252
252
  }
253
253
 
254
254
  .spartan-button-group-separator {
@@ -300,7 +300,7 @@
300
300
  }
301
301
 
302
302
  .spartan-checkbox-indicator {
303
- @apply [&>ng-icon]:text-[calc(var(--spacing)*3.5)];
303
+ @apply [&>ng-icon]:text-[length:--spacing(3.5)];
304
304
  }
305
305
 
306
306
  /* MARK: Combobox */
@@ -317,7 +317,7 @@
317
317
  }
318
318
 
319
319
  .spartan-combobox-item-indicator {
320
- @apply pointer-events-none absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)];
320
+ @apply pointer-events-none absolute end-2 flex items-center justify-center text-[length:--spacing(4)];
321
321
  }
322
322
 
323
323
  .spartan-combobox-empty {
@@ -337,7 +337,7 @@
337
337
  }
338
338
 
339
339
  .spartan-combobox-trigger-icon {
340
- @apply text-muted-foreground text-[calc(var(--spacing)*4)];
340
+ @apply text-muted-foreground text-[length:--spacing(4)];
341
341
  }
342
342
 
343
343
  .spartan-combobox-chips {
@@ -357,7 +357,7 @@
357
357
  }
358
358
 
359
359
  .spartan-combobox-placeholder {
360
- @apply gap-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
360
+ @apply gap-2 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
361
361
  }
362
362
 
363
363
  .spartan-combobox-status {
@@ -378,7 +378,7 @@
378
378
  }
379
379
 
380
380
  .spartan-command-input-icon {
381
- @apply shrink-0 text-[calc(var(--spacing)*4)] opacity-50;
381
+ @apply shrink-0 text-[length:--spacing(4)] opacity-50;
382
382
  }
383
383
 
384
384
  .spartan-command-input {
@@ -402,7 +402,7 @@
402
402
  }
403
403
 
404
404
  .spartan-command-item {
405
- @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[&>ng-icon]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
405
+ @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[&>ng-icon]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
406
406
  }
407
407
 
408
408
  .spartan-command-shortcut {
@@ -478,19 +478,19 @@
478
478
  }
479
479
 
480
480
  .spartan-dropdown-menu-item {
481
- @apply hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive not-data-[variant=destructive]:hover:**:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
481
+ @apply hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:hover:bg-destructive/10 data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:hover:bg-destructive/20 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:hover:text-destructive data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[ng-icon]:text-destructive not-data-[variant=destructive]:hover:**:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
482
482
  }
483
483
 
484
484
  .spartan-dropdown-menu-checkbox-item {
485
- @apply hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground hover:**:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 ps-2 pe-8 text-xs data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
485
+ @apply hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground hover:**:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 ps-2 pe-8 text-xs data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
486
486
  }
487
487
 
488
488
  .spartan-dropdown-menu-radio-item {
489
- @apply hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground hover:**:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 ps-2 pe-8 text-xs data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
489
+ @apply hover:bg-accent focus:bg-accent hover:text-accent-foreground focus:text-accent-foreground hover:**:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 ps-2 pe-8 text-xs data-inset:ps-7 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
490
490
  }
491
491
 
492
492
  .spartan-dropdown-menu-item-indicator {
493
- @apply absolute end-2 flex items-center justify-center [&_ng-icon]:text-[calc(var(--spacing)*4)];
493
+ @apply absolute end-2 flex items-center justify-center [&_ng-icon]:text-[length:--spacing(4)];
494
494
  }
495
495
 
496
496
  .spartan-dropdown-menu-label {
@@ -527,7 +527,7 @@
527
527
  }
528
528
 
529
529
  .spartan-empty-media-icon {
530
- @apply bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-none [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
530
+ @apply bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
531
531
  }
532
532
 
533
533
  .spartan-empty-title {
@@ -615,7 +615,7 @@
615
615
  }
616
616
 
617
617
  .spartan-input-otp-separator {
618
- @apply [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
618
+ @apply [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
619
619
  }
620
620
 
621
621
  /* MARK: Item */
@@ -656,7 +656,7 @@
656
656
  }
657
657
 
658
658
  .spartan-item-media-variant-icon {
659
- @apply [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
659
+ @apply [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
660
660
  }
661
661
 
662
662
  .spartan-item-media-variant-image {
@@ -697,7 +697,7 @@
697
697
 
698
698
  /* MARK: Kbd */
699
699
  .spartan-kbd {
700
- @apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)];
700
+ @apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(3)];
701
701
  }
702
702
 
703
703
  .spartan-kbd-group {
@@ -732,7 +732,7 @@
732
732
  }
733
733
 
734
734
  .spartan-navigation-menu-link {
735
- @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
735
+ @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
736
736
  }
737
737
 
738
738
  .spartan-navigation-menu-trigger-icon {
@@ -749,7 +749,7 @@
749
749
  }
750
750
 
751
751
  .spartan-native-select-icon {
752
- @apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
752
+ @apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[length:--spacing(4)];
753
753
  }
754
754
 
755
755
  /* MARK: Pagination */
@@ -758,7 +758,7 @@
758
758
  }
759
759
 
760
760
  .spartan-pagination-ellipsis {
761
- @apply size-8 items-center justify-center [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
761
+ @apply size-8 items-center justify-center [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
762
762
  }
763
763
 
764
764
  .spartan-pagination-previous {
@@ -840,7 +840,7 @@
840
840
  }
841
841
 
842
842
  .spartan-select-trigger-icon {
843
- @apply text-muted-foreground text-[calc(var(--spacing)*4)];
843
+ @apply text-muted-foreground text-[length:--spacing(4)];
844
844
  }
845
845
 
846
846
  .spartan-select-content {
@@ -856,7 +856,7 @@
856
856
  }
857
857
 
858
858
  .spartan-select-item-indicator {
859
- @apply absolute end-2 flex items-center justify-center text-[calc(var(--spacing)*4)];
859
+ @apply absolute end-2 flex items-center justify-center text-[length:--spacing(4)];
860
860
  }
861
861
 
862
862
  .spartan-select-group {
@@ -868,15 +868,15 @@
868
868
  }
869
869
 
870
870
  .spartan-select-scroll-up-button {
871
- @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
871
+ @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
872
872
  }
873
873
 
874
874
  .spartan-select-scroll-down-button {
875
- @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
875
+ @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
876
876
  }
877
877
 
878
878
  .spartan-select-placeholder {
879
- @apply gap-2 [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
879
+ @apply gap-2 [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
880
880
  }
881
881
 
882
882
  .spartan-select-values-content {
@@ -975,11 +975,11 @@
975
975
  }
976
976
 
977
977
  .spartan-sidebar-group-label {
978
- @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
978
+ @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>ng-icon]:text-[length:--spacing(4)];
979
979
  }
980
980
 
981
981
  .spartan-sidebar-group-action {
982
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-none p-0 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
982
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 w-5 rounded-none p-0 focus-visible:ring-2 [&>ng-icon]:text-[length:--spacing(4)];
983
983
  }
984
984
 
985
985
  .spartan-sidebar-menu-button {
@@ -1007,7 +1007,7 @@
1007
1007
  }
1008
1008
 
1009
1009
  .spartan-sidebar-menu-action {
1010
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>ng-icon]:text-[calc(var(--spacing)*4)];
1010
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>ng-icon]:text-[length:--spacing(4)];
1011
1011
  }
1012
1012
 
1013
1013
  .spartan-sidebar-menu-badge {
@@ -1031,7 +1031,7 @@
1031
1031
  }
1032
1032
 
1033
1033
  .spartan-sidebar-menu-sub-button {
1034
- @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>ng-icon]:text-[calc(var(--spacing)*4)];
1034
+ @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>ng-icon]:text-[length:--spacing(4)];
1035
1035
  }
1036
1036
 
1037
1037
  /* MARK: Skeleton */
@@ -1121,7 +1121,7 @@
1121
1121
  }
1122
1122
 
1123
1123
  .spartan-tabs-trigger {
1124
- @apply gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
1124
+ @apply gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
1125
1125
  }
1126
1126
 
1127
1127
  .spartan-tabs-content {
@@ -1135,7 +1135,7 @@
1135
1135
 
1136
1136
  /* MARK: Toggle */
1137
1137
  .spartan-toggle {
1138
- @apply hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive data-[state=on]:bg-muted gap-1 rounded-none text-xs font-medium transition-all [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
1138
+ @apply hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive data-[state=on]:bg-muted gap-1 rounded-none text-xs font-medium transition-all [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
1139
1139
  }
1140
1140
 
1141
1141
  .spartan-toggle-variant-default {
@@ -1178,7 +1178,7 @@
1178
1178
  }
1179
1179
 
1180
1180
  .spartan-input-group-addon {
1181
- @apply text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
1181
+ @apply text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
1182
1182
  }
1183
1183
 
1184
1184
  .spartan-input-group-addon-align-inline-start {
@@ -1202,7 +1202,7 @@
1202
1202
  }
1203
1203
 
1204
1204
  .spartan-input-group-button-size-xs {
1205
- @apply h-6 gap-1 rounded-none px-1.5 [&>ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
1205
+ @apply h-6 gap-1 rounded-none px-1.5 [&>ng-icon:not([class*='text-'])]:text-[length:--spacing(3.5)];
1206
1206
  }
1207
1207
 
1208
1208
  .spartan-input-group-button-size-icon-xs {
@@ -1218,7 +1218,7 @@
1218
1218
  }
1219
1219
 
1220
1220
  .spartan-input-group-text {
1221
- @apply text-muted-foreground gap-2 text-xs [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
1221
+ @apply text-muted-foreground gap-2 text-xs [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)];
1222
1222
  }
1223
1223
 
1224
1224
  .spartan-input-group-input {