@xanui/ui 1.0.0

package/Toast/index.js

@@ -0,0 +1,145 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),RenderRoot=require('../ThemeProvider/RenderRoot.js'),index$1=require('../Alert/index.js'),index=require('../Scrollbar/index.js');const State = new Map();
+let updateState = (placement, id, callback) => {
+    const items = State.get(placement);
+    if (items) {
+        for (let i = 0; i < items.length; i++) {
+            let item = items[i];
+            if (item.id === id) {
+                items[i] = callback(item);
+                State.set(placement, items);
+                RenderRoot.default.dispatch();
+                break;
+            }
+        }
+    }
+};
+const ToastContainer = ({ placement }) => {
+    const items = State.get(placement);
+    if (!items || !(items === null || items === void 0 ? void 0 : items.length))
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    let sxr = {};
+    let transition = "";
+    switch (placement) {
+        case "top-left":
+            sxr = {
+                top: 0,
+                left: 0
+            };
+            transition = "fadeRight";
+            break;
+        case "top-right":
+            sxr = {
+                top: 0,
+                right: 0
+            };
+            transition = "fadeLeft";
+            break;
+        case "top-center":
+            sxr = {
+                top: 0,
+                left: "50%",
+                transform: "translateX(-50%)"
+            };
+            transition = "fadeDown";
+            break;
+        case "bottom-right":
+            sxr = {
+                bottom: 0,
+                right: 0
+            };
+            transition = "fadeLeft";
+            break;
+        case "bottom-left":
+            sxr = {
+                bottom: 0,
+                left: 0
+            };
+            transition = "fadeRight";
+            break;
+        case "bottom-center":
+            sxr = {
+                bottom: 0,
+                left: "50%",
+                transform: "translateX(-50%)"
+            };
+            transition = "fadeUp";
+            break;
+    }
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ sxr: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", gap: 2, flexDirection: "column", maxHeight: "100%", width: 320 }, sxr) }, { children: jsxRuntime.jsx(index.default, Object.assign({ style: {
+                padding: 8
+            } }, { children: items.map(({ open, id, props }) => {
+                let { content, closeable } = props, rest = tslib.__rest(props, ["content", "closeable"]);
+                closeable !== null && closeable !== void 0 ? closeable : (closeable = true);
+                return (jsxRuntime.jsx(core.Transition, Object.assign({ open: open, variant: transition, onClosed: () => {
+                        const items = State.get(placement);
+                        if (items) {
+                            for (let i = 0; i < items.length; i++) {
+                                let item = items[i];
+                                if (item.id === id) {
+                                    items.splice(i, 1);
+                                    State.set(placement, items);
+                                    RenderRoot.default.dispatch();
+                                    break;
+                                }
+                            }
+                        }
+                    }, onOpened: () => {
+                        let timer = setTimeout(() => {
+                            updateState(placement, id, (_item) => {
+                                _item.open = false;
+                                return _item;
+                            });
+                        }, 6000);
+                        updateState(placement, id, (_item) => {
+                            _item.timer = timer;
+                            return _item;
+                        });
+                    } }, { children: jsxRuntime.jsx(index$1.default, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1.5, onMouseEnter: () => {
+                            updateState(placement, id, (_item) => {
+                                clearTimeout(_item.timer);
+                                return _item;
+                            });
+                        }, onMouseLeave: () => {
+                            let timer = setTimeout(() => {
+                                updateState(placement, id, (_item) => {
+                                    _item.open = false;
+                                    return _item;
+                                });
+                            }, 6000);
+                            updateState(placement, id, (_item) => {
+                                _item.timer = timer;
+                                return _item;
+                            });
+                        }, onClose: closeable ? () => {
+                            updateState(placement, id, (_item) => {
+                                _item.open = false;
+                                clearTimeout(_item.timer);
+                                return _item;
+                            });
+                        } : undefined }, { children: content })) }), id));
+            }) })) })));
+};
+const uid = (p) => {
+    const id = Math.random().toString(32).substring(2, 5);
+    return `TOAST_CONTAINER_${p}_${id}`.toUpperCase();
+};
+RenderRoot.default.create(uid("TOP_LEFT"), () => jsxRuntime.jsx(ToastContainer, { placement: 'top-left' }));
+RenderRoot.default.create(uid("TOP_RIGHT"), () => jsxRuntime.jsx(ToastContainer, { placement: 'top-right' }));
+RenderRoot.default.create(uid("TOP_CENTER"), () => jsxRuntime.jsx(ToastContainer, { placement: 'top-center' }));
+RenderRoot.default.create(uid("BOTTOM_LEFT"), () => jsxRuntime.jsx(ToastContainer, { placement: 'bottom-left' }));
+RenderRoot.default.create(uid("BOTTOM_RIGHT"), () => jsxRuntime.jsx(ToastContainer, { placement: 'bottom-right' }));
+RenderRoot.default.create(uid("BOTTOM_CENTER"), () => jsxRuntime.jsx(ToastContainer, { placement: 'bottom-center' }));
+const Toast = {
+    open: (props) => {
+        let { placement } = props || {};
+        placement !== null && placement !== void 0 ? placement : (placement = "bottom-right");
+        let prev = State.get(placement) || [];
+        prev.push({
+            open: true,
+            id: Math.random().toString(),
+            props
+        });
+        State.set(placement, prev);
+        RenderRoot.default.dispatch();
+    }
+};exports.default=Toast;//# sourceMappingURL=index.js.map

