codexly-ui 0.0.81 → 0.0.83

package/assets/styles/_globals.css

@@ -1,3 +1,14 @@
+/* ── Backdrop base ───────────────────────────────────────────────────────── */
+.clx-modal-backdrop,
+.clx-alert-backdrop {
+  animation: clx-backdrop-in 220ms ease forwards;
+}
+
+@keyframes clx-backdrop-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 /* ── Modal backdrop ─────────────────────────────────────────────────────── */
 .clx-modal-backdrop {
   background-color: rgba(15, 23, 42, 0.40);
@@ -5,6 +16,13 @@
   -webkit-backdrop-filter: blur(4px);
 }
 
+/* ── Alert backdrop ──────────────────────────────────────────────────────── */
+.clx-alert-backdrop {
+  background-color: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+}
+
 
 /* ── Scrollbar ───────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }

package/assets/styles/_safelist.css

@@ -1,4 +1,5 @@
 /* ── Safelist: all color shades for dynamic class binding ── */
+@source inline("shadow-none shadow-sm shadow-md shadow-lg shadow-xl shadow-2xl");
 @source inline("{bg,hover:bg,ring,hover:ring,focus:ring,focus-within:ring,hover:border,border,focus:border,focus-within:border,text}-{red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose,slate,gray,zinc,neutral,stone}-{50,100,200,300,400,500,600,700,800,900,950}{/10,/20,/25,/50,/75,}");
 @source inline("{bg,hover:bg,focus:ring,focus-within:ring,border,focus:border,focus-within:border,hover:border,border-t}-{white,black,transparent}");
 @source inline("border-white/30 border-t-white");

package/fesm2022/codexly-ui.mjs

@@ -6316,6 +6316,14 @@ const CARD_PADDING_MAP = {
     md: 'p-5',
     lg: 'p-7',
 };
+const CARD_SHADOW_MAP = {
+    none: 'shadow-none',
+    sm: 'shadow-sm',
+    md: 'shadow-md',
+    lg: 'shadow-lg',
+    xl: 'shadow-xl',
+    '2xl': 'shadow-2xl',
+};
 
 class ClxCardHeaderDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
@@ -6348,6 +6356,7 @@ class ClxCardComponent {
     variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
     padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    shadow = input(undefined, ...(ngDevMode ? [{ debugName: "shadow" }] : /* istanbul ignore next */ []));
     hover = input(false, ...(ngDevMode ? [{ debugName: "hover" }] : /* istanbul ignore next */ []));
     _headerSlot = contentChild(ClxCardHeaderDirective, ...(ngDevMode ? [{ debugName: "_headerSlot" }] : /* istanbul ignore next */ []));
     _bodySlot = contentChild(ClxCardBodyDirective, ...(ngDevMode ? [{ debugName: "_bodySlot" }] : /* istanbul ignore next */ []));
@@ -6362,21 +6371,25 @@ class ClxCardComponent {
     _hostClass = computed(() => {
         const variant = this.variant();
         const t = resolveColor(this.color());
+        const shadowInput = this.shadow();
         const hover = this.hover() ? `transition-shadow duration-200 hover:shadow-lg cursor-pointer` : '';
         let variantClass;
         if (variant === 'elevated') {
-            variantClass = `bg-white shadow-md border ${t.borderLight}`;
+            const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : 'shadow-md';
+            variantClass = `bg-white ${shadowClass} border ${t.borderLight}`;
         }
         else if (variant === 'outlined') {
-            variantClass = `bg-white border ${t.border}`;
+            const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
+            variantClass = `bg-white border ${t.border} ${shadowClass}`;
         }
         else {
-            variantClass = `bg-slate-50 border border-transparent`;
+            const shadowClass = shadowInput !== undefined ? CARD_SHADOW_MAP[shadowInput] : '';
+            variantClass = `bg-slate-50 border border-transparent ${shadowClass}`;
         }
         return `flex flex-col rounded-xl overflow-hidden w-full ${variantClass} ${hover}`.trim();
     }, ...(ngDevMode ? [{ debugName: "_hostClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ClxCardComponent, isStandalone: true, selector: "clx-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "_hostClass()" } }, queries: [{ propertyName: "_headerSlot", first: true, predicate: ClxCardHeaderDirective, descendants: true, isSignal: true }, { propertyName: "_bodySlot", first: true, predicate: ClxCardBodyDirective, descendants: true, isSignal: true }, { propertyName: "_footerSlot", first: true, predicate: ClxCardFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (_hasHeader()) {
       <div class="clx-card-header flex items-center justify-between gap-3 px-5 py-4 border-b border-slate-100">
         <ng-content select="[clxCardHeader]" />
@@ -6427,7 +6440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     }
   `,
                 }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], _headerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardHeaderDirective), { isSignal: true }] }], _bodySlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardBodyDirective), { isSignal: true }] }], _footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ClxCardFooterDirective), { isSignal: true }] }] } });
 
 const STEPPER_SIZE_MAP = {
     sm: { circle: 'w-7 h-7', iconSize: 'xs', label: 'text-xs', desc: 'text-xs', connector: 'h-0.5' },