@aiandralves/ai-ui 1.0.0

package/esm2022/lib/components/progress-bar/progress-bar.js

@@ -0,0 +1,133 @@
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { progressBarCircleVariants, progressBarFillVariants, progressBarVariants } from "./progress-bar.variants";
+import * as i0 from "@angular/core";
+export class AiProgressBar {
+    variant = input("primary", ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    size = input("normal", ...(ngDevMode ? [{ debugName: "size" }] : []));
+    shape = input("normal", ...(ngDevMode ? [{ debugName: "shape" }] : []));
+    indeterminate = input(false, { ...(ngDevMode ? { debugName: "indeterminate" } : {}), transform: booleanAttribute });
+    showLabel = input(false, { ...(ngDevMode ? { debugName: "showLabel" } : {}), transform: booleanAttribute });
+    progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    barClass = input("", ...(ngDevMode ? [{ debugName: "barClass" }] : []));
+    normalizedProgress = computed(() => Math.max(0, Math.min(100, this.progress())), ...(ngDevMode ? [{ debugName: "normalizedProgress" }] : []));
+    hostClasses = computed(() => {
+        if (this.shape() === "circle") {
+            return mergeClasses(progressBarCircleVariants({ size: this.size() }), this.class());
+        }
+        return mergeClasses(progressBarVariants({ size: this.size() }), this.class());
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    fillClasses = computed(() => {
+        const widthStyle = this.indeterminate() ? "w-1/2" : "";
+        return mergeClasses(progressBarFillVariants({ variant: this.variant(), indeterminate: this.indeterminate() }), widthStyle, this.barClass());
+    }, ...(ngDevMode ? [{ debugName: "fillClasses" }] : []));
+    fillStyle = computed(() => {
+        if (this.indeterminate())
+            return {};
+        return { width: `${this.normalizedProgress()}%` };
+    }, ...(ngDevMode ? [{ debugName: "fillStyle" }] : []));
+    svgSize = computed(() => {
+        const sizes = { sm: 64, normal: 96, lg: 128 };
+        return sizes[this.size()] ?? 96;
+    }, ...(ngDevMode ? [{ debugName: "svgSize" }] : []));
+    strokeWidth = computed(() => {
+        const widths = { sm: 4, normal: 6, lg: 8 };
+        return widths[this.size()] ?? 6;
+    }, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    svgCenter = computed(() => this.svgSize() / 2, ...(ngDevMode ? [{ debugName: "svgCenter" }] : []));
+    svgRadius = computed(() => (this.svgSize() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "svgRadius" }] : []));
+    circumference = computed(() => 2 * Math.PI * this.svgRadius(), ...(ngDevMode ? [{ debugName: "circumference" }] : []));
+    dashOffset = computed(() => {
+        if (this.indeterminate())
+            return this.circumference() * 0.75;
+        return this.circumference() - (this.normalizedProgress() / 100) * this.circumference();
+    }, ...(ngDevMode ? [{ debugName: "dashOffset" }] : []));
+    fillStrokeClass = computed(() => {
+        const variantMap = { primary: "text-primary", accent: "text-accent" };
+        return variantMap[this.variant()] ?? "text-primary";
+    }, ...(ngDevMode ? [{ debugName: "fillStrokeClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiProgressBar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: AiProgressBar, isStandalone: true, selector: "ai-progress-bar", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, barClass: { classPropertyName: "barClass", publicName: "barClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuenow": "normalizedProgress()", "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "class": "hostClasses()" } }, exportAs: ["aiProgressBar"], ngImport: i0, template: `
+        @if (shape() === "circle") {
+            <svg class="transform -rotate-90" [attr.viewBox]="'0 0 ' + svgSize() + ' ' + svgSize()">
+                <circle
+                    class="text-muted"
+                    [attr.cx]="svgCenter()"
+                    [attr.cy]="svgCenter()"
+                    [attr.r]="svgRadius()"
+                    fill="none"
+                    [attr.stroke-width]="strokeWidth()"
+                    stroke="currentColor"
+                />
+                <circle
+                    [class]="fillStrokeClass()"
+                    [attr.cx]="svgCenter()"
+                    [attr.cy]="svgCenter()"
+                    [attr.r]="svgRadius()"
+                    fill="none"
+                    [attr.stroke-width]="strokeWidth()"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    [attr.stroke-dasharray]="circumference()"
+                    [attr.stroke-dashoffset]="dashOffset()"
+                    [class.ai-circle-indeterminate]="indeterminate()"
+                />
+            </svg>
+            @if (showLabel()) {
+                <span class="absolute text-sm font-medium">{{ normalizedProgress() }}%</span>
+            }
+        } @else {
+            <div [class]="fillClasses()" [style.width.%]="indeterminate() ? null : normalizedProgress()"></div>
+            @if (showLabel() && !indeterminate()) {
+                <span class="absolute inset-0 flex items-center justify-center text-xs font-medium">{{ normalizedProgress() }}%</span>
+            }
+        }
+    `, isInline: true, styles: ["@keyframes ai-progress-indeterminate{0%{left:-50%;width:50%}to{left:100%;width:50%}}@keyframes ai-progress-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ai-progress-bar .ai-bar-indeterminate{animation:ai-progress-indeterminate 1.5s ease-in-out infinite}ai-progress-bar .ai-circle-indeterminate{animation:ai-progress-spin 1.5s linear infinite;transform-origin:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiProgressBar, decorators: [{
+            type: Component,
+            args: [{ selector: "ai-progress-bar", exportAs: "aiProgressBar", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        role: "progressbar",
+                        "[attr.aria-valuenow]": "normalizedProgress()",
+                        "[attr.aria-valuemin]": "0",
+                        "[attr.aria-valuemax]": "100",
+                        "[class]": "hostClasses()",
+                    }, template: `
+        @if (shape() === "circle") {
+            <svg class="transform -rotate-90" [attr.viewBox]="'0 0 ' + svgSize() + ' ' + svgSize()">
+                <circle
+                    class="text-muted"
+                    [attr.cx]="svgCenter()"
+                    [attr.cy]="svgCenter()"
+                    [attr.r]="svgRadius()"
+                    fill="none"
+                    [attr.stroke-width]="strokeWidth()"
+                    stroke="currentColor"
+                />
+                <circle
+                    [class]="fillStrokeClass()"
+                    [attr.cx]="svgCenter()"
+                    [attr.cy]="svgCenter()"
+                    [attr.r]="svgRadius()"
+                    fill="none"
+                    [attr.stroke-width]="strokeWidth()"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    [attr.stroke-dasharray]="circumference()"
+                    [attr.stroke-dashoffset]="dashOffset()"
+                    [class.ai-circle-indeterminate]="indeterminate()"
+                />
+            </svg>
+            @if (showLabel()) {
+                <span class="absolute text-sm font-medium">{{ normalizedProgress() }}%</span>
+            }
+        } @else {
+            <div [class]="fillClasses()" [style.width.%]="indeterminate() ? null : normalizedProgress()"></div>
+            @if (showLabel() && !indeterminate()) {
+                <span class="absolute inset-0 flex items-center justify-center text-xs font-medium">{{ normalizedProgress() }}%</span>
+            }
+        }
+    `, styles: ["@keyframes ai-progress-indeterminate{0%{left:-50%;width:50%}to{left:100%;width:50%}}@keyframes ai-progress-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}ai-progress-bar .ai-bar-indeterminate{animation:ai-progress-indeterminate 1.5s ease-in-out infinite}ai-progress-bar .ai-circle-indeterminate{animation:ai-progress-spin 1.5s linear infinite;transform-origin:center}\n"] }]
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], barClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "barClass", required: false }] }] } });
+//# sourceMappingURL=progress-bar.js.map