package/Toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\nimport { Tag, ColorTemplateColors, ColorTemplateType, useBreakpointPropsType, Transition } from '@xanui/core'\nimport { ReactElement } from \"react\";\nimport Renderar from '../ThemeProvider/RenderRoot';\nimport Alert, { AlertProps } from '../Alert';\nimport Scrollbar from '../Scrollbar';\n\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type ToastProps = {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    content?: AlertProps['children'];\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    placement?: PlacementType;\n    closeable?: useBreakpointPropsType<boolean>;\n}\n\ntype StateValue = { open: boolean, id: string, timer?: NodeJS.Timeout, props: ToastProps }\nconst State = new Map<PlacementType, StateValue[]>()\n\n\nlet updateState = (placement: PlacementType, id: string, callback: (item: StateValue) => StateValue) => {\n    const items = State.get(placement)\n    if (items) {\n        for (let i = 0; i < items.length; i++) {\n            let item = items[i]\n            if (item.id === id) {\n                items[i] = callback(item)\n                State.set(placement, items)\n                Renderar.dispatch()\n                break;\n            }\n        }\n    }\n}\n\nconst ToastContainer = ({ placement }: { placement: PlacementType }) => {\n    const items = State.get(placement)\n    if (!items || !items?.length) return <></>\n\n    let sxr: any = {}\n    let transition: any = \"\"\n    switch (placement) {\n        case \"top-left\":\n            sxr = {\n                top: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"top-right\":\n            sxr = {\n                top: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"top-center\":\n            sxr = {\n                top: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeDown\"\n            break;\n        case \"bottom-right\":\n            sxr = {\n                bottom: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"bottom-left\":\n            sxr = {\n                bottom: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"bottom-center\":\n            sxr = {\n                bottom: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeUp\"\n            break;\n    }\n    return (\n        <Tag\n            sxr={{\n                position: \"fixed\",\n                zIndex: 99999999,\n                display: \"flex\",\n                gap: 2,\n                flexDirection: \"column\",\n                maxHeight: \"100%\",\n                width: 320,\n                ...sxr\n            }}\n        >\n            <Scrollbar\n                style={{\n                    padding: 8\n                }}\n            >\n                {\n                    items.map(({ open, id, props }) => {\n                        let { content, closeable, ...rest } = props\n                        closeable ??= true\n                        return (\n                            <Transition\n                                key={id}\n                                open={open}\n                                variant={transition}\n                                onClosed={() => {\n                                    const items = State.get(placement)\n                                    if (items) {\n                                        for (let i = 0; i < items.length; i++) {\n                                            let item = items[i]\n                                            if (item.id === id) {\n                                                items.splice(i, 1)\n                                                State.set(placement, items)\n                                                Renderar.dispatch()\n                                                break;\n                                            }\n                                        }\n                                    }\n                                }}\n                                onOpened={() => {\n                                    let timer = setTimeout(() => {\n                                        updateState(placement, id, (_item) => {\n                                            _item.open = false\n                                            return _item\n                                        })\n                                    }, 6000)\n                                    updateState(placement, id, (_item) => {\n                                        _item.timer = timer\n                                        return _item\n                                    })\n                                }}\n                            >\n                                <Alert\n                                    shadow={2}\n                                    variant=\"fill\"\n                                    color=\"brand\"\n                                    {...rest as any}\n                                    mode=\"item\"\n                                    mb={1.5}\n                                    onMouseEnter={() => {\n                                        updateState(placement, id, (_item) => {\n                                            clearTimeout(_item.timer)\n                                            return _item\n                                        })\n                                    }}\n                                    onMouseLeave={() => {\n                                        let timer = setTimeout(() => {\n                                            updateState(placement, id, (_item) => {\n                                                _item.open = false\n                                                return _item\n                                            })\n                                        }, 6000)\n                                        updateState(placement, id, (_item) => {\n                                            _item.timer = timer\n                                            return _item\n                                        })\n                                    }}\n                                    onClose={closeable ? () => {\n                                        updateState(placement, id, (_item) => {\n                                            _item.open = false\n                                            clearTimeout(_item.timer)\n                                            return _item\n                                        })\n                                    } : undefined}\n                                >{content}</Alert>\n                            </Transition>\n                        )\n                    })\n                }\n            </Scrollbar>\n        </Tag>\n    )\n}\nconst uid = (p: string) => {\n    const id = Math.random().toString(32).substring(2, 5)\n    return `TOAST_CONTAINER_${p}_${id}`.toUpperCase()\n}\nRenderar.create(uid(\"TOP_LEFT\"), () => <ToastContainer placement='top-left' />)\nRenderar.create(uid(\"TOP_RIGHT\"), () => <ToastContainer placement='top-right' />)\nRenderar.create(uid(\"TOP_CENTER\"), () => <ToastContainer placement='top-center' />)\nRenderar.create(uid(\"BOTTOM_LEFT\"), () => <ToastContainer placement='bottom-left' />)\nRenderar.create(uid(\"BOTTOM_RIGHT\"), () => <ToastContainer placement='bottom-right' />)\nRenderar.create(uid(\"BOTTOM_CENTER\"), () => <ToastContainer placement='bottom-center' />)\n\nconst Toast = {\n    open: (props: ToastProps) => {\n        let { placement } = props || {}\n        placement ??= \"bottom-right\"\n        let prev = State.get(placement) || []\n        prev.push({\n            open: true,\n            id: Math.random().toString(),\n            props\n        })\n        State.set(placement, prev)\n        Renderar.dispatch()\n    }\n}\n\nexport default Toast"],"names":["Renderar","_jsx","Tag","Scrollbar","__rest","Transition","Alert"],"mappings":"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"}

package/Toast/index.mjs

