@spartan-ng/cli 0.0.1-alpha.708 → 0.0.1-alpha.709

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/generators/ui/libs/checkbox/files/lib/hlm-checkbox.ts.template +2 -1
  3. package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-radio-indicator.ts.template +1 -1
  4. package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-radio.ts.template +1 -1
  5. package/src/generators/ui/libs/native-select/files/lib/hlm-native-select.ts.template +6 -6
  6. package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination-query-params.ts.template +1 -3
  7. package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination.ts.template +1 -3
  8. package/src/generators/ui/libs/slider/files/lib/hlm-slider.ts.template +3 -6
  9. package/src/generators/ui/libs/switch/files/lib/hlm-switch-thumb.ts.template +1 -4
  10. package/src/generators/ui/libs/switch/files/lib/hlm-switch.ts.template +9 -6
  11. package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-list.ts.template +1 -1
  12. package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-trigger.ts.template +1 -1
  13. package/src/generators/ui/style-luma.css +2 -2
  14. package/src/generators/ui/style-lyra.css +1 -1
  15. package/src/generators/ui/style-maia.css +2 -2
  16. package/src/generators/ui/style-mira.css +3 -3
  17. package/src/generators/ui/style-nova.css +2 -2
  18. package/src/generators/ui/style-vega.css +2 -2
  19. package/src/generators/ui/supported-ui-libraries.json +40 -41
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spartan-ng/cli",
3
- "version": "0.0.1-alpha.708",
3
+ "version": "0.0.1-alpha.709",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/spartan-ng/spartan"
package/src/generators/ui/libs/checkbox/files/lib/hlm-checkbox.ts.template CHANGED
@@ -90,7 +90,8 @@ export class HlmCheckbox implements ControlValueAccessor {
90
90
  public readonly ariaDescribedby = input<string | null>(null, { alias: 'aria-describedby' });
91
91
 
92
92
  /** The checked state of the checkbox. */
93
- public readonly checked = model<boolean>(false);
93
+ public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
94
+ public readonly checked = linkedSignal(this.checkedInput);
94
95
 
95
96
  /** Emits when checked state changes. */
96
97
  public readonly checkedChange = output<boolean>();
package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-radio-indicator.ts.template CHANGED
@@ -16,7 +16,7 @@ export class HlmDropdownMenuRadioIndicator {
16
16
  constructor() {
17
17
  classes(
18
18
  () =>
19
- 'pointer-events-none absolute left-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
19
+ 'pointer-events-none absolute start-2 flex size-3.5 items-center justify-center opacity-0 group-data-[checked]:opacity-100',
20
20
  );
21
21
  }
22
22
  }
package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-radio.ts.template CHANGED
@@ -26,7 +26,7 @@ export class HlmDropdownMenuRadio {
26
26
  constructor() {
27
27
  classes(
28
28
  () =>
29
- 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
29
+ 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground group relative flex w-full cursor-default items-center rounded-sm py-1.5 ps-8 pe-2 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
30
30
  );
31
31
  }
32
32
  }
package/src/generators/ui/libs/native-select/files/lib/hlm-native-select.ts.template CHANGED
@@ -8,7 +8,6 @@ import {
8
8
  inject,
9
9
  input,
10
10
  linkedSignal,
11
- model,
12
11
  output,
13
12
  } from '@angular/core';
14
13
  import { NG_VALUE_ACCESSOR, type ControlValueAccessor } from '@angular/forms';
@@ -105,11 +104,12 @@ export class HlmNativeSelect implements ControlValueAccessor {
105
104
 
106
105
  protected readonly _ariaInvalid = computed(() => this.ariaInvalidOverride() ?? this._invalid?.());
107
106
 
108
- public readonly value = model<string | null>('');
107
+ public readonly valueInput = input<string | undefined | null>('', { alias: 'value' });
108
+ public readonly value = linkedSignal(this.valueInput);
109
109
 
110
- public readonly valueChange = output<string | null>();
110
+ public readonly valueChange = output<string | undefined | null>();
111
111
 
112
- protected _onChange?: ChangeFn<string | null>;
112
+ protected _onChange?: ChangeFn<string | undefined | null>;
113
113
  protected _onTouched?: TouchFn;
114
114
 
115
115
  public readonly labelableId = this.selectId;
@@ -136,11 +136,11 @@ export class HlmNativeSelect implements ControlValueAccessor {
136
136
  }
137
137
 
138
138
  /** CONTROL VALUE ACCESSOR */
139
- public writeValue(value: string | null): void {
139
+ public writeValue(value: string | undefined | null): void {
140
140
  this.value.set(value);
141
141
  }
142
142
 
143
- public registerOnChange(fn: ChangeFn<string | null>): void {
143
+ public registerOnChange(fn: ChangeFn<string | undefined | null>): void {
144
144
  this._onChange = fn;
145
145
  }
146
146
 
package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination-query-params.ts.template CHANGED
@@ -9,7 +9,6 @@ import {
9
9
  numberAttribute,
10
10
  untracked,
11
11
  } from '@angular/core';
12
- import { FormsModule } from '@angular/forms';
13
12
  import { HlmSelectImports } from '<%- importAlias %>/select';
14
13
  import { createPageArray, outOfBoundCorrection } from './hlm-numbered-pagination';
15
14
  import { HlmPagination } from './hlm-pagination';
@@ -23,7 +22,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
23
22
  @Component({
24
23
  selector: 'hlm-numbered-pagination-query-params',
25
24
  imports: [
26
- FormsModule,
27
25
  HlmPagination,
28
26
  HlmPaginationContent,
29
27
  HlmPaginationItem,
@@ -86,7 +84,7 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
86
84
  </nav>
87
85
 
88
86
  <!-- Show Page Size selector -->
89
- <hlm-select [(ngModel)]="itemsPerPage" class="ml-auto">
87
+ <hlm-select [(value)]="itemsPerPage" class="ml-auto">
90
88
  <hlm-select-trigger class="w-fit">
91
89
  <hlm-select-value />
92
90
  </hlm-select-trigger>
package/src/generators/ui/libs/pagination/files/lib/hlm-numbered-pagination.ts.template CHANGED
@@ -9,7 +9,6 @@ import {
9
9
  numberAttribute,
10
10
  untracked,
11
11
  } from '@angular/core';
12
- import { FormsModule } from '@angular/forms';
13
12
  import { HlmSelectImports } from '<%- importAlias %>/select';
14
13
  import { HlmPagination } from './hlm-pagination';
15
14
  import { HlmPaginationContent } from './hlm-pagination-content';
@@ -22,7 +21,6 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
22
21
  @Component({
23
22
  selector: 'hlm-numbered-pagination',
24
23
  imports: [
25
- FormsModule,
26
24
  HlmPagination,
27
25
  HlmPaginationContent,
28
26
  HlmPaginationItem,
@@ -71,7 +69,7 @@ import { HlmPaginationPrevious } from './hlm-pagination-previous';
71
69
  </nav>
72
70
 
73
71
  <!-- Show Page Size selector -->
74
- <hlm-select [(ngModel)]="itemsPerPage" class="ml-auto">
72
+ <hlm-select [(value)]="itemsPerPage" class="ml-auto">
75
73
  <hlm-select-trigger class="w-fit">
76
74
  <hlm-select-value />
77
75
  </hlm-select-trigger>
package/src/generators/ui/libs/slider/files/lib/hlm-slider.ts.template CHANGED
@@ -33,19 +33,16 @@ import { classes } from '<%- importAlias %>/utils';
33
33
  ],
34
34
  template: `
35
35
  <div class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col">
36
- <div
37
- brnSliderTrack
38
- class="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
39
- >
36
+ <div brnSliderTrack class="spartan-slider-track relative grow overflow-hidden">
40
37
  <div
41
- class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
38
+ class="spartan-slider-range absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
42
39
  brnSliderRange
43
40
  ></div>
44
41
  </div>
45
42
 
46
43
  @for (i of _slider.thumbIndexes(); track i) {
47
44
  <span
48
- class="border-ring ring-ring/50 absolute block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px]"
45
+ class="spartan-slider-thumb absolute block shrink-0 select-none after:absolute after:-inset-2"
49
46
  brnSliderThumb
50
47
  ></span>
51
48
  }
package/src/generators/ui/libs/switch/files/lib/hlm-switch-thumb.ts.template CHANGED
@@ -6,9 +6,6 @@ import { classes } from '<%- importAlias %>/utils';
6
6
  })
7
7
  export class HlmSwitchThumb {
8
8
  constructor() {
9
- classes(
10
- () =>
11
- 'bg-background dark:group-data-[state=unchecked]:bg-foreground dark:group-data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform group-data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
12
- );
9
+ classes(() => 'spartan-switch-thumb pointer-events-none block ring-0 transition-transform');
13
10
  }
14
11
  }
package/src/generators/ui/libs/switch/files/lib/hlm-switch.ts.template CHANGED
@@ -7,12 +7,11 @@ import {
7
7
  forwardRef,
8
8
  input,
9
9
  linkedSignal,
10
- model,
11
10
  output,
12
11
  } from '@angular/core';
13
12
  import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
14
13
  import type { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
15
- import { BrnSwitch, BrnSwitchThumb } from '@spartan-ng/brain/switch';
14
+ import { BrnSwitch, type BrnSwitchSize, BrnSwitchThumb } from '@spartan-ng/brain/switch';
16
15
  import { hlm } from '<%- importAlias %>/utils';
17
16
  import type { ClassValue } from 'clsx';
18
17
  import { HlmSwitchThumb } from './hlm-switch-thumb';
@@ -37,6 +36,7 @@ export const HLM_SWITCH_VALUE_ACCESSOR = {
37
36
  template: `
38
37
  <brn-switch
39
38
  [class]="_computedClass()"
39
+ [size]="size()"
40
40
  [checked]="checked()"
41
41
  (checkedChange)="handleChange($event)"
42
42
  (touched)="_onTouched?.()"
@@ -54,13 +54,14 @@ export class HlmSwitch implements ControlValueAccessor {
54
54
  public readonly userClass = input<ClassValue>('', { alias: 'class' });
55
55
  protected readonly _computedClass = computed(() =>
56
56
  hlm(
57
- 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
57
+ 'spartan-switch group/switch inline-flex shrink-0 items-center transition-all outline-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50',
58
58
  this.userClass(),
59
59
  ),
60
60
  );
61
61
 
62
62
  /** The checked state of the switch. */
63
- public readonly checked = model<boolean>(false);
63
+ public readonly checkedInput = input<boolean, BooleanInput>(false, { alias: 'checked', transform: booleanAttribute });
64
+ public readonly checked = linkedSignal(this.checkedInput);
64
65
 
65
66
  /** Emits when the checked state of the switch changes. */
66
67
  public readonly checkedChange = output<boolean>();
@@ -70,6 +71,9 @@ export class HlmSwitch implements ControlValueAccessor {
70
71
  transform: booleanAttribute,
71
72
  });
72
73
 
74
+ /** The size of the switch. */
75
+ public readonly size = input<BrnSwitchSize>('default');
76
+
73
77
  /** Used to set the id on the underlying brn element. */
74
78
  public readonly inputId = input<string | null>(null);
75
79
 
@@ -93,8 +97,7 @@ export class HlmSwitch implements ControlValueAccessor {
93
97
  this.checkedChange.emit(value);
94
98
  }
95
99
 
96
- /** CONROL VALUE ACCESSOR */
97
-
100
+ /** CONTROL VALUE ACCESSOR */
98
101
  writeValue(value: boolean): void {
99
102
  this.checked.set(Boolean(value));
100
103
  }
package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-list.ts.template CHANGED
@@ -4,7 +4,7 @@ import { classes } from '<%- importAlias %>/utils';
4
4
  import { type VariantProps, cva } from 'class-variance-authority';
5
5
 
6
6
  export const listVariants = cva(
7
- 'group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center rounded-lg p-[3px] group-data-horizontal/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
7
+ 'spartan-tabs-list group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
8
8
  {
9
9
  variants: {
10
10
  variant: {
package/src/generators/ui/libs/tabs/files/lib/hlm-tabs-trigger.ts.template CHANGED
@@ -13,7 +13,7 @@ export class HlmTabsTrigger {
13
13
  public readonly triggerFor = input.required<string>({ alias: 'hlmTabsTrigger' });
14
14
  constructor() {
15
15
  classes(() => [
16
- `focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*='text-'])]:text-base`,
16
+ `spartan-tabs-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0`,
17
17
  'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
18
18
  'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
19
19
  'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
package/src/generators/ui/style-luma.css CHANGED
@@ -47,7 +47,7 @@
47
47
  }
48
48
 
49
49
  .spartan-switch-thumb {
50
- @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full shadow-sm not-dark:bg-clip-padding group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-6 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-4 data-checked:translate-x-[calc(100%-8px)] data-unchecked:translate-x-0;
50
+ @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full shadow-sm not-dark:bg-clip-padding group-data-[size=default]/switch:h-4 group-data-[size=default]/switch:w-6 group-data-[size=sm]/switch:h-3 group-data-[size=sm]/switch:w-4 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-8px)] data-checked:rtl:-translate-x-[calc(100%-8px)];
51
51
  }
52
52
 
53
53
  /* MARK: Radio */
@@ -143,7 +143,7 @@
143
143
  }
144
144
 
145
145
  .spartan-button-group-orientation-horizontal {
146
- @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!;
146
+ @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-4xl!;
147
147
  }
148
148
 
149
149
  .spartan-button-group-orientation-vertical {
package/src/generators/ui/style-lyra.css CHANGED
@@ -1209,7 +1209,7 @@
1209
1209
  }
1210
1210
 
1211
1211
  .spartan-switch-thumb {
1212
- @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
1212
+ @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)];
1213
1213
  }
1214
1214
 
1215
1215
  /* MARK: Table */
package/src/generators/ui/style-maia.css CHANGED
@@ -249,7 +249,7 @@
249
249
  }
250
250
 
251
251
  .spartan-button-group-orientation-horizontal {
252
- @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!;
252
+ @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-4xl!;
253
253
  }
254
254
 
255
255
  .spartan-button-group-orientation-vertical {
@@ -1234,7 +1234,7 @@
1234
1234
  }
1235
1235
 
1236
1236
  .spartan-switch-thumb {
1237
- @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
1237
+ @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)];
1238
1238
  }
1239
1239
 
1240
1240
  /* MARK: Table */
package/src/generators/ui/style-mira.css CHANGED
@@ -249,7 +249,7 @@
249
249
  }
250
250
 
251
251
  .spartan-button-group-orientation-horizontal {
252
- @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!;
252
+ @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md!;
253
253
  }
254
254
 
255
255
  .spartan-button-group-orientation-vertical {
@@ -1214,7 +1214,7 @@
1214
1214
  }
1215
1215
 
1216
1216
  .spartan-slider-track {
1217
- @apply bg-muted rounded-md data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3;
1217
+ @apply bg-muted rounded-md data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1;
1218
1218
  }
1219
1219
 
1220
1220
  .spartan-slider-range {
@@ -1236,7 +1236,7 @@
1236
1236
  }
1237
1237
 
1238
1238
  .spartan-switch-thumb {
1239
- @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
1239
+ @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)];
1240
1240
  }
1241
1241
 
1242
1242
  /* MARK: Table */
package/src/generators/ui/style-nova.css CHANGED
@@ -249,7 +249,7 @@
249
249
  }
250
250
 
251
251
  .spartan-button-group-orientation-horizontal {
252
- @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!;
252
+ @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg!;
253
253
  }
254
254
 
255
255
  .spartan-button-group-orientation-vertical {
@@ -1234,7 +1234,7 @@
1234
1234
  }
1235
1235
 
1236
1236
  .spartan-switch-thumb {
1237
- @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
1237
+ @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)];
1238
1238
  }
1239
1239
 
1240
1240
  /* MARK: Table */
package/src/generators/ui/style-vega.css CHANGED
@@ -245,7 +245,7 @@
245
245
  }
246
246
 
247
247
  &.spartan-button-group-orientation-horizontal {
248
- @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!;
248
+ @apply [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-md!;
249
249
  }
250
250
 
251
251
  &.spartan-button-group-orientation-vertical {
@@ -1230,7 +1230,7 @@
1230
1230
  }
1231
1231
 
1232
1232
  &.spartan-switch-thumb {
1233
- @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0;
1233
+ @apply bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-unchecked:translate-x-0 data-checked:ltr:translate-x-[calc(100%-2px)] data-checked:rtl:-translate-x-[calc(100%-2px)];
1234
1234
  }
1235
1235
 
1236
1236
  /* MARK: Table */
package/src/generators/ui/supported-ui-libraries.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "accordion",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=21.0.0 <23.0.0",
6
- "@spartan-ng/brain": "0.0.1-alpha.708",
6
+ "@spartan-ng/brain": "0.0.1-alpha.709",
7
7
  "@ng-icons/core": ">=32.0.0 <34.0.0",
8
8
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
9
9
  "clsx": "^2.1.1"
@@ -20,7 +20,7 @@
20
20
  "name": "alert-dialog",
21
21
  "peerDependencies": {
22
22
  "@angular/core": ">=21.0.0 <23.0.0",
23
- "@spartan-ng/brain": "0.0.1-alpha.708",
23
+ "@spartan-ng/brain": "0.0.1-alpha.709",
24
24
  "clsx": "^2.1.1"
25
25
  }
26
26
  },
@@ -36,7 +36,7 @@
36
36
  "peerDependencies": {
37
37
  "@angular/core": ">=21.0.0 <23.0.0",
38
38
  "@angular/forms": ">=21.0.0 <23.0.0",
39
- "@spartan-ng/brain": "0.0.1-alpha.708",
39
+ "@spartan-ng/brain": "0.0.1-alpha.709",
40
40
  "@angular/cdk": ">=21.0.0 <23.0.0",
41
41
  "@ng-icons/core": ">=32.0.0 <34.0.0",
42
42
  "@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -46,7 +46,7 @@
46
46
  "name": "avatar",
47
47
  "peerDependencies": {
48
48
  "@angular/core": ">=21.0.0 <23.0.0",
49
- "@spartan-ng/brain": "0.0.1-alpha.708"
49
+ "@spartan-ng/brain": "0.0.1-alpha.709"
50
50
  }
51
51
  },
52
52
  "badge": {
@@ -70,7 +70,7 @@
70
70
  "name": "button",
71
71
  "peerDependencies": {
72
72
  "@angular/core": ">=21.0.0 <23.0.0",
73
- "@spartan-ng/brain": "0.0.1-alpha.708",
73
+ "@spartan-ng/brain": "0.0.1-alpha.709",
74
74
  "class-variance-authority": "^0.7.0",
75
75
  "clsx": "^2.1.1"
76
76
  }
@@ -79,7 +79,7 @@
79
79
  "name": "button-group",
80
80
  "peerDependencies": {
81
81
  "@angular/core": ">=21.0.0 <23.0.0",
82
- "@spartan-ng/brain": "0.0.1-alpha.708",
82
+ "@spartan-ng/brain": "0.0.1-alpha.709",
83
83
  "class-variance-authority": "^0.7.0"
84
84
  }
85
85
  },
@@ -91,7 +91,7 @@
91
91
  "@angular/core": ">=21.0.0 <23.0.0",
92
92
  "@ng-icons/core": ">=32.0.0 <34.0.0",
93
93
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
94
- "@spartan-ng/brain": "0.0.1-alpha.708",
94
+ "@spartan-ng/brain": "0.0.1-alpha.709",
95
95
  "clsx": "^2.1.1"
96
96
  }
