@xanui/ui 1.2.6 → 1.2.7

package/Tabs/index.js

@@ -1,198 +1,113 @@
 "use client";
 import { __rest } from 'tslib';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useRef, useState, useMemo, Children, cloneElement, useEffect } from 'react';
-import { useInterface, useBreakpointProps, Tag, Transition } from '@xanui/core';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef } from 'react';
+import { useInterface, useBreakpointProps, Tag, animate } from '@xanui/core';
+import { TabContext } from './context.js';
 
-const getRect = (ele, parent) => {
-    const _rect = {};
-    const parentRect = parent.getBoundingClientRect();
-    const childRect = ele.getBoundingClientRect();
-    _rect.top = childRect.top - parentRect.top;
-    _rect.right = childRect.right - parentRect.right;
-    _rect.bottom = childRect.bottom - parentRect.bottom;
-    _rect.left = childRect.left - parentRect.left;
-    _rect.width = childRect.width;
-    _rect.height = childRect.height;
-    return _rect;
-};
 const Tabs = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
     var { onChange, value, children } = _a, props = __rest(_a, ["onChange", "value", "children"]);
-    let [_e] = useInterface("Tabs", props, {}), { verticle, color, variant, indicatorSize, disableTransition, slotProps } = _e, rest = __rest(_e, ["verticle", "color", "variant", "indicatorSize", "disableTransition", "slotProps"]);
+    let [_e] = useInterface("Tabs", props, {}), { color, variant, indicatorSize, disableTransition, slotProps } = _e, rest = __rest(_e, ["color", "variant", "indicatorSize", "disableTransition", "slotProps"]);
     const _p = {};
     if (variant)
         _p.variant = variant;
     if (color)
         _p.color = color;
-    if (verticle)
-        _p.verticle = verticle;
     if (disableTransition)
         _p.disableTransition = disableTransition;
     if (indicatorSize)
         _p.indicatorSize = indicatorSize;
     const p = useBreakpointProps(_p);
     variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "end-line";
-    color = (_c = p.color) !== null && _c !== void 0 ? _c : "brand";
-    verticle = p.verticle;
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : "primary";
     disableTransition = p.disableTransition;
     indicatorSize = (_d = p.indicatorSize) !== null && _d !== void 0 ? _d : 3;