@@ -0,0 +1,145 @@
+import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {Tag,Transition}from'@xanui/core';import Renderar from'../ThemeProvider/RenderRoot.mjs';import Alert from'../Alert/index.mjs';import Scrollbar from'../Scrollbar/index.mjs';const State = new Map();
+let updateState = (placement, id, callback) => {
+    const items = State.get(placement);
+    if (items) {
+        for (let i = 0; i < items.length; i++) {
+            let item = items[i];
+            if (item.id === id) {
+                items[i] = callback(item);
+                State.set(placement, items);
+                Renderar.dispatch();
+                break;
+            }
+        }
+    }
+};
+const ToastContainer = ({ placement }) => {
+    const items = State.get(placement);
+    if (!items || !(items === null || items === void 0 ? void 0 : items.length))
+        return jsx(Fragment, {});
+    let sxr = {};
+    let transition = "";
+    switch (placement) {
+        case "top-left":
+            sxr = {
+                top: 0,
+                left: 0
+            };
+            transition = "fadeRight";
+            break;
+        case "top-right":
+            sxr = {
+                top: 0,
+                right: 0
+            };
+            transition = "fadeLeft";
+            break;
+        case "top-center":
+            sxr = {
+                top: 0,
+                left: "50%",
+                transform: "translateX(-50%)"
+            };
+            transition = "fadeDown";
+            break;
+        case "bottom-right":
+            sxr = {
+                bottom: 0,
+                right: 0
+            };
+            transition = "fadeLeft";
+            break;
+        case "bottom-left":
+            sxr = {
+                bottom: 0,
+                left: 0
+            };
+            transition = "fadeRight";
+            break;
+        case "bottom-center":
+            sxr = {
+                bottom: 0,
+                left: "50%",
+                transform: "translateX(-50%)"
+            };
+            transition = "fadeUp";
+            break;
+    }
+    return (jsx(Tag, Object.assign({ sxr: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", gap: 2, flexDirection: "column", maxHeight: "100%", width: 320 }, sxr) }, { children: jsx(Scrollbar, Object.assign({ style: {
+                padding: 8
+            } }, { children: items.map(({ open, id, props }) => {
+                let { content, closeable } = props, rest = __rest(props, ["content", "closeable"]);
+                closeable !== null && closeable !== void 0 ? closeable : (closeable = true);
+                return (jsx(Transition, Object.assign({ open: open, variant: transition, onClosed: () => {
+                        const items = State.get(placement);
+                        if (items) {
+                            for (let i = 0; i < items.length; i++) {
+                                let item = items[i];
+                                if (item.id === id) {
+                                    items.splice(i, 1);
+                                    State.set(placement, items);
+                                    Renderar.dispatch();
+                                    break;
+                                }
+                            }
+                        }
+                    }, onOpened: () => {
+                        let timer = setTimeout(() => {
+                            updateState(placement, id, (_item) => {
+                                _item.open = false;
+                                return _item;
+                            });
+                        }, 6000);
+                        updateState(placement, id, (_item) => {
+                            _item.timer = timer;
+                            return _item;
+                        });
+                    } }, { children: jsx(Alert, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1.5, onMouseEnter: () => {
+                            updateState(placement, id, (_item) => {
+                                clearTimeout(_item.timer);
+                                return _item;
+                            });
+                        }, onMouseLeave: () => {
+                            let timer = setTimeout(() => {
+                                updateState(placement, id, (_item) => {
+                                    _item.open = false;
+                                    return _item;
+                                });
+                            }, 6000);
+                            updateState(placement, id, (_item) => {
+                                _item.timer = timer;
+                                return _item;
+                            });
+                        }, onClose: closeable ? () => {
+                            updateState(placement, id, (_item) => {
+                                _item.open = false;
+                                clearTimeout(_item.timer);
+                                return _item;
+                            });
+                        } : undefined }, { children: content })) }), id));
+            }) })) })));
+};
+const uid = (p) => {
+    const id = Math.random().toString(32).substring(2, 5);
+    return `TOAST_CONTAINER_${p}_${id}`.toUpperCase();
+};
+Renderar.create(uid("TOP_LEFT"), () => jsx(ToastContainer, { placement: 'top-left' }));
+Renderar.create(uid("TOP_RIGHT"), () => jsx(ToastContainer, { placement: 'top-right' }));
+Renderar.create(uid("TOP_CENTER"), () => jsx(ToastContainer, { placement: 'top-center' }));
+Renderar.create(uid("BOTTOM_LEFT"), () => jsx(ToastContainer, { placement: 'bottom-left' }));
+Renderar.create(uid("BOTTOM_RIGHT"), () => jsx(ToastContainer, { placement: 'bottom-right' }));
+Renderar.create(uid("BOTTOM_CENTER"), () => jsx(ToastContainer, { placement: 'bottom-center' }));
+const Toast = {
+    open: (props) => {
+        let { placement } = props || {};
+        placement !== null && placement !== void 0 ? placement : (placement = "bottom-right");
+        let prev = State.get(placement) || [];
+        prev.push({
+            open: true,
+            id: Math.random().toString(),
+            props
+        });
+        State.set(placement, prev);
+        Renderar.dispatch();
+    }
+};export{Toast as default};//# sourceMappingURL=index.mjs.map

