@xanui/ui 1.2.8 → 1.2.11

package/Switch/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;\n    disabled?: useBreakpointPropsType<boolean>;\n    trackSize?: useBreakpointPropsType<number>;\n    icon?: useBreakpointPropsType<ReactElement>;\n    slotProps?: {\n        thumb?: Omit<TagProps, 'children'>;\n        track?: Omit<TagProps, 'children'>;\n    }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (disabled) _p.disabled = disabled\n    if (trackSize) _p.trackSize = trackSize\n    if (icon) _p.icon = icon\n    const p: any = useBreakpointProps(_p)\n    size = p.size ?? \"medium\"\n    color = p.color ?? \"primary\"\n    disabled = p.disabled\n    trackSize = p.trackSize\n    icon = p.icon\n\n    const [c, set] = useState(false)\n    checked ??= c\n\n    onChange = onChange || (() => set(!c));\n\n    let sizes: any = {\n        small: 32,\n        medium: 48,\n        large: 60\n    }\n    let _size = sizes[size as any] || size\n\n    let height = (_size / 2)\n    trackSize ??= height + 4\n    let isNormalSize = (height + 4) === trackSize\n    let transform = checked ? \"92%\" : \"8%\"\n    if (!isNormalSize) {\n        transform = checked ? \"100%\" : \"-10%\"\n    }\n\n    return (\n        <Tag\n            disabled={disabled}\n            sxr={{\n                width: _size,\n                height: height,\n                position: \"relative\",\n                cursor: \"pointer\",\n                display: \"inline-block\"\n            }}\n            onClick={onChange}\n        >\n            <Tag\n                {...slotProps?.track}\n                baseClass='switch-track-bar'\n                sxr={{\n                    width: _size,\n                    height: trackSize,\n                    borderRadius: height,\n                    position: 'absolute',\n                    top: \"50%\",\n                    transform: \"translateY(-50%)\",\n                    bgcolor: checked ? color : 'surface.divider',\n\n                }}\n            >\n            </Tag>\n            <Tag\n                {...slotProps?.thumb}\n                baseClass='switch-thumb'\n                sxr={{\n                    transition: \"all .25s\",\n                    width: height,\n                    height: height,\n                    radius: height,\n                    bgcolor: \"#FFFFFF\",\n                    position: \"absolute\",\n                    top: \"50%\",\n                    border: isNormalSize ? 0 : 1,\n                    left: 0,\n                    transform: `translate(${transform}, -50%)`,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\"\n                }}\n            >\n                {\n                    icon\n                }\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                type=\"radio\"\n                readOnly\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </Tag>\n    )\n})\n\nexport default Switch\n"],"names":[],"mappings":";;;;;;;;AAkBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;\n    disabled?: useBreakpointPropsType<boolean>;\n    trackSize?: useBreakpointPropsType<number>;\n    icon?: useBreakpointPropsType<ReactElement>;\n    slotProps?: {\n        thumb?: Omit<TagProps, 'children'>;\n        track?: Omit<TagProps, 'children'>;\n    }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (disabled) _p.disabled = disabled\n    if (trackSize) _p.trackSize = trackSize\n    if (icon) _p.icon = icon\n    const p: any = useBreakpointProps(_p)\n    size = p.size ?? \"medium\"\n    color = p.color ?? \"primary\"\n    disabled = p.disabled\n    trackSize = p.trackSize\n    icon = p.icon\n\n    const [c, set] = useState(false)\n    checked ??= c\n\n    onChange = onChange || (() => set(!c));\n\n    let sizes: any = {\n        small: 32,\n        medium: 48,\n        large: 60\n    }\n    let _size = sizes[size as any] || size\n\n    let height = (_size / 2)\n    trackSize ??= height + 4\n    let isNormalSize = (height + 4) === trackSize\n    let transform = checked ? \"92%\" : \"8%\"\n    if (!isNormalSize) {\n        transform = checked ? \"100%\" : \"-10%\"\n    }\n\n    return (\n        <Tag\n            disabled={disabled}\n            sxr={{\n                width: _size,\n                height: height,\n                position: \"relative\",\n                cursor: \"pointer\",\n                display: \"inline-block\"\n            }}\n            onClick={onChange}\n        >\n            <Tag\n                {...slotProps?.track}\n                baseClass='switch-track-bar'\n                sxr={{\n                    width: _size,\n                    height: trackSize,\n                    borderRadius: height,\n                    position: 'absolute',\n                    top: \"50%\",\n                    transform: \"translateY(-50%)\",\n                    bgcolor: checked ? color : 'default.divider',\n\n                }}\n            >\n            </Tag>\n            <Tag\n                {...slotProps?.thumb}\n                baseClass='switch-thumb'\n                sxr={{\n                    transition: \"all .25s\",\n                    width: height,\n                    height: height,\n                    radius: height,\n                    bgcolor: \"#FFFFFF\",\n                    position: \"absolute\",\n                    top: \"50%\",\n                    border: isNormalSize ? 0 : 1,\n                    left: 0,\n                    transform: `translate(${transform}, -50%)`,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\"\n                }}\n            >\n                {\n                    icon\n                }\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                type=\"radio\"\n                readOnly\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </Tag>\n    )\n})\n\nexport default Switch\n"],"names":[],"mappings":";;;;;;;;AAkBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}

