@egose/shadcn-theme-ng 0.0.27 → 0.1.0

package/carousel/fesm2022/carousel.mjs

@@ -0,0 +1,267 @@
+import * as i0 from '@angular/core';
+import { viewChild, inject, input, computed, signal, ChangeDetectionStrategy, Component, Directive, effect, untracked, NgModule } from '@angular/core';
+import { Directionality } from '@angular/cdk/bidi';
+import { classes, hlm } from '@egose/shadcn-theme-ng/utils';
+import { EmblaCarouselDirective } from 'embla-carousel-angular';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideArrowRight, lucideArrowLeft } from '@ng-icons/lucide';
+import * as i1 from '@egose/shadcn-theme-ng/button';
+import { HlmBtn, provideBrnButtonConfig } from '@egose/shadcn-theme-ng/button';
+
+class HlmCarousel {
+    _emblaCarousel = viewChild.required(EmblaCarouselDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_emblaCarousel" }] : /* istanbul ignore next */ []));
+    _dir = inject(Directionality);
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    options = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "options" }] : /* istanbul ignore next */ []));
+    plugins = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "plugins" }] : /* istanbul ignore next */ []));
+    _emblaOptions = computed(() => ({
+        // Default embla's direction to the ambient layout direction so the carousel scrolls RTL
+        // automatically; an explicit `direction` in `options` still wins.
+        direction: this._dir.valueSignal(),
+        ...this.options(),
+        axis: this.orientation() === 'horizontal' ? 'x' : 'y',
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_emblaOptions" }] : /* istanbul ignore next */ []));
+    _canScrollPrev = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canScrollPrev" }] : /* istanbul ignore next */ []));
+    canScrollPrev = this._canScrollPrev.asReadonly();
+    _canScrollNext = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_canScrollNext" }] : /* istanbul ignore next */ []));
+    canScrollNext = this._canScrollNext.asReadonly();
+    _currentSlide = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentSlide" }] : /* istanbul ignore next */ []));
+    currentSlide = this._currentSlide.asReadonly();
+    _slideCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_slideCount" }] : /* istanbul ignore next */ []));
+    slideCount = this._slideCount.asReadonly();
+    constructor() {
+        classes(() => "relative");
+    }
+    onEmblaEvent(event) {
+        const emblaApi = this._emblaCarousel().emblaApi;
+        if (!emblaApi) {
+            return;
+        }
+        if (event === 'select' || event === 'init' || event === 'reInit') {
+            this._canScrollPrev.set(emblaApi.canScrollPrev());
+            this._canScrollNext.set(emblaApi.canScrollNext());
+            this._currentSlide.set(emblaApi.selectedScrollSnap());
+            this._slideCount.set(emblaApi.scrollSnapList().length);
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this._emblaCarousel().scrollPrev();
+        }
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this._emblaCarousel().scrollNext();
+        }
+    }
+    scrollPrev() {
+        this._emblaCarousel().scrollPrev();
+    }
+    scrollNext() {
+        this._emblaCarousel().scrollNext();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarousel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmCarousel, isStandalone: true, selector: "hlm-carousel", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel", "role": "region", "aria-roledescription": "carousel" }, listeners: { "keydown": "onKeydown($event)" } }, viewQueries: [{ propertyName: "_emblaCarousel", first: true, predicate: EmblaCarouselDirective, descendants: true, isSignal: true }], ngImport: i0, template: "\n    <div\n      emblaCarousel\n      class=\"overflow-hidden\"\n      [plugins]=\"plugins()\"\n      [options]=\"_emblaOptions()\"\n      [subscribeToEvents]=\"['init', 'select', 'reInit']\"\n      (emblaChange)=\"onEmblaEvent($event)\"\n    >\n      <ng-content select=\"[hlmCarouselContent],hlm-carousel-content\" />\n    </div>\n    <ng-content />\n  ", isInline: true, dependencies: [{ kind: "directive", type: EmblaCarouselDirective, selector: "[emblaCarousel]", inputs: ["options", "plugins", "subscribeToEvents", "eventsThrottleTime"], outputs: ["emblaChange"], exportAs: ["emblaCarousel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarousel, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-carousel',
+                    imports: [EmblaCarouselDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slot': 'carousel',
+                        role: 'region',
+                        'aria-roledescription': 'carousel',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    template: "\n    <div\n      emblaCarousel\n      class=\"overflow-hidden\"\n      [plugins]=\"plugins()\"\n      [options]=\"_emblaOptions()\"\n      [subscribeToEvents]=\"['init', 'select', 'reInit']\"\n      (emblaChange)=\"onEmblaEvent($event)\"\n    >\n      <ng-content select=\"[hlmCarouselContent],hlm-carousel-content\" />\n    </div>\n    <ng-content />\n  ",
+                }]
+        }], ctorParameters: () => [], propDecorators: { _emblaCarousel: [{ type: i0.ViewChild, args: [i0.forwardRef(() => EmblaCarouselDirective), { isSignal: true }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }] } });
+
+class HlmCarouselContent {
+    _orientation = inject(HlmCarousel).orientation;
+    constructor() {
+        classes(() => ["flex", this._orientation() === 'horizontal' ? "-ml-4" : "-mt-4 flex-col"]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselContent, isStandalone: true, selector: "[hlmCarouselContent],hlm-carousel-content", host: { attributes: { "data-slot": "carousel-content" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmCarouselContent],hlm-carousel-content',
+                    host: {
+                        'data-slot': 'carousel-content',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmCarouselItem {
+    _orientation = inject(HlmCarousel).orientation;
+    constructor() {
+        classes(() => ["min-w-0 shrink-0 grow-0 basis-full", this._orientation() === 'horizontal' ? "pl-4" : "pt-4"]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselItem, isStandalone: true, selector: "[hlmCarouselItem],hlm-carousel-item", host: { attributes: { "data-slot": "carousel-item", "role": "group", "aria-roledescription": "slide" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmCarouselItem],hlm-carousel-item',
+                    host: {
+                        'data-slot': 'carousel-item',
+                        role: 'group',
+                        'aria-roledescription': 'slide',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmCarouselNext {
+    _button = inject(HlmBtn);
+    _carousel = inject(HlmCarousel);
+    _computedClass = computed(() => hlm("rounded-full absolute h-8 w-8", this._carousel.orientation() === 'horizontal'
+        ? "-end-12 top-1/2 -translate-y-1/2"
+        : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    isDisabled = () => !this._carousel.canScrollNext();
+    constructor() {
+        effect(() => {
+            const computedClass = this._computedClass();
+            untracked(() => this._button.setClass(computedClass));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselNext, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselNext, isStandalone: true, selector: "button[hlm-carousel-next], button[hlmCarouselNext]", host: { attributes: { "data-slot": "carousel-next" }, listeners: { "click": "_carousel.scrollNext()" }, properties: { "disabled": "isDisabled()" } }, providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })], hostDirectives: [{ directive: i1.HlmBtn, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0, template: "\n    <ng-icon name=\"lucideArrowRight\" class=\"rtl:rotate-180\" />\n    <span class=\"sr-only\">Next slide</span>\n  ", isInline: true, dependencies: [{ 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: HlmCarouselNext, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[hlm-carousel-next], button[hlmCarouselNext]',
+                    imports: [NgIcon],
+                    providers: [provideIcons({ lucideArrowRight }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [{ directive: HlmBtn, inputs: ['variant', 'size'] }],
+                    host: {
+                        'data-slot': 'carousel-next',
+                        '[disabled]': 'isDisabled()',
+                        '(click)': '_carousel.scrollNext()',
+                    },
+                    template: "\n    <ng-icon name=\"lucideArrowRight\" class=\"rtl:rotate-180\" />\n    <span class=\"sr-only\">Next slide</span>\n  ",
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmCarouselPrevious {
+    _button = inject(HlmBtn);
+    _carousel = inject(HlmCarousel);
+    _computedClass = computed(() => hlm("rounded-full absolute h-8 w-8", this._carousel.orientation() === 'horizontal'
+        ? "-start-12 top-1/2 -translate-y-1/2"
+        : "-top-12 left-1/2 -translate-x-1/2 rotate-90"), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    isDisabled = () => !this._carousel.canScrollPrev();
+    constructor() {
+        effect(() => {
+            const computedClass = this._computedClass();
+            untracked(() => this._button.setClass(computedClass));
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselPrevious, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.3", type: HlmCarouselPrevious, isStandalone: true, selector: "button[hlm-carousel-previous], button[hlmCarouselPrevious]", host: { attributes: { "data-slot": "carousel-previous" }, listeners: { "click": "_carousel.scrollPrev()" }, properties: { "disabled": "isDisabled()" } }, providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })], hostDirectives: [{ directive: i1.HlmBtn, inputs: ["variant", "variant", "size", "size"] }], ngImport: i0, template: "\n    <ng-icon name=\"lucideArrowLeft\" class=\"rtl:rotate-180\" />\n    <span class=\"sr-only\">Previous slide</span>\n  ", isInline: true, dependencies: [{ 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: HlmCarouselPrevious, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'button[hlm-carousel-previous], button[hlmCarouselPrevious]',
+                    imports: [NgIcon],
+                    providers: [provideIcons({ lucideArrowLeft }), provideBrnButtonConfig({ variant: 'outline', size: 'icon-sm' })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    hostDirectives: [{ directive: HlmBtn, inputs: ['variant', 'size'] }],
+                    host: {
+                        'data-slot': 'carousel-previous',
+                        '[disabled]': 'isDisabled()',
+                        '(click)': '_carousel.scrollPrev()',
+                    },
+                    template: "\n    <ng-icon name=\"lucideArrowLeft\" class=\"rtl:rotate-180\" />\n    <span class=\"sr-only\">Previous slide</span>\n  ",
+                }]
+        }], ctorParameters: () => [] });
+
+class HlmCarouselSlideDisplay {
+    _carousel = inject(HlmCarousel);
+    _currentSlide = computed(() => this._carousel.currentSlide() + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_currentSlide" }] : /* istanbul ignore next */ []));
+    slideClass = input('text-muted-foreground text-sm', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slideClass" }] : /* istanbul ignore next */ []));
+    /** Screen reader only text for the slide display */
+    label = input('Slide', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    _labelContent = computed(() => {
+        const currentSlide = this._currentSlide();
+        const slideCount = this._carousel.slideCount();
+        return `${this.label()} ${currentSlide} of ${slideCount} is displayed`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_labelContent" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselSlideDisplay, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmCarouselSlideDisplay, isStandalone: true, selector: "hlm-carousel-slide-display", inputs: { slideClass: { classPropertyName: "slideClass", publicName: "slideClass", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-slot": "carousel-slide-display" } }, ngImport: i0, template: "\n    <span class=\"sr-only\">{{ _labelContent() }}</span>\n    <div aria-hidden=\"true\" [class]=\"slideClass()\">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>\n  ", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselSlideDisplay, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-carousel-slide-display',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'data-slot': 'carousel-slide-display',
+                    },
+                    template: "\n    <span class=\"sr-only\">{{ _labelContent() }}</span>\n    <div aria-hidden=\"true\" [class]=\"slideClass()\">{{ _currentSlide() }} / {{ _carousel.slideCount() }}</div>\n  ",
+                }]
+        }], propDecorators: { slideClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "slideClass", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/*
+ * Public API Surface of carousel
+ */
+const HlmCarouselImports = [
+    HlmCarousel,
+    HlmCarouselContent,
+    HlmCarouselItem,
+    HlmCarouselPrevious,
+    HlmCarouselNext,
+    HlmCarouselSlideDisplay,
+];
+class HlmCarouselModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, imports: [HlmCarousel,
+            HlmCarouselContent,
+            HlmCarouselItem,
+            HlmCarouselPrevious,
+            HlmCarouselNext,
+            HlmCarouselSlideDisplay], exports: [HlmCarousel,
+            HlmCarouselContent,
+            HlmCarouselItem,
+            HlmCarouselPrevious,
+            HlmCarouselNext,
+            HlmCarouselSlideDisplay] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, imports: [HlmCarouselPrevious,
+            HlmCarouselNext] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCarouselModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmCarouselImports],
+                    exports: [...HlmCarouselImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmCarousel, HlmCarouselContent, HlmCarouselImports, HlmCarouselItem, HlmCarouselModule, HlmCarouselNext, HlmCarouselPrevious, HlmCarouselSlideDisplay };
+

package/carousel/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "carousel",
+  "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/carousel.mjs",
+  "typings": "types/carousel.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/carousel.d.ts",
+      "default": "./fesm2022/carousel.mjs"
+    }
+  },
+  "type": "module"
+}

package/carousel/types/carousel.d.ts

@@ -0,0 +1,84 @@
+import * as i0 from '@angular/core';
+import { Signal, InputSignal } from '@angular/core';
+import { EmblaOptionsType, EmblaPluginType, EmblaEventType } from 'embla-carousel';
+import { EmblaCarouselDirective } from 'embla-carousel-angular';
+import * as i1 from '@egose/shadcn-theme-ng/button';
+import { ClassValue } from 'clsx';
+
+declare class HlmCarousel {
+    protected readonly _emblaCarousel: Signal<EmblaCarouselDirective>;
+    private readonly _dir;
+    readonly orientation: InputSignal<"horizontal" | "vertical">;
+    readonly options: InputSignal<Omit<EmblaOptionsType, 'axis'> | undefined>;
+    readonly plugins: InputSignal<EmblaPluginType[]>;
+    protected readonly _emblaOptions: Signal<EmblaOptionsType>;
+    private readonly _canScrollPrev;
+    readonly canScrollPrev: Signal<boolean>;
+    private readonly _canScrollNext;
+    readonly canScrollNext: Signal<boolean>;
+    private readonly _currentSlide;
+    readonly currentSlide: Signal<number>;
+    private readonly _slideCount;
+    readonly slideCount: Signal<number>;
+    constructor();
+    protected onEmblaEvent(event: EmblaEventType): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    scrollPrev(): void;
+    scrollNext(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCarousel, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmCarousel, "hlm-carousel", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "plugins": { "alias": "plugins"; "required": false; "isSignal": true; }; }, {}, never, ["[hlmCarouselContent],hlm-carousel-content", "*"], true, never>;
+}
+
+declare class HlmCarouselContent {
+    private readonly _orientation;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCarouselContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmCarouselContent, "[hlmCarouselContent],hlm-carousel-content", never, {}, {}, never, never, true, never>;
+}
+
+declare class HlmCarouselItem {
+    private readonly _orientation;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCarouselItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HlmCarouselItem, "[hlmCarouselItem],hlm-carousel-item", never, {}, {}, never, never, true, never>;
+}
+
+declare class HlmCarouselNext {
+    private readonly _button;
+    protected readonly _carousel: HlmCarousel;
+    private readonly _computedClass;
+    protected readonly isDisabled: () => boolean;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCarouselNext, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmCarouselNext, "button[hlm-carousel-next], button[hlmCarouselNext]", never, {}, {}, never, never, true, [{ directive: typeof i1.HlmBtn; inputs: { "variant": "variant"; "size": "size"; }; outputs: {}; }]>;
+}
+
+declare class HlmCarouselPrevious {
+    private readonly _button;
+    protected readonly _carousel: HlmCarousel;
+    private readonly _computedClass;
+    protected readonly isDisabled: () => boolean;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCarouselPrevious, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmCarouselPrevious, "button[hlm-carousel-previous], button[hlmCarouselPrevious]", never, {}, {}, never, never, true, [{ directive: typeof i1.HlmBtn; inputs: { "variant": "variant"; "size": "size"; }; outputs: {}; }]>;
+}
+
+declare class HlmCarouselSlideDisplay {
+    protected readonly _carousel: HlmCarousel;
+    protected readonly _currentSlide: i0.Signal<number>;
+    readonly slideClass: i0.InputSignal<ClassValue>;
+    /** Screen reader only text for the slide display */
+    readonly label: i0.InputSignal<string>;
+    protected readonly _labelContent: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCarouselSlideDisplay, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HlmCarouselSlideDisplay, "hlm-carousel-slide-display", never, { "slideClass": { "alias": "slideClass"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const HlmCarouselImports: readonly [typeof HlmCarousel, typeof HlmCarouselContent, typeof HlmCarouselItem, typeof HlmCarouselPrevious, typeof HlmCarouselNext, typeof HlmCarouselSlideDisplay];
+declare class HlmCarouselModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<HlmCarouselModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<HlmCarouselModule, never, [typeof HlmCarousel, typeof HlmCarouselContent, typeof HlmCarouselItem, typeof HlmCarouselPrevious, typeof HlmCarouselNext, typeof HlmCarouselSlideDisplay], [typeof HlmCarousel, typeof HlmCarouselContent, typeof HlmCarouselItem, typeof HlmCarouselPrevious, typeof HlmCarouselNext, typeof HlmCarouselSlideDisplay]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<HlmCarouselModule>;
+}
+
+export { HlmCarousel, HlmCarouselContent, HlmCarouselImports, HlmCarouselItem, HlmCarouselModule, HlmCarouselNext, HlmCarouselPrevious, HlmCarouselSlideDisplay };

package/checkbox/README.md

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

package/checkbox/fesm2022/checkbox.mjs

@@ -0,0 +1,113 @@
+import * as i0 from '@angular/core';
+import { forwardRef, input, computed, model, booleanAttribute, signal, output, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { provideIcons, NgIcon } from '@ng-icons/core';
+import { lucideCheck } from '@ng-icons/lucide';
+import { BrnCheckbox } from '@spartan-ng/brain/checkbox';
+import { HlmIcon } from '@egose/shadcn-theme-ng/icon';
+import { hlm } from '@egose/shadcn-theme-ng/utils';
+
+const HLM_CHECKBOX_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => HlmCheckbox),
+    multi: true,
+};
+class HlmCheckbox {
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+    _computedClass = computed(() => hlm("border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shadow-xs peer size-4 shrink-0 cursor-default rounded-[4px] border outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", this.userClass(), this.disabledState() ? "cursor-not-allowed opacity-50" : ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
+    /** Used to set the id on the underlying brn element. */
+    id = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Used to set the aria-label attribute on the underlying brn element. */
+    ariaLabel = input(null, { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: 'aria-label' });
+    /** Used to set the aria-labelledby attribute on the underlying brn element. */
+    ariaLabelledby = input(null, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {}), alias: 'aria-labelledby' });
+    /** Used to set the aria-describedby attribute on the underlying brn element. */
+    ariaDescribedby = input(null, { ...(ngDevMode ? { debugName: "ariaDescribedby" } : /* istanbul ignore next */ {}), alias: 'aria-describedby' });
+    /** The checked state of the checkbox. */
+    checked = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** The name attribute of the checkbox. */
+    name = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Whether the checkbox is required. */
+    required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Whether the checkbox is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Additional visual/interaction lock that does not write to a reactive form control. */
+    wrapperDisabled = input(false, { ...(ngDevMode ? { debugName: "wrapperDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    formDisabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    disabledState = computed(() => this.disabled() || this.wrapperDisabled() || this.formDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
+    changed = output();
+    _onChange;
+    _onTouched;
+    _handleChange() {
+        if (this.disabledState())
+            return;
+        const previousChecked = this.checked();
+        this.checked.set(previousChecked === 'indeterminate' ? true : !previousChecked);
+        this._onChange?.(!previousChecked);
+        this.changed.emit(!previousChecked);
+    }
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value) {
+        this.checked.set(!!value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmCheckbox, isStandalone: true, selector: "hlm-checkbox", inputs: { userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapperDisabled: { classPropertyName: "wrapperDisabled", publicName: "wrapperDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, host: { properties: { "attr.id": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null", "attr.data-disabled": "disabledState() ? \"\" : null" }, classAttribute: "contents peer" }, providers: [HLM_CHECKBOX_VALUE_ACCESSOR], ngImport: i0, template: "\n    <brn-checkbox\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [class]=\"_computedClass()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabledState()\"\n      [required]=\"required()\"\n      [aria-label]=\"ariaLabel()\"\n      [aria-labelledby]=\"ariaLabelledby()\"\n      [aria-describedby]=\"ariaDescribedby()\"\n      (changed)=\"_handleChange()\"\n      (touched)=\"_onTouched?.()\"\n    >\n      @if (checked()) {\n        <span class=\"flex items-center justify-center text-current transition-none\">\n          <ng-icon hlm size=\"14px\" name=\"lucideCheck\" />\n        </span>\n      }\n    </brn-checkbox>\n  ", isInline: true, dependencies: [{ kind: "component", type: BrnCheckbox, selector: "brn-checkbox", inputs: ["checked", "indeterminate", "id", "name", "class", "hostStyles", "aria-label", "aria-labelledby", "aria-describedby", "required", "disabled", "forceInvalid"], outputs: ["checkedChange", "indeterminateChange", "touched"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: HlmIcon, selector: "ng-icon[hlm]", inputs: ["size"] }], viewProviders: [provideIcons({ lucideCheck })], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-checkbox',
+                    imports: [BrnCheckbox, NgIcon, HlmIcon],
+                    template: "\n    <brn-checkbox\n      [id]=\"id()\"\n      [name]=\"name()\"\n      [class]=\"_computedClass()\"\n      [checked]=\"checked()\"\n      [disabled]=\"disabledState()\"\n      [required]=\"required()\"\n      [aria-label]=\"ariaLabel()\"\n      [aria-labelledby]=\"ariaLabelledby()\"\n      [aria-describedby]=\"ariaDescribedby()\"\n      (changed)=\"_handleChange()\"\n      (touched)=\"_onTouched?.()\"\n    >\n      @if (checked()) {\n        <span class=\"flex items-center justify-center text-current transition-none\">\n          <ng-icon hlm size=\"14px\" name=\"lucideCheck\" />\n        </span>\n      }\n    </brn-checkbox>\n  ",
+                    host: {
+                        class: 'contents peer',
+                        '[attr.id]': 'null',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-labelledby]': 'null',
+                        '[attr.aria-describedby]': 'null',
+                        '[attr.data-disabled]': 'disabledState() ? "" : null',
+                    },
+                    providers: [HLM_CHECKBOX_VALUE_ACCESSOR],
+                    viewProviders: [provideIcons({ lucideCheck })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapperDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperDisabled", required: false }] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
+
+/*
+ * Public API Surface of checkbox
+ */
+const HlmCheckboxImports = [HlmCheckbox];
+class HlmCheckboxModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckbox], exports: [HlmCheckbox] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, imports: [HlmCheckboxImports] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmCheckboxImports],
+                    exports: [...HlmCheckboxImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HLM_CHECKBOX_VALUE_ACCESSOR, HlmCheckbox, HlmCheckboxImports, HlmCheckboxModule };
+

package/checkbox/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "checkbox",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.3.0 || ^22.0.0",
+    "@angular/core": "^20.3.0 || ^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/checkbox.mjs",
+  "typings": "types/checkbox.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/checkbox.d.ts",
+      "default": "./fesm2022/checkbox.mjs"
+    }
+  },
+  "type": "module"
+}

package/checkbox/types/checkbox.d.ts

@@ -0,0 +1,56 @@
+import * as _angular_core from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ControlValueAccessor } from '@angular/forms';
+import { ChangeFn, TouchFn } from '@spartan-ng/brain/forms';
+import { ClassValue } from 'clsx';
+
+declare const HLM_CHECKBOX_VALUE_ACCESSOR: {
+    provide: _angular_core.InjectionToken<readonly ControlValueAccessor[]>;
+    useExisting: _angular_core.Type<any>;
+    multi: boolean;
+};
+declare class HlmCheckbox implements ControlValueAccessor {
+    readonly userClass: _angular_core.InputSignal<ClassValue>;
+    protected readonly _computedClass: _angular_core.Signal<string>;
+    /** Used to set the id on the underlying brn element. */
+    readonly id: _angular_core.InputSignal<string | null>;
+    /** Used to set the aria-label attribute on the underlying brn element. */
+    readonly ariaLabel: _angular_core.InputSignal<string | null>;
+    /** Used to set the aria-labelledby attribute on the underlying brn element. */
+    readonly ariaLabelledby: _angular_core.InputSignal<string | null>;
+    /** Used to set the aria-describedby attribute on the underlying brn element. */
+    readonly ariaDescribedby: _angular_core.InputSignal<string | null>;
+    /** The checked state of the checkbox. */
+    readonly checked: _angular_core.ModelSignal<CheckboxValue>;
+    /** The name attribute of the checkbox. */
+    readonly name: _angular_core.InputSignal<string | null>;
+    /** Whether the checkbox is required. */
+    readonly required: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Whether the checkbox is disabled. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    /** Additional visual/interaction lock that does not write to a reactive form control. */
+    readonly wrapperDisabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly formDisabled;
+    readonly disabledState: _angular_core.Signal<boolean>;
+    readonly changed: _angular_core.OutputEmitterRef<boolean>;
+    protected _onChange?: ChangeFn<CheckboxValue>;
+    protected _onTouched?: TouchFn;
+    protected _handleChange(): void;
+    /** CONTROL VALUE ACCESSOR */
+    writeValue(value: CheckboxValue): void;
+    registerOnChange(fn: ChangeFn<CheckboxValue>): void;
+    registerOnTouched(fn: TouchFn): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmCheckbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmCheckbox, "hlm-checkbox", never, { "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapperDisabled": { "alias": "wrapperDisabled"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
+}
+type CheckboxValue = boolean | 'indeterminate';
+
+declare const HlmCheckboxImports: readonly [typeof HlmCheckbox];
+declare class HlmCheckboxModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmCheckboxModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<HlmCheckboxModule, never, [typeof HlmCheckbox], [typeof HlmCheckbox]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<HlmCheckboxModule>;
+}
+
+export { HLM_CHECKBOX_VALUE_ACCESSOR, HlmCheckbox, HlmCheckboxImports, HlmCheckboxModule };

package/collapsible/README.md

@@ -0,0 +1,11 @@
+# Collapsible
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli).
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build collapsible
+```