@xanui/ui 1.1.37 → 1.1.40

package/TablePagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\r\n    page: number;\r\n    total: number;\r\n    perpage?: number;\r\n    perpages?: number[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    onChange?: (state: TablePaginationState) => void;\r\n\r\n    slotProps?: {\r\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\r\n    }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n    color ??= \"default\"\r\n    variant ??= \"fill\"\r\n    perpages ??= [30, 50, 100]\r\n    perpage = perpage || perpages[0] as number\r\n    const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n\r\n    const chunks = useMemo(() => {\r\n        const chunks: any = [];\r\n        let _page = 1;\r\n        for (let from = 0; from < total; from += perpage) {\r\n            const to = Math.min(from + perpage, total)\r\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n            _page++\r\n        }\r\n        return chunks\r\n    }, [perpage, perpages, total])\r\n\r\n    if (!chunks.length) {\r\n        return <></>\r\n    }\r\n\r\n    const current = chunks[page] || chunks[1]\r\n    const hasNext = !!chunks[page + 1]\r\n    const hasPrev = !!chunks[page - 1]\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"row\",\r\n                gap: 1,\r\n                alignItems: \"center\"\r\n            }}\r\n            baseClass='table-pagination'\r\n            ref={ref}\r\n        >\r\n            {\r\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n                    <Text fontSize=\"button\">PER PAGE</Text>\r\n                    <Select\r\n                        {...slotProps?.select}\r\n                        width={(perpage.toString().length * 10) + 60}\r\n                        minWidth={\"auto\"}\r\n                        maxWidth={\"auto\"}\r\n                        value={perpage}\r\n                        onChange={(value: any) => {\r\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\r\n                        }}\r\n                    >\r\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n                    </Select>\r\n                </Tag>\r\n            }\r\n            <Tag\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    gap: 1,\r\n                    alignItems: 'center'\r\n                }}\r\n            >\r\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n                <Text color=\"text.secondary\">of</Text>\r\n                <Text fontSize=\"button\">{total}</Text>\r\n            </Tag>\r\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasPrev}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page - 1]);\r\n                    }}\r\n                >\r\n                    <PrevIcon />\r\n                </IconButton>\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasNext}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page + 1]);\r\n                    }}\r\n                >\r\n                    <NextIcon />\r\n                </IconButton>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport Text from '../Text'\r\nimport Select, { SelectProps } from '../Select'\r\nimport Option from '../Option'\r\nimport IconButton, { IconButtonProps } from '../IconButton'\r\nimport React, { useMemo } from 'react'\r\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\r\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\r\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\r\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\r\n    page: number;\r\n    total: number;\r\n    perpage?: number;\r\n    perpages?: number[];\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    onChange?: (state: TablePaginationState) => void;\r\n\r\n    slotProps?: {\r\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\r\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\r\n    }\r\n}\r\n\r\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\r\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\r\n    color ??= \"default\"\r\n    variant ??= \"fill\"\r\n    perpages ??= [30, 50, 100]\r\n    perpage = perpage || perpages[0] as number\r\n    const isPerpage = perpages[0] && perpages.length >= 1\r\n\r\n\r\n    const chunks = useMemo(() => {\r\n        const chunks: any = [];\r\n        let _page = 1;\r\n        for (let from = 0; from < total; from += perpage) {\r\n            const to = Math.min(from + perpage, total)\r\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\r\n            _page++\r\n        }\r\n        return chunks\r\n    }, [perpage, perpages, total])\r\n\r\n    if (!chunks.length) {\r\n        return <></>\r\n    }\r\n\r\n    const current = chunks[page] || chunks[1]\r\n    const hasNext = !!chunks[page + 1]\r\n    const hasPrev = !!chunks[page - 1]\r\n\r\n    return (\r\n        <Tag\r\n            {...props}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: \"row\",\r\n                gap: 1,\r\n                alignItems: \"center\"\r\n            }}\r\n            baseClass='table-pagination'\r\n            ref={ref}\r\n        >\r\n            {\r\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\r\n                    <Text fontSize=\"button\">PER PAGE</Text>\r\n                    <Select\r\n                        {...slotProps?.select}\r\n                        width={(perpage.toString().length * 10) + 60}\r\n                        minWidth={\"auto\"}\r\n                        maxWidth={\"auto\"}\r\n                        value={perpage}\r\n                        onChange={(value: any) => {\r\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\r\n                        }}\r\n                    >\r\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\r\n                    </Select>\r\n                </Tag>\r\n            }\r\n            <Tag\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    gap: 1,\r\n                    alignItems: 'center'\r\n                }}\r\n            >\r\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\r\n                <Text color=\"text.secondary\">of</Text>\r\n                <Text fontSize=\"button\">{total}</Text>\r\n            </Tag>\r\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasPrev}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page - 1]);\r\n                    }}\r\n                >\r\n                    <PrevIcon />\r\n                </IconButton>\r\n                <IconButton\r\n                    {...slotProps?.button}\r\n                    color={color}\r\n                    variant={variant}\r\n                    size={30}\r\n                    disabled={!hasNext}\r\n                    onClick={() => {\r\n                        onChange && onChange(chunks[page + 1]);\r\n                    }}\r\n                >\r\n                    <NextIcon />\r\n                </IconButton>\r\n            </Tag>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}

package/TableRow/index.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const TableRow = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'table-row', verticalAlign: "middle" }, rest, { component: "tr", ref: ref, children: children })));
+});
+
+module.exports = TableRow;
+//# sourceMappingURL=index.cjs.map

