@xanui/ui 1.2.8 → 1.2.11

package/LineProgress/index.cjs

@@ -38,10 +38,10 @@ const LineProgress = React.forwardRef((_a, ref) => {
             height: thumbSize,
             position: "relative",
             overflow: "hidden",
-            bgcolor: hideTrack ? "transparent" : `surface.divider`,
+            bgcolor: hideTrack ? "transparent" : `default.divider`,
             radius: 2,
         }, ref: ref, children: jsxRuntime.jsx(core.Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
-                bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,
+                bgcolor: color === 'default' ? `default.contrast` : `${color}`,
                 width: isVal ? `${value}%` : "50%",
                 height: thumbSize,
                 position: "absolute",

package/LineProgress/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `surface.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `default.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'default' ? `default.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/LineProgress/index.js

@@ -36,10 +36,10 @@ const LineProgress = React.forwardRef((_a, ref) => {
             height: thumbSize,
             position: "relative",
             overflow: "hidden",
-            bgcolor: hideTrack ? "transparent" : `surface.divider`,
+            bgcolor: hideTrack ? "transparent" : `default.divider`,
             radius: 2,
         }, ref: ref, children: jsx(Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
-                bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,
+                bgcolor: color === 'default' ? `default.contrast` : `${color}`,
                 width: isVal ? `${value}%` : "50%",
                 height: thumbSize,
                 position: "absolute",

package/LineProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `surface.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `default.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'default' ? `default.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/ListItem/index.cjs

@@ -21,8 +21,8 @@ const ListItem = React.forwardRef((_a, ref) => {
     const p = core.useBreakpointProps(_p);
     const listProps = ListContext.useListContext();
     const template = core.useColorTemplate(listProps.color, listProps.variant);
-    const defaultTemplate = core.useColorTemplate("surface", "text");
-    const hoverTemplate = core.useColorTemplate('surface', "fill");
+    const defaultTemplate = core.useColorTemplate("default", "text");
+    const hoverTemplate = core.useColorTemplate('default', "fill");
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;

package/ListItem/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"surface\", \"text\")\n    const hoverTemplate = useColorTemplate('surface', \"fill\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.main,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.main.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.main : defaultTemplate.main,\n        text: {\n            color: selected ? template.main.color : defaultTemplate.main.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"fill\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.main,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.main.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.main : defaultTemplate.main,\n        text: {\n            color: selected ? template.main.color : defaultTemplate.main.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}

package/ListItem/index.js

@@ -19,8 +19,8 @@ const ListItem = React.forwardRef((_a, ref) => {
     const p = useBreakpointProps(_p);
     const listProps = useListContext();
     const template = useColorTemplate(listProps.color, listProps.variant);
-    const defaultTemplate = useColorTemplate("surface", "text");
-    const hoverTemplate = useColorTemplate('surface', "fill");
+    const defaultTemplate = useColorTemplate("default", "text");
+    const hoverTemplate = useColorTemplate('default', "fill");
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;

package/ListItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"surface\", \"text\")\n    const hoverTemplate = useColorTemplate('surface', \"fill\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.main,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.main.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.main : defaultTemplate.main,\n        text: {\n            color: selected ? template.main.color : defaultTemplate.main.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType, useColorTemplate } from '@xanui/core'\nimport Text, { TextProps } from '../Text';\nimport { useListContext } from '../List/ListContext';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n    selected?: boolean;\n    subtitle?: useBreakpointPropsType<string | ReactElement>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    slotProps?: {\n        content: Omit<TextProps, \"children\">;\n        startIcon: Omit<TagProps, \"children\">;\n        endIcon: Omit<TagProps, \"children\">;\n        subtititle: Omit<TextProps, \"children\">;\n    }\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, slotProps, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n    let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n    const _p: any = {}\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    const p: any = useBreakpointProps(_p)\n    const listProps = useListContext()\n    const template = useColorTemplate(listProps.color, listProps.variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"fill\")\n\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    const size = listProps?.size\n\n    let sizes: any = {\n        small: {\n            fontSize: \"button\",\n            py: 0.5,\n            px: 1,\n            minHeight: 32,\n        },\n        medium: {\n            fontSize: \"text\",\n            py: 1,\n            px: 1.5,\n            minHeight: 40,\n        },\n        large: {\n            fontSize: \"h6\",\n            py: 1.5,\n            px: 2,\n            minHeight: 48,\n        }\n    }\n\n    const hoversx = {\n        ...hoverTemplate.main,\n        \"& .list-item-icon\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-text\": {\n            color: hoverTemplate.main.color\n        },\n        \"& .list-item-subtitle\": {\n            color: hoverTemplate.main.color\n        }\n    }\n\n    let sx = {\n        item: selected ? template.main : defaultTemplate.main,\n        text: {\n            color: selected ? template.main.color : defaultTemplate.main.color\n        }\n    }\n\n    return (\n        <Tag\n            component='li'\n            {...listProps?.listItem}\n            {...props}\n            sxr={{\n                alignItems: \"center\",\n                display: \"flex\",\n                flexDirection: \"row\",\n                userSelect: \"none\",\n                cursor: \"pointer\",\n                lineHeight: 1.4,\n                whiteSpace: \"nowrap\",\n                flexShrink: \"0\",\n                ...sx.item,\n                ...sizes[size as any],\n                border: 0,\n                \"&:hover:not(.list-item-selected)\": hoversx\n            }}\n            baseClass='list-item'\n            classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n            ref={ref}\n        >\n            {startIcon && <Tag\n                {...slotProps?.startIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ...sx.text,\n                    mr: 1,\n                    display: \"inline-block\"\n                }}\n            >{startIcon as any}</Tag>}\n            <Tag flex={1}>\n                <Text\n                    {...slotProps?.content}\n                    variant=\"text\"\n                    className='list-item-text'\n                    component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n                    sx={sx.text}\n                >\n                    {children}\n                </Text>\n                {\n                    subtitle && <Text\n                        {...slotProps?.subtititle}\n                        variant=\"text\"\n                        fontSize=\"button\"\n                        className='list-item-subtitle'\n                        component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n                        sx={sx.text}\n                    >{subtitle as any}</Text>\n                }\n            </Tag>\n            {endIcon && <Tag\n                {...slotProps?.endIcon}\n                component=\"span\"\n                baseClass='list-item-icon'\n                sxr={{\n                    ml: 1,\n                    display: \"inline-block\"\n                }}\n            >{endIcon as any}</Tag>}\n        </Tag>\n    )\n})\n\nexport default ListItem"],"names":[],"mappings":";;;;;;;;AAsBA;AAAsE;AAClE;;AAEA;AAAc;AACd;AAAe;AACf;AAAa;AACb;AACA;AACA;;;AAIA;AACA;AACA;;AAGA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AAGQ;AACH;AAEG;AACH;AAEG;AACH;AAGL;AACI;AACA;AACI;AACH;;AAGL;AA2DgB;AACA;AACH;AAIjB;;"}

package/Menu/index.cjs

@@ -153,7 +153,7 @@ const Menu = (_a) => {
             }, ref: menuRef, sx: Object.assign({ position: "fixed", zIndex: 1500 + (zIndex || 0) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutSide) === null || _b === void 0 ? void 0 : _b.sx), children: jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: () => {
                     setClosed(true);
                     onExited && onExited();
-                }, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "surface.main", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _c === void 0 ? void 0 : _c.sx), children: children })) })) })) })));
+                }, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "default.base", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _c === void 0 ? void 0 : _c.sx), children: children })) })) })) })));
 };
 
 module.exports = Menu;

