@nuraly/lumenui 0.1.0

package/dist/src/components/toast/react.js

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrToastElement } from './toast.component.js';
+export const NrToast = createComponent({
+    tagName: 'nr-toast',
+    elementClass: NrToastElement,
+    react: React,
+    events: {
+        'nr-toast-show': 'nr-toast-show',
+        'nr-toast-close': 'nr-toast-close',
+        'nr-toast-click': 'nr-toast-click',
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/toast/toast.component.d.ts

@@ -0,0 +1,152 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { ToastPosition, ToastAnimation, ToastConfig } from './toast.types.js';
+declare const NrToastElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+/**
+ * Toast notification component for displaying temporary messages.
+ *
+ * Provides a flexible notification system with multiple types, positions, and animations.
+ * Supports stacking multiple toasts, auto-dismiss (enabled by default), action buttons,
+ * custom HTML content, and manual closing.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with auto-dismiss -->
+ * <nr-toast position="top-right"></nr-toast>
+ *
+ * <!-- Disable auto-dismiss to require manual closing -->
+ * <nr-toast position="top-right" auto-dismiss="false"></nr-toast>
+ *
+ * <!-- Programmatic usage -->
+ * <script>
+ *   const toast = document.querySelector('nr-toast');
+ *   toast.show({ text: 'Success!', type: 'success' });
+ *   toast.show({ text: 'Error occurred', type: 'error', duration: 7000 });
+ *
+ *   // Disable auto-dismiss for specific toast
+ *   toast.show({ text: 'Persistent message', autoDismiss: false });
+ *
+ *   // Toast with action button
+ *   toast.show({
+ *     text: 'Item deleted',
+ *     type: 'success',
+ *     button: {
+ *       label: 'Undo',
+ *       onClick: () => console.log('Undo clicked'),
+ *       type: 'primary'
+ *     }
+ *   });
+ *
+ *   // Custom HTML content (GDPR consent example)
+ *   toast.show({
+ *     content: html`
+ *       <div>
+ *         <h4>Cookie Consent</h4>
+ *         <p>We use cookies to improve your experience.</p>
+ *         <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+ *           <nr-button size="small" type="primary">Accept</nr-button>
+ *           <nr-button size="small" type="secondary">Decline</nr-button>
+ *         </div>
+ *       </div>
+ *     `,
+ *     autoDismiss: false,
+ *     closable: true
+ *   });
+ * </script>
+ * ```
+ *
+ * @fires nr-toast-show - Toast shown
+ * @fires nr-toast-close - Toast closed
+ * @fires nr-toast-click - Toast clicked
+ *
+ * @cssproperty --nuraly-z-index-toast - Toast z-index
+ * @cssproperty --nuraly-toast-default-background - Default toast background
+ * @cssproperty --nuraly-toast-success-background - Success toast background
+ * @cssproperty --nuraly-toast-error-background - Error toast background
+ * @cssproperty --nuraly-toast-warning-background - Warning toast background
+ * @cssproperty --nuraly-toast-info-background - Info toast background
+ */
+export declare class NrToastElement extends NrToastElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /** Position of toast container on screen */
+    position: ToastPosition;
+    /** Maximum number of toasts to display */
+    maxToasts: number;
+    /** Default duration for toasts in milliseconds */
+    defaultDuration: import("./toast.types.js").ToastDuration;
+    /** Animation type for toasts */
+    animation: ToastAnimation;
+    /** Whether to stack toasts or replace */
+    stack: boolean;
+    /** Auto dismiss toasts after duration (default: true) */
+    autoDismiss: boolean;
+    /** Internal state: active toasts */
+    private toasts;
+    /** Timeout map for auto-dismiss */
+    private timeouts;
+    /**
+     * Show a new toast notification
+     * @param config - Toast configuration
+     * @returns Toast ID for manual control
+     */
+    show(config: string | ToastConfig): string;
+    /**
+     * Show success toast
+     */
+    success(text: string, duration?: number): string;
+    /**
+     * Show error toast
+     */
+    error(text: string, duration?: number): string;
+    /**
+     * Show warning toast
+     */
+    warning(text: string, duration?: number): string;
+    /**
+     * Show info toast
+     */
+    info(text: string, duration?: number): string;
+    /**
+     * Remove a specific toast
+     */
+    removeToast(id: string): void;
+    /**
+     * Clear all toasts
+     */
+    clearAll(): void;
+    /**
+     * Handle toast click
+     */
+    private handleToastClick;
+    /**
+     * Handle close button click
+     */
+    private handleCloseClick;
+    /**
+     * Get default icon for toast type
+     */
+    private getDefaultIcon;
+    /**
+     * Generate unique ID
+     */
+    private generateId;
+    /**
+     * Get animation class
+     */
+    private getAnimationClass;
+    /**
+     * Emit toast event
+     */
+    private emitToastEvent;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderToast;
+    private renderButton;
+}
+export {};
+//# sourceMappingURL=toast.component.d.ts.map

package/dist/src/components/toast/toast.component.js

@@ -0,0 +1,368 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './toast.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { DEFAULT_TOAST_DURATION, DEFAULT_MAX_TOASTS, EMPTY_STRING } from './toast.types.js';
+// Import required components
+/**
+ * Toast notification component for displaying temporary messages.
+ *
+ * Provides a flexible notification system with multiple types, positions, and animations.
+ * Supports stacking multiple toasts, auto-dismiss (enabled by default), action buttons,
+ * custom HTML content, and manual closing.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage with auto-dismiss -->
+ * <nr-toast position="top-right"></nr-toast>
+ *
+ * <!-- Disable auto-dismiss to require manual closing -->
+ * <nr-toast position="top-right" auto-dismiss="false"></nr-toast>
+ *
+ * <!-- Programmatic usage -->
+ * <script>
+ *   const toast = document.querySelector('nr-toast');
+ *   toast.show({ text: 'Success!', type: 'success' });
+ *   toast.show({ text: 'Error occurred', type: 'error', duration: 7000 });
+ *
+ *   // Disable auto-dismiss for specific toast
+ *   toast.show({ text: 'Persistent message', autoDismiss: false });
+ *
+ *   // Toast with action button
+ *   toast.show({
+ *     text: 'Item deleted',
+ *     type: 'success',
+ *     button: {
+ *       label: 'Undo',
+ *       onClick: () => console.log('Undo clicked'),
+ *       type: 'primary'
+ *     }
+ *   });
+ *
+ *   // Custom HTML content (GDPR consent example)
+ *   toast.show({
+ *     content: html`
+ *       <div>
+ *         <h4>Cookie Consent</h4>
+ *         <p>We use cookies to improve your experience.</p>
+ *         <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
+ *           <nr-button size="small" type="primary">Accept</nr-button>
+ *           <nr-button size="small" type="secondary">Decline</nr-button>
+ *         </div>
+ *       </div>
+ *     `,
+ *     autoDismiss: false,
+ *     closable: true
+ *   });
+ * </script>
+ * ```
+ *
+ * @fires nr-toast-show - Toast shown
+ * @fires nr-toast-close - Toast closed
+ * @fires nr-toast-click - Toast clicked
+ *
+ * @cssproperty --nuraly-z-index-toast - Toast z-index
+ * @cssproperty --nuraly-toast-default-background - Default toast background
+ * @cssproperty --nuraly-toast-success-background - Success toast background
+ * @cssproperty --nuraly-toast-error-background - Error toast background
+ * @cssproperty --nuraly-toast-warning-background - Warning toast background
+ * @cssproperty --nuraly-toast-info-background - Info toast background
+ */
+let NrToastElement = class NrToastElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon', 'nr-button'];
+        /** Position of toast container on screen */
+        this.position = "top-right" /* ToastPosition.TopRight */;
+        /** Maximum number of toasts to display */
+        this.maxToasts = DEFAULT_MAX_TOASTS;
+        /** Default duration for toasts in milliseconds */
+        this.defaultDuration = DEFAULT_TOAST_DURATION;
+        /** Animation type for toasts */
+        this.animation = "fade" /* ToastAnimation.Fade */;
+        /** Whether to stack toasts or replace */
+        this.stack = true;
+        /** Auto dismiss toasts after duration (default: true) */
+        this.autoDismiss = true;
+        /** Internal state: active toasts */
+        this.toasts = [];
+        /** Timeout map for auto-dismiss */
+        this.timeouts = new Map();
+    }
+    /**
+     * Show a new toast notification
+     * @param config - Toast configuration
+     * @returns Toast ID for manual control
+     */
+    show(config) {
+        var _a, _b, _c;
+        const toastConfig = typeof config === 'string'
+            ? { text: config }
+            : config;
+        const toast = {
+            id: this.generateId(),
+            timestamp: Date.now(),
+            text: toastConfig.text,
+            content: toastConfig.content,
+            type: toastConfig.type || "default" /* ToastType.Default */,
+            duration: (_a = toastConfig.duration) !== null && _a !== void 0 ? _a : this.defaultDuration,
+            autoDismiss: (_b = toastConfig.autoDismiss) !== null && _b !== void 0 ? _b : this.autoDismiss,
+            closable: (_c = toastConfig.closable) !== null && _c !== void 0 ? _c : true,
+            icon: toastConfig.icon || this.getDefaultIcon(toastConfig.type),
+            customClass: toastConfig.customClass,
+            button: toastConfig.button,
+            onClose: toastConfig.onClose,
+            onClick: toastConfig.onClick,
+        };
+        // Handle max toasts
+        if (!this.stack) {
+            this.clearAll();
+        }
+        else if (this.toasts.length >= this.maxToasts) {
+            this.removeToast(this.toasts[0].id);
+        }
+        // Add toast
+        this.toasts = [...this.toasts, toast];
+        // Emit show event
+        this.emitToastEvent('nr-toast-show', toast, 'show');
+        // Set auto-dismiss timeout
+        if (toast.autoDismiss && toast.duration && toast.duration > 0) {
+            const timeoutId = window.setTimeout(() => {
+                this.removeToast(toast.id);
+            }, toast.duration);
+            this.timeouts.set(toast.id, timeoutId);
+        }
+        return toast.id;
+    }
+    /**
+     * Show success toast
+     */
+    success(text, duration) {
+        return this.show({ text, type: "success" /* ToastType.Success */, duration });
+    }
+    /**
+     * Show error toast
+     */
+    error(text, duration) {
+        return this.show({ text, type: "error" /* ToastType.Error */, duration });
+    }
+    /**
+     * Show warning toast
+     */
+    warning(text, duration) {
+        return this.show({ text, type: "warning" /* ToastType.Warning */, duration });
+    }
+    /**
+     * Show info toast
+     */
+    info(text, duration) {
+        return this.show({ text, type: "info" /* ToastType.Info */, duration });
+    }
+    /**
+     * Remove a specific toast
+     */
+    removeToast(id) {
+        const toast = this.toasts.find(t => t.id === id);
+        if (!toast)
+            return;
+        // Mark as removing for animation
+        toast.removing = true;
+        this.requestUpdate();
+        // Clear timeout
+        const timeoutId = this.timeouts.get(id);
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            this.timeouts.delete(id);
+        }
+        // Remove after animation
+        setTimeout(() => {
+            var _a;
+            this.toasts = this.toasts.filter(t => t.id !== id);
+            // Emit close event
+            this.emitToastEvent('nr-toast-close', toast, 'close');
+            // Call onClose callback
+            (_a = toast.onClose) === null || _a === void 0 ? void 0 : _a.call(toast);
+        }, 300); // Animation duration
+    }
+    /**
+     * Clear all toasts
+     */
+    clearAll() {
+        this.toasts.forEach(toast => {
+            const timeoutId = this.timeouts.get(toast.id);
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        });
+        this.timeouts.clear();
+        this.toasts = [];
+    }
+    /**
+     * Handle toast click
+     */
+    handleToastClick(toast) {
+        var _a;
+        this.emitToastEvent('nr-toast-click', toast, 'click');
+        (_a = toast.onClick) === null || _a === void 0 ? void 0 : _a.call(toast);
+    }
+    /**
+     * Handle close button click
+     */
+    handleCloseClick(event, toast) {
+        event.stopPropagation();
+        this.removeToast(toast.id);
+    }
+    /**
+     * Get default icon for toast type
+     */
+    getDefaultIcon(type) {
+        switch (type) {
+            case "success" /* ToastType.Success */:
+                return 'check-circle';
+            case "error" /* ToastType.Error */:
+                return 'x-circle';
+            case "warning" /* ToastType.Warning */:
+                return 'alert-triangle';
+            case "info" /* ToastType.Info */:
+                return 'info';
+            default:
+                return EMPTY_STRING;
+        }
+    }
+    /**
+     * Generate unique ID
+     */
+    generateId() {
+        return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    /**
+     * Get animation class
+     */
+    getAnimationClass(toast) {
+        const isRemoving = toast.removing;
+        const suffix = isRemoving ? 'out' : 'in';
+        return `toast--${this.animation}-${suffix}`;
+    }
+    /**
+     * Emit toast event
+     */
+    emitToastEvent(eventName, toast, action) {
+        this.dispatchEvent(new CustomEvent(eventName, {
+            detail: { toast, action },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.clearAll();
+    }
+    render() {
+        return html `
+      <div class="toast-container">
+        ${repeat(this.toasts, toast => toast.id, toast => this.renderToast(toast))}
+      </div>
+    `;
+    }
+    renderToast(toast) {
+        const classes = {
+            'toast': true,
+            [`toast--${toast.type}`]: true,
+            [this.getAnimationClass(toast)]: true,
+            [toast.customClass || EMPTY_STRING]: !!toast.customClass,
+        };
+        return html `
+      <div
+        class=${classMap(classes)}
+        @click=${() => this.handleToastClick(toast)}
+        role="alert"
+        aria-live="polite"
+      >
+        ${toast.icon ? html `
+          <div class="toast__icon">
+            <nr-icon name=${toast.icon} size="medium"></nr-icon>
+          </div>
+        ` : nothing}
+        
+        <div class="toast__content">
+          ${toast.content
+            ? toast.content
+            : html `
+              <div class="toast__text">${toast.text}</div>
+              ${toast.button ? this.renderButton(toast.button) : nothing}
+            `}
+        </div>
+        
+        ${toast.closable ? html `
+          <button
+            class="toast__close"
+            @click=${(e) => this.handleCloseClick(e, toast)}
+            aria-label="Close notification"
+            type="button"
+          >
+            <nr-icon name="x" size="small"></nr-icon>
+          </button>
+        ` : nothing}
+      </div>
+    `;
+    }
+    renderButton(button) {
+        const handleButtonClick = (e) => {
+            e.stopPropagation();
+            button.onClick(e);
+        };
+        return html `
+      <div class="toast__button">
+        <nr-button
+          type=${button.type || 'default'}
+          size=${button.size || 'small'}
+          ?disabled=${button.disabled || false}
+          @click=${handleButtonClick}
+        >
+          ${button.icon ? html `<nr-icon slot="icon-left" name=${button.icon}></nr-icon>` : nothing}
+          ${button.label}
+        </nr-button>
+      </div>
+    `;
+    }
+};
+NrToastElement.styles = styles;
+__decorate([
+    property({ type: String, reflect: true })
+], NrToastElement.prototype, "position", void 0);
+__decorate([
+    property({ type: Number })
+], NrToastElement.prototype, "maxToasts", void 0);
+__decorate([
+    property({ type: Number })
+], NrToastElement.prototype, "defaultDuration", void 0);
+__decorate([
+    property({ type: String })
+], NrToastElement.prototype, "animation", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrToastElement.prototype, "stack", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrToastElement.prototype, "autoDismiss", void 0);
+__decorate([
+    state()
+], NrToastElement.prototype, "toasts", void 0);
+NrToastElement = __decorate([
+    customElement('nr-toast')
+], NrToastElement);
+export { NrToastElement };
+//# sourceMappingURL=toast.component.js.map

package/dist/src/components/toast/toast.style.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * 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 declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=toast.style.d.ts.map