cerxos-ui 0.0.1 → 0.0.3

package/fesm2022/cerxos-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, Input, ChangeDetectionStrategy, EventEmitter, forwardRef, Output } from '@angular/core';
-import { NgIf } from '@angular/common';
+import { Component, EventEmitter, Output, Input, ChangeDetectionStrategy, Attribute, forwardRef, HostListener, Directive } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgIf } from '@angular/common';
 
 class CerxosUi {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CerxosUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -20,40 +20,225 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   ` }]
         }] });
 
-const BASE_CLASSES$2 = 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors ' +
+const BASE_CLASSES$7 = 'relative flex w-full gap-3 rounded-[var(--cxs-radius-md)] border border-l-4 px-4 py-3 text-sm ' +
+    'text-[var(--cxs-color-on-surface)]';
+const VARIANT_CLASSES$6 = {
+    info: 'border-[var(--cxs-color-primary)] border-l-[var(--cxs-color-primary)] ' +
+        'bg-[var(--cxs-color-primary-ghost)]',
+    neutral: 'border-[var(--cxs-color-border)] border-l-[var(--cxs-color-border)] ' +
+        'bg-[var(--cxs-color-surface)]',
+    danger: 'border-[var(--cxs-color-danger)] border-l-[var(--cxs-color-danger)] ' +
+        'bg-[var(--cxs-color-surface)]'
+};
+const TITLE_BASE = 'font-semibold';
+const TITLE_VARIANT = {
+    info: 'text-[var(--cxs-color-primary)]',
+    neutral: 'text-[var(--cxs-color-on-surface)]',
+    danger: 'text-[var(--cxs-color-danger)]'
+};
+const CLOSE_BUTTON_CLASSES = 'ml-auto inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
+    'text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+class CxsAlertComponent {
+    variant = 'info';
+    title;
+    dismissible = false;
+    closed = new EventEmitter();
+    isVisible = true;
+    get alertClass() {
+        return [BASE_CLASSES$7, VARIANT_CLASSES$6[this.variant]].join(' ');
+    }
+    get titleClass() {
+        return [TITLE_BASE, TITLE_VARIANT[this.variant]].join(' ');
+    }
+    get closeButtonClass() {
+        return CLOSE_BUTTON_CLASSES;
+    }
+    onClose() {
+        this.isVisible = false;
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsAlertComponent, isStandalone: true, selector: "cxs-alert", inputs: { variant: "variant", title: "title", dismissible: "dismissible" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (isVisible) {\n  <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\n    <div class=\"flex flex-col gap-1\">\n      @if (title) {\n        <div [class]=\"titleClass\">{{ title }}</div>\n      }\n      <div class=\"text-[var(--cxs-color-on-surface)]\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    @if (dismissible) {\n      <button\n        type=\"button\"\n        [class]=\"closeButtonClass\"\n        aria-label=\"Dismiss alert\"\n        (click)=\"onClose()\"\n      >\n        x\n      </button>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-alert', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isVisible) {\n  <div [class]=\"alertClass\" role=\"status\" aria-live=\"polite\">\n    <div class=\"flex flex-col gap-1\">\n      @if (title) {\n        <div [class]=\"titleClass\">{{ title }}</div>\n      }\n      <div class=\"text-[var(--cxs-color-on-surface)]\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    @if (dismissible) {\n      <button\n        type=\"button\"\n        [class]=\"closeButtonClass\"\n        aria-label=\"Dismiss alert\"\n        (click)=\"onClose()\"\n      >\n        x\n      </button>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], dismissible: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+const BASE_CLASSES$6 = 'inline-flex items-center gap-1 rounded-[var(--cxs-radius-md)] border px-2.5 py-0.5 text-xs font-medium ' +
+    'leading-none';
+const VARIANT_CLASSES$5 = {
+    primary: 'border-[var(--cxs-color-primary)] bg-[var(--cxs-color-primary-ghost)] ' +
+        'text-[var(--cxs-color-primary)]',
+    neutral: 'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] ' +
+        'text-[var(--cxs-color-on-surface)]',
+    danger: 'border-[var(--cxs-color-danger)] bg-[var(--cxs-color-surface)] ' +
+        'text-[var(--cxs-color-danger)]'
+};
+const SIZE_CLASSES$6 = {
+    sm: 'text-[11px]',
+    md: 'text-xs'
+};
+class CxsBadgeComponent {
+    variant = 'primary';
+    size = 'md';
+    get badgeClass() {
+        return [BASE_CLASSES$6, VARIANT_CLASSES$5[this.variant], SIZE_CLASSES$6[this.size]].join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsBadgeComponent, isStandalone: true, selector: "cxs-badge", inputs: { variant: "variant", size: "size" }, ngImport: i0, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"badgeClass\">\n  <ng-content></ng-content>\n</span>\n" }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }] } });
+
+const BASE_CLASSES$5 = 'flex flex-wrap items-center gap-x-1 gap-y-1';
+const ITEM_CLASSES = 'flex items-center gap-1';
+const LINK_BASE_CLASSES = 'rounded-[var(--cxs-radius-md)] transition-colors focus-visible:outline focus-visible:outline-2 ' +
+    'focus-visible:outline-offset-2 focus-visible:outline-[var(--cxs-color-focus)]';
+const NON_LINK_CLASSES = 'text-[var(--cxs-color-on-surface-muted)]';
+const SEPARATOR_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] select-none';
+const DISABLED_CLASSES = 'text-[var(--cxs-color-on-surface-muted)] opacity-60';
+const SIZE_CLASSES$5 = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const LINK_VARIANT_CLASSES = {
+    default: 'text-[var(--cxs-color-primary)] hover:text-[var(--cxs-color-primary-hover)]',
+    muted: 'text-[var(--cxs-color-on-surface-muted)] hover:text-[var(--cxs-color-on-surface)]'
+};
+const CURRENT_VARIANT_CLASSES = {
+    default: 'text-[var(--cxs-color-on-surface)]',
+    muted: 'text-[var(--cxs-color-on-surface-muted)]'
+};
+class CxsBreadcrumbComponent {
+    items = [];
+    separator = '/';
+    ariaLabel = 'Breadcrumb';
+    size = 'md';
+    variant = 'default';
+    disabled = false;
+    get listClass() {
+        return [BASE_CLASSES$5, SIZE_CLASSES$5[this.size], this.disabled ? 'opacity-60' : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    get itemClass() {
+        return ITEM_CLASSES;
+    }
+    get separatorClass() {
+        return SEPARATOR_CLASSES;
+    }
+    isLink(item, isLast) {
+        return !!item.href && !isLast && !item.disabled && !this.disabled;
+    }
+    getLinkClass(item) {
+        return [
+            LINK_BASE_CLASSES,
+            LINK_VARIANT_CLASSES[this.variant],
+            item.disabled || this.disabled ? DISABLED_CLASSES : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    getLabelClass(item, isLast) {
+        if (isLast) {
+            return [
+                CURRENT_VARIANT_CLASSES[this.variant],
+                item.disabled || this.disabled ? DISABLED_CLASSES : ''
+            ]
+                .filter(Boolean)
+                .join(' ');
+        }
+        return [NON_LINK_CLASSES, item.disabled || this.disabled ? DISABLED_CLASSES : '']
+            .filter(Boolean)
+            .join(' ');
+    }
+    getItemRel(item) {
+        if (item.target === '_blank') {
+            return item.rel ?? 'noopener noreferrer';
+        }
+        return item.rel ?? null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsBreadcrumbComponent, isStandalone: true, selector: "cxs-breadcrumb", inputs: { items: "items", separator: "separator", ariaLabel: "ariaLabel", size: "size", variant: "variant", disabled: "disabled" }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ol [class]=\"listClass\">\n    @for (item of items; track item; let last = $last) {\n      <li [class]=\"itemClass\">\n      @if (isLink(item, last)) {\n        <a\n          [class]=\"getLinkClass(item)\"\n          [attr.href]=\"item.href\"\n          [attr.target]=\"item.target ?? null\"\n          [attr.rel]=\"getItemRel(item)\"\n          [attr.aria-label]=\"item.ariaLabel ?? null\"\n        >\n          {{ item.label }}\n        </a>\n      } @else {\n        <span\n          [class]=\"getLabelClass(item, last)\"\n          [attr.aria-current]=\"last ? 'page' : null\"\n        >\n          {{ item.label }}\n        </span>\n      }\n      @if (!last && separator) {\n        <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\n      }\n      </li>\n    }\n  </ol>\n</nav>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-breadcrumb', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel\">\n  <ol [class]=\"listClass\">\n    @for (item of items; track item; let last = $last) {\n      <li [class]=\"itemClass\">\n      @if (isLink(item, last)) {\n        <a\n          [class]=\"getLinkClass(item)\"\n          [attr.href]=\"item.href\"\n          [attr.target]=\"item.target ?? null\"\n          [attr.rel]=\"getItemRel(item)\"\n          [attr.aria-label]=\"item.ariaLabel ?? null\"\n        >\n          {{ item.label }}\n        </a>\n      } @else {\n        <span\n          [class]=\"getLabelClass(item, last)\"\n          [attr.aria-current]=\"last ? 'page' : null\"\n        >\n          {{ item.label }}\n        </span>\n      }\n      @if (!last && separator) {\n        <span [class]=\"separatorClass\" aria-hidden=\"true\">{{ separator }}</span>\n      }\n      </li>\n    }\n  </ol>\n</nav>\n" }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+const BASE_CLASSES$4 = 'relative inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors ' +
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
     'focus-visible:outline-[var(--cxs-color-focus)] disabled:pointer-events-none disabled:opacity-50';
-const VARIANT_CLASSES$2 = {
+const VARIANT_CLASSES$4 = {
     primary: 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)] ' +
         'hover:bg-[var(--cxs-color-primary-hover)] shadow-[var(--cxs-shadow-sm)]',
     secondary: 'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
         'border border-[var(--cxs-color-border)] hover:bg-[var(--cxs-color-surface-hover)]',
     ghost: 'bg-transparent text-[var(--cxs-color-primary)] hover:bg-[var(--cxs-color-primary-ghost)]'
 };
-const SIZE_CLASSES$2 = {
+const SIZE_CLASSES$4 = {
     sm: 'h-8 px-3 text-sm rounded-[var(--cxs-radius-md)]',
     md: 'h-10 px-4 text-sm rounded-[var(--cxs-radius-md)]',
     lg: 'h-12 px-5 text-base rounded-[var(--cxs-radius-md)]'
 };
 class CxsButtonComponent {
+    hostClass;
     variant = 'primary';
     size = 'md';
     disabled = false;
     loading = false;
     type = 'button';
+    constructor(hostClass) {
+        this.hostClass = hostClass;
+    }
     get isDisabled() {
         return this.disabled || this.loading;
     }
     get buttonClass() {
-        return [BASE_CLASSES$2, SIZE_CLASSES$2[this.size], VARIANT_CLASSES$2[this.variant]].join(' ');
+        return [BASE_CLASSES$4, SIZE_CLASSES$4[this.size], VARIANT_CLASSES$4[this.variant], this.hostClass]
+            .filter(Boolean)
+            .join(' ');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, ngImport: i0, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, deps: [{ token: 'class', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsButtonComponent, isStandalone: true, selector: "cxs-button", inputs: { variant: "variant", size: "size", disabled: "disabled", loading: "loading", type: "type" }, ngImport: i0, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cxs-button', standalone: true, imports: [NgIf], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n" }]
-        }], propDecorators: { variant: [{
+            args: [{ selector: 'cxs-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [class]=\"buttonClass\"\n  [attr.type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n  @if (loading) {\n    <span\n      class=\"h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    ></span>\n  }\n  <span class=\"truncate\">\n    <ng-content></ng-content>\n  </span>\n</button>\n" }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['class']
+                }] }], propDecorators: { variant: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -65,6 +250,472 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }] } });
 
+const BASE_CLASSES$3 = 'rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)]';
+const VARIANT_CLASSES$3 = {
+    surface: 'bg-[var(--cxs-color-surface)]',
+    muted: 'bg-[var(--cxs-color-surface-hover)]',
+    outline: 'bg-transparent'
+};
+const SIZE_CLASSES$3 = {
+    sm: 'p-3',
+    md: 'p-5',
+    lg: 'p-7'
+};
+class CxsCardComponent {
+    variant = 'surface';
+    size = 'md';
+    elevated = true;
+    ariaLabel;
+    ariaLabelledby;
+    get cardClass() {
+        return [
+            BASE_CLASSES$3,
+            VARIANT_CLASSES$3[this.variant],
+            SIZE_CLASSES$3[this.size],
+            this.elevated ? 'shadow-[var(--cxs-shadow-sm)]' : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CxsCardComponent, isStandalone: true, selector: "cxs-card", inputs: { variant: "variant", size: "size", elevated: "elevated", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, ngImport: i0, template: "<section\n  [class]=\"cardClass\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledby\"\n>\n  <ng-content></ng-content>\n</section>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  [class]=\"cardClass\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.aria-labelledby]=\"ariaLabelledby\"\n>\n  <ng-content></ng-content>\n</section>\n" }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], elevated: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaLabelledby: [{
+                type: Input
+            }] } });
+
+const WRAPPER_BASE$1 = 'inline-flex items-center gap-2 select-none';
+const WRAPPER_ENABLED$1 = 'cursor-pointer';
+const WRAPPER_DISABLED$1 = 'cursor-not-allowed opacity-60';
+const LABEL_BASE$1 = 'text-[var(--cxs-color-on-surface)]';
+const LABEL_DISABLED$1 = 'text-[var(--cxs-color-on-surface-muted)]';
+const LABEL_SIZE_CLASSES$1 = {
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-base'
+};
+const CONTROL_BASE$1 = "relative flex shrink-0 items-center justify-center rounded-[var(--cxs-radius-md)] border " +
+    "border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-primary)] " +
+    "transition-colors after:absolute after:origin-center after:rotate-45 after:content-[''] " +
+    'after:opacity-0 after:transition-opacity after:border-b-2 after:border-r-2 after:border-current ' +
+    "before:absolute before:content-[''] before:opacity-0 before:transition-opacity before:bg-current " +
+    'peer-checked:bg-[var(--cxs-color-primary)] peer-checked:border-[var(--cxs-color-primary)] ' +
+    'peer-checked:after:opacity-100 ' +
+    'peer-indeterminate:bg-[var(--cxs-color-primary)] peer-indeterminate:border-[var(--cxs-color-primary)] ' +
+    'peer-indeterminate:before:opacity-100 peer-indeterminate:after:opacity-0 ' +
+    'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 ' +
+    'peer-focus-visible:outline-[var(--cxs-color-focus)]';
+const CONTROL_SIZE_CLASSES$1 = {
+    sm: 'h-4 w-4',
+    md: 'h-5 w-5',
+    lg: 'h-6 w-6'
+};
+const MARK_SIZE_CLASSES = {
+    sm: 'after:h-2 after:w-1 before:h-0.5 before:w-2',
+    md: 'after:h-2.5 after:w-1.5 before:h-0.5 before:w-3',
+    lg: 'after:h-3 after:w-2 before:h-0.5 before:w-4'
+};
+class CxsCheckboxComponent {
+    checked = false;
+    indeterminate = false;
+    disabled = false;
+    label;
+    size = 'md';
+    id;
+    name;
+    required = false;
+    autofocus = false;
+    ariaLabel;
+    ariaDescribedby;
+    valueChange = new EventEmitter();
+    disabledFromControl = false;
+    onChange = () => { };
+    onTouched = () => { };
+    get isDisabled() {
+        return this.disabled || this.disabledFromControl;
+    }
+    get wrapperClass() {
+        return [
+            WRAPPER_BASE$1,
+            this.isDisabled ? WRAPPER_DISABLED$1 : WRAPPER_ENABLED$1
+        ].join(' ');
+    }
+    get labelClass() {
+        return [
+            LABEL_BASE$1,
+            LABEL_SIZE_CLASSES$1[this.size],
+            this.isDisabled ? LABEL_DISABLED$1 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get controlClass() {
+        return [
+            CONTROL_BASE$1,
+            CONTROL_SIZE_CLASSES$1[this.size],
+            MARK_SIZE_CLASSES[this.size]
+        ].join(' ');
+    }
+    get ariaChecked() {
+        return this.indeterminate ? 'mixed' : null;
+    }
+    writeValue(value) {
+        this.checked = value ?? false;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromControl = isDisabled;
+    }
+    onCheckboxChange(event) {
+        const target = event.target;
+        const nextValue = target.checked;
+        this.indeterminate = false;
+        this.checked = nextValue;
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsCheckboxComponent, isStandalone: true, selector: "cxs-checkbox", inputs: { checked: "checked", indeterminate: "indeterminate", disabled: "disabled", label: "label", size: "size", id: "id", name: "name", required: "required", autofocus: "autofocus", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CxsCheckboxComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<label [class]=\"wrapperClass\">\n  <input\n    class=\"peer sr-only\"\n    type=\"checkbox\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.aria-checked]=\"ariaChecked\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [checked]=\"checked\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    (change)=\"onCheckboxChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n  @if (label) {\n    <span [class]=\"labelClass\">{{ label }}</span>\n  } @else {\n    <span [class]=\"labelClass\">\n      <ng-content></ng-content>\n    </span>\n  }\n</label>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CxsCheckboxComponent),
+                            multi: true
+                        }
+                    ], template: "<label [class]=\"wrapperClass\">\n  <input\n    class=\"peer sr-only\"\n    type=\"checkbox\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.aria-checked]=\"ariaChecked\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [checked]=\"checked\"\n    [indeterminate]=\"indeterminate\"\n    [disabled]=\"isDisabled\"\n    [required]=\"required\"\n    (change)=\"onCheckboxChange($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <span [class]=\"controlClass\" aria-hidden=\"true\"></span>\n  @if (label) {\n    <span [class]=\"labelClass\">{{ label }}</span>\n  } @else {\n    <span [class]=\"labelClass\">\n      <ng-content></ng-content>\n    </span>\n  }\n</label>\n" }]
+        }], propDecorators: { checked: [{
+                type: Input
+            }], indeterminate: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+const BASE_CLASSES$2 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
+    'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
+    'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)] focus-visible:border-[var(--cxs-color-focus)] ' +
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60';
+const VARIANT_CLASSES$2 = {
+    outline: 'bg-[var(--cxs-color-surface)]',
+    filled: 'bg-[var(--cxs-color-surface-hover)]'
+};
+const SIZE_CLASSES$2 = {
+    sm: 'h-8 px-3 text-sm',
+    md: 'h-10 px-3 text-sm',
+    lg: 'h-12 px-4 text-base'
+};
+const INVALID_CLASSES$3 = 'border-[var(--cxs-color-danger)] focus-visible:border-[var(--cxs-color-danger)] ' +
+    'focus-visible:outline-[var(--cxs-color-danger)]';
+const POPOVER_CLASSES = 'absolute left-0 top-full z-10 mt-2 w-full rounded-[var(--cxs-radius-md)] border ' +
+    'border-[var(--cxs-color-border)] bg-[var(--cxs-color-surface)] p-3 shadow-[var(--cxs-shadow-sm)]';
+const NAV_BUTTON_CLASSES = 'inline-flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] ' +
+    'text-[var(--cxs-color-on-surface)] transition-colors hover:bg-[var(--cxs-color-surface-hover)] ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)]';
+const DAY_BUTTON_BASE = 'flex h-8 w-8 items-center justify-center rounded-[var(--cxs-radius-md)] text-xs ' +
+    'transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ' +
+    'focus-visible:outline-[var(--cxs-color-focus)] disabled:cursor-not-allowed disabled:opacity-40';
+const DAY_OUTSIDE_MONTH = 'text-[var(--cxs-color-on-surface-muted)]';
+const DAY_TODAY = 'border border-[var(--cxs-color-primary)]';
+const DAY_SELECTED = 'bg-[var(--cxs-color-primary)] text-[var(--cxs-color-on-primary)]';
+const DAY_HOVER = 'hover:bg-[var(--cxs-color-surface-hover)]';
+class CxsDatepickerComponent {
+    value = '';
+    variant = 'outline';
+    size = 'md';
+    useNative = true;
+    disabled = false;
+    readonly = false;
+    required = false;
+    invalid = false;
+    autofocus = false;
+    id;
+    name;
+    min;
+    max;
+    placeholder;
+    ariaLabel;
+    ariaDescribedby;
+    valueChange = new EventEmitter();
+    static nextId = 0;
+    fallbackId = `cxs-datepicker-panel-${CxsDatepickerComponent.nextId++}`;
+    disabledFromControl = false;
+    onChange = () => { };
+    onTouched = () => { };
+    isOpen = false;
+    displayMonth = new Date();
+    calendarDays = [];
+    weekDayLabels = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+    get isDisabled() {
+        return this.disabled || this.disabledFromControl;
+    }
+    get panelId() {
+        return this.id ? `${this.id}-panel` : this.fallbackId;
+    }
+    get inputClass() {
+        return [
+            BASE_CLASSES$2,
+            SIZE_CLASSES$2[this.size],
+            VARIANT_CLASSES$2[this.variant],
+            this.invalid ? INVALID_CLASSES$3 : ''
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    get popoverClass() {
+        return POPOVER_CLASSES;
+    }
+    get navButtonClass() {
+        return NAV_BUTTON_CLASSES;
+    }
+    get displayMonthLabel() {
+        return this.displayMonth.toLocaleString('en-US', { month: 'long', year: 'numeric' });
+    }
+    writeValue(value) {
+        this.value = value ?? '';
+        this.syncDisplayMonthWithValue();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromControl = isDisabled;
+    }
+    onInput(event) {
+        const target = event.target;
+        const nextValue = target.value;
+        this.value = nextValue;
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+    }
+    onDateSelect(day) {
+        if (day.disabled || this.isDisabled) {
+            return;
+        }
+        const nextValue = this.formatDate(day.date);
+        this.value = nextValue;
+        this.onChange(nextValue);
+        this.valueChange.emit(nextValue);
+        this.isOpen = false;
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    open() {
+        if (this.isDisabled || this.useNative) {
+            return;
+        }
+        this.isOpen = true;
+        this.syncDisplayMonthWithValue();
+    }
+    toggle() {
+        if (this.isOpen) {
+            this.isOpen = false;
+            return;
+        }
+        this.open();
+    }
+    prevMonth() {
+        this.displayMonth = new Date(this.displayMonth.getFullYear(), this.displayMonth.getMonth() - 1, 1);
+        this.updateCalendar();
+    }
+    nextMonth() {
+        this.displayMonth = new Date(this.displayMonth.getFullYear(), this.displayMonth.getMonth() + 1, 1);
+        this.updateCalendar();
+    }
+    dayButtonClass(day) {
+        return [
+            DAY_BUTTON_BASE,
+            day.inMonth ? '' : DAY_OUTSIDE_MONTH,
+            day.isToday ? DAY_TODAY : '',
+            this.isSelected(day.date) ? DAY_SELECTED : DAY_HOVER
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    onDocumentClick(event) {
+        if (this.useNative || !this.isOpen) {
+            return;
+        }
+        const target = event.target;
+        if (target && !target.closest(`#${this.panelId}`) && !target.closest(`[data-cxs-datepicker="${this.panelId}"]`)) {
+            this.isOpen = false;
+        }
+    }
+    onEscape() {
+        if (this.useNative || !this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+    }
+    syncDisplayMonthWithValue() {
+        const selected = this.parseDate(this.value);
+        this.displayMonth = selected ?? new Date();
+        this.updateCalendar();
+    }
+    updateCalendar() {
+        const year = this.displayMonth.getFullYear();
+        const month = this.displayMonth.getMonth();
+        const startOfMonth = new Date(year, month, 1);
+        const startDay = startOfMonth.getDay();
+        const calendarStart = new Date(year, month, 1 - startDay);
+        const minDate = this.parseDate(this.min);
+        const maxDate = this.parseDate(this.max);
+        const today = this.stripTime(new Date());
+        this.calendarDays = Array.from({ length: 42 }, (_, index) => {
+            const date = new Date(calendarStart.getFullYear(), calendarStart.getMonth(), calendarStart.getDate() + index);
+            const dayValue = this.stripTime(date);
+            const disabled = (minDate && dayValue < minDate) || (maxDate && dayValue > maxDate) || this.isDisabled;
+            return {
+                date,
+                label: String(date.getDate()),
+                inMonth: date.getMonth() === month,
+                disabled,
+                isToday: dayValue.getTime() === today.getTime(),
+                key: this.formatDate(date)
+            };
+        });
+    }
+    isSelected(date) {
+        const selected = this.parseDate(this.value);
+        if (!selected) {
+            return false;
+        }
+        return (selected.getFullYear() === date.getFullYear() &&
+            selected.getMonth() === date.getMonth() &&
+            selected.getDate() === date.getDate());
+    }
+    parseDate(value) {
+        if (!value) {
+            return null;
+        }
+        const [year, month, day] = value.split('-').map(Number);
+        if (!year || !month || !day) {
+            return null;
+        }
+        return new Date(year, month - 1, day);
+    }
+    formatDate(date) {
+        const year = date.getFullYear();
+        const month = `${date.getMonth() + 1}`.padStart(2, '0');
+        const day = `${date.getDate()}`.padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    stripTime(date) {
+        return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CxsDatepickerComponent, isStandalone: true, selector: "cxs-datepicker", inputs: { value: "value", variant: "variant", size: "size", useNative: "useNative", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", autofocus: "autofocus", id: "id", name: "name", min: "min", max: "max", placeholder: "placeholder", ariaLabel: "ariaLabel", ariaDescribedby: "ariaDescribedby" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CxsDatepickerComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "@if (useNative) {\n  <input\n    type=\"date\"\n    [class]=\"inputClass\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [value]=\"value\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n} @else {\n  <div class=\"relative w-full\">\n    <input\n      type=\"text\"\n      [class]=\"inputClass\"\n      [attr.id]=\"id\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.autofocus]=\"autofocus ? true : null\"\n      [attr.data-cxs-datepicker]=\"panelId\"\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"true\"\n      [required]=\"required\"\n      (click)=\"open()\"\n      (focus)=\"open()\"\n      (blur)=\"onBlur()\"\n    />\n    @if (isOpen) {\n      <div [class]=\"popoverClass\" [attr.id]=\"panelId\" role=\"dialog\" aria-label=\"Choose date\">\n        <div class=\"flex items-center justify-between\">\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Previous month\" (click)=\"prevMonth()\">\n            <\n          </button>\n          <div class=\"text-sm font-semibold text-[var(--cxs-color-on-surface)]\">\n            {{ displayMonthLabel }}\n          </div>\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n            >\n          </button>\n        </div>\n\n        <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-[var(--cxs-color-on-surface-muted)]\">\n          @for (label of weekDayLabels; track label) {\n            <div>{{ label }}</div>\n          }\n        </div>\n\n        <div class=\"mt-2 grid grid-cols-7 gap-1\" role=\"grid\">\n          @for (day of calendarDays; track day.key) {\n            <button\n              type=\"button\"\n              [class]=\"dayButtonClass(day)\"\n              [disabled]=\"day.disabled\"\n              [attr.data-date]=\"day.key\"\n              [attr.aria-selected]=\"day.key === value ? 'true' : 'false'\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              (click)=\"onDateSelect(day)\"\n            >\n              {{ day.label }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cxs-datepicker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CxsDatepickerComponent),
+                            multi: true
+                        }
+                    ], template: "@if (useNative) {\n  <input\n    type=\"date\"\n    [class]=\"inputClass\"\n    [attr.id]=\"id\"\n    [attr.name]=\"name\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.placeholder]=\"placeholder\"\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-describedby]=\"ariaDescribedby\"\n    [attr.autofocus]=\"autofocus ? true : null\"\n    [value]=\"value\"\n    [disabled]=\"isDisabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n} @else {\n  <div class=\"relative w-full\">\n    <input\n      type=\"text\"\n      [class]=\"inputClass\"\n      [attr.id]=\"id\"\n      [attr.name]=\"name\"\n      [attr.placeholder]=\"placeholder\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-describedby]=\"ariaDescribedby\"\n      [attr.aria-expanded]=\"isOpen ? 'true' : 'false'\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.autofocus]=\"autofocus ? true : null\"\n      [attr.data-cxs-datepicker]=\"panelId\"\n      [value]=\"value\"\n      [disabled]=\"isDisabled\"\n      [readonly]=\"true\"\n      [required]=\"required\"\n      (click)=\"open()\"\n      (focus)=\"open()\"\n      (blur)=\"onBlur()\"\n    />\n    @if (isOpen) {\n      <div [class]=\"popoverClass\" [attr.id]=\"panelId\" role=\"dialog\" aria-label=\"Choose date\">\n        <div class=\"flex items-center justify-between\">\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Previous month\" (click)=\"prevMonth()\">\n            <\n          </button>\n          <div class=\"text-sm font-semibold text-[var(--cxs-color-on-surface)]\">\n            {{ displayMonthLabel }}\n          </div>\n          <button type=\"button\" [class]=\"navButtonClass\" aria-label=\"Next month\" (click)=\"nextMonth()\">\n            >\n          </button>\n        </div>\n\n        <div class=\"mt-3 grid grid-cols-7 gap-1 text-center text-xs text-[var(--cxs-color-on-surface-muted)]\">\n          @for (label of weekDayLabels; track label) {\n            <div>{{ label }}</div>\n          }\n        </div>\n\n        <div class=\"mt-2 grid grid-cols-7 gap-1\" role=\"grid\">\n          @for (day of calendarDays; track day.key) {\n            <button\n              type=\"button\"\n              [class]=\"dayButtonClass(day)\"\n              [disabled]=\"day.disabled\"\n              [attr.data-date]=\"day.key\"\n              [attr.aria-selected]=\"day.key === value ? 'true' : 'false'\"\n              [attr.aria-current]=\"day.isToday ? 'date' : null\"\n              (click)=\"onDateSelect(day)\"\n            >\n              {{ day.label }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], useNative: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], invalid: [{
+                type: Input
+            }], autofocus: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], ariaDescribedby: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 const BASE_CLASSES$1 = 'w-full rounded-[var(--cxs-radius-md)] border border-[var(--cxs-color-border)] ' +
     'bg-[var(--cxs-color-surface)] text-[var(--cxs-color-on-surface)] ' +
     'placeholder:text-[var(--cxs-color-on-surface-muted)] transition-colors ' +