package/esm2022/lib/components/progress-bar/progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/progress-bar/progress-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { BooleanInput } from \"@angular/cdk/coercion\";\r\nimport { booleanAttribute, ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from \"@angular/core\";\r\n\r\nimport { mergeClasses } from \"../../core\";\r\nimport { progressBarCircleVariants, progressBarFillVariants, ProgressBarShape, ProgressBarSize, ProgressBarVariant, progressBarVariants } from \"./progress-bar.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-progress-bar\",\r\n    exportAs: \"aiProgressBar\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    styles: `\r\n        @keyframes ai-progress-indeterminate {\r\n            0% {\r\n                left: -50%;\r\n                width: 50%;\r\n            }\r\n            100% {\r\n                left: 100%;\r\n                width: 50%;\r\n            }\r\n        }\r\n        @keyframes ai-progress-spin {\r\n            0% {\r\n                transform: rotate(0deg);\r\n            }\r\n            100% {\r\n                transform: rotate(360deg);\r\n            }\r\n        }\r\n        ai-progress-bar .ai-bar-indeterminate {\r\n            animation: ai-progress-indeterminate 1.5s ease-in-out infinite;\r\n        }\r\n        ai-progress-bar .ai-circle-indeterminate {\r\n            animation: ai-progress-spin 1.5s linear infinite;\r\n            transform-origin: center;\r\n        }\r\n    `,\r\n    host: {\r\n        role: \"progressbar\",\r\n        \"[attr.aria-valuenow]\": \"normalizedProgress()\",\r\n        \"[attr.aria-valuemin]\": \"0\",\r\n        \"[attr.aria-valuemax]\": \"100\",\r\n        \"[class]\": \"hostClasses()\",\r\n    },\r\n    template: `\r\n        @if (shape() === \"circle\") {\r\n            <svg class=\"transform -rotate-90\" [attr.viewBox]=\"'0 0 ' + svgSize() + ' ' + svgSize()\">\r\n                <circle\r\n                    class=\"text-muted\"\r\n                    [attr.cx]=\"svgCenter()\"\r\n                    [attr.cy]=\"svgCenter()\"\r\n                    [attr.r]=\"svgRadius()\"\r\n                    fill=\"none\"\r\n                    [attr.stroke-width]=\"strokeWidth()\"\r\n                    stroke=\"currentColor\"\r\n                />\r\n                <circle\r\n                    [class]=\"fillStrokeClass()\"\r\n                    [attr.cx]=\"svgCenter()\"\r\n                    [attr.cy]=\"svgCenter()\"\r\n                    [attr.r]=\"svgRadius()\"\r\n                    fill=\"none\"\r\n                    [attr.stroke-width]=\"strokeWidth()\"\r\n                    stroke=\"currentColor\"\r\n                    stroke-linecap=\"round\"\r\n                    [attr.stroke-dasharray]=\"circumference()\"\r\n                    [attr.stroke-dashoffset]=\"dashOffset()\"\r\n                    [class.ai-circle-indeterminate]=\"indeterminate()\"\r\n                />\r\n            </svg>\r\n            @if (showLabel()) {\r\n                <span class=\"absolute text-sm font-medium\">{{ normalizedProgress() }}%</span>\r\n            }\r\n        } @else {\r\n            <div [class]=\"fillClasses()\" [style.width.%]=\"indeterminate() ? null : normalizedProgress()\"></div>\r\n            @if (showLabel() && !indeterminate()) {\r\n                <span class=\"absolute inset-0 flex items-center justify-center text-xs font-medium\">{{ normalizedProgress() }}%</span>\r\n            }\r\n        }\r\n    `,\r\n})\r\nexport class AiProgressBar {\r\n    readonly variant = input<ProgressBarVariant>(\"primary\");\r\n    readonly size = input<ProgressBarSize>(\"normal\");\r\n    readonly shape = input<ProgressBarShape>(\"normal\");\r\n    readonly indeterminate = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\r\n    readonly showLabel = input<boolean, BooleanInput>(false, { transform: booleanAttribute });\r\n    readonly progress = input<number>(0);\r\n    readonly class = input<ClassValue>(\"\");\r\n    readonly barClass = input<ClassValue>(\"\");\r\n\r\n    protected readonly normalizedProgress = computed(() => Math.max(0, Math.min(100, this.progress())));\r\n\r\n    protected readonly hostClasses = computed(() => {\r\n        if (this.shape() === \"circle\") {\r\n            return mergeClasses(progressBarCircleVariants({ size: this.size() }), this.class());\r\n        }\r\n        return mergeClasses(progressBarVariants({ size: this.size() }), this.class());\r\n    });\r\n\r\n    protected readonly fillClasses = computed(() => {\r\n        const widthStyle = this.indeterminate() ? \"w-1/2\" : \"\";\r\n        return mergeClasses(progressBarFillVariants({ variant: this.variant(), indeterminate: this.indeterminate() }), widthStyle, this.barClass());\r\n    });\r\n\r\n    protected readonly fillStyle = computed(() => {\r\n        if (this.indeterminate()) return {};\r\n        return { width: `${this.normalizedProgress()}%` };\r\n    });\r\n\r\n    protected readonly svgSize = computed(() => {\r\n        const sizes = { sm: 64, normal: 96, lg: 128 };\r\n        return sizes[this.size()!] ?? 96;\r\n    });\r\n\r\n    protected readonly strokeWidth = computed(() => {\r\n        const widths = { sm: 4, normal: 6, lg: 8 };\r\n        return widths[this.size()!] ?? 6;\r\n    });\r\n\r\n    protected readonly svgCenter = computed(() => this.svgSize() / 2);\r\n    protected readonly svgRadius = computed(() => (this.svgSize() - this.strokeWidth()) / 2);\r\n    protected readonly circumference = computed(() => 2 * Math.PI * this.svgRadius());\r\n\r\n    protected readonly dashOffset = computed(() => {\r\n        if (this.indeterminate()) return this.circumference() * 0.75;\r\n        return this.circumference() - (this.normalizedProgress() / 100) * this.circumference();\r\n    });\r\n\r\n    protected readonly fillStrokeClass = computed(() => {\r\n        const variantMap = { primary: \"text-primary\", accent: \"text-accent\" };\r\n        return variantMap[this.variant()!] ?? \"text-primary\";\r\n    });\r\n}\r\n"]}

