@spartan-ng/cli 0.0.1-alpha.711 → 0.0.1-alpha.713

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 (49) hide show
  1. package/package.json +1 -1
  2. package/src/generators/migrate-brain-imports/generator.js +6 -7
  3. package/src/generators/migrate-brain-imports/generator.js.map +1 -1
  4. package/src/generators/migrate-helm-imports/generator.js +1 -2
  5. package/src/generators/migrate-helm-imports/generator.js.map +1 -1
  6. package/src/generators/migrate-helm-libraries/generator.js +7 -2
  7. package/src/generators/migrate-helm-libraries/generator.js.map +1 -1
  8. package/src/generators/migrate-module-imports/generator.js +2 -3
  9. package/src/generators/migrate-module-imports/generator.js.map +1 -1
  10. package/src/generators/migrate-naming-convention/__snapshots__/generator.spec.ts.snap +4 -4
  11. package/src/generators/theme/__snapshots__/generator.spec.ts.snap +6 -6
  12. package/src/generators/ui/generator.js +1 -0
  13. package/src/generators/ui/generator.js.map +1 -1
  14. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-close.ts.template +1 -3
  15. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-content.ts.template +11 -23
  16. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-description.ts.template +2 -4
  17. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-footer.ts.template +2 -4
  18. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-header.ts.template +2 -4
  19. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-overlay.ts.template +1 -4
  20. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-title.ts.template +2 -4
  21. package/src/generators/ui/libs/sheet/files/lib/hlm-sheet-trigger.ts.template +1 -3
  22. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-content.ts.template +4 -1
  23. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-footer.ts.template +1 -1
  24. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-action.ts.template +4 -6
  25. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-content.ts.template +1 -1
  26. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group-label.ts.template +1 -4
  27. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-group.ts.template +1 -1
  28. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-header.ts.template +1 -1
  29. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-inset.ts.template +2 -7
  30. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-action.ts.template +2 -8
  31. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-badge.ts.template +4 -8
  32. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-button.ts.template +6 -7
  33. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-skeleton.ts.template +7 -4
  34. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-sub-button.ts.template +5 -6
  35. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu-sub.ts.template +1 -4
  36. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-menu.ts.template +1 -1
  37. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-rail.ts.template +2 -2
  38. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-trigger.ts.template +8 -15
  39. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar-wrapper.ts.template +1 -1
  40. package/src/generators/ui/libs/sidebar/files/lib/hlm-sidebar.ts.template +11 -18
  41. package/src/generators/ui/libs/slider/files/lib/hlm-slider.ts.template +1 -1
  42. package/src/generators/ui/libs/tooltip/files/lib/hlm-tooltip.ts.template +3 -2
  43. package/src/generators/ui/style-luma.css +12 -3
  44. package/src/generators/ui/style-lyra.css +13 -4
  45. package/src/generators/ui/style-maia.css +14 -5
  46. package/src/generators/ui/style-mira.css +13 -6
  47. package/src/generators/ui/style-nova.css +13 -4
  48. package/src/generators/ui/style-vega.css +14 -5
  49. package/src/generators/ui/supported-ui-libraries.json +40 -41
@@ -12,18 +12,17 @@ import { HlmSidebarService } from './hlm-sidebar.service';
12
12
  import { injectHlmSidebarConfig } from './hlm-sidebar.token';
13
13
 