-    ref = ref || useRef(null);
-    const containerRef = useRef(null);
-    const [trans, setTrans] = useState();
-    const { childs, selectedIndex } = useMemo(() => {
-        let info = {
-            childs: null,
-            selectedIndex: 0
-        };
-        info.childs = Children.map(children, (child, idx) => {
-            let selected = child.props.value === value;
-            if (selected) {
-                info.selectedIndex = idx;
-            }
-            let btnProps = {};
-            if (variant === 'fill' && selected) {
-                btnProps = {
-                    sx: {
-                        bgcolor: "transparent!importnat",
-                        color: "#FFFFFF!important"
-                    }
-                };
-            }
-            else if (variant === 'soft' && selected) {
-                btnProps = {
-                    sx: {
-                        bgcolor: "transparent!importnat",
-                    }
-                };
-            }
-            // delete child.props.value
-            return cloneElement(child, Object.assign(Object.assign(Object.assign({ corner: "square", value: undefined, onClick: () => {
-                    onChange && onChange(child.props.value);
-                } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button), btnProps), { color: selected ? color : "default", variant: "text", classNames: [child.props.classNames, { "tab-selected": selected }] }));
-        });
-        return info;
-    }, [children, onChange, value, variant, color, verticle]);
-    useEffect(() => {
-        let con = containerRef.current;
-        const conChilds = con.children;
-        if (conChilds && conChilds[selectedIndex]) {
-            const selectedTab = con.querySelector(".tab-selected") || conChilds[0];
-            const prevRect = getRect(selectedTab, con);
-            const rect = getRect(conChilds[selectedIndex], con);
-            let anim = () => ({});
-            if (verticle) {
-                let v = {
-                    from: {
-                        top: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.top) || 0,
-                        height: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0,
-                    },
-                    to: {
-                        top: (rect === null || rect === void 0 ? void 0 : rect.top) || 0,
-                        height: (rect === null || rect === void 0 ? void 0 : rect.height) || 0,
-                    }
-                };
-                if (["fill", "soft", "outline"].includes(variant)) {
-                    v.from.width = prevRect === null || prevRect === void 0 ? void 0 : prevRect.width;
-                    v.to.width = rect === null || rect === void 0 ? void 0 : rect.width;
+    const indicatorRef = useRef(null);
+    const indicatorState = useRef({
+        left: 0,
+        width: 0
+    });
+    let indicatorProps = {};
+    switch (variant) {
+        case "outline":
+            indicatorProps = {
+                top: 0,
+                border: "1px solid",
+                borderColor: color,
+                bgcolor: "transparent"
+            };
+            break;
+        case "ghost":
+            indicatorProps = {
+                top: 0,
+                bgcolor: `${color}.ghost`
+            };
+            break;
+        case "text":
+            indicatorProps = {
+                display: "none"
+            };
+            break;
+    }
+    return (jsx(TabContext.Provider, { value: {
+            value,
+            variant,
+            color,
+            disableTransition,
+            indicatorSize,
+            onChange: (v, e) => {
+                var _a, _b;
+                onChange(v, e);
+                if (variant === 'text')
+                    return;
+                const indicator = indicatorRef.current;
+                if (!indicator)
+                    return;
+                const target = e.currentTarget;
+                switch (variant) {
+                    case "start-line":
+                        indicator.style.removeProperty("bottom");
+                        indicator.style.top = `${target.offsetTop}px`;
+                        indicator.style.height = `${indicatorSize}px`;
+                        break;
+                    case "end-line":
+                        indicator.style.removeProperty("top");
+                        indicator.style.bottom = `${target.offsetTop}px`;
+                        indicator.style.height = `${indicatorSize}px`;
+                        break;
+                    case "fill":
+                    case "outline":
+                    case "ghost":
+                        indicator.style.height = `${target.offsetHeight}px`;
+                        indicator.style.top = `${target.offsetTop}px`;
+                        break;
                 }
-                anim = () => v;
-            }
-            else {
-                let v = {
+                animate({
                     from: {
-                        left: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.left) || 0,
-                        width: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.width) || 0,
+                        left: (_a = indicatorState.current.left) !== null && _a !== void 0 ? _a : 0,
+                        width: (_b = indicatorState.current.width) !== null && _b !== void 0 ? _b : 0,
                     },
                     to: {
-                        left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
-                        width: (rect === null || rect === void 0 ? void 0 : rect.width) || 0,
+                        left: target.offsetLeft,
+                        width: target.clientWidth,
                     },
-                };
-                if (["fill", "soft", "outline"].includes(variant)) {
-                    v.from.height = (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0;
-                    v.to.height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
-                }
-                anim = () => v;
-            }
-            setTrans(() => anim);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [selectedIndex, variant, color, verticle]);
-    let indicatorProps = useMemo(() => {
-        let _indicatorProps = {};
-        switch (variant) {
-            case "start-line":
-                if (verticle) {
-                    _indicatorProps = {
-                        left: 0,
-                        width: indicatorSize
-                    };
-                }
-                else {
-                    _indicatorProps = {
-                        top: 0,
-                        height: indicatorSize
-                    };
-                }
-                break;
-            case "end-line":
-                if (verticle) {
-                    _indicatorProps = {
-                        right: 0,
-                        width: indicatorSize
-                    };
-                }
-                else {
-                    _indicatorProps = {
-                        bottom: 0,
-                        height: indicatorSize
-                    };
-                }
-                break;
-            case "fill":
-                _indicatorProps = {
-                    top: 0,
-                    bgcolor: color
-                };
-                break;
-            case "outline":
-                _indicatorProps = {
-                    top: 0,
-                    border: "1px solid",
-                    borderColor: color,
-                    bgcolor: "transparent"
-                };
-                break;
-            case "soft":
-                _indicatorProps = {
-                    top: 0,
-                    bgcolor: `${color}.soft.primary`
-                };
-                break;
-            case "text":
-                _indicatorProps = {
-                    display: "none"
-                };
-                break;
-        }
-        return _indicatorProps;
-    }, [selectedIndex, variant, color, verticle]);
-    return (jsxs(Tag, Object.assign({}, rest, { baseClass: 'tabs', ref: ref, sxr: {
-            position: "relative",
-            zIndex: 1,
-            display: "inline-block"
-        }, children: [jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'tabs-content', sxr: {
-                    display: verticle ? "flex" : "inline-flex",
-                    flexDirection: verticle ? "column" : "row",
-                }, ref: containerRef, children: childs })), jsx(Transition, { open: !!trans, variant: trans, duration: trans ? (disableTransition ? 0 : 250) : 0, easing: "smooth", children: jsx(Tag, Object.assign({ baseClass: 'tabs-indicator', 
-                    // className={classname}
-                    sxr: {
-                        position: "absolute",
-                        zIndex: -1,
-                        cursor: "pointer",
-                        bgcolor: color
-                    } }, indicatorProps)) })] })));
+                    duration: 180,
+                    easing: (t) => 1 - Math.pow(1 - t, 3),
+                    onUpdate: ({ left, width }) => {
+                        indicatorState.current.left = left;
+                        indicatorState.current.width = width;
+                        indicator.style.left = `${left}px`;
+                        indicator.style.width = `${width}px`;
+                    },
+                });
+            },
+        }, children: jsxs(Tag, Object.assign({}, rest, { baseClass: 'tabs', sxr: {
+                position: "relative",
+                zIndex: 1,
+                display: "flex",
+                flexDirection: "row",
+            }, ref: ref, children: [children, jsx(Tag, { ref: indicatorRef, baseClass: 'tabs-indicator', sxr: Object.assign({ radius: 1, position: "absolute", zIndex: -1, bgcolor: color, height: 2 }, indicatorProps) })] })) }));
 });
 
 export { Tabs as default };