package/Menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside, { ClickOutsideProps } from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onEnter?: TransitionProps['onEnter'];\n    onEntered?: TransitionProps['onEntered'];\n    onExit?: TransitionProps['onExit'];\n    onExited?: TransitionProps['onExited'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutSide?: Omit<ClickOutsideProps, \"children\">\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onEnter, onEntered, onExit, onExited, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                {...slotProps?.clickOutSide}\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    ...slotProps?.clickOutSide?.sx\n                }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={() => {\n                        setClosed(true);\n                        onExited && onExited()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"surface.main\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA2CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;AAEZ;;;AAMgB;AACI;;AAER;;;;AAwChB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside, { ClickOutsideProps } from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onEnter?: TransitionProps['onEnter'];\n    onEntered?: TransitionProps['onEntered'];\n    onExit?: TransitionProps['onExit'];\n    onExited?: TransitionProps['onExited'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutSide?: Omit<ClickOutsideProps, \"children\">\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onEnter, onEntered, onExit, onExited, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                {...slotProps?.clickOutSide}\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    ...slotProps?.clickOutSide?.sx\n                }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={() => {\n                        setClosed(true);\n                        onExited && onExited()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"default.base\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;;;AA2CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;AAEZ;;;AAMgB;AACI;;AAER;;;;AAwChB;;"}

package/Menu/index.js

@@ -151,7 +151,7 @@ const Menu = (_a) => {
             }, ref: menuRef, sx: Object.assign({ position: "fixed", zIndex: 1500 + (zIndex || 0) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutSide) === null || _b === void 0 ? void 0 : _b.sx), children: jsx(Transition, Object.assign({ duration: duration !== null && duration !== void 0 ? duration : 200, easing: "fast", variant: variant !== null && variant !== void 0 ? variant : "grow" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: isOpen, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: () => {
                     setClosed(true);
                     onExited && onExited();
-                }, children: jsx(Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "surface.main", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _c === void 0 ? void 0 : _c.sx), children: children })) })) })) })));
+                }, children: jsx(Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "default.base", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _c === void 0 ? void 0 : _c.sx), children: children })) })) })) })));
 };
 
 export { Menu as default };

package/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside, { ClickOutsideProps } from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onEnter?: TransitionProps['onEnter'];\n    onEntered?: TransitionProps['onEntered'];\n    onExit?: TransitionProps['onExit'];\n    onExited?: TransitionProps['onExited'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutSide?: Omit<ClickOutsideProps, \"children\">\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onEnter, onEntered, onExit, onExited, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                {...slotProps?.clickOutSide}\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    ...slotProps?.clickOutSide?.sx\n                }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={() => {\n                        setClosed(true);\n                        onExited && onExited()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"surface.main\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AA2CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;AAEZ;;;AAMgB;AACI;;AAER;;;;AAwChB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Menu/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState, useRef } from \"react\";\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\";\nimport Portal, { PortalProps } from \"../Portal\";\nimport ClickOutside, { ClickOutsideProps } from \"../ClickOutside\";\n\nexport type PlacementTypes =\n    | \"top\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"bottom\"\n    | \"bottom-left\"\n    | \"bottom-right\"\n    | \"right\"\n    | \"right-top\"\n    | \"right-bottom\"\n    | \"left\"\n    | \"left-top\"\n    | \"left-bottom\";\n\nexport type MenuProps = {\n    children?: ReactNode;\n    target?: HTMLElement;\n    placement?: useBreakpointPropsType<PlacementTypes>;\n    zIndex?: number;\n\n    variant?: TransitionProps['variant'];\n    duration?: TransitionProps['duration'];\n    onEnter?: TransitionProps['onEnter'];\n    onEntered?: TransitionProps['onEntered'];\n    onExit?: TransitionProps['onExit'];\n    onExited?: TransitionProps['onExited'];\n\n    onClickOutside?: (e: MouseEvent) => void;\n\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        portal?: Omit<PortalProps, \"children\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutSide?: Omit<ClickOutsideProps, \"children\">\n    };\n};\n\nconst placements: PlacementTypes[] = [\n    \"top\",\n    \"top-left\",\n    \"top-right\",\n    \"bottom\",\n    \"bottom-left\",\n    \"bottom-right\",\n    \"right\",\n    \"right-top\",\n    \"right-bottom\",\n    \"left\",\n    \"left-top\",\n    \"left-bottom\",\n];\n\nconst getTransformOrigin = (placement: PlacementTypes) => {\n    switch (placement) {\n        case \"top\":\n            return \"bottom\";\n        case \"top-left\":\n            return \"bottom left\";\n        case \"top-right\":\n            return \"bottom right\";\n        case \"bottom\":\n            return \"top\";\n        case \"bottom-left\":\n            return \"top left\";\n        case \"bottom-right\":\n            return \"top right\";\n        case \"left\":\n            return \"right\";\n        case \"left-top\":\n            return \"top right\";\n        case \"left-bottom\":\n            return \"bottom right\";\n        case \"right\":\n            return \"left\";\n        case \"right-top\":\n            return \"top left\";\n        case \"right-bottom\":\n            return \"bottom left\";\n        default:\n            return \"top\";\n    }\n};\n\nconst clampToViewport = (menu: HTMLElement, top: number, left: number) => {\n    const { width, height } = menu.getBoundingClientRect();\n\n    const clampedTop = Math.max(0, Math.min(top, window.innerHeight - height));\n    const clampedLeft = Math.max(0, Math.min(left, window.innerWidth - width));\n\n    return { top: clampedTop, left: clampedLeft };\n};\n\n// Compute coordinates for each placement\nconst computePosition = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    const { width: mw, height: mh } = menu.getBoundingClientRect();\n    const {\n        top: tt,\n        left: tl,\n        bottom: tb,\n        right: tr,\n        width: tw,\n        height: th,\n    } = target.getBoundingClientRect();\n\n    const positions: Record<PlacementTypes, { top: number; left: number }> = {\n        \"bottom-left\": { top: tb, left: tl },\n        \"bottom-right\": { top: tb, left: tr - mw },\n        bottom: { top: tb, left: tl + (tw - mw) / 2 },\n\n        \"top-left\": { top: tt - mh, left: tl },\n        \"top-right\": { top: tt - mh, left: tr - mw },\n        top: { top: tt - mh, left: tl + (tw - mw) / 2 },\n\n        left: { top: tt + (th - mh) / 2, left: tl - mw },\n        \"left-top\": { top: tt, left: tl - mw },\n        \"left-bottom\": { top: tb - mh, left: tl - mw },\n\n        right: { top: tt + (th - mh) / 2, left: tr },\n        \"right-top\": { top: tt, left: tr },\n        \"right-bottom\": { top: tb - mh, left: tr },\n    };\n\n    return positions[placement];\n};\n\n\n// Check if menu is off-screen\nconst isOffScreen = (menu: HTMLElement) => {\n    const { x, y, width, height } = menu.getBoundingClientRect();\n    return x < 0 || y < 0 || x + width > window.innerWidth || y + height > window.innerHeight;\n};\n\nconst placeMenu = (\n    placement: PlacementTypes,\n    menu: HTMLElement,\n    target: HTMLElement\n) => {\n    let finalPlacement = placement;\n\n    let pos = computePosition(placement, menu, target);\n    let clamped = clampToViewport(menu, pos.top, pos.left);\n\n    menu.style.top = clamped.top + \"px\";\n    menu.style.left = clamped.left + \"px\";\n\n    // Try better placements\n    if (isOffScreen(menu)) {\n        for (const p of placements) {\n            const fallbackPos = computePosition(p, menu, target);\n            const fallbackClamped = clampToViewport(menu, fallbackPos.top, fallbackPos.left);\n\n            menu.style.top = fallbackClamped.top + \"px\";\n            menu.style.left = fallbackClamped.left + \"px\";\n\n            if (!isOffScreen(menu)) {\n                finalPlacement = p;\n                break;\n            }\n        }\n    }\n\n    return finalPlacement;\n};\n\n\n\nconst Menu = ({ children, target, ...props }: MenuProps) => {\n    let [{ onClickOutside, variant, duration, onEnter, onEntered, onExit, onExited, placement, zIndex, slotProps }] = useInterface<any>(\"Menu\", props, {});\n    const _p: any = {};\n    if (placement) _p.placement = placement;\n    const p: any = useBreakpointProps(_p);\n    placement = p.placement || \"bottom-left\";\n\n    const isOpen = Boolean(target);\n    const [closed, setClosed] = useState(!isOpen);\n    const [placed, setPlaced] = useState<PlacementTypes>(placement);\n    const menuRef = useRef<HTMLDivElement>(null);\n\n    // Open/close effect\n    useEffect(() => {\n        if (closed && isOpen) setClosed(false);\n    }, [isOpen]);\n\n\n    useEffect(() => {\n        if (!closed && target && menuRef.current) {\n            const updatePosition = () => {\n                if (menuRef.current && target) {\n                    requestAnimationFrame(() => {\n                        const p = placeMenu(placement!, menuRef.current as any, target);\n                        setPlaced(p);\n                    });\n                }\n            };\n\n            updatePosition();\n            window.addEventListener(\"resize\", updatePosition);\n            window.addEventListener(\"scroll\", updatePosition, true);\n\n            return () => {\n                window.removeEventListener(\"resize\", updatePosition);\n                window.removeEventListener(\"scroll\", updatePosition, true);\n            };\n        }\n        return\n    }, [closed, target, placement]);\n\n    if (closed) return null;\n\n    return (\n        <Portal {...slotProps?.portal}>\n            <ClickOutside\n                {...slotProps?.clickOutSide}\n                onClickOutside={(e: MouseEvent) => {\n                    if (target?.contains(e.target as any)) return;\n                    if (e.target !== target) {\n                        onClickOutside && onClickOutside(e);\n                    }\n                }}\n                ref={menuRef}\n                sx={{\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    ...slotProps?.clickOutSide?.sx\n                }}\n            >\n                <Transition\n                    duration={duration ?? 200}\n                    easing=\"fast\"\n                    variant={variant ?? \"grow\"}\n                    {...slotProps?.transition}\n                    open={isOpen}\n                    onEnter={onEnter}\n                    onEntered={onEntered}\n                    onExit={onExit}\n                    onExited={() => {\n                        setClosed(true);\n                        onExited && onExited()\n                    }}\n                >\n                    <Tag\n                        baseClass=\"menu-content\"\n                        {...slotProps?.content}\n                        sxr={{\n                            overflow: \"hidden\",\n                            bgcolor: \"default.base\",\n                            shadow: 2,\n                            radius: 1,\n                            transformOrigin: getTransformOrigin(placed),\n                            ...slotProps?.content?.sx,\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Transition>\n            </ClickOutside>\n        </Portal>\n    );\n};\n\nexport default Menu;\n"],"names":[],"mappings":";;;;;;;;AA2CA;;;;;;;;;;;;;;AAeA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;;;;AAOA;AAEA;AACA;AAKI;AACA;AASA;;;AAGI;;AAGA;AACA;AAEA;;AAEA;AAEA;;;;AAKJ;AACJ;AAGA;AACA;AACI;;AAEJ;AAEA;;;AAQI;;;;AAMA;AACI;;AAEI;;;AAKA;;;;;;AAOR;AACJ;AAIA;;;AACI;;AAEA;AAAe;AACf;AACA;AAEA;;;AAGA;;;;;AAKA;;;;AAMY;;AAEQ;;AAEJ;;AAER;AAEA;AACA;;AAGA;AACI;;AAEJ;;;;AAKR;AAAY;AAEZ;;;AAMgB;AACI;;AAER;;;;AAwChB;;"}