14
14
  const sidebarMenuButtonVariants = cva(
15
- 'peer/menu-button ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground flex w-full items-center justify-start gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] outline-none group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 group-data-[collapsible=icon]:[&>span]:hidden [&>span:last-child]:truncate',
15
+ 'spartan-sidebar-menu-button peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_ng-icon]:shrink-0 [&_ng-icon]:text-[calc(var(--spacing)*4)] [&>span:last-child]:truncate',
16
16
  {
17
17
  variants: {
18
18
  variant: {
19
- default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
20
- outline:
21
- 'bg-background shadow-sidebar-border hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-sidebar-accent',
19
+ default: 'spartan-sidebar-menu-button-variant-default',
20
+ outline: 'spartan-sidebar-menu-button-variant-outline',
22
21
  },
23
22
  size: {
24
- default: 'h-8 text-sm',
25
- sm: 'h-7 text-xs',
26
- lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
23
+ default: 'spartan-sidebar-menu-button-size-default',
24
+ sm: 'spartan-sidebar-menu-button-size-sm',
25
+ lg: 'spartan-sidebar-menu-button-size-lg',
27
26
  },
28
27
  },
29
28
  defaultVariants: {
@@ -10,13 +10,16 @@ import { classes } from '<%- importAlias %>/utils';
10
10
  host: {
11
11
  'data-slot': 'sidebar-menu-skeleton',
12
12
  'data-sidebar': 'menu-skeleton',
13
- '[style.--skeleton-width]': '_width',
14
13
  },
15
14
  template: `
16
15
  @if (showIcon()) {
17
- <hlm-skeleton data-sidebar="menu-skeleton-icon" class="size-4 rounded-md" />
16
+ <hlm-skeleton data-sidebar="menu-skeleton-icon" class="spartan-sidebar-menu-skeleton-icon" />
18
17
  } @else {
19
- <hlm-skeleton data-sidebar="menu-skeleton-text" class="h-4 max-w-[var(--skeleton-width)] flex-1" />
18
+ <hlm-skeleton
19
+ data-sidebar="menu-skeleton-text"
20
+ class="spartan-sidebar-menu-skeleton-text max-w-(--skeleton-width) flex-1"
21
+ [style.--skeleton-width]="_width"
22
+ />
20
23
  }
21
24
  `,
22
25
  })
@@ -25,6 +28,6 @@ export class HlmSidebarMenuSkeleton {
25
28
  protected readonly _width = `${Math.floor(Math.random() * 40) + 50}%`;
26
29
 
27
30
  constructor() {
28
- classes(() => 'flex h-8 items-center gap-2 rounded-md px-2');
31
+ classes(() => 'spartan-sidebar-menu-skeleton flex items-center');
29
32
  }
30
33
  }
@@ -25,13 +25,12 @@ export class HlmSidebarMenuSubButton {
25
25
 
26
26
  public readonly size = input<'sm' | 'md'>('md');
27
27
  public readonly isActive = input<boolean, BooleanInput>(false, { transform: booleanAttribute });
28
+
28
29
  constructor() {
29
- classes(() => [
30
- `text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>_ng-icon:not([class*='text-'])]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none hover:cursor-pointer focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 disabled:hover:cursor-default aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>_ng-icon]:size-4 [&>_ng-icon]:shrink-0 [&>span:last-child]:truncate`,
31
- 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
32
- 'data-[size=md]:text-sm data-[size=sm]:text-xs',
33
- 'group-data-[collapsible=icon]:hidden',
34
- ]);
30
+ classes(
31
+ () =>
32
+ 'spartan-sidebar-menu-sub-button flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>ng-icon]:shrink-0 [&>span:last-child]:truncate',
33
+ );
35
34
  }
36
35
 
37
36
  protected onClick(): void {
@@ -10,9 +10,6 @@ import { classes } from '<%- importAlias %>/utils';
10
10
  })
11
11
  export class HlmSidebarMenuSub {
12
12
  constructor() {
13
- classes(() => [
14
- 'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
15
- 'group-data-[collapsible=icon]:hidden',
16
- ]);
13
+ classes(() => 'spartan-sidebar-menu-sub flex min-w-0 flex-col');
17
14
  }
18
15
  }
@@ -10,6 +10,6 @@ import { classes } from '<%- importAlias %>/utils';
10
10
  })
11
11
  export class HlmSidebarMenu {
12
12
  constructor() {
13
- classes(() => 'flex w-full min-w-0 flex-col gap-1');
13
+ classes(() => 'spartan-sidebar-menu flex w-full min-w-0 flex-col');
14
14
  }
15
15
  }
