@spartan-ng/cli 0.0.1-alpha.507 → 0.0.1-alpha.508

package/generators.json

@@ -65,6 +65,7 @@
 			"schema": "./src/generators/migrate-progress/schema.json",
 			"description": "Migrate brn-progress to hlm-progress"
 		},
+
 		"migrate-date-picker": {
 			"factory": "./src/generators/migrate-date-picker/generator",
 			"schema": "./src/generators/migrate-date-picker/schema.json",
@@ -74,6 +75,11 @@
 			"factory": "./src/generators/migrate-hlm/generator",
 			"schema": "./src/generators/migrate-hlm/schema.json",
 			"description": "Migrate hlm import from @spartan-ng/brain to @spartan-ng/helm/utils"
+		},
+		"migrate-separator": {
+			"factory": "./src/generators/migrate-separator/generator",
+			"schema": "./src/generators/migrate-separator/schema.json",
+			"description": "Migrate brn-separator to hlm-separator"
 		}
 	},
 	"schematics": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartan-ng/cli",
-  "version": "0.0.1-alpha.507",
+  "version": "0.0.1-alpha.508",
   "type": "commonjs",
   "dependencies": {
     "@nx/angular": ">=20.0.0",

package/src/generators/healthcheck/generator.js

@@ -5,6 +5,7 @@ const devkit_1 = require("@nx/devkit");
 const healthchecks_1 = require("./healthchecks");
 const brain_imports_1 = require("./healthchecks/brain-imports");
 const brn_radio_1 = require("./healthchecks/brn-radio");
+const brn_separator_1 = require("./healthchecks/brn-separator");
 const brn_toggle_group_1 = require("./healthchecks/brn-toggle-group");
 const core_imports_1 = require("./healthchecks/core-imports");
 const helm_imports_1 = require("./healthchecks/helm-imports");
@@ -35,6 +36,7 @@ async function healthcheckGenerator(tree, options) {
         hlm_date_picker_1.datePickerHealthcheck,
         hlm_progress_1.progressHealthcheck,
         hlm_1.hlmImportHealthcheck,
+        brn_separator_1.brainSeparatorHealthcheck,
     ];
     const failedReports = [];
     for (const healthcheck of healthchecks) {

package/src/generators/healthcheck/generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/healthcheck/generator.ts"],"names":[],"mappings":";;AAoBA,oDA2CC;AA/DD,uCAAuD;AACvD,iDAAyG;AACzG,gEAAuE;AACvE,wDAAiE;AACjE,sEAAyE;AACzE,8DAAqE;AACrE,8DAAqE;AACrE,4CAA0D;AAC1D,oEAAuE;AACvE,sDAA8D;AAC9D,8DAAkE;AAClE,oEAAuE;AACvE,0DAA8D;AAC9D,0EAAgF;AAChF,oDAA4D;AAE5D,2CAA4C;AAC5C,+CAA+C;AAC/C,2CAAgD;AAEzC,KAAK,UAAU,oBAAoB,CAAC,IAAU,EAAE,OAA8D;IACpH,eAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAkB;QACnC,4BAAkB;QAClB,uCAAuB;QACvB,qCAAsB;QACtB,8BAAmB;QACnB,uCAAqB;QACrB,iCAAqB;QACrB,8BAAiB;QACjB,yCAAsB;QACtB,qCAAsB;QACtB,gDAA2B;QAC3B,uCAAqB;QACrB,kCAAmB;QACnB,0BAAoB;KACpB,CAAC;IAEF,MAAM,aAAa,GAAwB,EAAE,CAAC;IAE9C,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACvD,IAAA,sBAAW,EAAC,MAAM,CAAC,CAAC;QAEpB,IAAI,MAAM,CAAC,MAAM,KAAK,gCAAiB,CAAC,OAAO,EAAE,CAAC;YACjD,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACF,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,OAAO,IAAI,IAAA,mCAAoB,EAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;YAChE,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM,IAAA,mBAAU,EAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YAE7E,IAAI,GAAG,EAAE,CAAC;gBACT,MAAM,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;YACxE,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACzB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,kBAAe,oBAAoB,CAAC"}
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/healthcheck/generator.ts"],"names":[],"mappings":";;AAqBA,oDA4CC;AAjED,uCAAuD;AACvD,iDAAyG;AACzG,gEAAuE;AACvE,wDAAiE;AACjE,gEAAyE;AACzE,sEAAyE;AACzE,8DAAqE;AACrE,8DAAqE;AACrE,4CAA0D;AAC1D,oEAAuE;AACvE,sDAA8D;AAC9D,8DAAkE;AAClE,oEAAuE;AACvE,0DAA8D;AAC9D,0EAAgF;AAChF,oDAA4D;AAE5D,2CAA4C;AAC5C,+CAA+C;AAC/C,2CAAgD;AAEzC,KAAK,UAAU,oBAAoB,CAAC,IAAU,EAAE,OAA8D;IACpH,eAAM,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEvC,MAAM,YAAY,GAAkB;QACnC,4BAAkB;QAClB,uCAAuB;QACvB,qCAAsB;QACtB,8BAAmB;QACnB,uCAAqB;QACrB,iCAAqB;QACrB,8BAAiB;QACjB,yCAAsB;QACtB,qCAAsB;QACtB,gDAA2B;QAC3B,uCAAqB;QACrB,kCAAmB;QACnB,0BAAoB;QACpB,yCAAyB;KACzB,CAAC;IAEF,MAAM,aAAa,GAAwB,EAAE,CAAC;IAE9C,KAAK,MAAM,WAAW,IAAI,YAAY,EAAE,CAAC;QACxC,MAAM,MAAM,GAAG,MAAM,IAAA,uBAAc,EAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QACvD,IAAA,sBAAW,EAAC,MAAM,CAAC,CAAC;QAEpB,IAAI,MAAM,CAAC,MAAM,KAAK,gCAAiB,CAAC,OAAO,EAAE,CAAC;YACjD,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5B,CAAC;IACF,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,aAAa,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,OAAO,IAAI,IAAA,mCAAoB,EAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC;YAChE,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,IAAI,CAAC,MAAM,IAAA,mBAAU,EAAC,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YAE7E,IAAI,GAAG,EAAE,CAAC;gBACT,MAAM,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;YACxE,CAAC;QACF,CAAC;IACF,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;QACzB,MAAM,IAAA,oBAAW,EAAC,IAAI,CAAC,CAAC;IACzB,CAAC;AACF,CAAC;AAED,kBAAe,oBAAoB,CAAC"}

package/src/generators/healthcheck/healthchecks/brn-separator.d.ts

@@ -0,0 +1,2 @@
+import { Healthcheck } from '../healthchecks';
+export declare const brainSeparatorHealthcheck: Healthcheck;

package/src/generators/healthcheck/healthchecks/brn-separator.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.brainSeparatorHealthcheck = void 0;
+const devkit_1 = require("@nx/devkit");
+const generator_1 = require("../../migrate-separator/generator");
+const healthchecks_1 = require("../healthchecks");
+exports.brainSeparatorHealthcheck = {
+    name: 'Brain Separator',
+    async detect(tree, failure) {
+        (0, devkit_1.visitNotIgnoredFiles)(tree, '/', (file) => {
+            // if the file is a .ts or .htlm file, check for brain separator
+            if (!file.endsWith('.ts') && !file.endsWith('.html')) {
+                return;
+            }
+            // if it is the HlmSeparator itself skip it.
+            if (file.endsWith('hlm-separator.ts')) {
+                return;
+            }
+            const contents = tree.read(file, 'utf-8');
+            if (!contents) {
+                return;
+            }
+            if (contents.includes('<brn-separator')) {
+                failure(`The <brn-separator> component is deprecated. Please use the <hlm-separator> instead.`, healthchecks_1.HealthcheckSeverity.Error, true);
+            }
+        });
+    },
+    fix: async (tree) => {
+        await (0, generator_1.migrateSeparatorGenerator)(tree, { skipFormat: true });
+        return true;
+    },
+    prompt: 'Would you like to migrate brain separator?',
+};
+//# sourceMappingURL=brn-separator.js.map

package/src/generators/healthcheck/healthchecks/brn-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"brn-separator.js","sourceRoot":"","sources":["../../../../../../../libs/cli/src/generators/healthcheck/healthchecks/brn-separator.ts"],"names":[],"mappings":";;;AAAA,uCAAkD;AAClD,iEAA8E;AAC9E,kDAAmE;AAEtD,QAAA,yBAAyB,GAAgB;IACrD,IAAI,EAAE,iBAAiB;IACvB,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO;QACzB,IAAA,6BAAoB,EAAC,IAAI,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACxC,gEAAgE;YAChE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC;gBACtD,OAAO;YACR,CAAC;YAED,4CAA4C;YAC5C,IAAI,IAAI,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;gBACvC,OAAO;YACR,CAAC;YAED,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;YAE1C,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACf,OAAO;YACR,CAAC;YAED,IAAI,QAAQ,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBACzC,OAAO,CACN,sFAAsF,EACtF,kCAAmB,CAAC,KAAK,EACzB,IAAI,CACJ,CAAC;YACH,CAAC;QACF,CAAC,CAAC,CAAC;IACJ,CAAC;IACD,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QACnB,MAAM,IAAA,qCAAyB,EAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;QAC5D,OAAO,IAAI,CAAC;IACb,CAAC;IACD,MAAM,EAAE,4CAA4C;CACpD,CAAC"}

package/src/generators/migrate-separator/compat.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (generatorOptions: import("./schema").MigrateSeparatorGeneratorSchema) => (tree: any, context: any) => Promise<any>;
+export default _default;

package/src/generators/migrate-separator/compat.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const devkit_1 = require("@nx/devkit");
+const generator_1 = tslib_1.__importDefault(require("./generator"));
+exports.default = (0, devkit_1.convertNxGenerator)(generator_1.default);
+//# sourceMappingURL=compat.js.map

package/src/generators/migrate-separator/compat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compat.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-separator/compat.ts"],"names":[],"mappings":";;;AAAA,uCAAgD;AAChD,oEAAoD;AAEpD,kBAAe,IAAA,2BAAkB,EAAC,mBAAyB,CAAC,CAAC"}

package/src/generators/migrate-separator/generator.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { MigrateSeparatorGeneratorSchema } from './schema';
+export declare function migrateSeparatorGenerator(tree: Tree, { skipFormat }: MigrateSeparatorGeneratorSchema): Promise<void>;
+export default migrateSeparatorGenerator;

package/src/generators/migrate-separator/generator.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.migrateSeparatorGenerator = migrateSeparatorGenerator;
+const devkit_1 = require("@nx/devkit");
+const visit_files_1 = require("../../utils/visit-files");
+async function migrateSeparatorGenerator(tree, { skipFormat }) {
+    updateImports(tree);
+    replaceSelector(tree);
+    if (!skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
+}
+function replaceSelector(tree) {
+    // if the element is `<brn-separator hlmSeparator` then we need to replace it with `<hlm-separator`
+    // we also need to replace the closing tag `</brn-separator>` with `</hlm-separator>`
+    (0, visit_files_1.visitFiles)(tree, '.', (path) => {
+        // if this is not an html file or typescript file (inline templates) then skip
+        if (!path.endsWith('.html') && !path.endsWith('.ts')) {
+            return;
+        }
+        let content = tree.read(path, 'utf-8');
+        if (!content) {
+            return;
+        }
+        // <brn-separator hlmSeparator but between
+        content = replaceBrnSeparator(content);
+        content = content.replace(/<\/brn-separator>/g, '</hlm-separator>');
+        tree.write(path, content);
+    });
+}
+function replaceBrnSeparator(input) {
+    // Split input to handle multiple tags separately
+    return input
+        .split(/(?=<)/)
+        .map((tag) => {
+        // Skip if not a brn-separator tag
+        if (!tag.startsWith('<brn-separator')) {
+            return tag;
+        }
+        // Remove line breaks, tabs, and other whitespace within the tag
+        // Replace with a single space
+        tag = tag.replace(/\s+/g, ' ');
+        // Check if standalone hlm attribute exists
+        const hasHlm = / hlmSeparator(?=[\s>])/.test(tag);
+        if (hasHlm) {
+            // Remove the hlm attribute and convert to hlm-separator
+            return tag
+                .replace(/<brn-separator/, '<hlm-separator')
+                .replace(/ hlmSeparator(?=[\s>])/, '')
+                .replace(/\s+>/g, '>')
+                .replace(/\s+/g, ' ');
+        }
+        return tag;
+    })
+        .join('');
+}
+/**
+ * Update imports remove BrnSeparator import
+ */
+function updateImports(tree) {
+    (0, visit_files_1.visitFiles)(tree, '/', (path) => {
+        // skip HlmSeparator itself
+        if (path.endsWith('hlm-separator.ts')) {
+            return;
+        }
+        const content = tree.read(path).toString('utf-8');
+        if (content.includes('@spartan-ng/brain/separator') || content.includes('@spartan-ng/ui-separator-helm')) {
+            const updatedContent = content
+                // Handle `import { BrnSeparator } from '@spartan-ng/brain/separator';`
+                .replace("import { BrnSeparator } from '@spartan-ng/brain/separator';", '')
+                // Remove `BrnSeparator` with optional comma and whitespace
+                .replace(/BrnSeparator,?\s?/, '');
+            tree.write(path, updatedContent);
+        }
+    });
+}
+exports.default = migrateSeparatorGenerator;
+//# sourceMappingURL=generator.js.map

package/src/generators/migrate-separator/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.js","sourceRoot":"","sources":["../../../../../../libs/cli/src/generators/migrate-separator/generator.ts"],"names":[],"mappings":"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"}

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

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

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

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

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

@@ -22,6 +22,6 @@ export class HlmAccordionContent extends BrnAccordionContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() => {
 		const gridRows = this.state() === 'open' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]';
-		return hlm('text-sm transition-all grid', gridRows, this.userClass());
+		return hlm('grid text-sm transition-all', gridRows, this.userClass());
 	});
 }

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