@@ -465,6 +1116,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+const DEFAULT_DARK_CLASS = 'cxs-theme-dark';
+class CxsThemeDirective {
+    host;
+    renderer;
+    mode = 'light';
+    darkClass = DEFAULT_DARK_CLASS;
+    mediaQuery = null;
+    mediaListener = null;
+    constructor(host, renderer) {
+        this.host = host;
+        this.renderer = renderer;
+    }
+    set cxsTheme(value) {
+        this.mode = value ?? 'light';
+        this.applyTheme();
+    }
+    set cxsThemeDarkClass(value) {
+        const nextClass = value?.trim() || DEFAULT_DARK_CLASS;
+        if (nextClass === this.darkClass) {
+            return;
+        }
+        const previousClass = this.darkClass;
+        this.darkClass = nextClass;
+        this.renderer.removeClass(this.host.nativeElement, previousClass);
+        this.applyTheme();
+    }
+    ngOnDestroy() {
+        this.detachMediaListener();
+    }
+    applyTheme() {
+        if (this.mode === 'system') {
+            this.attachMediaListener();
+        }
+        else {
+            this.detachMediaListener();
+        }
+        const shouldEnableDark = this.mode === 'dark' || (this.mode === 'system' && this.prefersDark());
+        if (shouldEnableDark) {
+            this.renderer.addClass(this.host.nativeElement, this.darkClass);
+        }
+        else {
+            this.renderer.removeClass(this.host.nativeElement, this.darkClass);
+        }
+    }
+    prefersDark() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return false;
+        }
+        if (!this.mediaQuery) {
+            this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        }
+        return this.mediaQuery.matches;
+    }
+    attachMediaListener() {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        if (!this.mediaQuery) {
+            this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        }
+        if (this.mediaListener) {
+            return;
+        }
+        this.mediaListener = () => this.applyTheme();
+        if (typeof this.mediaQuery.addEventListener === 'function') {
+            this.mediaQuery.addEventListener('change', this.mediaListener);
+        }
+        else if (typeof this.mediaQuery.addListener === 'function') {
+            this.mediaQuery.addListener(this.mediaListener);
+        }
+    }
+    detachMediaListener() {
+        if (!this.mediaQuery || !this.mediaListener) {
+            this.mediaListener = null;
+            return;
+        }
+        if (typeof this.mediaQuery.removeEventListener === 'function') {
+            this.mediaQuery.removeEventListener('change', this.mediaListener);
+        }
+        else if (typeof this.mediaQuery.removeListener === 'function') {
+            this.mediaQuery.removeListener(this.mediaListener);
+        }
+        this.mediaListener = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsThemeDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: CxsThemeDirective, isStandalone: true, selector: "[cxsTheme]", inputs: { cxsTheme: "cxsTheme", cxsThemeDarkClass: "cxsThemeDarkClass" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CxsThemeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cxsTheme]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { cxsTheme: [{
+                type: Input
+            }], cxsThemeDarkClass: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of cerxos-ui
  */
@@ -473,5 +1223,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CerxosUi, CxsButtonComponent, CxsInputComponent, CxsRadioComponent, CxsSelectComponent };
+export { CerxosUi, CxsAlertComponent, CxsBadgeComponent, CxsBreadcrumbComponent, CxsButtonComponent, CxsCardComponent, CxsCheckboxComponent, CxsDatepickerComponent, CxsInputComponent, CxsRadioComponent, CxsSelectComponent, CxsThemeDirective };
 //# sourceMappingURL=cerxos-ui.mjs.map