feat: field polishing

apps/app/src/app/pages/(components)/components/(field)/field--checkbox.preview.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
+import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
 
 @Component({
 	selector: 'spartan-field-checkbox-preview',
-	imports: [HlmFieldImports, HlmCheckbox],
+	imports: [HlmFieldImports, HlmCheckboxImports],
 	host: {
 		class: 'w-full max-w-md',
 	},

apps/app/src/app/pages/(components)/components/(field)/field--group.preview.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
+import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
 
 @Component({
 	selector: 'spartan-field-group-preview',
-	imports: [HlmFieldImports, HlmCheckbox],
+	imports: [HlmFieldImports, HlmCheckboxImports],
 	host: {
 		class: 'w-full max-w-md',
 	},

apps/app/src/app/pages/(components)/components/(field)/field--input.preview.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
-import { HlmInput } from '@spartan-ng/helm/input';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmInputImports } from '@spartan-ng/helm/input';
 
 @Component({
 	selector: 'spartan-field-input-preview',
-	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmInput],
+	imports: [HlmFieldImports, HlmInputImports],
 	host: {
 		class: 'w-full max-w-md',
 	},

apps/app/src/app/pages/(components)/components/(field)/field--responsive-layout.preview.ts

@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
-import { HlmButton } from '@spartan-ng/helm/button';
+import { HlmButtonImports } from '@spartan-ng/helm/button';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
-import { HlmInput } from '@spartan-ng/helm/input';
-import { HlmTextarea } from '@spartan-ng/helm/textarea';
+import { HlmInputImports } from '@spartan-ng/helm/input';
+import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
 
 @Component({
 	selector: 'spartan-field-responsive-layout-preview',
-	imports: [HlmFieldImports, HlmInput, HlmTextarea, HlmButton],
+	imports: [HlmFieldImports, HlmInputImports, HlmTextareaImports, HlmButtonImports],
 	host: {
 		class: 'w-full max-w-4xl',
 	},

apps/app/src/app/pages/(components)/components/(field)/field--select.preview.ts

@@ -1,19 +1,11 @@
 import { Component } from '@angular/core';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
 import { HlmSelectImports } from '@spartan-ng/helm/select';
 
 @Component({
 	selector: 'spartan-field-select-preview',
-	imports: [
-		HlmFieldSet,
-		HlmFieldGroup,
-		HlmField,
-		HlmFieldLabel,
-		HlmFieldDescription,
-		BrnSelectImports,
-		HlmSelectImports,
-	],
+	imports: [HlmFieldImports, BrnSelectImports, HlmSelectImports],
 	host: {
 		class: 'w-full max-w-md',
 	},

apps/app/src/app/pages/(components)/components/(field)/field--set.preview.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
-import { HlmInput } from '@spartan-ng/helm/input';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmInputImports } from '@spartan-ng/helm/input';
 
 @Component({
 	selector: 'spartan-field-set-preview',
-	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmInput],
+	imports: [HlmFieldImports, HlmInputImports],
 	host: {
 		class: 'w-full max-w-md space-y-6',
 	},

apps/app/src/app/pages/(components)/components/(field)/field--slider.preview.ts

@@ -12,7 +12,7 @@ import { HlmSliderImports } from '@spartan-ng/helm/slider';
 		<fieldset hlmFieldSet>
 			<div hlmFieldGroup>
 				<div hlmField>
-					<label hlmFieldLabel for="field-input-preview-firstname">Username</label>
+					<label hlmFieldLabel for="field-input-preview-firstname">Price Range</label>
 					<p hlmFieldDescription>Set your budget range ($0 - {{ value() }}).</p>
 					<hlm-slider [max]="1000" [step]="10" [(value)]="value" />
 				</div>

apps/app/src/app/pages/(components)/components/(field)/field--switch.preview.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
-import { HlmSwitch } from '@spartan-ng/helm/switch';
+import { HlmSwitchImports } from '@spartan-ng/helm/switch';
 
 @Component({
 	selector: 'spartan-field-switch-preview',
-	imports: [HlmFieldImports, HlmSwitch],
+	imports: [HlmFieldImports, HlmSwitchImports],
 	host: {
 		class: 'w-full max-w-md',
 	},

apps/app/src/app/pages/(components)/components/(field)/field--textarea.preview.ts

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
-import { HlmField, HlmFieldDescription, HlmFieldGroup, HlmFieldLabel, HlmFieldSet } from '@spartan-ng/helm/field';
-import { HlmTextarea } from '@spartan-ng/helm/textarea';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
 
 @Component({
 	selector: 'spartan-field-textarea-preview',
-	imports: [HlmFieldSet, HlmFieldGroup, HlmField, HlmFieldLabel, HlmFieldDescription, HlmTextarea],
+	imports: [HlmFieldImports, HlmTextareaImports],
 	host: {
 		class: 'w-full max-w-md',
 	},

apps/app/src/app/pages/(components)/components/(field)/field.preview.ts

@@ -1,19 +1,19 @@
 import { Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BrnSelectImports } from '@spartan-ng/brain/select';
-import { HlmButton } from '@spartan-ng/helm/button';
-import { HlmCheckbox } from '@spartan-ng/helm/checkbox';
+import { HlmButtonImports } from '@spartan-ng/helm/button';
+import { HlmCheckboxImports } from '@spartan-ng/helm/checkbox';
 import { HlmFieldImports } from '@spartan-ng/helm/field';
 import { HlmInputImports } from '@spartan-ng/helm/input';
 import { HlmSelectImports } from '@spartan-ng/helm/select';
-import { HlmTextarea } from '@spartan-ng/helm/textarea';
+import { HlmTextareaImports } from '@spartan-ng/helm/textarea';
 
 @Component({
 	selector: 'spartan-field-preview',
 	imports: [
-		HlmCheckbox,
-		HlmTextarea,
-		HlmButton,
+		HlmCheckboxImports,
+		HlmTextareaImports,
+		HlmButtonImports,
 		HlmInputImports,
 		HlmFieldImports,
 		BrnSelectImports,
@@ -38,7 +38,7 @@ import { HlmTextarea } from '@spartan-ng/helm/textarea';
 						<div hlmField class="col-span-2">
 							<label hlmFieldLabel for="field-preview-card-number">Card number</label>
 							<input hlmInput placeholder="1234 1234 1234 1234" id="field-preview-card-number" />
-							<p hlmFieldDescription>Enter your 16-digit card number without spaces or dashes.</p>
+							<p hlmFieldDescription>Enter your 16-digit card number</p>
 						</div>
 						<div class="grid grid-cols-3 gap-4">
 							<div hlmField>

libs/helm/field/src/lib/hlm-field-content.ts

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldContent],hlm-field-content',

libs/helm/field/src/lib/hlm-field-description.ts

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldDescription],hlm-field-description',

libs/helm/field/src/lib/hlm-field-error.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-field-error',

libs/helm/field/src/lib/hlm-field-group.ts

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: '[hlmFieldGroup],hlm-field-group',

libs/helm/field/src/lib/hlm-field-label.ts

@@ -1,10 +1,10 @@
 import { computed, Directive, input } from '@angular/core';
 import { HlmLabel } from '@spartan-ng/helm/label';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
-	selector: '[hlmFieldLabel]',
+	selector: '[hlmFieldLabel],hlm-field-label',
 	hostDirectives: [HlmLabel],
 	host: {
 		'data-slot': 'field-label',

libs/helm/field/src/lib/hlm-field-legend.ts

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'legend[hlmFieldLegend]',

libs/helm/field/src/lib/hlm-field-separator.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { HlmSeparator } from '@spartan-ng/helm/separator';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Component({
 	selector: 'hlm-field-separator',

libs/helm/field/src/lib/hlm-field-set.ts

@@ -1,6 +1,6 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx';
 
 @Directive({
 	selector: 'fieldset[hlmFieldSet]',
@@ -14,7 +14,8 @@ export class HlmFieldSet {
 
 	protected readonly _computedClass = computed(() =>
 		hlm(
-			'flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+			'flex flex-col gap-6',
+			'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
 			this.userClass(),
 		),
 	);

libs/helm/field/src/lib/hlm-field.ts

@@ -1,7 +1,7 @@
 import { computed, Directive, input } from '@angular/core';
 import { hlm } from '@spartan-ng/helm/utils';
-import { cva, VariantProps } from 'class-variance-authority';
-import { ClassValue } from 'clsx';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type { ClassValue } from 'clsx';
 
 const fieldVariants = cva('group/field data-[invalid=true]:text-destructive flex w-full gap-3', {
 	variants: {