@nuralyui/toast 0.0.2 → 0.0.10

package/toast.style.js

@@ -1,71 +1,338 @@
-import { css } from "lit";
-export default css `
-:host {
-  display: flex;
-  position: fixed;
-  left: 50%;
-  transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
-  z-index: var(--lt-z-index, 2);
-  top: 0; /* Change from bottom to top */
-  background-color: var(--lt-background-color, #292929);
-  color: var(--lt-color, #dddddd);
-  text-align: center;
-  border-radius: var(--lt-border-radius, 2px);
-  padding: var(--lt-padding, 16px);
-  border: var(--lt-border, none);
-  font-size: var(--lt-font-size, 1em);
-  font-family: var(--lt-font-family, sans-serif);
-}
-
-:host(.show) {
-  top: var(--lt-top, 40px); /* Change from bottom to top */
-  transform: translateX(-50%);
-  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
-  animation: fadein 0.5s, fadeout 0.5s 2.5s;
-}
-
-@-webkit-keyframes fadein {
-  from {
-    top: 0; /* Change from bottom to top */
-    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
-  }
-  to {
-    top: var(--lt-top, 40px); /* Change from bottom to top */
-    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
-  }
-}
-
-@keyframes fadein {
-  from {
-    top: 0; /* Change from bottom to top */
-    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
-  }
-  to {
-    top: var(--lt-top, 40px); /* Change from bottom to top */
-    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
-  }
-}
-
-@-webkit-keyframes fadeout {
-  from {
-    top: var(--lt-top, 40px); /* Change from bottom to top */
-    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
-  }
-  to {
-    top: 0; /* Change from bottom to top */
-    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
-  }
-}
-
-@keyframes fadeout {
-  from {
-    top: var(--lt-top, 40px); /* Change from bottom to top */
-    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */
-  }
-  to {
-    top: 0; /* Change from bottom to top */
-    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */
-  }
-}
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * Toast component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-toast component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export const styles = css `
+  :host {
+    display: block;
+    position: fixed;
+    z-index: var(--nuraly-z-index-toast);
+    pointer-events: none;
+    
+    /* Force CSS custom property inheritance to ensure theme switching works properly */
+    color: var(--nuraly-color-text);
+    font-family: var(--nuraly-font-family);
+  }
+
+  /* Container positioning */
+  :host([position="top-right"]) {
+    top: var(--nuraly-spacing-4);
+    right: var(--nuraly-spacing-4);
+  }
+
+  :host([position="top-left"]) {
+    top: var(--nuraly-spacing-4);
+    left: var(--nuraly-spacing-4);
+  }
+
+  :host([position="top-center"]) {
+    top: var(--nuraly-spacing-4);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host([position="bottom-right"]) {
+    bottom: var(--nuraly-spacing-4);
+    right: var(--nuraly-spacing-4);
+  }
+
+  :host([position="bottom-left"]) {
+    bottom: var(--nuraly-spacing-4);
+    left: var(--nuraly-spacing-4);
+  }
+
+  :host([position="bottom-center"]) {
+    bottom: var(--nuraly-spacing-4);
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .toast-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-toast-stack-gap);
+    min-width: var(--nuraly-toast-min-width);
+    max-width: var(--nuraly-toast-max-width);
+  }
+
+  .toast {
+    display: flex;
+    align-items: start;
+    gap: var(--nuraly-toast-gap);
+    padding: var(--nuraly-toast-padding-vertical) var(--nuraly-toast-padding-horizontal);
+    background-color: var(--nuraly-color-background);
+    color: var(--nuraly-color-text);
+    border: 1px solid var(--nuraly-color-border);
+    border-radius: var(--nuraly-border-radius-toast);
+    box-shadow: var(--nuraly-shadow-toast);
+    pointer-events: auto;
+    cursor: default;
+    transition: all var(--nuraly-transition-fast) ease;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .toast:hover {
+    box-shadow: var(--nuraly-shadow-toast-hover);
+  }
+
+  /* Toast type variants */
+  .toast--default {
+    background-color: var(--nuraly-toast-default-background);
+    border-color: var(--nuraly-toast-default-border);
+    color: var(--nuraly-toast-default-text);
+  }
+
+  .toast--success {
+    background-color: var(--nuraly-toast-success-background);
+    border-color: var(--nuraly-toast-success-border);
+    color: var(--nuraly-toast-success-text);
+  }
+
+  .toast--error {
+    background-color: var(--nuraly-toast-error-background);
+    border-color: var(--nuraly-toast-error-border);
+    color: var(--nuraly-toast-error-text);
+  }
+
+  .toast--warning {
+    background-color: var(--nuraly-toast-warning-background);
+    border-color: var(--nuraly-toast-warning-border);
+    color: var(--nuraly-toast-warning-text);
+  }
+
+  .toast--info {
+    background-color: var(--nuraly-toast-info-background);
+    border-color: var(--nuraly-toast-info-border);
+    color: var(--nuraly-toast-info-text);
+  }
+
+  /* Toast icon */
+  .toast__icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 0.125rem; /* Slight adjustment for better visual alignment */
+  }
+
+  .toast__icon nr-icon {
+    color: inherit;
+  }
+
+  /* Toast content */
+  .toast__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--nuraly-spacing-2);
+    min-width: 0;
+  }
+
+  .toast__text {
+    font-size: var(--nuraly-font-size-sm);
+    line-height: 1.5;
+    word-break: break-word;
+  }
+
+  /* Toast button */
+  .toast__button {
+    display: flex;
+    align-items: center;
+    margin-top: var(--nuraly-spacing-1);
+  }
+
+  .toast__button nr-button {
+    flex-shrink: 0;
+  }
+
+  /* Close button */
+  .toast__close {
+    flex-shrink: 0;
+    min-width: var(--nuraly-toast-close-size);
+    min-height: var(--nuraly-toast-close-size);
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: currentColor;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--nuraly-border-radius-small);
+    transition: all var(--nuraly-transition-fast) ease;
+    opacity: var(--nuraly-toast-close-opacity);
+  }
+
+  .toast__close:hover {
+    opacity: var(--nuraly-toast-close-opacity-hover);
+    background-color: var(--nuraly-toast-close-hover-background);
+  }
+
+  .toast__close:focus {
+    outline: var(--nuraly-focus-outline);
+    outline-offset: var(--nuraly-focus-outline-offset);
+  }
+
+  .toast__close nr-icon {
+    color: inherit;
+  }
+
+  /* Animations */
+  @keyframes toast-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes toast-fade-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-1rem);
+    }
+  }
+
+  @keyframes toast-slide-in-right {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-slide-out-right {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+
+  @keyframes toast-slide-in-left {
+    from {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes toast-slide-out-left {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-100%);
+    }
+  }
+
+  @keyframes toast-bounce-in {
+    0% {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+    50% {
+      transform: scale(1.05);
+    }
+    70% {
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes toast-bounce-out {
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(0.95);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.3);
+    }
+  }
+
+  /* Animation classes */
+  .toast--fade-in {
+    animation: toast-fade-in var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--fade-out {
+    animation: toast-fade-out var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--slide-in {
+    animation: toast-slide-in-right var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--slide-out {
+    animation: toast-slide-out-right var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--bounce-in {
+    animation: toast-bounce-in var(--nuraly-transition-toast) ease;
+  }
+
+  .toast--bounce-out {
+    animation: toast-bounce-out var(--nuraly-transition-toast) ease;
+  }
+
+  /* Position-specific slide animations */
+  :host([position="top-left"]) .toast--slide-in,
+  :host([position="bottom-left"]) .toast--slide-in {
+    animation: toast-slide-in-left var(--nuraly-transition-toast) ease;
+  }
+
+  :host([position="top-left"]) .toast--slide-out,
+  :host([position="bottom-left"]) .toast--slide-out {
+    animation: toast-slide-out-left var(--nuraly-transition-toast) ease;
+  }
+
+  /* Progress bar for duration indicator */
+  .toast__progress {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: var(--nuraly-toast-progress-height);
+    background-color: currentColor;
+    opacity: var(--nuraly-toast-progress-opacity);
+    transition: width linear;
+  }
 `;
 //# sourceMappingURL=toast.style.js.map

package/toast.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.style.js","sourceRoot":"","sources":["../../../src/components/toast/toast.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n:host {\n  display: flex;\n  position: fixed;\n  left: 50%;\n  transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  z-index: var(--lt-z-index, 2);\n  top: 0; /* Change from bottom to top */\n  background-color: var(--lt-background-color, #292929);\n  color: var(--lt-color, #dddddd);\n  text-align: center;\n  border-radius: var(--lt-border-radius, 2px);\n  padding: var(--lt-padding, 16px);\n  border: var(--lt-border, none);\n  font-size: var(--lt-font-size, 1em);\n  font-family: var(--lt-font-family, sans-serif);\n}\n\n:host(.show) {\n  top: var(--lt-top, 40px); /* Change from bottom to top */\n  transform: translateX(-50%);\n  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;\n  animation: fadein 0.5s, fadeout 0.5s 2.5s;\n}\n\n@-webkit-keyframes fadein {\n  from {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n  to {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n}\n\n@keyframes fadein {\n  from {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n  to {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n}\n\n@-webkit-keyframes fadeout {\n  from {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n  to {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n}\n\n@keyframes fadeout {\n  from {\n    top: var(--lt-top, 40px); /* Change from bottom to top */\n    transform: translateX(-50%) translateY(0); /* Change translateY to 0 to reach the top */\n  }\n  to {\n    top: 0; /* Change from bottom to top */\n    transform: translateX(-50%) translateY(-110%); /* Change translateY to -110% to start from the top */\n  }\n}\n`;\n"]}
+{"version":3,"file":"toast.style.js","sourceRoot":"","sources":["../../../src/components/toast/toast.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmUxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\n/**\n * Toast component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-toast component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: block;\n    position: fixed;\n    z-index: var(--nuraly-z-index-toast);\n    pointer-events: none;\n    \n    /* Force CSS custom property inheritance to ensure theme switching works properly */\n    color: var(--nuraly-color-text);\n    font-family: var(--nuraly-font-family);\n  }\n\n  /* Container positioning */\n  :host([position=\"top-right\"]) {\n    top: var(--nuraly-spacing-4);\n    right: var(--nuraly-spacing-4);\n  }\n\n  :host([position=\"top-left\"]) {\n    top: var(--nuraly-spacing-4);\n    left: var(--nuraly-spacing-4);\n  }\n\n  :host([position=\"top-center\"]) {\n    top: var(--nuraly-spacing-4);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  :host([position=\"bottom-right\"]) {\n    bottom: var(--nuraly-spacing-4);\n    right: var(--nuraly-spacing-4);\n  }\n\n  :host([position=\"bottom-left\"]) {\n    bottom: var(--nuraly-spacing-4);\n    left: var(--nuraly-spacing-4);\n  }\n\n  :host([position=\"bottom-center\"]) {\n    bottom: var(--nuraly-spacing-4);\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  .toast-container {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nuraly-toast-stack-gap);\n    min-width: var(--nuraly-toast-min-width);\n    max-width: var(--nuraly-toast-max-width);\n  }\n\n  .toast {\n    display: flex;\n    align-items: start;\n    gap: var(--nuraly-toast-gap);\n    padding: var(--nuraly-toast-padding-vertical) var(--nuraly-toast-padding-horizontal);\n    background-color: var(--nuraly-color-background);\n    color: var(--nuraly-color-text);\n    border: 1px solid var(--nuraly-color-border);\n    border-radius: var(--nuraly-border-radius-toast);\n    box-shadow: var(--nuraly-shadow-toast);\n    pointer-events: auto;\n    cursor: default;\n    transition: all var(--nuraly-transition-fast) ease;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .toast:hover {\n    box-shadow: var(--nuraly-shadow-toast-hover);\n  }\n\n  /* Toast type variants */\n  .toast--default {\n    background-color: var(--nuraly-toast-default-background);\n    border-color: var(--nuraly-toast-default-border);\n    color: var(--nuraly-toast-default-text);\n  }\n\n  .toast--success {\n    background-color: var(--nuraly-toast-success-background);\n    border-color: var(--nuraly-toast-success-border);\n    color: var(--nuraly-toast-success-text);\n  }\n\n  .toast--error {\n    background-color: var(--nuraly-toast-error-background);\n    border-color: var(--nuraly-toast-error-border);\n    color: var(--nuraly-toast-error-text);\n  }\n\n  .toast--warning {\n    background-color: var(--nuraly-toast-warning-background);\n    border-color: var(--nuraly-toast-warning-border);\n    color: var(--nuraly-toast-warning-text);\n  }\n\n  .toast--info {\n    background-color: var(--nuraly-toast-info-background);\n    border-color: var(--nuraly-toast-info-border);\n    color: var(--nuraly-toast-info-text);\n  }\n\n  /* Toast icon */\n  .toast__icon {\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-top: 0.125rem; /* Slight adjustment for better visual alignment */\n  }\n\n  .toast__icon nr-icon {\n    color: inherit;\n  }\n\n  /* Toast content */\n  .toast__content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--nuraly-spacing-2);\n    min-width: 0;\n  }\n\n  .toast__text {\n    font-size: var(--nuraly-font-size-sm);\n    line-height: 1.5;\n    word-break: break-word;\n  }\n\n  /* Toast button */\n  .toast__button {\n    display: flex;\n    align-items: center;\n    margin-top: var(--nuraly-spacing-1);\n  }\n\n  .toast__button nr-button {\n    flex-shrink: 0;\n  }\n\n  /* Close button */\n  .toast__close {\n    flex-shrink: 0;\n    min-width: var(--nuraly-toast-close-size);\n    min-height: var(--nuraly-toast-close-size);\n    padding: 0;\n    border: none;\n    background: transparent;\n    color: currentColor;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--nuraly-border-radius-small);\n    transition: all var(--nuraly-transition-fast) ease;\n    opacity: var(--nuraly-toast-close-opacity);\n  }\n\n  .toast__close:hover {\n    opacity: var(--nuraly-toast-close-opacity-hover);\n    background-color: var(--nuraly-toast-close-hover-background);\n  }\n\n  .toast__close:focus {\n    outline: var(--nuraly-focus-outline);\n    outline-offset: var(--nuraly-focus-outline-offset);\n  }\n\n  .toast__close nr-icon {\n    color: inherit;\n  }\n\n  /* Animations */\n  @keyframes toast-fade-in {\n    from {\n      opacity: 0;\n      transform: translateY(-1rem);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  @keyframes toast-fade-out {\n    from {\n      opacity: 1;\n      transform: translateY(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateY(-1rem);\n    }\n  }\n\n  @keyframes toast-slide-in-right {\n    from {\n      opacity: 0;\n      transform: translateX(100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes toast-slide-out-right {\n    from {\n      opacity: 1;\n      transform: translateX(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(100%);\n    }\n  }\n\n  @keyframes toast-slide-in-left {\n    from {\n      opacity: 0;\n      transform: translateX(-100%);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(0);\n    }\n  }\n\n  @keyframes toast-slide-out-left {\n    from {\n      opacity: 1;\n      transform: translateX(0);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(-100%);\n    }\n  }\n\n  @keyframes toast-bounce-in {\n    0% {\n      opacity: 0;\n      transform: scale(0.3);\n    }\n    50% {\n      transform: scale(1.05);\n    }\n    70% {\n      transform: scale(0.9);\n    }\n    100% {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes toast-bounce-out {\n    0% {\n      transform: scale(1);\n    }\n    25% {\n      transform: scale(0.95);\n    }\n    50% {\n      opacity: 1;\n      transform: scale(1.1);\n    }\n    100% {\n      opacity: 0;\n      transform: scale(0.3);\n    }\n  }\n\n  /* Animation classes */\n  .toast--fade-in {\n    animation: toast-fade-in var(--nuraly-transition-toast) ease;\n  }\n\n  .toast--fade-out {\n    animation: toast-fade-out var(--nuraly-transition-toast) ease;\n  }\n\n  .toast--slide-in {\n    animation: toast-slide-in-right var(--nuraly-transition-toast) ease;\n  }\n\n  .toast--slide-out {\n    animation: toast-slide-out-right var(--nuraly-transition-toast) ease;\n  }\n\n  .toast--bounce-in {\n    animation: toast-bounce-in var(--nuraly-transition-toast) ease;\n  }\n\n  .toast--bounce-out {\n    animation: toast-bounce-out var(--nuraly-transition-toast) ease;\n  }\n\n  /* Position-specific slide animations */\n  :host([position=\"top-left\"]) .toast--slide-in,\n  :host([position=\"bottom-left\"]) .toast--slide-in {\n    animation: toast-slide-in-left var(--nuraly-transition-toast) ease;\n  }\n\n  :host([position=\"top-left\"]) .toast--slide-out,\n  :host([position=\"bottom-left\"]) .toast--slide-out {\n    animation: toast-slide-out-left var(--nuraly-transition-toast) ease;\n  }\n\n  /* Progress bar for duration indicator */\n  .toast__progress {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    height: var(--nuraly-toast-progress-height);\n    background-color: currentColor;\n    opacity: var(--nuraly-toast-progress-opacity);\n    transition: width linear;\n  }\n`;\n"]}

package/toast.types.d.ts

@@ -0,0 +1,124 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { TemplateResult } from 'lit';
+/**
+ * Toast type variants
+ */
+export declare const enum ToastType {
+    Default = "default",
+    Success = "success",
+    Error = "error",
+    Warning = "warning",
+    Info = "info"
+}
+/**
+ * Toast position on screen
+ */
+export declare const enum ToastPosition {
+    TopRight = "top-right",
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    BottomRight = "bottom-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center"
+}
+/**
+ * Toast animation types
+ */
+export declare const enum ToastAnimation {
+    Fade = "fade",
+    Slide = "slide",
+    Bounce = "bounce"
+}
+/**
+ * Predefined duration values in milliseconds
+ */
+export declare const enum ToastDuration {
+    Short = 3000,
+    Medium = 5000,
+    Long = 7000
+}
+/**
+ * Toast action button configuration
+ */
+export interface ToastButton {
+    /** Button label text */
+    label: string;
+    /** Button click handler */
+    onClick: (event: Event) => void;
+    /** Button type/variant */
+    type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';
+    /** Button size */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether button is disabled */
+    disabled?: boolean;
+    /** Icon name for button */
+    icon?: string;
+}
+/**
+ * Individual toast configuration
+ */
+export interface ToastConfig {
+    /** Toast message text */
+    text?: string;
+    /** Custom HTML content (overrides text) */
+    content?: TemplateResult;
+    /** Toast type/variant */
+    type?: ToastType;
+    /** Duration in milliseconds */
+    duration?: number;
+    /** Auto dismiss after duration (default: true) */
+    autoDismiss?: boolean;
+    /** Show close button */
+    closable?: boolean;
+    /** Icon name to display */
+    icon?: string;
+    /** Custom CSS class */
+    customClass?: string;
+    /** Action button configuration */
+    button?: ToastButton;
+    /** Callback when toast is closed */
+    onClose?: () => void;
+    /** Callback when toast is clicked */
+    onClick?: () => void;
+}
+/**
+ * Internal toast item with metadata
+ */
+export interface ToastItem extends ToastConfig {
+    /** Unique identifier */
+    id: string;
+    /** Creation timestamp */
+    timestamp: number;
+    /** Whether toast is being removed */
+    removing?: boolean;
+}
+/**
+ * Toast container configuration
+ */
+export interface ToastContainerConfig {
+    /** Position on screen */
+    position?: ToastPosition;
+    /** Maximum number of toasts to show */
+    maxToasts?: number;
+    /** Default duration */
+    defaultDuration?: number;
+    /** Animation type */
+    animation?: ToastAnimation;
+    /** Stack toasts or replace */
+    stack?: boolean;
+}
+/**
+ * Toast event detail
+ */
+export interface ToastEventDetail {
+    toast: ToastItem;
+    action: 'show' | 'close' | 'click';
+}
+export declare const EMPTY_STRING = "";
+export declare const DEFAULT_TOAST_DURATION = ToastDuration.Medium;
+export declare const DEFAULT_MAX_TOASTS = 5;
+//# sourceMappingURL=toast.types.d.ts.map

package/toast.types.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export const EMPTY_STRING = '';
+export const DEFAULT_TOAST_DURATION = 5000 /* ToastDuration.Medium */;
+export const DEFAULT_MAX_TOASTS = 5;
+//# sourceMappingURL=toast.types.js.map

package/toast.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.types.js","sourceRoot":"","sources":["../../../src/components/toast/toast.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAoJH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC;AAC/B,MAAM,CAAC,MAAM,sBAAsB,kCAAuB,CAAC;AAC3D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { TemplateResult } from 'lit';\n\n/**\n * Toast type variants\n */\nexport const enum ToastType {\n  Default = 'default',\n  Success = 'success',\n  Error = 'error',\n  Warning = 'warning',\n  Info = 'info',\n}\n\n/**\n * Toast position on screen\n */\nexport const enum ToastPosition {\n  TopRight = 'top-right',\n  TopLeft = 'top-left',\n  TopCenter = 'top-center',\n  BottomRight = 'bottom-right',\n  BottomLeft = 'bottom-left',\n  BottomCenter = 'bottom-center',\n}\n\n/**\n * Toast animation types\n */\nexport const enum ToastAnimation {\n  Fade = 'fade',\n  Slide = 'slide',\n  Bounce = 'bounce',\n}\n\n/**\n * Predefined duration values in milliseconds\n */\nexport const enum ToastDuration {\n  Short = 3000,\n  Medium = 5000,\n  Long = 7000,\n}\n\n/**\n * Toast action button configuration\n */\nexport interface ToastButton {\n  /** Button label text */\n  label: string;\n  \n  /** Button click handler */\n  onClick: (event: Event) => void;\n  \n  /** Button type/variant */\n  type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'ghost';\n  \n  /** Button size */\n  size?: 'small' | 'medium' | 'large';\n  \n  /** Whether button is disabled */\n  disabled?: boolean;\n  \n  /** Icon name for button */\n  icon?: string;\n}\n\n/**\n * Individual toast configuration\n */\nexport interface ToastConfig {\n  /** Toast message text */\n  text?: string;\n  \n  /** Custom HTML content (overrides text) */\n  content?: TemplateResult;\n  \n  /** Toast type/variant */\n  type?: ToastType;\n  \n  /** Duration in milliseconds */\n  duration?: number;\n  \n  /** Auto dismiss after duration (default: true) */\n  autoDismiss?: boolean;\n  \n  /** Show close button */\n  closable?: boolean;\n  \n  /** Icon name to display */\n  icon?: string;\n  \n  /** Custom CSS class */\n  customClass?: string;\n  \n  /** Action button configuration */\n  button?: ToastButton;\n  \n  /** Callback when toast is closed */\n  onClose?: () => void;\n  \n  /** Callback when toast is clicked */\n  onClick?: () => void;\n}\n\n/**\n * Internal toast item with metadata\n */\nexport interface ToastItem extends ToastConfig {\n  /** Unique identifier */\n  id: string;\n  \n  /** Creation timestamp */\n  timestamp: number;\n  \n  /** Whether toast is being removed */\n  removing?: boolean;\n}\n\n/**\n * Toast container configuration\n */\nexport interface ToastContainerConfig {\n  /** Position on screen */\n  position?: ToastPosition;\n  \n  /** Maximum number of toasts to show */\n  maxToasts?: number;\n  \n  /** Default duration */\n  defaultDuration?: number;\n  \n  /** Animation type */\n  animation?: ToastAnimation;\n  \n  /** Stack toasts or replace */\n  stack?: boolean;\n}\n\n/**\n * Toast event detail\n */\nexport interface ToastEventDetail {\n  toast: ToastItem;\n  action: 'show' | 'close' | 'click';\n}\n\nexport const EMPTY_STRING = '';\nexport const DEFAULT_TOAST_DURATION = ToastDuration.Medium;\nexport const DEFAULT_MAX_TOASTS = 5;\n"]}

package/demo/toast-demo.d.ts

@@ -1,34 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google Laabidi Aymen
- * SPDX-License-Identifier: MIT
- */
-import { LitElement } from 'lit';
-export declare class ElMeenuElement extends LitElement {
-    toast: any;
-    _showOptions: boolean;
-    _message: string;
-    firstUpdated(): void;
-    _callToast(): void;
-    _updateMessage(event: any): void;
-    _updatePadding(event: any): void;
-    _updateBottom(event: any): void;
-    _updateZIndex(event: any): void;
-    _updateFontSize(event: any): void;
-    _updateBorderRadius(event: any): void;
-    _updateBorder(event: any): void;
-    _color: string;
-    _backgroundColor: string;
-    _fontFamily: string;
-    _borderRadius: string;
-    _border: string;
-    _zIndex: string;
-    _fontSize: string;
-    _padding: string;
-    _bottom: string;
-    _updateColor(event: any): void;
-    _updateBackgroundColor(event: any): void;
-    _updateFontFamily(event: any): void;
-    protected render(): import("lit").TemplateResult<1>;
-}
-//# sourceMappingURL=toast-demo.d.ts.map

package/demo/toast-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toast-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/demo/toast-demo.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,OAAO,EAAC,UAAU,EAAO,MAAM,KAAK,CAAC;AAGrC,qBACa,cAAe,SAAQ,UAAU;IAE5C,KAAK,EAAG,GAAG,CAAE;IAGb,YAAY,UAAS;IAGrB,QAAQ,SAAM;IAEL,YAAY;IAYrB,UAAU;IAGV,cAAc,CAAC,KAAK,EAAC,GAAG;IAOxB,cAAc,CAAC,KAAK,EAAC,GAAG;IAQxB,aAAa,CAAC,KAAK,EAAC,GAAG;IAQvB,aAAa,CAAC,KAAK,EAAC,GAAG;IAQvB,eAAe,CAAC,KAAK,EAAC,GAAG;IAQzB,mBAAmB,CAAC,KAAK,EAAC,GAAG;IAQ7B,aAAa,CAAC,KAAK,EAAC,GAAG;IAQvB,MAAM,SAAM;IAEZ,gBAAgB,SAAM;IAEtB,WAAW,SAAM;IAEjB,aAAa,SAAM;IAEnB,OAAO,SAAM;IAEb,OAAO,SAAM;IAEb,SAAS,SAAM;IAEf,QAAQ,SAAM;IAEd,OAAO,SAAM;IAEb,YAAY,CAAC,KAAK,EAAC,GAAG;IAQtB,sBAAsB,CAAC,KAAK,EAAC,GAAG;IAWhC,iBAAiB,CAAC,KAAK,EAAC,GAAG;cAQR,MAAM;CAuM1B"}