@spartan-ng/cli 0.0.1-alpha.676 → 0.0.1-alpha.678

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 (15) hide show
  1. package/package.json +1 -1
  2. package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-separator.ts.template +5 -4
  3. package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-text.ts.template +4 -4
  4. package/src/generators/ui/libs/button-group/files/lib/hlm-button-group.ts.template +4 -4
  5. package/src/generators/ui/libs/separator/files/lib/hlm-separator.ts.template +1 -1
  6. package/src/generators/ui/libs/toggle/files/lib/hlm-toggle.ts.template +6 -8
  7. package/src/generators/ui/libs/toggle-group/files/lib/hlm-toggle-group-item.ts.template +1 -2
  8. package/src/generators/ui/libs/toggle-group/files/lib/hlm-toggle-group.ts.template +6 -1
  9. package/src/generators/ui/style-luma.css +4 -4
  10. package/src/generators/ui/style-lyra.css +2 -2
  11. package/src/generators/ui/style-maia.css +3 -3
  12. package/src/generators/ui/style-mira.css +4 -4
  13. package/src/generators/ui/style-nova.css +3 -3
  14. package/src/generators/ui/style-vega.css +331 -331
  15. package/src/generators/ui/supported-ui-libraries.json +41 -41
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spartan-ng/cli",
3
- "version": "0.0.1-alpha.676",
3
+ "version": "0.0.1-alpha.678",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/spartan-ng/spartan"
package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-separator.ts.template CHANGED
@@ -12,9 +12,10 @@ import { classes } from '<%- importAlias %>/utils';
12
12
  })
13
13
  export class HlmButtonGroupSeparator {
14
14
  constructor() {
15
- classes(
16
- () =>
17
- 'bg-input relative inline-flex shrink-0 self-stretch data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px',
18
- );
15
+ classes(() => [
16
+ 'spartan-button-group-separator relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
17
+ // separator classes
18
+ 'shrink-0 data-horizontal:h-px data-vertical:w-px data-vertical:self-stretch',
19
+ ]);
19
20
  }
20
21
  }
package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-text.ts.template CHANGED
@@ -3,12 +3,12 @@ import { classes } from '<%- importAlias %>/utils';
3
3
 
4
4
  @Directive({
5
5
  selector: '[hlmButtonGroupText],hlm-button-group-text',
6
+ host: {
7
+ 'data-slot': 'button-group-text',
8
+ },
6
9
  })
7
10
  export class HlmButtonGroupText {
8
11
  constructor() {
9
- classes(
10
- () =>
11
- "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_ng-icon]:pointer-events-none [&_ng-icon:not([class*='text-'])]:text-base",
12
- );
12
+ classes(() => 'spartan-button-group-text flex items-center [&_ng-icon]:pointer-events-none');
13
13
  }
14
14
  }
package/src/generators/ui/libs/button-group/files/lib/hlm-button-group.ts.template CHANGED
@@ -2,15 +2,15 @@ import { Directive, input } from '@angular/core';
2
2
  import { classes } from '<%- importAlias %>/utils';
3
3
  import { cva } from 'class-variance-authority';
4
4
 