package/Toast/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\nimport { Tag, ColorTemplateColors, ColorTemplateType, useBreakpointPropsType, Transition } from '@xanui/core'\nimport { ReactElement } from \"react\";\nimport Renderar from '../ThemeProvider/RenderRoot';\nimport Alert, { AlertProps } from '../Alert';\nimport Scrollbar from '../Scrollbar';\n\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type ToastProps = {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    content?: AlertProps['children'];\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    placement?: PlacementType;\n    closeable?: useBreakpointPropsType<boolean>;\n}\n\ntype StateValue = { open: boolean, id: string, timer?: NodeJS.Timeout, props: ToastProps }\nconst State = new Map<PlacementType, StateValue[]>()\n\n\nlet updateState = (placement: PlacementType, id: string, callback: (item: StateValue) => StateValue) => {\n    const items = State.get(placement)\n    if (items) {\n        for (let i = 0; i < items.length; i++) {\n            let item = items[i]\n            if (item.id === id) {\n                items[i] = callback(item)\n                State.set(placement, items)\n                Renderar.dispatch()\n                break;\n            }\n        }\n    }\n}\n\nconst ToastContainer = ({ placement }: { placement: PlacementType }) => {\n    const items = State.get(placement)\n    if (!items || !items?.length) return <></>\n\n    let sxr: any = {}\n    let transition: any = \"\"\n    switch (placement) {\n        case \"top-left\":\n            sxr = {\n                top: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"top-right\":\n            sxr = {\n                top: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"top-center\":\n            sxr = {\n                top: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeDown\"\n            break;\n        case \"bottom-right\":\n            sxr = {\n                bottom: 0,\n                right: 0\n            }\n            transition = \"fadeLeft\"\n            break;\n        case \"bottom-left\":\n            sxr = {\n                bottom: 0,\n                left: 0\n            }\n            transition = \"fadeRight\"\n            break;\n        case \"bottom-center\":\n            sxr = {\n                bottom: 0,\n                left: \"50%\",\n                transform: \"translateX(-50%)\"\n            }\n            transition = \"fadeUp\"\n            break;\n    }\n    return (\n        <Tag\n            sxr={{\n                position: \"fixed\",\n                zIndex: 99999999,\n                display: \"flex\",\n                gap: 2,\n                flexDirection: \"column\",\n                maxHeight: \"100%\",\n                width: 320,\n                ...sxr\n            }}\n        >\n            <Scrollbar\n                style={{\n                    padding: 8\n                }}\n            >\n                {\n                    items.map(({ open, id, props }) => {\n                        let { content, closeable, ...rest } = props\n                        closeable ??= true\n                        return (\n                            <Transition\n                                key={id}\n                                open={open}\n                                variant={transition}\n                                onClosed={() => {\n                                    const items = State.get(placement)\n                                    if (items) {\n                                        for (let i = 0; i < items.length; i++) {\n                                            let item = items[i]\n                                            if (item.id === id) {\n                                                items.splice(i, 1)\n                                                State.set(placement, items)\n                                                Renderar.dispatch()\n                                                break;\n                                            }\n                                        }\n                                    }\n                                }}\n                                onOpened={() => {\n                                    let timer = setTimeout(() => {\n                                        updateState(placement, id, (_item) => {\n                                            _item.open = false\n                                            return _item\n                                        })\n                                    }, 6000)\n                                    updateState(placement, id, (_item) => {\n                                        _item.timer = timer\n                                        return _item\n                                    })\n                                }}\n                            >\n                                <Alert\n                                    shadow={2}\n                                    variant=\"fill\"\n                                    color=\"brand\"\n                                    {...rest as any}\n                                    mode=\"item\"\n                                    mb={1.5}\n                                    onMouseEnter={() => {\n                                        updateState(placement, id, (_item) => {\n                                            clearTimeout(_item.timer)\n                                            return _item\n                                        })\n                                    }}\n                                    onMouseLeave={() => {\n                                        let timer = setTimeout(() => {\n                                            updateState(placement, id, (_item) => {\n                                                _item.open = false\n                                                return _item\n                                            })\n                                        }, 6000)\n                                        updateState(placement, id, (_item) => {\n                                            _item.timer = timer\n                                            return _item\n                                        })\n                                    }}\n                                    onClose={closeable ? () => {\n                                        updateState(placement, id, (_item) => {\n                                            _item.open = false\n                                            clearTimeout(_item.timer)\n                                            return _item\n                                        })\n                                    } : undefined}\n                                >{content}</Alert>\n                            </Transition>\n                        )\n                    })\n                }\n            </Scrollbar>\n        </Tag>\n    )\n}\nconst uid = (p: string) => {\n    const id = Math.random().toString(32).substring(2, 5)\n    return `TOAST_CONTAINER_${p}_${id}`.toUpperCase()\n}\nRenderar.create(uid(\"TOP_LEFT\"), () => <ToastContainer placement='top-left' />)\nRenderar.create(uid(\"TOP_RIGHT\"), () => <ToastContainer placement='top-right' />)\nRenderar.create(uid(\"TOP_CENTER\"), () => <ToastContainer placement='top-center' />)\nRenderar.create(uid(\"BOTTOM_LEFT\"), () => <ToastContainer placement='bottom-left' />)\nRenderar.create(uid(\"BOTTOM_RIGHT\"), () => <ToastContainer placement='bottom-right' />)\nRenderar.create(uid(\"BOTTOM_CENTER\"), () => <ToastContainer placement='bottom-center' />)\n\nconst Toast = {\n    open: (props: ToastProps) => {\n        let { placement } = props || {}\n        placement ??= \"bottom-right\"\n        let prev = State.get(placement) || []\n        prev.push({\n            open: true,\n            id: Math.random().toString(),\n            props\n        })\n        State.set(placement, prev)\n        Renderar.dispatch()\n    }\n}\n\nexport default Toast"],"names":["_jsx"],"mappings":"2PAqBA,MAAM,KAAK,GAAG,IAAI,GAAG,EAA+B;AAGpD,IAAI,WAAW,GAAG,CAAC,SAAwB,EAAE,EAAU,EAAE,QAA0C,KAAI;IACnG,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC;AAClC,IAAA,IAAI,KAAK,EAAE;AACP,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACnC,YAAA,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;AACnB,YAAA,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;gBAChB,KAAK,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC;AACzB,gBAAA,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC;gBAC3B,QAAQ,CAAC,QAAQ,EAAE;gBACnB;AACH,YAAA;AACJ,QAAA;AACJ,IAAA;AACL,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,EAAE,SAAS,EAAgC,KAAI;IACnE,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC;AAClC,IAAA,IAAI,CAAC,KAAK,IAAI,EAAC,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM,CAAA;AAAE,QAAA,OAAOA,iBAAK;IAE1C,IAAI,GAAG,GAAQ,EAAE;IACjB,IAAI,UAAU,GAAQ,EAAE;AACxB,IAAA,QAAQ,SAAS;AACb,QAAA,KAAK,UAAU;AACX,YAAA,GAAG,GAAG;AACF,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,IAAI,EAAE;aACT;YACD,UAAU,GAAG,WAAW;YACxB;AACJ,QAAA,KAAK,WAAW;AACZ,YAAA,GAAG,GAAG;AACF,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,KAAK,EAAE;aACV;YACD,UAAU,GAAG,UAAU;YACvB;AACJ,QAAA,KAAK,YAAY;AACb,YAAA,GAAG,GAAG;AACF,gBAAA,GAAG,EAAE,CAAC;AACN,gBAAA,IAAI,EAAE,KAAK;AACX,gBAAA,SAAS,EAAE;aACd;YACD,UAAU,GAAG,UAAU;YACvB;AACJ,QAAA,KAAK,cAAc;AACf,YAAA,GAAG,GAAG;AACF,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,KAAK,EAAE;aACV;YACD,UAAU,GAAG,UAAU;YACvB;AACJ,QAAA,KAAK,aAAa;AACd,YAAA,GAAG,GAAG;AACF,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,IAAI,EAAE;aACT;YACD,UAAU,GAAG,WAAW;YACxB;AACJ,QAAA,KAAK,eAAe;AAChB,YAAA,GAAG,GAAG;AACF,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,IAAI,EAAE,KAAK;AACX,gBAAA,SAAS,EAAE;aACd;YACD,UAAU,GAAG,QAAQ;YACrB;AACP;AACD,IAAA,QACIA,GAAA,CAAC,GAAG,kBACA,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,QAAQ,EAChB,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,CAAC,EACN,aAAa,EAAE,QAAQ,EACvB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,GAAG,IACP,GAAG,CAAA,EAAA,EAAA,EAAA,QAAA,EAGVA,IAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EACN,KAAK,EAAE;AACH,gBAAA,OAAO,EAAE;AACZ,aAAA,EAAA,EAAA,EAAA,QAAA,EAGG,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAI;AAC9B,gBAAA,IAAI,EAAE,OAAO,EAAE,SAAS,EAAA,GAAc,KAAK,EAAd,IAAI,GAAA,MAAA,CAAK,KAAK,EAAvC,CAAA,SAAA,EAAA,WAAA,CAA+B,CAAQ;gBAC3C,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,IAAI,CAAA;AAClB,gBAAA,QACIA,GAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAEP,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,MAAK;wBACX,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC;AAClC,wBAAA,IAAI,KAAK,EAAE;AACP,4BAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACnC,gCAAA,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;AACnB,gCAAA,IAAI,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;AAChB,oCAAA,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;AAClB,oCAAA,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,CAAC;oCAC3B,QAAQ,CAAC,QAAQ,EAAE;oCACnB;AACH,gCAAA;AACJ,4BAAA;AACJ,wBAAA;AACL,oBAAA,CAAC,EACD,QAAQ,EAAE,MAAK;AACX,wBAAA,IAAI,KAAK,GAAG,UAAU,CAAC,MAAK;4BACxB,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK,KAAI;AACjC,gCAAA,KAAK,CAAC,IAAI,GAAG,KAAK;AAClB,gCAAA,OAAO,KAAK;AAChB,4BAAA,CAAC,CAAC;wBACN,CAAC,EAAE,IAAI,CAAC;wBACR,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK,KAAI;AACjC,4BAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACnB,4BAAA,OAAO,KAAK;AAChB,wBAAA,CAAC,CAAC;AACN,oBAAA,CAAC,EAAA,EAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACF,MAAM,EAAE,CAAC,EACT,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,OAAO,EAAA,EACT,IAAW,EAAA,EACf,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,GAAG,EACP,YAAY,EAAE,MAAK;4BACf,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK,KAAI;AACjC,gCAAA,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC;AACzB,gCAAA,OAAO,KAAK;AAChB,4BAAA,CAAC,CAAC;AACN,wBAAA,CAAC,EACD,YAAY,EAAE,MAAK;AACf,4BAAA,IAAI,KAAK,GAAG,UAAU,CAAC,MAAK;gCACxB,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK,KAAI;AACjC,oCAAA,KAAK,CAAC,IAAI,GAAG,KAAK;AAClB,oCAAA,OAAO,KAAK;AAChB,gCAAA,CAAC,CAAC;4BACN,CAAC,EAAE,IAAI,CAAC;4BACR,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK,KAAI;AACjC,gCAAA,KAAK,CAAC,KAAK,GAAG,KAAK;AACnB,gCAAA,OAAO,KAAK;AAChB,4BAAA,CAAC,CAAC;wBACN,CAAC,EACD,OAAO,EAAE,SAAS,GAAG,MAAK;4BACtB,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,KAAK,KAAI;AACjC,gCAAA,KAAK,CAAC,IAAI,GAAG,KAAK;AAClB,gCAAA,YAAY,CAAC,KAAK,CAAC,KAAK,CAAC;AACzB,gCAAA,OAAO,KAAK;AAChB,4BAAA,CAAC,CAAC;wBACN,CAAC,GAAG,SAAS,EAAA,EAAA,EAAA,QAAA,EACf,OAAO,EAAA,CAAA,CAAS,EAAA,CAAA,EA9Db,EAAE,CA+DE;AAErB,YAAA,CAAC,CAAC,EAAA,CAAA,CAEE,EAAA,CAAA,CACV;AAEd,CAAC;AACD,MAAM,GAAG,GAAG,CAAC,CAAS,KAAI;AACtB,IAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC;IACrD,OAAO,CAAA,gBAAA,EAAmB,CAAC,CAAA,CAAA,EAAI,EAAE,EAAE,CAAC,WAAW,EAAE;AACrD,CAAC;AACD,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,MAAMA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAC,UAAU,EAAA,CAAG,CAAC;AAC/E,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,MAAMA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAC,WAAW,EAAA,CAAG,CAAC;AACjF,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,MAAMA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAC,YAAY,EAAA,CAAG,CAAC;AACnF,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,MAAMA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAC,aAAa,EAAA,CAAG,CAAC;AACrF,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,EAAE,MAAMA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAC,cAAc,EAAA,CAAG,CAAC;AACvF,QAAQ,CAAC,MAAM,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,MAAMA,GAAA,CAAC,cAAc,EAAA,EAAC,SAAS,EAAC,eAAe,EAAA,CAAG,CAAC;AAEzF,MAAM,KAAK,GAAG;AACV,IAAA,IAAI,EAAE,CAAC,KAAiB,KAAI;AACxB,QAAA,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,IAAI,EAAE;QAC/B,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,cAAc,CAAA;QAC5B,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE;QACrC,IAAI,CAAC,IAAI,CAAC;AACN,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;YAC5B;AACH,SAAA,CAAC;AACF,QAAA,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC;QAC1B,QAAQ,CAAC,QAAQ,EAAE;IACvB;"}

