@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/tabs/fesm2022/tabs.mjs

@@ -14,12 +14,12 @@ class HlmTabs {
     tab = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
     constructor() {
-        classes(() => 'group/tabs flex gap-2 data-[orientation=horizontal]:flex-col');
+        classes(() => 'tw:group/tabs tw:flex tw:gap-2 tw:data-[orientation=horizontal]:flex-col');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmTabs, isStandalone: true, selector: "[hlmTabs],hlm-tabs", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "tabs" } }, hostDirectives: [{ directive: i1.BrnTabs, inputs: ["orientation", "orientation", "activationMode", "activationMode", "brnTabs", "tab"], outputs: ["tabActivated", "tabActivated"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabs, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTabs, isStandalone: true, selector: "[hlmTabs],hlm-tabs", inputs: { tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "tabs" } }, hostDirectives: [{ directive: i1.BrnTabs, inputs: ["orientation", "orientation", "activationMode", "activationMode", "brnTabs", "tab"], outputs: ["tabActivated", "tabActivated"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabs, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmTabs],hlm-tabs',
@@ -39,12 +39,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class HlmTabsContent {
     contentFor = input.required({ ...(ngDevMode ? { debugName: "contentFor" } : /* istanbul ignore next */ {}), alias: 'hlmTabsContent' });
     constructor() {
-        classes(() => 'flex-1 text-sm outline-none');
+        classes(() => 'tw:flex-1 tw:text-sm tw:outline-none');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmTabsContent, isStandalone: true, selector: "[hlmTabsContent]", inputs: { contentFor: { classPropertyName: "contentFor", publicName: "hlmTabsContent", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-content" } }, hostDirectives: [{ directive: i1.BrnTabsContent, inputs: ["brnTabsContent", "hlmTabsContent"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTabsContent, isStandalone: true, selector: "[hlmTabsContent]", inputs: { contentFor: { classPropertyName: "contentFor", publicName: "hlmTabsContent", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-content" } }, hostDirectives: [{ directive: i1.BrnTabsContent, inputs: ["brnTabsContent", "hlmTabsContent"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsContent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsContent, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmTabsContent]',
@@ -56,10 +56,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
         }], ctorParameters: () => [], propDecorators: { contentFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hlmTabsContent", required: true }] }] } });
 
 class HlmTabsContentLazy {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsContentLazy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmTabsContentLazy, isStandalone: true, selector: "ng-template[hlmTabsContentLazy]", hostDirectives: [{ directive: i1.BrnTabsContentLazy }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsContentLazy, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTabsContentLazy, isStandalone: true, selector: "ng-template[hlmTabsContentLazy]", hostDirectives: [{ directive: i1.BrnTabsContentLazy }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsContentLazy, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsContentLazy, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[hlmTabsContentLazy]',
@@ -67,11 +67,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                 }]
         }] });
 
-const listVariants = cva('rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col', {
+const listVariants = cva('tw:rounded-lg tw:p-[3px] tw:group-data-horizontal/tabs:h-9 tw:data-[variant=line]:rounded-none tw:group/tabs-list tw:text-muted-foreground tw:inline-flex tw:w-fit tw:items-center tw:justify-center tw:group-data-[orientation=vertical]/tabs:h-fit tw:group-data-[orientation=vertical]/tabs:flex-col', {
     variants: {
         variant: {
-            default: 'bg-muted',
-            line: 'gap-1 bg-transparent',
+            default: 'tw:bg-muted',
+            line: 'tw:gap-1 tw:bg-transparent',
         },
     },
     defaultVariants: {
@@ -84,10 +84,10 @@ class HlmTabsList {
     constructor() {
         classes(() => listVariants({ variant: this.variant() }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmTabsList, isStandalone: true, selector: "[hlmTabsList],hlm-tabs-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-list" }, properties: { "attr.data-variant": "variant()" } }, hostDirectives: [{ directive: i1.BrnTabsList }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTabsList, isStandalone: true, selector: "[hlmTabsList],hlm-tabs-list", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-list" }, properties: { "attr.data-variant": "variant()" } }, hostDirectives: [{ directive: i1.BrnTabsList }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsList, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmTabsList],hlm-tabs-list',
@@ -102,7 +102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 class HlmTabsPaginatedList extends BrnTabsPaginatedList {
     constructor() {
         super();
-        classes(() => 'relative flex flex-shrink-0 items-center gap-1 overflow-hidden');
+        classes(() => 'tw:relative tw:flex tw:flex-shrink-0 tw:items-center tw:gap-1 tw:overflow-hidden');
     }
     items = contentChildren(BrnTabsTrigger, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: false });
     /** Explicitly annotating type to avoid non-portable inferred type */
@@ -122,13 +122,13 @@ class HlmTabsPaginatedList extends BrnTabsPaginatedList {
     ...(ngDevMode ? [{ debugName: "_tabListClass" }] : /* istanbul ignore next */ []));
     paginationButtonClass = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "paginationButtonClass" }] : /* istanbul ignore next */ []));
-    _paginationButtonClass = computed(() => hlm('relative z-[2] select-none disabled:cursor-default', buttonVariants({ variant: 'ghost', size: 'icon-sm' }), this.paginationButtonClass(), this.showPaginationControls() ? 'inline-flex' : 'hidden'), /* @ts-ignore */
+    _paginationButtonClass = computed(() => hlm('tw:relative tw:z-[2] tw:select-none tw:disabled:cursor-default', buttonVariants({ variant: 'ghost', size: 'icon-sm' }), this.paginationButtonClass(), this.showPaginationControls() ? 'tw:inline-flex' : 'tw:hidden'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_paginationButtonClass" }] : /* istanbul ignore next */ []));
     _itemSelected(event) {
         event.preventDefault();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsPaginatedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: HlmTabsPaginatedList, isStandalone: true, selector: "hlm-paginated-tabs-list", inputs: { tabListClass: { classPropertyName: "tabListClass", publicName: "tabListClass", isSignal: true, isRequired: false, transformFunction: null }, paginationButtonClass: { classPropertyName: "paginationButtonClass", publicName: "paginationButtonClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-paginated-list" } }, providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })], queries: [{ propertyName: "items", predicate: BrnTabsTrigger, isSignal: true }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "tabListInner", first: true, predicate: ["tabListInner"], descendants: true, isSignal: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsPaginatedList, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmTabsPaginatedList, isStandalone: true, selector: "hlm-paginated-tabs-list", inputs: { tabListClass: { classPropertyName: "tabListClass", publicName: "tabListClass", isSignal: true, isRequired: false, transformFunction: null }, paginationButtonClass: { classPropertyName: "paginationButtonClass", publicName: "paginationButtonClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-paginated-list" } }, providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })], queries: [{ propertyName: "items", predicate: BrnTabsTrigger, isSignal: true }], viewQueries: [{ propertyName: "tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, isSignal: true }, { propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true, isSignal: true }, { propertyName: "tabListInner", first: true, predicate: ["tabListInner"], descendants: true, isSignal: true }, { propertyName: "nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true, isSignal: true }, { propertyName: "previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     <button
       #previousPaginator
       data-pagination="previous"
@@ -144,8 +144,13 @@ class HlmTabsPaginatedList extends BrnTabsPaginatedList {
       <ng-icon name="lucideChevronLeft" />
     </button>
 
-    <div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
-      <div class="relative grow transition-transform" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
+    <div #tabListContainer class="tw:z-[1] tw:flex tw:grow tw:overflow-hidden" (keydown)="_handleKeydown($event)">
+      <div
+        class="tw:relative tw:grow tw:transition-transform"
+        #tabList
+        role="tablist"
+        (cdkObserveContent)="_onContentChanges()"
+      >
         <div #tabListInner [class]="_tabListClass()">
           <ng-content />
         </div>
@@ -168,7 +173,7 @@ class HlmTabsPaginatedList extends BrnTabsPaginatedList {
     </button>
   `, isInline: true, dependencies: [{ kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsPaginatedList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsPaginatedList, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-paginated-tabs-list',
@@ -194,8 +199,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
       <ng-icon name="lucideChevronLeft" />
     </button>
 
-    <div #tabListContainer class="z-[1] flex grow overflow-hidden" (keydown)="_handleKeydown($event)">
-      <div class="relative grow transition-transform" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
+    <div #tabListContainer class="tw:z-[1] tw:flex tw:grow tw:overflow-hidden" (keydown)="_handleKeydown($event)">
+      <div
+        class="tw:relative tw:grow tw:transition-transform"
+        #tabList
+        role="tablist"
+        (cdkObserveContent)="_onContentChanges()"
+      >
         <div #tabListInner [class]="_tabListClass()">
           <ng-content />
         </div>
@@ -224,16 +234,16 @@ class HlmTabsTrigger {
     triggerFor = input.required({ ...(ngDevMode ? { debugName: "triggerFor" } : /* istanbul ignore next */ {}), alias: 'hlmTabsTrigger' });
     constructor() {
         classes(() => [
-            `gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_ng-icon]:pointer-events-none [&_ng-icon]:shrink-0`,
-            'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
-            'data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground',
-            'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
+            `tw:gap-1.5 tw:rounded-md tw:border tw:border-transparent tw:px-2 tw:py-1 tw:text-sm tw:font-medium tw:group-data-[variant=default]/tabs-list:data-active:shadow-sm tw:group-data-[variant=line]/tabs-list:data-active:shadow-none tw:[&_ng-icon:not([class*='text-'])]:text-[length:--spacing(4)] tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:focus-visible:outline-ring tw:text-foreground/60 tw:hover:text-foreground tw:dark:text-muted-foreground tw:dark:hover:text-foreground tw:relative tw:inline-flex tw:h-[calc(100%-1px)] tw:flex-1 tw:items-center tw:justify-center tw:whitespace-nowrap tw:transition-all tw:group-data-[orientation=vertical]/tabs:w-full tw:group-data-[orientation=vertical]/tabs:justify-start tw:focus-visible:ring-[3px] tw:focus-visible:outline-1 tw:disabled:pointer-events-none tw:disabled:opacity-50 tw:[&_ng-icon]:pointer-events-none tw:[&_ng-icon]:shrink-0`,
+            'tw:group-data-[variant=line]/tabs-list:bg-transparent tw:group-data-[variant=line]/tabs-list:data-active:bg-transparent tw:dark:group-data-[variant=line]/tabs-list:data-active:border-transparent tw:dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
+            'tw:data-active:bg-background tw:dark:data-active:text-foreground tw:dark:data-active:border-input tw:dark:data-active:bg-input/30 tw:data-active:text-foreground',
+            'tw:after:bg-foreground tw:after:absolute tw:after:opacity-0 tw:after:transition-opacity tw:group-data-[orientation=horizontal]/tabs:after:inset-x-0 tw:group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] tw:group-data-[orientation=horizontal]/tabs:after:h-0.5 tw:group-data-[orientation=vertical]/tabs:after:inset-y-0 tw:group-data-[orientation=vertical]/tabs:after:-right-1 tw:group-data-[orientation=vertical]/tabs:after:w-0.5 tw:group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: HlmTabsTrigger, isStandalone: true, selector: "[hlmTabsTrigger]", inputs: { triggerFor: { classPropertyName: "triggerFor", publicName: "hlmTabsTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-trigger" } }, hostDirectives: [{ directive: i1.BrnTabsTrigger, inputs: ["brnTabsTrigger", "hlmTabsTrigger", "disabled", "disabled"] }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.3", type: HlmTabsTrigger, isStandalone: true, selector: "[hlmTabsTrigger]", inputs: { triggerFor: { classPropertyName: "triggerFor", publicName: "hlmTabsTrigger", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "data-slot": "tabs-trigger" } }, hostDirectives: [{ directive: i1.BrnTabsTrigger, inputs: ["brnTabsTrigger", "hlmTabsTrigger", "disabled", "disabled"] }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsTrigger, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsTrigger, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmTabsTrigger]',
@@ -256,8 +266,8 @@ const HlmTabsImports = [
     HlmTabsPaginatedList,
 ];
 class HlmTabsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsModule, imports: [HlmTabs,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsModule, imports: [HlmTabs,
             HlmTabsList,
             HlmTabsTrigger,
             HlmTabsContent,
@@ -268,9 +278,9 @@ class HlmTabsModule {
             HlmTabsContent,
             HlmTabsContentLazy,
             HlmTabsPaginatedList] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsModule, imports: [HlmTabsPaginatedList] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsModule, imports: [HlmTabsPaginatedList] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTabsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTabsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmTabsImports],
@@ -283,4 +293,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmTabs, HlmTabsContent, HlmTabsContentLazy, HlmTabsImports, HlmTabsList, HlmTabsModule, HlmTabsPaginatedList, HlmTabsTrigger, listVariants };
-//# sourceMappingURL=tabs.mjs.map
+

package/textarea/README.md

@@ -1,11 +1,288 @@
-# Textarea
+# Textarea (`@egose/shadcn-theme-ng/textarea`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+A multi-line text input, equivalent to [shadcn/ui Textarea](https://ui.shadcn.com/docs/components/textarea). This subpath ships a single thin styling directive, `HlmTextarea` (`[hlmTextarea]`), over spartan-ng's `BrnTextarea` primitive (plus `BrnFieldControlDescribedBy` for form-field hint/error wiring). All behavior — value binding, validation, auto-sizing — comes from the Brn primitive and Angular forms; this package only applies shadcn styling (border, focus ring, invalid state, placeholder color).
 
-## Building
+> **Ships as:** `@egose/shadcn-theme-ng/textarea` and `@egose/shadcn-theme-ng-tw/textarea` (the `tw:`-prefixed Tailwind variant). See the [package README](../../README.md) for install steps, peer dependencies, Tailwind setup, and testing/release guidance. Do not publish this project directory independently.
 
-To build the library, run:
+## Installation
 
 ```bash
-ng build textarea
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
+```
+
+`@spartan-ng/brain` arrives transitively; `FormsModule`/`ReactiveFormsModule` come from your app when you need form bindings. See the [package README](../../README.md) for the full peer-dependency table.
+
+## Imports
+
+All public symbols are re-exported from `projects/textarea/src/public-api.ts`:
+
+```ts
+import { HlmTextarea, HlmTextareaImports, HlmTextareaModule } from '@egose/shadcn-theme-ng/textarea';
+// tw variant:
+// import { HlmTextarea, HlmTextareaImports, HlmTextareaModule } from '@egose/shadcn-theme-ng-tw/textarea';
+```
+
+Standalone-component usage (preferred):
+
+```ts
+import { Component } from '@angular/core';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+
+@Component({
+  selector: 'app-demo',
+  standalone: true,
+  imports: [...HlmTextareaImports],
+  template: `<textarea hlmTextarea placeholder="Type here…"></textarea>`,
+})
+export class DemoComponent {}
+```
+
+NgModule usage:
+
+```ts
+import { NgModule } from '@angular/core';
+import { HlmTextareaModule } from '@egose/shadcn-theme-ng/textarea';
+
+@NgModule({ imports: [HlmTextareaModule] })
+export class FeatureModule {}
+```
+
+| Symbol               | Kind          | Description                                          |
+| -------------------- | ------------- | ---------------------------------------------------- |
+| `HlmTextarea`        | Directive     | `[hlmTextarea]` — shadcn styling over `BrnTextarea`. |
+| `HlmTextareaImports` | `const` array | `[HlmTextarea]` — spread into `imports: [...]`.      |
+| `HlmTextareaModule`  | NgModule      | Imports + re-exports `HlmTextarea`.                  |
+
+## Anatomy / Structure
+
+```html
+<!-- basic -->
+<textarea hlmTextarea placeholder="Tell us about yourself…"></textarea>
+
+<!-- with label + hint -->
+<div class="space-y-2">
+  <label hlmLabel for="bio">Bio</label>
+  <textarea hlmTextarea id="bio" rows="4" placeholder="Short bio…"></textarea>
+  <p class="text-sm text-muted-foreground">Up to 500 characters.</p>
+</div>
+
+<!-- reactive form -->
+<textarea hlmTextarea formControlName="notes" rows="5"></textarea>
+
+<!-- forced invalid state -->
+<textarea hlmTextarea [forceInvalid]="true"></textarea>
+```
+
+## API reference
+
+### `HlmTextarea` — selector `[hlmTextarea]` (directive, hosts `BrnTextarea` + `BrnFieldControlDescribedBy`)
+
+The directive declares **no own inputs/outputs**. All behavior comes from host directives:
+
+| Input          | Source                       | Description                                                                              |
+| -------------- | ---------------------------- | ---------------------------------------------------------------------------------------- |
+| `id`           | `BrnTextarea`                | Element id (pairs with `<label for>` and form-field wiring).                             |
+| `forceInvalid` | `BrnTextarea`                | Force the `data-[matches-spartan-invalid=true]` invalid styles even without form errors. |
+| (described-by) | `BrnFieldControlDescribedBy` | Auto-wires `aria-describedby` to enclosing form-field hint/error.                        |
+
+Standard native attributes (`rows`, `placeholder`, `disabled`, `readonly`, `maxlength`, `name`, …) and Angular form bindings (`formControl`, `formControlName`, `ngModel`) work as usual through the underlying `<textarea>`.
+
+Host: `data-slot="textarea"`. Invalid styling keys off `data-[matches-spartan-invalid=true]` (`border-destructive`, `ring-destructive`). Disabled state renders `cursor-not-allowed` + `opacity-50`. User `class` is preserved and merged via `classes()`.
+
+## Examples
+
+### 1. Basic usage with label
+
+```ts
+// demo-basic.component.ts
+import { Component } from '@angular/core';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-basic',
+  standalone: true,
+  imports: [...HlmTextareaImports, HlmLabel],
+  template: `
+    <div class="space-y-2">
+      <label hlmLabel for="bio">Bio</label>
+      <textarea hlmTextarea id="bio" rows="4" placeholder="Tell us about yourself…"></textarea>
+    </div>
+  `,
+})
+export class DemoBasic {}
+```
+
+### 2. Reactive form with validation + character count
+
+```ts
+// demo-reactive.component.ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-reactive',
+  standalone: true,
+  imports: [...HlmTextareaImports, ReactiveFormsModule, HlmLabel],
+  template: `
+    <form [formGroup]="form" class="space-y-2">
+      <label hlmLabel for="feedback">Feedback</label>
+      <textarea
+        hlmTextarea
+        id="feedback"
+        rows="5"
+        maxlength="500"
+        placeholder="What did you think?"
+        formControlName="feedback"
+      ></textarea>
+      <div class="flex justify-between text-sm">
+        <span class="text-destructive">
+          @if (form.controls.feedback.hasError('required') && form.controls.feedback.touched) {
+            Feedback is required.
+          } @else if (form.controls.feedback.hasError('minlength')) {
+            At least 10 characters.
+          }
+        </span>
+        <span class="text-muted-foreground">{{ form.controls.feedback.value?.length ?? 0 }}/500</span>
+      </div>
+    </form>
+  `,
+})
+export class DemoReactive {
+  readonly form = new FormGroup({
+    feedback: new FormControl('', [Validators.required, Validators.minLength(10)]),
+  });
+}
+```
+
+### 3. Template-driven form (`ngModel`)
+
+```ts
+// demo-template.component.ts
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-template',
+  standalone: true,
+  imports: [...HlmTextareaImports, FormsModule, HlmLabel],
+  template: `
+    <div class="space-y-2">
+      <label hlmLabel for="notes">Notes</label>
+      <textarea hlmTextarea id="notes" name="notes" rows="3" [(ngModel)]="notes"></textarea>
+      <p class="text-sm text-muted-foreground">Preview: {{ notes || '—' }}</p>
+    </div>
+  `,
+})
+export class DemoTemplate {
+  notes = '';
+}
+```
+
+### 4. Disabled / readonly / error states
+
+```ts
+// demo-states.component.ts
+import { Component } from '@angular/core';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmLabel } from '@egose/shadcn-theme-ng/label';
+
+@Component({
+  selector: 'demo-states',
+  standalone: true,
+  imports: [...HlmTextareaImports, HlmLabel],
+  template: `
+    <div class="space-y-4">
+      <div class="space-y-2">
+        <label hlmLabel for="t-disabled">Disabled</label>
+        <textarea hlmTextarea id="t-disabled" disabled placeholder="Cannot edit…"></textarea>
+      </div>
+      <div class="space-y-2">
+        <label hlmLabel for="t-readonly">Readonly</label>
+        <textarea hlmTextarea id="t-readonly" readonly rows="2">Submitted value, read only.</textarea>
+      </div>
+      <div class="space-y-2">
+        <label hlmLabel for="t-invalid">Forced invalid</label>
+        <textarea hlmTextarea id="t-invalid" [forceInvalid]="true" rows="2">Fails custom rule.</textarea>
+        <p class="text-sm text-destructive">Custom server error goes here.</p>
+      </div>
+    </div>
+  `,
+})
+export class DemoStates {}
 ```
+
+### 5. Inside a form-field (hint + error wiring)
+
+`BrnFieldControlDescribedBy` auto-links the textarea to the surrounding field's hint/error for screen readers:
+
+```ts
+// demo-field.component.ts
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { HlmTextareaImports } from '@egose/shadcn-theme-ng/textarea';
+import { HlmFormFieldImports } from '@egose/shadcn-theme-ng/form-field';
+
+@Component({
+  selector: 'demo-field',
+  standalone: true,
+  imports: [...HlmTextareaImports, ...HlmFormFieldImports, ReactiveFormsModule],
+  template: `
+    <form [formGroup]="form">
+      <hlm-form-field>
+        <label hlmLabel for="desc">Description</label>
+        <textarea hlmTextarea id="desc" formControlName="description" rows="4"></textarea>
+        <hlm-hint>Describe the issue in a few sentences.</hlm-hint>
+        <hlm-error>Description is required.</hlm-error>
+      </hlm-form-field>
+    </form>
+  `,
+})
+export class DemoField {
+  readonly form = new FormGroup({ description: new FormControl('', Validators.required) });
+}
+```
+
+(Exact `hlm-form-field`/`hlm-hint`/`hlm-error` selector names come from `@egose/shadcn-theme-ng/form-field` — check that subpath for the current API.)
+
+### 6. Autosize / custom sizing
+
+The base styles include `field-sizing-content` + `min-h-16`, so the textarea grows with content in supporting browsers. Combine with `rows` and width utilities:
+
+```html
+<!-- fixed 8 rows, full width (default w-full) -->
+<textarea hlmTextarea rows="8" placeholder="Long-form answer…"></textarea>
+
+<!-- constrained width + no manual resize -->
+<textarea hlmTextarea rows="4" class="max-w-xl resize-none" placeholder="No drag handle…"></textarea>
+
+<!-- tall monospace variant for code -->
+<textarea hlmTextarea rows="10" class="font-mono text-sm" spellcheck="false"></textarea>
+```
+
+## Accessibility notes
+
+- Every textarea needs a visible `<label>` (matching `for`/`id`) — placeholders are not labels.
+- Wire hint/error text with `aria-describedby` (automatic inside `hlm-form-field` via `BrnFieldControlDescribedBy`; manual `aria-describedby="hint-id"` otherwise).
+- Surface validation errors both visually (`forceInvalid` / form errors → `border-destructive`) and as text adjacent to the field; do not rely on color alone.
+- Keep `maxlength` announcements truthful — show a live character count for constrained fields.
+- Disabled textareas are skipped by assistive tech; use `readonly` when the value must remain perceivable but not editable.
+
+## Theming / CSS variables
+
+Keys off theme tokens (`border-input`, `bg-input/30` in dark mode, `ring-ring/50`, `text-muted-foreground` placeholder, `border-destructive`/`ring-destructive` invalid). Follows your shadcn theme automatically; extend via `class` (merged through `classes()`).
+
+## Related subpaths
+
+- `@egose/shadcn-theme-ng/input` — single-line sibling control.
+- `@egose/shadcn-theme-ng/label` — accessible labels.
+- `@egose/shadcn-theme-ng/form-field` / `@egose/shadcn-theme-ng/form-textarea` — labeled field with hint/error wiring.
+- `@egose/shadcn-theme-ng/button` — submit actions for textarea forms.

package/textarea/fesm2022/textarea.mjs

@@ -8,12 +8,12 @@ import { classes } from '@egose/shadcn-theme-ng-tw/utils';
 
 class HlmTextarea {
     constructor() {
-        classes(() => 'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 data-[matches-spartan-invalid=true]:ring-destructive/20 dark:data-[matches-spartan-invalid=true]:ring-destructive/40 data-[matches-spartan-invalid=true]:border-destructive dark:data-[matches-spartan-invalid=true]:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 data-[matches-spartan-invalid=true]:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50');
+        classes(() => 'tw:border-input tw:dark:bg-input/30 tw:focus-visible:border-ring tw:focus-visible:ring-ring/50 tw:data-[matches-spartan-invalid=true]:ring-destructive/20 tw:dark:data-[matches-spartan-invalid=true]:ring-destructive/40 tw:data-[matches-spartan-invalid=true]:border-destructive tw:dark:data-[matches-spartan-invalid=true]:border-destructive/50 tw:rounded-md tw:border tw:bg-transparent tw:px-2.5 tw:py-2 tw:text-base tw:shadow-xs tw:transition-[color,box-shadow] tw:focus-visible:ring-3 tw:data-[matches-spartan-invalid=true]:ring-3 tw:md:text-sm tw:placeholder:text-muted-foreground tw:flex tw:field-sizing-content tw:min-h-16 tw:w-full tw:outline-none tw:disabled:cursor-not-allowed tw:disabled:opacity-50');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: HlmTextarea, isStandalone: true, selector: "[hlmTextarea]", host: { attributes: { "data-slot": "textarea" } }, hostDirectives: [{ directive: i1.BrnTextarea, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTextarea, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTextarea, isStandalone: true, selector: "[hlmTextarea]", host: { attributes: { "data-slot": "textarea" } }, hostDirectives: [{ directive: i1.BrnTextarea, inputs: ["id", "id", "forceInvalid", "forceInvalid"] }, { directive: i2.BrnFieldControlDescribedBy }], ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTextarea, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hlmTextarea]',
@@ -27,11 +27,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmTextareaImports = [HlmTextarea];
 class HlmTextareaModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmTextareaModule, imports: [HlmTextarea], exports: [HlmTextarea] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTextareaModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTextareaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmTextareaModule, imports: [HlmTextarea], exports: [HlmTextarea] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTextareaModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmTextareaModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTextareaModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmTextareaImports],
@@ -44,4 +44,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmTextarea, HlmTextareaImports, HlmTextareaModule };
-//# sourceMappingURL=textarea.mjs.map
+