@@ -18,6 +18,6 @@ import type { ClassValue } from 'clsx';
 export class HlmAccordionItem {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
-		hlm('flex flex-1 flex-col border-b border-border', this.userClass()),
+		hlm('border-border flex flex-1 flex-col border-b', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-accordion-helm/files/lib/hlm-accordion-trigger.ts.template

@@ -15,7 +15,7 @@ export class HlmAccordionTrigger {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
+			'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>[hlmAccIcon]]:rotate-180',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-content.ts.template

@@ -22,7 +22,7 @@ export class HlmAlertDialogContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative bg-background data-[state=open]:animate-in justify-self-center data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 mx-auto grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg data-[state=closed]:duration-200 data-[state=open]:duration-200 sm:mx-0 sm:max-w-lg',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-alert-dialog-helm/files/lib/hlm-alert-dialog-overlay.ts.template

@@ -12,7 +12,7 @@ export class HlmAlertDialogOverlay {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+			'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-black/50',
 			this.userClass(),
 		),
 	);

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

@@ -4,13 +4,13 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 const alertVariants = cva(
-	'relative w-full rounded-lg border px-4 py-3 text-sm has-[>[hlmAlertIcon]]:grid has-[>[hlmAlertIcon]]:grid-cols-[calc(theme(spacing.1)*4)_1fr] has-[>[hlmAlertIcon]]:gap-x-3 gap-y-0.5 items-start [&>[hlmAlertIcon]]:size-4 [&>[hlmAlertIcon]]:translate-y-0.5 [&>[hlmAlertIcon]]:text-current',
+	'relative w-full items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>[hlmAlertIcon]]:grid has-[>[hlmAlertIcon]]:grid-cols-[calc(theme(spacing.1)*4)_1fr] has-[>[hlmAlertIcon]]:gap-x-3 [&>[hlmAlertIcon]]:size-4 [&>[hlmAlertIcon]]:translate-y-0.5 [&>[hlmAlertIcon]]:text-current',
 	{
 		variants: {
 			variant: {
 				default: 'bg-card text-card-foreground',
 				destructive:
-					'text-destructive bg-card [&>[hlmAlertIcon]]:text-current [&>[hlmAlertDescription]]:text-destructive/90 [&>[hlmAlertDesc]]:text-destructive/90',
+					'text-destructive bg-card [&>[hlmAlertDescription]]:text-destructive/90 [&>[hlmAlertDesc]]:text-destructive/90 [&>[hlmAlertIcon]]:text-current',
 			},
 		},
 		defaultVariants: {

package/src/generators/ui/libs/ui-aspect-ratio-helm/files/lib/helm-aspect-ratio.ts.template

@@ -34,7 +34,7 @@ export class HlmAspectRatio {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'relative w-full [&>*:first-child]:absolute [&>*:first-child]:w-full [&>*:first-child]:h-full [&>*:first-child]:object-cover',
+			'relative w-full [&>*:first-child]:absolute [&>*:first-child]:h-full [&>*:first-child]:w-full [&>*:first-child]:object-cover',
 			this.userClass(),
 		),
 	);

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

@@ -22,6 +22,6 @@ export class HlmAvatar extends BrnAvatar {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('relative flex shrink-0 overflow-hidden rounded-full size-8', this.userClass()),
+		hlm('relative flex size-8 shrink-0 overflow-hidden rounded-full', this.userClass()),
 	);
 }

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

@@ -4,14 +4,14 @@ import { type VariantProps, cva } from 'class-variance-authority';
 import type { ClassValue } from 'clsx';
 
 const badgeVariants = cva(
-	'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&_ng-icon]:size-3 gap-1 [&_ng-icon]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+	'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 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-md border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&_ng-icon]:pointer-events-none [&_ng-icon]:size-3',
 	{
 		variants: {
 			variant: {
-				default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-				secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent',
+				secondary: 'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent',
 				destructive:
-					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+					'bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white',
 				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
 			},
 		},

package/src/generators/ui/libs/ui-breadcrumb-helm/files/lib/hlm-breadcrumb-list.ts.template

@@ -12,6 +12,6 @@ export class HlmBreadcrumbList {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
 	protected readonly _computedClass = computed(() =>
-		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', this.userClass()),
+		hlm('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5', this.userClass()),
 	);
 }

package/src/generators/ui/libs/ui-breadcrumb-helm/files/lib/hlm-breadcrumb-page.ts.template

@@ -14,5 +14,5 @@ import type { ClassValue } from 'clsx';
 export class HlmBreadcrumbPage {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() => hlm('font-normal text-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-foreground font-normal', this.userClass()));
 }

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

@@ -24,5 +24,5 @@ import type { ClassValue } from 'clsx';
 export class HlmBreadcrumbSeparator {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 
-	protected readonly _computedClass = computed(() => hlm('[&_ng-icon]:size-3.5 [&_ng-icon]:block', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('[&_ng-icon]:block [&_ng-icon]:size-3.5', this.userClass()));
 }

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

@@ -6,22 +6,22 @@ import type { ClassValue } from 'clsx';
 import { injectBrnButtonConfig } from './hlm-button.token';
 
 export const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none shrink-0 [&_ng-icon]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive cursor-default',
+	'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 cursor-default items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 	{
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
 				destructive:
-					'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+					'bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white',
 				outline:
-					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+					'bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border',
 				secondary: 'bg-secondary text-secondary-foreground shadow-xs 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',
 			},
 			size: {
 				default: 'h-9 px-4 py-2 has-[>ng-icon]:px-3',
-				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>ng-icon]:px-2.5',
+				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',
 			},

package/src/generators/ui/libs/ui-calendar-helm/files/lib/hlm-calendar-multi.ts.template

@@ -182,7 +182,7 @@ export class HlmCalendarMulti<T> {
 	protected readonly _btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
 		'size-8 p-0 font-normal aria-selected:opacity-100',
-		'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',
+		'data-[outside]:text-muted-foreground data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:opacity-30',
 		'data-[today]:bg-accent data-[today]:text-accent-foreground',
 		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',

package/src/generators/ui/libs/ui-calendar-helm/files/lib/hlm-calendar-range.ts.template

@@ -180,6 +180,6 @@ export class HlmCalendarRange<T> {
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
 		'data-[range-start]:rounded-l-md',
 		'data-[range-end]:rounded-r-md',
-		'data-[range-between]:rounded-none data-[range-between]:bg-accent data-[range-between]:text-accent-foreground',
+		'data-[range-between]:bg-accent data-[range-between]:text-accent-foreground data-[range-between]:rounded-none',
 	);
 }

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

@@ -170,7 +170,7 @@ export class HlmCalendar<T> {
 	protected readonly _btnClass = hlm(
 		buttonVariants({ variant: 'ghost' }),
 		'size-8 p-0 font-normal aria-selected:opacity-100',
-		'data-[outside]:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:aria-selected:opacity-30',
+		'data-[outside]:text-muted-foreground data-[outside]:aria-selected:bg-accent/50 data-[outside]:aria-selected:text-muted-foreground data-[outside]:opacity-50 data-[outside]:aria-selected:opacity-30',
 		'data-[today]:bg-accent data-[today]:text-accent-foreground',
 		'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary dark:hover:text-accent-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
 		'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',

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

@@ -10,5 +10,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmCardFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('flex items-center px-6 [.border-t]:pt-6', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('[.border-t]:pt-6 flex items-center px-6', this.userClass()));
 }

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

@@ -12,7 +12,7 @@ export class HlmCardHeader {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+			'@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6',
 			this.userClass(),
 		),
 	);

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

@@ -10,5 +10,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmCardTitle {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('leading-none font-semibold', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('font-semibold leading-none', this.userClass()));
 }

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

@@ -66,7 +66,7 @@ export class HlmCheckbox implements ControlValueAccessor {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-default',
+			'border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer size-4 shrink-0 cursor-default rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
 			this.userClass(),
 			this._state().disabled() ? 'cursor-not-allowed opacity-50' : '',
 		),

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-dialog-close-button.ts.template

@@ -17,7 +17,7 @@ export class HlmCommandDialogCloseButton {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'absolute top-3 right-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring font-medium h-10 hover:bg-accent hover:text-accent-foreground inline-flex items-center justify-center px-4 py-2 ring-offset-background rounded-md text-sm transition-colors !h-5 !p-1 !w-5',
+			'focus-visible:ring-ring hover:bg-accent hover:text-accent-foreground ring-offset-background absolute right-3 top-3 inline-flex !h-5 h-10 !w-5 items-center justify-center rounded-md !p-1 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			this.userClass(),
 		),
 	);

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

@@ -22,6 +22,6 @@ export class HlmCommandGroup {
 
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('text-foreground overflow-hidden p-1 block data-[hidden]:hidden', this.userClass()),
+		hlm('text-foreground block overflow-hidden p-1 data-[hidden]:hidden', this.userClass()),
 	);
 }

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