package/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport { TabProps } from '../Tab'\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\nimport { ButtonProps } from '../Button'\n\n\ntype ValueType = string | number\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\n    children: ReactElement<TabProps> | ReactElement<TabProps>[];\n    value?: ValueType;\n    onChange?: (value: ValueType) => void;\n    variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    verticle?: useBreakpointPropsType<boolean>;\n    disableTransition?: useBreakpointPropsType<boolean>;\n    indicatorSize?: useBreakpointPropsType<number>;\n\n    slotProps?: {\n        content?: Omit<TagProps, \"children\">;\n        button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\n    }\n}\n\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\n    const _rect: any = {};\n    const parentRect = parent.getBoundingClientRect();\n    const childRect = ele.getBoundingClientRect();\n    _rect.top = childRect.top - parentRect.top;\n    _rect.right = childRect.right - parentRect.right;\n    _rect.bottom = childRect.bottom - parentRect.bottom;\n    _rect.left = childRect.left - parentRect.left;\n    _rect.width = childRect.width;\n    _rect.height = childRect.height;\n    return _rect\n}\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n    let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    if (color) _p.color = color\n    if (verticle) _p.verticle = verticle\n    if (disableTransition) _p.disableTransition = disableTransition\n    if (indicatorSize) _p.indicatorSize = indicatorSize\n    const p: any = useBreakpointProps(_p)\n\n    variant = p.variant ?? \"end-line\"\n    color = p.color ?? \"brand\"\n    verticle = p.verticle\n    disableTransition = p.disableTransition\n    indicatorSize = p.indicatorSize ?? 3\n\n    ref = ref || useRef(null)\n    const containerRef: any = useRef(null)\n    const [trans, setTrans] = useState<any>()\n\n    const { childs, selectedIndex } = useMemo(() => {\n        let info: any = {\n            childs: null,\n            selectedIndex: 0\n        }\n        info.childs = Children.map(children, (child: any, idx: number) => {\n            let selected = child.props.value === value\n            if (selected) {\n                info.selectedIndex = idx\n            }\n\n            let btnProps: any = {}\n            if (variant === 'fill' && selected) {\n                btnProps = {\n                    sx: {\n                        bgcolor: \"transparent!importnat\",\n                        color: \"#FFFFFF!important\"\n                    }\n                }\n            } else if (variant === 'soft' && selected) {\n                btnProps = {\n                    sx: {\n                        bgcolor: \"transparent!importnat\",\n                    }\n                }\n            }\n\n            // delete child.props.value\n            return cloneElement(child, {\n                corner: \"square\",\n                value: undefined,\n                onClick: () => {\n                    onChange && onChange(child.props.value)\n                },\n                ...slotProps?.button,\n                ...btnProps,\n                color: selected ? color : \"default\",\n                variant: \"text\",\n                classNames: [child.props.classNames, { \"tab-selected\": selected }],\n            })\n        })\n        return info\n    }, [children, onChange, value, variant, color, verticle])\n\n    useEffect(() => {\n        let con = containerRef.current\n        const conChilds = con.children\n        if (conChilds && conChilds[selectedIndex]) {\n            const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\n            const prevRect = getRect(selectedTab, con)\n            const rect = getRect(conChilds[selectedIndex], con)\n\n            let anim: any = () => ({})\n            if (verticle) {\n                let v: any = {\n                    from: {\n                        top: prevRect?.top || 0,\n                        height: prevRect?.height || 0,\n                    },\n                    to: {\n                        top: rect?.top || 0,\n                        height: rect?.height || 0,\n                    }\n                }\n\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n                    v.from.width = prevRect?.width\n                    v.to.width = rect?.width\n                }\n                anim = () => v\n            } else {\n                let v: any = {\n                    from: {\n                        left: prevRect?.left || 0,\n                        width: prevRect?.width || 0,\n                    },\n                    to: {\n                        left: rect?.left || 0,\n                        width: rect?.width || 0,\n                    },\n                }\n\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n                    v.from.height = prevRect?.height || 0\n                    v.to.height = rect?.height || 0\n                }\n                anim = () => v\n            }\n            setTrans(() => anim)\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedIndex, variant, color, verticle])\n\n    let indicatorProps: any = useMemo(() => {\n        let _indicatorProps: any = {}\n        switch (variant) {\n            case \"start-line\":\n                if (verticle) {\n                    _indicatorProps = {\n                        left: 0,\n                        width: indicatorSize\n                    }\n                } else {\n                    _indicatorProps = {\n                        top: 0,\n                        height: indicatorSize\n                    }\n                }\n                break;\n            case \"end-line\":\n                if (verticle) {\n                    _indicatorProps = {\n                        right: 0,\n                        width: indicatorSize\n                    }\n                } else {\n                    _indicatorProps = {\n                        bottom: 0,\n                        height: indicatorSize\n                    }\n                }\n                break;\n            case \"fill\":\n                _indicatorProps = {\n                    top: 0,\n                    bgcolor: color\n                }\n                break;\n            case \"outline\":\n                _indicatorProps = {\n                    top: 0,\n                    border: \"1px solid\",\n                    borderColor: color,\n                    bgcolor: \"transparent\"\n                }\n                break;\n            case \"soft\":\n                _indicatorProps = {\n                    top: 0,\n                    bgcolor: `${color}.soft.primary`\n                }\n                break;\n            case \"text\":\n                _indicatorProps = {\n                    display: \"none\"\n                }\n                break;\n        }\n        return _indicatorProps\n    }, [selectedIndex, variant, color, verticle])\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='tabs'\n            ref={ref}\n            sxr={{\n                position: \"relative\",\n                zIndex: 1,\n                display: \"inline-block\"\n            }}\n        >\n            <Tag\n                {...slotProps?.content}\n                baseClass='tabs-content'\n                sxr={{\n                    display: verticle ? \"flex\" : \"inline-flex\",\n                    flexDirection: verticle ? \"column\" : \"row\",\n                }}\n                ref={containerRef}\n            >\n                {childs}\n            </Tag>\n            <Transition\n                open={!!trans}\n                variant={trans}\n                duration={trans ? (disableTransition ? 0 : 250) : 0}\n                easing=\"smooth\"\n            >\n                <Tag\n                    baseClass='tabs-indicator'\n                    // className={classname}\n                    sxr={{\n                        position: \"absolute\",\n                        zIndex: -1,\n                        cursor: \"pointer\",\n                        bgcolor: color\n                    }}\n                    {...indicatorProps}\n                >\n                </Tag>\n            </Transition>\n        </Tag>\n    )\n})\n\nexport default Tabs"],"names":[],"mappings":";;;;;;AAwBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;;;AAsBO;AACI;;AAEA;AACA;AACH;AAOrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react'\nimport { animate, Tag, useBreakpointProps, useInterface } from '@xanui/core'\nimport { TabContext } from './context';\nimport { TabsProps } from './types';\n\nexport type { TabsProps }\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n    let [{ color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    if (color) _p.color = color\n    if (disableTransition) _p.disableTransition = disableTransition\n    if (indicatorSize) _p.indicatorSize = indicatorSize\n    const p: any = useBreakpointProps(_p)\n\n    variant = p.variant ?? \"end-line\"\n    color = p.color ?? \"primary\"\n    disableTransition = p.disableTransition\n    indicatorSize = p.indicatorSize ?? 3\n\n    const indicatorRef = useRef<HTMLElement>(null)\n    const indicatorState = useRef({\n        left: 0,\n        width: 0\n    })\n\n\n    let indicatorProps: any = {}\n    switch (variant) {\n        case \"outline\":\n            indicatorProps = {\n                top: 0,\n                border: \"1px solid\",\n                borderColor: color,\n                bgcolor: \"transparent\"\n            }\n            break;\n        case \"ghost\":\n            indicatorProps = {\n                top: 0,\n                bgcolor: `${color}.ghost`\n            }\n            break;\n        case \"text\":\n            indicatorProps = {\n                display: \"none\"\n            }\n            break;\n    }\n\n\n    return (\n        <TabContext.Provider\n            value={{\n                value,\n                variant,\n                color,\n                disableTransition,\n                indicatorSize,\n                onChange: (v, e) => {\n                    onChange!(v, e)\n\n                    if (variant === 'text') return\n                    const indicator = indicatorRef.current;\n                    if (!indicator) return;\n\n                    const target = e.currentTarget as HTMLElement;\n\n                    switch (variant) {\n                        case \"start-line\":\n                            indicator.style.removeProperty(\"bottom\")\n                            indicator.style.top = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"end-line\":\n                            indicator.style.removeProperty(\"top\")\n                            indicator.style.bottom = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"fill\":\n                        case \"outline\":\n                        case \"ghost\":\n                            indicator.style.height = `${target.offsetHeight}px`\n                            indicator.style.top = `${target.offsetTop}px`\n                            break;\n                    }\n\n                    animate({\n                        from: {\n                            left: indicatorState.current.left ?? 0,\n                            width: indicatorState.current.width ?? 0,\n                        },\n                        to: {\n                            left: target.offsetLeft,\n                            width: target.clientWidth,\n                        },\n                        duration: 180,\n                        easing: (t) => 1 - Math.pow(1 - t, 3),\n                        onUpdate: ({ left, width }) => {\n                            indicatorState.current.left = left;\n                            indicatorState.current.width = width;\n\n                            indicator.style.left = `${left}px`;\n                            indicator.style.width = `${width}px`;\n                        },\n                    });\n                },\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='tabs'\n                sxr={{\n                    position: \"relative\",\n                    zIndex: 1,\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                }}\n                ref={ref}\n            >\n                {children}\n                <Tag\n                    ref={indicatorRef}\n                    baseClass='tabs-indicator'\n                    sxr={{\n                        radius: 1,\n                        position: \"absolute\",\n                        zIndex: -1,\n                        bgcolor: color,\n                        height: 2,\n                        ...indicatorProps\n                    }}\n                />\n            </Tag>\n        </TabContext.Provider>\n    )\n})\n\nexport default Tabs"],"names":[],"mappings":";;;;;;;AAQA;;;;;AAGI;AAAa;AACb;AAAW;AACX;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AAEA;;AAEI;AACA;AACH;;;AAKG;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAMZ;;;;;;AAQY;;AACI;;;AAGA;AACA;;AAEA;;AAGI;AACI;;;;AAIJ;AACI;;;;AAIJ;AACA;AACA;;;;;AAMJ;AACI;;;AAGC;AACD;;;AAGC;AACD;AACA;;AAEI;AACA;;;;AAKP;;;AAQD;AACA;AACA;AACA;;AAoBpB;;"}