package/Switch/index.d.ts

@@ -4,7 +4,7 @@ import { TagProps, useBreakpointPropsType, UseColorTemplateColor } from '@xanui/
 type SwitchProps = Omit<TagProps<"input">, "color" | "size" | "component" | "type" | "checked"> & {
     checked?: boolean;
     size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
-    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;
+    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;
     disabled?: useBreakpointPropsType<boolean>;
     trackSize?: useBreakpointPropsType<number>;
     icon?: useBreakpointPropsType<ReactElement>;

package/Switch/index.js

@@ -53,7 +53,7 @@ const Switch = React.forwardRef((props, ref) => {
                     position: 'absolute',
                     top: "50%",
                     transform: "translateY(-50%)",
-                    bgcolor: checked ? color : 'surface.divider',
+                    bgcolor: checked ? color : 'default.divider',
                 } })), jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.thumb, { baseClass: 'switch-thumb', sxr: {
                     transition: "all .25s",
                     width: height,

package/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;\n    disabled?: useBreakpointPropsType<boolean>;\n    trackSize?: useBreakpointPropsType<number>;\n    icon?: useBreakpointPropsType<ReactElement>;\n    slotProps?: {\n        thumb?: Omit<TagProps, 'children'>;\n        track?: Omit<TagProps, 'children'>;\n    }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (disabled) _p.disabled = disabled\n    if (trackSize) _p.trackSize = trackSize\n    if (icon) _p.icon = icon\n    const p: any = useBreakpointProps(_p)\n    size = p.size ?? \"medium\"\n    color = p.color ?? \"primary\"\n    disabled = p.disabled\n    trackSize = p.trackSize\n    icon = p.icon\n\n    const [c, set] = useState(false)\n    checked ??= c\n\n    onChange = onChange || (() => set(!c));\n\n    let sizes: any = {\n        small: 32,\n        medium: 48,\n        large: 60\n    }\n    let _size = sizes[size as any] || size\n\n    let height = (_size / 2)\n    trackSize ??= height + 4\n    let isNormalSize = (height + 4) === trackSize\n    let transform = checked ? \"92%\" : \"8%\"\n    if (!isNormalSize) {\n        transform = checked ? \"100%\" : \"-10%\"\n    }\n\n    return (\n        <Tag\n            disabled={disabled}\n            sxr={{\n                width: _size,\n                height: height,\n                position: \"relative\",\n                cursor: \"pointer\",\n                display: \"inline-block\"\n            }}\n            onClick={onChange}\n        >\n            <Tag\n                {...slotProps?.track}\n                baseClass='switch-track-bar'\n                sxr={{\n                    width: _size,\n                    height: trackSize,\n                    borderRadius: height,\n                    position: 'absolute',\n                    top: \"50%\",\n                    transform: \"translateY(-50%)\",\n                    bgcolor: checked ? color : 'surface.divider',\n\n                }}\n            >\n            </Tag>\n            <Tag\n                {...slotProps?.thumb}\n                baseClass='switch-thumb'\n                sxr={{\n                    transition: \"all .25s\",\n                    width: height,\n                    height: height,\n                    radius: height,\n                    bgcolor: \"#FFFFFF\",\n                    position: \"absolute\",\n                    top: \"50%\",\n                    border: isNormalSize ? 0 : 1,\n                    left: 0,\n                    transform: `translate(${transform}, -50%)`,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\"\n                }}\n            >\n                {\n                    icon\n                }\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                type=\"radio\"\n                readOnly\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </Tag>\n    )\n})\n\nexport default Switch\n"],"names":[],"mappings":";;;;;;AAkBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Switch/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type SwitchProps = Omit<TagProps<\"input\">, \"color\" | \"size\" | \"component\" | \"type\" | \"checked\"> & {\n    checked?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;\n    disabled?: useBreakpointPropsType<boolean>;\n    trackSize?: useBreakpointPropsType<number>;\n    icon?: useBreakpointPropsType<ReactElement>;\n    slotProps?: {\n        thumb?: Omit<TagProps, 'children'>;\n        track?: Omit<TagProps, 'children'>;\n    }\n}\n\nconst Switch = React.forwardRef((props: SwitchProps, ref?: React.Ref<any>) => {\n    let [{ size, checked, color, disabled, icon, onChange, trackSize, slotProps, ...rest }] = useInterface<any>(\"Switch\", props, {})\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (disabled) _p.disabled = disabled\n    if (trackSize) _p.trackSize = trackSize\n    if (icon) _p.icon = icon\n    const p: any = useBreakpointProps(_p)\n    size = p.size ?? \"medium\"\n    color = p.color ?? \"primary\"\n    disabled = p.disabled\n    trackSize = p.trackSize\n    icon = p.icon\n\n    const [c, set] = useState(false)\n    checked ??= c\n\n    onChange = onChange || (() => set(!c));\n\n    let sizes: any = {\n        small: 32,\n        medium: 48,\n        large: 60\n    }\n    let _size = sizes[size as any] || size\n\n    let height = (_size / 2)\n    trackSize ??= height + 4\n    let isNormalSize = (height + 4) === trackSize\n    let transform = checked ? \"92%\" : \"8%\"\n    if (!isNormalSize) {\n        transform = checked ? \"100%\" : \"-10%\"\n    }\n\n    return (\n        <Tag\n            disabled={disabled}\n            sxr={{\n                width: _size,\n                height: height,\n                position: \"relative\",\n                cursor: \"pointer\",\n                display: \"inline-block\"\n            }}\n            onClick={onChange}\n        >\n            <Tag\n                {...slotProps?.track}\n                baseClass='switch-track-bar'\n                sxr={{\n                    width: _size,\n                    height: trackSize,\n                    borderRadius: height,\n                    position: 'absolute',\n                    top: \"50%\",\n                    transform: \"translateY(-50%)\",\n                    bgcolor: checked ? color : 'default.divider',\n\n                }}\n            >\n            </Tag>\n            <Tag\n                {...slotProps?.thumb}\n                baseClass='switch-thumb'\n                sxr={{\n                    transition: \"all .25s\",\n                    width: height,\n                    height: height,\n                    radius: height,\n                    bgcolor: \"#FFFFFF\",\n                    position: \"absolute\",\n                    top: \"50%\",\n                    border: isNormalSize ? 0 : 1,\n                    left: 0,\n                    transform: `translate(${transform}, -50%)`,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\"\n                }}\n            >\n                {\n                    icon\n                }\n            </Tag>\n            <Tag\n                {...rest}\n                component='input'\n                ref={ref}\n                type=\"radio\"\n                readOnly\n                checked={checked}\n                sxr={{\n                    display: \"none!important\"\n                }}\n            />\n        </Tag>\n    )\n})\n\nexport default Switch\n"],"names":[],"mappings":";;;;;;AAkBA;;AACI;;AAEA;AAAU;AACV;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAU;AACV;AACA;AACA;AACA;AACA;AACA;;;AAKA;AAEA;AACI;AACA;AACA;;;AAIJ;;;;;;;;AAYY;AACA;AACA;AACA;AACA;;AAQI;AACA;AACA;AACA;AACA;AACA;;AAGH;AAOG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAeA;;AAKpB;;"}

package/Tab/index.cjs

@@ -29,7 +29,7 @@ const Tab = React.forwardRef((_a, ref) => {
         }
     }, [container.variant, container.color]);
     const isSelected = value === container.value;
-    return (jsxRuntime.jsx(index, Object.assign({}, _props, { color: container.variant === "text" && isSelected ? container.color : 'surface', variant: "text", onClick: (e) => {
+    return (jsxRuntime.jsx(index, 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.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.8",
+  "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"
   },