@xanui/ui 1.2.6 → 1.2.7

package/Tab/index.js

@@ -1,14 +1,35 @@
 "use client";
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
-import { useInterface } from '@xanui/core';
+import React, { useRef, useEffect } from 'react';
+import { useInterface, useMergeRefs } from '@xanui/core';
 import Button from '../Button/index.js';
+import { useTabs } from '../Tabs/context.js';
 
 const Tab = React.forwardRef((_a, ref) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
+    var { children, value } = _a, props = __rest(_a, ["children", "value"]);
     let [_props] = useInterface("Tab", props, {});
-    return (jsx(Button, Object.assign({}, _props, { classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: ref, children: children })));
+    const container = useTabs();
+    if (!container)
+        throw new Error("Tabs component must be used within a <Tabs>.");
+    const btnRef = useRef(null);
+    const mergeRef = useMergeRefs(ref, btnRef);
+    useEffect(() => {
+        if (value === container.value) {
+            const e = {
+                type: "click",
+                target: btnRef.current,
+                currentTarget: btnRef.current,
+                preventDefault: () => { },
+                stopPropagation: () => { },
+            };
+            container.onChange(value, e);
+        }
+    }, [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) => {
+            container.onChange(value, e);
+        }, classNames: ["tab", ...((_props === null || _props === void 0 ? void 0 : _props.classNames) || [])], ref: mergeRef, children: children })));
 });
 
 export { Tab as default };

package/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Tab/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react'\nimport { TagComponentType, useInterface } from '@xanui/core';\nimport Button, { ButtonProps } from '../Button';\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, ...props }: TabProps<T>, ref: React.Ref<any>) => {\n    let [_props] = useInterface<any>(\"Tab\", props, {})\n    return (\n        <Button\n            {..._props}\n            classNames={[\"tab\", ...(_props?.classNames || [])]}\n            ref={ref}\n        >\n            {children}\n        </Button>\n    )\n})\n\nexport default Tab"],"names":[],"mappings":";;;;;;;AASA;AAAkE;AAC9D;AACA;AASJ;;"}
+{"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;;"}

package/Table/index.cjs

@@ -25,16 +25,16 @@ 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 : 'default';
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : 'surface';
     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);
-    const soft = core.useColorTemplate(color, "soft");
+    const ghost = core.useColorTemplate(color, "ghost");
     let sx = {};
     if (evenColor) {
         sx = {
             "& tbody tr:nth-child(even)": {
-                bgcolor: soft.primary.bgcolor
+                bgcolor: ghost.main.bgcolor
             }
         };
     }
@@ -61,27 +61,27 @@ const Table = React.forwardRef((_a, ref) => {
     let border = {
         line: {
             borderBottom: "1px solid",
-            borderColor: "divider",
+            borderColor: "surface.divider",
         },
         box: {
             border: "1px solid",
-            borderColor: "divider",
+            borderColor: "surface.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: "text.primary", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
-                    bgcolor: main.primary.bgcolor,
+        }, 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": {
+                    bgcolor: main.main.bgcolor,
                     "& th": {
-                        color: main.primary.color
+                        color: main.main.color
                     }
                 }, "& td, & th": Object.assign({ p: _size, px: 1 }, border[borderType]), "& tr:last-child td": {
                     borderBottom: 0
                 }, "& tr:first-child th": {
                     borderTop: 0
                 }, "& tbody tr:hover": {
-                    bgcolor: soft.primary.bgcolor
+                    bgcolor: ghost.main.bgcolor
                 } }, sx), (rest.sx || {})), component: "table", ref: ref, children: children })) }));
 });
 

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 ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const soft = useColorTemplate(color, \"soft\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: soft.primary.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: \"divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"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: \"text.primary\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.primary.bgcolor,\n                        \"& th\": {\n                            color: main.primary.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: soft.primary.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 ?? '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;;"}

package/Table/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 
 type TableProps<T extends TagComponentType = "table"> = Omit<TagProps<T>, "color" | "size"> & {
@@ -8,7 +8,7 @@ type TableProps<T extends TagComponentType = "table"> = Omit<TagProps<T>, "color
     variant?: useBreakpointPropsType<Omit<UseColorTemplateType, "outline">>;
     borderType?: useBreakpointPropsType<"box" | "line" | "none">;
 };
-declare const Table: React.ForwardRefExoticComponent<Omit<TableProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Table: React__default.ForwardRefExoticComponent<Omit<TableProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Table as default };
 export type { TableProps };

package/Table/index.js

@@ -23,16 +23,16 @@ 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 : 'default';
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : 'surface';
     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);
-    const soft = useColorTemplate(color, "soft");
+    const ghost = useColorTemplate(color, "ghost");
     let sx = {};
     if (evenColor) {
         sx = {
             "& tbody tr:nth-child(even)": {
-                bgcolor: soft.primary.bgcolor
+                bgcolor: ghost.main.bgcolor
             }
         };
     }