package/Tabs/types.d.ts

@@ -0,0 +1,16 @@
+import { ReactElement } from 'react';
+import { TabProps } from '../Tab/index.js';
+import { TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
+
+type ValueType = string | number;
+type TabsProps = Omit<TagProps, 'onChange'> & {
+    children: ReactElement<TabProps> | ReactElement<TabProps>[];
+    value?: ValueType;
+    onChange?: (value: ValueType, e: React.MouseEvent) => void;
+    variant?: useBreakpointPropsType<"start-line" | "end-line" | "fill" | "outline" | "text" | "ghost">;
+    color?: useBreakpointPropsType<UseColorTemplateColor>;
+    disableTransition?: useBreakpointPropsType<boolean>;
+    indicatorSize?: useBreakpointPropsType<number>;
+};
+
+export type { TabsProps };

package/Text/index.cjs

@@ -18,7 +18,7 @@ const Text = React.forwardRef((_a, ref) => {
             fontSize: variant,
             lineHeight: variant,
             fontWeight: variant,
-            color: "text.primary",
+            color: "surface.contrast",
         }, baseClass: 'text', ref: ref, children: children })));
 });
 

package/Text/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n    variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    variant = p.variant ?? 'text'\n\n    return (\n        <Tag\n            component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n            {...props}\n            sxr={{\n                fontSize: variant,\n                lineHeight: variant,\n                fontWeight: variant,\n                color: \"text.primary\",\n            }}\n            baseClass='text'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Text\n"],"names":[],"mappings":";;;;;;;;AASA;;;;AAEI;AAAa;AACb;AACA;;AAOY;AACA;AACA;AACA;;AAMhB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n    variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    variant = p.variant ?? 'text'\n\n    return (\n        <Tag\n            component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n            {...props}\n            sxr={{\n                fontSize: variant,\n                lineHeight: variant,\n                fontWeight: variant,\n                color: \"surface.contrast\",\n            }}\n            baseClass='text'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Text\n"],"names":[],"mappings":";;;;;;;;AASA;;;;AAEI;AAAa;AACb;AACA;;AAOY;AACA;AACA;AACA;;AAMhB;;"}