97
97
  },
@@ -119,7 +119,7 @@
119
119
  "@angular/cdk": ">=21.0.0 <23.0.0",
120
120
  "@ng-icons/core": ">=32.0.0 <34.0.0",
121
121
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
122
- "@spartan-ng/brain": "0.0.1-alpha.708",
122
+ "@spartan-ng/brain": "0.0.1-alpha.709",
123
123
  "clsx": "^2.1.1"
124
124
  }
125
125
  },
@@ -127,7 +127,7 @@
127
127
  "name": "collapsible",
128
128
  "peerDependencies": {
129
129
  "@angular/core": ">=21.0.0 <23.0.0",
130
- "@spartan-ng/brain": "0.0.1-alpha.708"
130
+ "@spartan-ng/brain": "0.0.1-alpha.709"
131
131
  }
132
132
  },
133
133
  "combobox": {
@@ -135,7 +135,7 @@
135
135
  "peerDependencies": {
136
136
  "@angular/core": ">=21.0.0 <23.0.0",
137
137
  "@angular/forms": ">=21.0.0 <23.0.0",
138
- "@spartan-ng/brain": "0.0.1-alpha.708",
138
+ "@spartan-ng/brain": "0.0.1-alpha.709",
139
139
  "@angular/cdk": ">=21.0.0 <23.0.0",
140
140
  "@ng-icons/core": ">=32.0.0 <34.0.0",
141
141
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -147,7 +147,7 @@
147
147
  "peerDependencies": {
148
148
  "@angular/cdk": ">=21.0.0 <23.0.0",
149
149
  "@angular/core": ">=21.0.0 <23.0.0",
150
- "@spartan-ng/brain": "0.0.1-alpha.708",
150
+ "@spartan-ng/brain": "0.0.1-alpha.709",
151
151
  "clsx": "^2.1.1",
152
152
  "@ng-icons/core": ">=32.0.0 <34.0.0",
153
153
  "@ng-icons/lucide": ">=32.0.0 <34.0.0"
@@ -157,7 +157,7 @@
157
157
  "name": "context-menu",
158
158
  "peerDependencies": {
159
159
  "@angular/core": ">=21.0.0 <23.0.0",
160
- "@spartan-ng/brain": "0.0.1-alpha.708",
160
+ "@spartan-ng/brain": "0.0.1-alpha.709",
161
161
  "@angular/cdk": ">=21.0.0 <23.0.0",
162
162
  "rxjs": "^7.8.0"
163
163
  }
@@ -167,7 +167,7 @@
167
167
  "peerDependencies": {
168
168
  "@angular/core": ">=21.0.0 <23.0.0",
169
169
  "@angular/forms": ">=21.0.0 <23.0.0",
170
- "@spartan-ng/brain": "0.0.1-alpha.708",
170
+ "@spartan-ng/brain": "0.0.1-alpha.709",
171
171
  "@angular/cdk": ">=21.0.0 <23.0.0",
172
172
  "@ng-icons/core": ">=32.0.0 <34.0.0",
173
173
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -178,7 +178,7 @@
178
178
  "name": "dialog",
179
179
  "peerDependencies": {
180
180
  "@angular/core": ">=21.0.0 <23.0.0",
181
- "@spartan-ng/brain": "0.0.1-alpha.708",
181
+ "@spartan-ng/brain": "0.0.1-alpha.709",
182
182
  "@angular/cdk": ">=21.0.0 <23.0.0",
183
183
  "@angular/common": ">=21.0.0 <23.0.0",
184
184
  "@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -194,7 +194,7 @@
194
194
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
195
195
  "@angular/cdk": ">=21.0.0 <23.0.0",
196
196
  "rxjs": "^7.8.0",
197
- "@spartan-ng/brain": "0.0.1-alpha.708"
197
+ "@spartan-ng/brain": "0.0.1-alpha.709"
198
198
  }
199
199
  },
200
200
  "empty": {
@@ -208,7 +208,7 @@
208
208
  "name": "field",
209
209
  "peerDependencies": {
210
210
  "@angular/core": ">=21.0.0 <23.0.0",
211
- "@spartan-ng/brain": "0.0.1-alpha.708",
211
+ "@spartan-ng/brain": "0.0.1-alpha.709",
212
212
  "@angular/cdk": ">=21.0.0 <23.0.0",
213
213
  "class-variance-authority": "^0.7.0"
214
214
  }
@@ -217,7 +217,7 @@
217
217
  "name": "hover-card",
218
218
  "peerDependencies": {
219
219
  "@angular/core": ">=21.0.0 <23.0.0",
220
- "@spartan-ng/brain": "0.0.1-alpha.708"
220
+ "@spartan-ng/brain": "0.0.1-alpha.709"
221
221
  }
222
222
  },
223
223
  "icon": {
@@ -233,7 +233,7 @@
233
233
  "peerDependencies": {
234
234
  "@angular/core": ">=21.0.0 <23.0.0",
235
235
  "@angular/forms": ">=21.0.0 <23.0.0",
236
- "@spartan-ng/brain": "0.0.1-alpha.708"
236
+ "@spartan-ng/brain": "0.0.1-alpha.709"
237
237
  }
238
238
  },
239
239
  "input-group": {
@@ -250,7 +250,7 @@
250
250
  "@ng-icons/core": ">=32.0.0 <34.0.0",
251
251
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
252
252
  "@angular/cdk": ">=21.0.0 <23.0.0",
253
- "@spartan-ng/brain": "0.0.1-alpha.708"
253
+ "@spartan-ng/brain": "0.0.1-alpha.709"
254
254
  }
255
255
  },
256
256
  "item": {
@@ -258,7 +258,7 @@
258
258
  "peerDependencies": {
259
259
  "@angular/core": ">=21.0.0 <23.0.0",
260
260
  "class-variance-authority": "^0.7.0",
261
- "@spartan-ng/brain": "0.0.1-alpha.708"
261
+ "@spartan-ng/brain": "0.0.1-alpha.709"
262
262
  }
263
263
  },
264
264
  "kbd": {
@@ -271,14 +271,14 @@
271
271
  "name": "label",
272
272
  "peerDependencies": {
273
273
  "@angular/core": ">=21.0.0 <23.0.0",
274
- "@spartan-ng/brain": "0.0.1-alpha.708"
274
+ "@spartan-ng/brain": "0.0.1-alpha.709"
275
275
  }
276
276
  },
277
277
  "menubar": {
278
278
  "name": "menubar",
279
279
  "peerDependencies": {
280
280
  "@angular/core": ">=21.0.0 <23.0.0",
281
- "@spartan-ng/brain": "0.0.1-alpha.708",
281
+ "@spartan-ng/brain": "0.0.1-alpha.709",
282
282
  "@angular/cdk": ">=21.0.0 <23.0.0",
283
283
  "rxjs": "^7.8.0"
284
284
  }
@@ -291,7 +291,7 @@
291
291
  "@angular/forms": ">=21.0.0 <23.0.0",
292
292
  "@ng-icons/core": ">=32.0.0 <34.0.0",
293
293
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
294
- "@spartan-ng/brain": "0.0.1-alpha.708",
294
+ "@spartan-ng/brain": "0.0.1-alpha.709",
295
295
  "clsx": "^2.1.1"
296
296
  }
297
297
  },
@@ -299,7 +299,7 @@
299
299
  "name": "navigation-menu",
300
300
  "peerDependencies": {
301
301
  "@angular/core": ">=21.0.0 <23.0.0",
302
- "@spartan-ng/brain": "0.0.1-alpha.708"
302
+ "@spartan-ng/brain": "0.0.1-alpha.709"
303
303
  }
304
304
  },