package/Tooltip/index.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactElement } from 'react';
+import { MenuProps } from '../Menu/index.js';
+import { useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+
+type TooltipProps = {
+    children: ReactElement;
+    title: useBreakpointPropsType<string>;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    variant?: useBreakpointPropsType<ColorTemplateType>;
+    placement?: MenuProps['placement'];
+};
+declare const Tooltip: ({ children, title, variant, color, placement }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+export { Tooltip as default };
+export type { TooltipProps };

package/Tooltip/index.js

@@ -0,0 +1,29 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../Menu/index.js'),core=require('@xanui/core');const Tooltip = ({ children, title, variant, color, placement }) => {
+    var _a, _b;
+    const [target, setTarget] = React.useState();
+    const _p = {};
+    if (title)
+        _p.title = title;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    const p = core.useBreakpointProps(_p);
+    title = p.title;
+    color = (_a = p.color) !== null && _a !== void 0 ? _a : "default";
+    variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "fill";
+    placement !== null && placement !== void 0 ? placement : (placement = "bottom");
+    const _c = core.useColorTemplate(color, variant), { hover } = _c, template = tslib.__rest(_c, ["hover"]);
+    if (!children || Array.isArray(children))
+        throw new Error("Invalid children in Toast");
+    const first = React.Children.toArray(children).shift();
+    const child = React.cloneElement(first, {
+        onMouseEnter: (e) => {
+            setTarget(e.target);
+        },
+        onMouseLeave: () => setTarget(null)
+    });
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child, jsxRuntime.jsx(index.default, Object.assign({ target: target, placement: placement, slotProps: {
+                    content: Object.assign({ p: .5, shadow: 1 }, template)
+                } }, { children: title }))] }));
+};exports.default=Tooltip;//# sourceMappingURL=index.js.map

