@egose/shadcn-theme-ng 0.0.27 → 0.1.0

package/table/fesm2022/table.mjs

@@ -0,0 +1,211 @@
+import * as i0 from '@angular/core';
+import { Directive, NgModule } from '@angular/core';
+import { classes } from '@egose/shadcn-theme-ng/utils';
+
+class HlmTableContainer {
+    constructor() {
+        classes(() => "relative w-full overflow-x-auto");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTableContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTableContainer, isStandalone: true, selector: "div[hlmTableContainer]", host: { attributes: { "data-slot": "table-container" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTableContainer, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[hlmTableContainer]',
+                    host: { 'data-slot': 'table-container' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <table> element.
+ */
+class HlmTable {
+    constructor() {
+        classes(() => "w-full caption-bottom text-sm");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTable, isStandalone: true, selector: "table[hlmTable]", host: { attributes: { "data-slot": "table" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTable, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[hlmTable]',
+                    host: { 'data-slot': 'table' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTable context.
+ */
+class HlmTHead {
+    constructor() {
+        classes(() => "[&_tr]:border-b");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTHead, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTHead, isStandalone: true, selector: "thead[hlmTHead],thead[hlmTableHeader]", host: { attributes: { "data-slot": "table-header" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTHead, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'thead[hlmTHead],thead[hlmTableHeader]',
+                    host: { 'data-slot': 'table-header' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTable context.
+ */
+class HlmTBody {
+    constructor() {
+        classes(() => "[&_tr:last-child]:border-0");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTBody, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTBody, isStandalone: true, selector: "tbody[hlmTBody],tbody[hlmTableBody]", host: { attributes: { "data-slot": "table-body" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTBody, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tbody[hlmTBody],tbody[hlmTableBody]',
+                    host: { 'data-slot': 'table-body' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTable context.
+ */
+class HlmTFoot {
+    constructor() {
+        classes(() => "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTFoot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTFoot, isStandalone: true, selector: "tfoot[hlmTFoot],tfoot[hlmTableFooter]", host: { attributes: { "data-slot": "table-footer" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTFoot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tfoot[hlmTFoot],tfoot[hlmTableFooter]',
+                    host: { 'data-slot': 'table-footer' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTable context.
+ */
+class HlmTr {
+    constructor() {
+        classes(() => "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTr, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTr, isStandalone: true, selector: "tr[hlmTr],tr[hlmTableRow]", host: { attributes: { "data-slot": "table-row" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTr, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tr[hlmTr],tr[hlmTableRow]',
+                    host: { 'data-slot': 'table-row' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTable context.
+ */
+class HlmTh {
+    constructor() {
+        classes(() => "text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTh, isStandalone: true, selector: "th[hlmTh],th[hlmTableHead]", host: { attributes: { "data-slot": "table-head" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTh, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[hlmTh],th[hlmTableHead]',
+                    host: { 'data-slot': 'table-head' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTable context.
+ */
+class HlmTd {
+    constructor() {
+        classes(() => "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmTd, isStandalone: true, selector: "td[hlmTd],td[hlmTableCell]", host: { attributes: { "data-slot": "table-cell" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'td[hlmTd],td[hlmTableCell]',
+                    host: { 'data-slot': 'table-cell' },
+                }]
+        }], ctorParameters: () => [] });
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTable context.
+ */
+class HlmCaption {
+    constructor() {
+        classes(() => "text-muted-foreground mt-4 text-sm");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCaption, isStandalone: true, selector: "caption[hlmCaption],caption[hlmTableCaption]", host: { attributes: { "data-slot": "table-caption" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCaption, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'caption[hlmCaption],caption[hlmTableCaption]',
+                    host: { 'data-slot': 'table-caption' },
+                }]
+        }], ctorParameters: () => [] });
+
+/*
+ * Public API Surface of table
+ */
+const HlmTableImports = [
+    HlmCaption,
+    HlmTableContainer,
+    HlmTable,
+    HlmTBody,
+    HlmTd,
+    HlmTFoot,
+    HlmTh,
+    HlmTHead,
+    HlmTr,
+];
+class HlmTableModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmTableModule, imports: [HlmCaption,
+            HlmTableContainer,
+            HlmTable,
+            HlmTBody,
+            HlmTd,
+            HlmTFoot,
+            HlmTh,
+            HlmTHead,
+            HlmTr], exports: [HlmCaption,
+            HlmTableContainer,
+            HlmTable,
+            HlmTBody,
+            HlmTd,
+            HlmTFoot,
+            HlmTh,
+            HlmTHead,
+            HlmTr] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTableModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmTableImports],
+                    exports: [...HlmTableImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmCaption, HlmTBody, HlmTFoot, HlmTHead, HlmTable, HlmTableContainer, HlmTableImports, HlmTableModule, HlmTd, HlmTh, HlmTr };
+

package/table/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "table",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@spartan-ng/brain": "^1.1.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/table.mjs",
+  "typings": "types/table.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/table.d.ts",
+      "default": "./fesm2022/table.mjs"
+    }
+  },
+  "type": "module"
+}

package/table/types/table.d.ts

@@ -0,0 +1,87 @@
+import * as i0 from '@angular/core';
+
+declare class HlmTableContainer {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTableContainer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTableContainer, "div[hlmTableContainer]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <table> element.
+ */
+declare class HlmTable {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTable, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTable, "table[hlmTable]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <thead> element
+ * within an HlmTable context.
+ */
+declare class HlmTHead {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTHead, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTHead, "thead[hlmTHead],thead[hlmTableHeader]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <tbody> element
+ * within an HlmTable context.
+ */
+declare class HlmTBody {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTBody, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTBody, "tbody[hlmTBody],tbody[hlmTableBody]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <tfoot> element
+ * within an HlmTable context.
+ */
+declare class HlmTFoot {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTFoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTFoot, "tfoot[hlmTFoot],tfoot[hlmTableFooter]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <tr> element
+ * within an HlmTable context.
+ */
+declare class HlmTr {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTr, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTr, "tr[hlmTr],tr[hlmTableRow]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <th> element
+ * within an HlmTable context.
+ */
+declare class HlmTh {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTh, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTh, "th[hlmTh],th[hlmTableHead]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <td> element
+ * within an HlmTable context.
+ */
+declare class HlmTd {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTd, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTd, "td[hlmTd],td[hlmTableCell]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to apply Shadcn-like styling to a <caption> element
+ * within an HlmTable context.
+ */
+declare class HlmCaption {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCaption, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmCaption, "caption[hlmCaption],caption[hlmTableCaption]", never, {}, {}, never, never, true, never>;
+}
+
+declare const HlmTableImports: readonly [typeof HlmCaption, typeof HlmTableContainer, typeof HlmTable, typeof HlmTBody, typeof HlmTd, typeof HlmTFoot, typeof HlmTh, typeof HlmTHead, typeof HlmTr];
+declare class HlmTableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmTableModule, never, [typeof HlmCaption, typeof HlmTableContainer, typeof HlmTable, typeof HlmTBody, typeof HlmTd, typeof HlmTFoot, typeof HlmTh, typeof HlmTHead, typeof HlmTr], [typeof HlmCaption, typeof HlmTableContainer, typeof HlmTable, typeof HlmTBody, typeof HlmTd, typeof HlmTFoot, typeof HlmTh, typeof HlmTHead, typeof HlmTr]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmTableModule>;
+}
+
+export { HlmCaption, HlmTBody, HlmTFoot, HlmTHead, HlmTable, HlmTableContainer, HlmTableImports, HlmTableModule, HlmTd, HlmTh, HlmTr };

package/tabs/README.md

@@ -0,0 +1,3 @@
+# Tabs Subpath
+
+This project ships only as `@egose/shadcn-theme-ng/tabs` or `@egose/shadcn-theme-ng-tw/tabs`. See the [package README](../../README.md) for installation, compatibility, Tailwind variant, test, and release guidance. Do not publish this project directory independently.

package/tabs/fesm2022/tabs.mjs

@@ -0,0 +1,210 @@
+import * as i0 from '@angular/core';
+import { input, Directive, contentChildren, viewChild, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import * as i1 from '@spartan-ng/brain/tabs';
+import { BrnTabs, BrnTabsContent, BrnTabsContentLazy, BrnTabsList, BrnTabsPaginatedList, BrnTabsTrigger } from '@spartan-ng/brain/tabs';
+import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
+import { cva } from 'class-variance-authority';
+import { CdkObserveContent } from '@angular/cdk/observers';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideChevronLeft, lucideChevronRight } from '@ng-icons/lucide';
+import { buttonVariants } from '@egose/shadcn-theme-ng/button';
+
+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");
+    }
+    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.1.3", ngImport: i0, type: HlmTabs, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmTabs],hlm-tabs',
+                    hostDirectives: [
+                        {
+                            directive: BrnTabs,
+                            inputs: ['orientation', 'activationMode', 'brnTabs: tab'],
+                            outputs: ['tabActivated'],
+                        },
+                    ],
+                    host: {
+                        'data-slot': 'tabs',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: true }] }] } });
+
+class HlmTabsContent {
+    contentFor = input.required({ ...(ngDevMode ? { debugName: "contentFor" } : /* istanbul ignore next */ {}), alias: 'hlmTabsContent' });
+    constructor() {
+        classes(() => "flex-1 text-sm outline-none");
+    }
+    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.1.3", ngImport: i0, type: HlmTabsContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmTabsContent]',
+                    hostDirectives: [{ directive: BrnTabsContent, inputs: ['brnTabsContent: hlmTabsContent'] }],
+                    host: {
+                        'data-slot': 'tabs-content',
+                    },
+                }]
+        }], 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.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.1.3", ngImport: i0, type: HlmTabsContentLazy, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[hlmTabsContentLazy]',
+                    hostDirectives: [BrnTabsContentLazy],
+                }]
+        }] });
+
+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", {
+    variants: {
+        variant: {
+            default: "bg-muted",
+            line: "gap-1 bg-transparent",
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+class HlmTabsList {
+    variant = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        classes(() => listVariants({ variant: this.variant() }));
+    }
+    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.1.3", ngImport: i0, type: HlmTabsList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmTabsList],hlm-tabs-list',
+                    hostDirectives: [BrnTabsList],
+                    host: {
+                        'data-slot': 'tabs-list',
+                        '[attr.data-variant]': 'variant()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+class HlmTabsPaginatedList extends BrnTabsPaginatedList {
+    constructor() {
+        super();
+        classes(() => "relative flex flex-shrink-0 items-center gap-1 overflow-hidden");
+    }
+    items = contentChildren(BrnTabsTrigger, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: false });
+    /** Explicitly annotating type to avoid non-portable inferred type */
+    itemsChanges = toObservable(this.items);
+    tabListContainer = viewChild.required('tabListContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabListContainer" }] : /* istanbul ignore next */ []));
+    tabList = viewChild.required('tabList', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabList" }] : /* istanbul ignore next */ []));
+    tabListInner = viewChild.required('tabListInner', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabListInner" }] : /* istanbul ignore next */ []));
+    nextPaginator = viewChild.required('nextPaginator', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nextPaginator" }] : /* istanbul ignore next */ []));
+    previousPaginator = viewChild.required('previousPaginator', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "previousPaginator" }] : /* istanbul ignore next */ []));
+    tabListClass = input('', { ...(ngDevMode ? { debugName: "tabListClass" } : /* istanbul ignore next */ {}), alias: 'tabListClass' });
+    _tabListClass = computed(() => hlm(listVariants(), this.tabListClass()), /* @ts-ignore */
+    ...(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 */
+    ...(ngDevMode ? [{ debugName: "_paginationButtonClass" }] : /* istanbul ignore next */ []));
+    _itemSelected(event) {
+        event.preventDefault();
+    }
+    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: "\n    <button\n      #previousPaginator\n      data-pagination=\"previous\"\n      type=\"button\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"_paginationButtonClass()\"\n      [disabled]=\"disableScrollBefore || null\"\n      (click)=\"_handlePaginatorClick('before')\"\n      (mousedown)=\"_handlePaginatorPress('before', $event)\"\n      (touchend)=\"_stopInterval()\"\n    >\n      <ng-icon name=\"lucideChevronLeft\" />\n    </button>\n\n    <div #tabListContainer class=\"z-[1] flex grow overflow-hidden\" (keydown)=\"_handleKeydown($event)\">\n      <div class=\"relative grow transition-transform\" #tabList role=\"tablist\" (cdkObserveContent)=\"_onContentChanges()\">\n        <div #tabListInner [class]=\"_tabListClass()\">\n          <ng-content />\n        </div>\n      </div>\n    </div>\n\n    <button\n      #nextPaginator\n      data-pagination=\"next\"\n      type=\"button\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"_paginationButtonClass()\"\n      [disabled]=\"disableScrollAfter || null\"\n      (click)=\"_handlePaginatorClick('after')\"\n      (mousedown)=\"_handlePaginatorPress('after', $event)\"\n      (touchend)=\"_stopInterval()\"\n    >\n      <ng-icon name=\"lucideChevronRight\" />\n    </button>\n  ", 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.1.3", ngImport: i0, type: HlmTabsPaginatedList, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-paginated-tabs-list',
+                    imports: [CdkObserveContent, NgIcon],
+                    providers: [provideIcons({ lucideChevronRight, lucideChevronLeft })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slot': 'tabs-paginated-list',
+                    },
+                    template: "\n    <button\n      #previousPaginator\n      data-pagination=\"previous\"\n      type=\"button\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"_paginationButtonClass()\"\n      [disabled]=\"disableScrollBefore || null\"\n      (click)=\"_handlePaginatorClick('before')\"\n      (mousedown)=\"_handlePaginatorPress('before', $event)\"\n      (touchend)=\"_stopInterval()\"\n    >\n      <ng-icon name=\"lucideChevronLeft\" />\n    </button>\n\n    <div #tabListContainer class=\"z-[1] flex grow overflow-hidden\" (keydown)=\"_handleKeydown($event)\">\n      <div class=\"relative grow transition-transform\" #tabList role=\"tablist\" (cdkObserveContent)=\"_onContentChanges()\">\n        <div #tabListInner [class]=\"_tabListClass()\">\n          <ng-content />\n        </div>\n      </div>\n    </div>\n\n    <button\n      #nextPaginator\n      data-pagination=\"next\"\n      type=\"button\"\n      aria-hidden=\"true\"\n      tabindex=\"-1\"\n      [class]=\"_paginationButtonClass()\"\n      [disabled]=\"disableScrollAfter || null\"\n      (click)=\"_handlePaginatorClick('after')\"\n      (mousedown)=\"_handlePaginatorPress('after', $event)\"\n      (touchend)=\"_stopInterval()\"\n    >\n      <ng-icon name=\"lucideChevronRight\" />\n    </button>\n  ",
+                }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BrnTabsTrigger), { ...{ descendants: false }, isSignal: true }] }], tabListContainer: [{ type: i0.ViewChild, args: ['tabListContainer', { isSignal: true }] }], tabList: [{ type: i0.ViewChild, args: ['tabList', { isSignal: true }] }], tabListInner: [{ type: i0.ViewChild, args: ['tabListInner', { isSignal: true }] }], nextPaginator: [{ type: i0.ViewChild, args: ['nextPaginator', { isSignal: true }] }], previousPaginator: [{ type: i0.ViewChild, args: ['previousPaginator', { isSignal: true }] }], tabListClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabListClass", required: false }] }], paginationButtonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationButtonClass", required: false }] }] } });
+
+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",
+        ]);
+    }
+    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.1.3", ngImport: i0, type: HlmTabsTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmTabsTrigger]',
+                    hostDirectives: [{ directive: BrnTabsTrigger, inputs: ['brnTabsTrigger: hlmTabsTrigger', 'disabled'] }],
+                    host: {
+                        'data-slot': 'tabs-trigger',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { triggerFor: [{ type: i0.Input, args: [{ isSignal: true, alias: "hlmTabsTrigger", required: true }] }] } });
+
+/*
+ * Public API Surface of tabs
+ */
+const HlmTabsImports = [
+    HlmTabs,
+    HlmTabsList,
+    HlmTabsTrigger,
+    HlmTabsContent,
+    HlmTabsContentLazy,
+    HlmTabsPaginatedList,
+];
+class HlmTabsModule {
+    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,
+            HlmTabsContentLazy,
+            HlmTabsPaginatedList], exports: [HlmTabs,
+            HlmTabsList,
+            HlmTabsTrigger,
+            HlmTabsContent,
+            HlmTabsContentLazy,
+            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.1.3", ngImport: i0, type: HlmTabsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmTabsImports],
+                    exports: [...HlmTabsImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmTabs, HlmTabsContent, HlmTabsContentLazy, HlmTabsImports, HlmTabsList, HlmTabsModule, HlmTabsPaginatedList, HlmTabsTrigger, listVariants };
+

package/tabs/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tabs",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.2.0 || ^22.0.0",
+    "@angular/core": "^20.2.0 || ^22.0.0",
+    "@spartan-ng/brain": "^0.0.1-alpha.512"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/tabs.mjs",
+  "typings": "types/tabs.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/tabs.d.ts",
+      "default": "./fesm2022/tabs.mjs"
+    }
+  },
+  "type": "module"
+}