package/esm2022/lib/components/progress-bar/progress-bar.variants.js

@@ -0,0 +1,42 @@
+import { cva } from "class-variance-authority";
+export const progressBarVariants = cva("relative w-full overflow-hidden rounded-full bg-muted", {
+    variants: {
+        size: {
+            sm: "h-1.5",
+            normal: "h-3",
+            lg: "h-5",
+        },
+    },
+    defaultVariants: {
+        size: "normal",
+    },
+});
+export const progressBarFillVariants = cva("h-full transition-all duration-300 ease-in-out rounded-full", {
+    variants: {
+        variant: {
+            primary: "bg-primary",
+            accent: "bg-accent",
+        },
+        indeterminate: {
+            true: "ai-bar-indeterminate absolute",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "primary",
+        indeterminate: false,
+    },
+});
+export const progressBarCircleVariants = cva("relative inline-flex items-center justify-center", {
+    variants: {
+        size: {
+            sm: "h-16 w-16",
+            normal: "h-24 w-24",
+            lg: "h-32 w-32",
+        },
+    },
+    defaultVariants: {
+        size: "normal",
+    },
+});
+//# sourceMappingURL=progress-bar.variants.js.map

package/esm2022/lib/components/progress-bar/progress-bar.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-bar.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/progress-bar/progress-bar.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC,uDAAuD,EAAE;IAC5F,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,OAAO;YACX,MAAM,EAAE,KAAK;YACb,EAAE,EAAE,KAAK;SACZ;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;KACjB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAC,6DAA6D,EAAE;IACtG,QAAQ,EAAE;QACN,OAAO,EAAE;YACL,OAAO,EAAE,YAAY;YACrB,MAAM,EAAE,WAAW;SACtB;QACD,aAAa,EAAE;YACX,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,EAAE;SACZ;KACJ;IACD,eAAe,EAAE;QACb,OAAO,EAAE,SAAS;QAClB,aAAa,EAAE,KAAK;KACvB;CACJ,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAC,kDAAkD,EAAE;IAC7F,QAAQ,EAAE;QACN,IAAI,EAAE;YACF,EAAE,EAAE,WAAW;YACf,MAAM,EAAE,WAAW;YACnB,EAAE,EAAE,WAAW;SAClB;KACJ;IACD,eAAe,EAAE;QACb,IAAI,EAAE,QAAQ;KACjB;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const progressBarVariants = cva(\"relative w-full overflow-hidden rounded-full bg-muted\", {\r\n    variants: {\r\n        size: {\r\n            sm: \"h-1.5\",\r\n            normal: \"h-3\",\r\n            lg: \"h-5\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"normal\",\r\n    },\r\n});\r\n\r\nexport const progressBarFillVariants = cva(\"h-full transition-all duration-300 ease-in-out rounded-full\", {\r\n    variants: {\r\n        variant: {\r\n            primary: \"bg-primary\",\r\n            accent: \"bg-accent\",\r\n        },\r\n        indeterminate: {\r\n            true: \"ai-bar-indeterminate absolute\",\r\n            false: \"\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        variant: \"primary\",\r\n        indeterminate: false,\r\n    },\r\n});\r\n\r\nexport const progressBarCircleVariants = cva(\"relative inline-flex items-center justify-center\", {\r\n    variants: {\r\n        size: {\r\n            sm: \"h-16 w-16\",\r\n            normal: \"h-24 w-24\",\r\n            lg: \"h-32 w-32\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        size: \"normal\",\r\n    },\r\n});\r\n\r\nexport type ProgressBarVariants = VariantProps<typeof progressBarVariants>;\r\nexport type ProgressBarFillVariants = VariantProps<typeof progressBarFillVariants>;\r\nexport type ProgressBarCircleVariants = VariantProps<typeof progressBarCircleVariants>;\r\n\r\nexport type ProgressBarSize = NonNullable<ProgressBarVariants[\"size\"]>;\r\nexport type ProgressBarShape = \"normal\" | \"circle\";\r\nexport type ProgressBarVariant = NonNullable<ProgressBarFillVariants[\"variant\"]>;\r\n"]}

