react-restyle-components 0.4.39 → 0.4.41

package/lib/src/core-components/src/components/Tags1/Tags.component.js

@@ -1 +1,118 @@
-"use strict";import{jsxs as u,jsx as g}from"react/jsx-runtime";import{useState as h,useRef as q}from"react";import e from"../../tc.module.css";import{cn as n}from"../../utils";export const Tags=({defaultTags:L=[],placeholder:N="Type and press Enter to add tags...",maxTags:a,disabled:c=!1,className:R="",label:w,hasError:d=!1,errorMessage:x,removable:v=!0,tagVariant:D="default",size:m="md",classNames:l={},styles:o={},onChange:B,onBlur:F,onTagAdd:I,onTagRemove:V})=>{const[r,k]=h(L),[p,f]=h(""),[_,C]=h(!1),b=q(null),$={default:e["bg-gray-100"]+" "+e["text-gray-800"]+" "+e["border-gray-200"],primary:e["bg-blue-100"]+" "+e["text-blue-800"]+" "+e["border-blue-200"],secondary:e["bg-gray-100"]+" "+e["text-gray-700"]+" "+e["border-gray-300"],success:e["bg-green-100"]+" "+e["text-green-800"]+" "+e["border-green-200"],warning:e["bg-yellow-100"]+" "+e["text-yellow-800"]+" "+e["border-yellow-200"],danger:e["bg-red-100"]+" "+e["text-red-800"]+" "+e["border-red-200"]},y={sm:{tag:e["text-xs"]+" "+e["px-2"]+" "+e["py-1"],input:e["text-sm"]+" "+e["p-2"],removeBtn:e["w-3"]+" "+e["h-3"]},md:{tag:e["text-sm"]+" "+e["px-3"]+" "+e["py-1"],input:e["text-base"]+" "+e["p-3"],removeBtn:e["w-4"]+" "+e["h-4"]},lg:{tag:e["text-base"]+" "+e["px-4"]+" "+e["py-2"],input:e["text-lg"]+" "+e["p-4"],removeBtn:e["w-5"]+" "+e["h-5"]}},j=t=>{const i=t.trim();if(!i)return;if(r.includes(i)){f("");return}if(a&&r.length>=a){f("");return}const s=[...r,i];k(s),f(""),B?.(s),I?.(i)},T=t=>{if(!v)return;const i=r[t],s=r.filter((z,A)=>A!==t);k(s),B?.(s),V?.(i,t)},K=t=>{t.key==="Enter"?(t.preventDefault(),j(p)):t.key==="Backspace"&&!p&&r.length>0?T(r.length-1):t.key==="Escape"&&(f(""),b.current?.blur())},P=()=>{C(!1),p.trim()&&j(p),F?.(r)},S=()=>{c||b.current?.focus()};return u("div",{className:n(e.flex,e["flex-col"],e["w-full"],R,l.container),style:o.container,children:[w&&u("label",{className:n(e["text-sm"],e["font-medium"],e["mb-2"],d?e["text-red-600"]:e["text-gray-700"],l.label),style:o.label,children:[w,a&&u("span",{className:n(e["text-xs"],e["text-gray-500"],e["ml-2"]),children:["(",r.length,"/",a,")"]})]}),u("div",{onClick:S,className:n(e["min-h-10"],e["w-full"],e.border,e["rounded-md"],e["bg-white"],e.flex,e["flex-wrap"],e["gap-2"],e["p-2"],e["cursor-text"],e["transition-colors"],_&&!d&&e["border-blue-500"]+" "+e["ring-1"]+" "+e["ring-blue-500"],d?e["border-red"]:e["border-gray-300"],c&&e["bg-gray-50"]+" "+e["cursor-not-allowed"],!c&&e["hover:border-gray-400"],l.tagsContainer),style:o.tagsContainer,children:[r.map((t,i)=>u("span",{className:n(e.flex,e["inline-flex"],e["items-center"],e.border,e["rounded-full"],e["font-medium"],e["transition-colors"],e["items-center"],y[m].tag,$[D],c&&e["opacity-60"],l.tag),style:o.tag,children:[g("span",{className:n(e.truncate,e["max-w-32"],l.tagText),style:o.tagText,children:t}),v&&!c&&g("button",{type:"button",onClick:s=>{s.stopPropagation(),T(i)},className:n(e["ml-2"],e["flex-shrink-0"],e["rounded-full"],e["hover:bg-black"],e["hover:bg-opacity-10"],e["transition-colors"],e["focus:outline-none"],e["focus:ring-2"],e["focus:ring-offset-1"],e["focus:ring-gray-500"],l.removeButton),style:o.removeButton,"aria-label":`Remove ${t} tag`,children:g("svg",{className:n(y[m].removeBtn),fill:"currentColor",viewBox:"0 0 20 20",children:g("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})})]},`${t}-${i}`)),(!a||r.length<a)&&g("input",{ref:b,type:"text",value:p,onChange:t=>f(t.target.value),onKeyDown:K,onFocus:()=>C(!0),onBlur:P,placeholder:r.length===0?N:"",disabled:c,className:n(e["flex-1"],e["min-w-32"],e["border-0"],e["outline-none"],e["bg-transparent"],y[m].input.replace(e["p-3"],e["p-1"]),c&&e["cursor-not-allowed"],l.input),style:o.input,"aria-label":"Add new tag"})]}),(x||a)&&u("div",{className:n(e["mt-1"],e.flex,e["justify-between"],e["text-xs"],l.helperText),style:o.helperText,children:[x&&d&&g("span",{className:n(e["text-red-600"],l.errorMessage),style:o.errorMessage,children:x}),a&&!d&&u("span",{className:n(e["text-gray-500"],e["ml-auto"]),children:[r.length,"/",a," tags"]})]}),!d&&!x&&g("p",{className:n(e["mt-1"],e["text-xs"],e["text-gray-500"],l.helperText),style:o.helperText,children:"Press Enter to add tags, Backspace to remove last tag"})]})};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef } from 'react';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+export const Tags = ({ defaultTags = [], placeholder = 'Type and press Enter to add tags...', maxTags, disabled = false, className = '', label, hasError = false, errorMessage, removable = true, tagVariant = 'default', size = 'md', classNames = {}, styles = {}, onChange, onBlur, onTagAdd, onTagRemove, }) => {
+    const [tags, setTags] = useState(defaultTags);
+    const [inputValue, setInputValue] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+    const inputRef = useRef(null);
+    // Tag variant styles
+    const tagVariants = {
+        default: s['bg-gray-100'] + ' ' + s['text-gray-800'] + ' ' + s['border-gray-200'],
+        primary: s['bg-blue-100'] + ' ' + s['text-blue-800'] + ' ' + s['border-blue-200'],
+        secondary: s['bg-gray-100'] + ' ' + s['text-gray-700'] + ' ' + s['border-gray-300'],
+        success: s['bg-green-100'] +
+            ' ' +
+            s['text-green-800'] +
+            ' ' +
+            s['border-green-200'],
+        warning: s['bg-yellow-100'] +
+            ' ' +
+            s['text-yellow-800'] +
+            ' ' +
+            s['border-yellow-200'],
+        danger: s['bg-red-100'] + ' ' + s['text-red-800'] + ' ' + s['border-red-200'],
+    };
+    // Size styles
+    const sizeStyles = {
+        sm: {
+            tag: s['text-xs'] + ' ' + s['px-2'] + ' ' + s['py-1'],
+            input: s['text-sm'] + ' ' + s['p-2'],
+            removeBtn: s['w-3'] + ' ' + s['h-3'],
+        },
+        md: {
+            tag: s['text-sm'] + ' ' + s['px-3'] + ' ' + s['py-1'],
+            input: s['text-base'] + ' ' + s['p-3'],
+            removeBtn: s['w-4'] + ' ' + s['h-4'],
+        },
+        lg: {
+            tag: s['text-base'] + ' ' + s['px-4'] + ' ' + s['py-2'],
+            input: s['text-lg'] + ' ' + s['p-4'],
+            removeBtn: s['w-5'] + ' ' + s['h-5'],
+        },
+    };
+    const addTag = (tag) => {
+        const trimmedTag = tag.trim();
+        if (!trimmedTag)
+            return;
+        // Check if tag already exists
+        if (tags.includes(trimmedTag)) {
+            setInputValue('');
+            return;
+        }
+        // Check max tags limit
+        if (maxTags && tags.length >= maxTags) {
+            setInputValue('');
+            return;
+        }
+        const newTags = [...tags, trimmedTag];
+        setTags(newTags);
+        setInputValue('');
+        // Callbacks
+        onChange?.(newTags);
+        onTagAdd?.(trimmedTag);
+    };
+    const removeTag = (indexToRemove) => {
+        if (!removable)
+            return;
+        const tagToRemove = tags[indexToRemove];
+        const newTags = tags.filter((_, index) => index !== indexToRemove);
+        setTags(newTags);
+        // Callbacks
+        onChange?.(newTags);
+        onTagRemove?.(tagToRemove, indexToRemove);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            addTag(inputValue);
+        }
+        else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+            // Remove last tag when backspace is pressed on empty input
+            removeTag(tags.length - 1);
+        }
+        else if (e.key === 'Escape') {
+            setInputValue('');
+            inputRef.current?.blur();
+        }
+    };
+    const handleInputBlur = () => {
+        setIsFocused(false);
+        // Add current input as tag if not empty
+        if (inputValue.trim()) {
+            addTag(inputValue);
+        }
+        onBlur?.(tags);
+    };
+    const handleContainerClick = () => {
+        if (!disabled) {
+            inputRef.current?.focus();
+        }
+    };
+    return (_jsxs("div", { className: cn(s.flex, s['flex-col'], s['w-full'], className, classNames.container), style: styles.container, children: [label && (_jsxs("label", { className: cn(s['text-sm'], s['font-medium'], s['mb-2'], hasError ? s['text-red-600'] : s['text-gray-700'], classNames.label), style: styles.label, children: [label, maxTags && (_jsxs("span", { className: cn(s['text-xs'], s['text-gray-500'], s['ml-2']), children: ["(", tags.length, "/", maxTags, ")"] }))] })), _jsxs("div", { onClick: handleContainerClick, className: cn(s['min-h-10'], s['w-full'], s['border'], s['rounded-md'], s['bg-white'], s['flex'], s['flex-wrap'], s['gap-2'], s['p-2'], s['cursor-text'], s['transition-colors'], 
+                // Focus styles
+                isFocused &&
+                    !hasError &&
+                    s['border-blue-500'] + ' ' + s['ring-1'] + ' ' + s['ring-blue-500'], 
+                // Error styles
+                hasError ? s['border-red'] : s['border-gray-300'], 
+                // Disabled styles
+                disabled && s['bg-gray-50'] + ' ' + s['cursor-not-allowed'], 
+                // Hover styles
+                !disabled && s['hover:border-gray-400'], classNames.tagsContainer), style: styles.tagsContainer, children: [tags.map((tag, index) => (_jsxs("span", { className: cn(s['flex'], s['inline-flex'], s['items-center'], s['border'], s['rounded-full'], s['font-medium'], s['transition-colors'], s['items-center'], sizeStyles[size].tag, tagVariants[tagVariant], disabled && s['opacity-60'], classNames.tag), style: styles.tag, children: [_jsx("span", { className: cn(s['truncate'], s['max-w-32'], classNames.tagText), style: styles.tagText, children: tag }), removable && !disabled && (_jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    removeTag(index);
+                                }, className: cn(s['ml-2'], s['flex-shrink-0'], s['rounded-full'], s['hover:bg-black'], s['hover:bg-opacity-10'], s['transition-colors'], s['focus:outline-none'], s['focus:ring-2'], s['focus:ring-offset-1'], s['focus:ring-gray-500'], classNames.removeButton), style: styles.removeButton, "aria-label": `Remove ${tag} tag`, children: _jsx("svg", { className: cn(sizeStyles[size].removeBtn), fill: "currentColor", viewBox: "0 0 20 20", children: _jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) }) }))] }, `${tag}-${index}`))), (!maxTags || tags.length < maxTags) && (_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, onFocus: () => setIsFocused(true), onBlur: handleInputBlur, placeholder: tags.length === 0 ? placeholder : '', disabled: disabled, className: cn(s['flex-1'], s['min-w-32'], s['border-0'], s['outline-none'], s['bg-transparent'], sizeStyles[size].input.replace(s['p-3'], s['p-1']), // Adjust padding for input inside container
+                        disabled && s['cursor-not-allowed'], classNames.input), style: styles.input, "aria-label": "Add new tag" }))] }), (errorMessage || maxTags) && (_jsxs("div", { className: cn(s['mt-1'], s['flex'], s['justify-between'], s['text-xs'], classNames.helperText), style: styles.helperText, children: [errorMessage && hasError && (_jsx("span", { className: cn(s['text-red-600'], classNames.errorMessage), style: styles.errorMessage, children: errorMessage })), maxTags && !hasError && (_jsxs("span", { className: cn(s['text-gray-500'], s['ml-auto']), children: [tags.length, "/", maxTags, " tags"] }))] })), !hasError && !errorMessage && (_jsx("p", { className: cn(s['mt-1'], s['text-xs'], s['text-gray-500'], classNames.helperText), style: styles.helperText, children: "Press Enter to add tags, Backspace to remove last tag" }))] }));
+};

package/lib/src/core-components/src/components/Tags1/types.js

@@ -1 +1,20 @@
-"use strict";export const TAG_TYPES=["light","gray","dark","success","warn","error","update","attention","disabled","red","orange","yellow","green","teal","purple","themeable"],TAG_SIZES=["large","regular","small"],TAG_FAMILIES=["bold","soft"];
+export const TAG_TYPES = [
+    'light',
+    'gray',
+    'dark',
+    'success',
+    'warn',
+    'error',
+    'update',
+    'attention',
+    'disabled',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'teal',
+    'purple',
+    'themeable',
+];
+export const TAG_SIZES = ['large', 'regular', 'small'];
+export const TAG_FAMILIES = ['bold', 'soft'];

package/lib/src/core-components/src/components/Timer1/timer.component.js

@@ -1 +1,76 @@
-"use strict";import{jsx as p,jsxs as f}from"react/jsx-runtime";import v,{useEffect as x,useState as d,useImperativeHandle as h}from"react";import{Icon as S}from"../Icon/Icon";import s from"../../tc.module.css";import{cn as I}from"../../utils";export const Timer=v.forwardRef(({onClear:i},u)=>{const[a,r]=d("00"),[m,e]=d("10");return x(()=>{const n=parseInt(m),c=parseInt(a),o=setInterval(()=>{if(c===0&&n===0)r("00"),e("00"),clearInterval(o),i&&i();else{let t=(n-1).toString();if(t.length===1&&(t="0".concat(t)),e(t),n===0){e("59");const l=(c-1).toString();r("0"+l)}}},1e3);return()=>{clearInterval(o)}}),h(u,()=>({updateState(){r("02"),e("00")},resetTimer(){const n=parseInt(m),c=parseInt(a==="00"?"02":a),o=setInterval(()=>{if(c===0&&n===0)r("00"),e("00"),clearInterval(o),i&&i();else{let t=(n-1).toString();if(t.length===1&&(t="0".concat(t)),e(t),n===0){e("59");const l=(c-1).toString();r("0"+l)}}},1e3);return()=>{clearInterval(o)}}})),f("div",{className:I(s.flex,s["flex-row"],s["items-center"]),children:[p(S,{nameIcon:"MdAvTimer"}),f("div",{className:I(s["ml-2"],s.flex,s["flex-row"]),children:[f("span",{children:[a,":"]}),p("span",{children:m})]})]})});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react/prop-types */
+/* eslint-disable @typescript-eslint/no-unused-expressions */
+import React, { useEffect, useState, useImperativeHandle } from 'react';
+import { Icon } from '../Icon/Icon';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+// eslint-disable-next-line react/display-name
+export const Timer = React.forwardRef(({ onClear }, ref) => {
+    const width = 15;
+    const [minute, setMinute] = useState('00');
+    const [second, setSecond] = useState('10');
+    useEffect(() => {
+        const sec = parseInt(second);
+        const min = parseInt(minute);
+        const countDown = setInterval(() => {
+            if (min === 0 && sec === 0) {
+                setMinute('00');
+                setSecond('00');
+                clearInterval(countDown);
+                onClear && onClear();
+            }
+            else {
+                let secondstTmp = (sec - 1).toString();
+                if (secondstTmp.length === 1) {
+                    secondstTmp = '0'.concat(secondstTmp);
+                }
+                setSecond(secondstTmp);
+                if (sec === 0) {
+                    setSecond('59');
+                    const m = (min - 1).toString();
+                    setMinute('0' + m);
+                }
+            }
+        }, 1000);
+        return () => {
+            clearInterval(countDown);
+        };
+    });
+    useImperativeHandle(ref, () => ({
+        updateState() {
+            setMinute('02');
+            setSecond('00');
+        },
+        resetTimer() {
+            // eslint-disable-next-line no-console
+            const sec = parseInt(second);
+            const min = parseInt(minute === '00' ? '02' : minute);
+            const countDown = setInterval(() => {
+                // eslint-disable-next-line no-console
+                if (min === 0 && sec === 0) {
+                    setMinute('00');
+                    setSecond('00');
+                    clearInterval(countDown);
+                    onClear && onClear();
+                }
+                else {
+                    let secondstTmp = (sec - 1).toString();
+                    if (secondstTmp.length === 1) {
+                        secondstTmp = '0'.concat(secondstTmp);
+                    }
+                    setSecond(secondstTmp);
+                    if (sec === 0) {
+                        setSecond('59');
+                        const m = (min - 1).toString();
+                        setMinute('0' + m);
+                    }
+                }
+            }, 1000);
+            return () => {
+                clearInterval(countDown);
+            };
+        },
+    }));
+    return (_jsxs("div", { className: cn(s['flex'], s['flex-row'], s['items-center']), children: [_jsx(Icon, { nameIcon: "MdAvTimer" }), _jsxs("div", { className: cn(s['ml-2'], s['flex'], s['flex-row']), children: [_jsxs("span", { children: [minute, ":"] }), _jsx("span", { children: second })] })] }));
+});

package/lib/src/core-components/src/components/Toast/Toast.js

@@ -1 +1,50 @@
-"use strict";"use client";import{jsx as e,jsxs as n}from"react/jsx-runtime";import{forwardRef as p,useEffect as w,useCallback as x}from"react";import{ToastElement as I,ToastContainerElement as T,IconWrapper as $,ContentWrapper as W,Message as B,ActionsWrapper as b,ActionButton as j,DismissButton as E,ProgressBar as N}from"./elements";const A=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("path",{d:"M22 11.08V12a10 10 0 1 1-5.93-9.14"}),e("polyline",{points:"22 4 12 14.01 9 11.01"})]}),D=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("line",{x1:"15",y1:"9",x2:"9",y2:"15"}),e("line",{x1:"9",y1:"9",x2:"15",y2:"15"})]}),L=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("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"}),e("line",{x1:"12",y1:"9",x2:"12",y2:"13"}),e("line",{x1:"12",y1:"17",x2:"12.01",y2:"17"})]}),M=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("circle",{cx:"12",cy:"12",r:"10"}),e("line",{x1:"12",y1:"16",x2:"12",y2:"12"}),e("line",{x1:"12",y1:"8",x2:"12.01",y2:"8"})]}),O=()=>n("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]}),P=a=>{switch(a){case"success":return e(A,{});case"error":return e(D,{});case"warning":return e(L,{});case"info":return e(M,{});default:return null}};export const Toast=p(function(c,l){const{message:u,type:t="default",isOpen:s=!0,onClose:o,action:r,icon:h,showIcon:y=!0,duration:i,showProgress:f=!1,className:m,...C}=c;w(()=>{if(i&&s&&o){const v=setTimeout(()=>{o()},i);return()=>clearTimeout(v)}},[i,s,o]);const g=x(()=>{o?.()},[o]),k=x(()=>{r?.onClick?.()},[r]),d=h??(y?P(t):null);return n(I,{ref:l,$type:t,$isOpen:s,$position:"bottom-right",role:"alert","aria-live":"assertive","data-aui":"toast",className:m,...C,children:[d&&e($,{$type:t,"aria-hidden":"true",children:d}),e(W,{children:e(B,{children:u})}),n(b,{children:[r&&e(j,{$type:t,onClick:k,"aria-label":r.ariaLabel||r.text,children:r.text}),o&&e(E,{$type:t,onClick:g,"aria-label":"Dismiss",children:e(O,{})})]}),f&&i&&e(N,{$type:t,$duration:i})]})});Toast.displayName="Toast";export const ToastContainer=p(function(c,l){const{position:u="bottom-right",children:t,gap:s="8px",...o}=c;return e(T,{ref:l,$position:u,$gap:s,"data-aui":"toast-container",...o,children:t})});ToastContainer.displayName="ToastContainer";
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useCallback } from 'react';
+import { ToastElement, ToastContainerElement, IconWrapper, ContentWrapper, Message, ActionsWrapper, ActionButton, DismissButton, ProgressBar, } from './elements';
+// Default icons
+const SuccessIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), _jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] }));
+const ErrorIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }), _jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })] }));
+const WarningIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("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" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }));
+const InfoIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }), _jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })] }));
+const CloseIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), _jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }));
+const getDefaultIcon = (type) => {
+    switch (type) {
+        case 'success':
+            return _jsx(SuccessIcon, {});
+        case 'error':
+            return _jsx(ErrorIcon, {});
+        case 'warning':
+            return _jsx(WarningIcon, {});
+        case 'info':
+            return _jsx(InfoIcon, {});
+        default:
+            return null;
+    }
+};
+export const Toast = forwardRef(function ToastComponent(props, ref) {
+    const { message, type = 'default', isOpen = true, onClose, action, icon, showIcon = true, duration, showProgress = false, className, ...rest } = props;
+    // Auto dismiss
+    useEffect(() => {
+        if (duration && isOpen && onClose) {
+            const timer = setTimeout(() => {
+                onClose();
+            }, duration);
+            return () => clearTimeout(timer);
+        }
+    }, [duration, isOpen, onClose]);
+    const handleClose = useCallback(() => {
+        onClose?.();
+    }, [onClose]);
+    const handleAction = useCallback(() => {
+        action?.onClick?.();
+    }, [action]);
+    const displayIcon = icon ?? (showIcon ? getDefaultIcon(type) : null);
+    return (_jsxs(ToastElement, { ref: ref, "$type": type, "$isOpen": isOpen, "$position": "bottom-right", role: "alert", "aria-live": "assertive", "data-aui": "toast", className: className, ...rest, children: [displayIcon && (_jsx(IconWrapper, { "$type": type, "aria-hidden": "true", children: displayIcon })), _jsx(ContentWrapper, { children: _jsx(Message, { children: message }) }), _jsxs(ActionsWrapper, { children: [action && (_jsx(ActionButton, { "$type": type, onClick: handleAction, "aria-label": action.ariaLabel || action.text, children: action.text })), onClose && (_jsx(DismissButton, { "$type": type, onClick: handleClose, "aria-label": "Dismiss", children: _jsx(CloseIcon, {}) }))] }), showProgress && duration && (_jsx(ProgressBar, { "$type": type, "$duration": duration }))] }));
+});
+Toast.displayName = 'Toast';
+export const ToastContainer = forwardRef(function ToastContainerComponent(props, ref) {
+    const { position = 'bottom-right', children, gap = '8px', ...rest } = props;
+    return (_jsx(ToastContainerElement, { ref: ref, "$position": position, "$gap": gap, "data-aui": "toast-container", ...rest, children: children }));
+});
+ToastContainer.displayName = 'ToastContainer';

