@spartan-ng/cli 0.0.1-alpha.650 → 0.0.1-alpha.652

package/src/generators/migrate-sonner/schema.d.ts

@@ -0,0 +1,3 @@
+export interface MigrateSonnerGeneratorSchema {
+	skipFormat?: boolean;
+}

package/src/generators/migrate-sonner/schema.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "http://json-schema.org/draft-07/schema",
+	"$id": "MigrateSonner",
+	"title": "",
+	"type": "object",
+	"properties": {
+		"skipFormat": {
+			"type": "boolean",
+			"default": false,
+			"description": "Skip formatting files"
+		}
+	},
+	"required": []
+}

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

@@ -1,33 +1,31 @@
 import { Directive, input, signal } from '@angular/core';
 import { BrnButton } from '@spartan-ng/brain/button';
 import { classes } from '<%- importAlias %>/utils';
-import { type VariantProps, cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
 
 export const buttonVariants = cva(
-	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all 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",
+	'spartan-button group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 	{
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-				destructive:
-					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
-				outline:
-					'bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs',
-				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-				link: 'text-primary underline-offset-4 hover:underline',
+				default: 'spartan-button-variant-default',
+				outline: 'spartan-button-variant-outline',
+				secondary: 'spartan-button-variant-secondary',
+				ghost: 'spartan-button-variant-ghost',
+				destructive: 'spartan-button-variant-destructive',
+				link: 'spartan-button-variant-link',
 			},
 			size: {
-				default: 'h-9 px-4 py-2 has-[>ng-icon]:px-3',
-				xs: `h-6 gap-1 rounded-md px-2 text-xs has-[>ng-icon]:px-1.5 [&_ng-icon:not([class*='text-'])]:text-xs`,
-				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>ng-icon]:px-2.5',
-				lg: 'h-10 rounded-md px-6 has-[>ng-icon]:px-4',
-				icon: 'size-9',
-				'icon-xs': `size-6 rounded-md [&_ng-icon:not([class*='text-'])]:text-xs`,
-				'icon-sm': 'size-8',
-				'icon-lg': 'size-10',
+				default: 'spartan-button-size-default',
+				xs: 'spartan-button-size-xs',
+				sm: 'spartan-button-size-sm',
+				lg: 'spartan-button-size-lg',
+				icon: 'spartan-button-size-icon',
+				'icon-xs': 'spartan-button-size-icon-xs',
+				'icon-sm': 'spartan-button-size-icon-sm',
+				'icon-lg': 'spartan-button-size-icon-lg',
 			},
 		},
 		defaultVariants: {

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

@@ -1,15 +1,18 @@
 import type { BooleanInput, NumberInput } from '@angular/cdk/coercion';
 import { ChangeDetectionStrategy, Component, booleanAttribute, computed, input, numberAttribute } from '@angular/core';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCircleCheck, lucideInfo, lucideLoader2, lucideOctagonX, lucideTriangleAlert } from '@ng-icons/lucide';
+import { BrnSonnerImports, type ToasterProps } from '@spartan-ng/brain/sonner';
 import { hlm } from '<%- importAlias %>/utils';
 import type { ClassValue } from 'clsx';
-import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 
 @Component({
 	selector: 'hlm-toaster',
-	imports: [NgxSonnerToaster],
+	imports: [BrnSonnerImports, NgIcon],
+	providers: [provideIcons({ lucideCircleCheck, lucideInfo, lucideTriangleAlert, lucideOctagonX, lucideLoader2 })],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `
-		<ngx-sonner-toaster
+		<brn-sonner-toaster
 			[class]="_computedClass()"
 			[invert]="invert()"
 			[theme]="theme()"
@@ -22,9 +25,24 @@ import { NgxSonnerToaster, type ToasterProps } from 'ngx-sonner';
 			[closeButton]="closeButton()"
 			[toastOptions]="toastOptions()"
 			[offset]="offset()"
-			[dir]="dir()"
 			[style]="userStyle()"
-		/>
+		>
+			<ng-template #loadingIcon>
+				<ng-icon name="lucideLoader2" class="overflow-visible! text-base [&>svg]:motion-safe:animate-spin" />
+			</ng-template>
+			<ng-template #successIcon>
+				<ng-icon name="lucideCircleCheck" class="overflow-visible! text-base" />
+			</ng-template>
+			<ng-template #errorIcon>
+				<ng-icon name="lucideOctagonX" class="overflow-visible! text-base" />
+			</ng-template>
+			<ng-template #infoIcon>
+				<ng-icon name="lucideInfo" class="overflow-visible! text-base" />
+			</ng-template>
+			<ng-template #warningIcon>
+				<ng-icon name="lucideTriangleAlert" class="overflow-visible! text-base" />
+			</ng-template>
+		</brn-sonner-toaster>
 	`,
 })
 export class HlmToaster {
@@ -51,7 +69,6 @@ export class HlmToaster {
 	});
 	public readonly toastOptions = input<ToasterProps['toastOptions']>({});
 	public readonly offset = input<ToasterProps['offset']>(null);