package/esm2022/lib/components/separator/demo/orientation.js

@@ -0,0 +1,45 @@
+import { Component } from "@angular/core";
+import { AiSeparator } from "../separator";
+import * as i0 from "@angular/core";
+export class DemoSeparatorOrientationComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSeparatorOrientationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoSeparatorOrientationComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex flex-col gap-4">
+            <div class="space-y-1">
+                <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+                <p class="text-muted-foreground text-sm">An open-source UI component library.</p>
+            </div>
+            <ai-separator orientation="horizontal" />
+            <div class="flex h-5 items-center space-x-4 text-sm">
+                <div>Blog</div>
+                <ai-separator orientation="vertical" />
+                <div>Docs</div>
+                <ai-separator orientation="vertical" />
+                <div>Source</div>
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiSeparator, selector: "ai-separator", inputs: ["orientation", "class"], exportAs: ["aiSeparator"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSeparatorOrientationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSeparator],
+                    template: `
+        <div class="flex flex-col gap-4">
+            <div class="space-y-1">
+                <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+                <p class="text-muted-foreground text-sm">An open-source UI component library.</p>
+            </div>
+            <ai-separator orientation="horizontal" />
+            <div class="flex h-5 items-center space-x-4 text-sm">
+                <div>Blog</div>
+                <ai-separator orientation="vertical" />
+                <div>Docs</div>
+                <ai-separator orientation="vertical" />
+                <div>Source</div>
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=orientation.js.map

package/esm2022/lib/components/separator/demo/orientation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"orientation.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/separator/demo/orientation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;;AAqB3C,MAAM,OAAO,iCAAiC;uGAAjC,iCAAiC;2FAAjC,iCAAiC,wEAjBhC;;;;;;;;;;;;;;;KAeT,4DAhBS,WAAW;;2FAkBZ,iCAAiC;kBAnB7C,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,WAAW,CAAC;oBACtB,QAAQ,EAAE;;;;;;;;;;;;;;;KAeT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\nimport { AiSeparator } from \"../separator\";\r\n\r\n@Component({\r\n    imports: [AiSeparator],\r\n    template: `\r\n        <div class=\"flex flex-col gap-4\">\r\n            <div class=\"space-y-1\">\r\n                <h4 class=\"text-sm font-medium leading-none\">Radix Primitives</h4>\r\n                <p class=\"text-muted-foreground text-sm\">An open-source UI component library.</p>\r\n            </div>\r\n            <ai-separator orientation=\"horizontal\" />\r\n            <div class=\"flex h-5 items-center space-x-4 text-sm\">\r\n                <div>Blog</div>\r\n                <ai-separator orientation=\"vertical\" />\r\n                <div>Docs</div>\r\n                <ai-separator orientation=\"vertical\" />\r\n                <div>Source</div>\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSeparatorOrientationComponent {}\r\n"]}