package/Text/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
 
 type TextProps<T extends TagComponentType = "p"> = TagProps<T> & {
     variant?: useBreakpointPropsType<"text" | "button" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6">;
 };
-declare const Text: React.ForwardRefExoticComponent<Omit<TextProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Text: React__default.ForwardRefExoticComponent<Omit<TextProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Text as default };
 export type { TextProps };

package/Text/index.js

@@ -16,7 +16,7 @@ const Text = React.forwardRef((_a, ref) => {
             fontSize: variant,
             lineHeight: variant,
             fontWeight: variant,
-            color: "text.primary",
+            color: "surface.contrast",
         }, baseClass: 'text', ref: ref, children: children })));
 });
 

package/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n    variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    variant = p.variant ?? 'text'\n\n    return (\n        <Tag\n            component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n            {...props}\n            sxr={{\n                fontSize: variant,\n                lineHeight: variant,\n                fontWeight: variant,\n                color: \"text.primary\",\n            }}\n            baseClass='text'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Text\n"],"names":[],"mappings":";;;;;;AASA;;;;AAEI;AAAa;AACb;AACA;;AAOY;AACA;AACA;AACA;;AAMhB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n    variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    variant = p.variant ?? 'text'\n\n    return (\n        <Tag\n            component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n            {...props}\n            sxr={{\n                fontSize: variant,\n                lineHeight: variant,\n                fontWeight: variant,\n                color: \"surface.contrast\",\n            }}\n            baseClass='text'\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Text\n"],"names":[],"mappings":";;;;;;AASA;;;;AAEI;AAAa;AACb;AACA;;AAOY;AACA;AACA;AACA;;AAMhB;;"}

package/Toast/index.cjs