305
305
  "pagination": {
@@ -307,7 +307,6 @@
307
307
  "peerDependencies": {
308
308
  "@angular/cdk": ">=21.0.0 <23.0.0",
309
309
  "@angular/core": ">=21.0.0 <23.0.0",
310
- "@angular/forms": ">=21.0.0 <23.0.0",
311
310
  "@ng-icons/core": ">=32.0.0 <34.0.0",
312
311
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
313
312
  "@angular/router": ">=21.0.0 <23.0.0",
@@ -318,14 +317,14 @@
318
317
  "name": "popover",
319
318
  "peerDependencies": {
320
319
  "@angular/core": ">=21.0.0 <23.0.0",
321
- "@spartan-ng/brain": "0.0.1-alpha.708"
320
+ "@spartan-ng/brain": "0.0.1-alpha.709"
322
321
  }
323
322
  },
324
323
  "progress": {
325
324
  "name": "progress",
326
325
  "peerDependencies": {
327
326
  "@angular/core": ">=21.0.0 <23.0.0",
328
- "@spartan-ng/brain": "0.0.1-alpha.708"
327
+ "@spartan-ng/brain": "0.0.1-alpha.709"
329
328
  }
330
329
  },
331
330
  "radio-group": {
@@ -333,7 +332,7 @@
333
332
  "peerDependencies": {
334
333
  "@angular/core": ">=21.0.0 <23.0.0",
335
334
  "@angular/forms": ">=21.0.0 <23.0.0",
336
- "@spartan-ng/brain": "0.0.1-alpha.708",
335
+ "@spartan-ng/brain": "0.0.1-alpha.709",
337
336
  "clsx": "^2.1.1",
338
337
  "@angular/cdk": ">=21.0.0 <23.0.0",
339
338
  "@angular/common": ">=21.0.0 <23.0.0"
@@ -343,7 +342,7 @@
343
342
  "name": "resizable",
344
343
  "peerDependencies": {
345
344
  "@angular/core": ">=21.0.0 <23.0.0",
346
- "@spartan-ng/brain": "0.0.1-alpha.708"
345
+ "@spartan-ng/brain": "0.0.1-alpha.709"
347
346
  }
348
347
  },
349
348
  "scroll-area": {
@@ -358,7 +357,7 @@
358
357
  "@angular/core": ">=21.0.0 <23.0.0",
359
358
  "@angular/forms": ">=21.0.0 <23.0.0",
360
359
  "@angular/cdk": ">=21.0.0 <23.0.0",
361
- "@spartan-ng/brain": "0.0.1-alpha.708",
360
+ "@spartan-ng/brain": "0.0.1-alpha.709",
362
361
  "@ng-icons/core": ">=32.0.0 <34.0.0",
363
362
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
364
363
  "clsx": "^2.1.1"
@@ -368,14 +367,14 @@
368
367
  "name": "separator",
369
368
  "peerDependencies": {
370
369
  "@angular/core": ">=21.0.0 <23.0.0",
371
- "@spartan-ng/brain": "0.0.1-alpha.708"
370
+ "@spartan-ng/brain": "0.0.1-alpha.709"
372
371
  }
373
372
  },
374
373
  "sheet": {
375
374
  "name": "sheet",
376
375
  "peerDependencies": {
377
376
  "@angular/core": ">=21.0.0 <23.0.0",
378
- "@spartan-ng/brain": "0.0.1-alpha.708",
377
+ "@spartan-ng/brain": "0.0.1-alpha.709",
379
378
  "@angular/cdk": ">=21.0.0 <23.0.0",
380
379
  "@ng-icons/core": ">=32.0.0 <34.0.0",
381
380
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -388,7 +387,7 @@
388
387
  "peerDependencies": {
389
388
  "@angular/core": ">=21.0.0 <23.0.0",
390
389
  "@angular/cdk": ">=21.0.0 <23.0.0",
391
- "@spartan-ng/brain": "0.0.1-alpha.708",
390
+ "@spartan-ng/brain": "0.0.1-alpha.709",
392
391
  "class-variance-authority": "^0.7.0",
393
392
  "@ng-icons/core": ">=32.0.0 <34.0.0",
394
393
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
@@ -407,7 +406,7 @@
407
406
  "peerDependencies": {
408
407
  "@angular/core": ">=21.0.0 <23.0.0",
409
408
  "@angular/forms": ">=21.0.0 <23.0.0",
410
- "@spartan-ng/brain": "0.0.1-alpha.708"
409
+ "@spartan-ng/brain": "0.0.1-alpha.709"
411
410
  }
412
411
  },
413
412
  "sonner": {
@@ -417,7 +416,7 @@
417
416
  "@angular/core": ">=21.0.0 <23.0.0",
418
417
  "@ng-icons/core": ">=32.0.0 <34.0.0",
419
418
  "@ng-icons/lucide": ">=32.0.0 <34.0.0",
420
- "@spartan-ng/brain": "0.0.1-alpha.708",
419
+ "@spartan-ng/brain": "0.0.1-alpha.709",
421
420
  "clsx": "^2.1.1"
422
421
  }
423
422
  },
@@ -435,7 +434,7 @@
435
434
  "@angular/core": ">=21.0.0 <23.0.0",
436
435
  "@angular/cdk": ">=21.0.0 <23.0.0",
437
436
  "@angular/forms": ">=21.0.0 <23.0.0",
438
- "@spartan-ng/brain": "0.0.1-alpha.708",
437
+ "@spartan-ng/brain": "0.0.1-alpha.709",
439
438
  "clsx": "^2.1.1"
440
439
  }
441
440
  },
@@ -449,7 +448,7 @@
449
448
  "name": "tabs",
450
449
  "peerDependencies": {
451
450
  "@angular/core": ">=21.0.0 <23.0.0",
452
- "@spartan-ng/brain": "0.0.1-alpha.708",
451
+ "@spartan-ng/brain": "0.0.1-alpha.709",
453
452
  "class-variance-authority": "^0.7.0",
454
453
  "@angular/cdk": ">=21.0.0 <23.0.0",
455
454
  "@ng-icons/core": ">=32.0.0 <34.0.0",
@@ -463,14 +462,14 @@
463
462
  "peerDependencies": {
464
463
  "@angular/core": ">=21.0.0 <23.0.0",
465
464
  "@angular/forms": ">=21.0.0 <23.0.0",
466
- "@spartan-ng/brain": "0.0.1-alpha.708"
465
+ "@spartan-ng/brain": "0.0.1-alpha.709"
467
466
  }
468
467
  },
469
468
  "toggle": {
470
469
  "name": "toggle",
471
470
  "peerDependencies": {
472
471
  "@angular/core": ">=21.0.0 <23.0.0",
473
- "@spartan-ng/brain": "0.0.1-alpha.708",
472
+ "@spartan-ng/brain": "0.0.1-alpha.709",
474
473
  "class-variance-authority": "^0.7.0"
475
474
  }
476
475
  },
@@ -478,7 +477,7 @@
478
477
  "name": "toggle-group",
479
478
  "peerDependencies": {
480
479
  "@angular/core": ">=21.0.0 <23.0.0",
481
- "@spartan-ng/brain": "0.0.1-alpha.708",
480
+ "@spartan-ng/brain": "0.0.1-alpha.709",
482
481
  "@angular/cdk": ">=21.0.0 <23.0.0"
483
482
  }
484
483
  },
@@ -486,7 +485,7 @@
486
485
  "name": "tooltip",
487
486
  "peerDependencies": {
488
487
  "@angular/core": ">=21.0.0 <23.0.0",
489
- "@spartan-ng/brain": "0.0.1-alpha.708",
488
+ "@spartan-ng/brain": "0.0.1-alpha.709",
490
489
  "class-variance-authority": "^0.7.0"
491
490
  }
492
491
  },