package/esm2022/lib/components/separator/demo/separator.js

@@ -0,0 +1,12 @@
+import { DemoSeparatorOrientationComponent } from "./orientation";
+export const SEPARATOR = {
+    componentName: "separator",
+    componentType: "separator",
+    examples: [
+        {
+            name: "orientation",
+            component: DemoSeparatorOrientationComponent,
+        },
+    ],
+};
+//# sourceMappingURL=separator.js.map

package/esm2022/lib/components/separator/demo/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/separator/demo/separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iCAAiC,EAAE,MAAM,eAAe,CAAC;AAElE,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,aAAa,EAAE,WAAW;IAC1B,aAAa,EAAE,WAAW;IAC1B,QAAQ,EAAE;QACN;YACI,IAAI,EAAE,aAAa;YACnB,SAAS,EAAE,iCAAiC;SAC/C;KACJ;CACJ,CAAC","sourcesContent":["import { DemoSeparatorOrientationComponent } from \"./orientation\";\r\n\r\nexport const SEPARATOR = {\r\n    componentName: \"separator\",\r\n    componentType: \"separator\",\r\n    examples: [\r\n        {\r\n            name: \"orientation\",\r\n            component: DemoSeparatorOrientationComponent,\r\n        },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/separator/index.js

@@ -0,0 +1,3 @@
+export * from "./demo/separator";
+export * from "./separator";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/separator/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC","sourcesContent":["export * from \"./demo/separator\";\r\nexport * from \"./separator\";\r\n"]}

package/esm2022/lib/components/separator/separator.js

@@ -0,0 +1,25 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { separatorVariants } from "./separator.variants";
+import * as i0 from "@angular/core";
+export class AiSeparator {
+    orientation = input("horizontal", ...(ngDevMode ? [{ debugName: "orientation" }] : []));
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    classes = computed(() => mergeClasses(separatorVariants({ orientation: this.orientation() }), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSeparator, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: AiSeparator, isStandalone: true, selector: "ai-separator", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, exportAs: ["aiSeparator"], ngImport: i0, template: "", isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSeparator, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-separator",
+                    exportAs: "aiSeparator",
+                    template: "",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        "[class]": "classes()",
+                    },
+                }]
+        }], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=separator.js.map

package/esm2022/lib/components/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/separator/separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvG,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAqB,MAAM,sBAAsB,CAAC;;AAY5E,MAAM,OAAO,WAAW;IACpB,WAAW,GAAG,KAAK,CAAmC,YAAY,uDAAC,CAAC;IAEpE,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAEpB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;uGAL9G,WAAW;2FAAX,WAAW,iaAPV,EAAE;;2FAOH,WAAW;kBAVvB,SAAS;mBAAC;oBACP,QAAQ,EAAE,cAAc;oBACxB,QAAQ,EAAE,aAAa;oBACvB,QAAQ,EAAE,EAAE;oBACZ,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,IAAI,EAAE;wBACF,SAAS,EAAE,WAAW;qBACzB;iBACJ","sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from \"@angular/core\";\r\nimport { ClassValue } from \"clsx\";\r\nimport { mergeClasses } from \"../../core\";\r\nimport { separatorVariants, SeparatorVariants } from \"./separator.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-separator\",\r\n    exportAs: \"aiSeparator\",\r\n    template: \"\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    host: {\r\n        \"[class]\": \"classes()\",\r\n    },\r\n})\r\nexport class AiSeparator {\r\n    orientation = input<SeparatorVariants[\"orientation\"]>(\"horizontal\");\r\n\r\n    class = input<ClassValue>(\"\");\r\n\r\n    protected classes = computed(() => mergeClasses(separatorVariants({ orientation: this.orientation() }), this.class()));\r\n}\r\n"]}

package/esm2022/lib/components/separator/separator.variants.js

