@sekiui/elements 0.0.61 → 0.0.63

package/dist/collection/components/toast/seki-toast.css

@@ -0,0 +1,324 @@
+/* Toast Component Styles with Design Tokens
+ * Toast notification system with positioning and variants
+ */
+
+:host {
+  /* Layout tokens */
+  --seki-toast-width: 356px;
+  --seki-toast-padding: 1rem;
+  --seki-toast-gap: 0.75rem;
+  --seki-toast-border-radius: var(--seki-radius-lg, 0.5rem);
+  --seki-toast-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  /* Container positioning */
+  --seki-toaster-padding: 1rem;
+  --seki-toaster-gap: 0.5rem;
+
+  /* Default variant colors */
+  --seki-toast-default-bg: var(--color-background, #ffffff);
+  --seki-toast-default-border: var(--color-border, #e5e7eb);
+  --seki-toast-default-text: var(--color-foreground, #0f172a);
+
+  /* Success variant */
+  --seki-toast-success-bg: var(--color-success-bg, #f0fdf4);
+  --seki-toast-success-border: var(--color-success, #22c55e);
+  --seki-toast-success-text: var(--color-success-text, #166534);
+  --seki-toast-success-icon: var(--color-success, #22c55e);
+
+  /* Error variant */
+  --seki-toast-error-bg: var(--color-destructive-bg, #fef2f2);
+  --seki-toast-error-border: var(--color-destructive, #ef4444);
+  --seki-toast-error-text: var(--color-destructive-text, #991b1b);
+  --seki-toast-error-icon: var(--color-destructive, #ef4444);
+
+  /* Warning variant */
+  --seki-toast-warning-bg: var(--color-warning-bg, #fffbeb);
+  --seki-toast-warning-border: var(--color-warning, #f59e0b);
+  --seki-toast-warning-text: var(--color-warning-text, #92400e);
+  --seki-toast-warning-icon: var(--color-warning, #f59e0b);
+
+  /* Info variant */
+  --seki-toast-info-bg: var(--color-info-bg, #eff6ff);
+  --seki-toast-info-border: var(--color-info, #3b82f6);
+  --seki-toast-info-text: var(--color-info-text, #1e40af);
+  --seki-toast-info-icon: var(--color-info, #3b82f6);
+
+  /* Typography */
+  --seki-toast-font-family: var(--seki-font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  --seki-toast-message-font-size: var(--seki-font-size-sm, 0.875rem);
+  --seki-toast-message-font-weight: var(--seki-font-weight-medium, 500);
+  --seki-toast-desc-font-size: var(--seki-font-size-sm, 0.875rem);
+  --seki-toast-desc-font-weight: var(--seki-font-weight-normal, 400);
+
+  /* Animation */
+  --seki-toast-animation-duration: 200ms;
+  --seki-toast-animation-timing: cubic-bezier(0.16, 1, 0.3, 1);
+
+  display: block;
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+}
+
+/* Dark mode support */
+:host([data-theme='dark']) {
+  --seki-toast-default-bg: var(--color-background-dark, #1f2937);
+  --seki-toast-default-border: var(--color-border-dark, #374151);
+  --seki-toast-default-text: var(--color-foreground-dark, #f9fafb);
+
+  --seki-toast-success-bg: rgba(34, 197, 94, 0.1);
+  --seki-toast-success-border: var(--color-success-dark, #4ade80);
+  --seki-toast-success-text: var(--color-success-dark, #4ade80);
+  --seki-toast-success-icon: var(--color-success-dark, #4ade80);
+
+  --seki-toast-error-bg: rgba(239, 68, 68, 0.1);
+  --seki-toast-error-border: var(--color-destructive-dark, #f87171);
+  --seki-toast-error-text: var(--color-destructive-dark, #f87171);
+  --seki-toast-error-icon: var(--color-destructive-dark, #f87171);
+
+  --seki-toast-warning-bg: rgba(245, 158, 11, 0.1);
+  --seki-toast-warning-border: var(--color-warning-dark, #fbbf24);
+  --seki-toast-warning-text: var(--color-warning-dark, #fbbf24);
+  --seki-toast-warning-icon: var(--color-warning-dark, #fbbf24);
+
+  --seki-toast-info-bg: rgba(59, 130, 246, 0.1);
+  --seki-toast-info-border: var(--color-info-dark, #60a5fa);
+  --seki-toast-info-text: var(--color-info-dark, #60a5fa);
+  --seki-toast-info-icon: var(--color-info-dark, #60a5fa);
+
+  /* Action button colors for dark mode */
+  --seki-toast-action-bg: rgba(255, 255, 255, 0.1);
+  --seki-toast-action-bg-hover: rgba(255, 255, 255, 0.2);
+}
+
+/* Toaster container */
+.seki-toaster {
+  display: flex;
+  flex-direction: column;
+  gap: var(--seki-toaster-gap);
+  padding: var(--seki-toaster-padding);
+  max-height: 100vh;
+  overflow: hidden;
+}
+
+/* Position variants */
+.seki-toaster--top-left {
+  top: 0;
+  left: 0;
+  align-items: flex-start;
+}
+
+.seki-toaster--top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+}
+
+.seki-toaster--top-right {
+  top: 0;
+  right: 0;
+  align-items: flex-end;
+}
+
+.seki-toaster--bottom-left {
+  bottom: 0;
+  left: 0;
+  align-items: flex-start;
+  flex-direction: column-reverse;
+}
+
+.seki-toaster--bottom-center {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  align-items: center;
+  flex-direction: column-reverse;
+}
+
+.seki-toaster--bottom-right {
+  bottom: 0;
+  right: 0;
+  align-items: flex-end;
+  flex-direction: column-reverse;
+}
+
+/* Individual toast */
+.seki-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--seki-toast-gap);
+  width: var(--seki-toast-width);
+  max-width: calc(100vw - 2 * var(--seki-toaster-padding));
+  padding: var(--seki-toast-padding);
+  border-radius: var(--seki-toast-border-radius);
+  border: 1px solid;
+  box-shadow: var(--seki-toast-shadow);
+  font-family: var(--seki-toast-font-family);
+  pointer-events: auto;
+  animation: seki-toast-enter var(--seki-toast-animation-duration) var(--seki-toast-animation-timing);
+}
+
+/* Toast enter animation */
+@keyframes seki-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(10px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Default variant */
+.seki-toast--default {
+  background-color: var(--seki-toast-default-bg);
+  border-color: var(--seki-toast-default-border);
+  color: var(--seki-toast-default-text);
+}
+
+/* Success variant */
+.seki-toast--success {
+  background-color: var(--seki-toast-success-bg);
+  border-color: var(--seki-toast-success-border);
+  color: var(--seki-toast-success-text);
+}
+
+.seki-toast--success .seki-toast__icon {
+  color: var(--seki-toast-success-icon);
+}
+
+/* Error variant */
+.seki-toast--error {
+  background-color: var(--seki-toast-error-bg);
+  border-color: var(--seki-toast-error-border);
+  color: var(--seki-toast-error-text);
+}
+
+.seki-toast--error .seki-toast__icon {
+  color: var(--seki-toast-error-icon);
+}
+
+/* Warning variant */
+.seki-toast--warning {
+  background-color: var(--seki-toast-warning-bg);
+  border-color: var(--seki-toast-warning-border);
+  color: var(--seki-toast-warning-text);
+}
+
+.seki-toast--warning .seki-toast__icon {
+  color: var(--seki-toast-warning-icon);
+}
+
+/* Info variant */
+.seki-toast--info {
+  background-color: var(--seki-toast-info-bg);
+  border-color: var(--seki-toast-info-border);
+  color: var(--seki-toast-info-text);
+}
+
+.seki-toast--info .seki-toast__icon {
+  color: var(--seki-toast-info-icon);
+}
+
+/* Toast icon */
+.seki-toast__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.seki-toast__icon:empty {
+  display: none;
+}
+
+/* Toast content */
+.seki-toast__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.seki-toast__message {
+  font-size: var(--seki-toast-message-font-size);
+  font-weight: var(--seki-toast-message-font-weight);
+  line-height: var(--seki-line-height-tight, 1.25);
+}
+
+.seki-toast__description {
+  margin-top: 0.25rem;
+  font-size: var(--seki-toast-desc-font-size);
+  font-weight: var(--seki-toast-desc-font-weight);
+  line-height: var(--seki-line-height-tight, 1.25);
+  opacity: 0.8;
+}
+
+/* Toast actions */
+.seki-toast__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+}
+
+.seki-toast__action-btn {
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: var(--seki-radius-md, 0.375rem);
+  background-color: var(--seki-toast-action-bg, rgba(0, 0, 0, 0.1));
+  color: inherit;
+  font-size: var(--seki-font-size-sm, 0.875rem);
+  font-weight: var(--seki-font-weight-medium, 500);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+.seki-toast__action-btn:hover {
+  background-color: var(--seki-toast-action-bg-hover, rgba(0, 0, 0, 0.15));
+}
+
+.seki-toast__action-btn:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.seki-toast__dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--seki-radius-sm, 0.25rem);
+  background: transparent;
+  color: inherit;
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity 150ms ease;
+}
+
+.seki-toast__dismiss:hover {
+  opacity: 1;
+}
+
+.seki-toast__dismiss:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+  opacity: 1;
+}
+
+/* Accessibility: High contrast mode */
+@media (prefers-contrast: more) {
+  .seki-toast {
+    border-width: 2px;
+  }
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .seki-toast {
+    animation: none;
+  }
+}

package/dist/collection/components/toast/seki-toaster.js

@@ -0,0 +1,231 @@
+import { h } from "@stencil/core";
+/**
+ * Toaster component that manages and displays toast notifications.
+ * Place this component once in your app layout.
+ *
+ * @example
+ * <seki-toaster position="bottom-right"></seki-toaster>
+ *
+ * // Trigger toasts via custom events:
+ * document.dispatchEvent(new CustomEvent('seki-toast', {
+ *   detail: { message: 'Hello!', type: 'success' }
+ * }));
+ */
+export class SekiToaster {
+    constructor() {
+        /**
+         * Position of the toast container
+         * @default 'bottom-right'
+         */
+        this.position = 'bottom-right';
+        /**
+         * Default duration in milliseconds before auto-dismiss
+         * @default 4000
+         */
+        this.duration = 4000;
+        /**
+         * Maximum number of visible toasts
+         * @default 5
+         */
+        this.maxToasts = 5;
+        this.toasts = [];
+        this.timers = new Map();
+    }
+    handleToastEvent(event) {
+        this.addToast(event.detail);
+    }
+    generateId() {
+        return `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    }
+    addToast(data) {
+        var _a;
+        const toast = {
+            id: this.generateId(),
+            message: data.message,
+            type: data.type || 'default',
+            duration: (_a = data.duration) !== null && _a !== void 0 ? _a : this.duration,
+            description: data.description,
+            action: data.action,
+        };
+        // Add to list, respecting maxToasts
+        this.toasts = [...this.toasts, toast].slice(-this.maxToasts);
+        // Set auto-dismiss timer
+        if (toast.duration > 0) {
+            const timer = setTimeout(() => {
+                this.removeToast(toast.id);
+            }, toast.duration);
+            this.timers.set(toast.id, timer);
+        }
+    }
+    removeToast(id) {
+        // Clear timer if exists
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+        this.toasts = this.toasts.filter((t) => t.id !== id);
+    }
+    handleMouseEnter(id) {
+        // Pause auto-dismiss on hover
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+    }
+    handleMouseLeave(toast) {
+        // Resume auto-dismiss on mouse leave
+        if (toast.duration > 0) {
+            const timer = setTimeout(() => {
+                this.removeToast(toast.id);
+            }, toast.duration);
+            this.timers.set(toast.id, timer);
+        }
+    }
+    handleDismiss(id) {
+        this.removeToast(id);
+    }
+    handleActionClick(toast) {
+        var _a;
+        if ((_a = toast.action) === null || _a === void 0 ? void 0 : _a.onClick) {
+            toast.action.onClick();
+        }
+        this.removeToast(toast.id);
+    }
+    disconnectedCallback() {
+        // Clean up all timers
+        this.timers.forEach((timer) => clearTimeout(timer));
+        this.timers.clear();
+    }
+    render() {
+        const positionClasses = {
+            'seki-toaster': true,
+            [`seki-toaster--${this.position}`]: true,
+        };
+        return (h("div", { key: 'bf06182915f403300b2ee08fc0a7d20bb6a812c5', class: positionClasses, role: "region", "aria-label": "Notifications", "aria-live": "polite" }, this.toasts.map((toast) => (h("div", { key: toast.id, class: {
+                'seki-toast': true,
+                [`seki-toast--${toast.type}`]: true,
+            }, role: "alert", "aria-atomic": "true", onMouseEnter: () => this.handleMouseEnter(toast.id), onMouseLeave: () => this.handleMouseLeave(toast) }, h("div", { class: "seki-toast__icon" }, this.renderIcon(toast.type)), h("div", { class: "seki-toast__content" }, h("div", { class: "seki-toast__message" }, toast.message), toast.description && (h("div", { class: "seki-toast__description" }, toast.description))), h("div", { class: "seki-toast__actions" }, toast.action && (h("button", { class: "seki-toast__action-btn", onClick: () => this.handleActionClick(toast) }, toast.action.label)), h("button", { class: "seki-toast__dismiss", "aria-label": "Dismiss notification", onClick: () => this.handleDismiss(toast.id) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))))))));
+    }
+    renderIcon(type) {
+        switch (type) {
+            case 'success':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), h("polyline", { points: "22 4 12 14.01 9 11.01" })));
+            case 'error':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polygon", { points: "7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" }), h("line", { x1: "12", y1: "8", x2: "12", y2: "12" }), h("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })));
+            case 'warning':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), h("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), h("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })));
+            case 'info':
+                return (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { cx: "12", cy: "12", r: "10" }), h("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), h("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })));
+            default:
+                return null;
+        }
+    }
+    static get is() { return "seki-toaster"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastPosition",
+                    "resolved": "\"bottom-center\" | \"bottom-left\" | \"bottom-right\" | \"top-center\" | \"top-left\" | \"top-right\"",
+                    "references": {
+                        "ToastPosition": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/toast/seki-toaster.tsx",
+                            "id": "src/components/toast/seki-toaster.tsx::ToastPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom-right'"
+                        }],
+                    "text": "Position of the toast container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'bottom-right'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "4000"
+                        }],
+                    "text": "Default duration in milliseconds before auto-dismiss"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "4000"
+            },
+            "maxToasts": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "5"
+                        }],
+                    "text": "Maximum number of visible toasts"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-toasts",
+                "defaultValue": "5"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "toasts": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "seki-toast",
+                "method": "handleToastEvent",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/toast/toast.js

@@ -0,0 +1,70 @@
+/**
+ * Toast utility for triggering toast notifications.
+ *
+ * @example
+ * import { toast } from '@sekiui/elements';
+ *
+ * // Basic usage
+ * toast('Hello world!');
+ *
+ * // With type
+ * toast.success('Event created!');
+ * toast.error('Something went wrong');
+ * toast.warning('Please review your input');
+ * toast.info('New version available');
+ *
+ * // With options
+ * toast('Custom toast', {
+ *   description: 'This is a description',
+ *   duration: 5000,
+ *   action: {
+ *     label: 'Undo',
+ *     onClick: () => console.log('Undo clicked')
+ *   }
+ * });
+ */
+function dispatchToast(message, options = {}) {
+    const event = new CustomEvent('seki-toast', {
+        detail: {
+            message,
+            type: options.type || 'default',
+            description: options.description,
+            duration: options.duration,
+            action: options.action,
+        },
+        bubbles: true,
+        composed: true,
+    });
+    document.dispatchEvent(event);
+}
+/**
+ * Show a toast notification
+ */
+function toast(message, options) {
+    dispatchToast(message, options);
+}
+/**
+ * Show a success toast
+ */
+toast.success = (message, options) => {
+    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'success' }));
+};
+/**
+ * Show an error toast
+ */
+toast.error = (message, options) => {
+    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'error' }));
+};
+/**
+ * Show a warning toast
+ */
+toast.warning = (message, options) => {
+    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'warning' }));
+};
+/**
+ * Show an info toast
+ */
+toast.info = (message, options) => {
+    dispatchToast(message, Object.assign(Object.assign({}, options), { type: 'info' }));
+};
+export { toast };