react-restyle-components 0.4.46 → 0.4.47

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

@@ -1,118 +1 @@
-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" }))] }));
-};
+"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"})]})};

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

@@ -1,20 +1 @@
-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'];
+"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"];

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

@@ -1,76 +1 @@
-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 })] })] }));
-});
+"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})]})]})});

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

@@ -1,50 +1 @@
-'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';
+"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";

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

@@ -1,8 +1,4 @@
-import { styled, css, keyframes } from 'styled-components';
-import { tokens } from '../../utils/designTokens';
-import { breakpoints } from '../../utils/abstracts';
-// Animations
-const slideInRight = keyframes `
+"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`
   from {
     transform: translateX(100%);
     opacity: 0;
@@ -11,8 +7,7 @@ const slideInRight = keyframes `
     transform: translateX(0);
     opacity: 1;
   }
-`;
-const slideInLeft = keyframes `
+`,c=i`
   from {
     transform: translateX(-100%);
     opacity: 0;
@@ -21,8 +16,7 @@ const slideInLeft = keyframes `
     transform: translateX(0);
     opacity: 1;
   }
-`;
-const slideInUp = keyframes `
+`,f=i`
   from {
     transform: translateY(100%);
     opacity: 0;
@@ -31,8 +25,7 @@ const slideInUp = keyframes `
     transform: translateY(0);
     opacity: 1;
   }
-`;
-const slideInDown = keyframes `
+`,l=i`
   from {
     transform: translateY(-100%);
     opacity: 0;
@@ -41,181 +34,109 @@ const slideInDown = keyframes `
     transform: translateY(0);
     opacity: 1;
   }
-`;
-const progressShrink = keyframes `
+`,p=i`
   from {
     width: 100%;
   }
   to {
     width: 0%;
   }
-`;
-// 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 `
+`,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`
         top: 1rem;
         left: 1rem;
         align-items: flex-start;
-      `;
-        case 'top-center':
-            return css `
+      `;case"top-center":return n`
         top: 1rem;
         left: 50%;
         transform: translateX(-50%);
         align-items: center;
-      `;
-        case 'top-right':
-            return css `
+      `;case"top-right":return n`
         top: 1rem;
         right: 1rem;
         align-items: flex-end;
-      `;
-        case 'bottom-left':
-            return css `
+      `;case"bottom-left":return n`
         bottom: 1rem;
         left: 1rem;
         align-items: flex-start;
-      `;
-        case 'bottom-center':
-            return css `
+      `;case"bottom-center":return n`
         bottom: 1rem;
         left: 50%;
         transform: translateX(-50%);
         align-items: center;
-      `;
-        case 'bottom-right':
-        default:
-            return css `
+      `;default:return n`
         bottom: 1rem;
         right: 1rem;
         align-items: flex-end;
-      `;
-    }
-};
-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 `
+      `}},m=t=>t.includes("left")?c:t.includes("right")?a:t.includes("top")?l:f;export const ToastContainerElement=e.div`
   position: fixed;
   z-index: 9999;
   display: flex;
   flex-direction: column;
-  gap: ${({ $gap }) => $gap};
+  gap: ${({$gap:t})=>t};
   pointer-events: none;
   
-  ${({ $position }) => getPositionStyles($position)}
+  ${({$position:t})=>d(t)}
   
-  ${breakpoints.xs} {
+  ${s.xs} {
     left: 1rem;
     right: 1rem;
     transform: none;
     align-items: stretch;
   }
-`;
-export const ToastElement = styled.div `
-  display: ${({ $isOpen }) => ($isOpen ? 'flex' : 'none')};
+`,ToastElement=e.div`
+  display: ${({$isOpen:t})=>t?"flex":"none"};
   align-items: flex-start;
-  gap: ${tokens.spacing150 || '0.75rem'};
+  gap: ${r.spacing150||"0.75rem"};
   min-width: 280px;
   max-width: 420px;
-  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};
+  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};
   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 }) => getAnimation($position)} 0.3s ease-out;
+  animation: ${({$position:t})=>m(t)} 0.3s ease-out;
   
-  ${breakpoints.xs} {
+  ${s.xs} {
     min-width: unset;
     max-width: unset;
     width: 100%;
   }
-`;
-export const IconWrapper = styled.span `
+`,IconWrapper=e.span`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 20px;
   height: 20px;
-  color: ${({ $type }) => typeStyles[$type].icon};
+  color: ${({$type:t})=>o[t].icon};
   
   svg {
     width: 100%;
     height: 100%;
   }
-`;
-export const ContentWrapper = styled.div `
+`,ContentWrapper=e.div`
   flex: 1;
   min-width: 0;
-`;
-export const Message = styled.div `
+`,Message=e.div`
   font-size: 0.875rem;
   line-height: 1.5;
   word-break: break-word;
-`;
-export const ActionsWrapper = styled.div `
+`,ActionsWrapper=e.div`
   display: flex;
   align-items: center;
-  gap: ${tokens.spacing100 || '0.5rem'};
+  gap: ${r.spacing100||"0.5rem"};
   flex-shrink: 0;
-`;
-export const ActionButton = styled.button `
+`,ActionButton=e.button`
   background: transparent;
-  border: 1px solid ${({ $type }) => typeStyles[$type].border};
+  border: 1px solid ${({$type:t})=>o[t].border};
   color: inherit;
   padding: 0.25rem 0.625rem;
-  border-radius: ${tokens.borderRadius050 || '4px'};
+  border-radius: ${r.borderRadius050||"4px"};
   font-size: 0.8125rem;
   font-weight: 500;
   cursor: pointer;
@@ -227,11 +148,10 @@ export const ActionButton = styled.button `
   }
   
   &:focus-visible {
-    outline: 2px solid ${({ $type }) => typeStyles[$type].accent};
+    outline: 2px solid ${({$type:t})=>o[t].accent};
     outline-offset: 2px;
   }
-`;
-export const DismissButton = styled.button `
+`,DismissButton=e.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -239,7 +159,7 @@ export const DismissButton = styled.button `
   border: none;
   color: inherit;
   padding: 0.25rem;
-  border-radius: ${tokens.borderRadius050 || '4px'};
+  border-radius: ${r.borderRadius050||"4px"};
   cursor: pointer;
   transition: all 0.2s ease;
   opacity: 0.7;
@@ -253,7 +173,7 @@ export const DismissButton = styled.button `
   }
   
   &:focus-visible {
-    outline: 2px solid ${({ $type }) => typeStyles[$type].accent};
+    outline: 2px solid ${({$type:t})=>o[t].accent};
     outline-offset: 2px;
   }
   
@@ -261,12 +181,11 @@ export const DismissButton = styled.button `
     width: 100%;
     height: 100%;
   }
-`;
-export const ProgressBar = styled.div `
+`,ProgressBar=e.div`
   position: absolute;
   bottom: 0;
   left: 0;
   height: 3px;
-  background: ${({ $type }) => typeStyles[$type].accent};
-  animation: ${progressShrink} ${({ $duration }) => $duration}ms linear forwards;
+  background: ${({$type:t})=>o[t].accent};
+  animation: ${p} ${({$duration:t})=>t}ms linear forwards;
 `;

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

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

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

@@ -1,9 +1 @@
-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',
-];
+"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"];