package/Modal/index.cjs

@@ -20,7 +20,7 @@ const Modal = (props) => {
     size = size !== null && size !== void 0 ? size : "xs";
     slotProps = slotProps || {};
     const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
-    return (jsxRuntime.jsx(index, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "surface.main", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
+    return (jsxRuntime.jsx(index, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "default.base", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
 };
 Modal.open = (Children, props) => {
     const InstanceModal = (_a) => {

package/Modal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onEnter, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"surface.main\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onExited: () => {\n         m.unrender()\n         if (props?.onExited) {\n            props.onExited()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onEnter, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"default.base\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onExited: () => {\n         m.unrender()\n         if (props?.onExited) {\n            props.onExited()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}

package/Modal/index.js

@@ -18,7 +18,7 @@ const Modal = (props) => {
     size = size !== null && size !== void 0 ? size : "xs";
     slotProps = slotProps || {};
     const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
-    return (jsx(Layer, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsx(Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "surface.main", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
+    return (jsx(Layer, Object.assign({}, layerProps, { slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }), children: jsx(Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "default.base", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: children })) })));
 };
 Modal.open = (Children, props) => {
     const InstanceModal = (_a) => {

package/Modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onEnter, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"surface.main\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onExited: () => {\n         m.unrender()\n         if (props?.onExited) {\n            props.onExited()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}
+{"version":3,"file":"index.js","sources":["../../src/Modal/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode } from \"react\";\n// import useModal, { UseModalProps } from \"../useModal\";\nimport { Renderar, Tag, TagProps } from \"@xanui/core\";\nimport Layer, { ActionLayerChildren, LayerProps } from \"../Layer\";\n\nexport type ModalProps = Omit<LayerProps, \"slotProps\"> & {\n   children: ReactNode;\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n   slotProps?: {\n      layer?: LayerProps['slotProps'];\n      root?: Omit<TagProps<'div'>, \"children\">\n   }\n}\n\n\nconst Modal = (props: ModalProps) => {\n   let sizes: any = {\n      xs: 420,\n      sm: 760,\n      md: 990,\n      lg: 1120,\n      xl: 1300,\n      full: \"100%\"\n   }\n   let { children, onEnter, size, slotProps, ...layerProps } = props || {}\n   size = size ?? \"xs\"\n   slotProps = slotProps || {} as any\n   const root: any = slotProps?.root || {}\n\n   return (\n      <Layer\n         {...layerProps}\n         slotProps={{\n            ...slotProps?.layer,\n            clickOutside: {\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               ...slotProps?.layer?.clickOutside,\n            },\n            root: {\n               display: \"flex\",\n               alignItems: 'center',\n               justifyContent: \"center\",\n               ...slotProps?.layer?.root,\n            }\n         }}\n      >\n         <Tag\n            {...root}\n            sxr={{\n               maxWidth: sizes[size as any] || size,\n               width: \"100%\",\n               radius: 2,\n               bgcolor: \"default.base\",\n               shadow: 15,\n               ...root?.sx\n            }}\n            baseClass='modal'\n         >\n            {children}\n         </Tag>\n      </Layer>\n   )\n}\n\nModal.open = (Children: ActionLayerChildren, props?: Omit<ModalProps, 'children' | \"open\">) => {\n   const InstanceModal = ({ children, ...props }: ModalProps) => <Modal {...props} >{children}</Modal>;\n   const m = Renderar.render(InstanceModal as any, {\n      open: true,\n      children: typeof Children === \"function\" ? <Children\n         open={() => m.updateProps({ open: true })}\n         close={() => m.updateProps({ open: false })}\n      /> : Children,\n      ...props,\n      onClickOutside: () => {\n         if (props?.onClickOutside) {\n            props.onClickOutside()\n         } else {\n            m.updateProps({ open: false })\n         }\n      },\n      onExited: () => {\n         m.unrender()\n         if (props?.onExited) {\n            props.onExited()\n         }\n      }\n   })\n\n   return {\n      open: () => {\n         m.updateProps({ open: true })\n      },\n      close: () => {\n         m.updateProps({ open: false })\n      },\n   }\n};\n\n\nexport default Modal;"],"names":[],"mappings":";;;;;;AAgBA;;AACG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;;AAoCH;AAEA;AACG;AAAuB;AAAuC;;AAC9D;;;;;;;AAaG;;;;;AAMA;;;;;;;;;AAWN;;"}

package/PasswordInput/index.cjs

@@ -12,7 +12,7 @@ var React = require('react');
 const PasswordInput = React.forwardRef((_a, ref) => {
     var { defaultShow } = _a, props = tslib.__rest(_a, ["defaultShow"]);
     const [show, setShow] = React.useState(defaultShow !== null && defaultShow !== void 0 ? defaultShow : false);
-    return (jsxRuntime.jsx(index, Object.assign({ ref: ref, variant: "outline", placeholder: "Password" }, props, { type: show ? "text" : "password", endIcon: jsxRuntime.jsx(index$1, { variant: "text", color: "surface", size: "small", onClick: () => {
+    return (jsxRuntime.jsx(index, Object.assign({ ref: ref, variant: "outline", placeholder: "Password" }, props, { type: show ? "text" : "password", endIcon: jsxRuntime.jsx(index$1, { variant: "text", color: "default", size: "small", onClick: () => {
                 setShow(p => !p);
             }, children: show ? jsxRuntime.jsx(Visibility, {}) : jsxRuntime.jsx(VisibilityOff, {}) }) })));
 });

package/PasswordInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/PasswordInput/index.tsx"],"sourcesContent":["\"use client\"\nimport Visibility from \"@xanui/icons/Visibility\"\nimport VisibilityOff from \"@xanui/icons/VisibilityOff\"\nimport IconButton from \"../IconButton\"\nimport Input from \"../Input\"\nimport { InputProps } from '../Input';\nimport React, { forwardRef } from 'react'\n\nexport type PasswordInputProps = InputProps & {\n   placeholder?: string;\n   defaultShow?: boolean\n}\n\nconst PasswordInput = forwardRef(({ defaultShow, ...props }: PasswordInputProps, ref: React.Ref<\"input\">) => {\n   const [show, setShow] = React.useState(defaultShow ?? false)\n\n   return (\n      <Input\n         ref={ref}\n         variant=\"outline\"\n         placeholder=\"Password\"\n         {...props}\n         type={show ? \"text\" : \"password\"}\n         endIcon={\n            <IconButton\n               variant=\"text\"\n               color=\"surface\"\n               size=\"small\"\n               onClick={() => {\n                  setShow(p => !p);\n               }}\n            >\n               {show ? <Visibility /> : <VisibilityOff />}\n            </IconButton>\n         }\n      />\n   )\n})\n\nexport default PasswordInput"],"names":[],"mappings":";;;;;;;;;;;AAaA;AAAkC;AAC/B;;;AAgBY;AAOf;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/PasswordInput/index.tsx"],"sourcesContent":["\"use client\"\nimport Visibility from \"@xanui/icons/Visibility\"\nimport VisibilityOff from \"@xanui/icons/VisibilityOff\"\nimport IconButton from \"../IconButton\"\nimport Input from \"../Input\"\nimport { InputProps } from '../Input';\nimport React, { forwardRef } from 'react'\n\nexport type PasswordInputProps = InputProps & {\n   placeholder?: string;\n   defaultShow?: boolean\n}\n\nconst PasswordInput = forwardRef(({ defaultShow, ...props }: PasswordInputProps, ref: React.Ref<\"input\">) => {\n   const [show, setShow] = React.useState(defaultShow ?? false)\n\n   return (\n      <Input\n         ref={ref}\n         variant=\"outline\"\n         placeholder=\"Password\"\n         {...props}\n         type={show ? \"text\" : \"password\"}\n         endIcon={\n            <IconButton\n               variant=\"text\"\n               color=\"default\"\n               size=\"small\"\n               onClick={() => {\n                  setShow(p => !p);\n               }}\n            >\n               {show ? <Visibility /> : <VisibilityOff />}\n            </IconButton>\n         }\n      />\n   )\n})\n\nexport default PasswordInput"],"names":[],"mappings":";;;;;;;;;;;AAaA;AAAkC;AAC/B;;;AAgBY;AAOf;;"}

package/PasswordInput/index.js

@@ -10,7 +10,7 @@ import React, { forwardRef } from 'react';
 const PasswordInput = forwardRef((_a, ref) => {
     var { defaultShow } = _a, props = __rest(_a, ["defaultShow"]);
     const [show, setShow] = React.useState(defaultShow !== null && defaultShow !== void 0 ? defaultShow : false);
-    return (jsx(Input, Object.assign({ ref: ref, variant: "outline", placeholder: "Password" }, props, { type: show ? "text" : "password", endIcon: jsx(IconButton, { variant: "text", color: "surface", size: "small", onClick: () => {
+    return (jsx(Input, Object.assign({ ref: ref, variant: "outline", placeholder: "Password" }, props, { type: show ? "text" : "password", endIcon: jsx(IconButton, { variant: "text", color: "default", size: "small", onClick: () => {
                 setShow(p => !p);
             }, children: show ? jsx(Visibility, {}) : jsx(VisibilityOff, {}) }) })));
 });

package/PasswordInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/PasswordInput/index.tsx"],"sourcesContent":["\"use client\"\nimport Visibility from \"@xanui/icons/Visibility\"\nimport VisibilityOff from \"@xanui/icons/VisibilityOff\"\nimport IconButton from \"../IconButton\"\nimport Input from \"../Input\"\nimport { InputProps } from '../Input';\nimport React, { forwardRef } from 'react'\n\nexport type PasswordInputProps = InputProps & {\n   placeholder?: string;\n   defaultShow?: boolean\n}\n\nconst PasswordInput = forwardRef(({ defaultShow, ...props }: PasswordInputProps, ref: React.Ref<\"input\">) => {\n   const [show, setShow] = React.useState(defaultShow ?? false)\n\n   return (\n      <Input\n         ref={ref}\n         variant=\"outline\"\n         placeholder=\"Password\"\n         {...props}\n         type={show ? \"text\" : \"password\"}\n         endIcon={\n            <IconButton\n               variant=\"text\"\n               color=\"surface\"\n               size=\"small\"\n               onClick={() => {\n                  setShow(p => !p);\n               }}\n            >\n               {show ? <Visibility /> : <VisibilityOff />}\n            </IconButton>\n         }\n      />\n   )\n})\n\nexport default PasswordInput"],"names":[],"mappings":";;;;;;;;;AAaA;AAAkC;AAC/B;;;AAgBY;AAOf;;"}
+{"version":3,"file":"index.js","sources":["../../src/PasswordInput/index.tsx"],"sourcesContent":["\"use client\"\nimport Visibility from \"@xanui/icons/Visibility\"\nimport VisibilityOff from \"@xanui/icons/VisibilityOff\"\nimport IconButton from \"../IconButton\"\nimport Input from \"../Input\"\nimport { InputProps } from '../Input';\nimport React, { forwardRef } from 'react'\n\nexport type PasswordInputProps = InputProps & {\n   placeholder?: string;\n   defaultShow?: boolean\n}\n\nconst PasswordInput = forwardRef(({ defaultShow, ...props }: PasswordInputProps, ref: React.Ref<\"input\">) => {\n   const [show, setShow] = React.useState(defaultShow ?? false)\n\n   return (\n      <Input\n         ref={ref}\n         variant=\"outline\"\n         placeholder=\"Password\"\n         {...props}\n         type={show ? \"text\" : \"password\"}\n         endIcon={\n            <IconButton\n               variant=\"text\"\n               color=\"default\"\n               size=\"small\"\n               onClick={() => {\n                  setShow(p => !p);\n               }}\n            >\n               {show ? <Visibility /> : <VisibilityOff />}\n            </IconButton>\n         }\n      />\n   )\n})\n\nexport default PasswordInput"],"names":[],"mappings":";;;;;;;;;AAaA;AAAkC;AAC/B;;;AAgBY;AAOf;;"}

package/RangeSlider/index.cjs

@@ -44,7 +44,7 @@ const RangeSlider = (props) => {
         _size.thumb = thumbSize;
     }
     if (disabled) {
-        color = 'surface.divider';
+        color = 'default.divider';
     }
     const isControlled = value !== undefined;
     const [internalValue, setInternalValue] = React.useState(() => {
@@ -124,7 +124,7 @@ const RangeSlider = (props) => {
                     position: "absolute",
                     width: "100%",
                     height: _size.track,
-                    bgcolor: 'surface.divider',
+                    bgcolor: 'default.divider',
                     radius: `${_size.track}px`,
                 } }), jsxRuntime.jsx(core.Tag, { sxr: {
                     position: "absolute",

package/RangeSlider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/RangeSlider/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactElement, useEffect, useRef, useState } from \"react\";\nimport {\n   Tag,\n   useBreakpointProps,\n   useBreakpointPropsType,\n   UseColorTemplateColor,\n   useInterface,\n} from \"@xanui/core\";\n\nexport type RangeSliderValue = number | number[];\n\nexport type RangeSliderProps = {\n   color?: useBreakpointPropsType<UseColorTemplateColor>;\n   min?: number;\n   max?: number;\n   step?: number;\n   value?: RangeSliderValue;\n   defaultValue?: RangeSliderValue;\n   onChange?: (value: RangeSliderValue) => void;\n   disabled?: boolean;\n   thumbContent?: (props: { value: number }) => ReactElement\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n   thumbSize?: number;\n};\n\nconst RangeSlider = (props: RangeSliderProps) => {\n   const { value, defaultValue, onChange, disabled, ...rest } = props;\n\n   // interface system\n   let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = \"sm\" }] = useInterface<any>(\n      \"RangeSlider\",\n      rest,\n      {}\n   );\n\n   const bp: any = useBreakpointProps({\n      color,\n      size\n   });\n   color = bp.color ?? \"primary\"\n   size = bp.size;\n\n   const sizesSX: any = {\n      xs: {\n         track: 2,\n         thumb: 8\n      },\n      sm: {\n         track: 4,\n         thumb: 14\n      },\n      md: {\n         track: 8,\n         thumb: 18\n      },\n      lg: {\n         track: 12,\n         thumb: 24\n      },\n      xl: {\n         track: 16,\n         thumb: 32\n      }\n   }\n\n   const _size = sizesSX[size]\n\n\n   if (thumbSize) {\n      _size.thumb = thumbSize\n   }\n\n   if (disabled) {\n      color = 'surface.divider'\n   }\n\n   const isControlled = value !== undefined;\n\n   const [internalValue, setInternalValue] = useState<number[]>(() => {\n      if (value !== undefined) return Array.isArray(value) ? value : [value];\n      if (defaultValue !== undefined)\n         return Array.isArray(defaultValue)\n            ? defaultValue\n            : [defaultValue];\n      return [min];\n   });\n\n   // sync controlled\n   useEffect(() => {\n      if (isControlled) {\n         setInternalValue(Array.isArray(value) ? value : [value!]);\n      }\n   }, [value, isControlled]);\n\n   const containerRef = useRef<HTMLDivElement | null>(null);\n   const isDownRef = useRef(false);\n   const activeHandleRef = useRef<number | null>(null);\n\n   const updateValue = (index: number, clientX: number) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      let p = (clientX - rect.left) / rect.width;\n      p = Math.max(0, Math.min(1, p));\n\n      const raw = min + p * (max - min);\n      const stepped = Math.round((raw - min) / step) * step + min;\n\n      const next = [...internalValue];\n      next[index] = Math.min(max, Math.max(min, stepped));\n\n      if (!isControlled) {\n         setInternalValue(next);\n      }\n\n      onChange?.(next.length === 1 ? next[0] : next);\n   };\n\n   // global drag system\n   useEffect(() => {\n      const handleMove = (e: MouseEvent) => {\n         if (!isDownRef.current || activeHandleRef.current === null) return;\n         updateValue(activeHandleRef.current, e.clientX);\n      };\n\n      const handleUp = () => {\n         isDownRef.current = false;\n         activeHandleRef.current = null;\n      };\n\n      window.addEventListener(\"mousemove\", handleMove);\n      window.addEventListener(\"mouseup\", handleUp);\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMove);\n         window.removeEventListener(\"mouseup\", handleUp);\n      };\n   });\n\n   const sorted = [...internalValue].sort((a, b) => a - b);\n\n   const startValue = sorted.length === 1 ? min : sorted[0];\n   const endValue = sorted[sorted.length - 1];\n\n   const startPercent = ((startValue - min) / (max - min)) * 100;\n   const endPercent = ((endValue - min) / (max - min)) * 100;\n\n\n\n   return (\n      <Tag\n         ref={containerRef}\n         onClick={(e: any) => {\n            if (disabled) return;\n\n            const rect = e.currentTarget.getBoundingClientRect();\n            const p = (e.clientX - rect.left) / rect.width;\n            const raw = min + p * (max - min);\n            const stepped = Math.round((raw - min) / step) * step + min;\n\n            let closestIndex = 0;\n            let minDist = Math.abs(internalValue[0] - stepped);\n\n            for (let i = 1; i < internalValue.length; i++) {\n               const d = Math.abs(internalValue[i] - stepped);\n               if (d < minDist) {\n                  minDist = d;\n                  closestIndex = i;\n               }\n            }\n\n            updateValue(closestIndex, e.clientX);\n         }}\n         sxr={{\n            position: \"relative\",\n            width: \"100%\",\n            display: \"flex\",\n            alignItems: \"center\",\n            ...(disabled ? { cursor: \"not-allowed\" } : {}),\n         }}\n      >\n         {/* Track */}\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               width: \"100%\",\n               height: _size.track,\n               bgcolor: 'surface.divider',\n               radius: `${_size.track}px`,\n            }}\n         />\n\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               height: _size.track,\n               bgcolor: color,\n               radius: `${_size.track}px`,\n               left: `${startPercent}%`,\n               width: `${endPercent - startPercent}%`,\n            }}\n         />\n\n         {internalValue.map((v, i) => {\n            const percent = ((v - min) / (max - min)) * 100;\n            return (\n               <Tag\n                  key={i}\n                  sxr={{\n                     position: \"absolute\",\n                     width: _size.thumb,\n                     height: _size.thumb,\n                     radius: `${_size.thumb}px`,\n                     bgcolor: color,\n                     left: `${percent}%`,\n                     transform: \"translateX(-50%)\",\n                     cursor: disabled ? \"not-allowed\" : \"initial\",\n                  }}\n                  onMouseDown={(e) => {\n                     if (disabled) return;\n                     e.preventDefault();\n                     isDownRef.current = true;\n                     activeHandleRef.current = i;\n                  }}\n               >\n                  {thumbContent ? thumbContent({ value: percent }) : \"\"}\n               </Tag>\n            );\n         })}\n      </Tag>\n   );\n};\n\nexport default RangeSlider;"],"names":[],"mappings":";;;;;;;;AA0BA;;AACG;;AAGA;;;;AASC;AACD;AACA;AAEA;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;;AAGJ;;AAIG;;;;;AAOH;;;AAG4B;;AAEtB;AACG;AACA;;AAET;;;;AAKM;;AAEN;AAEA;AACA;AACA;AAEA;;;;AAIG;AACA;;AAGA;AAEA;AACA;;;;;AAOH;;;AAIG;;;;AAGA;;AAGG;AACA;AACH;AAEA;AACA;AAEA;AACG;AACA;AACH;AACH;;AAIA;;AAGA;AACA;AAIA;AAIS;;;AAGA;;AAEA;;AAGA;AAEA;AACG;AACA;;;;;AAMH;AACH;AAYM;AACA;;AAEA;AACA;AACF;AAKE;;AAEA;AACA;;AAEA;;AAKH;AACA;AAIS;;;AAGA;AACA;;AAEA;;AAEF;AAEE;;;AAEA;AACA;;;AASrB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/RangeSlider/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactElement, useEffect, useRef, useState } from \"react\";\nimport {\n   Tag,\n   useBreakpointProps,\n   useBreakpointPropsType,\n   UseColorTemplateColor,\n   useInterface,\n} from \"@xanui/core\";\n\nexport type RangeSliderValue = number | number[];\n\nexport type RangeSliderProps = {\n   color?: useBreakpointPropsType<UseColorTemplateColor>;\n   min?: number;\n   max?: number;\n   step?: number;\n   value?: RangeSliderValue;\n   defaultValue?: RangeSliderValue;\n   onChange?: (value: RangeSliderValue) => void;\n   disabled?: boolean;\n   thumbContent?: (props: { value: number }) => ReactElement\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n   thumbSize?: number;\n};\n\nconst RangeSlider = (props: RangeSliderProps) => {\n   const { value, defaultValue, onChange, disabled, ...rest } = props;\n\n   // interface system\n   let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = \"sm\" }] = useInterface<any>(\n      \"RangeSlider\",\n      rest,\n      {}\n   );\n\n   const bp: any = useBreakpointProps({\n      color,\n      size\n   });\n   color = bp.color ?? \"primary\"\n   size = bp.size;\n\n   const sizesSX: any = {\n      xs: {\n         track: 2,\n         thumb: 8\n      },\n      sm: {\n         track: 4,\n         thumb: 14\n      },\n      md: {\n         track: 8,\n         thumb: 18\n      },\n      lg: {\n         track: 12,\n         thumb: 24\n      },\n      xl: {\n         track: 16,\n         thumb: 32\n      }\n   }\n\n   const _size = sizesSX[size]\n\n\n   if (thumbSize) {\n      _size.thumb = thumbSize\n   }\n\n   if (disabled) {\n      color = 'default.divider'\n   }\n\n   const isControlled = value !== undefined;\n\n   const [internalValue, setInternalValue] = useState<number[]>(() => {\n      if (value !== undefined) return Array.isArray(value) ? value : [value];\n      if (defaultValue !== undefined)\n         return Array.isArray(defaultValue)\n            ? defaultValue\n            : [defaultValue];\n      return [min];\n   });\n\n   // sync controlled\n   useEffect(() => {\n      if (isControlled) {\n         setInternalValue(Array.isArray(value) ? value : [value!]);\n      }\n   }, [value, isControlled]);\n\n   const containerRef = useRef<HTMLDivElement | null>(null);\n   const isDownRef = useRef(false);\n   const activeHandleRef = useRef<number | null>(null);\n\n   const updateValue = (index: number, clientX: number) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      let p = (clientX - rect.left) / rect.width;\n      p = Math.max(0, Math.min(1, p));\n\n      const raw = min + p * (max - min);\n      const stepped = Math.round((raw - min) / step) * step + min;\n\n      const next = [...internalValue];\n      next[index] = Math.min(max, Math.max(min, stepped));\n\n      if (!isControlled) {\n         setInternalValue(next);\n      }\n\n      onChange?.(next.length === 1 ? next[0] : next);\n   };\n\n   // global drag system\n   useEffect(() => {\n      const handleMove = (e: MouseEvent) => {\n         if (!isDownRef.current || activeHandleRef.current === null) return;\n         updateValue(activeHandleRef.current, e.clientX);\n      };\n\n      const handleUp = () => {\n         isDownRef.current = false;\n         activeHandleRef.current = null;\n      };\n\n      window.addEventListener(\"mousemove\", handleMove);\n      window.addEventListener(\"mouseup\", handleUp);\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMove);\n         window.removeEventListener(\"mouseup\", handleUp);\n      };\n   });\n\n   const sorted = [...internalValue].sort((a, b) => a - b);\n\n   const startValue = sorted.length === 1 ? min : sorted[0];\n   const endValue = sorted[sorted.length - 1];\n\n   const startPercent = ((startValue - min) / (max - min)) * 100;\n   const endPercent = ((endValue - min) / (max - min)) * 100;\n\n\n\n   return (\n      <Tag\n         ref={containerRef}\n         onClick={(e: any) => {\n            if (disabled) return;\n\n            const rect = e.currentTarget.getBoundingClientRect();\n            const p = (e.clientX - rect.left) / rect.width;\n            const raw = min + p * (max - min);\n            const stepped = Math.round((raw - min) / step) * step + min;\n\n            let closestIndex = 0;\n            let minDist = Math.abs(internalValue[0] - stepped);\n\n            for (let i = 1; i < internalValue.length; i++) {\n               const d = Math.abs(internalValue[i] - stepped);\n               if (d < minDist) {\n                  minDist = d;\n                  closestIndex = i;\n               }\n            }\n\n            updateValue(closestIndex, e.clientX);\n         }}\n         sxr={{\n            position: \"relative\",\n            width: \"100%\",\n            display: \"flex\",\n            alignItems: \"center\",\n            ...(disabled ? { cursor: \"not-allowed\" } : {}),\n         }}\n      >\n         {/* Track */}\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               width: \"100%\",\n               height: _size.track,\n               bgcolor: 'default.divider',\n               radius: `${_size.track}px`,\n            }}\n         />\n\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               height: _size.track,\n               bgcolor: color,\n               radius: `${_size.track}px`,\n               left: `${startPercent}%`,\n               width: `${endPercent - startPercent}%`,\n            }}\n         />\n\n         {internalValue.map((v, i) => {\n            const percent = ((v - min) / (max - min)) * 100;\n            return (\n               <Tag\n                  key={i}\n                  sxr={{\n                     position: \"absolute\",\n                     width: _size.thumb,\n                     height: _size.thumb,\n                     radius: `${_size.thumb}px`,\n                     bgcolor: color,\n                     left: `${percent}%`,\n                     transform: \"translateX(-50%)\",\n                     cursor: disabled ? \"not-allowed\" : \"initial\",\n                  }}\n                  onMouseDown={(e) => {\n                     if (disabled) return;\n                     e.preventDefault();\n                     isDownRef.current = true;\n                     activeHandleRef.current = i;\n                  }}\n               >\n                  {thumbContent ? thumbContent({ value: percent }) : \"\"}\n               </Tag>\n            );\n         })}\n      </Tag>\n   );\n};\n\nexport default RangeSlider;"],"names":[],"mappings":";;;;;;;;AA0BA;;AACG;;AAGA;;;;AASC;AACD;AACA;AAEA;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;;AAGJ;;AAIG;;;;;AAOH;;;AAG4B;;AAEtB;AACG;AACA;;AAET;;;;AAKM;;AAEN;AAEA;AACA;AACA;AAEA;;;;AAIG;AACA;;AAGA;AAEA;AACA;;;;;AAOH;;;AAIG;;;;AAGA;;AAGG;AACA;AACH;AAEA;AACA;AAEA;AACG;AACA;AACH;AACH;;AAIA;;AAGA;AACA;AAIA;AAIS;;;AAGA;;AAEA;;AAGA;AAEA;AACG;AACA;;;;;AAMH;AACH;AAYM;AACA;;AAEA;AACA;AACF;AAKE;;AAEA;AACA;;AAEA;;AAKH;AACA;AAIS;;;AAGA;AACA;;AAEA;;AAEF;AAEE;;;AAEA;AACA;;;AASrB;;"}

package/RangeSlider/index.js

@@ -42,7 +42,7 @@ const RangeSlider = (props) => {
         _size.thumb = thumbSize;
     }
     if (disabled) {
-        color = 'surface.divider';
+        color = 'default.divider';
     }
     const isControlled = value !== undefined;
     const [internalValue, setInternalValue] = useState(() => {
@@ -122,7 +122,7 @@ const RangeSlider = (props) => {
                     position: "absolute",
                     width: "100%",
                     height: _size.track,
-                    bgcolor: 'surface.divider',
+                    bgcolor: 'default.divider',
                     radius: `${_size.track}px`,
                 } }), jsx(Tag, { sxr: {
                     position: "absolute",

package/RangeSlider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/RangeSlider/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactElement, useEffect, useRef, useState } from \"react\";\nimport {\n   Tag,\n   useBreakpointProps,\n   useBreakpointPropsType,\n   UseColorTemplateColor,\n   useInterface,\n} from \"@xanui/core\";\n\nexport type RangeSliderValue = number | number[];\n\nexport type RangeSliderProps = {\n   color?: useBreakpointPropsType<UseColorTemplateColor>;\n   min?: number;\n   max?: number;\n   step?: number;\n   value?: RangeSliderValue;\n   defaultValue?: RangeSliderValue;\n   onChange?: (value: RangeSliderValue) => void;\n   disabled?: boolean;\n   thumbContent?: (props: { value: number }) => ReactElement\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n   thumbSize?: number;\n};\n\nconst RangeSlider = (props: RangeSliderProps) => {\n   const { value, defaultValue, onChange, disabled, ...rest } = props;\n\n   // interface system\n   let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = \"sm\" }] = useInterface<any>(\n      \"RangeSlider\",\n      rest,\n      {}\n   );\n\n   const bp: any = useBreakpointProps({\n      color,\n      size\n   });\n   color = bp.color ?? \"primary\"\n   size = bp.size;\n\n   const sizesSX: any = {\n      xs: {\n         track: 2,\n         thumb: 8\n      },\n      sm: {\n         track: 4,\n         thumb: 14\n      },\n      md: {\n         track: 8,\n         thumb: 18\n      },\n      lg: {\n         track: 12,\n         thumb: 24\n      },\n      xl: {\n         track: 16,\n         thumb: 32\n      }\n   }\n\n   const _size = sizesSX[size]\n\n\n   if (thumbSize) {\n      _size.thumb = thumbSize\n   }\n\n   if (disabled) {\n      color = 'surface.divider'\n   }\n\n   const isControlled = value !== undefined;\n\n   const [internalValue, setInternalValue] = useState<number[]>(() => {\n      if (value !== undefined) return Array.isArray(value) ? value : [value];\n      if (defaultValue !== undefined)\n         return Array.isArray(defaultValue)\n            ? defaultValue\n            : [defaultValue];\n      return [min];\n   });\n\n   // sync controlled\n   useEffect(() => {\n      if (isControlled) {\n         setInternalValue(Array.isArray(value) ? value : [value!]);\n      }\n   }, [value, isControlled]);\n\n   const containerRef = useRef<HTMLDivElement | null>(null);\n   const isDownRef = useRef(false);\n   const activeHandleRef = useRef<number | null>(null);\n\n   const updateValue = (index: number, clientX: number) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      let p = (clientX - rect.left) / rect.width;\n      p = Math.max(0, Math.min(1, p));\n\n      const raw = min + p * (max - min);\n      const stepped = Math.round((raw - min) / step) * step + min;\n\n      const next = [...internalValue];\n      next[index] = Math.min(max, Math.max(min, stepped));\n\n      if (!isControlled) {\n         setInternalValue(next);\n      }\n\n      onChange?.(next.length === 1 ? next[0] : next);\n   };\n\n   // global drag system\n   useEffect(() => {\n      const handleMove = (e: MouseEvent) => {\n         if (!isDownRef.current || activeHandleRef.current === null) return;\n         updateValue(activeHandleRef.current, e.clientX);\n      };\n\n      const handleUp = () => {\n         isDownRef.current = false;\n         activeHandleRef.current = null;\n      };\n\n      window.addEventListener(\"mousemove\", handleMove);\n      window.addEventListener(\"mouseup\", handleUp);\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMove);\n         window.removeEventListener(\"mouseup\", handleUp);\n      };\n   });\n\n   const sorted = [...internalValue].sort((a, b) => a - b);\n\n   const startValue = sorted.length === 1 ? min : sorted[0];\n   const endValue = sorted[sorted.length - 1];\n\n   const startPercent = ((startValue - min) / (max - min)) * 100;\n   const endPercent = ((endValue - min) / (max - min)) * 100;\n\n\n\n   return (\n      <Tag\n         ref={containerRef}\n         onClick={(e: any) => {\n            if (disabled) return;\n\n            const rect = e.currentTarget.getBoundingClientRect();\n            const p = (e.clientX - rect.left) / rect.width;\n            const raw = min + p * (max - min);\n            const stepped = Math.round((raw - min) / step) * step + min;\n\n            let closestIndex = 0;\n            let minDist = Math.abs(internalValue[0] - stepped);\n\n            for (let i = 1; i < internalValue.length; i++) {\n               const d = Math.abs(internalValue[i] - stepped);\n               if (d < minDist) {\n                  minDist = d;\n                  closestIndex = i;\n               }\n            }\n\n            updateValue(closestIndex, e.clientX);\n         }}\n         sxr={{\n            position: \"relative\",\n            width: \"100%\",\n            display: \"flex\",\n            alignItems: \"center\",\n            ...(disabled ? { cursor: \"not-allowed\" } : {}),\n         }}\n      >\n         {/* Track */}\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               width: \"100%\",\n               height: _size.track,\n               bgcolor: 'surface.divider',\n               radius: `${_size.track}px`,\n            }}\n         />\n\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               height: _size.track,\n               bgcolor: color,\n               radius: `${_size.track}px`,\n               left: `${startPercent}%`,\n               width: `${endPercent - startPercent}%`,\n            }}\n         />\n\n         {internalValue.map((v, i) => {\n            const percent = ((v - min) / (max - min)) * 100;\n            return (\n               <Tag\n                  key={i}\n                  sxr={{\n                     position: \"absolute\",\n                     width: _size.thumb,\n                     height: _size.thumb,\n                     radius: `${_size.thumb}px`,\n                     bgcolor: color,\n                     left: `${percent}%`,\n                     transform: \"translateX(-50%)\",\n                     cursor: disabled ? \"not-allowed\" : \"initial\",\n                  }}\n                  onMouseDown={(e) => {\n                     if (disabled) return;\n                     e.preventDefault();\n                     isDownRef.current = true;\n                     activeHandleRef.current = i;\n                  }}\n               >\n                  {thumbContent ? thumbContent({ value: percent }) : \"\"}\n               </Tag>\n            );\n         })}\n      </Tag>\n   );\n};\n\nexport default RangeSlider;"],"names":[],"mappings":";;;;;;AA0BA;;AACG;;AAGA;;;;AASC;AACD;AACA;AAEA;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;;AAGJ;;AAIG;;;;;AAOH;;;AAG4B;;AAEtB;AACG;AACA;;AAET;;;;AAKM;;AAEN;AAEA;AACA;AACA;AAEA;;;;AAIG;AACA;;AAGA;AAEA;AACA;;;;;AAOH;;;AAIG;;;;AAGA;;AAGG;AACA;AACH;AAEA;AACA;AAEA;AACG;AACA;AACH;AACH;;AAIA;;AAGA;AACA;AAIA;AAIS;;;AAGA;;AAEA;;AAGA;AAEA;AACG;AACA;;;;;AAMH;AACH;AAYM;AACA;;AAEA;AACA;AACF;AAKE;;AAEA;AACA;;AAEA;;AAKH;AACA;AAIS;;;AAGA;AACA;;AAEA;;AAEF;AAEE;;;AAEA;AACA;;;AASrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/RangeSlider/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactElement, useEffect, useRef, useState } from \"react\";\nimport {\n   Tag,\n   useBreakpointProps,\n   useBreakpointPropsType,\n   UseColorTemplateColor,\n   useInterface,\n} from \"@xanui/core\";\n\nexport type RangeSliderValue = number | number[];\n\nexport type RangeSliderProps = {\n   color?: useBreakpointPropsType<UseColorTemplateColor>;\n   min?: number;\n   max?: number;\n   step?: number;\n   value?: RangeSliderValue;\n   defaultValue?: RangeSliderValue;\n   onChange?: (value: RangeSliderValue) => void;\n   disabled?: boolean;\n   thumbContent?: (props: { value: number }) => ReactElement\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\"\n   thumbSize?: number;\n};\n\nconst RangeSlider = (props: RangeSliderProps) => {\n   const { value, defaultValue, onChange, disabled, ...rest } = props;\n\n   // interface system\n   let [{ color, min = 0, max = 100, step = 1, thumbContent, thumbSize = 16, size = \"sm\" }] = useInterface<any>(\n      \"RangeSlider\",\n      rest,\n      {}\n   );\n\n   const bp: any = useBreakpointProps({\n      color,\n      size\n   });\n   color = bp.color ?? \"primary\"\n   size = bp.size;\n\n   const sizesSX: any = {\n      xs: {\n         track: 2,\n         thumb: 8\n      },\n      sm: {\n         track: 4,\n         thumb: 14\n      },\n      md: {\n         track: 8,\n         thumb: 18\n      },\n      lg: {\n         track: 12,\n         thumb: 24\n      },\n      xl: {\n         track: 16,\n         thumb: 32\n      }\n   }\n\n   const _size = sizesSX[size]\n\n\n   if (thumbSize) {\n      _size.thumb = thumbSize\n   }\n\n   if (disabled) {\n      color = 'default.divider'\n   }\n\n   const isControlled = value !== undefined;\n\n   const [internalValue, setInternalValue] = useState<number[]>(() => {\n      if (value !== undefined) return Array.isArray(value) ? value : [value];\n      if (defaultValue !== undefined)\n         return Array.isArray(defaultValue)\n            ? defaultValue\n            : [defaultValue];\n      return [min];\n   });\n\n   // sync controlled\n   useEffect(() => {\n      if (isControlled) {\n         setInternalValue(Array.isArray(value) ? value : [value!]);\n      }\n   }, [value, isControlled]);\n\n   const containerRef = useRef<HTMLDivElement | null>(null);\n   const isDownRef = useRef(false);\n   const activeHandleRef = useRef<number | null>(null);\n\n   const updateValue = (index: number, clientX: number) => {\n      if (!containerRef.current) return;\n\n      const rect = containerRef.current.getBoundingClientRect();\n      let p = (clientX - rect.left) / rect.width;\n      p = Math.max(0, Math.min(1, p));\n\n      const raw = min + p * (max - min);\n      const stepped = Math.round((raw - min) / step) * step + min;\n\n      const next = [...internalValue];\n      next[index] = Math.min(max, Math.max(min, stepped));\n\n      if (!isControlled) {\n         setInternalValue(next);\n      }\n\n      onChange?.(next.length === 1 ? next[0] : next);\n   };\n\n   // global drag system\n   useEffect(() => {\n      const handleMove = (e: MouseEvent) => {\n         if (!isDownRef.current || activeHandleRef.current === null) return;\n         updateValue(activeHandleRef.current, e.clientX);\n      };\n\n      const handleUp = () => {\n         isDownRef.current = false;\n         activeHandleRef.current = null;\n      };\n\n      window.addEventListener(\"mousemove\", handleMove);\n      window.addEventListener(\"mouseup\", handleUp);\n\n      return () => {\n         window.removeEventListener(\"mousemove\", handleMove);\n         window.removeEventListener(\"mouseup\", handleUp);\n      };\n   });\n\n   const sorted = [...internalValue].sort((a, b) => a - b);\n\n   const startValue = sorted.length === 1 ? min : sorted[0];\n   const endValue = sorted[sorted.length - 1];\n\n   const startPercent = ((startValue - min) / (max - min)) * 100;\n   const endPercent = ((endValue - min) / (max - min)) * 100;\n\n\n\n   return (\n      <Tag\n         ref={containerRef}\n         onClick={(e: any) => {\n            if (disabled) return;\n\n            const rect = e.currentTarget.getBoundingClientRect();\n            const p = (e.clientX - rect.left) / rect.width;\n            const raw = min + p * (max - min);\n            const stepped = Math.round((raw - min) / step) * step + min;\n\n            let closestIndex = 0;\n            let minDist = Math.abs(internalValue[0] - stepped);\n\n            for (let i = 1; i < internalValue.length; i++) {\n               const d = Math.abs(internalValue[i] - stepped);\n               if (d < minDist) {\n                  minDist = d;\n                  closestIndex = i;\n               }\n            }\n\n            updateValue(closestIndex, e.clientX);\n         }}\n         sxr={{\n            position: \"relative\",\n            width: \"100%\",\n            display: \"flex\",\n            alignItems: \"center\",\n            ...(disabled ? { cursor: \"not-allowed\" } : {}),\n         }}\n      >\n         {/* Track */}\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               width: \"100%\",\n               height: _size.track,\n               bgcolor: 'default.divider',\n               radius: `${_size.track}px`,\n            }}\n         />\n\n         <Tag\n            sxr={{\n               position: \"absolute\",\n               height: _size.track,\n               bgcolor: color,\n               radius: `${_size.track}px`,\n               left: `${startPercent}%`,\n               width: `${endPercent - startPercent}%`,\n            }}\n         />\n\n         {internalValue.map((v, i) => {\n            const percent = ((v - min) / (max - min)) * 100;\n            return (\n               <Tag\n                  key={i}\n                  sxr={{\n                     position: \"absolute\",\n                     width: _size.thumb,\n                     height: _size.thumb,\n                     radius: `${_size.thumb}px`,\n                     bgcolor: color,\n                     left: `${percent}%`,\n                     transform: \"translateX(-50%)\",\n                     cursor: disabled ? \"not-allowed\" : \"initial\",\n                  }}\n                  onMouseDown={(e) => {\n                     if (disabled) return;\n                     e.preventDefault();\n                     isDownRef.current = true;\n                     activeHandleRef.current = i;\n                  }}\n               >\n                  {thumbContent ? thumbContent({ value: percent }) : \"\"}\n               </Tag>\n            );\n         })}\n      </Tag>\n   );\n};\n\nexport default RangeSlider;"],"names":[],"mappings":";;;;;;AA0BA;;AACG;;AAGA;;;;AASC;AACD;AACA;AAEA;AACG;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;AACD;AACG;AACA;AACF;;AAGJ;;AAIG;;;;;AAOH;;;AAG4B;;AAEtB;AACG;AACA;;AAET;;;;AAKM;;AAEN;AAEA;AACA;AACA;AAEA;;;;AAIG;AACA;;AAGA;AAEA;AACA;;;;;AAOH;;;AAIG;;;;AAGA;;AAGG;AACA;AACH;AAEA;AACA;AAEA;AACG;AACA;AACH;AACH;;AAIA;;AAGA;AACA;AAIA;AAIS;;;AAGA;;AAEA;;AAGA;AAEA;AACG;AACA;;;;;AAMH;AACH;AAYM;AACA;;AAEA;AACA;AACF;AAKE;;AAEA;AACA;;AAEA;;AAKH;AACA;AAIS;;;AAGA;AACA;;AAEA;;AAEF;AAEE;;;AAEA;AACA;;;AASrB;;"}

package/Skeleton/index.cjs

@@ -12,7 +12,7 @@ const Skeleton = React.forwardRef((_a, ref) => {
         loading = true;
     if (loading) {
         animation !== null && animation !== void 0 ? animation : (animation = 'pulse');
-        color !== null && color !== void 0 ? color : (color = 'surface');
+        color !== null && color !== void 0 ? color : (color = 'default');
         let sxr = {};
         switch (animation) {
             case 'pulse':

package/Skeleton/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= 'surface'\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               radius: 1,\n               bgcolor: `${color}.divider`,\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               radius: 1,\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: `${color}.ghost`,\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2.5s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;;AAEA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;;AAEA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= 'default'\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               radius: 1,\n               bgcolor: `${color}.divider`,\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               radius: 1,\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: `${color}.ghost`,\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2.5s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;;AAEA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;;AAEA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}

package/Skeleton/index.js

@@ -10,7 +10,7 @@ const Skeleton = React.forwardRef((_a, ref) => {
         loading = true;
     if (loading) {
         animation !== null && animation !== void 0 ? animation : (animation = 'pulse');
-        color !== null && color !== void 0 ? color : (color = 'surface');
+        color !== null && color !== void 0 ? color : (color = 'default');
         let sxr = {};
         switch (animation) {
             case 'pulse':

package/Skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= 'surface'\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               radius: 1,\n               bgcolor: `${color}.divider`,\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               radius: 1,\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: `${color}.ghost`,\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2.5s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;;AAEA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;;AAEA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}
+{"version":3,"file":"index.js","sources":["../../src/Skeleton/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type SkeletonProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   animation?: 'pulse' | 'wave' | 'none';\n   loading?: boolean;\n}\n\nconst Skeleton = React.forwardRef(<T extends TagComponentType = \"div\">({ children, loading, color, animation, ...props }: SkeletonProps<T>, ref: React.Ref<any>) => {\n\n   if (!children) loading = true\n\n   if (loading) {\n      animation ??= 'pulse'\n      color ??= 'default'\n      let sxr: any = {}\n      switch (animation) {\n         case 'pulse':\n            sxr = {\n               radius: 1,\n               bgcolor: `${color}.divider`,\n               width: \"100%\",\n               animation: 'skpulse 1.5s infinite',\n               \"@keyframes skpulse\": {\n                  '0%, 100%': {\n                     opacity: 1,\n                  },\n                  '50%': {\n                     opacity: 0.4,\n                  },\n               }\n            }\n            break;\n         case 'wave':\n            sxr = {\n               radius: 1,\n               position: 'relative',\n               overflow: 'hidden',\n               bgcolor: `${color}.ghost`,\n               \"&::after\": {\n                  content: '\"\"',\n                  position: 'absolute',\n                  top: 0,\n                  left: \"0%\",\n                  width: '100%',\n                  height: '100%',\n                  animation: 'skwave 2.5s infinite',\n                  background: `linear-gradient(90deg, transparent 0%, var(--color-${color}-divider) 50%, transparent 100%)`,\n               },\n               \"@keyframes skwave\": {\n                  '0%': { left: '-100%' },\n                  '100%': { left: '100%' }\n               }\n            }\n            break;\n      }\n      return (\n         <Tag\n            {...props}\n            baseClass='skeleton'\n            ref={ref}\n            sxr={sxr}\n         />\n      )\n   }\n\n   return children\n})\n\nexport default Skeleton\n\n"],"names":[],"mappings":";;;;;;AASA;AAAuE;AAEpE;;;;;;;AAOM;AACG;AACG;;AAEA;AACA;AACA;AACG;AACG;AACF;AACD;AACG;AACF;AACH;;;AAGP;AACG;AACG;AACA;AACA;;AAEA;AACG;AACA;AACA;AACA;AACA;AACA;AACA;;AAEF;AACD;AACG;AACA;AACF;;;;AAIV;;AAUH;AACH;;"}

package/Switch/index.cjs

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