package/lib/src/core-components/src/components/Toast/elements.js

@@ -1,4 +1,8 @@
-"use strict";import{styled as e,css as n,keyframes as i}from"styled-components";import{tokens as r}from"../../utils/designTokens";import{breakpoints as s}from"../../utils/abstracts";const a=i`
+import { styled, css, keyframes } from 'styled-components';
+import { tokens } from '../../utils/designTokens';
+import { breakpoints } from '../../utils/abstracts';
+// Animations
+const slideInRight = keyframes `
   from {
     transform: translateX(100%);
     opacity: 0;
@@ -7,7 +11,8 @@
     transform: translateX(0);
     opacity: 1;
   }
-`,c=i`
+`;
+const slideInLeft = keyframes `
   from {
     transform: translateX(-100%);
     opacity: 0;
@@ -16,7 +21,8 @@
     transform: translateX(0);
     opacity: 1;
   }
-`,f=i`
+`;
+const slideInUp = keyframes `
   from {
     transform: translateY(100%);
     opacity: 0;
@@ -25,7 +31,8 @@
     transform: translateY(0);
     opacity: 1;
   }
-`,l=i`
+`;
+const slideInDown = keyframes `
   from {
     transform: translateY(-100%);
     opacity: 0;
@@ -34,109 +41,181 @@
     transform: translateY(0);
     opacity: 1;
   }