package/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n    const [target, setTarget] = useState<any>()\n    const _p: any = {}\n    if (title) _p.title = title\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    title = p.title\n    color = p.color ?? \"default\"\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const { hover, ...template } = useColorTemplate(color as any, variant as any)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n    const first: any = Children.toArray(children).shift();\n    const child = cloneElement(first, {\n        onMouseEnter: (e) => {\n            setTarget(e.target)\n        },\n        onMouseLeave: () => setTarget(null)\n    })\n\n\n    return (\n        <>\n            {child}\n            <Menu\n                target={target}\n                placement={placement}\n                slotProps={{\n                    content: {\n                        p: .5,\n                        shadow: 1,\n                        ...template\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":["useState","useBreakpointProps","useColorTemplate","__rest","Children","cloneElement","_jsxs","_Fragment","_jsx","Menu"],"mappings":"8NAcA,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAgB,KAAI;;IAC7E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,EAAO;IAC3C,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAC7B,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,QAAQ,CAAA;AAEtB,IAAA,MAAM,KAAyBC,qBAAgB,CAAC,KAAY,EAAE,OAAc,CAAC,EAAvE,EAAE,KAAK,OAAgE,EAA3D,QAAQ,GAAAC,YAAA,CAAA,EAAA,EAApB,CAAA,OAAA,CAAsB,CAAiD;IAC7E,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC;IACtF,MAAM,KAAK,GAAQC,cAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;AACrD,IAAA,MAAM,KAAK,GAAGC,kBAAY,CAAC,KAAK,EAAE;AAC9B,QAAA,YAAY,EAAE,CAAC,CAAC,KAAI;AAChB,YAAA,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QACvB,CAAC;AACD,QAAA,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;AACrC,KAAA,CAAC;AAGF,IAAA,QACIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACK,KAAK,EACNC,cAAA,CAACC,aAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;oBACP,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,CAAC,EAAE,EAAE,EACL,MAAM,EAAE,CAAC,EAAA,EACN,QAAQ;AAElB,iBAAA,EAAA,EAAA,EAAA,QAAA,EAEA,KAAY,EAAA,CAAA,CACV,CAAA,EAAA,CACR;AAEX"}

package/Tooltip/index.mjs

@@ -0,0 +1,29 @@
+import {__rest}from'tslib';import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState,Children,cloneElement}from'react';import Menu from'../Menu/index.mjs';import {useBreakpointProps,useColorTemplate}from'@xanui/core';const Tooltip = ({ children, title, variant, color, placement }) => {
+    var _a, _b;
+    const [target, setTarget] = useState();
+    const _p = {};
+    if (title)
+        _p.title = title;
+    if (color)
+        _p.color = color;
+    if (variant)
+        _p.variant = variant;
+    const p = useBreakpointProps(_p);
+    title = p.title;
+    color = (_a = p.color) !== null && _a !== void 0 ? _a : "default";
+    variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "fill";
+    placement !== null && placement !== void 0 ? placement : (placement = "bottom");
+    const _c = useColorTemplate(color, variant), { hover } = _c, template = __rest(_c, ["hover"]);
+    if (!children || Array.isArray(children))
+        throw new Error("Invalid children in Toast");
+    const first = Children.toArray(children).shift();
+    const child = cloneElement(first, {
+        onMouseEnter: (e) => {
+            setTarget(e.target);
+        },
+        onMouseLeave: () => setTarget(null)
+    });
+    return (jsxs(Fragment, { children: [child, jsx(Menu, Object.assign({ target: target, placement: placement, slotProps: {
+                    content: Object.assign({ p: .5, shadow: 1 }, template)
+                } }, { children: title }))] }));
+};export{Tooltip as default};//# sourceMappingURL=index.mjs.map

package/Tooltip/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n    const [target, setTarget] = useState<any>()\n    const _p: any = {}\n    if (title) _p.title = title\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    const p: any = useBreakpointProps(_p)\n    title = p.title\n    color = p.color ?? \"default\"\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const { hover, ...template } = useColorTemplate(color as any, variant as any)\n    if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n    const first: any = Children.toArray(children).shift();\n    const child = cloneElement(first, {\n        onMouseEnter: (e) => {\n            setTarget(e.target)\n        },\n        onMouseLeave: () => setTarget(null)\n    })\n\n\n    return (\n        <>\n            {child}\n            <Menu\n                target={target}\n                placement={placement}\n                slotProps={{\n                    content: {\n                        p: .5,\n                        shadow: 1,\n                        ...template\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":["_jsxs","_Fragment","_jsx"],"mappings":"kOAcA,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAgB,KAAI;;IAC7E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAO;IAC3C,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAC7B,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAT,SAAS,IAAT,SAAS,GAAK,QAAQ,CAAA;AAEtB,IAAA,MAAM,KAAyB,gBAAgB,CAAC,KAAY,EAAE,OAAc,CAAC,EAAvE,EAAE,KAAK,OAAgE,EAA3D,QAAQ,GAAA,MAAA,CAAA,EAAA,EAApB,CAAA,OAAA,CAAsB,CAAiD;IAC7E,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;AAAE,QAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC;IACtF,MAAM,KAAK,GAAQ,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;AACrD,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,EAAE;AAC9B,QAAA,YAAY,EAAE,CAAC,CAAC,KAAI;AAChB,YAAA,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;QACvB,CAAC;AACD,QAAA,YAAY,EAAE,MAAM,SAAS,CAAC,IAAI;AACrC,KAAA,CAAC;AAGF,IAAA,QACIA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACK,KAAK,EACNC,GAAA,CAAC,IAAI,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE;oBACP,OAAO,EAAA,MAAA,CAAA,MAAA,CAAA,EACH,CAAC,EAAE,EAAE,EACL,MAAM,EAAE,CAAC,EAAA,EACN,QAAQ;AAElB,iBAAA,EAAA,EAAA,EAAA,QAAA,EAEA,KAAY,EAAA,CAAA,CACV,CAAA,EAAA,CACR;AAEX"}