@@ -38,7 +38,7 @@ export class HlmCommandItem {
 	/*** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base w-full data-[hidden]:hidden',
+			'data-[selected]:bg-accent data-[selected=true]:text-accent-foreground [&>ng-icon]:text-muted-foreground outline-hidden relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:pointer-events-none data-[hidden]:hidden data-[disabled]:opacity-50 [&>ng-icon]:pointer-events-none [&>ng-icon]:shrink-0 [&>ng-icon]:text-base',
 			this.userClass(),
 		),
 	);

package/src/generators/ui/libs/ui-command-helm/files/lib/hlm-command-list.ts.template

@@ -22,6 +22,6 @@ export class HlmCommandList {
 
 	/** The styles to apply  */
 	protected readonly _computedClass = computed(() =>
-		hlm('max-h-[300px] overflow-x-hidden overflow-y-auto', this.userClass()),
+		hlm('max-h-[300px] overflow-y-auto overflow-x-hidden', this.userClass()),
 	);
 }

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

@@ -15,5 +15,5 @@ export class HlmCommandSeparator {
 	public readonly userClass = input<string>('', { alias: 'class' });
 
 	/*** The styles to apply  */
-	protected readonly _computedClass = computed(() => hlm('block bg-border -mx-1 h-px', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('bg-border -mx-1 block h-px', this.userClass()));
 }

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker-multi.ts.template

@@ -73,8 +73,8 @@ export class HlmDatePickerMulti<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-all border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal',
-			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-10 w-[280px] items-center justify-start gap-2 whitespace-nowrap rounded-md border px-4 py-2 text-left text-sm font-normal transition-all',
+			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 			!this._mutableDate() ? 'text-muted-foreground' : '',

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-picker.ts.template

@@ -70,8 +70,8 @@ export class HlmDatePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 ring-offset-background border border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground h-9 px-3 py-2 w-[280px] justify-start text-left font-normal cursor-default justify-between',
-			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent dark:bg-input/30 dark:hover:bg-input/50 hover:text-accent-foreground inline-flex h-9 w-[280px] cursor-default items-center justify-start justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-left text-sm font-normal transition-all disabled:pointer-events-none disabled:opacity-50',
+			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 			!this._mutableDate() ? 'text-muted-foreground' : '',

package/src/generators/ui/libs/ui-date-picker-helm/files/lib/hlm-date-range-picker.ts.template

@@ -78,8 +78,8 @@ export class HlmDateRangePicker<T> implements ControlValueAccessor {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'inline-flex items-center gap-2 whitespace-nowrap rounded-md text-sm ring-offset-background transition-all border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[280px] justify-start text-left font-normal',
-			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+			'ring-offset-background border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex h-10 w-[280px] items-center justify-start gap-2 whitespace-nowrap rounded-md border px-4 py-2 text-left text-sm font-normal transition-all',
+			'focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
 			'disabled:pointer-events-none disabled:opacity-50',
 			'[&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0',
 			!this._mutableDate() ? 'text-muted-foreground' : '',

package/src/generators/ui/libs/ui-dialog-helm/files/lib/hlm-dialog-close.ts.template

@@ -13,7 +13,7 @@ export class HlmDialogClose {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+			'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-xs absolute right-4 top-4 flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none [&_ng-icon]:shrink-0',
 			this.userClass(),
 		),
 	);

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

@@ -43,7 +43,7 @@ export class HlmDialogContent {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'border-border grid w-full max-w-lg relative gap-4 border bg-background p-6 shadow-lg [animation-duration:200] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-[2%]  data-[state=open]:slide-in-from-top-[2%] sm:rounded-lg md:w-full',
+			'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 relative z-50 mx-auto grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg data-[state=closed]:duration-200 data-[state=open]:duration-200 sm:mx-0 sm:max-w-lg',
 			this.userClass(),
 			this._dynamicComponentClass,
 		),

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

@@ -12,5 +12,5 @@ import type { ClassValue } from 'clsx';
 })
 export class HlmDialogDescription {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
-	protected readonly _computedClass = computed(() => hlm('text-sm text-muted-foreground', this.userClass()));
+	protected readonly _computedClass = computed(() => hlm('text-muted-foreground text-sm', this.userClass()));
 }

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

@@ -15,6 +15,6 @@ import type { ClassValue } from 'clsx';
 export class HlmDialogFooter {
 	public readonly userClass = input<ClassValue>('', { alias: 'class' });
 	protected _computedClass = computed(() =>
-		hlm('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.userClass()),
+		hlm('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', this.userClass()),
 	);
 }