-`,p=i`
+`;
+const progressShrink = keyframes `
   from {
     width: 100%;
   }
   to {
     width: 0%;
   }
-`,o={default:{bg:"#1f2937",border:"#374151",text:"#f9fafb",icon:"#9ca3af",accent:r.primary||"#454cbf"},success:{bg:"#065f46",border:"#10b981",text:"#ecfdf5",icon:"#10b981",accent:"#10b981"},error:{bg:"#991b1b",border:"#ef4444",text:"#fef2f2",icon:"#ef4444",accent:"#ef4444"},warning:{bg:"#92400e",border:"#f59e0b",text:"#fffbeb",icon:"#f59e0b",accent:"#f59e0b"},info:{bg:"#1e40af",border:"#3b82f6",text:"#e7f3ff",icon:"#3b82f6",accent:"#3b82f6"}},d=t=>{switch(t){case"top-left":return n`
+`;
+// Type styles
+const typeStyles = {
+    default: {
+        bg: '#1f2937',
+        border: '#374151',
+        text: '#f9fafb',
+        icon: '#9ca3af',
+        accent: tokens.primary || '#454cbf',
+    },
+    success: {
+        bg: '#065f46',
+        border: '#10b981',
+        text: '#ecfdf5',
+        icon: '#10b981',
+        accent: '#10b981',
+    },
+    error: {
+        bg: '#991b1b',
+        border: '#ef4444',
+        text: '#fef2f2',
+        icon: '#ef4444',
+        accent: '#ef4444',
+    },
+    warning: {
+        bg: '#92400e',
+        border: '#f59e0b',
+        text: '#fffbeb',
+        icon: '#f59e0b',
+        accent: '#f59e0b',
+    },
+    info: {
+        bg: '#1e40af',
+        border: '#3b82f6',
+        text: '#e7f3ff',
+        icon: '#3b82f6',
+        accent: '#3b82f6',
+    },
+};
+const getPositionStyles = (position) => {
+    switch (position) {
+        case 'top-left':
+            return css `
         top: 1rem;
         left: 1rem;
         align-items: flex-start;