package/ViewBox/index.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+import { ScrollbarProps } from '../Scrollbar/index.js';
+import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
+
+type ViewBoxProps<T extends TagComponentType = "div"> = TagProps<T> & {
+    startContent?: useBreakpointPropsType<ReactElement>;
+    endContent?: useBreakpointPropsType<ReactElement>;
+    horizental?: useBreakpointPropsType<boolean>;
+    slotProps?: {
+        scrollbar?: Omit<ScrollbarProps, 'children'>;
+    };
+};
+declare const ViewBox: React.ForwardRefExoticComponent<Omit<ViewBoxProps<"div">, "ref"> & React.RefAttributes<unknown>>;
+
+export { ViewBox as default };
+export type { ViewBoxProps };

package/ViewBox/index.js

@@ -0,0 +1,21 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../Scrollbar/index.js'),core=require('@xanui/core');const ViewBox = React.forwardRef((_a, ref) => {
+    var _b;
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let [_c] = core.useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = tslib.__rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
+    const _p = {};
+    if (startContent)
+        _p.startContent = startContent;
+    if (endContent)
+        _p.endContent = endContent;
+    if (horizental)
+        _p.horizental = horizental;
+    const p = core.useBreakpointProps(_p);
+    startContent = p.startContent;
+    endContent = p.endContent;
+    horizental = p.horizental;
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { sxr: {
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: horizental ? "row" : "column"
+        }, baseClass: 'viewbox', ref: ref }, { children: [startContent && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column" }, { children: startContent })), jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})) }, { children: children })), endContent && jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column" }, { children: endContent }))] })));
+});exports.default=ViewBox;//# sourceMappingURL=index.js.map

package/ViewBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    startContent?: useBreakpointPropsType<ReactElement>;\n    endContent?: useBreakpointPropsType<ReactElement>;\n    horizental?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        scrollbar?: Omit<ScrollbarProps, 'children'>;\n    }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n    let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n    const _p: any = {}\n    if (startContent) _p.startContent = startContent\n    if (endContent) _p.endContent = endContent\n    if (horizental) _p.horizental = horizental\n    const p: any = useBreakpointProps(_p)\n    startContent = p.startContent\n    endContent = p.endContent\n    horizental = p.horizental\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                flexDirection: horizental ? \"row\" : \"column\"\n            }}\n            baseClass='viewbox'\n            ref={ref}\n        >\n            {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n            <Scrollbar\n                {...slotProps?.scrollbar}\n                className='viewbox-content'\n                style={{\n                    flex: 1,\n                    display: \"flex\",\n                    flexDirection: horizental ? \"row\" : \"column\",\n                    ...(slotProps?.scrollbar?.style || {})\n                }}\n            >\n                {children}\n            </Scrollbar>\n            {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ViewBox\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Scrollbar"],"mappings":"mOAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkEC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIC,eAAA,CAACC,QAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,cAAA,CAACD,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,EAAA,EAAA,QAAA,EAAG,YAAY,EAAA,CAAA,CAAO,EAClIC,cAAA,CAACC,aAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,EAAA,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAID,cAAA,CAACD,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,EAAA,EAAA,QAAA,EAAG,UAAU,EAAA,CAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC"}

package/ViewBox/index.mjs

@@ -0,0 +1,21 @@
+import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import Scrollbar from'../Scrollbar/index.mjs';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';const ViewBox = React.forwardRef((_a, ref) => {
+    var _b;
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let [_c] = useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = __rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
+    const _p = {};
+    if (startContent)
+        _p.startContent = startContent;
+    if (endContent)
+        _p.endContent = endContent;
+    if (horizental)
+        _p.horizental = horizental;
+    const p = useBreakpointProps(_p);
+    startContent = p.startContent;
+    endContent = p.endContent;
+    horizental = p.horizental;
+    return (jsxs(Tag, Object.assign({}, props, { sxr: {
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: horizental ? "row" : "column"
+        }, baseClass: 'viewbox', ref: ref }, { children: [startContent && jsx(Tag, Object.assign({ baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column" }, { children: startContent })), jsx(Scrollbar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})) }, { children: children })), endContent && jsx(Tag, Object.assign({ baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column" }, { children: endContent }))] })));
+});export{ViewBox as default};//# sourceMappingURL=index.mjs.map

package/ViewBox/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    startContent?: useBreakpointPropsType<ReactElement>;\n    endContent?: useBreakpointPropsType<ReactElement>;\n    horizental?: useBreakpointPropsType<boolean>;\n    slotProps?: {\n        scrollbar?: Omit<ScrollbarProps, 'children'>;\n    }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n    let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n    const _p: any = {}\n    if (startContent) _p.startContent = startContent\n    if (endContent) _p.endContent = endContent\n    if (horizental) _p.horizental = horizental\n    const p: any = useBreakpointProps(_p)\n    startContent = p.startContent\n    endContent = p.endContent\n    horizental = p.horizental\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                justifyContent: \"space-between\",\n                flexDirection: horizental ? \"row\" : \"column\"\n            }}\n            baseClass='viewbox'\n            ref={ref}\n        >\n            {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n            <Scrollbar\n                {...slotProps?.scrollbar}\n                className='viewbox-content'\n                style={{\n                    flex: 1,\n                    display: \"flex\",\n                    flexDirection: horizental ? \"row\" : \"column\",\n                    ...(slotProps?.scrollbar?.style || {})\n                }}\n            >\n                {children}\n            </Scrollbar>\n            {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ViewBox\n"],"names":["_jsxs","_jsx"],"mappings":"yMAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkE,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIA,IAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,EAAA,EAAA,QAAA,EAAG,YAAY,EAAA,CAAA,CAAO,EAClIA,GAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,EAAA,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,EAAA,EAAA,QAAA,EAAG,UAAU,EAAA,CAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC"}

package/index.d.ts