package/TableRow/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type TableRowProps<T extends TagComponentType = \"tr\"> = TagProps<T>\r\n\r\nconst TableRow = React.forwardRef(<T extends TagComponentType = \"tr\">({ children, ...rest }: TableRowProps<T>, ref: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            baseClass='table-row'\r\n            verticalAlign=\"middle\"\r\n            {...rest}\r\n            component=\"tr\"\r\n            ref={ref}>{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default TableRow"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAuC,EAAE,GAAmB,KAAI;AAAhE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,WAAW,EACrB,aAAa,EAAC,QAAQ,EAAA,EAClB,IAAI,EAAA,EACR,SAAS,EAAC,IAAI,EACd,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAO;AAEtC,CAAC;;;;"}

package/TableRow/index.js

@@ -1,14 +1,12 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
 
 const TableRow = React.forwardRef((_a, ref) => {
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'table-row', verticalAlign: "middle" }, rest, { component: "tr", ref: ref, children: children })));
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (jsx(Tag, Object.assign({ baseClass: 'table-row', verticalAlign: "middle" }, rest, { component: "tr", ref: ref, children: children })));
 });
 
-module.exports = TableRow;
+export { TableRow as default };
 //# sourceMappingURL=index.js.map

package/TableRow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type TableRowProps<T extends TagComponentType = \"tr\"> = TagProps<T>\r\n\r\nconst TableRow = React.forwardRef(<T extends TagComponentType = \"tr\">({ children, ...rest }: TableRowProps<T>, ref: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            baseClass='table-row'\r\n            verticalAlign=\"middle\"\r\n            {...rest}\r\n            component=\"tr\"\r\n            ref={ref}>{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default TableRow"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAuC,EAAE,GAAmB,KAAI;AAAhE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,WAAW,EACrB,aAAa,EAAC,QAAQ,EAAA,EAClB,IAAI,EAAA,EACR,SAAS,EAAC,IAAI,EACd,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAO;AAEtC,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type TableRowProps<T extends TagComponentType = \"tr\"> = TagProps<T>\r\n\r\nconst TableRow = React.forwardRef(<T extends TagComponentType = \"tr\">({ children, ...rest }: TableRowProps<T>, ref: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            baseClass='table-row'\r\n            verticalAlign=\"middle\"\r\n            {...rest}\r\n            component=\"tr\"\r\n            ref={ref}>{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default TableRow"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAuC,EAAE,GAAmB,KAAI;AAAhE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,WAAW,EACrB,aAAa,EAAC,QAAQ,EAAA,EAClB,IAAI,EAAA,EACR,SAAS,EAAC,IAAI,EACd,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAO;AAEtC,CAAC;;;;"}

package/Tabs/index.cjs

@@ -0,0 +1,201 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+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 = tslib.__rest(_a, ["onChange", "value", "children"]);
+    let [_e] = core.useInterface("Tabs", props, {}), { verticle, color, variant, indicatorSize, disableTransition, slotProps } = _e, rest = tslib.__rest(_e, ["verticle", "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 = core.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;
+    disableTransition = p.disableTransition;
+    indicatorSize = (_d = p.indicatorSize) !== null && _d !== void 0 ? _d : 3;
+    ref = ref || React.useRef(null);
+    const containerRef = React.useRef(null);
+    const [trans, setTrans] = React.useState();
+    const { childs, selectedIndex } = React.useMemo(() => {
+        let info = {
+            childs: null,
+            selectedIndex: 0
+        };
+        info.childs = React.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 React.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]);
+    React.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;
+                }
+                anim = () => v;
+            }
+            else {
+                let v = {
+                    from: {
+                        left: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.left) || 0,
+                        width: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.width) || 0,
+                    },
+                    to: {
+                        left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
+                        width: (rect === null || rect === void 0 ? void 0 : rect.width) || 0,
+                    },
+                };
+                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 = React.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 (jsxRuntime.jsxs(core.Tag, Object.assign({}, rest, { baseClass: 'tabs', ref: ref, sxr: {
+            position: "relative",
+            zIndex: 1,
+            display: "inline-block"
+        }, children: [jsxRuntime.jsx(core.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 })), jsxRuntime.jsx(core.Transition, { open: !!trans, variant: trans, duration: trans ? (disableTransition ? 0 : 250) : 0, easing: "smooth", children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'tabs-indicator', 
+                    // className={classname}
+                    sxr: {
+                        position: "absolute",
+                        zIndex: -1,
+                        cursor: "pointer",
+                        bgcolor: color
+                    } }, indicatorProps)) })] })));
+});
+
+module.exports = Tabs;
+//# sourceMappingURL=index.cjs.map