5
- export const buttonGroupVariants = cva(
6
- "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
5
+ const buttonGroupVariants = cva(
6
+ "spartan-button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
7
7
  {
8
8
  variants: {
9
9
  orientation: {
10
10
  horizontal:
11
- '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
11
+ 'spartan-button-group-orientation-horizontal [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none',
12
12
  vertical:
13
- 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
13
+ 'spartan-button-group-orientation-vertical flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
14
14
  },
15
15
  },
16
16
  defaultVariants: {
package/src/generators/ui/libs/separator/files/lib/hlm-separator.ts.template CHANGED
@@ -3,7 +3,7 @@ import { BrnSeparator } from '@spartan-ng/brain/separator';
3
3
  import { classes } from '<%- importAlias %>/utils';
4
4
 
5
5
  export const hlmSeparatorClass =
6
- 'bg-border inline-flex shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px';
6
+ 'inline-flex shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch';
7
7
 
8
8
  @Directive({
9
9
  selector: '[hlmSeparator],hlm-separator',
package/src/generators/ui/libs/toggle/files/lib/hlm-toggle.ts.template CHANGED
@@ -3,20 +3,18 @@ import { BrnToggle } from '@spartan-ng/brain/toggle';
3
3
  import { classes } from '<%- importAlias %>/utils';
4
4
  import { cva, type VariantProps } from 'class-variance-authority';
5
5
 
6
- // TODO invalid styles uses aria-invalid
7
- // aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
8
6
  export const toggleVariants = cva(
9
- 'hover:bg-muted hover:text-muted-foreground focus-visible:border-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground focus-visible:ring-ring/50 inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0 [&_ng-icon:not([class*="text-"])]:text-base',
7
+ 'spartan-toggle group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
10
8
  {
11
9
  variants: {
12
10
  variant: {
13
- default: 'bg-transparent',
14
- outline: 'border-input hover:bg-accent hover:text-accent-foreground border bg-transparent shadow-xs',
11
+ default: 'spartan-toggle-variant-default',
12
+ outline: 'spartan-toggle-variant-outline',
15
13
  },
16
14
  size: {
17
- default: 'h-9 min-w-9 px-2',
18
- sm: 'h-8 min-w-8 px-1.5',
19
- lg: 'h-10 min-w-10 px-2.5',
15
+ default: 'spartan-toggle-size-default',
16
+ sm: 'spartan-toggle-size-sm',
17
+ lg: 'spartan-toggle-size-lg',
20
18
  },
21
19
  },
22
20
  defaultVariants: {
package/src/generators/ui/libs/toggle-group/files/lib/hlm-toggle-group-item.ts.template CHANGED
@@ -31,12 +31,11 @@ export class HlmToggleGroupItem {
31
31
 
32
32
  constructor() {
33
33
  classes(() => [
34
+ 'spartan-toggle-group-item shrink-0 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-s-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-s group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
34
35
  toggleVariants({
35
36
  variant: this._variant(),
36
37
  size: this._size(),
37
38
  }),
38
- 'w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10',
39
- 'data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l',
40
39
  ]);
41
40
  }
42
41
  }
package/src/generators/ui/libs/toggle-group/files/lib/hlm-toggle-group.ts.template CHANGED
@@ -20,6 +20,7 @@ import { provideHlmToggleGroup } from './hlm-toggle-group.token';
20
20
  '[attr.data-variant]': 'variant()',
21
21
  '[attr.data-size]': 'size()',
22
22
  '[attr.data-spacing]': 'spacing()',
23
+ '[attr.data-orientation]': 'orientation()',
23
24
  '[style.--gap]': 'spacing()',
24
25
  },
25
26
  })
@@ -27,8 +28,12 @@ export class HlmToggleGroup {
27
28
  public readonly variant = input<ToggleVariants['variant']>('default');
28
29
  public readonly size = input<ToggleVariants['size']>('default');
29
30
  public readonly spacing = input<number, NumberInput>(0, { transform: numberAttribute });
31
+ public readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
30
32
 
31
33
  constructor() {
32
- classes(() => 'group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))]');
34
+ classes(
35
+ () =>
36
+ 'spartan-toggle-group group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch',
37
+ );
33
38
  }
34
39
  }
package/src/generators/ui/style-luma.css CHANGED
@@ -1252,15 +1252,15 @@
1252
1252
  }
1253
1253
 
1254
1254
  .spartan-toggle-size-default {
1255
- @apply h-9 min-w-9 px-3 has-data-[icon=inline-end]:pe-2.5 has-data-[icon=inline-start]:ps-2.5;
1255
+ @apply h-9 min-w-9 px-3;
1256
1256
  }
1257
1257
 
1258
1258
  .spartan-toggle-size-sm {
1259
- @apply h-8 min-w-8 px-3 has-data-[icon=inline-end]:pe-2 has-data-[icon=inline-start]:ps-2;
1259
+ @apply h-8 min-w-8 px-3;
1260
1260
  }
1261
1261
 
1262
1262
  .spartan-toggle-size-lg {
1263
- @apply h-10 min-w-10 px-4 has-data-[icon=inline-end]:pe-3 has-data-[icon=inline-start]:ps-3;
1263
+ @apply h-10 min-w-10 px-4;
1264
1264
  }
1265
1265
 
1266
1266
  /* MARK: Toggle Group */
@@ -1269,7 +1269,7 @@
1269
1269
  }
1270
1270
 
1271
1271
  .spartan-toggle-group-item {
1272
- @apply data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pe-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:ps-2.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl;
1272
+ @apply data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl;
1273
1273
  }
1274
1274
 
1275
1275
  /* MARK: Tooltip */
package/src/generators/ui/style-lyra.css CHANGED
@@ -1243,11 +1243,11 @@
1243
1243
  }
1244
1244
 
1245
1245
  .spartan-toggle-size-default {
1246
- @apply h-8 min-w-8 px-2;
1246
+ @apply h-8 min-w-8 px-2.5;
1247
1247
  }
1248
1248
 
1249
1249
  .spartan-toggle-size-sm {
1250
- @apply h-7 min-w-7 rounded-none px-1.5;
1250
+ @apply h-7 min-w-7 rounded-none px-2.5;
1251
1251
  }
1252
1252
 
1253
1253
  .spartan-toggle-size-lg {
package/src/generators/ui/style-maia.css CHANGED
@@ -1268,7 +1268,7 @@
1268
1268
  }
1269
1269
 
1270
1270
  .spartan-toggle-size-default {
1271
- @apply h-9 min-w-9 rounded-[min(var(--radius-2xl),12px)] px-2.5;
1271
+ @apply h-9 min-w-9 px-3;
1272
1272
  }
1273
1273
 
1274
1274
  .spartan-toggle-size-sm {
@@ -1276,7 +1276,7 @@
1276
1276
  }
1277
1277
 
1278
1278
  .spartan-toggle-size-lg {
1279
- @apply h-10 min-w-10 px-2.5;
1279
+ @apply h-10 min-w-10 px-4;
1280
1280
  }
1281
1281
 
1282
1282
  /* MARK: Toggle Group */
@@ -1285,7 +1285,7 @@
1285
1285
  }
1286
1286
 
1287
1287
  .spartan-toggle-group-item {
1288
- @apply data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl;
1288
+ @apply data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl;
1289
1289
  }
1290
1290
 
1291
1291
  /* MARK: Tooltip */
package/src/generators/ui/style-mira.css CHANGED
@@ -1258,7 +1258,7 @@
1258
1258
 
1259
1259
  /* MARK: Toggle */
1260
1260
  .spartan-toggle {
1261
- @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-md text-xs font-medium transition-all [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
1261
+ @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-md text-xs font-medium transition-all [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*4)];
1262
1262
  }
1263
1263
 
1264
1264
  .spartan-toggle-variant-default {
@@ -1274,11 +1274,11 @@
1274
1274
  }
1275
1275
 
1276
1276
  .spartan-toggle-size-sm {
1277
- @apply h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-1.5 text-[0.625rem] [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)];
1277
+ @apply h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-2 text-[0.625rem] [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3)];
1278
1278
  }