@@ -19,8 +19,8 @@ export class HlmSidebarRail {
19
19
 
20
20
  constructor() {
21
21
  classes(() => [
22
- 'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
23
- 'group-data-[side=left]:cursor-w-resize group-data-[side=right]:cursor-e-resize',
22
+ 'spartan-sidebar-rail absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
23
+ 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
24
24
  '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
25
25
  'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
26
26
  '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
@@ -1,37 +1,30 @@
1
- import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
2
- import { provideIcons } from '@ng-icons/core';
1
+ import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
2
+ import { NgIcon, provideIcons } from '@ng-icons/core';
3
3
  import { lucidePanelLeft } from '@ng-icons/lucide';
4
4
  import { HlmButton, provideBrnButtonConfig } from '<%- importAlias %>/button';
5
- import { HlmIconImports } from '<%- importAlias %>/icon';
6
5
  import { HlmSidebarService } from './hlm-sidebar.service';
7
6
 
8
7
  @Component({
9
8
  // eslint-disable-next-line @angular-eslint/component-selector
10
9
  selector: 'button[hlmSidebarTrigger]',
11
- imports: [HlmIconImports],
12
- providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon' })],
10
+ imports: [NgIcon],
11
+ providers: [provideIcons({ lucidePanelLeft }), provideBrnButtonConfig({ variant: 'ghost', size: 'icon-sm' })],
13
12
  changeDetection: ChangeDetectionStrategy.OnPush,
14
- hostDirectives: [
15
- {
16
- directive: HlmButton,
17
- },
18
- ],
13
+ hostDirectives: [{ directive: HlmButton, inputs: ['variant', 'size'] }],
19
14
  host: {
20
15
  'data-slot': 'sidebar-trigger',
21
16
  'data-sidebar': 'trigger',
22
17
  '(click)': '_onClick()',
23
18
  },
24
19
  template: `
25
- <ng-icon hlm name="lucidePanelLeft" size="sm"></ng-icon>
20
+ <ng-icon name="lucidePanelLeft" />
21
+ <span class="sr-only">{{ srOnlyText() }}</span>
26
22
  `,
27
23
  })
28
24
  export class HlmSidebarTrigger {
29
- private readonly _hlmBtn = inject(HlmButton);
30
25
  private readonly _sidebarService = inject(HlmSidebarService);
31
26
 
32
- constructor() {
33
- this._hlmBtn.setClass('size-7');
34
- }
27
+ public readonly srOnlyText = input('Toggle Sidebar');
35
28
 
36
29
  protected _onClick(): void {
37
30
  this._sidebarService.toggleSidebar();
@@ -17,6 +17,6 @@ export class HlmSidebarWrapper {
17
17
  public readonly sidebarWidthIcon = input<string>(this._config.sidebarWidthIcon);
18
18
 
19
19
  constructor() {
20
- classes(() => 'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full');
20
+ classes(() => 'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full');
21
21
  }
22
22
  }
@@ -35,7 +35,7 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
35
35
  data-slot="sidebar"
36
36
  data-sidebar="sidebar"
37
37
  data-mobile="true"
38
- class="bg-sidebar text-sidebar-foreground h-svh w-[var(--sidebar-width)] p-0 [&>button]:hidden"
38
+ class="bg-sidebar text-sidebar-foreground h-svh w-(--sidebar-width) p-0 [&>button]:hidden"
39
39
  [style.--sidebar-width]="sidebarWidthMobile()"
40
40
  >
41
41
  <div class="flex h-full w-full flex-col">
@@ -46,12 +46,8 @@ import { injectHlmSidebarConfig } from './hlm-sidebar.token';
46
46
  } @else {
47
47
  <!-- Sidebar gap on desktop -->
48
48
  <div data-slot="sidebar-gap" [class]="_sidebarGapComputedClass()"></div>
49
- <div data-slot="sidebar-container" [class]="_sidebarContainerComputedClass()">
50
- <div
51
- data-sidebar="sidebar"
52
- data-slot="sidebar-inner"
53
- class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
54
- >
49
+ <div data-slot="sidebar-container" [attr.data-side]="_dataSide()" [class]="_sidebarContainerComputedClass()">
50
+ <div data-sidebar="sidebar" data-slot="sidebar-inner" class="spartan-sidebar-inner flex size-full flex-col">
55
51
  <ng-container *ngTemplateOutlet="contentContainer" />
56
52
  </div>
57
53
  </div>
@@ -69,25 +65,22 @@ export class HlmSidebar {
69
65
 
70
66
  protected readonly _sidebarGapComputedClass = computed(() =>
71
67
  hlm(
72
- 'relative w-[var(--sidebar-width)] bg-transparent transition-[width] duration-200 ease-linear',
68
+ 'spartan-sidebar-gap relative w-(--sidebar-width) bg-transparent',
73
69
  'group-data-[collapsible=offcanvas]:w-0',
74
70
  'group-data-[side=right]:rotate-180',
75
71
  this.variant() === 'floating' || this.variant() === 'inset'
76
- ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
77
- : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)]',
72
+ ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
73
+ : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
78
74
  ),
79
75
  );
80
76
 
81
77
  public readonly sidebarContainerClass = input<ClassValue>('');
82
78
  protected readonly _sidebarContainerComputedClass = computed(() =>
83
79
  hlm(
84
- 'fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex',
85
- this.side() === 'left'
86
- ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
87
- : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
80
+ 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
88
81
  this.variant() === 'floating' || this.variant() === 'inset'
89
- ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
90
- : 'group-data-[collapsible=icon]:w-[var(--sidebar-width-icon)] group-data-[side=left]:border-r group-data-[side=right]:border-l',
82
+ ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
83
+ : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
91
84
  this.sidebarContainerClass(),
92
85
  ),
93
86
  );
@@ -127,11 +120,11 @@ export class HlmSidebar {
127
120
 
128
121
  classes(() => {
129
122
  if (this.collapsible() === 'none') {
130
- return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-[var(--sidebar-width)] flex-col');
123
+ return hlm('bg-sidebar text-sidebar-foreground flex h-svh w-(--sidebar-width) flex-col');
131
124
  } else if (this._sidebarService.isMobile()) {
132
125
  return '';
133
126
  } else {
134
- return hlm('text-sidebar-foreground group peer hidden md:block');
127
+ return hlm('group peer text-sidebar-foreground hidden md:block');
135
128
  }
136
129
  });
137
130
  }
@@ -50,7 +50,7 @@ import { classes } from '<%- importAlias %>/utils';
50
50
 
51
51
  @if (_slider.showTicks()) {
52
52
  <div
53
- class="text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 px-1.5 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:px-0 group-data-vertical:py-1.5 group-data-vertical:group-data-inverted:flex-col"
53
+ class="spartan-slider-ticks text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col"
54
54
  >
55
55
  <div
56
56
  *brnSliderTick="let tick; let formattedTick = formattedTick"
@@ -6,8 +6,9 @@ import { cva } from 'class-variance-authority';
6
6
  export const DEFAULT_TOOLTIP_SVG_CLASS =
7
7
  'bg-foreground fill-foreground z-50 block size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]';
8
8
 
9
- export const DEFAULT_TOOLTIP_CONTENT_CLASSES =
10
- 'spartan-tooltip-content bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance';
9
+ export const DEFAULT_TOOLTIP_CONTENT_CLASSES = hlm(
10
+ 'spartan-tooltip-content bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) text-balance',
11
+ );
11
12
 
12
13
  export const tooltipPositionVariants = cva('absolute', {
13
14
  variants: {
@@ -41,6 +41,10 @@
41
41
  @apply hover:ring-ring/30 focus-visible:ring-ring/30 h-4 w-6 rounded-full bg-white shadow-md ring-1 ring-black/10 transition-[color,box-shadow,background-color] not-dark:bg-clip-padding hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden data-vertical:h-6 data-vertical:w-4;
42
42
  }
43
43
 
44
+ .spartan-slider-ticks {
45
+ @apply px-3 group-data-vertical:px-0 group-data-vertical:py-3;
46
+ }
47
+
44
48
  /* MARK: Switch */
45
49
  .spartan-switch {
46
50
  @apply data-checked:bg-primary data-unchecked:bg-input/90 data-checked:border-primary focus-visible:border-ring focus-visible:ring-ring/30 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 shrink-0 rounded-full border-2 focus-visible:ring-3 data-unchecked:border-transparent data-[matches-spartan-invalid=true]:ring-3 data-[size=default]:h-5 data-[size=default]:w-11 data-[size=sm]:h-4 data-[size=sm]:w-7;
@@ -226,6 +230,11 @@
226
230
  @apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
227
231
  }
228
232
 
233
+ .spartan-native-select [data-slot='native-select-option'],
234
+ .spartan-native-select [data-slot='native-select-optgroup'] {
235
+ @apply bg-[color:Canvas] text-[color:CanvasText];
236
+ }
237
+
229
238
  /* MARK: Combobox */
230
239
  .spartan-combobox-content {
231
240
  @apply bg-popover text-popover-foreground data-open:animate-in **:has-[[data-slot=input-group-control]:focus-visible]:border-input data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 dark:ring-foreground/10 **:data-[slot=input-group]:bg-input/50 **:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-3xl shadow-lg ring-1 duration-100 **:has-[[data-slot=input-group-control]:focus-visible]:ring-0 **:data-[slot=input-group]:m-1.5 **:data-[slot=input-group]:mb-0 **:data-[slot=input-group]:h-8 **:data-[slot=input-group]:shadow-none;
@@ -1040,7 +1049,7 @@
1040
1049
  }
1041
1050
 
1042
1051
  .spartan-sidebar-inset {
1043
- @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2;
1052
+ @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-2xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2;
1044
1053
  }
1045
1054
 
1046
1055
  .spartan-sidebar-input {
@@ -1128,7 +1137,7 @@
1128
1137
  }
1129
1138
 
1130
1139
  .spartan-sidebar-menu-sub {
1131
- @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden;
1140
+ @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px;
1132
1141
  }
1133
1142
 
1134
1143
  .spartan-sidebar-menu-sub-button {
@@ -1206,7 +1215,7 @@
1206
1215
  }
1207
1216
 
1208
1217
  .spartan-sheet-content {
1209
- @apply bg-popover text-popover-foreground fixed z-50 flex flex-col bg-clip-padding text-sm shadow-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:start-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:end-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1218
+ @apply bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-sm shadow-xl transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1210
1219
  }
1211
1220
 
1212
1221
  .spartan-sheet-close {
@@ -889,6 +889,11 @@
889
889
  @apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
890
890
  }
891
891
 
892
+ .spartan-native-select [data-slot='native-select-option'],
893
+ .spartan-native-select [data-slot='native-select-optgroup'] {
894
+ @apply bg-[color:Canvas] text-[color:CanvasText];
895
+ }
896
+
892
897
  /* MARK: Pagination */
893
898
  .spartan-pagination-content {
894
899
  @apply gap-0.5;
@@ -1039,11 +1044,11 @@
1039
1044
 
1040
1045
  /* MARK: Sheet */
1041
1046
  .spartan-sheet-overlay {
1042
- @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs;
1047
+ @apply bg-black/10 text-xs/relaxed supports-backdrop-filter:backdrop-blur-xs;
1043
1048
  }
1044
1049
 
1045
1050
  .spartan-sheet-content {
1046
- @apply bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1051
+ @apply bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1047
1052
  }
1048
1053
 
1049
1054
  .spartan-sheet-close {
@@ -1080,7 +1085,7 @@
1080
1085
  }
1081
1086
 
1082
1087
  .spartan-sidebar-inset {
1083
- @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2;
1088
+ @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2;
1084
1089
  }
1085
1090
 
1086
1091
  .spartan-sidebar-input {
@@ -1168,7 +1173,7 @@
1168
1173
  }
1169
1174
 
1170
1175
  .spartan-sidebar-menu-sub {
1171
- @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden;
1176
+ @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px;
1172
1177
  }
1173
1178
 
1174
1179
  .spartan-sidebar-menu-sub-button {
@@ -1197,6 +1202,10 @@
1197
1202
  @apply border-ring ring-ring/50 relative size-3 rounded-none border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-1 focus-visible:ring-1 focus-visible:outline-hidden active:ring-1;
1198
1203
  }
1199
1204
 
1205
+ .spartan-slider-ticks {
1206
+ @apply px-1.5 group-data-vertical:px-0 group-data-vertical:py-1.5;
1207
+ }
1208
+
1200
1209
  /* MARK: Sonner */
1201
1210
  .spartan-toast {
1202
1211
  @apply rounded-none!;
@@ -911,6 +911,11 @@
911
911
  @apply text-muted-foreground end-3.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
912
912
  }
913
913
 
914
+ .spartan-native-select [data-slot='native-select-option'],
915
+ .spartan-native-select [data-slot='native-select-optgroup'] {
916
+ @apply bg-[color:Canvas] text-[color:CanvasText];
917
+ }
918
+
914
919
  /* MARK: Pagination */
915
920
  .spartan-pagination-content {
916
921
  @apply gap-1;
@@ -1061,11 +1066,11 @@
1061
1066
 
1062
1067
  /* MARK: Sheet */
1063
1068
  .spartan-sheet-overlay {
1064
- @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs;
1069
+ @apply bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
1065
1070
  }
1066
1071
 
1067
1072
  .spartan-sheet-content {
1068
- @apply bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1073
+ @apply bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1069
1074
  }
1070
1075
 
1071
1076
  .spartan-sheet-close {
@@ -1102,7 +1107,7 @@
1102
1107
  }
1103
1108
 
1104
1109
  .spartan-sidebar-inset {
1105
- @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2;
1110
+ @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2;
1106
1111
  }
1107
1112
 
1108
1113
  .spartan-sidebar-input {
@@ -1138,7 +1143,7 @@
1138
1143
  }
1139
1144
 
1140
1145
  .spartan-sidebar-group-label {
1141
- @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium 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)];
1146
+ @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-3 text-xs font-medium 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)];
1142
1147
  }
1143
1148
 
1144
1149
  .spartan-sidebar-group-action {
@@ -1190,7 +1195,7 @@
1190
1195
  }
1191
1196
 
1192
1197
  .spartan-sidebar-menu-sub {
1193
- @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden;
1198
+ @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px;
1194
1199
  }
1195
1200
 
1196
1201
  .spartan-sidebar-menu-sub-button {
@@ -1219,6 +1224,10 @@
1219
1224
  @apply border-primary ring-ring/50 size-4 rounded-4xl border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
1220
1225
  }
1221
1226
 
1227
+ .spartan-slider-ticks {
1228
+ @apply px-2 group-data-vertical:px-0 group-data-vertical:py-2;
1229
+ }
1230
+
1222
1231
  /* MARK: Sonner */
1223
1232
  .spartan-toast {
1224
1233
  @apply rounded-2xl!;
@@ -911,6 +911,11 @@
911
911
  @apply text-muted-foreground end-1.5 top-1/2 -translate-y-1.5 text-[calc(var(--spacing)*3.5)] group-data-[size=sm]/native-select:-translate-y-1.25 group-data-[size=sm]/native-select:text-[calc(var(--spacing)*3)];
912
912
  }
913
913
 
914
+ .spartan-native-select [data-slot='native-select-option'],
915
+ .spartan-native-select [data-slot='native-select-optgroup'] {
916
+ @apply bg-[color:Canvas] text-[color:CanvasText];
917
+ }
918
+
914
919
  /* MARK: Pagination */
915
920
  .spartan-pagination-content {
916
921
  @apply gap-0.5;
@@ -1061,11 +1066,11 @@
1061
1066
 
1062
1067
  /* MARK: Sheet */
1063
1068
  .spartan-sheet-overlay {
1064
- @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs;
1069
+ @apply bg-black/80 supports-backdrop-filter:backdrop-blur-xs;
1065
1070
  }
1066
1071
 
1067
1072
  .spartan-sheet-content {
1068
- @apply bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1073
+ @apply bg-popover text-popover-foreground fixed flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1069
1074
  }
1070
1075
 
1071
1076
  .spartan-sheet-close {
@@ -1088,8 +1093,6 @@
1088
1093
  @apply text-muted-foreground text-xs/relaxed;
1089
1094
  }
1090
1095
 
1091
- /* MARK: Sidebar */
1092
-
1093
1096
  /* MARK: Sidebar */
1094
1097
  .spartan-sidebar-gap {
1095
1098
  @apply transition-[width] duration-200 ease-linear;
@@ -1104,7 +1107,7 @@
1104
1107
  }
1105
1108
 
1106
1109
  .spartan-sidebar-inset {
1107
- @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2;
1110
+ @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2;
1108
1111
  }
1109
1112
 
1110
1113
  .spartan-sidebar-input {
@@ -1192,7 +1195,7 @@
1192
1195
  }
1193
1196
 
1194
1197
  .spartan-sidebar-menu-sub {
1195
- @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden;
1198
+ @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px;
1196
1199
  }
1197
1200
 
1198
1201
  .spartan-sidebar-menu-sub-button {
@@ -1221,6 +1224,10 @@
1221
1224
  @apply border-primary ring-ring/30 size-4 rounded-md border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
1222
1225
  }
1223
1226
 
1227
+ .spartan-slider-ticks {
1228
+ @apply px-2 group-data-vertical:px-0 group-data-vertical:py-2;
1229
+ }
1230
+
1224
1231
  /* MARK: Sonner */
1225
1232
  .spartan-toast {
1226
1233
  @apply rounded-md!;
@@ -911,6 +911,11 @@
911
911
  @apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
912
912
  }
913
913
 
914
+ .spartan-native-select [data-slot='native-select-option'],
915
+ .spartan-native-select [data-slot='native-select-optgroup'] {
916
+ @apply bg-[color:Canvas] text-[color:CanvasText];
917
+ }
918
+
914
919
  /* MARK: Pagination */
915
920
  .spartan-pagination-content {
916
921
  @apply gap-0.5;
@@ -1061,11 +1066,11 @@
1061
1066
 
1062
1067
  /* MARK: Sheet */
1063
1068
  .spartan-sheet-overlay {
1064
- @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs;
1069
+ @apply bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
1065
1070
  }
1066
1071
 
1067
1072
  .spartan-sheet-content {
1068
- @apply bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1073
+ @apply bg-popover text-popover-foreground fixed flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1069
1074
  }
1070
1075
 
1071
1076
  .spartan-sheet-close {
@@ -1102,7 +1107,7 @@
1102
1107
  }
1103
1108
 
1104
1109
  .spartan-sidebar-inset {
1105
- @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2;
1110
+ @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2;
1106
1111
  }
1107
1112
 
1108
1113
  .spartan-sidebar-input {
@@ -1190,7 +1195,7 @@
1190
1195
  }
1191
1196
 
1192
1197
  .spartan-sidebar-menu-sub {
1193
- @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden;
1198
+ @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px;
1194
1199
  }
1195
1200
 
1196
1201
  .spartan-sidebar-menu-sub-button {
@@ -1219,6 +1224,10 @@
1219
1224
  @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3;
1220
1225
  }
1221
1226
 
1227
+ .spartan-slider-ticks {
1228
+ @apply px-1.5 group-data-vertical:px-0 group-data-vertical:py-1.5;
1229
+ }
1230
+
1222
1231
  /* MARK: Sonner */
1223
1232
  .spartan-toast {
1224
1233
  @apply rounded-2xl!;
@@ -907,6 +907,11 @@
907
907
  @apply text-muted-foreground end-2.5 top-1/2 -translate-y-1/2 text-[calc(var(--spacing)*4)];
908
908
  }
909
909
 
910
+ &.spartan-native-select [data-slot='native-select-option'],
911
+ &.spartan-native-select [data-slot='native-select-optgroup'] {
912
+ @apply bg-[color:Canvas] text-[color:CanvasText];
913
+ }
914
+
910
915
  /* MARK: Pagination */
911
916
  &.spartan-pagination-content {
912
917
  @apply gap-1;
@@ -1057,11 +1062,11 @@
1057
1062
 
1058
1063
  /* MARK: Sheet */
1059
1064
  &.spartan-sheet-overlay {
1060
- @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs;
1065
+ @apply bg-black/10 supports-backdrop-filter:backdrop-blur-xs;
1061
1066
  }
1062
1067
 
1063
1068
  &.spartan-sheet-content {
1064
- @apply bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1069
+ @apply bg-popover text-popover-foreground fixed flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm;
1065
1070
  }
1066
1071
 
1067
1072
  &.spartan-sheet-close {
@@ -1098,7 +1103,7 @@
1098
1103
  }
1099
1104
 
1100
1105
  &.spartan-sidebar-inset {
1101
- @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2;
1106
+ @apply bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2;
1102
1107
  }
1103
1108
 
1104
1109
  &.spartan-sidebar-input {
@@ -1142,7 +1147,7 @@
1142
1147
  }
1143
1148
 
1144
1149
  &.spartan-sidebar-menu-button {
1145
- @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
1150
+ @apply ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium;
1146
1151
  }
1147
1152
 
1148
1153
  &.spartan-sidebar-menu-button-variant-default {
@@ -1186,7 +1191,7 @@
1186
1191
  }
1187
1192
 
1188
1193
  &.spartan-sidebar-menu-sub {
1189
- @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden;
1194
+ @apply border-sidebar-border mx-3.5 translate-x-px gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px;
1190
1195
  }
1191
1196
 
1192
1197
  &.spartan-sidebar-menu-sub-button {
@@ -1215,6 +1220,10 @@
1215
1220
  @apply border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden;
1216
1221
  }
1217
1222
 
1223
+ &.spartan-slider-ticks {
1224
+ @apply px-2 group-data-vertical:px-0 group-data-vertical:py-2;
1225
+ }
1226
+
1218
1227
  /* MARK: Sonner */
1219
1228
  &.spartan-toast {
1220
1229
  @apply rounded-2xl!;