@@ -62,17 +62,17 @@ const formatPacement = (placement) => {
 const ToastView = (props) => {
     const [open, setOpen] = React.useState(true);
     const [timer, setTimer] = React.useState(null);
-    const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed, autoColose = true, pauseOnHover = true, autoColoseDelay = 6000 } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable", "onClosed", "autoColose", "pauseOnHover", "autoColoseDelay"]);
+    const _a = props || {}, { placement = "bottom-right", content, closeable, onExited, autoColose = true, pauseOnHover = true, autoColoseDelay = 6000, tid } = _a, rest = tslib.__rest(_a, ["placement", "content", "closeable", "onExited", "autoColose", "pauseOnHover", "autoColoseDelay", "tid"]);
     const { transition } = formatPacement(placement);
-    return (jsxRuntime.jsx(core.Transition, { open: open, variant: transition, onClosed: () => {
-            onClosed();
-        }, onOpened: () => {
+    return (jsxRuntime.jsx(core.Transition, { open: open, variant: transition, onExited: () => {
+            onExited(tid);
+        }, onEntered: () => {
             if (autoColose) {
                 setTimer(setTimeout(() => {
                     setOpen(false);
                 }, autoColoseDelay));
             }
-        }, children: jsxRuntime.jsx(index$1, Object.assign({ variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
+        }, children: jsxRuntime.jsx(index$1, Object.assign({ variant: "fill", color: "primary" }, rest, { direction: "row", mb: 1, onMouseEnter: () => {
                 (autoColose && pauseOnHover) && clearTimeout(timer);
             }, onMouseLeave: () => {
                 if (autoColose && pauseOnHover) {
@@ -92,24 +92,22 @@ const State = {
 };
 const RenderToasts = () => {
     let views = [];
+    const [, dispatch] = React.useState(0);
     for (let placement in State) {
         const items = State[placement];
         const { sx } = formatPacement(placement);
         if (!items.length)
             continue;
-        views.push(jsxRuntime.jsx(index, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 280, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops, index) => {
-                return (jsxRuntime.jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
-                        items.splice(index, 1);
-                        if (!items.length) {
+        views.push(jsxRuntime.jsx(index, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 300, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops) => {
+                return (jsxRuntime.jsx(ToastView, Object.assign({}, itemprops, { onExited: (tid) => {
+                        var _a;
+                        State[placement] = State[placement].filter((item) => item.tid !== tid);
+                        if (!((_a = State[placement]) === null || _a === void 0 ? void 0 : _a.length))
                             delete State[placement];
-                        }
-                        else {
-                            State[placement] = items;
-                        }
-                        if (!Object.keys(State).length) {
+                        if (!Object.keys(State).length)
                             core.Renderar.unrender(RenderToasts);
-                        }
-                    } }), `toast-view-${index}`));
+                        dispatch(Math.random());
+                    } }), `toast-view-${itemprops.tid}`));
             }) }, `toast-render-${placement}`));
     }
     return views;
@@ -120,6 +118,7 @@ const Toast = (props) => {
     const length = Object.keys(State).length;
     if (!State[placement])
         State[placement] = [];
+    props.tid = Math.random().toString(32);
     State[placement].push(props);
     if (length) {
         core.Renderar.updateProps(RenderToasts, {});

package/Toast/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    content?: AlertProps['children'];\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    placement?: PlacementType;\n    closeable?: useBreakpointPropsType<boolean>;\n    autoColose?: boolean;\n    autoColoseDelay?: number;\n    pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n    let sx: any = {}\n    let transition: any = \"\"\n    switch (placement) {\n        case \"top-left\":\n            sx = {\n                top: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"top-right\":\n            sx = {\n                top: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"top-center\":\n            sx = {\n                top: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeDown\"\n            break;\n        case \"bottom-right\":\n            sx = {\n                bottom: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"bottom-left\":\n            sx = {\n                bottom: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"bottom-center\":\n            sx = {\n                bottom: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeUp\"\n            break;\n    }\n    return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n    const [open, setOpen] = React.useState(true)\n    const [timer, setTimer] = React.useState<any>(null)\n    const {\n        placement = \"bottom-right\",\n        content,\n        closeable,\n        onClosed,\n        autoColose = true,\n        pauseOnHover = true,\n        autoColoseDelay = 6000,\n        ...rest\n    } = props || {}\n\n    const { transition } = formatPacement(placement)\n\n    return (<Transition\n        open={open}\n        variant={transition}\n        onClosed={() => {\n            onClosed()\n        }}\n        onOpened={() => {\n            if (autoColose) {\n                setTimer(setTimeout(() => {\n                    setOpen(false)\n                }, autoColoseDelay))\n            }\n        }}\n    >\n        <Alert\n            variant=\"fill\"\n            color=\"brand\"\n            {...rest as any}\n            mode=\"item\"\n            mb={1}\n            onMouseEnter={() => {\n                (autoColose && pauseOnHover) && clearTimeout(timer)\n            }}\n            onMouseLeave={() => {\n                if (autoColose && pauseOnHover) {\n                    setTimer(setTimeout(() => {\n                        setOpen(false)\n                    }, autoColoseDelay))\n                }\n            }}\n            onClose={closeable ? () => setOpen(false) : undefined}\n        >{content}</Alert>\n    </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n    // \"top-left\": [],\n    // \"top-center\": [],\n    // \"top-right\": [],\n    // \"bottom-left\": [],\n    // \"bottom-center\": [],\n    // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n    let views = []\n\n    for (let placement in State) {\n        const items = (State as any)[placement]\n        const { sx } = formatPacement(placement as any)\n        if (!items.length) continue;\n        views.push(\n            <Scrollbar\n                key={`toast-render-${placement}`}\n                overflow=\"hidden\"\n                p={1}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 99999999,\n                    display: \"flex\",\n                    justifyContent: \"flex-end\",\n                    flexDirection: \"column\",\n                    width: 280,\n                    height: \"auto\",\n                    maxHeight: \"100vh\",\n                    ...sx\n                }}\n            >\n\n                {items.map((itemprops: UseToastProps, index: number) => {\n                    return (\n                        <ToastView\n                            key={`toast-view-${index}`}\n                            {...itemprops}\n                            onClosed={() => {\n                                items.splice(index, 1)\n                                if (!items.length) {\n                                    delete (State as any)[placement]\n                                } else {\n                                    (State as any)[placement] = items\n                                }\n                                if (!Object.keys(State).length) {\n                                    Renderar.unrender(RenderToasts)\n                                }\n                            }}\n                        />\n                    )\n                })}\n            </Scrollbar >\n        )\n    }\n\n    return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n    props = React.isValidElement(props) ? { content: props } : props\n    let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n    const length = Object.keys(State).length\n    if (!State[placement]) State[placement] = []\n    State[placement].push(props as any)\n    if (length) {\n        Renderar.updateProps(RenderToasts, {})\n    } else {\n        Renderar.render(RenderToasts)\n    }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;AAsBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAaA;AAIQ;AACJ;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;AAGI;AACI;;;;;;AA2BwB;AACA;AACI;;;AAEC;;;AAGD;;AAER;AAGZ;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;;;AAGnB;;;AAEA;;AAER;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\nimport { UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType, Renderar } from \"@xanui/core\";\nimport React, { ReactElement, useState } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    content?: AlertProps['children'];\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    placement?: PlacementType;\n    closeable?: useBreakpointPropsType<boolean>;\n    autoColose?: boolean;\n    autoColoseDelay?: number;\n    pauseOnHover?: boolean;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n    let sx: any = {}\n    let transition: any = \"\"\n    switch (placement) {\n        case \"top-left\":\n            sx = {\n                top: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"top-right\":\n            sx = {\n                top: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"top-center\":\n            sx = {\n                top: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeDown\"\n            break;\n        case \"bottom-right\":\n            sx = {\n                bottom: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"bottom-left\":\n            sx = {\n                bottom: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"bottom-center\":\n            sx = {\n                bottom: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeUp\"\n            break;\n    }\n    return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { tid: string, onExited: (tid: string) => void }) => {\n    const [open, setOpen] = React.useState(true)\n    const [timer, setTimer] = React.useState<any>(null)\n    const {\n        placement = \"bottom-right\",\n        content,\n        closeable,\n        onExited,\n        autoColose = true,\n        pauseOnHover = true,\n        autoColoseDelay = 6000,\n        tid,\n        ...rest\n    } = props || {}\n\n    const { transition } = formatPacement(placement)\n\n    return (<Transition\n        open={open}\n        variant={transition}\n        onExited={() => {\n            onExited(tid)\n        }}\n        onEntered={() => {\n            if (autoColose) {\n                setTimer(setTimeout(() => {\n                    setOpen(false)\n                }, autoColoseDelay))\n            }\n        }}\n    >\n        <Alert\n            variant=\"fill\"\n            color=\"primary\"\n            {...rest as any}\n            direction={\"row\"}\n            mb={1}\n            onMouseEnter={() => {\n                (autoColose && pauseOnHover) && clearTimeout(timer)\n            }}\n            onMouseLeave={() => {\n                if (autoColose && pauseOnHover) {\n                    setTimer(setTimeout(() => {\n                        setOpen(false)\n                    }, autoColoseDelay))\n                }\n            }}\n            onClose={closeable ? () => setOpen(false) : undefined}\n        >{content}</Alert>\n    </Transition>)\n}\n\nconst State: Record<PlacementType, UseToastProps[]> = {\n    // \"top-left\": [],\n    // \"top-center\": [],\n    // \"top-right\": [],\n    // \"bottom-left\": [],\n    // \"bottom-center\": [],\n    // \"bottom-right\": []\n} as any\n\nconst RenderToasts = () => {\n    let views = []\n    const [, dispatch] = useState(0)\n\n    for (let placement in State) {\n        const items = (State as any)[placement]\n        const { sx } = formatPacement(placement as any)\n        if (!items.length) continue;\n        views.push(\n            <Scrollbar\n                key={`toast-render-${placement}`}\n                overflow=\"hidden\"\n                p={1}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 99999999,\n                    display: \"flex\",\n                    justifyContent: \"flex-end\",\n                    flexDirection: \"column\",\n                    width: 300,\n                    height: \"auto\",\n                    maxHeight: \"100vh\",\n                    ...sx\n                }}\n            >\n\n                {items.map((itemprops: UseToastProps & { tid: string }) => {\n                    return (\n                        <ToastView\n                            key={`toast-view-${itemprops.tid}`}\n                            {...itemprops}\n                            onExited={(tid) => {\n                                (State as any)[placement] = (State as any)[placement].filter((item: any) => item.tid !== tid)\n\n                                if (!(State as any)[placement]?.length) delete (State as any)[placement]\n                                if (!Object.keys(State).length) Renderar.unrender(RenderToasts)\n\n                                dispatch(Math.random())\n                            }}\n                        />\n                    )\n                })}\n            </Scrollbar >\n        )\n    }\n\n    return views\n}\n\nconst Toast = (props?: UseToastProps['content'] | UseToastProps) => {\n    props = React.isValidElement(props) ? { content: props } : props\n    let { placement = \"bottom-right\" } = (props || {}) as UseToastProps\n    const length = Object.keys(State).length\n    if (!State[placement]) State[placement] = [];\n    (props as any).tid = Math.random().toString(32);\n    State[placement].push(props as any)\n    if (length) {\n        Renderar.updateProps(RenderToasts, {})\n    } else {\n        Renderar.render(RenderToasts)\n    }\n}\n\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;;AAsBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;AACA;;AAcA;;AAKI;;AAGQ;;AAEA;;;;AAYJ;AAEI;AACI;;AAEA;;;AAMpB;AAEA;AACI;AACA;AACA;AACA;AACA;AACA;;AAGJ;;;AAII;AACI;;;;;;;;;AA6BgE;;AACR;AAEhC;;AAIhB;;AAKZ;AACJ;AAEA;AACI;;;AAGA;AAAuB;AACtB;;;AAGG;;;AAEA;;AAER;;"}

package/Toast/index.js

@@ -2,7 +2,7 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { Renderar, Transition } from '@xanui/core';
-import React from 'react';
+import React, { useState } from 'react';
 import Alert from '../Alert/index.js';
 import Scrollbar from '../Scrollbar/index.js';
 
@@ -60,17 +60,17 @@ const formatPacement = (placement) => {
 const ToastView = (props) => {
     const [open, setOpen] = React.useState(true);
     const [timer, setTimer] = React.useState(null);
-    const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed, autoColose = true, pauseOnHover = true, autoColoseDelay = 6000 } = _a, rest = __rest(_a, ["placement", "content", "closeable", "onClosed", "autoColose", "pauseOnHover", "autoColoseDelay"]);
+    const _a = props || {}, { placement = "bottom-right", content, closeable, onExited, autoColose = true, pauseOnHover = true, autoColoseDelay = 6000, tid } = _a, rest = __rest(_a, ["placement", "content", "closeable", "onExited", "autoColose", "pauseOnHover", "autoColoseDelay", "tid"]);
     const { transition } = formatPacement(placement);
-    return (jsx(Transition, { open: open, variant: transition, onClosed: () => {
-            onClosed();
-        }, onOpened: () => {
+    return (jsx(Transition, { open: open, variant: transition, onExited: () => {
+            onExited(tid);
+        }, onEntered: () => {
             if (autoColose) {
                 setTimer(setTimeout(() => {
                     setOpen(false);
                 }, autoColoseDelay));
             }
-        }, children: jsx(Alert, Object.assign({ variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
+        }, children: jsx(Alert, Object.assign({ variant: "fill", color: "primary" }, rest, { direction: "row", mb: 1, onMouseEnter: () => {
                 (autoColose && pauseOnHover) && clearTimeout(timer);
             }, onMouseLeave: () => {
                 if (autoColose && pauseOnHover) {
@@ -90,24 +90,22 @@ const State = {
 };
 const RenderToasts = () => {
     let views = [];
+    const [, dispatch] = useState(0);
     for (let placement in State) {
         const items = State[placement];
         const { sx } = formatPacement(placement);
         if (!items.length)
             continue;
-        views.push(jsx(Scrollbar, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 280, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops, index) => {
-                return (jsx(ToastView, Object.assign({}, itemprops, { onClosed: () => {
-                        items.splice(index, 1);
-                        if (!items.length) {
+        views.push(jsx(Scrollbar, { overflow: "hidden", p: 1, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 300, height: "auto", maxHeight: "100vh" }, sx), children: items.map((itemprops) => {
+                return (jsx(ToastView, Object.assign({}, itemprops, { onExited: (tid) => {
+                        var _a;
+                        State[placement] = State[placement].filter((item) => item.tid !== tid);
+                        if (!((_a = State[placement]) === null || _a === void 0 ? void 0 : _a.length))
                             delete State[placement];
-                        }
-                        else {
-                            State[placement] = items;
-                        }
-                        if (!Object.keys(State).length) {
+                        if (!Object.keys(State).length)
                             Renderar.unrender(RenderToasts);
-                        }
-                    } }), `toast-view-${index}`));
+                        dispatch(Math.random());
+                    } }), `toast-view-${itemprops.tid}`));
             }) }, `toast-render-${placement}`));
     }
     return views;
@@ -118,6 +116,7 @@ const Toast = (props) => {
     const length = Object.keys(State).length;
     if (!State[placement])
         State[placement] = [];
+    props.tid = Math.random().toString(32);
     State[placement].push(props);
     if (length) {
         Renderar.updateProps(RenderToasts, {});