@egose/shadcn-theme-ng 0.0.28 → 0.2.0

package/field/fesm2022/field.mjs

@@ -8,19 +8,19 @@ import * as i1$1 from '@egose/shadcn-theme-ng/label';
 import { HlmLabel } from '@egose/shadcn-theme-ng/label';
 import { HlmSeparator } from '@egose/shadcn-theme-ng/separator';
 
-const fieldVariants = cva('data-[matches-spartan-invalid=true]:text-destructive gap-3 group/field flex w-full', {
+const fieldVariants = cva("data-[matches-spartan-invalid=true]:text-destructive gap-3 group/field flex w-full", {
     variants: {
         orientation: {
-            vertical: 'flex-col *:w-full [&>.sr-only]:w-auto',
+            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
             horizontal: [
-                'flex-row items-center',
-                '*:data-[slot=field-label]:flex-auto',
-                'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+                "flex-row items-center",
+                "*:data-[slot=field-label]:flex-auto",
+                "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
             ],
             responsive: [
-                'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto',
-                '@md/field-group:*:data-[slot=field-label]:flex-auto',
-                '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+                "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto [&>.sr-only]:w-auto",
+                "@md/field-group:*:data-[slot=field-label]:flex-auto",
+                "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
             ],
         },
     },
@@ -34,10 +34,10 @@ class HlmField {
     constructor() {
         classes(() => fieldVariants({ orientation: this.orientation() }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmField, isStandalone: true, selector: "[hlmField],hlm-field", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group", "data-slot": "field" }, properties: { "attr.data-orientation": "orientation()" } }, hostDirectives: [{ directive: i1.BrnField, inputs: ["data-invalid", "data-invalid", "forceInvalid", "forceInvalid"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmField, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmField, isStandalone: true, selector: "[hlmField],hlm-field", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group", "data-slot": "field" }, properties: { "attr.data-orientation": "orientation()" } }, hostDirectives: [{ directive: i1.BrnField, inputs: ["data-invalid", "data-invalid", "forceInvalid", "forceInvalid"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmField, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmField],hlm-field',
@@ -52,12 +52,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmFieldContent {
     constructor() {
-        classes(() => 'gap-1 group/field-content flex flex-1 flex-col leading-snug');
+        classes(() => "gap-1 group/field-content flex flex-1 flex-col leading-snug");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmFieldContent, isStandalone: true, selector: "[hlmFieldContent],hlm-field-content", host: { attributes: { "data-slot": "field-content" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldContent, isStandalone: true, selector: "[hlmFieldContent],hlm-field-content", host: { attributes: { "data-slot": "field-content" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmFieldContent],hlm-field-content',
@@ -88,9 +88,9 @@ class HlmFieldDescription {
         : null;
     constructor() {
         classes(() => [
-            'text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance',
-            'last:mt-0 nth-last-2:-mt-1',
-            '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+            "text-muted-foreground text-start text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance",
+            "last:mt-0 nth-last-2:-mt-1",
+            "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         ]);
     }
     ngOnDestroy() {
@@ -99,10 +99,10 @@ class HlmFieldDescription {
             this._a11y?.unregisterDescription(this._registeredId);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmFieldDescription, isStandalone: true, selector: "[hlmFieldDescription],hlm-field-description", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-description" }, properties: { "attr.id": "id()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmFieldDescription, isStandalone: true, selector: "[hlmFieldDescription],hlm-field-description", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-description" }, properties: { "attr.id": "id()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldDescription, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldDescription, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmFieldDescription],hlm-field-description',
@@ -161,7 +161,7 @@ class HlmFieldError {
         })
         : null;
     constructor() {
-        classes(() => 'text-destructive text-sm font-normal');
+        classes(() => "text-destructive text-sm font-normal");
     }
     ngOnDestroy() {
         this._cleanup?.destroy();
@@ -169,14 +169,14 @@ class HlmFieldError {
             this._a11y?.unregisterError(this._registeredId);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmFieldError, isStandalone: true, selector: "hlm-field-error", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, forceShow: { classPropertyName: "forceShow", publicName: "forceShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "data-slot": "field-error" }, properties: { "attr.id": "id()", "hidden": "!_display()" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldError, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmFieldError, isStandalone: true, selector: "hlm-field-error", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, forceShow: { classPropertyName: "forceShow", publicName: "forceShow", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert", "data-slot": "field-error" }, properties: { "attr.id": "id()", "hidden": "!_display()" } }, ngImport: i0, template: `
     @if (_display()) {
       <ng-content />
     }
   `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldError, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldError, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-field-error',
@@ -197,12 +197,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmFieldGroup {
     constructor() {
-        classes(() => 'gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col');
+        classes(() => "gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmFieldGroup, isStandalone: true, selector: "[hlmFieldGroup],hlm-field-group", host: { attributes: { "data-slot": "field-group" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldGroup, isStandalone: true, selector: "[hlmFieldGroup],hlm-field-group", host: { attributes: { "data-slot": "field-group" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldGroup, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmFieldGroup],hlm-field-group',
@@ -213,14 +213,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class HlmFieldLabel {
     constructor() {
         classes(() => [
-            'has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit',
-            'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+            "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit",
+            "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmFieldLabel, isStandalone: true, selector: "[hlmFieldLabel],hlm-field-label", host: { attributes: { "data-slot": "field-label" } }, hostDirectives: [{ directive: i1$1.HlmLabel }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldLabel, isStandalone: true, selector: "[hlmFieldLabel],hlm-field-label", host: { attributes: { "data-slot": "field-label" } }, hostDirectives: [{ directive: i1$1.HlmLabel }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldLabel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLabel, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmFieldLabel],hlm-field-label',
@@ -233,12 +233,12 @@ class HlmFieldLegend {
     variant = input('legend', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base');
+        classes(() => "mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmFieldLegend, isStandalone: true, selector: "legend[hlmFieldLegend]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-legend" }, properties: { "attr.data-variant": "variant()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLegend, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmFieldLegend, isStandalone: true, selector: "legend[hlmFieldLegend]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "field-legend" }, properties: { "attr.data-variant": "variant()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldLegend, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldLegend, decorators: [{
             type: Directive,
             args: [{
                     selector: 'legend[hlmFieldLegend]',
@@ -251,46 +251,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmFieldSeparator {
     constructor() {
-        classes(() => '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative');
+        classes(() => "-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: HlmFieldSeparator, isStandalone: true, selector: "hlm-field-separator", host: { attributes: { "data-slot": "field-separator" } }, ngImport: i0, template: `
-    <hlm-separator class="absolute inset-0 top-1/2" />
-    <span
-      data-slot="field-separator-content"
-      class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
-    >
-      <ng-content />
-    </span>
-  `, isInline: true, dependencies: [{ kind: "directive", type: HlmSeparator, selector: "[hlmSeparator],hlm-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldSeparator, isStandalone: true, selector: "hlm-field-separator", host: { attributes: { "data-slot": "field-separator" } }, ngImport: i0, template: "\n    <hlm-separator class=\"absolute inset-0 top-1/2\" />\n    <span\n      data-slot=\"field-separator-content\"\n      class=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n    >\n      <ng-content />\n    </span>\n  ", isInline: true, dependencies: [{ kind: "directive", type: HlmSeparator, selector: "[hlmSeparator],hlm-separator" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSeparator, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-field-separator',
                     imports: [HlmSeparator],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { 'data-slot': 'field-separator' },
-                    template: `
-    <hlm-separator class="absolute inset-0 top-1/2" />
-    <span
-      data-slot="field-separator-content"
-      class="text-muted-foreground px-2 bg-background relative mx-auto block w-fit"
-    >
-      <ng-content />
-    </span>
-  `,
+                    template: "\n    <hlm-separator class=\"absolute inset-0 top-1/2\" />\n    <span\n      data-slot=\"field-separator-content\"\n      class=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n    >\n      <ng-content />\n    </span>\n  ",
                 }]
         }], ctorParameters: () => [] });
 
 class HlmFieldSet {
     constructor() {
-        classes(() => 'gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col');
+        classes(() => "gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldSet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmFieldSet, isStandalone: true, selector: "fieldset[hlmFieldSet]", host: { attributes: { "data-slot": "field-set" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSet, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldSet, isStandalone: true, selector: "fieldset[hlmFieldSet]", host: { attributes: { "data-slot": "field-set" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldSet, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldSet, decorators: [{
             type: Directive,
             args: [{
                     selector: 'fieldset[hlmFieldSet]',
@@ -300,12 +284,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
 class HlmFieldTitle {
     constructor() {
-        classes(() => 'gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center');
+        classes(() => "gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center");
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmFieldTitle, isStandalone: true, selector: "[hlmFieldTitle],hlm-field-title", host: { attributes: { "data-slot": "field-label" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldTitle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmFieldTitle, isStandalone: true, selector: "[hlmFieldTitle],hlm-field-title", host: { attributes: { "data-slot": "field-label" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmFieldTitle],hlm-field-title',
@@ -329,8 +313,8 @@ const HlmFieldImports = [
     HlmFieldTitle,
 ];
 class HlmFieldModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldModule, imports: [HlmField,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule, imports: [HlmField,
             HlmFieldContent,
             HlmFieldDescription,
             HlmFieldError,
@@ -349,9 +333,9 @@ class HlmFieldModule {
             HlmFieldSeparator,
             HlmFieldSet,
             HlmFieldTitle] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmFieldModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmFieldModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmFieldImports],
@@ -364,4 +348,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmField, HlmFieldContent, HlmFieldDescription, HlmFieldError, HlmFieldGroup, HlmFieldImports, HlmFieldLabel, HlmFieldLegend, HlmFieldModule, HlmFieldSeparator, HlmFieldSet, HlmFieldTitle };
-//# sourceMappingURL=field.mjs.map
+

package/form-checkbox/README.md

@@ -1,64 +1,313 @@
-# FormCheckbox
+# Form Checkbox (`@egose/shadcn-theme-ng/form-checkbox`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
+A ready-made reactive-form checkbox row: `hlm-checkbox` + label + required marker with automatic `hlm-error` / `hlm-hint` display, wrapped in `eg-form-field` error switching. Equivalent to shadcn/ui `Form` + `Checkbox` composition.
 
-## Code scaffolding
+The Angular implementation is a standalone `ControlValueAccessor`-compatible wrapper (not a brain
+primitive itself): it renders `HlmCheckbox` bound with `formControlName`, `HlmLabel`, `EgFormField`
+from `@egose/shadcn-theme-ng/form-field-simple`, and `HlmError` / `HlmHint` from
+`@egose/shadcn-theme-ng/form-field`. It must live inside a `FormGroupDirective` (a
+`[formGroup]` parent) and forwards `ControlContainer` to it. Ids are generated by
+`HlmFormIdGenerator` unless overridden.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+> **Ships as:** `@egose/shadcn-theme-ng/form-checkbox` and `@egose/shadcn-theme-ng-tw/form-checkbox`
+> (the `tw:`-prefixed Tailwind variant). Both expose the identical TypeScript surface; only the
+> emitted Tailwind class strings differ. See the [package README](../../README.md) for install
+> steps, peer dependencies, and Tailwind setup. Do not publish this project directory independently.
+
+## Installation
 
 ```bash
-ng generate component component-name
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# tw:-prefixed Tailwind variant
+npm install @egose/shadcn-theme-ng-tw
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+Peer dependencies (Angular, `@spartan-ng/brain`, `@ng-icons/*`, `rxjs`, …) are documented in the
+[package README](../../README.md#peer-dependencies). This subpath additionally relies at runtime on
+`@egose/shadcn-theme-ng/checkbox`, `@egose/shadcn-theme-ng/label`,
+`@egose/shadcn-theme-ng/form-field`, and `@egose/shadcn-theme-ng/form-field-simple`.
 
-```bash
-ng generate --help
+## Imports
+
+Exported from the subpath root (`projects/form-checkbox/src/public-api.ts`). Note: this subpath
+exports a single standalone component — there is no `*Imports` array or `*Module`:
+
+```ts
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
+// tw variant: replace with '@egose/shadcn-theme-ng-tw/form-checkbox'
 ```
 
-## Building
+Standalone usage:
 
-To build the library, run:
+```ts
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
 
-```bash
-ng build form-checkbox
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormCheckbox],
+  template: `...`,
+})
+export class DemoComponent {}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+NgModule-based consumer: add `EgFormCheckbox` (and `ReactiveFormsModule`) to the module's `imports`
+— it is a standalone component, not a module.
+
+`ControlValueAccessor` behavior: `eg-form-checkbox` itself is not a `ControlValueAccessor`; the
+inner `hlm-checkbox` is bound via `[formControlName]="controlName()"`, so the parent `FormGroup`
+owns the value. `checked()` sets the initial checkbox input; the form control is the source of
+truth afterwards.
 
-### Publishing the Library
+## Anatomy / Structure
 
-Once the project is built, you can publish your library by following these steps:
+```html
+<form [formGroup]="form">
+  <eg-form-checkbox
+    controlName="acceptTerms"
+    label="Accept terms and conditions"
+    [required]="true"
+    hint="You must accept to continue."
+    error="You must accept the terms."
+  />
+</form>
+```
 
-1. Navigate to the `dist` directory:
+Selector (from source): `eg-form-checkbox` (standalone component).
 
-   ```bash
-   cd dist/form-checkbox
-   ```
+## API reference
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+### `EgFormCheckbox` — `eg-form-checkbox`
 
-## Running unit tests
+| Input           | Type                  | Default | Description                                                                                 |
+| --------------- | --------------------- | ------- | ------------------------------------------------------------------------------------------- |
+| `controlName`   | `string`              | `''`    | `formControlName` key inside the parent `FormGroup`. **Required.**                          |
+| `label`         | `string`              | `''`    | Label text next to the checkbox.                                                            |
+| `error`         | `string \| undefined` | —       | Error text shown when the control is invalid + touched/dirty (via `EgFormField` switching). |
+| `hint`          | `string \| undefined` | —       | Hint text shown when there is no error to display.                                          |
+| `controlId`     | `string \| undefined` | —       | Explicit control id (first priority for `effectiveId`).                                     |
+| `id`            | `string \| undefined` | —       | Fallback id (second priority).                                                              |
+| `name`          | `string \| undefined` | —       | Checkbox `name` attribute (defaults to `controlName`).                                      |
+| `checked`       | `boolean`             | `false` | Initial checked state passed to `hlm-checkbox`.                                             |
+| `required`      | `boolean`             | `false` | Shows a red `*` and sets checkbox `required`.                                               |
+| `disabled`      | `boolean`             | `false` | Locks interaction via checkbox `wrapperDisabled` (does not write to the form control).      |
+| `class`         | `ClassValue`          | `''`    | Extra host classes.                                                                         |
+| `checkboxClass` | `string`              | `''`    | Extra classes for `hlm-checkbox`.                                                           |
+| `labelClass`    | `string`              | `''`    | Extra classes for the label.                                                                |
+| `$errorClass`   | `string`              | `''`    | Extra classes for `hlm-error`. (Note the `$` prefix — part of the real input name.)         |
+| `$hintClass`    | `string`              | `''`    | Extra classes for `hlm-hint`. (Note the `$` prefix.)                                        |
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+| Member               | Description                                                                                                                          |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `effectiveId`        | `controlId() \|\| id() \|\| generated` — wired to checkbox `id` and label `for`.                                                     |
+| `errorId` / `hintId` | `effectiveId + '-error' / '-hint'` for `aria-describedby`.                                                                           |
+| `describedBy()`      | Returns `errorId` when `error()` is set and the control is invalid + dirty/touched, else `hintId` when `hint()` is set, else `null`. |
 
-```bash
-ng test
+Requires a `[formGroup]` ancestor: the component injects `FormGroupDirective` and provides
+`ControlContainer → FormGroupDirective` so `formControlName` resolves.
+
+## Examples
+
+### 1. Basic required terms checkbox
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
+
+@Component({
+  selector: 'app-terms',
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormCheckbox],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <eg-form-checkbox
+        controlName="accept"
+        label="Accept terms and conditions"
+        [required]="true"
+        error="You must accept the terms."
+      />
+      <button type="submit" [disabled]="form.invalid">Continue</button>
+    </form>
+  `,
+})
+export class TermsComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ accept: [false, Validators.requiredTrue] });
+  submit() {
+    console.log(this.form.value);
+  }
+}
 ```
 
-## Running end-to-end tests
+### 2. Hint + validation error display
 
-For end-to-end (e2e) testing, run:
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
 
-```bash
-ng e2e
+@Component({
+  selector: 'app-newsletter',
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormCheckbox],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-checkbox
+        controlName="newsletter"
+        label="Email me news and offers"
+        hint="One email per month, unsubscribe anytime."
+        error="Please confirm your preference."
+      />
+    </form>
+    <p class="tw:text-sm">Value: {{ form.value.newsletter }}</p>
+  `,
+})
+export class NewsletterComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ newsletter: [true, Validators.requiredTrue] });
+}
+```
+
+### 3. Disabled / locked checkbox
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
+
+@Component({
+  selector: 'app-locked',
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormCheckbox],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-checkbox
+        controlName="readonly"
+        label="Two-factor authentication (enforced)"
+        [checked]="true"
+        [disabled]="true"
+        hint="Managed by your organization."
+      />
+    </form>
+  `,
+})
+export class LockedComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ readonly: [true] });
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+> `disabled` locks the UI via `wrapperDisabled` without disabling the form control itself, so the
+> value still submits. To exclude the value, call `form.get('readonly')?.disable()` instead.
+
+### 4. Custom ids + styling hooks
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
+
+@Component({
+  selector: 'app-styled-check',
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormCheckbox],
+  template: `
+    <form [formGroup]="form">
+      <eg-form-checkbox
+        controlName="marketing"
+        controlId="marketing-opt-in"
+        label="Send me product updates"
+        checkboxClass="tw:border-primary"
+        labelClass="tw:font-medium"
+        class="tw:rounded-md tw:border tw:p-3"
+      />
+    </form>
+  `,
+})
+export class StyledCheckComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ marketing: [false] });
+}
+```
+
+### 5. Settings list (multiple checkboxes, one group)
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormCheckbox],
+  template: `
+    <form [formGroup]="form" class="tw:grid tw:gap-3">
+      <eg-form-checkbox controlName="email" label="Email notifications" />
+      <eg-form-checkbox controlName="sms" label="SMS notifications" hint="Carrier rates may apply." />
+      <eg-form-checkbox controlName="push" label="Push notifications" />
+    </form>
+    <pre class="tw:text-xs">{{ form.value | json }}</pre>
+  `,
+})
+export class SettingsComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ email: [true], sms: [false], push: [true] });
+}
+```
+
+### 6. Submitted-state validation (mark all touched)
+
+```ts
+import { Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { EgFormCheckbox } from '@egose/shadcn-theme-ng/form-checkbox';
+
+@Component({
+  selector: 'app-submit-check',
+  standalone: true,
+  imports: [ReactiveFormsModule, EgFormCheckbox],
+  template: `
+    <form [formGroup]="form" (ngSubmit)="submit()">
+      <eg-form-checkbox
+        controlName="consent"
+        label="I consent to data processing"
+        [required]="true"
+        error="Consent is required to create your account."
+      />
+      <button type="submit">Create account</button>
+    </form>
+  `,
+})
+export class SubmitCheckComponent {
+  private readonly fb = inject(FormBuilder);
+  readonly form = this.fb.group({ consent: [false, Validators.requiredTrue] });
+  submit() {
+    this.form.markAllAsTouched();
+    if (this.form.valid) console.log('creating account…');
+  }
+}
+```
+
+## Accessibility notes
+
+- The checkbox `id` and label `for` are generated (`eg-form-checkbox-<app>-<n>`) unless `controlId`/`id` is given — labels are always programmatically associated.
+- `aria-describedby` points at the error id only while the control is invalid + touched/dirty, otherwise at the hint id — screen readers hear the right message in each state.
+- The required marker (`*`) is visual; the underlying `hlm-checkbox` also receives `required` so assistive tech announces it.
+- Keep the component inside a `<form>` with a submit path; the row itself is a single tab stop (the checkbox).
+
+## Theming / CSS variables
+
+No component-specific CSS variables. Style via `class`, `checkboxClass`, `labelClass`, `$errorClass`, `$hintClass` inputs and global tokens. The row layout (`flex items-center gap-1`) is fixed in the template.
 
-## Additional Resources
+## Related subpaths
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- `@egose/shadcn-theme-ng/checkbox` — standalone `hlm-checkbox` when you need a custom layout.
+- `@egose/shadcn-theme-ng/form-field-simple` — `eg-form-field` error/hint switching used internally.
+- `@egose/shadcn-theme-ng/form-field` — `hlm-form-field` / `hlm-error` / `hlm-hint` primitives.
+- `@egose/shadcn-theme-ng/label` — `HlmLabel` used for the row label.