@@ -0,0 +1,56 @@
+export { default as Accordion } from './Accordion/index.js';
+export { default as Alert } from './Alert/index.js';
+export { default as Avatar } from './Avatar/index.js';
+export { default as Badge } from './Badge/index.js';
+export { default as Box } from './Box/index.js';
+export { default as Button } from './Button/index.js';
+export { default as ButtonGroup } from './ButtonGroup/index.js';
+export { default as Calendar } from './Calendar/index.js';
+export { default as CalendarInput } from './CalendarInput/index.js';
+export { default as Checkbox } from './Checkbox/index.js';
+export { default as Chip } from './Chip/index.js';
+export { default as CircleProgress } from './CircleProgress/index.js';
+export { default as ClickOutside } from './ClickOutside/index.js';
+export { default as Collaps } from './Collaps/index.js';
+export { default as Container } from './Container/index.js';
+export { default as Datatable } from './Datatable/index.js';
+export { default as Divider } from './Divider/index.js';
+export { default as Drawer } from './Drawer/index.js';
+export { default as Form } from './Form/index.js';
+export { default as GridContainer } from './GridContainer/index.js';
+export { default as GridItem } from './GridItem/index.js';
+export { default as IconButton } from './IconButton/index.js';
+export { default as Image } from './Image/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Label } from './Label/index.js';
+export { default as Layer } from './Layer/index.js';
+export { default as LineProgress } from './LineProgress/index.js';
+export { default as List } from './List/index.js';
+export { default as ListItem } from './ListItem/index.js';
+export { default as LoadingBox } from './LoadingBox/index.js';
+export { default as Menu } from './Menu/index.js';
+export { default as Modal } from './Modal/index.js';
+export { default as NoSSR } from './NoSSR/index.js';
+export { default as Option } from './Option/index.js';
+export { default as Paper } from './Paper/index.js';
+export { default as Portal } from './Portal/index.js';
+export { default as Radio } from './Radio/index.js';
+export { default as Scrollbar } from './Scrollbar/index.js';
+export { default as Select } from './Select/index.js';
+export { default as Stack } from './Stack/index.js';
+export { default as Switch } from './Switch/index.js';
+export { default as Tab } from './Tab/index.js';
+export { default as Table } from './Table/index.js';
+export { default as TableBody } from './TableBody/index.js';
+export { default as TableCell } from './TableCell/index.js';
+export { default as TableFooter } from './TableFooter/index.js';
+export { default as TableHead } from './TableHead/index.js';
+export { default as TablePagination } from './TablePagination/index.js';
+export { default as TableRow } from './TableRow/index.js';
+export { default as Tabs } from './Tabs/index.js';
+export { default as Text } from './Text/index.js';
+export { default as ThemeProvider } from './ThemeProvider/index.js';
+export { default as Toast } from './Toast/index.js';
+export { default as Tooltip } from './Tooltip/index.js';
+export { default as useCorner } from './useCorner/index.js';
+export { default as ViewBox } from './ViewBox/index.js';

package/index.js

@@ -0,0 +1 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var index=require('./Accordion/index.js'),index$1=require('./Alert/index.js'),index$2=require('./Avatar/index.js'),index$3=require('./Badge/index.js'),index$4=require('./Box/index.js'),index$5=require('./Button/index.js'),index$6=require('./ButtonGroup/index.js'),index$7=require('./Calendar/index.js'),index$8=require('./CalendarInput/index.js'),index$9=require('./Checkbox/index.js'),index$a=require('./Chip/index.js'),index$b=require('./CircleProgress/index.js'),index$c=require('./ClickOutside/index.js'),index$d=require('./Collaps/index.js'),index$e=require('./Container/index.js'),index$f=require('./Datatable/index.js'),index$g=require('./Divider/index.js'),index$h=require('./Drawer/index.js'),index$i=require('./Form/index.js'),index$j=require('./GridContainer/index.js'),index$k=require('./GridItem/index.js'),index$l=require('./IconButton/index.js'),index$m=require('./Image/index.js'),index$n=require('./Input/index.js'),index$o=require('./Label/index.js'),index$p=require('./Layer/index.js'),index$q=require('./LineProgress/index.js'),index$r=require('./List/index.js'),index$s=require('./ListItem/index.js'),index$t=require('./LoadingBox/index.js'),index$u=require('./Menu/index.js'),index$v=require('./Modal/index.js'),index$w=require('./NoSSR/index.js'),index$x=require('./Option/index.js'),index$y=require('./Paper/index.js'),index$z=require('./Portal/index.js'),index$A=require('./Radio/index.js'),index$B=require('./Scrollbar/index.js'),index$C=require('./Select/index.js'),index$D=require('./Stack/index.js'),index$E=require('./Switch/index.js'),index$F=require('./Tab/index.js'),index$G=require('./Table/index.js'),index$H=require('./TableBody/index.js'),index$I=require('./TableCell/index.js'),index$J=require('./TableFooter/index.js'),index$K=require('./TableHead/index.js'),index$L=require('./TablePagination/index.js'),index$M=require('./TableRow/index.js'),index$N=require('./Tabs/index.js'),index$O=require('./Text/index.js'),index$P=require('./ThemeProvider/index.js'),index$Q=require('./Toast/index.js'),index$R=require('./Tooltip/index.js'),index$S=require('./useCorner/index.js'),index$T=require('./ViewBox/index.js');exports.Accordion=index.default;exports.Alert=index$1.default;exports.Avatar=index$2.default;exports.Badge=index$3.default;exports.Box=index$4.default;exports.Button=index$5.default;exports.ButtonGroup=index$6.default;exports.Calendar=index$7.default;exports.CalendarInput=index$8.default;exports.Checkbox=index$9.default;exports.Chip=index$a.default;exports.CircleProgress=index$b.default;exports.ClickOutside=index$c.default;exports.Collaps=index$d.default;exports.Container=index$e.default;exports.Datatable=index$f.default;exports.Divider=index$g.default;exports.Drawer=index$h.default;exports.Form=index$i.default;exports.GridContainer=index$j.default;exports.GridItem=index$k.default;exports.IconButton=index$l.default;exports.Image=index$m.default;exports.Input=index$n.default;exports.Label=index$o.default;exports.Layer=index$p.default;exports.LineProgress=index$q.default;exports.List=index$r.default;exports.ListItem=index$s.default;exports.LoadingBox=index$t.default;exports.Menu=index$u.default;exports.Modal=index$v.default;exports.NoSSR=index$w.default;exports.Option=index$x.default;exports.Paper=index$y.default;exports.Portal=index$z.default;exports.Radio=index$A.default;exports.Scrollbar=index$B.default;exports.Select=index$C.default;exports.Stack=index$D.default;exports.Switch=index$E.default;exports.Tab=index$F.default;exports.Table=index$G.default;exports.TableBody=index$H.default;exports.TableCell=index$I.default;exports.TableFooter=index$J.default;exports.TableHead=index$K.default;exports.TablePagination=index$L.default;exports.TableRow=index$M.default;exports.Tabs=index$N.default;exports.Text=index$O.default;exports.ThemeProvider=index$P.default;exports.Toast=index$Q.default;exports.Tooltip=index$R.default;exports.useCorner=index$S.default;exports.ViewBox=index$T.default;//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}