-      `;case"top-center":return n`
+      `;
+        case 'top-center':
+            return css `
         top: 1rem;
         left: 50%;
         transform: translateX(-50%);
         align-items: center;
-      `;case"top-right":return n`
+      `;
+        case 'top-right':
+            return css `
         top: 1rem;
         right: 1rem;
         align-items: flex-end;
-      `;case"bottom-left":return n`
+      `;
+        case 'bottom-left':
+            return css `
         bottom: 1rem;
         left: 1rem;
         align-items: flex-start;
-      `;case"bottom-center":return n`
+      `;
+        case 'bottom-center':
+            return css `
         bottom: 1rem;
         left: 50%;
         transform: translateX(-50%);
         align-items: center;
-      `;default:return n`
+      `;
+        case 'bottom-right':
+        default:
+            return css `
         bottom: 1rem;
         right: 1rem;
         align-items: flex-end;
-      `}},m=t=>t.includes("left")?c:t.includes("right")?a:t.includes("top")?l:f;export const ToastContainerElement=e.div`
+      `;
+    }
+};
+const getAnimation = (position) => {
+    if (position.includes('left'))
+        return slideInLeft;
+    if (position.includes('right'))
+        return slideInRight;
+    if (position.includes('top'))
+        return slideInDown;
+    return slideInUp;
+};
+export const ToastContainerElement = styled.div `
   position: fixed;
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  gap: ${({$gap:t})=>t};
+  gap: ${({ $gap }) => $gap};
   pointer-events: none;
   
