codexly-ui 0.10.88 → 0.10.90

package/assets/styles/_theme.css

@@ -24,9 +24,15 @@
   --clx-text:        #0f172a; /* slate-900 — body text */
   --clx-text-label:  #475569; /* slate-600 — field labels */
   --clx-text-muted:  #64748b; /* slate-500 — secondary text, body in alerts */
-  --clx-text-subtle: #94a3b8; /* slate-400 — hints, placeholders, idle nav */
+  --clx-text-subtle: #94a3b8; /* slate-400 — hints, idle nav */
   --clx-text-faint:  #cbd5e1; /* slate-300 — out-of-range calendar days */
 
+  /* Fixed input placeholder color — intentionally NOT derived from --clx-text-subtle:
+     a custom theme can set --clx-text-subtle close to --clx-text-label (e.g. via the
+     theme picker), which collapses placeholder/typed-text contrast. Placeholders need
+     a guaranteed-low-contrast color regardless of the user's theme customization. */
+  --clx-placeholder: #94a3b8; /* slate-400 */
+
   /* ── Borders ── */
   --clx-border:      #e2e8f0; /* slate-200 — default input/card border */
   --clx-border-soft: #f1f5f9; /* slate-100 — card/modal header-footer divider */
@@ -63,6 +69,10 @@
   --clx-text-subtle: #64748b; /* slate-500 */
   --clx-text-faint:  #475569; /* slate-600 */
 
+  /* Fixed input placeholder color — see :root definition above for why this is independent
+     of --clx-text-subtle. */
+  --clx-placeholder: #64748b; /* slate-500 */
+
   /* ── Borders ── */
   --clx-border:      #334155; /* slate-700 */
   --clx-border-soft: #1e293b; /* slate-800 */
@@ -87,6 +97,7 @@
   --color-clx-text-muted:  var(--clx-text-muted);
   --color-clx-text-subtle: var(--clx-text-subtle);
   --color-clx-text-faint:  var(--clx-text-faint);
+  --color-clx-placeholder: var(--clx-placeholder);
   --color-clx-border:        var(--clx-border);
   --color-clx-border-soft:   var(--clx-border-soft);
   --color-clx-primary:       var(--clx-primary);

package/assets/styles/styles.css

@@ -9,7 +9,7 @@
 @source inline("text-{black,white}");
 @source inline("focus:ring-2 focus-within:ring-2 ring-2");
 @source inline("{bg,border,text}-clx-{surface,surface-2,surface-3,bg,text,text-label,text-muted,text-subtle,text-faint,border,border-soft}");
-@source inline("placeholder:text-clx-text-subtle");
+@source inline("placeholder:text-clx-placeholder");
 
 /* ── Shared backdrop base ── */
 .clx-modal-backdrop,

package/fesm2022/codexly-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, DestroyRef, untracked, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, ViewChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, InjectionToken, inject, PLATFORM_ID, signal, effect, Injectable, ElementRef, HostAttributeToken, output, Directive, forwardRef, contentChild, ApplicationRef, EnvironmentInjector, RendererFactory2, createComponent, DestroyRef, untracked, ViewChildren, HostListener, viewChild, ViewChild, Injector, ChangeDetectorRef, NgZone, model, contentChildren, ContentChildren, numberAttribute, booleanAttribute, Input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { isPlatformBrowser, NgTemplateOutlet, DOCUMENT, NgStyle, CurrencyPipe, DecimalPipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -2008,7 +2008,8 @@ const CLX_BG_SECTION = 'bg-clx-surface-2'; // card/modal header+footer
 const CLX_BG_ICON_WRAP = 'bg-clx-surface-3'; // empty-state icon wrapper
 const CLX_BG_ADDON = 'bg-clx-surface-3'; // prefix/suffix text addon
 // ── Placeholder ───────────────────────────────────────────────────────────────
-const CLX_PLACEHOLDER = 'placeholder:text-clx-text-subtle';
+// Fixed color independent of --clx-text-subtle — see _theme.css for why.
+const CLX_PLACEHOLDER = 'placeholder:text-clx-placeholder';
 // ── Disabled borders ──────────────────────────────────────────────────────────
 const CLX_BORDER_DISABLED = 'border-clx-border';
 // ── Addon (prefix/suffix text) ────────────────────────────────────────────────
@@ -3185,6 +3186,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }], prefixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixText", required: false }] }], suffixText: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixText", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], statusMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "statusMessage", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }] } });
 
