@spartan-ng/cli 0.0.1-alpha.677 → 0.0.1-alpha.679

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.677",
+  "version": "0.0.1-alpha.679",
   "repository": {
     "type": "git",
     "url": "https://github.com/spartan-ng/spartan"

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-separator.ts.template

@@ -12,9 +12,10 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmButtonGroupSeparator {
 	constructor() {
-		classes(
-			() =>
-				'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',
-		);
+		classes(() => [
+			'spartan-button-group-separator relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
+			// separator classes
+			'shrink-0 data-horizontal:h-px data-vertical:w-px data-vertical:self-stretch',
+		]);
 	}
 }

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group-text.ts.template

@@ -3,12 +3,12 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmButtonGroupText],hlm-button-group-text',
+	host: {
+		'data-slot': 'button-group-text',
+	},
 })
 export class HlmButtonGroupText {
 	constructor() {
-		classes(
-			() =>
-				"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",
-		);
+		classes(() => 'spartan-button-group-text flex items-center [&_ng-icon]:pointer-events-none');
 	}
 }

package/src/generators/ui/libs/button-group/files/lib/hlm-button-group.ts.template

@@ -2,15 +2,15 @@ import { Directive, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 import { cva } from 'class-variance-authority';
 
-export const buttonGroupVariants = cva(
-	"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",
+const buttonGroupVariants = cva(
+	"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",
 	{
 		variants: {
 			orientation: {
 				horizontal:
-					'[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
+					'spartan-button-group-orientation-horizontal [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none',
 				vertical:
-					'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
+					'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',
 			},
 		},
 		defaultVariants: {

package/src/generators/ui/libs/card/files/lib/hlm-card.token.ts.template

@@ -0,0 +1,19 @@
+import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+
+export type HlmCardConfig = {
+	size: 'sm' | 'default';
+};
+
+const defaultConfig: HlmCardConfig = {
+	size: 'default',
+};
+
+const HlmCardConfigToken = new InjectionToken<HlmCardConfig>('HlmCardConfig');
+
+export function provideHlmCardConfig(config: Partial<HlmCardConfig>): ValueProvider {
+	return { provide: HlmCardConfigToken, useValue: { ...defaultConfig, ...config } };
+}
+
+export function injectHlmCardConfig(): HlmCardConfig {
+	return inject(HlmCardConfigToken, { optional: true }) ?? defaultConfig;
+}

package/src/generators/ui/libs/card/files/lib/hlm-card.ts.template

@@ -1,5 +1,6 @@
 import { Directive, input } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
+import { HlmCardConfig, injectHlmCardConfig } from './hlm-card.token';
 
 @Directive({
 	selector: '[hlmCard],hlm-card',
@@ -9,7 +10,8 @@ import { classes } from '<%- importAlias %>/utils';
 	},
 })
 export class HlmCard {
-	public readonly size = input<'sm' | 'default'>('default');
+	private readonly _defaultConfig = injectHlmCardConfig();
+	public readonly size = input<HlmCardConfig['size']>(this._defaultConfig.size);
 
 	constructor() {
 		classes(() => 'spartan-card group/card flex flex-col');

package/src/generators/ui/libs/dropdown-menu/files/lib/hlm-dropdown-menu-item.ts.template

@@ -4,7 +4,7 @@ import { booleanAttribute, Directive, HOST_TAG_NAME, inject, input } from '@angu
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: '[hlmDropdownMenuItem]',
+	selector: '[hlmDropdownMenuItem],hlm-dropdown-menu-item',
 	hostDirectives: [
 		{
 			directive: CdkMenuItem,

package/src/generators/ui/libs/item/files/lib/hlm-item-actions.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemActions],hlm-item-actions',
-	host: {
-		'data-slot': 'item-actions',
-	},
+	host: { 'data-slot': 'item-actions' },
 })
 export class HlmItemActions {
 	constructor() {
-		classes(() => 'flex items-center gap-2');
+		classes(() => 'spartan-item-actions flex items-center');
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-content.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemContent],hlm-item-content',
-	host: {
-		'data-slot': 'item-content',
-	},
+	host: { 'data-slot': 'item-content' },
 })
 export class HlmItemContent {
 	constructor() {
-		classes(() => 'flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none');
+		classes(() => 'spartan-item-content flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none');
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-description.ts.template

@@ -2,16 +2,14 @@ import { Directive } from '@angular/core';
 import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
-	selector: 'p[hlmItemDescription]',
-	host: {
-		'data-slot': 'item-description',
-	},
+	selector: '[hlmItemDescription],hlm-item-description',
+	host: { 'data-slot': 'item-description' },
 })
 export class HlmItemDescription {
 	constructor() {
-		classes(() => [
-			'text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance',
-			'[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-		]);
+		classes(
+			() =>
+				'spartan-item-description [&>a:hover]:text-primary line-clamp-2 flex font-normal [&>a]:underline [&>a]:underline-offset-4',
+		);
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-footer.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemFooter],hlm-item-footer',
-	host: {
-		'data-slot': 'item-footer',
-	},
+	host: { 'data-slot': 'item-footer' },
 })
 export class HlmItemFooter {
 	constructor() {
-		classes(() => 'flex basis-full items-center justify-between gap-2');
+		classes(() => 'spartan-item-footer flex basis-full items-center justify-between');
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-group.ts.template

@@ -7,6 +7,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmItemGroup {
 	constructor() {
-		classes(() => 'group/item-group flex flex-col');
+		classes(() => 'spartan-item-group group/item-group flex w-full flex-col');
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-header.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemHeader],hlm-item-header',
-	host: {
-		'data-slot': 'item-header',
-	},
+	host: { 'data-slot': 'item-header' },
 })
 export class HlmItemHeader {
 	constructor() {
-		classes(() => 'flex basis-full items-center justify-between gap-2');
+		classes(() => 'spartan-item-header flex basis-full items-center justify-between');
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-media.ts.template

@@ -4,13 +4,13 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { injectHlmItemMediaConfig } from './hlm-item-token';
 
 const itemMediaVariants = cva(
-	'flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_ng-icon]:pointer-events-none',
+	'spartan-item-media flex shrink-0 items-center justify-center [&_ng-icon]:pointer-events-none',
 	{
 		variants: {
 			variant: {
-				default: 'bg-transparent',
-				icon: "bg-muted size-8 rounded-sm border [&_ng-icon:not([class*='text-'])]:text-base",
-				image: 'size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover',
+				default: 'spartan-item-media-variant-default',
+				icon: 'spartan-item-media-variant-icon',
+				image: 'spartan-item-media-variant-image',
 			},
 		},
 		defaultVariants: {

package/src/generators/ui/libs/item/files/lib/hlm-item-separator.ts.template

@@ -2,13 +2,14 @@ import { Directive } from '@angular/core';
 import { BrnSeparator } from '@spartan-ng/brain/separator';
 import { hlmSeparatorClass } from '<%- importAlias %>/separator';
 import { classes } from '<%- importAlias %>/utils';
+
 @Directive({
-	selector: 'div[hlmItemSeparator]',
+	selector: '[hlmItemSeparator],hlm-item-separator',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation'] }],
 	host: { 'data-slot': 'item-separator' },
 })
 export class HlmItemSeparator {
 	constructor() {
-		classes(() => [hlmSeparatorClass, 'my-0']);
+		classes(() => [hlmSeparatorClass, 'spartan-item-separator']);
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item-title.ts.template

@@ -3,12 +3,10 @@ import { classes } from '<%- importAlias %>/utils';
 
 @Directive({
 	selector: '[hlmItemTitle],hlm-item-title',
-	host: {
-		'data-slot': 'item-title',
-	},
+	host: { 'data-slot': 'item-title' },
 })
 export class HlmItemTitle {
 	constructor() {
-		classes(() => 'flex w-fit items-center gap-2 text-sm leading-snug font-medium');
+		classes(() => 'spartan-item-title line-clamp-1 flex w-fit items-center');
 	}
 }

package/src/generators/ui/libs/item/files/lib/hlm-item.ts.template

@@ -4,17 +4,18 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { injectHlmItemConfig } from './hlm-item-token';
 
 const itemVariants = cva(
-	'group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
+	'spartan-item group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors',
 	{
 		variants: {
 			variant: {
-				default: 'bg-transparent',
-				outline: 'border-border',
-				muted: 'bg-muted/50',
+				default: 'spartan-item-variant-default',
+				outline: 'spartan-item-variant-outline',
+				muted: 'spartan-item-variant-muted',
 			},
 			size: {
-				default: 'gap-4 p-4',
-				sm: 'gap-2.5 px-4 py-3',
+				default: 'spartan-item-size-default',
+				sm: 'spartan-item-size-sm',
+				xs: 'spartan-item-size-xs',
 			},
 		},
 		defaultVariants: {
@@ -27,7 +28,7 @@ const itemVariants = cva(
 export type ItemVariants = VariantProps<typeof itemVariants>;
 
 @Directive({
-	selector: 'div[hlmItem], a[hlmItem]',
+	selector: '[hlmItem],hlm-item',
 	host: {
 		'data-slot': 'item',
 		'[attr.data-variant]': 'variant()',

package/src/generators/ui/libs/kbd/files/lib/hlm-kbd-group.ts.template

@@ -9,6 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmKbdGroup {
 	constructor() {
-		classes(() => 'inline-flex items-center gap-1');
+		classes(() => 'spartan-kbd-group inline-flex items-center');
 	}
 }

package/src/generators/ui/libs/kbd/files/lib/hlm-kbd.ts.template

@@ -9,10 +9,6 @@ import { classes } from '<%- importAlias %>/utils';
 })
 export class HlmKbd {
 	constructor() {
-		classes(() => [
-			'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
-			"[&_ng-icon:not([class*='text-'])]:text-xs",
-			'[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
-		]);
+		classes(() => 'spartan-kbd pointer-events-none inline-flex items-center justify-center select-none');
 	}
 }

package/src/generators/ui/libs/separator/files/lib/hlm-separator.ts.template

@@ -3,11 +3,14 @@ import { BrnSeparator } from '@spartan-ng/brain/separator';
 import { classes } from '<%- importAlias %>/utils';
 
 export const hlmSeparatorClass =
-	'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';
+	'inline-flex shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch';
 
 @Directive({
 	selector: '[hlmSeparator],hlm-separator',
 	hostDirectives: [{ directive: BrnSeparator, inputs: ['orientation', 'decorative'] }],
+	host: {
+		'data-slot': 'separator',
+	},
 })
 export class HlmSeparator {
 	constructor() {

package/src/generators/ui/libs/spinner/files/lib/hlm-spinner.ts.template

@@ -27,6 +27,6 @@ export class HlmSpinner {
 	public readonly ariaLabel = input<string>('Loading', { alias: 'aria-label' });
 
 	constructor() {
-		classes(() => 'inline-flex size-fit text-base motion-safe:animate-spin');
+		classes(() => 'inline-flex text-[calc(var(--spacing)*4)] motion-safe:animate-spin');
 	}
 }