@@ -0,0 +1,13 @@
+import { cva } from "class-variance-authority";
+export const separatorVariants = cva("block bg-border", {
+    variants: {
+        orientation: {
+            horizontal: "h-[1px] w-full my-1.5",
+            vertical: "h-full w-[1px] inline-block",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+//# sourceMappingURL=separator.variants.js.map

package/esm2022/lib/components/separator/separator.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/separator/separator.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC,iBAAiB,EAAE;IACpD,QAAQ,EAAE;QACN,WAAW,EAAE;YACT,UAAU,EAAE,uBAAuB;YACnC,QAAQ,EAAE,6BAA6B;SAC1C;KACJ;IACD,eAAe,EAAE;QACb,WAAW,EAAE,YAAY;KAC5B;CACJ,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const separatorVariants = cva(\"block bg-border\", {\r\n    variants: {\r\n        orientation: {\r\n            horizontal: \"h-[1px] w-full my-1.5\",\r\n            vertical: \"h-full w-[1px] inline-block\",\r\n        },\r\n    },\r\n    defaultVariants: {\r\n        orientation: \"horizontal\",\r\n    },\r\n});\r\n\r\nexport type SeparatorVariants = VariantProps<typeof separatorVariants>;\r\n"]}

package/esm2022/lib/components/skeleton/demo/card.js

@@ -0,0 +1,47 @@
+import { Component } from "@angular/core";
+import { AiSkeleton } from "../skeleton";
+import * as i0 from "@angular/core";
+export class DemoSkeletonCardComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSkeletonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoSkeletonCardComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="max-w-sm w-full p-4 border border-border rounded-lg shadow-sm">
+            <ai-skeleton class="flex w-full items-center justify-center h-48 mb-4 rounded-lg">
+                <svg class="w-10 h-10 text-primary/40" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+                    <path
+                        d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"
+                    />
+                    <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
+                </svg>
+            </ai-skeleton>
+            <div class="space-y-2">
+                <ai-skeleton class="h-2.5 w-48" />
+                <ai-skeleton class="h-2" />
+                <ai-skeleton class="h-2" />
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiSkeleton, selector: "ai-skeleton", inputs: ["class"], exportAs: ["aiSkeleton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSkeletonCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSkeleton],
+                    template: `
+        <div class="max-w-sm w-full p-4 border border-border rounded-lg shadow-sm">
+            <ai-skeleton class="flex w-full items-center justify-center h-48 mb-4 rounded-lg">
+                <svg class="w-10 h-10 text-primary/40" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 20">
+                    <path
+                        d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z"
+                    />
+                    <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
+                </svg>
+            </ai-skeleton>
+            <div class="space-y-2">
+                <ai-skeleton class="h-2.5 w-48" />
+                <ai-skeleton class="h-2" />
+                <ai-skeleton class="h-2" />
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=card.js.map

package/esm2022/lib/components/skeleton/demo/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/skeleton/demo/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAsBzC,MAAM,OAAO,yBAAyB;uGAAzB,yBAAyB;2FAAzB,yBAAyB,wEAlBxB;;;;;;;;;;;;;;;;KAgBT,4DAjBS,UAAU;;2FAmBX,yBAAyB;kBApBrC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,CAAC;oBACrB,QAAQ,EAAE;;;;;;;;;;;;;;;;KAgBT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiSkeleton } from \"../skeleton\";\r\n\r\n@Component({\r\n    imports: [AiSkeleton],\r\n    template: `\r\n        <div class=\"max-w-sm w-full p-4 border border-border rounded-lg shadow-sm\">\r\n            <ai-skeleton class=\"flex w-full items-center justify-center h-48 mb-4 rounded-lg\">\r\n                <svg class=\"w-10 h-10 text-primary/40\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"currentColor\" viewBox=\"0 0 16 20\">\r\n                    <path\r\n                        d=\"M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z\"\r\n                    />\r\n                    <path d=\"M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z\" />\r\n                </svg>\r\n            </ai-skeleton>\r\n            <div class=\"space-y-2\">\r\n                <ai-skeleton class=\"h-2.5 w-48\" />\r\n                <ai-skeleton class=\"h-2\" />\r\n                <ai-skeleton class=\"h-2\" />\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSkeletonCardComponent {}\r\n"]}

package/esm2022/lib/components/skeleton/demo/chart.js

@@ -0,0 +1,42 @@
+import { Component } from "@angular/core";
+import { AiSkeleton } from "../skeleton";
+import * as i0 from "@angular/core";
+export class DemoSkeletonChartComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSkeletonChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoSkeletonChartComponent, isStandalone: true, selector: "demo-skeleton-chart", ngImport: i0, template: `
+        <div class="max-w-sm w-full p-4 border border-border rounded-sm shadow-sm md:p-6">
+            <ai-skeleton class="h-2.5 w-48 mb-2.5" />
+            <ai-skeleton class="h-2 mb-10" />
+            <div class="flex gap-x-4 items-baseline mt-4">
+                <ai-skeleton class="h-72 w-full rounded-t-lg" />
+                <ai-skeleton class="h-56 w-full rounded-t-lg" />
+                <ai-skeleton class="h-64 w-full rounded-t-lg" />
+                <ai-skeleton class="h-72 w-full rounded-t-lg" />
+                <ai-skeleton class="h-48 w-full rounded-t-lg" />
+                <ai-skeleton class="h-64 w-full rounded-t-lg" />
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiSkeleton, selector: "ai-skeleton", inputs: ["class"], exportAs: ["aiSkeleton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSkeletonChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "demo-skeleton-chart",
+                    imports: [AiSkeleton],
+                    template: `
+        <div class="max-w-sm w-full p-4 border border-border rounded-sm shadow-sm md:p-6">
+            <ai-skeleton class="h-2.5 w-48 mb-2.5" />
+            <ai-skeleton class="h-2 mb-10" />
+            <div class="flex gap-x-4 items-baseline mt-4">
+                <ai-skeleton class="h-72 w-full rounded-t-lg" />
+                <ai-skeleton class="h-56 w-full rounded-t-lg" />
+                <ai-skeleton class="h-64 w-full rounded-t-lg" />
+                <ai-skeleton class="h-72 w-full rounded-t-lg" />
+                <ai-skeleton class="h-48 w-full rounded-t-lg" />
+                <ai-skeleton class="h-64 w-full rounded-t-lg" />
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=chart.js.map

package/esm2022/lib/components/skeleton/demo/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/skeleton/demo/chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAoBzC,MAAM,OAAO,0BAA0B;uGAA1B,0BAA0B;2FAA1B,0BAA0B,+EAfzB;;;;;;;;;;;;;KAaT,4DAdS,UAAU;;2FAgBX,0BAA0B;kBAlBtC,SAAS;mBAAC;oBACP,QAAQ,EAAE,qBAAqB;oBAC/B,OAAO,EAAE,CAAC,UAAU,CAAC;oBACrB,QAAQ,EAAE;;;;;;;;;;;;;KAaT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiSkeleton } from \"../skeleton\";\r\n\r\n@Component({\r\n    selector: \"demo-skeleton-chart\",\r\n    imports: [AiSkeleton],\r\n    template: `\r\n        <div class=\"max-w-sm w-full p-4 border border-border rounded-sm shadow-sm md:p-6\">\r\n            <ai-skeleton class=\"h-2.5 w-48 mb-2.5\" />\r\n            <ai-skeleton class=\"h-2 mb-10\" />\r\n            <div class=\"flex gap-x-4 items-baseline mt-4\">\r\n                <ai-skeleton class=\"h-72 w-full rounded-t-lg\" />\r\n                <ai-skeleton class=\"h-56 w-full rounded-t-lg\" />\r\n                <ai-skeleton class=\"h-64 w-full rounded-t-lg\" />\r\n                <ai-skeleton class=\"h-72 w-full rounded-t-lg\" />\r\n                <ai-skeleton class=\"h-48 w-full rounded-t-lg\" />\r\n                <ai-skeleton class=\"h-64 w-full rounded-t-lg\" />\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSkeletonChartComponent {}\r\n"]}

