@xanui/ui 1.2.9 → 1.2.11

package/Tab/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef } from 'react'\nimport { TagComponentType, useInterface, useMergeRefs } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\nimport { useTabs } from '../Tabs/context';\nimport { TabsProps } from '../Tabs/types';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n    value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, value, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n    let [_props] = useInterface<any>(\"Tab\", props, {})\n    const container = useTabs() as TabsProps\n    if (!container) throw new Error(\"Tabs component must be used within a <Tabs>.\");\n    const btnRef = useRef<HTMLElement>(null)\n    const mergeRef = useMergeRefs(ref, btnRef)\n\n    useEffect(() => {\n        if (value === container.value) {\n            const e = {\n                type: \"click\",\n                target: btnRef.current,\n                currentTarget: btnRef.current,\n                preventDefault: () => { },\n                stopPropagation: () => { },\n            };\n\n            (container as any).onChange(value, e)\n        }\n    }, [container.variant, container.color])\n    const isSelected = value === container.value\n    return (\n        <Button\n            {..._props}\n            color={container.variant === \"text\" && isSelected ? container.color : 'surface'}\n            variant={\"text\"}\n            onClick={(e) => {\n                (container as any).onChange(value, e)\n            }}\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\n            ref={mergeRef}\n        >\n            {children}\n        </Button>\n    )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;;;;AAWA;;AACI;AACA;AACA;AAAgB;AAChB;;;AAII;AACI;AACI;;;AAGA;AACA;;AAGH;;;AAGT;AACA;AAMa;AACL;AAOZ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef } from 'react'\nimport { TagComponentType, useInterface, useMergeRefs } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\nimport { useTabs } from '../Tabs/context';\nimport { TabsProps } from '../Tabs/types';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n    value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, value, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n    let [_props] = useInterface<any>(\"Tab\", props, {})\n    const container = useTabs() as TabsProps\n    if (!container) throw new Error(\"Tabs component must be used within a <Tabs>.\");\n    const btnRef = useRef<HTMLElement>(null)\n    const mergeRef = useMergeRefs(ref, btnRef)\n\n    useEffect(() => {\n        if (value === container.value) {\n            const e = {\n                type: \"click\",\n                target: btnRef.current,\n                currentTarget: btnRef.current,\n                preventDefault: () => { },\n                stopPropagation: () => { },\n            };\n\n            (container as any).onChange(value, e)\n        }\n    }, [container.variant, container.color])\n    const isSelected = value === container.value\n    return (\n        <Button\n            {..._props}\n            color={container.variant === \"text\" && isSelected ? container.color : 'default'}\n            variant={\"text\"}\n            onClick={(e) => {\n                (container as any).onChange(value, e)\n            }}\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\n            ref={mergeRef}\n        >\n            {children}\n        </Button>\n    )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;;;;AAWA;;AACI;AACA;AACA;AAAgB;AAChB;;;AAII;AACI;AACI;;;AAGA;AACA;;AAGH;;;AAGT;AACA;AAMa;AACL;AAOZ;;"}

package/Tab/index.js

@@ -27,7 +27,7 @@ const Tab = React.forwardRef((_a, ref) => {
         }
     }, [container.variant, container.color]);
     const isSelected = value === container.value;