@@ -59,27 +59,27 @@ const Table = React.forwardRef((_a, ref) => {
     let border = {
         line: {
             borderBottom: "1px solid",
-            borderColor: "divider",
+            borderColor: "surface.divider",
         },
         box: {
             border: "1px solid",
-            borderColor: "divider",
+            borderColor: "surface.divider",
         },
         none: {}
     };
     return (jsx(Scrollbar, { style: {
             overflowY: "hidden"
-        }, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'table', sxr: Object.assign(Object.assign({ color: "text.primary", fontSize: size === "small" ? "text" : "text", width: "100%", "& thead, & tfoot": {
-                    bgcolor: main.primary.bgcolor,
+        }, 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": {
+                    bgcolor: main.main.bgcolor,
                     "& th": {
-                        color: main.primary.color
+                        color: main.main.color
                     }
                 }, "& td, & th": Object.assign({ p: _size, px: 1 }, border[borderType]), "& tr:last-child td": {
                     borderBottom: 0
                 }, "& tr:first-child th": {
                     borderTop: 0
                 }, "& tbody tr:hover": {
-                    bgcolor: soft.primary.bgcolor
+                    bgcolor: ghost.main.bgcolor
                 } }, sx), (rest.sx || {})), component: "table", ref: ref, children: children })) }));
 });
 

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 ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const soft = useColorTemplate(color, \"soft\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: soft.primary.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: \"divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"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: \"text.primary\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.primary.bgcolor,\n                        \"& th\": {\n                            color: main.primary.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: soft.primary.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 ?? '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;;"}

package/TableBody/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type TableBodyProps<T extends TagComponentType = "tbody"> = TagProps<T>;
-declare const TableBody: React.ForwardRefExoticComponent<Omit<TableBodyProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const TableBody: React__default.ForwardRefExoticComponent<Omit<TableBodyProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { TableBody as default };
 export type { TableBodyProps };

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: "text.primary" }, ((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: "surface.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: \"text.primary\",\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: \"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;;"}

package/TableCell/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type TableColumnProps<T extends TagComponentType = "td"> = TagProps<T> & {
     th?: boolean;
 };
-declare const TableCell: React.ForwardRefExoticComponent<Omit<TableColumnProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const TableCell: React__default.ForwardRefExoticComponent<Omit<TableColumnProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { TableCell as default };
 export type { TableColumnProps };

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: "text.primary" }, ((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: "surface.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: \"text.primary\",\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: \"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;;"}

package/TableFooter/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type TableFooterProps<T extends TagComponentType = "tfoot"> = TagProps<T>;
-declare const TableFooter: React.ForwardRefExoticComponent<Omit<TableFooterProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const TableFooter: React__default.ForwardRefExoticComponent<Omit<TableFooterProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { TableFooter as default };
 export type { TableFooterProps };

package/TableHead/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type TableHeadProps<T extends TagComponentType = "thead"> = TagProps<T>;
-declare const TableHead: React.ForwardRefExoticComponent<Omit<TableHeadProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const TableHead: React__default.ForwardRefExoticComponent<Omit<TableHeadProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { TableHead as default };
 export type { TableHeadProps };

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 = "default");
+    color !== null && color !== void 0 ? color : (color = 'surface');
     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: "text.secondary", 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: "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: () => {
                             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 ??= \"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=\"text.secondary\">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 ??= '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;;"}

package/TablePagination/index.d.ts

@@ -1,6 +1,6 @@
 import { SelectProps } from '../Select/index.js';
 import { IconButtonProps } from '../IconButton/index.js';
-import React from 'react';
+import React__default from 'react';
 import { TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 
 type TablePaginationState = {
@@ -22,7 +22,7 @@ type TablePaginationProps = Omit<TagProps, "children" | "onChange"> & {
         select?: Omit<SelectProps, "value" | "onChange" | "children">;
     };
 };
-declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationProps, "ref"> & React.RefAttributes<any>>;
+declare const TablePagination: React__default.ForwardRefExoticComponent<Omit<TablePaginationProps, "ref"> & React__default.RefAttributes<any>>;
 
 export { TablePagination as default };
 export type { TablePaginationProps, TablePaginationState };

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 = "default");
+    color !== null && color !== void 0 ? color : (color = 'surface');
     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: "text.secondary", 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: "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: () => {
                             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 ??= \"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=\"text.secondary\">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 ??= '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;;"}

package/TableRow/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type TableRowProps<T extends TagComponentType = "tr"> = TagProps<T>;
-declare const TableRow: React.ForwardRefExoticComponent<Omit<TableRowProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const TableRow: React__default.ForwardRefExoticComponent<Omit<TableRowProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { TableRow as default };
 export type { TableRowProps };

package/Tabs/context.cjs

@@ -0,0 +1,11 @@
+"use client";
+'use strict';
+
+var React = require('react');
+
+const TabContext = React.createContext(null);
+const useTabs = () => React.useContext(TabContext);
+
+exports.TabContext = TabContext;
+exports.useTabs = useTabs;
+//# sourceMappingURL=context.cjs.map

package/Tabs/context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.cjs","sources":["../../src/Tabs/context.ts"],"sourcesContent":["\"use client\"\nimport { createContext, useContext } from \"react\";\nimport { TabsProps } from \"./types\";\n\nexport const TabContext = createContext<Omit<TabsProps, \"children\"> | null>(null)\nexport const useTabs = () => useContext(TabContext) as Omit<TabsProps, \"children\">"],"names":[],"mappings":";;;;;;AAKO;;;"}

package/Tabs/context.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+const TabContext = createContext(null);
+const useTabs = () => useContext(TabContext);
+
+export { TabContext, useTabs };
+//# sourceMappingURL=context.js.map

package/Tabs/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../src/Tabs/context.ts"],"sourcesContent":["\"use client\"\nimport { createContext, useContext } from \"react\";\nimport { TabsProps } from \"./types\";\n\nexport const TabContext = createContext<Omit<TabsProps, \"children\"> | null>(null)\nexport const useTabs = () => useContext(TabContext) as Omit<TabsProps, \"children\">"],"names":[],"mappings":";;;;AAKO;;"}