package/esm2022/lib/components/skeleton/demo/default.js

@@ -0,0 +1,31 @@
+import { Component } from "@angular/core";
+import { AiSkeleton } from "../skeleton";
+import * as i0 from "@angular/core";
+export class DemoSkeletonDefaultComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSkeletonDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: DemoSkeletonDefaultComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: `
+        <div class="flex items-center gap-x-4">
+            <ai-skeleton class="h-12 w-12 rounded-full" />
+            <div class="space-y-2">
+                <ai-skeleton class="h-4 w-50" />
+                <ai-skeleton class="h-4 w-50" />
+            </div>
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: AiSkeleton, selector: "ai-skeleton", inputs: ["class"], exportAs: ["aiSkeleton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DemoSkeletonDefaultComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [AiSkeleton],
+                    template: `
+        <div class="flex items-center gap-x-4">
+            <ai-skeleton class="h-12 w-12 rounded-full" />
+            <div class="space-y-2">
+                <ai-skeleton class="h-4 w-50" />
+                <ai-skeleton class="h-4 w-50" />
+            </div>
+        </div>
+    `,
+                }]
+        }] });
+//# sourceMappingURL=default.js.map

package/esm2022/lib/components/skeleton/demo/default.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/skeleton/demo/default.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;;AAczC,MAAM,OAAO,4BAA4B;uGAA5B,4BAA4B;2FAA5B,4BAA4B,wEAV3B;;;;;;;;KAQT,4DATS,UAAU;;2FAWX,4BAA4B;kBAZxC,SAAS;mBAAC;oBACP,OAAO,EAAE,CAAC,UAAU,CAAC;oBACrB,QAAQ,EAAE;;;;;;;;KAQT;iBACJ","sourcesContent":["import { Component } from \"@angular/core\";\r\n\r\nimport { AiSkeleton } from \"../skeleton\";\r\n\r\n@Component({\r\n    imports: [AiSkeleton],\r\n    template: `\r\n        <div class=\"flex items-center gap-x-4\">\r\n            <ai-skeleton class=\"h-12 w-12 rounded-full\" />\r\n            <div class=\"space-y-2\">\r\n                <ai-skeleton class=\"h-4 w-50\" />\r\n                <ai-skeleton class=\"h-4 w-50\" />\r\n            </div>\r\n        </div>\r\n    `,\r\n})\r\nexport class DemoSkeletonDefaultComponent {}\r\n"]}

package/esm2022/lib/components/skeleton/demo/skeleton.js

@@ -0,0 +1,12 @@
+import { DemoSkeletonCardComponent } from "./card";
+import { DemoSkeletonChartComponent } from "./chart";
+import { DemoSkeletonDefaultComponent } from "./default";
+export const SKELETON = {
+    componentName: "skeleton",
+    examples: [
+        { name: "default", component: DemoSkeletonDefaultComponent },
+        { name: "chart", component: DemoSkeletonChartComponent },
+        { name: "card", component: DemoSkeletonCardComponent },
+    ],
+};
+//# sourceMappingURL=skeleton.js.map