+const OTP_SIZE_MAP = {
+    xs: { box: 'w-8  h-8  text-sm', text: 'text-sm', gap: 'gap-1.5' },
+    sm: { box: 'w-10 h-10 text-base', text: 'text-base', gap: 'gap-2' },
+    md: { box: 'w-12 h-12 text-lg', text: 'text-lg', gap: 'gap-2.5' },
+    lg: { box: 'w-14 h-14 text-xl', text: 'text-xl', gap: 'gap-3' },
+};
+
+class ClxOtpComponent {
+    _themeSvc = inject(ClxThemeService);
+    // ── Inputs ─────────────────────────────────────────────────────────────────
+    length = input(4, ...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    color = input(undefined, ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
+    errorMessage = input('Código inválido', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Autofocus the first box on init */
+    autoFocus = input(false, ...(ngDevMode ? [{ debugName: "autoFocus" }] : /* istanbul ignore next */ []));
+    _color = computed(() => this.color() ?? this._themeSvc.config().primaryColor, ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+    _size = computed(() => (this.size() ?? this._themeSvc.config().defaultSize), ...(ngDevMode ? [{ debugName: "_size" }] : /* istanbul ignore next */ []));
+    _sizeConfig = computed(() => OTP_SIZE_MAP[this._size()], ...(ngDevMode ? [{ debugName: "_sizeConfig" }] : /* istanbul ignore next */ []));
+    _statusCfg = computed(() => INPUT_STATUS_MAP[this.status()], ...(ngDevMode ? [{ debugName: "_statusCfg" }] : /* istanbul ignore next */ []));
+    _indices = computed(() => Array.from({ length: this.length() }, (_, i) => i), ...(ngDevMode ? [{ debugName: "_indices" }] : /* istanbul ignore next */ []));
+    // ── Internal state ───────────────────────────────────────────────────────────
+    static _seq = 0;
+    _labelId = `clx-otp-label-${++ClxOtpComponent._seq}`;
+    _digits = signal([], ...(ngDevMode ? [{ debugName: "_digits" }] : /* istanbul ignore next */ []));
+    _wasTouched = signal(false, ...(ngDevMode ? [{ debugName: "_wasTouched" }] : /* istanbul ignore next */ []));
+    _cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_cvaDisabled" }] : /* istanbul ignore next */ []));
+    _boxes;
+    _onChange = () => { };
+    _onTouched = () => { };
+    ngAfterViewInit() {
+        if (this.autoFocus())
+            this._focusBox(0);
+    }
+    _isInvalid = computed(() => this._wasTouched() && this.status() === 'error', ...(ngDevMode ? [{ debugName: "_isInvalid" }] : /* istanbul ignore next */ []));
+    // ── Classes ──────────────────────────────────────────────────────────────────
+    _labelClass = computed(() => `text-sm font-medium ${CLX_TEXT_LABEL} leading-none`, ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
+    _hintClass = computed(() => `text-xs ${CLX_TEXT_HINT}`, ...(ngDevMode ? [{ debugName: "_hintClass" }] : /* istanbul ignore next */ []));
+    _groupClass = computed(() => `flex ${this._sizeConfig().gap}`, ...(ngDevMode ? [{ debugName: "_groupClass" }] : /* istanbul ignore next */ []));
+    _boxClass = computed(() => {
+        const s = this._sizeConfig();
+        const radius = resolveRadius(this._themeSvc.config().borderRadius);
+        const base = `${s.box} text-center font-semibold outline-none border transition-[border-color,box-shadow] duration-200 ${radius}`;
+        if (this._cvaDisabled() || this.disabled()) {
+            return `${base} ${CLX_BORDER_DISABLED} ${CLX_BG_DISABLED} ${CLX_TEXT_DISABLED} cursor-not-allowed`;
+        }
+        if (this.status() === 'error') {
+            return `${base} ${CLX_BG_SURFACE} ${CLX_TEXT_INPUT} ${this._statusCfg().border} focus:ring-2 focus:ring-red-500/20 focus:border-red-500`;
+        }
+        return `${base} ${CLX_BG_SURFACE} ${CLX_TEXT_INPUT} border-clx-border ${resolveColor(this._color()).focusDirect}`;
+    }, ...(ngDevMode ? [{ debugName: "_boxClass" }] : /* istanbul ignore next */ []));
+    // ── Handlers ─────────────────────────────────────────────────────────────────
+    _onInput(index, event) {
+        const el = event.target;
+        const raw = el.value.replace(/[^0-9]/g, '').slice(-1);
+        el.value = raw;
+        const next = [...this._digits()];
+        next[index] = raw;
+        this._digits.set(next);
+        this._emit();
+        if (raw && index < this.length() - 1) {
+            this._focusBox(index + 1);
+        }
+    }
+    _onKeydown(index, event) {
+        if (event.key === 'Backspace' && !this._digits()[index] && index > 0) {
+            event.preventDefault();
+            const next = [...this._digits()];
+            next[index - 1] = '';
+            this._digits.set(next);
+            this._emit();
+            this._focusBox(index - 1);
+            return;
+        }
+        if (event.key === 'ArrowLeft' && index > 0) {
+            event.preventDefault();
+            this._focusBox(index - 1);
+        }
+        if (event.key === 'ArrowRight' && index < this.length() - 1) {
+            event.preventDefault();
+            this._focusBox(index + 1);
+        }
+    }
+    _onPaste(event) {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text') ?? '';
+        const digits = text.replace(/[^0-9]/g, '').slice(0, this.length()).split('');
+        if (!digits.length)
+            return;
+        const next = Array.from({ length: this.length() }, (_, i) => digits[i] ?? '');
+        this._digits.set(next);
+        this._emit();
+        const lastIndex = Math.min(digits.length, this.length() - 1);
+        this._focusBox(lastIndex);
+    }
+    _onFocus(index) {
+        // Select the digit on focus so typing over it replaces instead of appending —
+        // maxlength=1 already blocks a second char, but selecting avoids the visual
+        // flash of the old digit before the new one lands.
+        queueMicrotask(() => this._boxes?.get(index)?.nativeElement.select());
+    }
+    _handleBlur() {
+        this._wasTouched.set(true);
+        this._onTouched();
+    }
+    _focusBox(index) {
+        this._boxes?.get(index)?.nativeElement.focus();
+    }
+    _emit() {
+        const value = this._digits().join('');
+        this._onChange(value);
+    }
+    // ── CVA ──────────────────────────────────────────────────────────────────────
+    writeValue(val) {
+        const chars = (val ?? '').replace(/[^0-9]/g, '').slice(0, this.length()).split('');
+        this._digits.set(Array.from({ length: this.length() }, (_, i) => chars[i] ?? ''));
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this._cvaDisabled.set(disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxOtpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxOtpComponent, isStandalone: true, selector: "clx-otp", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "flex flex-col gap-1.5" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ClxOtpComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "_boxes", predicate: ["box"], descendants: true }], ngImport: i0, template: `
+    @if (label()) {
+      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
+    }
+
+    <div [class]="_groupClass()" role="group" [attr.aria-labelledby]="label() ? _labelId : null">
+      @for (i of _indices(); track i) {
+        <input
+          #box
+          type="text"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          maxlength="1"
+          [attr.aria-label]="'Dígito ' + (i + 1)"
+          [disabled]="disabled()"
+          [class]="_boxClass()"
+          [value]="_digits()[i] ?? ''"
+          (input)="_onInput(i, $event)"
+          (keydown)="_onKeydown(i, $event)"
+          (paste)="_onPaste($event)"
+          (focus)="_onFocus(i)"
+          (blur)="_handleBlur()"
+        />
+      }
+    </div>
+
+    @if (_isInvalid()) {
+      <p [class]="_hintClass()" style="color:#ef4444">{{ errorMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxOtpComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'clx-otp',
+                    standalone: true,
+                    imports: [],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ClxOtpComponent),
+                            multi: true,
+                        },
+                    ],
+                    template: `
+    @if (label()) {
+      <span [id]="_labelId" [class]="_labelClass()">{{ label() }}</span>
+    }
+
+    <div [class]="_groupClass()" role="group" [attr.aria-labelledby]="label() ? _labelId : null">
+      @for (i of _indices(); track i) {
+        <input
+          #box
+          type="text"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          maxlength="1"
+          [attr.aria-label]="'Dígito ' + (i + 1)"
+          [disabled]="disabled()"
+          [class]="_boxClass()"
+          [value]="_digits()[i] ?? ''"
+          (input)="_onInput(i, $event)"
+          (keydown)="_onKeydown(i, $event)"
+          (paste)="_onPaste($event)"
+          (focus)="_onFocus(i)"
+          (blur)="_handleBlur()"
+        />
+      }
+    </div>
+
+    @if (_isInvalid()) {
+      <p [class]="_hintClass()" style="color:#ef4444">{{ errorMessage() }}</p>
+    } @else if (hint()) {
+      <p [class]="_hintClass()">{{ hint() }}</p>
+    }
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'flex flex-col gap-1.5' },
+                }]
+        }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], _boxes: [{
+                type: ViewChildren,
+                args: ['box']
+            }] } });
+
 // ── Size map ─────────────────────────────────────────────────────────────────
 const TEXTAREA_SIZE_MAP = {
     sm: {
@@ -16496,5 +16721,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
+export { CLX_ADDON_BORDER, CLX_ADDON_TEXT, CLX_ALERT_OPTIONS, CLX_ALERT_RESOLVE, CLX_BG_ADDON, CLX_BG_DISABLED, CLX_BG_ICON_WRAP, CLX_BG_SECTION, CLX_BG_SURFACE, CLX_BORDER_DEFAULT, CLX_BORDER_DISABLED, CLX_BORDER_MEDIUM, CLX_COLOR_HEX, CLX_COLOR_HEX_100, CLX_COLOR_MAP, CLX_FONT_CATALOG, CLX_MODAL_ANIM_CONFIG, CLX_MODAL_DATA, CLX_MODAL_REF, CLX_OPTION_DISABLED, CLX_PLACEHOLDER, CLX_RADIO_GROUP, CLX_RADIUS_MAP, CLX_TEXT_BODY, CLX_TEXT_DISABLED, CLX_TEXT_HEADING, CLX_TEXT_HINT, CLX_TEXT_IDLE, CLX_TEXT_INPUT, CLX_TEXT_LABEL, CLX_TEXT_OPTION, CLX_TEXT_SUBTITLE, CLX_TEXT_TITLE, CLX_THEME_CONFIG, CLX_THEME_DEFAULTS, CLX_TOAST_DEFAULTS, ClxAlertComponent, ClxAlertService, ClxAnimateDirective, ClxAnimateGroupDirective, ClxAnimateService, ClxAppLayoutComponent, ClxAvatarComponent, ClxBadgeComponent, ClxBrandComponent, ClxButtonComponent, ClxButtonGroupComponent, ClxCardBodyDirective, ClxCardComponent, ClxCardFooterDirective, ClxCardHeaderActionsDirective, ClxCardHeaderDirective, ClxCarouselComponent, ClxCarouselDirective, ClxCartComponent, ClxCartSummaryDrawer, ClxCellDirective, ClxCheckboxComponent, ClxColorPickerComponent, ClxColumnDefDirective, ClxDateRangePickerComponent, ClxDatepickerComponent, ClxDrawerComponent, ClxDrawerService, ClxEditorComponent, ClxEditorLinkModalComponent, ClxFabComponent, ClxFilterPanelComponent, ClxHeaderCellDirective, ClxIconComponent, ClxInputComponent, ClxListComponent, ClxListItemComponent, ClxMenuComponent, ClxMenuItemComponent, ClxMenuItemTrailingDirective, ClxModalComponent, ClxModalService, ClxNativeOverlayService, ClxNavGroupComponent, ClxNumberComponent, ClxOtpComponent, ClxPageEmptyComponent, ClxPageHeaderComponent, ClxPageHeaderTitleDirective, ClxPageNotFoundComponent, ClxPageServerErrorComponent, ClxPageUnauthorizedComponent, ClxPaginationComponent, ClxProductComponent, ClxProductDetailComponent, ClxProductQuickViewComponent, ClxProfileComponent, ClxProgressBarComponent, ClxRadioComponent, ClxRadioGroupComponent, ClxRatingComponent, ClxSearchComponent, ClxSelectComponent, ClxSkeletonComponent, ClxSliderComponent, ClxSocialIconComponent, ClxSpinnerComponent, ClxStatCardComponent, ClxStepComponent, ClxStepperComponent, ClxSwitchComponent, ClxTabDirective, ClxTableComponent, ClxTabsComponent, ClxTagComponent, ClxTextareaComponent, ClxThemeService, ClxTimelineComponent, ClxTimelineItemComponent, ClxTimepickerComponent, ClxToastComponent, ClxToastContainerComponent, ClxToastService, ClxTooltipComponent, ClxTooltipDirective, ClxTreeComponent, ClxUploadComponent, ClxWishlistComponent, ClxWizardComponent, TIMEPICKER_SIZE_MAP, parseColorInput, provideCodexlyTheme, resolveColor, resolveContainerRadius, resolveRadius };
 //# sourceMappingURL=codexly-ui.mjs.map