-    return (jsx(Button, Object.assign({}, _props, { color: container.variant === "text" && isSelected ? container.color : 'surface', variant: "text", onClick: (e) => {
+    return (jsx(Button, Object.assign({}, _props, { color: container.variant === "text" && isSelected ? container.color : 'default', variant: "text", onClick: (e) => {
             container.onChange(value, e);
         }, classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: mergeRef, children: children })));
 });

package/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef } from 'react'\nimport { TagComponentType, useInterface, useMergeRefs } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\nimport { useTabs } from '../Tabs/context';\nimport { TabsProps } from '../Tabs/types';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n    value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, value, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n    let [_props] = useInterface<any>(\"Tab\", props, {})\n    const container = useTabs() as TabsProps\n    if (!container) throw new Error(\"Tabs component must be used within a <Tabs>.\");\n    const btnRef = useRef<HTMLElement>(null)\n    const mergeRef = useMergeRefs(ref, btnRef)\n\n    useEffect(() => {\n        if (value === container.value) {\n            const e = {\n                type: \"click\",\n                target: btnRef.current,\n                currentTarget: btnRef.current,\n                preventDefault: () => { },\n                stopPropagation: () => { },\n            };\n\n            (container as any).onChange(value, e)\n        }\n    }, [container.variant, container.color])\n    const isSelected = value === container.value\n    return (\n        <Button\n            {..._props}\n            color={container.variant === \"text\" && isSelected ? container.color : 'surface'}\n            variant={\"text\"}\n            onClick={(e) => {\n                (container as any).onChange(value, e)\n            }}\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\n            ref={mergeRef}\n        >\n            {children}\n        </Button>\n    )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;;AAWA;;AACI;AACA;AACA;AAAgB;AAChB;;;AAII;AACI;AACI;;;AAGA;AACA;;AAGH;;;AAGT;AACA;AAMa;AACL;AAOZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef } from 'react'\nimport { TagComponentType, useInterface, useMergeRefs } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\nimport { useTabs } from '../Tabs/context';\nimport { TabsProps } from '../Tabs/types';\n\nexport type TabProps<T extends TagComponentType = \"button\"> = ButtonProps<T> & {\n    value?: string | number\n}\n\nconst Tab = React.forwardRef(<T extends TagComponentType = \"div\">({ children, value, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n    let [_props] = useInterface<any>(\"Tab\", props, {})\n    const container = useTabs() as TabsProps\n    if (!container) throw new Error(\"Tabs component must be used within a <Tabs>.\");\n    const btnRef = useRef<HTMLElement>(null)\n    const mergeRef = useMergeRefs(ref, btnRef)\n\n    useEffect(() => {\n        if (value === container.value) {\n            const e = {\n                type: \"click\",\n                target: btnRef.current,\n                currentTarget: btnRef.current,\n                preventDefault: () => { },\n                stopPropagation: () => { },\n            };\n\n            (container as any).onChange(value, e)\n        }\n    }, [container.variant, container.color])\n    const isSelected = value === container.value\n    return (\n        <Button\n            {..._props}\n            color={container.variant === \"text\" && isSelected ? container.color : 'default'}\n            variant={\"text\"}\n            onClick={(e) => {\n                (container as any).onChange(value, e)\n            }}\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\n            ref={mergeRef}\n        >\n            {children}\n        </Button>\n    )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;;AAWA;;AACI;AACA;AACA;AAAgB;AAChB;;;AAII;AACI;AACI;;;AAGA;AACA;;AAGH;;;AAGT;AACA;AAMa;AACL;AAOZ;;"}

package/Table/index.cjs

@@ -25,7 +25,7 @@ const Table = React.forwardRef((_a, ref) => {
     const p = core.useBreakpointProps(_p);
     evenColor = p.evenColor;
     size = (_b = p.size) !== null && _b !== void 0 ? _b : "medium";
-    color = (_c = p.color) !== null && _c !== void 0 ? _c : 'surface';
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : 'default';
     variant = (_d = p.variant) !== null && _d !== void 0 ? _d : "fill";
     borderType = (_e = p.borderType) !== null && _e !== void 0 ? _e : "line";
     const main = core.useColorTemplate(color, variant);
@@ -61,17 +61,17 @@ const Table = React.forwardRef((_a, ref) => {
     let border = {
         line: {
             borderBottom: "1px solid",
-            borderColor: "surface.divider",
+            borderColor: "default.divider",
         },
         box: {
             border: "1px solid",
-            borderColor: "surface.divider",
+            borderColor: "default.divider",
         },
         none: {}
     };
     return (jsxRuntime.jsx(index, { style: {
             overflowY: "hidden"
-        }, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "surface.contrast", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
+        }, children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "default.contrast", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
                     bgcolor: main.main.bgcolor,
                     "& th": {
                         color: main.main.color

package/Table/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Table/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'surface'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const ghost = useColorTemplate(color, \"ghost\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: ghost.main.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .4,\n        medium: .8,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"surface.divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"surface.divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"surface.contrast\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.main.bgcolor,\n                        \"& th\": {\n                            color: main.main.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        px: 1,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: ghost.main.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":[],"mappings":";;;;;;;;;AAcA;;AAAsE;;;AAGlE;AAAe;AACf;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;;;;;AAOI;AACI;AACI;AACH;;;AAGT;AACI;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAEG;AACH;;;AAIT;AACI;AACA;AACA;;;AAIA;;AAEJ;AACI;AACI;AACA;AACH;AACD;AACI;AACA;AACH;AACD;;AAGJ;AAGY;AACH;AAUW;AACA;AACI;AACH;AACJ;AAOG;AACH;AAEG;AACH;AAEG;;AAUxB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Table/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const ghost = useColorTemplate(color, \"ghost\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: ghost.main.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .4,\n        medium: .8,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"default.divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"default.divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"default.contrast\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.main.bgcolor,\n                        \"& th\": {\n                            color: main.main.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        px: 1,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: ghost.main.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":[],"mappings":";;;;;;;;;AAcA;;AAAsE;;;AAGlE;AAAe;AACf;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;;;;;AAOI;AACI;AACI;AACH;;;AAGT;AACI;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAEG;AACH;;;AAIT;AACI;AACA;AACA;;;AAIA;;AAEJ;AACI;AACI;AACA;AACH;AACD;AACI;AACA;AACH;AACD;;AAGJ;AAGY;AACH;AAUW;AACA;AACI;AACH;AACJ;AAOG;AACH;AAEG;AACH;AAEG;;AAUxB;;"}

package/Table/index.js

@@ -23,7 +23,7 @@ const Table = React.forwardRef((_a, ref) => {
     const p = useBreakpointProps(_p);
     evenColor = p.evenColor;
     size = (_b = p.size) !== null && _b !== void 0 ? _b : "medium";
-    color = (_c = p.color) !== null && _c !== void 0 ? _c : 'surface';
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : 'default';
     variant = (_d = p.variant) !== null && _d !== void 0 ? _d : "fill";
     borderType = (_e = p.borderType) !== null && _e !== void 0 ? _e : "line";
     const main = useColorTemplate(color, variant);
@@ -59,17 +59,17 @@ const Table = React.forwardRef((_a, ref) => {
     let border = {
         line: {
             borderBottom: "1px solid",
-            borderColor: "surface.divider",
+            borderColor: "default.divider",
         },
         box: {
             border: "1px solid",
-            borderColor: "surface.divider",
+            borderColor: "default.divider",
         },
         none: {}
     };
     return (jsx(Scrollbar, { style: {
             overflowY: "hidden"
-        }, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "surface.contrast", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
+        }, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "default.contrast", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
                     bgcolor: main.main.bgcolor,
                     "& th": {
                         color: main.main.color

package/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Table/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'surface'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const ghost = useColorTemplate(color, \"ghost\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: ghost.main.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .4,\n        medium: .8,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"surface.divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"surface.divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"surface.contrast\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.main.bgcolor,\n                        \"& th\": {\n                            color: main.main.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        px: 1,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: ghost.main.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":[],"mappings":";;;;;;;AAcA;;AAAsE;;;AAGlE;AAAe;AACf;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;;;;;AAOI;AACI;AACI;AACH;;;AAGT;AACI;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAEG;AACH;;;AAIT;AACI;AACA;AACA;;;AAIA;;AAEJ;AACI;AACI;AACA;AACH;AACD;AACI;AACA;AACH;AACD;;AAGJ;AAGY;AACH;AAUW;AACA;AACI;AACH;AACJ;AAOG;AACH;AAEG;AACH;AAEG;;AAUxB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Table/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const ghost = useColorTemplate(color, \"ghost\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: ghost.main.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .4,\n        medium: .8,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"default.divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"default.divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"default.contrast\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.main.bgcolor,\n                        \"& th\": {\n                            color: main.main.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        px: 1,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: ghost.main.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":[],"mappings":";;;;;;;AAcA;;AAAsE;;;AAGlE;AAAe;AACf;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;;;;;AAOI;AACI;AACI;AACH;;;AAGT;AACI;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAEG;AACH;;;AAIT;AACI;AACA;AACA;;;AAIA;;AAEJ;AACI;AACI;AACA;AACH;AACD;AACI;AACA;AACH;AACD;;AAGJ;AAGY;AACH;AAUW;AACA;AACI;AACH;AACJ;AAOG;AACH;AAEG;AACH;AAEG;;AAUxB;;"}

package/TableCell/index.cjs

@@ -8,7 +8,7 @@ var core = require('@xanui/core');
 
 const TableCell = React.forwardRef((_a, ref) => {
     var { children, th } = _a, rest = tslib.__rest(_a, ["children", "th"]);
-    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: Object.assign({ verticalAlign: "inherit", textAlign: "left", fontSize: "inherit", color: "surface.contrast" }, ((rest === null || rest === void 0 ? void 0 : rest.sx) || {})), baseClass: 'table-cell', component: th ? "th" : "td", ref: ref, children: children })));
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: Object.assign({ verticalAlign: "inherit", textAlign: "left", fontSize: "inherit", color: "default.contrast" }, ((rest === null || rest === void 0 ? void 0 : rest.sx) || {})), baseClass: 'table-cell', component: th ? "th" : "td", ref: ref, children: children })));
 });
 
 module.exports = TableCell;

package/TableCell/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableColumnProps<T extends TagComponentType = \"td\"> = TagProps<T> & {\n    th?: boolean\n}\n\nconst TableCell = React.forwardRef(<T extends TagComponentType = \"td\">({ children, th, ...rest }: TableColumnProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                verticalAlign: \"inherit\",\n                textAlign: \"left\",\n                fontSize: \"inherit\",\n                color: \"surface.contrast\",\n                ...((rest as any)?.sx || {})\n            }}\n            baseClass='table-cell'\n            component={th ? \"th\" : \"td\"} ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default TableCell"],"names":[],"mappings":";;;;;;;;AAQA;;AACI;AAgBJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableColumnProps<T extends TagComponentType = \"td\"> = TagProps<T> & {\n    th?: boolean\n}\n\nconst TableCell = React.forwardRef(<T extends TagComponentType = \"td\">({ children, th, ...rest }: TableColumnProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                verticalAlign: \"inherit\",\n                textAlign: \"left\",\n                fontSize: \"inherit\",\n                color: \"default.contrast\",\n                ...((rest as any)?.sx || {})\n            }}\n            baseClass='table-cell'\n            component={th ? \"th\" : \"td\"} ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default TableCell"],"names":[],"mappings":";;;;;;;;AAQA;;AACI;AAgBJ;;"}

package/TableCell/index.js

@@ -6,7 +6,7 @@ import { Tag } from '@xanui/core';
 
 const TableCell = React.forwardRef((_a, ref) => {
     var { children, th } = _a, rest = __rest(_a, ["children", "th"]);
-    return (jsx(Tag, Object.assign({}, rest, { sxr: Object.assign({ verticalAlign: "inherit", textAlign: "left", fontSize: "inherit", color: "surface.contrast" }, ((rest === null || rest === void 0 ? void 0 : rest.sx) || {})), baseClass: 'table-cell', component: th ? "th" : "td", ref: ref, children: children })));
+    return (jsx(Tag, Object.assign({}, rest, { sxr: Object.assign({ verticalAlign: "inherit", textAlign: "left", fontSize: "inherit", color: "default.contrast" }, ((rest === null || rest === void 0 ? void 0 : rest.sx) || {})), baseClass: 'table-cell', component: th ? "th" : "td", ref: ref, children: children })));
 });
 
 export { TableCell as default };

package/TableCell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableColumnProps<T extends TagComponentType = \"td\"> = TagProps<T> & {\n    th?: boolean\n}\n\nconst TableCell = React.forwardRef(<T extends TagComponentType = \"td\">({ children, th, ...rest }: TableColumnProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                verticalAlign: \"inherit\",\n                textAlign: \"left\",\n                fontSize: \"inherit\",\n                color: \"surface.contrast\",\n                ...((rest as any)?.sx || {})\n            }}\n            baseClass='table-cell'\n            component={th ? \"th\" : \"td\"} ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default TableCell"],"names":[],"mappings":";;;;;;AAQA;;AACI;AAgBJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableColumnProps<T extends TagComponentType = \"td\"> = TagProps<T> & {\n    th?: boolean\n}\n\nconst TableCell = React.forwardRef(<T extends TagComponentType = \"td\">({ children, th, ...rest }: TableColumnProps<T>, ref: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                verticalAlign: \"inherit\",\n                textAlign: \"left\",\n                fontSize: \"inherit\",\n                color: \"default.contrast\",\n                ...((rest as any)?.sx || {})\n            }}\n            baseClass='table-cell'\n            component={th ? \"th\" : \"td\"} ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default TableCell"],"names":[],"mappings":";;;;;;AAQA;;AACI;AAgBJ;;"}

package/TablePagination/index.cjs

@@ -15,7 +15,7 @@ var core = require('@xanui/core');
 const TablePagination = React.forwardRef((_a, ref) => {
     var { page, total, perpage, onChange } = _a, rest = tslib.__rest(_a, ["page", "total", "perpage", "onChange"]);
     let [_b] = core.useInterface("TablePagination", rest, {}), { perpages, color, variant, slotProps } = _b, props = tslib.__rest(_b, ["perpages", "color", "variant", "slotProps"]);
-    color !== null && color !== void 0 ? color : (color = 'surface');
+    color !== null && color !== void 0 ? color : (color = 'default');
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     perpages !== null && perpages !== void 0 ? perpages : (perpages = [30, 50, 100]);
     perpage = perpage || perpages[0];
@@ -48,7 +48,7 @@ const TablePagination = React.forwardRef((_a, ref) => {
                     flexDirection: "row",
                     gap: 1,
                     alignItems: 'center'
-                }, children: [jsxRuntime.jsxs(index, { fontSize: "button", children: [current === null || current === void 0 ? void 0 : current.from, "-", current.to] }), jsxRuntime.jsx(index, { color: "surface.muted", children: "of" }), jsxRuntime.jsx(index, { fontSize: "button", children: total })] }), jsxRuntime.jsxs(core.Tag, { baseClass: 'table-pagination-navigation', flexBox: true, flexRow: true, gap: .4, children: [jsxRuntime.jsx(index$3, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button, { color: color, variant: variant, size: 30, disabled: !hasPrev, onClick: () => {
+                }, children: [jsxRuntime.jsxs(index, { fontSize: "button", children: [current === null || current === void 0 ? void 0 : current.from, "-", current.to] }), jsxRuntime.jsx(index, { color: "default.muted", children: "of" }), jsxRuntime.jsx(index, { fontSize: "button", children: total })] }), jsxRuntime.jsxs(core.Tag, { baseClass: 'table-pagination-navigation', flexBox: true, flexRow: true, gap: .4, children: [jsxRuntime.jsx(index$3, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button, { color: color, variant: variant, size: 30, disabled: !hasPrev, onClick: () => {
                             onChange && onChange(chunks[page - 1]);
                         }, children: jsxRuntime.jsx(IconKeyboardArrowLeft, {}) })), jsxRuntime.jsx(index$3, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button, { color: color, variant: variant, size: 30, disabled: !hasNext, onClick: () => {
                             onChange && onChange(chunks[page + 1]);

package/TablePagination/index.cjs.map

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

@@ -13,7 +13,7 @@ import { useInterface, Tag } from '@xanui/core';
 const TablePagination = React.forwardRef((_a, ref) => {
     var { page, total, perpage, onChange } = _a, rest = __rest(_a, ["page", "total", "perpage", "onChange"]);
     let [_b] = useInterface("TablePagination", rest, {}), { perpages, color, variant, slotProps } = _b, props = __rest(_b, ["perpages", "color", "variant", "slotProps"]);
-    color !== null && color !== void 0 ? color : (color = 'surface');
+    color !== null && color !== void 0 ? color : (color = 'default');
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     perpages !== null && perpages !== void 0 ? perpages : (perpages = [30, 50, 100]);
     perpage = perpage || perpages[0];
@@ -46,7 +46,7 @@ const TablePagination = React.forwardRef((_a, ref) => {
                     flexDirection: "row",
                     gap: 1,
                     alignItems: 'center'
-                }, children: [jsxs(Text, { fontSize: "button", children: [current === null || current === void 0 ? void 0 : current.from, "-", current.to] }), jsx(Text, { color: "surface.muted", children: "of" }), jsx(Text, { fontSize: "button", children: total })] }), jsxs(Tag, { baseClass: 'table-pagination-navigation', flexBox: true, flexRow: true, gap: .4, children: [jsx(IconButton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button, { color: color, variant: variant, size: 30, disabled: !hasPrev, onClick: () => {
+                }, children: [jsxs(Text, { fontSize: "button", children: [current === null || current === void 0 ? void 0 : current.from, "-", current.to] }), jsx(Text, { color: "default.muted", children: "of" }), jsx(Text, { fontSize: "button", children: total })] }), jsxs(Tag, { baseClass: 'table-pagination-navigation', flexBox: true, flexRow: true, gap: .4, children: [jsx(IconButton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button, { color: color, variant: variant, size: 30, disabled: !hasPrev, onClick: () => {
                             onChange && onChange(chunks[page - 1]);
                         }, children: jsx(IconKeyboardArrowLeft, {}) })), jsx(IconButton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button, { color: color, variant: variant, size: 30, disabled: !hasNext, onClick: () => {
                             onChange && onChange(chunks[page + 1]);

package/TablePagination/index.js.map

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

@@ -60,7 +60,7 @@ const Tabs = React.forwardRef((_a, ref) => {
             indicatorSize,
             onChange: (v, e) => {
                 var _a, _b;
-                onChange(v, e);
+                onChange && onChange(v, e);
                 if (variant === 'text')
                     return;
                 const indicator = indicatorRef.current;

package/Tabs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react'\nimport { animate, Tag, useBreakpointProps, useInterface } from '@xanui/core'\nimport { TabContext } from './context';\nimport { TabsProps } from './types';\n\nexport type { TabsProps }\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n    let [{ color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    if (color) _p.color = color\n    if (disableTransition) _p.disableTransition = disableTransition\n    if (indicatorSize) _p.indicatorSize = indicatorSize\n    const p: any = useBreakpointProps(_p)\n\n    variant = p.variant ?? \"end-line\"\n    color = p.color ?? \"primary\"\n    disableTransition = p.disableTransition\n    indicatorSize = p.indicatorSize ?? 3\n\n    const indicatorRef = useRef<HTMLElement>(null)\n    const indicatorState = useRef({\n        left: 0,\n        width: 0\n    })\n\n\n    let indicatorProps: any = {}\n    switch (variant) {\n        case \"outline\":\n            indicatorProps = {\n                top: 0,\n                border: \"1px solid\",\n                borderColor: color,\n                bgcolor: \"transparent\"\n            }\n            break;\n        case \"ghost\":\n            indicatorProps = {\n                top: 0,\n                bgcolor: `${color}.ghost`\n            }\n            break;\n        case \"text\":\n            indicatorProps = {\n                display: \"none\"\n            }\n            break;\n    }\n\n\n    return (\n        <TabContext.Provider\n            value={{\n                value,\n                variant,\n                color,\n                disableTransition,\n                indicatorSize,\n                onChange: (v, e) => {\n                    onChange!(v, e)\n\n                    if (variant === 'text') return\n                    const indicator = indicatorRef.current;\n                    if (!indicator) return;\n\n                    const target = e.currentTarget as HTMLElement;\n\n                    switch (variant) {\n                        case \"start-line\":\n                            indicator.style.removeProperty(\"bottom\")\n                            indicator.style.top = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"end-line\":\n                            indicator.style.removeProperty(\"top\")\n                            indicator.style.bottom = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"fill\":\n                        case \"outline\":\n                        case \"ghost\":\n                            indicator.style.height = `${target.offsetHeight}px`\n                            indicator.style.top = `${target.offsetTop}px`\n                            break;\n                    }\n\n                    animate({\n                        from: {\n                            left: indicatorState.current.left ?? 0,\n                            width: indicatorState.current.width ?? 0,\n                        },\n                        to: {\n                            left: target.offsetLeft,\n                            width: target.clientWidth,\n                        },\n                        duration: 180,\n                        easing: (t) => 1 - Math.pow(1 - t, 3),\n                        onUpdate: ({ left, width }) => {\n                            indicatorState.current.left = left;\n                            indicatorState.current.width = width;\n\n                            indicator.style.left = `${left}px`;\n                            indicator.style.width = `${width}px`;\n                        },\n                    });\n                },\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='tabs'\n                sxr={{\n                    position: \"relative\",\n                    zIndex: 1,\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                }}\n                ref={ref}\n            >\n                {children}\n                <Tag\n                    ref={indicatorRef}\n                    baseClass='tabs-indicator'\n                    sxr={{\n                        radius: 1,\n                        position: \"absolute\",\n                        zIndex: -1,\n                        bgcolor: color,\n                        height: 2,\n                        ...indicatorProps\n                    }}\n                />\n            </Tag>\n        </TabContext.Provider>\n    )\n})\n\nexport default Tabs"],"names":[],"mappings":";;;;;;;;;AAQA;;;;;AAGI;AAAa;AACb;AAAW;AACX;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AAEA;;AAEI;AACA;AACH;;;AAKG;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAMZ;;;;;;AAQY;;AACI;;;AAGA;AACA;;AAEA;;AAGI;AACI;;;;AAIJ;AACI;;;;AAIJ;AACA;AACA;;;;;AAMJ;AACI;;;AAGC;AACD;;;AAGC;AACD;AACA;;AAEI;AACA;;;;AAKP;;;AAQD;AACA;AACA;AACA;;AAoBpB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react'\nimport { animate, Tag, useBreakpointProps, useInterface } from '@xanui/core'\nimport { TabContext } from './context';\nimport { TabsProps } from './types';\n\nexport type { TabsProps }\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n    let [{ color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    if (color) _p.color = color\n    if (disableTransition) _p.disableTransition = disableTransition\n    if (indicatorSize) _p.indicatorSize = indicatorSize\n    const p: any = useBreakpointProps(_p)\n\n    variant = p.variant ?? \"end-line\"\n    color = p.color ?? \"primary\"\n    disableTransition = p.disableTransition\n    indicatorSize = p.indicatorSize ?? 3\n\n    const indicatorRef = useRef<HTMLElement>(null)\n    const indicatorState = useRef({\n        left: 0,\n        width: 0\n    })\n\n\n    let indicatorProps: any = {}\n    switch (variant) {\n        case \"outline\":\n            indicatorProps = {\n                top: 0,\n                border: \"1px solid\",\n                borderColor: color,\n                bgcolor: \"transparent\"\n            }\n            break;\n        case \"ghost\":\n            indicatorProps = {\n                top: 0,\n                bgcolor: `${color}.ghost`\n            }\n            break;\n        case \"text\":\n            indicatorProps = {\n                display: \"none\"\n            }\n            break;\n    }\n\n\n    return (\n        <TabContext.Provider\n            value={{\n                value,\n                variant,\n                color,\n                disableTransition,\n                indicatorSize,\n                onChange: (v, e) => {\n                    onChange && onChange(v, e)\n\n                    if (variant === 'text') return\n                    const indicator = indicatorRef.current;\n                    if (!indicator) return;\n\n                    const target = e.currentTarget as HTMLElement;\n\n                    switch (variant) {\n                        case \"start-line\":\n                            indicator.style.removeProperty(\"bottom\")\n                            indicator.style.top = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"end-line\":\n                            indicator.style.removeProperty(\"top\")\n                            indicator.style.bottom = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"fill\":\n                        case \"outline\":\n                        case \"ghost\":\n                            indicator.style.height = `${target.offsetHeight}px`\n                            indicator.style.top = `${target.offsetTop}px`\n                            break;\n                    }\n\n                    animate({\n                        from: {\n                            left: indicatorState.current.left ?? 0,\n                            width: indicatorState.current.width ?? 0,\n                        },\n                        to: {\n                            left: target.offsetLeft,\n                            width: target.clientWidth,\n                        },\n                        duration: 180,\n                        easing: (t) => 1 - Math.pow(1 - t, 3),\n                        onUpdate: ({ left, width }) => {\n                            indicatorState.current.left = left;\n                            indicatorState.current.width = width;\n\n                            indicator.style.left = `${left}px`;\n                            indicator.style.width = `${width}px`;\n                        },\n                    });\n                },\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='tabs'\n                sxr={{\n                    position: \"relative\",\n                    zIndex: 1,\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                }}\n                ref={ref}\n            >\n                {children}\n                <Tag\n                    ref={indicatorRef}\n                    baseClass='tabs-indicator'\n                    sxr={{\n                        radius: 1,\n                        position: \"absolute\",\n                        zIndex: -1,\n                        bgcolor: color,\n                        height: 2,\n                        ...indicatorProps\n                    }}\n                />\n            </Tag>\n        </TabContext.Provider>\n    )\n})\n\nexport default Tabs"],"names":[],"mappings":";;;;;;;;;AAQA;;;;;AAGI;AAAa;AACb;AAAW;AACX;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AAEA;;AAEI;AACA;AACH;;;AAKG;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAMZ;;;;;;AAQY;;AACI;;;AAGA;AACA;;AAEA;;AAGI;AACI;;;;AAIJ;AACI;;;;AAIJ;AACA;AACA;;;;;AAMJ;AACI;;;AAGC;AACD;;;AAGC;AACD;AACA;;AAEI;AACA;;;;AAKP;;;AAQD;AACA;AACA;AACA;;AAoBpB;;"}

package/Tabs/index.js

@@ -58,7 +58,7 @@ const Tabs = React.forwardRef((_a, ref) => {
             indicatorSize,
             onChange: (v, e) => {
                 var _a, _b;
-                onChange(v, e);
+                onChange && onChange(v, e);
                 if (variant === 'text')
                     return;
                 const indicator = indicatorRef.current;

package/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react'\nimport { animate, Tag, useBreakpointProps, useInterface } from '@xanui/core'\nimport { TabContext } from './context';\nimport { TabsProps } from './types';\n\nexport type { TabsProps }\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n    let [{ color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    if (color) _p.color = color\n    if (disableTransition) _p.disableTransition = disableTransition\n    if (indicatorSize) _p.indicatorSize = indicatorSize\n    const p: any = useBreakpointProps(_p)\n\n    variant = p.variant ?? \"end-line\"\n    color = p.color ?? \"primary\"\n    disableTransition = p.disableTransition\n    indicatorSize = p.indicatorSize ?? 3\n\n    const indicatorRef = useRef<HTMLElement>(null)\n    const indicatorState = useRef({\n        left: 0,\n        width: 0\n    })\n\n\n    let indicatorProps: any = {}\n    switch (variant) {\n        case \"outline\":\n            indicatorProps = {\n                top: 0,\n                border: \"1px solid\",\n                borderColor: color,\n                bgcolor: \"transparent\"\n            }\n            break;\n        case \"ghost\":\n            indicatorProps = {\n                top: 0,\n                bgcolor: `${color}.ghost`\n            }\n            break;\n        case \"text\":\n            indicatorProps = {\n                display: \"none\"\n            }\n            break;\n    }\n\n\n    return (\n        <TabContext.Provider\n            value={{\n                value,\n                variant,\n                color,\n                disableTransition,\n                indicatorSize,\n                onChange: (v, e) => {\n                    onChange!(v, e)\n\n                    if (variant === 'text') return\n                    const indicator = indicatorRef.current;\n                    if (!indicator) return;\n\n                    const target = e.currentTarget as HTMLElement;\n\n                    switch (variant) {\n                        case \"start-line\":\n                            indicator.style.removeProperty(\"bottom\")\n                            indicator.style.top = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"end-line\":\n                            indicator.style.removeProperty(\"top\")\n                            indicator.style.bottom = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"fill\":\n                        case \"outline\":\n                        case \"ghost\":\n                            indicator.style.height = `${target.offsetHeight}px`\n                            indicator.style.top = `${target.offsetTop}px`\n                            break;\n                    }\n\n                    animate({\n                        from: {\n                            left: indicatorState.current.left ?? 0,\n                            width: indicatorState.current.width ?? 0,\n                        },\n                        to: {\n                            left: target.offsetLeft,\n                            width: target.clientWidth,\n                        },\n                        duration: 180,\n                        easing: (t) => 1 - Math.pow(1 - t, 3),\n                        onUpdate: ({ left, width }) => {\n                            indicatorState.current.left = left;\n                            indicatorState.current.width = width;\n\n                            indicator.style.left = `${left}px`;\n                            indicator.style.width = `${width}px`;\n                        },\n                    });\n                },\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='tabs'\n                sxr={{\n                    position: \"relative\",\n                    zIndex: 1,\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                }}\n                ref={ref}\n            >\n                {children}\n                <Tag\n                    ref={indicatorRef}\n                    baseClass='tabs-indicator'\n                    sxr={{\n                        radius: 1,\n                        position: \"absolute\",\n                        zIndex: -1,\n                        bgcolor: color,\n                        height: 2,\n                        ...indicatorProps\n                    }}\n                />\n            </Tag>\n        </TabContext.Provider>\n    )\n})\n\nexport default Tabs"],"names":[],"mappings":";;;;;;;AAQA;;;;;AAGI;AAAa;AACb;AAAW;AACX;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AAEA;;AAEI;AACA;AACH;;;AAKG;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAMZ;;;;;;AAQY;;AACI;;;AAGA;AACA;;AAEA;;AAGI;AACI;;;;AAIJ;AACI;;;;AAIJ;AACA;AACA;;;;;AAMJ;AACI;;;AAGC;AACD;;;AAGC;AACD;AACA;;AAEI;AACA;;;;AAKP;;;AAQD;AACA;AACA;AACA;;AAoBpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react'\nimport { animate, Tag, useBreakpointProps, useInterface } from '@xanui/core'\nimport { TabContext } from './context';\nimport { TabsProps } from './types';\n\nexport type { TabsProps }\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n    let [{ color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n    const _p: any = {}\n    if (variant) _p.variant = variant\n    if (color) _p.color = color\n    if (disableTransition) _p.disableTransition = disableTransition\n    if (indicatorSize) _p.indicatorSize = indicatorSize\n    const p: any = useBreakpointProps(_p)\n\n    variant = p.variant ?? \"end-line\"\n    color = p.color ?? \"primary\"\n    disableTransition = p.disableTransition\n    indicatorSize = p.indicatorSize ?? 3\n\n    const indicatorRef = useRef<HTMLElement>(null)\n    const indicatorState = useRef({\n        left: 0,\n        width: 0\n    })\n\n\n    let indicatorProps: any = {}\n    switch (variant) {\n        case \"outline\":\n            indicatorProps = {\n                top: 0,\n                border: \"1px solid\",\n                borderColor: color,\n                bgcolor: \"transparent\"\n            }\n            break;\n        case \"ghost\":\n            indicatorProps = {\n                top: 0,\n                bgcolor: `${color}.ghost`\n            }\n            break;\n        case \"text\":\n            indicatorProps = {\n                display: \"none\"\n            }\n            break;\n    }\n\n\n    return (\n        <TabContext.Provider\n            value={{\n                value,\n                variant,\n                color,\n                disableTransition,\n                indicatorSize,\n                onChange: (v, e) => {\n                    onChange && onChange(v, e)\n\n                    if (variant === 'text') return\n                    const indicator = indicatorRef.current;\n                    if (!indicator) return;\n\n                    const target = e.currentTarget as HTMLElement;\n\n                    switch (variant) {\n                        case \"start-line\":\n                            indicator.style.removeProperty(\"bottom\")\n                            indicator.style.top = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"end-line\":\n                            indicator.style.removeProperty(\"top\")\n                            indicator.style.bottom = `${target.offsetTop}px`\n                            indicator.style.height = `${indicatorSize}px`\n                            break;\n                        case \"fill\":\n                        case \"outline\":\n                        case \"ghost\":\n                            indicator.style.height = `${target.offsetHeight}px`\n                            indicator.style.top = `${target.offsetTop}px`\n                            break;\n                    }\n\n                    animate({\n                        from: {\n                            left: indicatorState.current.left ?? 0,\n                            width: indicatorState.current.width ?? 0,\n                        },\n                        to: {\n                            left: target.offsetLeft,\n                            width: target.clientWidth,\n                        },\n                        duration: 180,\n                        easing: (t) => 1 - Math.pow(1 - t, 3),\n                        onUpdate: ({ left, width }) => {\n                            indicatorState.current.left = left;\n                            indicatorState.current.width = width;\n\n                            indicator.style.left = `${left}px`;\n                            indicator.style.width = `${width}px`;\n                        },\n                    });\n                },\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='tabs'\n                sxr={{\n                    position: \"relative\",\n                    zIndex: 1,\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                }}\n                ref={ref}\n            >\n                {children}\n                <Tag\n                    ref={indicatorRef}\n                    baseClass='tabs-indicator'\n                    sxr={{\n                        radius: 1,\n                        position: \"absolute\",\n                        zIndex: -1,\n                        bgcolor: color,\n                        height: 2,\n                        ...indicatorProps\n                    }}\n                />\n            </Tag>\n        </TabContext.Provider>\n    )\n})\n\nexport default Tabs"],"names":[],"mappings":";;;;;;;AAQA;;;;;AAGI;AAAa;AACb;AAAW;AACX;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AAEA;;AAEI;AACA;AACH;;;AAKG;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAMZ;;;;;;AAQY;;AACI;;;AAGA;AACA;;AAEA;;AAGI;AACI;;;;AAIJ;AACI;;;;AAIJ;AACA;AACA;;;;;AAMJ;AACI;;;AAGC;AACD;;;AAGC;AACD;AACA;;AAEI;AACA;;;;AAKP;;;AAQD;AACA;AACA;AACA;;AAoBpB;;"}

package/Text/index.cjs

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

package/Text/index.cjs.map

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

package/Text/index.js

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

package/Text/index.js.map

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

package/Tooltip/index.cjs

@@ -18,7 +18,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         _p.variant = variant;
     const p = core.useBreakpointProps(_p);
     title = p.title;
-    color = (_a = p.color) !== null && _a !== void 0 ? _a : 'surface';
+    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 template = core.useColorTemplate(color, variant);
@@ -32,7 +32,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         onMouseLeave: () => setTarget(null)
     });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [child, jsxRuntime.jsx(index, { target: target, placement: placement, slotProps: {
-                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.main), { bgcolor: color == 'surface' ? "surface.main" : template.main.bgcolor })
+                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.main), { bgcolor: color == 'default' ? "default.base" : template.main.bgcolor })
                 }, children: title })] }));
 };
 

package/Tooltip/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\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 ?? 'surface'\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const 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.main,\n                        bgcolor: color == 'surface' ? \"surface.main\" : template.main.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\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 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.main,\n                        bgcolor: color == 'default' ? \"default.base\" : template.main.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}

package/Tooltip/index.js

@@ -16,7 +16,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         _p.variant = variant;
     const p = useBreakpointProps(_p);
     title = p.title;
-    color = (_a = p.color) !== null && _a !== void 0 ? _a : 'surface';
+    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 template = useColorTemplate(color, variant);
@@ -30,7 +30,7 @@ const Tooltip = ({ children, title, variant, color, placement }) => {
         onMouseLeave: () => setTarget(null)
     });
     return (jsxs(Fragment, { children: [child, jsx(Menu, { target: target, placement: placement, slotProps: {
-                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.main), { bgcolor: color == 'surface' ? "surface.main" : template.main.bgcolor })
+                    content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.main), { bgcolor: color == 'default' ? "default.base" : template.main.bgcolor })
                 }, children: title })] }));
 };
 

package/Tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\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 ?? 'surface'\n    variant = p.variant ?? \"fill\"\n    placement ??= \"bottom\"\n\n    const 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.main,\n                        bgcolor: color == 'surface' ? \"surface.main\" : template.main.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n    children: ReactElement;\n    title: useBreakpointPropsType<string>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\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 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.main,\n                        bgcolor: color == 'default' ? \"default.base\" : template.main.bgcolor,\n                    }\n                }}\n            >\n                {title as any}\n            </Menu>\n        </>\n    )\n}\n\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAcA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@xanui/ui",
-  "version": "1.2.9",
+  "version": "1.2.11",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {
-    "@xanui/core": "^1.3.12",
+    "@xanui/core": "^1.3.16",
     "@xanui/icons": "^1.1.12",
     "pretty-class": "^1.0.8"
   },

package/readme.md

@@ -1,10 +1,10 @@
 # Xanui Library
 
-Xanui is a React design-system toolkit powered by `@xanui/core`. It combines low-level primitives (e.g., `Box`, `Stack`, `Layer`) with application-ready components (e.g., `Accordion`, `Modal`, `Datatable`, `Toast`) so product teams can build polished surfaces quickly while keeping full control over styling tokens.
+Xanui is a React design-system toolkit powered by `@xanui/core`. It combines low-level primitives (e.g., `Box`, `Stack`, `Layer`) with application-ready components (e.g., `Accordion`, `Modal`, `Datatable`, `Toast`) so product teams can build polished defaults quickly while keeping full control over styling tokens.
 
 ## Highlights
 
-- **Unified prop surface** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
+- **Unified prop default** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
 - **Production-ready defaults** – the color palette, typography scale, shadows, and radii mirror modern SaaS expectations yet remain overridable.
 - **Server compatible** – SSR-safe patterns ensure components render on the server and hydrate cleanly on the client.
 - **Documentation first** – each component ships with a dedicated Markdown guide in `docs/`, ready for consumption by the upcoming Next.js documentation site.
@@ -65,7 +65,7 @@ npm run dev
 
 | Category               | Components                                                                                                                                                      | Docs                                                                                                                                                                                                                                                    |
 | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Layout & Surfaces      | Box, Stack, Container, GridContainer, GridItem, Paper, Layer, ViewBox, Divider                                                                                  | `docs/Box.md`, `docs/Stack.md`, `docs/Container.md`, `docs/GridContainer.md`, `docs/GridItem.md`, `docs/Paper.md`, `docs/Layer.md`, `docs/ViewBox.md`, `docs/Divider.md`                                                                                |
+| Layout & defaults      | Box, Stack, Container, GridContainer, GridItem, Paper, Layer, ViewBox, Divider                                                                                  | `docs/Box.md`, `docs/Stack.md`, `docs/Container.md`, `docs/GridContainer.md`, `docs/GridItem.md`, `docs/Paper.md`, `docs/Layer.md`, `docs/ViewBox.md`, `docs/Divider.md`                                                                                |
 | Navigation             | Tabs, Tab, List, ListItem, Menu, Drawer                                                                                                                         | `docs/Tabs.md`, `docs/Tab.md`, `docs/List.md`, `docs/ListItem.md`, `docs/Menu.md`, `docs/Drawer.md`                                                                                                                                                     |
 | Data Display           | Table (and TableBody/TableCell/TableFooter/TableHead/TablePagination/TableRow), Datatable, Chip, Avatar, Image, Badge, CircleProgress, LineProgress, LoadingBox | `docs/Table*.md`, `docs/Datatable.md`, `docs/Chip.md`, `docs/Avatar.md`, `docs/Image.md`, `docs/Badge.md`, `docs/CircleProgress.md`, `docs/LineProgress.md`, `docs/LoadingBox.md`                                                                       |
 | Inputs & Forms         | Button, ButtonGroup, IconButton, Form, Input, Select, Option, Checkbox, Radio, Switch, Calendar, CalendarInput, Label                                           | `docs/Button.md`, `docs/ButtonGroup.md`, `docs/IconButton.md`, `docs/Form.md`, `docs/Input.md`, `docs/Select.md`, `docs/Option.md`, `docs/Checkbox.md`, `docs/Radio.md`, `docs/Switch.md`, `docs/Calendar.md`, `docs/CalendarInput.md`, `docs/Label.md` |
@@ -94,7 +94,7 @@ The development workflow encourages updating `docs/` alongside the corresponding
 
 Guidelines:
 
-- Keep new components aligned with the `TagProps` surface (spacing, layout, color tokens, responsive props).
+- Keep new components aligned with the `TagProps` default (spacing, layout, color tokens, responsive props).
 - Provide at least one example in `example/` when adding new UI patterns.
 - Maintain the established documentation structure (overview, basic example, props table, scenario demos).
 

package/useBlurCss/index.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 let _d;
 const useBlurCss = (blur, mode) => {
     return React.useMemo(() => {
-        let transparent = { bgcolor: "surface.ghost" };
+        let transparent = { bgcolor: "default.ghost" };
         if (typeof window === 'undefined' || mode === 'transparent') {
             return transparent;
         }

package/useBlurCss/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"surface.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"default.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}

package/useBlurCss/index.js

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 let _d;
 const useBlurCss = (blur, mode) => {
     return useMemo(() => {
-        let transparent = { bgcolor: "surface.ghost" };
+        let transparent = { bgcolor: "default.ghost" };
         if (typeof window === 'undefined' || mode === 'transparent') {
             return transparent;
         }

package/useBlurCss/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"surface.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["\"use client\"\nimport { useMemo } from \"react\"\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n   return useMemo(() => {\n      let transparent = { bgcolor: \"default.ghost\" }\n      if (typeof window === 'undefined' || mode === 'transparent') {\n         return transparent\n      }\n      const d = _d || (_d = window.document.createElement(\"div\").style)\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n   }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA;AAEA;;AAEM;;AAEG;;AAEH;;AAEH;AACH;;"}

package/useContextMenu/index.cjs

@@ -18,7 +18,7 @@ const useContextMenu = (_a) => {
                 core.Renderar.unrender(Comp);
             };
         }, []);
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "surface.main", height: 0, width: 0 }), jsxRuntime.jsx(index, Object.assign({}, props, { target: target, onClickOutside: (e) => {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(core.Tag, { baseClass: "context-menu-target", ref: ref, position: "fixed", top: y, left: x, zIndex: 99999999999999, bgcolor: "default.base", height: 0, width: 0 }), jsxRuntime.jsx(index, Object.assign({}, props, { target: target, onClickOutside: (e) => {
                         core.Renderar.unrender(Comp);
                         onClickOutside && onClickOutside(e);
                     }, children: children }))] }));