-  ${({$position:t})=>d(t)}
+  ${({ $position }) => getPositionStyles($position)}
   
-  ${s.xs} {
+  ${breakpoints.xs} {
     left: 1rem;
     right: 1rem;
     transform: none;
     align-items: stretch;
   }
-`,ToastElement=e.div`
-  display: ${({$isOpen:t})=>t?"flex":"none"};
+`;
+export const ToastElement = styled.div `
+  display: ${({ $isOpen }) => ($isOpen ? 'flex' : 'none')};
   align-items: flex-start;
-  gap: ${r.spacing150||"0.75rem"};
+  gap: ${tokens.spacing150 || '0.75rem'};
   min-width: 280px;
   max-width: 420px;
-  padding: ${r.spacing150||"0.75rem"} ${r.spacing200||"1rem"};
-  background: ${({$type:t})=>o[t].bg};
-  border: 1px solid ${({$type:t})=>o[t].border};
-  border-radius: ${r.borderRadius100||"8px"};
-  color: ${({$type:t})=>o[t].text};
+  padding: ${tokens.spacing150 || '0.75rem'} ${tokens.spacing200 || '1rem'};
+  background: ${({ $type }) => typeStyles[$type].bg};
+  border: 1px solid ${({ $type }) => typeStyles[$type].border};
+  border-radius: ${tokens.borderRadius100 || '8px'};
+  color: ${({ $type }) => typeStyles[$type].text};
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1);
   pointer-events: auto;
   overflow: hidden;
   position: relative;
   
