cerxos-ui 0.0.11 → 0.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cerxos-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "peerDependencies": {
     "@angular/common": "^20.3.0",
     "@angular/core": "^20.3.0"
@@ -11,7 +11,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/cerxos-ui.d.ts",
       "default": "./fesm2022/cerxos-ui.mjs"
     },
     "./package.json": {
@@ -22,5 +22,6 @@
     "./tokens/theme-dark.css": "./tokens/theme-dark.css"
   },
   "module": "fesm2022/cerxos-ui.mjs",
-  "typings": "index.d.ts"
-}
+  "typings": "types/cerxos-ui.d.ts",
+  "type": "module"
+}

package/styles/tailwind.css

@@ -1,3 +1,3 @@
-@import "../tokens/theme-default.css";
-@import "../tokens/theme-dark.css";
-@import "tailwindcss";
+@import "../tokens/theme-default.css";
+@import "../tokens/theme-dark.css";
+@import "tailwindcss";

package/tokens/theme-dark.css

@@ -1,16 +1,16 @@
-.cxs-theme-dark {
-  color-scheme: dark;
-  --cxs-color-primary: #22c55e;
-  --cxs-color-primary-hover: #16a34a;
-  --cxs-color-primary-ghost: rgba(34, 197, 94, 0.16);
-  --cxs-color-on-primary: #0b0f0e;
-  --cxs-color-surface: #0b0f0e;
-  --cxs-color-surface-hover: #111827;
-  --cxs-color-on-surface: #e2e8f0;
-  --cxs-color-on-surface-muted: #94a3b8;
-  --cxs-color-border: #1f2937;
-  --cxs-color-danger: #f87171;
-  --cxs-color-focus: #f59e0b;
-  --cxs-radius-md: 8px;
-  --cxs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
+.cxs-theme-dark {
+  color-scheme: dark;
+  --cxs-color-primary: #22c55e;
+  --cxs-color-primary-hover: #16a34a;
+  --cxs-color-primary-ghost: rgba(34, 197, 94, 0.16);
+  --cxs-color-on-primary: #0b0f0e;
+  --cxs-color-surface: #0b0f0e;
+  --cxs-color-surface-hover: #111827;
+  --cxs-color-on-surface: #e2e8f0;
+  --cxs-color-on-surface-muted: #94a3b8;
+  --cxs-color-border: #1f2937;
+  --cxs-color-danger: #f87171;
+  --cxs-color-focus: #f59e0b;
+  --cxs-radius-md: 8px;
+  --cxs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+}

package/tokens/theme-default.css

@@ -1,15 +1,15 @@
-:root {
-  --cxs-color-primary: #1f7a4a;
-  --cxs-color-primary-hover: #17613a;
-  --cxs-color-primary-ghost: rgba(31, 122, 74, 0.12);
-  --cxs-color-on-primary: #ffffff;
-  --cxs-color-surface: #ffffff;
-  --cxs-color-surface-hover: #f6f8fa;
-  --cxs-color-on-surface: #0f172a;
-  --cxs-color-on-surface-muted: #64748b;
-  --cxs-color-border: #d0d7de;
-  --cxs-color-danger: #dc2626;
-  --cxs-color-focus: #f59e0b;
-  --cxs-radius-md: 8px;
-  --cxs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.16);
-}
+:root {
+  --cxs-color-primary: #1f7a4a;
+  --cxs-color-primary-hover: #17613a;
+  --cxs-color-primary-ghost: rgba(31, 122, 74, 0.12);
+  --cxs-color-on-primary: #ffffff;
+  --cxs-color-surface: #ffffff;
+  --cxs-color-surface-hover: #f6f8fa;
+  --cxs-color-on-surface: #0f172a;
+  --cxs-color-on-surface-muted: #64748b;
+  --cxs-color-border: #d0d7de;
+  --cxs-color-danger: #dc2626;
+  --cxs-color-focus: #f59e0b;
+  --cxs-radius-md: 8px;
+  --cxs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.16);
+}

package/{index.d.ts → types/cerxos-ui.d.ts}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ElementRef, OnChanges, AfterViewInit, OnDestroy, SimpleChanges, TemplateRef, AfterContentInit, Renderer2 } from '@angular/core';
+import { EventEmitter, ElementRef, OnChanges, AfterViewInit, OnDestroy, SimpleChanges, TemplateRef, AfterContentInit, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 declare class CerxosUi {
@@ -891,6 +891,7 @@ type CxsToastPosition = 'bottom-right' | 'bottom' | 'bottom-left' | 'top-right'
 type CxsToastMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | 'none';
 declare class CxsToastComponent implements OnChanges, OnDestroy {
     private readonly hostClass;
+    private readonly changeDetectorRef;
     open: boolean;
     title?: string;
     message?: string;
@@ -902,11 +903,15 @@ declare class CxsToastComponent implements OnChanges, OnDestroy {
     maxWidth: CxsToastMaxWidth;
     openChange: EventEmitter<boolean>;
     dismissed: EventEmitter<CxsToastCloseReason>;
+    rendered: boolean;
+    exiting: boolean;
     private timeoutId;
-    constructor(hostClass: string | null);
+    private exitTimeoutId;
+    constructor(hostClass: string | null, changeDetectorRef: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     get hostClassName(): string;
+    get positionAttribute(): CxsToastPosition;
     get toastClass(): string;
     get titleClass(): string;
     get messageClass(): string;
@@ -916,9 +921,12 @@ declare class CxsToastComponent implements OnChanges, OnDestroy {
     get ariaLive(): 'polite' | 'assertive';
     get ariaLabelValue(): string | null;
     requestClose(reason: CxsToastCloseReason): void;
+    private showToast;
+    private startExitAnimation;
     private resetTimer;
     private clearTimer;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CxsToastComponent, [{ attribute: "class"; }]>;
+    private clearExitTimer;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CxsToastComponent, [{ attribute: "class"; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CxsToastComponent, "cxs-toast", never, { "open": { "alias": "open"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "position": { "alias": "position"; "required": false; }; "maxWidth": { "alias": "maxWidth"; "required": false; }; }, { "openChange": "openChange"; "dismissed": "dismissed"; }, never, ["*", "[cxsToastAction]"], true, never>;
 }