-	public readonly dir = input<ToasterProps['dir']>('auto');
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	public readonly userStyle = input<Record<string, string>>(
 		{

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

@@ -14,8 +14,8 @@ export const tooltipPositionVariants = cva('absolute', {
 		position: {
 			top: 'bottom-0 left-[calc(50%-5px)] translate-y-full',
 			bottom: '-top-2.5 left-[calc(50%-5px)] translate-y-0 rotate-180',
-			left: 'top-[calc(50%-5px)] -right-2.5 translate-y-0 rotate-270',
-			right: 'top-[calc(50%-5px)] -left-2.5 translate-y-0 rotate-90',
+			left: '-end-2.5 top-[calc(50%-5px)] translate-y-0 rotate-270 rtl:-rotate-270',
+			right: '-start-2.5 top-[calc(50%-5px)] translate-y-0 rotate-90 rtl:-rotate-90',
 		},
 	},
 });

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

@@ -18,7 +18,6 @@ export function hlm(...inputs: ClassValue[]) {
 
 // Global map to track class managers per element
 const elementClassManagers = new WeakMap<HTMLElement, ElementClassManager>();
-
 // Global mutation observer for all elements
 let globalObserver: MutationObserver | null = null;
 const observedElements = new Set<HTMLElement>();
@@ -30,6 +29,13 @@ interface ElementClassManager {
 	isUpdating: boolean;
 	nextOrder: number;
 	hasInitialized: boolean;
+	restoreRafId: number | null;
+	/** Transitions are suppressed until the first effect writes correct classes */
+	transitionsSuppressed: boolean;
+	/** Original inline transition value to restore after suppression (empty string = none was set) */
+	previousTransition: string;
+	/** Original inline transition priority to preserve !important when restoring */
+	previousTransitionPriority: string;
 }
 
 let sourceCounter = 0;
@@ -72,12 +78,26 @@ export function classes(computed: () => ClassValue[] | string, options: ClassesO
 				isUpdating: false,
 				nextOrder: 0,
 				hasInitialized: false,
+				restoreRafId: null,
+				transitionsSuppressed: false,
+				previousTransition: '',
+				previousTransitionPriority: '',
 			};
 			elementClassManagers.set(element, manager);
 
 			// Setup global observer if needed and register this element
 			setupGlobalObserver(platformId);
 			observedElements.add(element);
+
+			// Suppress transitions until the first effect writes correct classes and
+			// the browser has painted them. This prevents CSS transition animations
+			// during hydration when classes change from SSR state to client state.
+			if (isPlatformBrowser(platformId)) {
+				manager.previousTransition = element.style.getPropertyValue('transition');
+				manager.previousTransitionPriority = element.style.getPropertyPriority('transition');
+				element.style.setProperty('transition', 'none', 'important');
+				manager.transitionsSuppressed = true;
+			}
 		}
 
 		// Assign order once at registration time
@@ -95,10 +115,31 @@ export function classes(computed: () => ClassValue[] | string, options: ClassesO
 
 			// Update the element
 			updateElement(manager!);
+
+			// Re-enable transitions after the first effect writes correct classes.
+			// Deferred to next animation frame so the browser paints the class change
+			// with transitions disabled first, then re-enables them.
+			if (manager!.transitionsSuppressed) {
+				manager!.transitionsSuppressed = false;
+				manager!.restoreRafId = requestAnimationFrame(() => {
+					manager!.restoreRafId = null;
+					restoreTransitionSuppression(manager!);
+				});
+			}
 		}
 
 		// Register cleanup with DestroyRef
 		destroyRef.onDestroy(() => {
+			if (manager!.restoreRafId !== null) {
+				cancelAnimationFrame(manager!.restoreRafId);
+				manager!.restoreRafId = null;
+			}
+
+			if (manager!.transitionsSuppressed) {
+				manager!.transitionsSuppressed = false;
+				restoreTransitionSuppression(manager!);
+			}
+
 			// Remove this source from the manager
 			manager!.sources.delete(sourceId);
 
@@ -120,6 +161,15 @@ export function classes(computed: () => ClassValue[] | string, options: ClassesO
 	});
 }
 
+function restoreTransitionSuppression(manager: ElementClassManager): void {
+	const prev = manager.previousTransition;
+	if (prev) {
+		manager.element.style.setProperty('transition', prev, manager.previousTransitionPriority || undefined);
+	} else {
+		manager.element.style.removeProperty('transition');
+	}
+}
+
 // eslint-disable-next-line @typescript-eslint/no-wrapper-object-types
 function setupGlobalObserver(platformId: Object): void {
 	if (isPlatformBrowser(platformId) && !globalObserver) {
@@ -207,7 +257,7 @@ function updateElement(manager: ElementClassManager): void {
 	// Combine base classes with all source classes, ensuring base classes take precedence
 	const classesToApply =
 		allSourceClasses.length > 0 || manager.baseClasses.size > 0
-			? twMerge(clsx([...allSourceClasses, ...manager.baseClasses]))
+			? hlm([...allSourceClasses, ...manager.baseClasses])
 			: '';
 
 	// Apply the classes to the element