package/esm2022/lib/components/skeleton/demo/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../../../../../libs/ai-ui/src/lib/components/skeleton/demo/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,4BAA4B,EAAE,MAAM,WAAW,CAAC;AAEzD,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,aAAa,EAAE,UAAU;IACzB,QAAQ,EAAE;QACN,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,4BAA4B,EAAE;QAC5D,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE;QACxD,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,yBAAyB,EAAE;KACzD;CACJ,CAAC","sourcesContent":["import { DemoSkeletonCardComponent } from \"./card\";\r\nimport { DemoSkeletonChartComponent } from \"./chart\";\r\nimport { DemoSkeletonDefaultComponent } from \"./default\";\r\n\r\nexport const SKELETON = {\r\n    componentName: \"skeleton\",\r\n    examples: [\r\n        { name: \"default\", component: DemoSkeletonDefaultComponent },\r\n        { name: \"chart\", component: DemoSkeletonChartComponent },\r\n        { name: \"card\", component: DemoSkeletonCardComponent },\r\n    ],\r\n};\r\n"]}

package/esm2022/lib/components/skeleton/index.js

@@ -0,0 +1,3 @@
+export * from "./demo/skeleton";
+export * from "./skeleton";
+//# sourceMappingURL=index.js.map

package/esm2022/lib/components/skeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC","sourcesContent":["export * from \"./demo/skeleton\";\r\nexport * from \"./skeleton\";\r\n"]}

package/esm2022/lib/components/skeleton/skeleton.js

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from "@angular/core";
+import { mergeClasses } from "../../core";
+import { skeletonVariants } from "./skeleton.variants";
+import * as i0 from "@angular/core";
+export class AiSkeleton {
+    class = input("", ...(ngDevMode ? [{ debugName: "class" }] : []));
+    classes = computed(() => mergeClasses(skeletonVariants(), this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSkeleton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: AiSkeleton, isStandalone: true, selector: "ai-skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, exportAs: ["aiSkeleton"], ngImport: i0, template: `
+        <div [class]="classes()">
+            <ng-content />
+        </div>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: AiSkeleton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "ai-skeleton",
+                    exportAs: "aiSkeleton",
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    template: `
+        <div [class]="classes()">
+            <ng-content />
+        </div>
+    `,
+                    host: {
+                        class: "block",
+                    },
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+//# sourceMappingURL=skeleton.js.map

package/esm2022/lib/components/skeleton/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/skeleton/skeleton.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvG,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;;AAgBvD,MAAM,OAAO,UAAU;IACV,KAAK,GAAG,KAAK,CAAa,EAAE,iDAAC,CAAC;IAEpB,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,gBAAgB,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,mDAAC,CAAC;uGAHnF,UAAU;2FAAV,UAAU,wQATT;;;;KAIT;;2FAKQ,UAAU;kBAdtB,SAAS;mBAAC;oBACP,QAAQ,EAAE,aAAa;oBACvB,QAAQ,EAAE,YAAY;oBACtB,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,QAAQ,EAAE;;;;KAIT;oBACD,IAAI,EAAE;wBACF,KAAK,EAAE,OAAO;qBACjB;iBACJ","sourcesContent":["import { ClassValue } from \"clsx\";\r\n\r\nimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from \"@angular/core\";\r\n\r\nimport { mergeClasses } from \"../../core\";\r\nimport { skeletonVariants } from \"./skeleton.variants\";\r\n\r\n@Component({\r\n    selector: \"ai-skeleton\",\r\n    exportAs: \"aiSkeleton\",\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    encapsulation: ViewEncapsulation.None,\r\n    template: `\r\n        <div [class]=\"classes()\">\r\n            <ng-content />\r\n        </div>\r\n    `,\r\n    host: {\r\n        class: \"block\",\r\n    },\r\n})\r\nexport class AiSkeleton {\r\n    readonly class = input<ClassValue>(\"\");\r\n\r\n    protected readonly classes = computed(() => mergeClasses(skeletonVariants(), this.class()));\r\n}\r\n"]}

package/esm2022/lib/components/skeleton/skeleton.variants.js

@@ -0,0 +1,6 @@
+import { cva } from "class-variance-authority";
+export const skeletonVariants = cva("bg-default animate-pulse rounded-md", {
+    variants: {},
+    defaultVariants: {},
+});
+//# sourceMappingURL=skeleton.variants.js.map

package/esm2022/lib/components/skeleton/skeleton.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.variants.js","sourceRoot":"","sources":["../../../../../../../libs/ai-ui/src/lib/components/skeleton/skeleton.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAC,qCAAqC,EAAE;IACvE,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,EAAE;CACtB,CAAC,CAAC","sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\r\n\r\nexport const skeletonVariants = cva(\"bg-default animate-pulse rounded-md\", {\r\n    variants: {},\r\n    defaultVariants: {},\r\n});\r\n\r\nexport type SkeletonVariants = VariantProps<typeof skeletonVariants>;\r\n"]}