-  animation: ${({$position:t})=>m(t)} 0.3s ease-out;
+  animation: ${({ $position }) => getAnimation($position)} 0.3s ease-out;
   
-  ${s.xs} {
+  ${breakpoints.xs} {
     min-width: unset;
     max-width: unset;
     width: 100%;
   }
-`,IconWrapper=e.span`
+`;
+export const IconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 20px;
   height: 20px;
-  color: ${({$type:t})=>o[t].icon};
+  color: ${({ $type }) => typeStyles[$type].icon};
   
   svg {
     width: 100%;
     height: 100%;
   }
-`,ContentWrapper=e.div`
+`;
+export const ContentWrapper = styled.div `
   flex: 1;
   min-width: 0;
-`,Message=e.div`
+`;
+export const Message = styled.div `
   font-size: 0.875rem;
   line-height: 1.5;
   word-break: break-word;
-`,ActionsWrapper=e.div`
+`;
+export const ActionsWrapper = styled.div `
   display: flex;
   align-items: center;
-  gap: ${r.spacing100||"0.5rem"};
+  gap: ${tokens.spacing100 || '0.5rem'};
   flex-shrink: 0;
-`,ActionButton=e.button`
+`;
+export const ActionButton = styled.button `
   background: transparent;
-  border: 1px solid ${({$type:t})=>o[t].border};
+  border: 1px solid ${({ $type }) => typeStyles[$type].border};
   color: inherit;
   padding: 0.25rem 0.625rem;
-  border-radius: ${r.borderRadius050||"4px"};
+  border-radius: ${tokens.borderRadius050 || '4px'};
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -148,10 +227,11 @@
   }
   
   &:focus-visible {
-    outline: 2px solid ${({$type:t})=>o[t].accent};
+    outline: 2px solid ${({ $type }) => typeStyles[$type].accent};
     outline-offset: 2px;
   }
-`,DismissButton=e.button`
+`;
+export const DismissButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
@@ -159,7 +239,7 @@
   border: none;
   color: inherit;
   padding: 0.25rem;
-  border-radius: ${r.borderRadius050||"4px"};
+  border-radius: ${tokens.borderRadius050 || '4px'};
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
@@ -173,7 +253,7 @@
   }
   
   &:focus-visible {
-    outline: 2px solid ${({$type:t})=>o[t].accent};
+    outline: 2px solid ${({ $type }) => typeStyles[$type].accent};
     outline-offset: 2px;
   }
   
@@ -181,11 +261,12 @@
     width: 100%;
     height: 100%;
   }
-`,ProgressBar=e.div`
+`;
+export const ProgressBar = styled.div `
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
-  background: ${({$type:t})=>o[t].accent};
-  animation: ${p} ${({$duration:t})=>t}ms linear forwards;
+  background: ${({ $type }) => typeStyles[$type].accent};
+  animation: ${progressShrink} ${({ $duration }) => $duration}ms linear forwards;
 `;

package/lib/src/core-components/src/components/Toast/index.js

@@ -1 +1,2 @@
-"use strict";export{Toast,ToastContainer}from"./Toast";export*from"./types";
+export { Toast, ToastContainer } from './Toast';
+export * from './types';

package/lib/src/core-components/src/components/Toast/types.js

@@ -1 +1,9 @@
-"use strict";export const TOAST_TYPES=["default","success","error","warning","info"],TOAST_POSITIONS=["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"];
+export const TOAST_TYPES = ['default', 'success', 'error', 'warning', 'info'];
+export const TOAST_POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];