1279
1279
 
1280
1280
  .spartan-toggle-size-lg {
1281
- @apply h-8 min-w-8 px-2;
1281
+ @apply h-8 min-w-8 px-2.5;
1282
1282
  }
1283
1283
 
1284
1284
  /* MARK: Toggle Group */
@@ -1287,7 +1287,7 @@
1287
1287
  }
1288
1288
 
1289
1289
  .spartan-toggle-group-item {
1290
- @apply group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md;
1290
+ @apply group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md;
1291
1291
  }
1292
1292
 
1293
1293
  /* MARK: Tooltip */
package/src/generators/ui/style-nova.css CHANGED
@@ -1268,11 +1268,11 @@
1268
1268
  }
1269
1269
 
1270
1270
  .spartan-toggle-size-default {
1271
- @apply h-8 min-w-8 px-2;
1271
+ @apply h-8 min-w-8 px-2.5;
1272
1272
  }
1273
1273
 
1274
1274
  .spartan-toggle-size-sm {
1275
- @apply h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem];
1275
+ @apply h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] [&_ng-icon:not([class*='text-'])]:text-[calc(var(--spacing)*3.5)];
1276
1276
  }
1277
1277
 
1278
1278
  .spartan-toggle-size-lg {
@@ -1285,7 +1285,7 @@
1285
1285
  }
1286
1286
 
1287
1287
  .spartan-toggle-group-item {
1288
- @apply group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg;
1288
+ @apply group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-s-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-e-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg;
1289
1289
  }
1290
1290
 
1291
1291
  /* MARK: Tooltip */