package/Tabs/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["'use client'\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n    children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n    value?: ValueType;\r\n    onChange?: (value: ValueType) => void;\r\n    variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    verticle?: useBreakpointPropsType<boolean>;\r\n    disableTransition?: useBreakpointPropsType<boolean>;\r\n    indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n    slotProps?: {\r\n        content?: Omit<TagProps, \"children\">;\r\n        button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n    }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n    const _rect: any = {};\r\n    const parentRect = parent.getBoundingClientRect();\r\n    const childRect = ele.getBoundingClientRect();\r\n    _rect.top = childRect.top - parentRect.top;\r\n    _rect.right = childRect.right - parentRect.right;\r\n    _rect.bottom = childRect.bottom - parentRect.bottom;\r\n    _rect.left = childRect.left - parentRect.left;\r\n    _rect.width = childRect.width;\r\n    _rect.height = childRect.height;\r\n    return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n    let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n    const _p: any = {}\r\n    if (variant) _p.variant = variant\r\n    if (color) _p.color = color\r\n    if (verticle) _p.verticle = verticle\r\n    if (disableTransition) _p.disableTransition = disableTransition\r\n    if (indicatorSize) _p.indicatorSize = indicatorSize\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    variant = p.variant ?? \"end-line\"\r\n    color = p.color ?? \"brand\"\r\n    verticle = p.verticle\r\n    disableTransition = p.disableTransition\r\n    indicatorSize = p.indicatorSize ?? 3\r\n\r\n    ref = ref || useRef(null)\r\n    const containerRef: any = useRef(null)\r\n    const [trans, setTrans] = useState<any>()\r\n\r\n    const { childs, selectedIndex } = useMemo(() => {\r\n        let info: any = {\r\n            childs: null,\r\n            selectedIndex: 0\r\n        }\r\n        info.childs = Children.map(children, (child: any, idx: number) => {\r\n            let selected = child.props.value === value\r\n            if (selected) {\r\n                info.selectedIndex = idx\r\n            }\r\n\r\n            let btnProps: any = {}\r\n            if (variant === 'fill' && selected) {\r\n                btnProps = {\r\n                    sx: {\r\n                        bgcolor: \"transparent!importnat\",\r\n                        color: \"#FFFFFF!important\"\r\n                    }\r\n                }\r\n            } else if (variant === 'soft' && selected) {\r\n                btnProps = {\r\n                    sx: {\r\n                        bgcolor: \"transparent!importnat\",\r\n                    }\r\n                }\r\n            }\r\n\r\n            // delete child.props.value\r\n            return cloneElement(child, {\r\n                corner: \"square\",\r\n                value: undefined,\r\n                onClick: () => {\r\n                    onChange && onChange(child.props.value)\r\n                },\r\n                ...slotProps?.button,\r\n                ...btnProps,\r\n                color: selected ? color : \"default\",\r\n                variant: \"text\",\r\n                classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n            })\r\n        })\r\n        return info\r\n    }, [children, onChange, value, variant, color, verticle])\r\n\r\n    useEffect(() => {\r\n        let con = containerRef.current\r\n        const conChilds = con.children\r\n        if (conChilds && conChilds[selectedIndex]) {\r\n            const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n            const prevRect = getRect(selectedTab, con)\r\n            const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n            let anim: any = () => ({})\r\n            if (verticle) {\r\n                let v: any = {\r\n                    from: {\r\n                        top: prevRect?.top || 0,\r\n                        height: prevRect?.height || 0,\r\n                    },\r\n                    to: {\r\n                        top: rect?.top || 0,\r\n                        height: rect?.height || 0,\r\n                    }\r\n                }\r\n\r\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n                    v.from.width = prevRect?.width\r\n                    v.to.width = rect?.width\r\n                }\r\n                anim = () => v\r\n            } else {\r\n                let v: any = {\r\n                    from: {\r\n                        left: prevRect?.left || 0,\r\n                        width: prevRect?.width || 0,\r\n                    },\r\n                    to: {\r\n                        left: rect?.left || 0,\r\n                        width: rect?.width || 0,\r\n                    },\r\n                }\r\n\r\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n                    v.from.height = prevRect?.height || 0\r\n                    v.to.height = rect?.height || 0\r\n                }\r\n                anim = () => v\r\n            }\r\n            setTrans(() => anim)\r\n        }\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [selectedIndex, variant, color, verticle])\r\n\r\n    let indicatorProps: any = useMemo(() => {\r\n        let _indicatorProps: any = {}\r\n        switch (variant) {\r\n            case \"start-line\":\r\n                if (verticle) {\r\n                    _indicatorProps = {\r\n                        left: 0,\r\n                        width: indicatorSize\r\n                    }\r\n                } else {\r\n                    _indicatorProps = {\r\n                        top: 0,\r\n                        height: indicatorSize\r\n                    }\r\n                }\r\n                break;\r\n            case \"end-line\":\r\n                if (verticle) {\r\n                    _indicatorProps = {\r\n                        right: 0,\r\n                        width: indicatorSize\r\n                    }\r\n                } else {\r\n                    _indicatorProps = {\r\n                        bottom: 0,\r\n                        height: indicatorSize\r\n                    }\r\n                }\r\n                break;\r\n            case \"fill\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    bgcolor: color\r\n                }\r\n                break;\r\n            case \"outline\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    border: \"1px solid\",\r\n                    borderColor: color,\r\n                    bgcolor: \"transparent\"\r\n                }\r\n                break;\r\n            case \"soft\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    bgcolor: `${color}.soft.primary`\r\n                }\r\n                break;\r\n            case \"text\":\r\n                _indicatorProps = {\r\n                    display: \"none\"\r\n                }\r\n                break;\r\n        }\r\n        return _indicatorProps\r\n    }, [selectedIndex, variant, color, verticle])\r\n\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            baseClass='tabs'\r\n            ref={ref}\r\n            sxr={{\r\n                position: \"relative\",\r\n                zIndex: 1,\r\n                display: \"inline-block\"\r\n            }}\r\n        >\r\n            <Tag\r\n                {...slotProps?.content}\r\n                baseClass='tabs-content'\r\n                sxr={{\r\n                    display: verticle ? \"flex\" : \"inline-flex\",\r\n                    flexDirection: verticle ? \"column\" : \"row\",\r\n                }}\r\n                ref={containerRef}\r\n            >\r\n                {childs}\r\n            </Tag>\r\n            <Transition\r\n                open={!!trans}\r\n                variant={trans}\r\n                duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n                easing=\"smooth\"\r\n            >\r\n                <Tag\r\n                    baseClass='tabs-indicator'\r\n                    // className={classname}\r\n                    sxr={{\r\n                        position: \"absolute\",\r\n                        zIndex: -1,\r\n                        cursor: \"pointer\",\r\n                        bgcolor: color\r\n                    }}\r\n                    {...indicatorProps}\r\n                >\r\n                </Tag>\r\n            </Transition>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;;;AAyBA;;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;;"}