package/tabs/types/tabs.d.ts

@@ -0,0 +1,71 @@
+import * as i0 from '@angular/core';
+import { ElementRef } from '@angular/core';
+import * as i1 from '@spartan-ng/brain/tabs';
+import { BrnTabsPaginatedList, BrnTabsTrigger, BrnPaginatedTabHeaderItem } from '@spartan-ng/brain/tabs';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ClassValue } from 'clsx';
+import { Observable } from 'rxjs';
+
+declare class HlmTabs {
+    readonly tab: i0.InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTabs, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTabs, "[hlmTabs],hlm-tabs", never, { "tab": { "alias": "tab"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnTabs; inputs: { "orientation": "orientation"; "activationMode": "activationMode"; "brnTabs": "tab"; }; outputs: { "tabActivated": "tabActivated"; }; }]>;
+}
+
+declare class HlmTabsContent {
+    readonly contentFor: i0.InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTabsContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTabsContent, "[hlmTabsContent]", never, { "contentFor": { "alias": "hlmTabsContent"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnTabsContent; inputs: { "brnTabsContent": "hlmTabsContent"; }; outputs: {}; }]>;
+}
+
+declare class HlmTabsContentLazy {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTabsContentLazy, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTabsContentLazy, "ng-template[hlmTabsContentLazy]", never, {}, {}, never, never, true, [{ directive: typeof i1.BrnTabsContentLazy; inputs: {}; outputs: {}; }]>;
+}
+
+declare const listVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare class HlmTabsList {
+    readonly variant: i0.InputSignal<"default" | "line" | null | undefined>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTabsList, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTabsList, "[hlmTabsList],hlm-tabs-list", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnTabsList; inputs: {}; outputs: {}; }]>;
+}
+
+declare class HlmTabsPaginatedList extends BrnTabsPaginatedList {
+    constructor();
+    readonly items: i0.Signal<readonly BrnTabsTrigger[]>;
+    /** Explicitly annotating type to avoid non-portable inferred type */
+    readonly itemsChanges: Observable<ReadonlyArray<BrnPaginatedTabHeaderItem>>;
+    readonly tabListContainer: i0.Signal<ElementRef<HTMLElement>>;
+    readonly tabList: i0.Signal<ElementRef<HTMLElement>>;
+    readonly tabListInner: i0.Signal<ElementRef<HTMLElement>>;
+    readonly nextPaginator: i0.Signal<ElementRef<HTMLElement>>;
+    readonly previousPaginator: i0.Signal<ElementRef<HTMLElement>>;
+    readonly tabListClass: i0.InputSignal<ClassValue>;
+    protected readonly _tabListClass: i0.Signal<string>;
+    readonly paginationButtonClass: i0.InputSignal<ClassValue>;
+    protected readonly _paginationButtonClass: i0.Signal<string>;
+    protected _itemSelected(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTabsPaginatedList, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmTabsPaginatedList, "hlm-paginated-tabs-list", never, { "tabListClass": { "alias": "tabListClass"; "required": false; "isSignal": true; }; "paginationButtonClass": { "alias": "paginationButtonClass"; "required": false; "isSignal": true; }; }, {}, ["items"], ["*"], true, never>;
+}
+
+declare class HlmTabsTrigger {
+    readonly triggerFor: i0.InputSignal<string>;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTabsTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmTabsTrigger, "[hlmTabsTrigger]", never, { "triggerFor": { "alias": "hlmTabsTrigger"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.BrnTabsTrigger; inputs: { "brnTabsTrigger": "hlmTabsTrigger"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+declare const HlmTabsImports: readonly [typeof HlmTabs, typeof HlmTabsList, typeof HlmTabsTrigger, typeof HlmTabsContent, typeof HlmTabsContentLazy, typeof HlmTabsPaginatedList];
+declare class HlmTabsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmTabsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmTabsModule, never, [typeof HlmTabs, typeof HlmTabsList, typeof HlmTabsTrigger, typeof HlmTabsContent, typeof HlmTabsContentLazy, typeof HlmTabsPaginatedList], [typeof HlmTabs, typeof HlmTabsList, typeof HlmTabsTrigger, typeof HlmTabsContent, typeof HlmTabsContentLazy, typeof HlmTabsPaginatedList]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmTabsModule>;
+}
+
+export { HlmTabs, HlmTabsContent, HlmTabsContentLazy, HlmTabsImports, HlmTabsList, HlmTabsModule, HlmTabsPaginatedList, HlmTabsTrigger, listVariants };