package/Tabs/index.js

@@ -1,10 +1,8 @@
 "use client";
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+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';
 
 const getRect = (ele, parent) => {
     const _rect = {};
@@ -20,8 +18,8 @@ const getRect = (ele, parent) => {
 };
 const Tabs = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { onChange, value, children } = _a, props = tslib.__rest(_a, ["onChange", "value", "children"]);
-    let [_e] = core.useInterface("Tabs", props, {}), { verticle, color, variant, indicatorSize, disableTransition, slotProps } = _e, rest = tslib.__rest(_e, ["verticle", "color", "variant", "indicatorSize", "disableTransition", "slotProps"]);
+    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"]);
     const _p = {};
     if (variant)
         _p.variant = variant;
@@ -33,21 +31,21 @@ const Tabs = React.forwardRef((_a, ref) => {
         _p.disableTransition = disableTransition;
     if (indicatorSize)
         _p.indicatorSize = indicatorSize;
-    const p = core.useBreakpointProps(_p);
+    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;
     disableTransition = p.disableTransition;
     indicatorSize = (_d = p.indicatorSize) !== null && _d !== void 0 ? _d : 3;
-    ref = ref || React.useRef(null);
-    const containerRef = React.useRef(null);
-    const [trans, setTrans] = React.useState();
-    const { childs, selectedIndex } = React.useMemo(() => {
+    ref = ref || useRef(null);
+    const containerRef = useRef(null);
+    const [trans, setTrans] = useState();
+    const { childs, selectedIndex } = useMemo(() => {
         let info = {
             childs: null,
             selectedIndex: 0
         };
-        info.childs = React.Children.map(children, (child, idx) => {
+        info.childs = Children.map(children, (child, idx) => {
             let selected = child.props.value === value;
             if (selected) {
                 info.selectedIndex = idx;
@@ -69,13 +67,13 @@ const Tabs = React.forwardRef((_a, ref) => {
                 };
             }
             // delete child.props.value
-            return React.cloneElement(child, Object.assign(Object.assign(Object.assign({ corner: "square", value: undefined, onClick: () => {
+            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]);
-    React.useEffect(() => {
+    useEffect(() => {
         let con = containerRef.current;
         const conChilds = con.children;
         if (conChilds && conChilds[selectedIndex]) {
@@ -121,7 +119,7 @@ const Tabs = React.forwardRef((_a, ref) => {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedIndex, variant, color, verticle]);
-    let indicatorProps = React.useMemo(() => {
+    let indicatorProps = useMemo(() => {
         let _indicatorProps = {};
         switch (variant) {
             case "start-line":
@@ -180,14 +178,14 @@ const Tabs = React.forwardRef((_a, ref) => {
         }
         return _indicatorProps;
     }, [selectedIndex, variant, color, verticle]);
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, rest, { baseClass: 'tabs', ref: ref, sxr: {
+    return (jsxs(Tag, Object.assign({}, rest, { baseClass: 'tabs', ref: ref, sxr: {
             position: "relative",
             zIndex: 1,
             display: "inline-block"
-        }, children: [jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'tabs-content', sxr: {
+        }, 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 })), jsxRuntime.jsx(core.Transition, { open: !!trans, variant: trans, duration: trans ? (disableTransition ? 0 : 250) : 0, easing: "smooth", children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: 'tabs-indicator', 
+                }, 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",
@@ -197,5 +195,5 @@ const Tabs = React.forwardRef((_a, ref) => {
                     } }, indicatorProps)) })] })));
 });
 
-module.exports = Tabs;
+export { Tabs as default };
 //# sourceMappingURL=index.js.map

package/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n    children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n    value?: ValueType;\r\n    onChange?: (value: ValueType) => void;\r\n    variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    verticle?: useBreakpointPropsType<boolean>;\r\n    disableTransition?: useBreakpointPropsType<boolean>;\r\n    indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n    slotProps?: {\r\n        content?: Omit<TagProps, \"children\">;\r\n        button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n    }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n    const _rect: any = {};\r\n    const parentRect = parent.getBoundingClientRect();\r\n    const childRect = ele.getBoundingClientRect();\r\n    _rect.top = childRect.top - parentRect.top;\r\n    _rect.right = childRect.right - parentRect.right;\r\n    _rect.bottom = childRect.bottom - parentRect.bottom;\r\n    _rect.left = childRect.left - parentRect.left;\r\n    _rect.width = childRect.width;\r\n    _rect.height = childRect.height;\r\n    return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n    let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n    const _p: any = {}\r\n    if (variant) _p.variant = variant\r\n    if (color) _p.color = color\r\n    if (verticle) _p.verticle = verticle\r\n    if (disableTransition) _p.disableTransition = disableTransition\r\n    if (indicatorSize) _p.indicatorSize = indicatorSize\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    variant = p.variant ?? \"end-line\"\r\n    color = p.color ?? \"brand\"\r\n    verticle = p.verticle\r\n    disableTransition = p.disableTransition\r\n    indicatorSize = p.indicatorSize ?? 3\r\n\r\n    ref = ref || useRef(null)\r\n    const containerRef: any = useRef(null)\r\n    const [trans, setTrans] = useState<any>()\r\n\r\n    const { childs, selectedIndex } = useMemo(() => {\r\n        let info: any = {\r\n            childs: null,\r\n            selectedIndex: 0\r\n        }\r\n        info.childs = Children.map(children, (child: any, idx: number) => {\r\n            let selected = child.props.value === value\r\n            if (selected) {\r\n                info.selectedIndex = idx\r\n            }\r\n\r\n            let btnProps: any = {}\r\n            if (variant === 'fill' && selected) {\r\n                btnProps = {\r\n                    sx: {\r\n                        bgcolor: \"transparent!importnat\",\r\n                        color: \"#FFFFFF!important\"\r\n                    }\r\n                }\r\n            } else if (variant === 'soft' && selected) {\r\n                btnProps = {\r\n                    sx: {\r\n                        bgcolor: \"transparent!importnat\",\r\n                    }\r\n                }\r\n            }\r\n\r\n            // delete child.props.value\r\n            return cloneElement(child, {\r\n                corner: \"square\",\r\n                value: undefined,\r\n                onClick: () => {\r\n                    onChange && onChange(child.props.value)\r\n                },\r\n                ...slotProps?.button,\r\n                ...btnProps,\r\n                color: selected ? color : \"default\",\r\n                variant: \"text\",\r\n                classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n            })\r\n        })\r\n        return info\r\n    }, [children, onChange, value, variant, color, verticle])\r\n\r\n    useEffect(() => {\r\n        let con = containerRef.current\r\n        const conChilds = con.children\r\n        if (conChilds && conChilds[selectedIndex]) {\r\n            const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n            const prevRect = getRect(selectedTab, con)\r\n            const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n            let anim: any = () => ({})\r\n            if (verticle) {\r\n                let v: any = {\r\n                    from: {\r\n                        top: prevRect?.top || 0,\r\n                        height: prevRect?.height || 0,\r\n                    },\r\n                    to: {\r\n                        top: rect?.top || 0,\r\n                        height: rect?.height || 0,\r\n                    }\r\n                }\r\n\r\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n                    v.from.width = prevRect?.width\r\n                    v.to.width = rect?.width\r\n                }\r\n                anim = () => v\r\n            } else {\r\n                let v: any = {\r\n                    from: {\r\n                        left: prevRect?.left || 0,\r\n                        width: prevRect?.width || 0,\r\n                    },\r\n                    to: {\r\n                        left: rect?.left || 0,\r\n                        width: rect?.width || 0,\r\n                    },\r\n                }\r\n\r\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n                    v.from.height = prevRect?.height || 0\r\n                    v.to.height = rect?.height || 0\r\n                }\r\n                anim = () => v\r\n            }\r\n            setTrans(() => anim)\r\n        }\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [selectedIndex, variant, color, verticle])\r\n\r\n    let indicatorProps: any = useMemo(() => {\r\n        let _indicatorProps: any = {}\r\n        switch (variant) {\r\n            case \"start-line\":\r\n                if (verticle) {\r\n                    _indicatorProps = {\r\n                        left: 0,\r\n                        width: indicatorSize\r\n                    }\r\n                } else {\r\n                    _indicatorProps = {\r\n                        top: 0,\r\n                        height: indicatorSize\r\n                    }\r\n                }\r\n                break;\r\n            case \"end-line\":\r\n                if (verticle) {\r\n                    _indicatorProps = {\r\n                        right: 0,\r\n                        width: indicatorSize\r\n                    }\r\n                } else {\r\n                    _indicatorProps = {\r\n                        bottom: 0,\r\n                        height: indicatorSize\r\n                    }\r\n                }\r\n                break;\r\n            case \"fill\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    bgcolor: color\r\n                }\r\n                break;\r\n            case \"outline\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    border: \"1px solid\",\r\n                    borderColor: color,\r\n                    bgcolor: \"transparent\"\r\n                }\r\n                break;\r\n            case \"soft\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    bgcolor: `${color}.soft.primary`\r\n                }\r\n                break;\r\n            case \"text\":\r\n                _indicatorProps = {\r\n                    display: \"none\"\r\n                }\r\n                break;\r\n        }\r\n        return _indicatorProps\r\n    }, [selectedIndex, variant, color, verticle])\r\n\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            baseClass='tabs'\r\n            ref={ref}\r\n            sxr={{\r\n                position: \"relative\",\r\n                zIndex: 1,\r\n                display: \"inline-block\"\r\n            }}\r\n        >\r\n            <Tag\r\n                {...slotProps?.content}\r\n                baseClass='tabs-content'\r\n                sxr={{\r\n                    display: verticle ? \"flex\" : \"inline-flex\",\r\n                    flexDirection: verticle ? \"column\" : \"row\",\r\n                }}\r\n                ref={containerRef}\r\n            >\r\n                {childs}\r\n            </Tag>\r\n            <Transition\r\n                open={!!trans}\r\n                variant={trans}\r\n                duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n                easing=\"smooth\"\r\n            >\r\n                <Tag\r\n                    baseClass='tabs-indicator'\r\n                    // className={classname}\r\n                    sxr={{\r\n                        position: \"absolute\",\r\n                        zIndex: -1,\r\n                        cursor: \"pointer\",\r\n                        bgcolor: color\r\n                    }}\r\n                    {...indicatorProps}\r\n                >\r\n                </Tag>\r\n            </Transition>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;;;AAyBA;;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'\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n    children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n    value?: ValueType;\r\n    onChange?: (value: ValueType) => void;\r\n    variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    verticle?: useBreakpointPropsType<boolean>;\r\n    disableTransition?: useBreakpointPropsType<boolean>;\r\n    indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n    slotProps?: {\r\n        content?: Omit<TagProps, \"children\">;\r\n        button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n    }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n    const _rect: any = {};\r\n    const parentRect = parent.getBoundingClientRect();\r\n    const childRect = ele.getBoundingClientRect();\r\n    _rect.top = childRect.top - parentRect.top;\r\n    _rect.right = childRect.right - parentRect.right;\r\n    _rect.bottom = childRect.bottom - parentRect.bottom;\r\n    _rect.left = childRect.left - parentRect.left;\r\n    _rect.width = childRect.width;\r\n    _rect.height = childRect.height;\r\n    return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n    let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n    const _p: any = {}\r\n    if (variant) _p.variant = variant\r\n    if (color) _p.color = color\r\n    if (verticle) _p.verticle = verticle\r\n    if (disableTransition) _p.disableTransition = disableTransition\r\n    if (indicatorSize) _p.indicatorSize = indicatorSize\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    variant = p.variant ?? \"end-line\"\r\n    color = p.color ?? \"brand\"\r\n    verticle = p.verticle\r\n    disableTransition = p.disableTransition\r\n    indicatorSize = p.indicatorSize ?? 3\r\n\r\n    ref = ref || useRef(null)\r\n    const containerRef: any = useRef(null)\r\n    const [trans, setTrans] = useState<any>()\r\n\r\n    const { childs, selectedIndex } = useMemo(() => {\r\n        let info: any = {\r\n            childs: null,\r\n            selectedIndex: 0\r\n        }\r\n        info.childs = Children.map(children, (child: any, idx: number) => {\r\n            let selected = child.props.value === value\r\n            if (selected) {\r\n                info.selectedIndex = idx\r\n            }\r\n\r\n            let btnProps: any = {}\r\n            if (variant === 'fill' && selected) {\r\n                btnProps = {\r\n                    sx: {\r\n                        bgcolor: \"transparent!importnat\",\r\n                        color: \"#FFFFFF!important\"\r\n                    }\r\n                }\r\n            } else if (variant === 'soft' && selected) {\r\n                btnProps = {\r\n                    sx: {\r\n                        bgcolor: \"transparent!importnat\",\r\n                    }\r\n                }\r\n            }\r\n\r\n            // delete child.props.value\r\n            return cloneElement(child, {\r\n                corner: \"square\",\r\n                value: undefined,\r\n                onClick: () => {\r\n                    onChange && onChange(child.props.value)\r\n                },\r\n                ...slotProps?.button,\r\n                ...btnProps,\r\n                color: selected ? color : \"default\",\r\n                variant: \"text\",\r\n                classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n            })\r\n        })\r\n        return info\r\n    }, [children, onChange, value, variant, color, verticle])\r\n\r\n    useEffect(() => {\r\n        let con = containerRef.current\r\n        const conChilds = con.children\r\n        if (conChilds && conChilds[selectedIndex]) {\r\n            const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n            const prevRect = getRect(selectedTab, con)\r\n            const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n            let anim: any = () => ({})\r\n            if (verticle) {\r\n                let v: any = {\r\n                    from: {\r\n                        top: prevRect?.top || 0,\r\n                        height: prevRect?.height || 0,\r\n                    },\r\n                    to: {\r\n                        top: rect?.top || 0,\r\n                        height: rect?.height || 0,\r\n                    }\r\n                }\r\n\r\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n                    v.from.width = prevRect?.width\r\n                    v.to.width = rect?.width\r\n                }\r\n                anim = () => v\r\n            } else {\r\n                let v: any = {\r\n                    from: {\r\n                        left: prevRect?.left || 0,\r\n                        width: prevRect?.width || 0,\r\n                    },\r\n                    to: {\r\n                        left: rect?.left || 0,\r\n                        width: rect?.width || 0,\r\n                    },\r\n                }\r\n\r\n                if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n                    v.from.height = prevRect?.height || 0\r\n                    v.to.height = rect?.height || 0\r\n                }\r\n                anim = () => v\r\n            }\r\n            setTrans(() => anim)\r\n        }\r\n        // eslint-disable-next-line react-hooks/exhaustive-deps\r\n    }, [selectedIndex, variant, color, verticle])\r\n\r\n    let indicatorProps: any = useMemo(() => {\r\n        let _indicatorProps: any = {}\r\n        switch (variant) {\r\n            case \"start-line\":\r\n                if (verticle) {\r\n                    _indicatorProps = {\r\n                        left: 0,\r\n                        width: indicatorSize\r\n                    }\r\n                } else {\r\n                    _indicatorProps = {\r\n                        top: 0,\r\n                        height: indicatorSize\r\n                    }\r\n                }\r\n                break;\r\n            case \"end-line\":\r\n                if (verticle) {\r\n                    _indicatorProps = {\r\n                        right: 0,\r\n                        width: indicatorSize\r\n                    }\r\n                } else {\r\n                    _indicatorProps = {\r\n                        bottom: 0,\r\n                        height: indicatorSize\r\n                    }\r\n                }\r\n                break;\r\n            case \"fill\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    bgcolor: color\r\n                }\r\n                break;\r\n            case \"outline\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    border: \"1px solid\",\r\n                    borderColor: color,\r\n                    bgcolor: \"transparent\"\r\n                }\r\n                break;\r\n            case \"soft\":\r\n                _indicatorProps = {\r\n                    top: 0,\r\n                    bgcolor: `${color}.soft.primary`\r\n                }\r\n                break;\r\n            case \"text\":\r\n                _indicatorProps = {\r\n                    display: \"none\"\r\n                }\r\n                break;\r\n        }\r\n        return _indicatorProps\r\n    }, [selectedIndex, variant, color, verticle])\r\n\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            baseClass='tabs'\r\n            ref={ref}\r\n            sxr={{\r\n                position: \"relative\",\r\n                zIndex: 1,\r\n                display: \"inline-block\"\r\n            }}\r\n        >\r\n            <Tag\r\n                {...slotProps?.content}\r\n                baseClass='tabs-content'\r\n                sxr={{\r\n                    display: verticle ? \"flex\" : \"inline-flex\",\r\n                    flexDirection: verticle ? \"column\" : \"row\",\r\n                }}\r\n                ref={containerRef}\r\n            >\r\n                {childs}\r\n            </Tag>\r\n            <Transition\r\n                open={!!trans}\r\n                variant={trans}\r\n                duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n                easing=\"smooth\"\r\n            >\r\n                <Tag\r\n                    baseClass='tabs-indicator'\r\n                    // className={classname}\r\n                    sxr={{\r\n                        position: \"absolute\",\r\n                        zIndex: -1,\r\n                        cursor: \"pointer\",\r\n                        bgcolor: color\r\n                    }}\r\n                    {...indicatorProps}\r\n                >\r\n                </Tag>\r\n            </Transition>\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;AAyBA;;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;;"}

package/Text/index.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Text = React.forwardRef((_a, ref) => {
+    var _b;
+    var { children, variant } = _a, props = tslib.__rest(_a, ["children", "variant"]);
+    const _p = {};
+    if (variant)
+        _p.variant = variant;
+    const p = core.useBreakpointProps(_p);
+    variant = (_b = p.variant) !== null && _b !== void 0 ? _b : 'text';
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: variant.startsWith('h') ? variant : "p" }, props, { sxr: {
+            fontSize: variant,
+            lineHeight: variant,
+            fontWeight: variant,
+            color: "text.primary",
+        }, baseClass: 'text', ref: ref, children: children })));
+});
+
+module.exports = Text;
+//# sourceMappingURL=index.cjs.map

package/Text/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\r\n    variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\r\n}\r\n\r\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (variant) _p.variant = variant\r\n    const p: any = useBreakpointProps(_p)\r\n    variant = p.variant ?? 'text'\r\n\r\n    return (\r\n        <Tag\r\n            component={(variant as string).startsWith('h') ? variant as any : \"p\"}\r\n            {...props}\r\n            sxr={{\r\n                fontSize: variant,\r\n                lineHeight: variant,\r\n                fontWeight: variant,\r\n                color: \"text.primary\",\r\n            }}\r\n            baseClass='text'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Text\r\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Text/index.js

@@ -1,19 +1,17 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { useBreakpointProps, Tag } from '@xanui/core';
 
 const Text = React.forwardRef((_a, ref) => {
     var _b;
-    var { children, variant } = _a, props = tslib.__rest(_a, ["children", "variant"]);
+    var { children, variant } = _a, props = __rest(_a, ["children", "variant"]);
     const _p = {};
     if (variant)
         _p.variant = variant;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     variant = (_b = p.variant) !== null && _b !== void 0 ? _b : 'text';
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: variant.startsWith('h') ? variant : "p" }, props, { sxr: {
+    return (jsx(Tag, Object.assign({ component: variant.startsWith('h') ? variant : "p" }, props, { sxr: {
             fontSize: variant,
             lineHeight: variant,
             fontWeight: variant,
@@ -21,5 +19,5 @@ const Text = React.forwardRef((_a, ref) => {
         }, baseClass: 'text', ref: ref, children: children })));
 });
 
-module.exports = Text;
+export { Text as default };
 //# sourceMappingURL=index.js.map

package/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\r\n    variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\r\n}\r\n\r\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (variant) _p.variant = variant\r\n    const p: any = useBreakpointProps(_p)\r\n    variant = p.variant ?? 'text'\r\n\r\n    return (\r\n        <Tag\r\n            component={(variant as string).startsWith('h') ? variant as any : \"p\"}\r\n            {...props}\r\n            sxr={{\r\n                fontSize: variant,\r\n                lineHeight: variant,\r\n                fontWeight: variant,\r\n                color: \"text.primary\",\r\n            }}\r\n            baseClass='text'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Text\r\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAAA,YAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\r\n    variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\r\n}\r\n\r\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (variant) _p.variant = variant\r\n    const p: any = useBreakpointProps(_p)\r\n    variant = p.variant ?? 'text'\r\n\r\n    return (\r\n        <Tag\r\n            component={(variant as string).startsWith('h') ? variant as any : \"p\"}\r\n            {...props}\r\n            sxr={{\r\n                fontSize: variant,\r\n                lineHeight: variant,\r\n                fontWeight: variant,\r\n                color: \"text.primary\",\r\n            }}\r\n            baseClass='text'\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Text\r\n"],"names":["_jsx"],"mappings":";;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}