@xanui/ui 1.2.8 → 1.2.11

package/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport PersonIcon from '@xanui/icons/Person'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n    skeleton?: boolean;\n    slotProps?: {\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\n    size ??= 36\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={size}\n            width={size}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                borderRadius: size,\n            }}\n        />\n    }\n\n    if (faild === false || !src) {\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\n        return (\n            <Tag\n                component=\"div\"\n                src={src}\n                {...props}\n                baseClass='avatar'\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: \"surface.light\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"surface.contrast\",\n                    '& svg': {\n                        fontSize: (size / 3) * 2,\n                        opacity: .6\n                    }\n                }}\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            component=\"img\"\n            radius={size}\n            width={size}\n            height={size}\n            objectFit=\"cover\"\n            {...props}\n            alt={alt}\n            src={src}\n            baseClass='avatar'\n            onError={(e) => {\n                setFaild(false)\n                props.onError && props.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Avatar\n\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAqE;;;;;AAKjE;AAAU;AACV;AACA;;AAGI;;AAYJ;;AAEI;AAOY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;;AAKb;;;AAcQ;AAIZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport PersonIcon from '@xanui/icons/Person'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    size?: useBreakpointPropsType<number>;\n    skeleton?: boolean;\n    slotProps?: {\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\n    size ??= 36\n    const _p: any = {}\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    size = p.size\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={size}\n            width={size}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                borderRadius: size,\n            }}\n        />\n    }\n\n    if (faild === false || !src) {\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\n        return (\n            <Tag\n                component=\"div\"\n                src={src}\n                {...props}\n                baseClass='avatar'\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: \"default.base\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"default.contrast\",\n                    '& svg': {\n                        fontSize: (size / 3) * 2,\n                        opacity: .6\n                    }\n                }}\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            component=\"img\"\n            radius={size}\n            width={size}\n            height={size}\n            objectFit=\"cover\"\n            {...props}\n            alt={alt}\n            src={src}\n            baseClass='avatar'\n            onError={(e) => {\n                setFaild(false)\n                props.onError && props.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Avatar\n\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAqE;;;;;AAKjE;AAAU;AACV;AACA;;AAGI;;AAYJ;;AAEI;AAOY;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACH;AACJ;;AAKb;;;AAcQ;AAIZ;;"}

package/AvatarBox/index.cjs

@@ -12,7 +12,7 @@ const AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }, ref) =>
             display: 'flex',
             alignItems: 'center',
             gap: 1.5,
-        }, ref: ref, children: [jsxRuntime.jsx(index, Object.assign({ size: 40 }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { src: src, flex: "0 0 auto" })), jsxRuntime.jsxs(core.Tag, { children: [title && jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.title, { fontSize: "button", classNames: "avatar-box-title", children: title })), subtitle && jsxRuntime.jsx(index$1, Object.assign({ fontSize: "button", color: "surface.light" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtitle, { classNames: "avatar-box-subtitle", children: subtitle }))] })] })));
+        }, ref: ref, children: [jsxRuntime.jsx(index, Object.assign({ size: 40 }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { src: src, flex: "0 0 auto" })), jsxRuntime.jsxs(core.Tag, { children: [title && jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.title, { fontSize: "button", classNames: "avatar-box-title", children: title })), subtitle && jsxRuntime.jsx(index$1, Object.assign({ fontSize: "button", color: "default.base" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtitle, { classNames: "avatar-box-subtitle", children: subtitle }))] })] })));
 });
 
 module.exports = AvatarBox;

package/AvatarBox/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/AvatarBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps } from '@xanui/core';\nimport Avatar, { AvatarProps } from '../Avatar'\nimport Text from '../Text';\n\nexport type AvatarBoxProps = {\n   src?: string;\n   title?: string;\n   subtitle?: string;\n   slotProps?: {\n      root?: TagProps;\n      avatar?: Omit<AvatarProps, \"src\">;\n      title?: TagProps;\n      subtitle?: TagProps;\n   };\n}\n\nconst AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }: AvatarBoxProps, ref: React.Ref<any>) => {\n   return (\n      <Tag\n         {...slotProps?.root}\n         baseClass='avatar-box'\n         sxr={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1.5,\n         }}\n         ref={ref}\n      >\n         <Avatar\n            size={40}\n            {...slotProps?.avatar}\n            src={src}\n            flex=\"0 0 auto\"\n         />\n         <Tag>\n            {title && <Text\n               {...slotProps?.title}\n               fontSize={\"button\"}\n               classNames=\"avatar-box-title\"\n            >\n               {title}\n            </Text>}\n            {subtitle && <Text\n               fontSize={\"button\"}\n               color=\"surface.light\"\n               {...slotProps?.subtitle}\n               classNames=\"avatar-box-subtitle\"\n            >\n               {subtitle}\n            </Text>}\n         </Tag>\n      </Tag>\n   )\n})\n\n\nexport default AvatarBox\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACG;AAKS;AACA;AACA;AACF;AA4BV;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/AvatarBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps } from '@xanui/core';\nimport Avatar, { AvatarProps } from '../Avatar'\nimport Text from '../Text';\n\nexport type AvatarBoxProps = {\n   src?: string;\n   title?: string;\n   subtitle?: string;\n   slotProps?: {\n      root?: TagProps;\n      avatar?: Omit<AvatarProps, \"src\">;\n      title?: TagProps;\n      subtitle?: TagProps;\n   };\n}\n\nconst AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }: AvatarBoxProps, ref: React.Ref<any>) => {\n   return (\n      <Tag\n         {...slotProps?.root}\n         baseClass='avatar-box'\n         sxr={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1.5,\n         }}\n         ref={ref}\n      >\n         <Avatar\n            size={40}\n            {...slotProps?.avatar}\n            src={src}\n            flex=\"0 0 auto\"\n         />\n         <Tag>\n            {title && <Text\n               {...slotProps?.title}\n               fontSize={\"button\"}\n               classNames=\"avatar-box-title\"\n            >\n               {title}\n            </Text>}\n            {subtitle && <Text\n               fontSize={\"button\"}\n               color=\"default.base\"\n               {...slotProps?.subtitle}\n               classNames=\"avatar-box-subtitle\"\n            >\n               {subtitle}\n            </Text>}\n         </Tag>\n      </Tag>\n   )\n})\n\n\nexport default AvatarBox\n"],"names":[],"mappings":";;;;;;;;;AAkBA;AACG;AAKS;AACA;AACA;AACF;AA4BV;;"}

package/AvatarBox/index.js

@@ -10,7 +10,7 @@ const AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }, ref) =>
             display: 'flex',
             alignItems: 'center',
             gap: 1.5,
-        }, ref: ref, children: [jsx(Avatar, Object.assign({ size: 40 }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { src: src, flex: "0 0 auto" })), jsxs(Tag, { children: [title && jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.title, { fontSize: "button", classNames: "avatar-box-title", children: title })), subtitle && jsx(Text, Object.assign({ fontSize: "button", color: "surface.light" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtitle, { classNames: "avatar-box-subtitle", children: subtitle }))] })] })));
+        }, ref: ref, children: [jsx(Avatar, Object.assign({ size: 40 }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { src: src, flex: "0 0 auto" })), jsxs(Tag, { children: [title && jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.title, { fontSize: "button", classNames: "avatar-box-title", children: title })), subtitle && jsx(Text, Object.assign({ fontSize: "button", color: "default.base" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtitle, { classNames: "avatar-box-subtitle", children: subtitle }))] })] })));
 });
 
 export { AvatarBox as default };

package/AvatarBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AvatarBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps } from '@xanui/core';\nimport Avatar, { AvatarProps } from '../Avatar'\nimport Text from '../Text';\n\nexport type AvatarBoxProps = {\n   src?: string;\n   title?: string;\n   subtitle?: string;\n   slotProps?: {\n      root?: TagProps;\n      avatar?: Omit<AvatarProps, \"src\">;\n      title?: TagProps;\n      subtitle?: TagProps;\n   };\n}\n\nconst AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }: AvatarBoxProps, ref: React.Ref<any>) => {\n   return (\n      <Tag\n         {...slotProps?.root}\n         baseClass='avatar-box'\n         sxr={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1.5,\n         }}\n         ref={ref}\n      >\n         <Avatar\n            size={40}\n            {...slotProps?.avatar}\n            src={src}\n            flex=\"0 0 auto\"\n         />\n         <Tag>\n            {title && <Text\n               {...slotProps?.title}\n               fontSize={\"button\"}\n               classNames=\"avatar-box-title\"\n            >\n               {title}\n            </Text>}\n            {subtitle && <Text\n               fontSize={\"button\"}\n               color=\"surface.light\"\n               {...slotProps?.subtitle}\n               classNames=\"avatar-box-subtitle\"\n            >\n               {subtitle}\n            </Text>}\n         </Tag>\n      </Tag>\n   )\n})\n\n\nexport default AvatarBox\n"],"names":[],"mappings":";;;;;;;AAkBA;AACG;AAKS;AACA;AACA;AACF;AA4BV;;"}
+{"version":3,"file":"index.js","sources":["../../src/AvatarBox/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps } from '@xanui/core';\nimport Avatar, { AvatarProps } from '../Avatar'\nimport Text from '../Text';\n\nexport type AvatarBoxProps = {\n   src?: string;\n   title?: string;\n   subtitle?: string;\n   slotProps?: {\n      root?: TagProps;\n      avatar?: Omit<AvatarProps, \"src\">;\n      title?: TagProps;\n      subtitle?: TagProps;\n   };\n}\n\nconst AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }: AvatarBoxProps, ref: React.Ref<any>) => {\n   return (\n      <Tag\n         {...slotProps?.root}\n         baseClass='avatar-box'\n         sxr={{\n            display: 'flex',\n            alignItems: 'center',\n            gap: 1.5,\n         }}\n         ref={ref}\n      >\n         <Avatar\n            size={40}\n            {...slotProps?.avatar}\n            src={src}\n            flex=\"0 0 auto\"\n         />\n         <Tag>\n            {title && <Text\n               {...slotProps?.title}\n               fontSize={\"button\"}\n               classNames=\"avatar-box-title\"\n            >\n               {title}\n            </Text>}\n            {subtitle && <Text\n               fontSize={\"button\"}\n               color=\"default.base\"\n               {...slotProps?.subtitle}\n               classNames=\"avatar-box-subtitle\"\n            >\n               {subtitle}\n            </Text>}\n         </Tag>\n      </Tag>\n   )\n})\n\n\nexport default AvatarBox\n"],"names":[],"mappings":";;;;;;;AAkBA;AACG;AAKS;AACA;AACA;AACF;AA4BV;;"}

package/AvatarPicker/index.cjs

@@ -44,7 +44,7 @@ const AvatarPicker = React.forwardRef((_a, ref) => {
     return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { baseClass: "avatar-picker", ref: ref, sxr: {
             display: 'inline-block',
             position: 'relative',
-        }, children: jsxRuntime.jsxs(index, Object.assign({ disableSpace: true, disableTransition: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.badge, { placement: value ? "right-top" : "right-bottom", content: jsxRuntime.jsx(core.Tag, { children: jsxRuntime.jsx(index$4, { color: value ? "danger" : 'surface', cursor: "pointer", size: value ? 20 : "small", onClick: (be) => {
+        }, children: jsxRuntime.jsxs(index, Object.assign({ disableSpace: true, disableTransition: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.badge, { placement: value ? "right-top" : "right-bottom", content: jsxRuntime.jsx(core.Tag, { children: jsxRuntime.jsx(index$4, { color: value ? "danger" : 'default', cursor: "pointer", size: value ? 20 : "small", onClick: (be) => {
                         if (value) {
                             onDelete && onDelete(value);
                             onChange && onChange(null);
@@ -69,11 +69,11 @@ const AvatarPicker = React.forwardRef((_a, ref) => {
                             onChange && onChange(selectedFile);
                         };
                         input.click();
-                    }, children: value ? jsxRuntime.jsx(CloseOutlined, {}) : (changeIcon || jsxRuntime.jsx(CameraAltOutlined, {})) }) }), children: [jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { skeleton: loading, size: avatarSize, src: preview || defaultPreview, border: target ? '1px solid' : 0, borderColor: target ? "danger.main" : "transparent", bgcolor: target ? "danger.ghost" : bgcolor })), jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { target: target, placement: "bottom", onClickOutside: () => setTarget(undefined), slotProps: {
+                    }, children: value ? jsxRuntime.jsx(CloseOutlined, {}) : (changeIcon || jsxRuntime.jsx(CameraAltOutlined, {})) }) }), children: [jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { skeleton: loading, size: avatarSize, src: preview || defaultPreview, border: target ? '1px solid' : 0, borderColor: target ? "danger.base" : "transparent", bgcolor: target ? "danger.ghost" : bgcolor })), jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { target: target, placement: "bottom", onClickOutside: () => setTarget(undefined), slotProps: {
                         content: {
                             mt: 2
                         }
-                    }, children: jsxRuntime.jsx(index$3, { bgcolor: "danger.main", color: "danger.contrast", fontSize: "small", p: 1, px: 2, radius: 1, children: `File size exceeds the maximum limit of ${maxSize} KB` }) }))] })) })));
+                    }, children: jsxRuntime.jsx(index$3, { bgcolor: "danger.base", color: "danger.contrast", fontSize: "small", p: 1, px: 2, radius: 1, children: `File size exceeds the maximum limit of ${maxSize} KB` }) }))] })) })));
 });
 
 module.exports = AvatarPicker;

package/AvatarPicker/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/AvatarPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport CloseOutlined from \"@xanui/icons/CloseOutlined\";\nimport CameraAltOutlined from \"@xanui/icons/CameraAltOutlined\";\nimport Avatar, { AvatarProps } from \"../Avatar\"\nimport Badge, { BadgeProps } from \"../Badge\"\nimport IconButton from \"../IconButton\"\nimport Menu, { MenuProps } from \"../Menu\"\nimport Text from \"../Text\"\nimport React from \"react\";\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface } from \"@xanui/core\";\n\n\nexport type AvataPickerValue = File | string | null;\n\nexport type AvatarPickerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   value?: AvataPickerValue\n   defaultPreview?: string;\n   maxSize?: number; // in kb\n   changeIcon?: React.ReactNode;\n   loading?: boolean;\n   avatarSize?: useBreakpointPropsType<number>;\n   onChange?: (file: AvataPickerValue) => void;\n   onDelete?: (file: File | string) => void\n   onSelect?: (file: File | string) => void\n   slotProps?: {\n      Avatar?: Omit<AvatarProps, \"src\">;\n      badge?: Omit<BadgeProps, \"placement\" | \"content\">;\n      menu?: Omit<MenuProps, \"target\" | \"onClickOutside\">\n   }\n};\n\nconst AvatarPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ value, maxSize, changeIcon, onChange, onDelete, onSelect, loading, bgcolor, ...rest }: AvatarPickerProps, ref: React.Ref<T>) => {\n   let [{ defaultPreview, avatarSize, slotProps, ...props }]: any = useInterface(\"AvaterPicker\", rest, {})\n\n   const _p: any = {}\n   if (defaultPreview) _p.defaultPreview = defaultPreview\n   if (avatarSize) _p.avatarSize = avatarSize\n   const bp = useBreakpointProps(_p)\n   maxSize = maxSize || (1024 * 2); // default 2MB\n   defaultPreview = bp.defaultPreview\n   avatarSize = bp.avatarSize ?? 100\n\n   const [preview, setPreview] = React.useState<string | undefined>();\n   const [target, setTarget] = React.useState<HTMLElement | undefined>();\n\n   React.useEffect(() => {\n      if (!value) {\n         setPreview(undefined);\n         return;\n      } if (typeof value === 'string') {\n         setPreview(value);\n         return;\n      }\n      const objectUrl = URL.createObjectURL(value);\n      setPreview(objectUrl);\n      return () => URL.revokeObjectURL(objectUrl);\n   }, [value, onChange]);\n\n   return (\n      <Tag\n         {...props}\n         baseClass=\"avatar-picker\"\n         ref={ref}\n         sxr={{\n            display: 'inline-block',\n            position: 'relative',\n         }}\n      >\n         <Badge\n            disableSpace\n            disableTransition\n            {...slotProps?.badge}\n            placement={value ? \"right-top\" : \"right-bottom\"}\n            content={<Tag>\n               <IconButton\n                  color={value ? \"danger\" : 'surface'}\n                  cursor={\"pointer\"}\n                  size={value ? 20 : \"small\"}\n                  onClick={(be: any) => {\n                     if (value) {\n                        onDelete && onDelete(value)\n                        onChange && onChange(null);\n                        return\n                     }\n                     if (target) {\n                        setTarget(undefined);\n                     }\n                     const input = document.createElement('input');\n                     input.type = 'file';\n                     input.accept = 'image/*';\n                     input.onchange = (e: any) => {\n                        const selectedFile = e.target.files[0];\n                        if (maxSize && selectedFile.size > maxSize * 1024) {\n                           setTarget(be.target);\n                           setTimeout(() => {\n                              setTarget(undefined);\n                           }, 3000);\n                           return;\n                        }\n                        onSelect && onSelect(selectedFile)\n                        onChange && onChange(selectedFile);\n                     };\n                     input.click();\n                  }}\n               >\n                  {\n                     value ? <CloseOutlined /> : (changeIcon || <CameraAltOutlined />)\n                  }\n               </IconButton>\n            </Tag>}\n         >\n            <Avatar\n               {...slotProps?.avatar}\n               skeleton={loading}\n               size={avatarSize}\n               src={preview || defaultPreview}\n               border={target ? '1px solid' : 0}\n               borderColor={target ? \"danger.main\" : \"transparent\"}\n               bgcolor={target ? \"danger.ghost\" : bgcolor}\n            />\n            <Menu\n               {...slotProps?.menu}\n               target={target}\n               placement={\"bottom\"}\n               onClickOutside={() => setTarget(undefined)}\n               slotProps={{\n                  content: {\n                     mt: 2\n                  }\n               }}\n            >\n               <Text\n                  bgcolor=\"danger.main\"\n                  color=\"danger.contrast\"\n                  fontSize={\"small\"}\n                  p={1}\n                  px={2}\n                  radius={1}\n               >\n                  {`File size exceeds the maximum limit of ${maxSize} KB`}\n               </Text>\n            </Menu>\n         </Badge>\n      </Tag>\n   )\n})\n\nexport default AvatarPicker;"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;;;;AAIG;AAAoB;AACpB;AAAgB;AAChB;;AAEA;AACA;;;AAKA;;;;;AAIK;;;;;;;AAOL;AAEA;AAMS;AACA;AACF;;AAcc;AACA;;;;;;;AAOH;AACA;AACA;;;AAGM;;;;;;AAMH;AACA;AACH;;;AAyBH;AACG;AACF;AACH;AAgBhB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/AvatarPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport CloseOutlined from \"@xanui/icons/CloseOutlined\";\nimport CameraAltOutlined from \"@xanui/icons/CameraAltOutlined\";\nimport Avatar, { AvatarProps } from \"../Avatar\"\nimport Badge, { BadgeProps } from \"../Badge\"\nimport IconButton from \"../IconButton\"\nimport Menu, { MenuProps } from \"../Menu\"\nimport Text from \"../Text\"\nimport React from \"react\";\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface } from \"@xanui/core\";\n\n\nexport type AvataPickerValue = File | string | null;\n\nexport type AvatarPickerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   value?: AvataPickerValue\n   defaultPreview?: string;\n   maxSize?: number; // in kb\n   changeIcon?: React.ReactNode;\n   loading?: boolean;\n   avatarSize?: useBreakpointPropsType<number>;\n   onChange?: (file: AvataPickerValue) => void;\n   onDelete?: (file: File | string) => void\n   onSelect?: (file: File | string) => void\n   slotProps?: {\n      Avatar?: Omit<AvatarProps, \"src\">;\n      badge?: Omit<BadgeProps, \"placement\" | \"content\">;\n      menu?: Omit<MenuProps, \"target\" | \"onClickOutside\">\n   }\n};\n\nconst AvatarPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ value, maxSize, changeIcon, onChange, onDelete, onSelect, loading, bgcolor, ...rest }: AvatarPickerProps, ref: React.Ref<T>) => {\n   let [{ defaultPreview, avatarSize, slotProps, ...props }]: any = useInterface(\"AvaterPicker\", rest, {})\n\n   const _p: any = {}\n   if (defaultPreview) _p.defaultPreview = defaultPreview\n   if (avatarSize) _p.avatarSize = avatarSize\n   const bp = useBreakpointProps(_p)\n   maxSize = maxSize || (1024 * 2); // default 2MB\n   defaultPreview = bp.defaultPreview\n   avatarSize = bp.avatarSize ?? 100\n\n   const [preview, setPreview] = React.useState<string | undefined>();\n   const [target, setTarget] = React.useState<HTMLElement | undefined>();\n\n   React.useEffect(() => {\n      if (!value) {\n         setPreview(undefined);\n         return;\n      } if (typeof value === 'string') {\n         setPreview(value);\n         return;\n      }\n      const objectUrl = URL.createObjectURL(value);\n      setPreview(objectUrl);\n      return () => URL.revokeObjectURL(objectUrl);\n   }, [value, onChange]);\n\n   return (\n      <Tag\n         {...props}\n         baseClass=\"avatar-picker\"\n         ref={ref}\n         sxr={{\n            display: 'inline-block',\n            position: 'relative',\n         }}\n      >\n         <Badge\n            disableSpace\n            disableTransition\n            {...slotProps?.badge}\n            placement={value ? \"right-top\" : \"right-bottom\"}\n            content={<Tag>\n               <IconButton\n                  color={value ? \"danger\" : 'default'}\n                  cursor={\"pointer\"}\n                  size={value ? 20 : \"small\"}\n                  onClick={(be: any) => {\n                     if (value) {\n                        onDelete && onDelete(value)\n                        onChange && onChange(null);\n                        return\n                     }\n                     if (target) {\n                        setTarget(undefined);\n                     }\n                     const input = document.createElement('input');\n                     input.type = 'file';\n                     input.accept = 'image/*';\n                     input.onchange = (e: any) => {\n                        const selectedFile = e.target.files[0];\n                        if (maxSize && selectedFile.size > maxSize * 1024) {\n                           setTarget(be.target);\n                           setTimeout(() => {\n                              setTarget(undefined);\n                           }, 3000);\n                           return;\n                        }\n                        onSelect && onSelect(selectedFile)\n                        onChange && onChange(selectedFile);\n                     };\n                     input.click();\n                  }}\n               >\n                  {\n                     value ? <CloseOutlined /> : (changeIcon || <CameraAltOutlined />)\n                  }\n               </IconButton>\n            </Tag>}\n         >\n            <Avatar\n               {...slotProps?.avatar}\n               skeleton={loading}\n               size={avatarSize}\n               src={preview || defaultPreview}\n               border={target ? '1px solid' : 0}\n               borderColor={target ? \"danger.base\" : \"transparent\"}\n               bgcolor={target ? \"danger.ghost\" : bgcolor}\n            />\n            <Menu\n               {...slotProps?.menu}\n               target={target}\n               placement={\"bottom\"}\n               onClickOutside={() => setTarget(undefined)}\n               slotProps={{\n                  content: {\n                     mt: 2\n                  }\n               }}\n            >\n               <Text\n                  bgcolor=\"danger.base\"\n                  color=\"danger.contrast\"\n                  fontSize={\"small\"}\n                  p={1}\n                  px={2}\n                  radius={1}\n               >\n                  {`File size exceeds the maximum limit of ${maxSize} KB`}\n               </Text>\n            </Menu>\n         </Badge>\n      </Tag>\n   )\n})\n\nexport default AvatarPicker;"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;;;;AAIG;AAAoB;AACpB;AAAgB;AAChB;;AAEA;AACA;;;AAKA;;;;;AAIK;;;;;;;AAOL;AAEA;AAMS;AACA;AACF;;AAcc;AACA;;;;;;;AAOH;AACA;AACA;;;AAGM;;;;;;AAMH;AACA;AACH;;;AAyBH;AACG;AACF;AACH;AAgBhB;;"}

package/AvatarPicker/index.d.ts

@@ -21,7 +21,7 @@ type AvatarPickerProps<T extends TagComponentType = "div"> = TagProps<T> & {
         menu?: Omit<MenuProps, "target" | "onClickOutside">;
     };
 };
-declare const AvatarPicker: React__default.ForwardRefExoticComponent<Omit<AvatarPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "label" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
+declare const AvatarPicker: React__default.ForwardRefExoticComponent<Omit<AvatarPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
 
 export { AvatarPicker as default };
 export type { AvataPickerValue, AvatarPickerProps };

package/AvatarPicker/index.js

@@ -42,7 +42,7 @@ const AvatarPicker = React.forwardRef((_a, ref) => {
     return (jsx(Tag, Object.assign({}, props, { baseClass: "avatar-picker", ref: ref, sxr: {
             display: 'inline-block',
             position: 'relative',
-        }, children: jsxs(Badge, Object.assign({ disableSpace: true, disableTransition: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.badge, { placement: value ? "right-top" : "right-bottom", content: jsx(Tag, { children: jsx(IconButton, { color: value ? "danger" : 'surface', cursor: "pointer", size: value ? 20 : "small", onClick: (be) => {
+        }, children: jsxs(Badge, Object.assign({ disableSpace: true, disableTransition: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.badge, { placement: value ? "right-top" : "right-bottom", content: jsx(Tag, { children: jsx(IconButton, { color: value ? "danger" : 'default', cursor: "pointer", size: value ? 20 : "small", onClick: (be) => {
                         if (value) {
                             onDelete && onDelete(value);
                             onChange && onChange(null);
@@ -67,11 +67,11 @@ const AvatarPicker = React.forwardRef((_a, ref) => {
                             onChange && onChange(selectedFile);
                         };
                         input.click();
-                    }, children: value ? jsx(CloseOutlined, {}) : (changeIcon || jsx(CameraAltOutlined, {})) }) }), children: [jsx(Avatar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { skeleton: loading, size: avatarSize, src: preview || defaultPreview, border: target ? '1px solid' : 0, borderColor: target ? "danger.main" : "transparent", bgcolor: target ? "danger.ghost" : bgcolor })), jsx(Menu, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { target: target, placement: "bottom", onClickOutside: () => setTarget(undefined), slotProps: {
+                    }, children: value ? jsx(CloseOutlined, {}) : (changeIcon || jsx(CameraAltOutlined, {})) }) }), children: [jsx(Avatar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.avatar, { skeleton: loading, size: avatarSize, src: preview || defaultPreview, border: target ? '1px solid' : 0, borderColor: target ? "danger.base" : "transparent", bgcolor: target ? "danger.ghost" : bgcolor })), jsx(Menu, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.menu, { target: target, placement: "bottom", onClickOutside: () => setTarget(undefined), slotProps: {
                         content: {
                             mt: 2
                         }
-                    }, children: jsx(Text, { bgcolor: "danger.main", color: "danger.contrast", fontSize: "small", p: 1, px: 2, radius: 1, children: `File size exceeds the maximum limit of ${maxSize} KB` }) }))] })) })));
+                    }, children: jsx(Text, { bgcolor: "danger.base", color: "danger.contrast", fontSize: "small", p: 1, px: 2, radius: 1, children: `File size exceeds the maximum limit of ${maxSize} KB` }) }))] })) })));
 });
 
 export { AvatarPicker as default };

package/AvatarPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/AvatarPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport CloseOutlined from \"@xanui/icons/CloseOutlined\";\nimport CameraAltOutlined from \"@xanui/icons/CameraAltOutlined\";\nimport Avatar, { AvatarProps } from \"../Avatar\"\nimport Badge, { BadgeProps } from \"../Badge\"\nimport IconButton from \"../IconButton\"\nimport Menu, { MenuProps } from \"../Menu\"\nimport Text from \"../Text\"\nimport React from \"react\";\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface } from \"@xanui/core\";\n\n\nexport type AvataPickerValue = File | string | null;\n\nexport type AvatarPickerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   value?: AvataPickerValue\n   defaultPreview?: string;\n   maxSize?: number; // in kb\n   changeIcon?: React.ReactNode;\n   loading?: boolean;\n   avatarSize?: useBreakpointPropsType<number>;\n   onChange?: (file: AvataPickerValue) => void;\n   onDelete?: (file: File | string) => void\n   onSelect?: (file: File | string) => void\n   slotProps?: {\n      Avatar?: Omit<AvatarProps, \"src\">;\n      badge?: Omit<BadgeProps, \"placement\" | \"content\">;\n      menu?: Omit<MenuProps, \"target\" | \"onClickOutside\">\n   }\n};\n\nconst AvatarPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ value, maxSize, changeIcon, onChange, onDelete, onSelect, loading, bgcolor, ...rest }: AvatarPickerProps, ref: React.Ref<T>) => {\n   let [{ defaultPreview, avatarSize, slotProps, ...props }]: any = useInterface(\"AvaterPicker\", rest, {})\n\n   const _p: any = {}\n   if (defaultPreview) _p.defaultPreview = defaultPreview\n   if (avatarSize) _p.avatarSize = avatarSize\n   const bp = useBreakpointProps(_p)\n   maxSize = maxSize || (1024 * 2); // default 2MB\n   defaultPreview = bp.defaultPreview\n   avatarSize = bp.avatarSize ?? 100\n\n   const [preview, setPreview] = React.useState<string | undefined>();\n   const [target, setTarget] = React.useState<HTMLElement | undefined>();\n\n   React.useEffect(() => {\n      if (!value) {\n         setPreview(undefined);\n         return;\n      } if (typeof value === 'string') {\n         setPreview(value);\n         return;\n      }\n      const objectUrl = URL.createObjectURL(value);\n      setPreview(objectUrl);\n      return () => URL.revokeObjectURL(objectUrl);\n   }, [value, onChange]);\n\n   return (\n      <Tag\n         {...props}\n         baseClass=\"avatar-picker\"\n         ref={ref}\n         sxr={{\n            display: 'inline-block',\n            position: 'relative',\n         }}\n      >\n         <Badge\n            disableSpace\n            disableTransition\n            {...slotProps?.badge}\n            placement={value ? \"right-top\" : \"right-bottom\"}\n            content={<Tag>\n               <IconButton\n                  color={value ? \"danger\" : 'surface'}\n                  cursor={\"pointer\"}\n                  size={value ? 20 : \"small\"}\n                  onClick={(be: any) => {\n                     if (value) {\n                        onDelete && onDelete(value)\n                        onChange && onChange(null);\n                        return\n                     }\n                     if (target) {\n                        setTarget(undefined);\n                     }\n                     const input = document.createElement('input');\n                     input.type = 'file';\n                     input.accept = 'image/*';\n                     input.onchange = (e: any) => {\n                        const selectedFile = e.target.files[0];\n                        if (maxSize && selectedFile.size > maxSize * 1024) {\n                           setTarget(be.target);\n                           setTimeout(() => {\n                              setTarget(undefined);\n                           }, 3000);\n                           return;\n                        }\n                        onSelect && onSelect(selectedFile)\n                        onChange && onChange(selectedFile);\n                     };\n                     input.click();\n                  }}\n               >\n                  {\n                     value ? <CloseOutlined /> : (changeIcon || <CameraAltOutlined />)\n                  }\n               </IconButton>\n            </Tag>}\n         >\n            <Avatar\n               {...slotProps?.avatar}\n               skeleton={loading}\n               size={avatarSize}\n               src={preview || defaultPreview}\n               border={target ? '1px solid' : 0}\n               borderColor={target ? \"danger.main\" : \"transparent\"}\n               bgcolor={target ? \"danger.ghost\" : bgcolor}\n            />\n            <Menu\n               {...slotProps?.menu}\n               target={target}\n               placement={\"bottom\"}\n               onClickOutside={() => setTarget(undefined)}\n               slotProps={{\n                  content: {\n                     mt: 2\n                  }\n               }}\n            >\n               <Text\n                  bgcolor=\"danger.main\"\n                  color=\"danger.contrast\"\n                  fontSize={\"small\"}\n                  p={1}\n                  px={2}\n                  radius={1}\n               >\n                  {`File size exceeds the maximum limit of ${maxSize} KB`}\n               </Text>\n            </Menu>\n         </Badge>\n      </Tag>\n   )\n})\n\nexport default AvatarPicker;"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;;;;AAIG;AAAoB;AACpB;AAAgB;AAChB;;AAEA;AACA;;;AAKA;;;;;AAIK;;;;;;;AAOL;AAEA;AAMS;AACA;AACF;;AAcc;AACA;;;;;;;AAOH;AACA;AACA;;;AAGM;;;;;;AAMH;AACA;AACH;;;AAyBH;AACG;AACF;AACH;AAgBhB;;"}
+{"version":3,"file":"index.js","sources":["../../src/AvatarPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport CloseOutlined from \"@xanui/icons/CloseOutlined\";\nimport CameraAltOutlined from \"@xanui/icons/CameraAltOutlined\";\nimport Avatar, { AvatarProps } from \"../Avatar\"\nimport Badge, { BadgeProps } from \"../Badge\"\nimport IconButton from \"../IconButton\"\nimport Menu, { MenuProps } from \"../Menu\"\nimport Text from \"../Text\"\nimport React from \"react\";\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface } from \"@xanui/core\";\n\n\nexport type AvataPickerValue = File | string | null;\n\nexport type AvatarPickerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n   value?: AvataPickerValue\n   defaultPreview?: string;\n   maxSize?: number; // in kb\n   changeIcon?: React.ReactNode;\n   loading?: boolean;\n   avatarSize?: useBreakpointPropsType<number>;\n   onChange?: (file: AvataPickerValue) => void;\n   onDelete?: (file: File | string) => void\n   onSelect?: (file: File | string) => void\n   slotProps?: {\n      Avatar?: Omit<AvatarProps, \"src\">;\n      badge?: Omit<BadgeProps, \"placement\" | \"content\">;\n      menu?: Omit<MenuProps, \"target\" | \"onClickOutside\">\n   }\n};\n\nconst AvatarPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ value, maxSize, changeIcon, onChange, onDelete, onSelect, loading, bgcolor, ...rest }: AvatarPickerProps, ref: React.Ref<T>) => {\n   let [{ defaultPreview, avatarSize, slotProps, ...props }]: any = useInterface(\"AvaterPicker\", rest, {})\n\n   const _p: any = {}\n   if (defaultPreview) _p.defaultPreview = defaultPreview\n   if (avatarSize) _p.avatarSize = avatarSize\n   const bp = useBreakpointProps(_p)\n   maxSize = maxSize || (1024 * 2); // default 2MB\n   defaultPreview = bp.defaultPreview\n   avatarSize = bp.avatarSize ?? 100\n\n   const [preview, setPreview] = React.useState<string | undefined>();\n   const [target, setTarget] = React.useState<HTMLElement | undefined>();\n\n   React.useEffect(() => {\n      if (!value) {\n         setPreview(undefined);\n         return;\n      } if (typeof value === 'string') {\n         setPreview(value);\n         return;\n      }\n      const objectUrl = URL.createObjectURL(value);\n      setPreview(objectUrl);\n      return () => URL.revokeObjectURL(objectUrl);\n   }, [value, onChange]);\n\n   return (\n      <Tag\n         {...props}\n         baseClass=\"avatar-picker\"\n         ref={ref}\n         sxr={{\n            display: 'inline-block',\n            position: 'relative',\n         }}\n      >\n         <Badge\n            disableSpace\n            disableTransition\n            {...slotProps?.badge}\n            placement={value ? \"right-top\" : \"right-bottom\"}\n            content={<Tag>\n               <IconButton\n                  color={value ? \"danger\" : 'default'}\n                  cursor={\"pointer\"}\n                  size={value ? 20 : \"small\"}\n                  onClick={(be: any) => {\n                     if (value) {\n                        onDelete && onDelete(value)\n                        onChange && onChange(null);\n                        return\n                     }\n                     if (target) {\n                        setTarget(undefined);\n                     }\n                     const input = document.createElement('input');\n                     input.type = 'file';\n                     input.accept = 'image/*';\n                     input.onchange = (e: any) => {\n                        const selectedFile = e.target.files[0];\n                        if (maxSize && selectedFile.size > maxSize * 1024) {\n                           setTarget(be.target);\n                           setTimeout(() => {\n                              setTarget(undefined);\n                           }, 3000);\n                           return;\n                        }\n                        onSelect && onSelect(selectedFile)\n                        onChange && onChange(selectedFile);\n                     };\n                     input.click();\n                  }}\n               >\n                  {\n                     value ? <CloseOutlined /> : (changeIcon || <CameraAltOutlined />)\n                  }\n               </IconButton>\n            </Tag>}\n         >\n            <Avatar\n               {...slotProps?.avatar}\n               skeleton={loading}\n               size={avatarSize}\n               src={preview || defaultPreview}\n               border={target ? '1px solid' : 0}\n               borderColor={target ? \"danger.base\" : \"transparent\"}\n               bgcolor={target ? \"danger.ghost\" : bgcolor}\n            />\n            <Menu\n               {...slotProps?.menu}\n               target={target}\n               placement={\"bottom\"}\n               onClickOutside={() => setTarget(undefined)}\n               slotProps={{\n                  content: {\n                     mt: 2\n                  }\n               }}\n            >\n               <Text\n                  bgcolor=\"danger.base\"\n                  color=\"danger.contrast\"\n                  fontSize={\"small\"}\n                  p={1}\n                  px={2}\n                  radius={1}\n               >\n                  {`File size exceeds the maximum limit of ${maxSize} KB`}\n               </Text>\n            </Menu>\n         </Badge>\n      </Tag>\n   )\n})\n\nexport default AvatarPicker;"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;;;;AAIG;AAAoB;AACpB;AAAgB;AAChB;;AAEA;AACA;;;AAKA;;;;;AAIK;;;;;;;AAOL;AAEA;AAMS;AACA;AACF;;AAcc;AACA;;;;;;;AAOH;AACA;AACA;;;AAGM;;;;;;AAMH;AACA;AACH;;;AAyBH;AACG;AACF;AACH;AAgBhB;;"}

package/Badge/index.cjs

@@ -91,7 +91,7 @@ const Badge = React.forwardRef((_a, ref) => {
     else {
         template = {};
     }
-    const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.main), _css), children: content }));
+    const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.base), _css), children: content }));
     return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsxRuntime.jsx(core.Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
                     return {
                         from: {

package/Badge/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | string | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        _css.userSelect = \"none\"\n        _css.pointerEvents = \"none\"\n        _css.fontSize = \"small\"\n        _css.lineHeight = 1\n        _css.fontWeight = 500\n        _css.radius = 2\n\n        if (typeof content === 'number') {\n            if (content > 99) {\n                content = \"99+\"\n            }\n        }\n\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            ...template.main,\n            ..._css,\n        }}\n    >\n        {content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{_badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":[],"mappings":";;;;;;;;AAqBA;;AACI;;;;;;;AASA;AACA;AACA;AACA;;AAGA;AAEA;AACA;AACA;AACA;AACA;;;AAKA;AACI;;;;AAMA;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;;;AAQJ;;;AAIA;AACA;AACA;AACA;AACA;AACA;AAEA;AACI;;;;AAKJ;AACI;AACA;AACA;AACA;;;AAEA;AACA;;;;;;AAMR;;;AAgCwB;AACI;AACA;AACH;AACD;AACI;AACA;AACH;;;AAY7B;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | string | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        _css.userSelect = \"none\"\n        _css.pointerEvents = \"none\"\n        _css.fontSize = \"small\"\n        _css.lineHeight = 1\n        _css.fontWeight = 500\n        _css.radius = 2\n\n        if (typeof content === 'number') {\n            if (content > 99) {\n                content = \"99+\"\n            }\n        }\n\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            ...template.base,\n            ..._css,\n        }}\n    >\n        {content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{_badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":[],"mappings":";;;;;;;;AAqBA;;AACI;;;;;;;AASA;AACA;AACA;AACA;;AAGA;AAEA;AACA;AACA;AACA;AACA;;;AAKA;AACI;;;;AAMA;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;;;AAQJ;;;AAIA;AACA;AACA;AACA;AACA;AACA;AAEA;AACI;;;;AAKJ;AACI;AACA;AACA;AACA;;;AAEA;AACA;;;;;;AAMR;;;AAgCwB;AACI;AACA;AACH;AACD;AACI;AACA;AACH;;;AAY7B;;"}

package/Badge/index.js

@@ -89,7 +89,7 @@ const Badge = React.forwardRef((_a, ref) => {
     else {
         template = {};
     }
-    const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.main), _css), children: content }));
+    const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.base), _css), children: content }));
     return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsx(Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
                     return {
                         from: {

package/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | string | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        _css.userSelect = \"none\"\n        _css.pointerEvents = \"none\"\n        _css.fontSize = \"small\"\n        _css.lineHeight = 1\n        _css.fontWeight = 500\n        _css.radius = 2\n\n        if (typeof content === 'number') {\n            if (content > 99) {\n                content = \"99+\"\n            }\n        }\n\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            ...template.main,\n            ..._css,\n        }}\n    >\n        {content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{_badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":[],"mappings":";;;;;;AAqBA;;AACI;;;;;;;AASA;AACA;AACA;AACA;;AAGA;AAEA;AACA;AACA;AACA;AACA;;;AAKA;AACI;;;;AAMA;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;;;AAQJ;;;AAIA;AACA;AACA;AACA;AACA;AACA;AAEA;AACI;;;;AAKJ;AACI;AACA;AACA;AACA;;;AAEA;AACA;;;;;;AAMR;;;AAgCwB;AACI;AACA;AACH;AACD;AACI;AACA;AACH;;;AAY7B;;"}
+{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n    content?: useBreakpointPropsType<number | string | ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n    visible?: useBreakpointPropsType<boolean>;\n    disableTransition?: boolean;\n    disableSpace?: boolean;\n    slotProps?: {\n        transition?: Omit<TransitionProps, \"open\">;\n        content?: Omit<TagProps<\"span\">, \"children\">;\n    },\n    refs?: {\n        content?: React.Ref<any>;\n        transition?: React.Ref<any>;\n    };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n    let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n    color ??= \"danger\"\n    visible ??= true\n    placement ??= \"right-top\"\n    disableTransition ??= false\n    disableSpace ??= false\n\n    const _p: any = {}\n\n    _p.content = content\n    _p.color = color\n    _p.placement = placement\n    _p.visible = visible\n    _p.disableTransition = disableTransition ?? false\n\n    const p: any = useBreakpointProps(_p)\n\n    content = p.content\n    color = p.color\n    placement = p.placement\n    visible = p.visible\n    disableTransition = p.disableTransition\n\n    const isReactElement = React.isValidElement(content);\n\n    let template: any = useColorTemplate(color, \"fill\")\n    let _css: any = {\n        position: \"absolute\",\n    }\n\n    let translate = ''\n\n    switch (placement) {\n        case \"right-top\":\n            _css.top = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, -50%)\";\n            }\n            break;\n        case \"right-bottom\":\n            _css.bottom = 0;\n            _css.right = 0;\n            if (!disableSpace) {\n                translate = \"translate(50%, 50%)\";\n            }\n            break;\n        case \"left-top\":\n            _css.top = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, -50%)\";\n            }\n            break;\n        case \"left-bottom\":\n            _css.bottom = 0;\n            _css.left = 0;\n            if (!disableSpace) {\n                translate = \"translate(-50%, 50%)\";\n            }\n            break;\n    }\n\n    if (disableTransition) {\n        _css.transform = translate\n    }\n\n    if (!isReactElement) {\n        _css.userSelect = \"none\"\n        _css.pointerEvents = \"none\"\n        _css.fontSize = \"small\"\n        _css.lineHeight = 1\n        _css.fontWeight = 500\n        _css.radius = 2\n\n        if (typeof content === 'number') {\n            if (content > 99) {\n                content = \"99+\"\n            }\n        }\n\n        if (content !== undefined) {\n            _css.minWidth = 16\n            _css.height = 16\n            _css.p = .8\n            _css.px = .4\n        } else {\n            _css.width = 8\n            _css.height = 8\n        }\n    } else {\n        template = {}\n    }\n\n    const _badge = <Tag\n        {...slotProps?.content}\n        ref={refs?.content}\n        component='span'\n        baseClass='badge-content'\n        sxr={{\n            position: \"absolute\",\n            zIndex: 1,\n            display: 'flex',\n            justifyContent: \"center\",\n            alignItems: 'center',\n            ...template.base,\n            ..._css,\n        }}\n    >\n        {content}\n    </Tag>\n\n    return (\n        <Tag\n            {...props}\n            position=\"relative\"\n            display=\"inline-block\"\n            baseClass='badge'\n            ref={ref}\n        >\n            {\n                !disableTransition ? (<Transition\n                    open={content !== undefined && visible}\n                    {...slotProps?.transition}\n                    variant={() => {\n                        return {\n                            from: {\n                                opacity: 0,\n                                transform: `scale(0) ${translate}`.trim(),\n                            },\n                            to: {\n                                opacity: 1,\n                                transform: `scale(1) ${translate}`.trim(),\n                            },\n                        }\n                    }}\n                    ref={refs?.transition}\n                >\n                    {_badge}\n                </Transition>) : <>{_badge}</>\n            }\n\n            {children}\n        </Tag>\n    )\n})\n\nexport default Badge\n\n"],"names":[],"mappings":";;;;;;AAqBA;;AACI;;;;;;;AASA;AACA;AACA;AACA;;AAGA;AAEA;AACA;AACA;AACA;AACA;;;AAKA;AACI;;;;AAMA;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;AAKJ;AACI;AACA;;;;;;;AAQJ;;;AAIA;AACA;AACA;AACA;AACA;AACA;AAEA;AACI;;;;AAKJ;AACI;AACA;AACA;AACA;;;AAEA;AACA;;;;;;AAMR;;;AAgCwB;AACI;AACA;AACH;AACD;AACI;AACA;AACH;;;AAY7B;;"}

package/Button/index.cjs

@@ -89,7 +89,7 @@ const Button = React.forwardRef((_a, ref) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'surface' ? `primary` : 'surface', size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
+                }, children: jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `primary` : 'default', size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
 });
 
 module.exports = Button;

package/Button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    skeleton?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"primary\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 44,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={_size.height}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                ..._size,\n                ...cornerCss,\n            }}\n        />\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                \"&:active\": {\n                    transform: variant !== \"text\" ? \"scale(0.99)\" : undefined\n                },\n                ..._size,\n                ...cornerCss,\n                ...template.main,\n\n            }}\n            hover={{\n                ...template.hover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={disabled ?? loading ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'surface' ? `primary` : 'surface'}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;AAYJ;;;AAoCgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    skeleton?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"primary\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 44,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={_size.height}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                ..._size,\n                ...cornerCss,\n            }}\n        />\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                \"&:active\": {\n                    transform: variant !== \"text\" ? \"scale(0.99)\" : undefined\n                },\n                ..._size,\n                ...cornerCss,\n                ...template.main,\n\n            }}\n            hover={{\n                ...template.hover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={disabled ?? loading ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `primary` : 'default'}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;AAYJ;;;AAoCgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}

package/Button/index.js

@@ -87,7 +87,7 @@ const Button = React.forwardRef((_a, ref) => {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'surface' ? `primary` : 'surface', size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsx(Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsx(Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
+                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `primary` : 'default', size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsx(Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsx(Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
 });
 
 export { Button as default };

package/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    skeleton?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"primary\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 44,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={_size.height}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                ..._size,\n                ...cornerCss,\n            }}\n        />\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                \"&:active\": {\n                    transform: variant !== \"text\" ? \"scale(0.99)\" : undefined\n                },\n                ..._size,\n                ...cornerCss,\n                ...template.main,\n\n            }}\n            hover={{\n                ...template.hover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={disabled ?? loading ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'surface' ? `primary` : 'surface'}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;AAYJ;;;AAoCgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\nimport Skeleton, { SkeletonProps } from '../Skeleton';\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    skeleton?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">;\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, skeleton, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"primary\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 44,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    if (skeleton) {\n        return <Skeleton\n            {...slotProps?.skeleton}\n            height={_size.height}\n            animation={\"wave\"}\n            sx={{\n                ...slotProps?.skeleton?.sx,\n                ..._size,\n                ...cornerCss,\n            }}\n        />\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                \"&:active\": {\n                    transform: variant !== \"text\" ? \"scale(0.99)\" : undefined\n                },\n                ..._size,\n                ...cornerCss,\n                ...template.main,\n\n            }}\n            hover={{\n                ...template.hover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={disabled ?? loading ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `primary` : 'default'}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;;AACI;AACI;AACA;AACA;AACA;;;AAIJ;AAAe;AACf;AAAa;AACb;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAAU;AACV;AAAe;AACf;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AAEA;AACI;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACA;AACH;;AAGL;AACI;AACA;AACA;;;AAIJ;;AAEI;AACA;;;AAIA;;AAYJ;;;AAoCgB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACH;AAwBjB;;"}

package/ButtonGroup/index.cjs

@@ -11,7 +11,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
     let [_b] = core.useInterface("ButtonGroup", rest, {
         size: "medium",
         variant: "outline",
-        color: 'surface'
+        color: 'default'
     }), { color, variant, size } = _b, props = tslib.__rest(_b, ["color", "variant", "size"]);
     const _p = {};
     if (color)

package/ButtonGroup/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: 'surface'\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = `${color}.divider`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    border: 0,\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: 'default'\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = `${color}.divider`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    border: 0,\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}

package/ButtonGroup/index.js

@@ -9,7 +9,7 @@ const ButtonGroup = React.forwardRef((_a, ref) => {
     let [_b] = useInterface("ButtonGroup", rest, {
         size: "medium",
         variant: "outline",
-        color: 'surface'
+        color: 'default'
     }), { color, variant, size } = _b, props = __rest(_b, ["color", "variant", "size"]);
     const _p = {};
     if (color)

package/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: 'surface'\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = `${color}.divider`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    border: 0,\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: 'default'\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = `${color}.divider`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    border: 0,\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":[],"mappings":";;;;;;AAYA;AAA0E;AACtE;AACI;AACA;AACA;AACH;;AAED;AAAW;AACX;AACA;AAEA;AACI;AACI;AACH;AACD;AACI;AACH;AACD;AACI;AACH;;AAGL;AAEA;AAKY;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACH;AACD;AACI;AACH;AACJ;;AAMO;;;;AAIA;AACH;;AAIjB;;"}

package/Calendar/index.cjs

@@ -22,7 +22,7 @@ const ShowYears = ({ color, year, today, onClick }) => {
         years.push(jsxRuntime.jsx(index$1, { sx: {
                 width: 50,
                 p: .1
-            }, className: 'calender-year-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : 'surface', className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
+            }, className: 'calender-year-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : 'default', className: 'calender-year-button', size: 'small', corner: "circle", ref: selected ? selectedRef : null, onClick: () => onClick(y), variant: selected ? "fill" : "text", children: y }) }, y));
     }
     React.useEffect(() => {
         if (selectedRef === null || selectedRef === void 0 ? void 0 : selectedRef.current) {
@@ -68,7 +68,7 @@ const Calendar = (_a) => {
                     height: btnWidth,
                     alignItems: "center",
                     justifyContent: "center"
-                }, children: jsxRuntime.jsx(index$3, { variant: "text", color: "surface", disabled: true, children: k }) }, "dayname-" + i));
+                }, children: jsxRuntime.jsx(index$3, { variant: "text", color: "default", disabled: true, children: k }) }, "dayname-" + i));
         }
         rows.push(jsxRuntime.jsx(index$1, { flexRow: true, className: 'calender-day-row', children: row }, "header"));
         let date = 1;
@@ -93,7 +93,7 @@ const Calendar = (_a) => {
                     if (isToday) {
                         css = {
                             variant: "fill",
-                            color: "surface"
+                            color: "default"
                         };
                     }
                     if (isSelected) {
@@ -107,7 +107,7 @@ const Calendar = (_a) => {
                             height: btnWidth,
                             alignItems: "center",
                             justifyContent: "center"
-                        }, className: 'calender-day-item', children: jsxRuntime.jsx(index$3, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "surface" }, css, { "data-value": date, onClick: (e) => {
+                        }, className: 'calender-day-item', children: jsxRuntime.jsx(index$3, Object.assign({ className: 'calender-day-button', variant: isSelected ? "fill" : "text", color: isToday ? color : "default" }, css, { "data-value": date, onClick: (e) => {
                                 let d = e.target.getAttribute("data-value");
                                 if (!d)
                                     return;
@@ -127,13 +127,13 @@ const Calendar = (_a) => {
         const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
         for (let m = 0; m < monthNames.length; m++) {
             const selected = currentDate.getMonth() === m;
-            months.push(jsxRuntime.jsx(index$1, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : 'surface', className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
+            months.push(jsxRuntime.jsx(index$1, { width: "50%", alignItems: "center", justifyContent: "center", p: .1, className: 'calender-months-item', children: jsxRuntime.jsx(index$4, { color: selected ? color : 'default', className: 'calender-month-button', size: 'small', corner: "circle", variant: selected ? "fill" : 'text', onClick: () => {
                         const v = new Date(currentDate.getFullYear(), m);
                         setCurrentDate(v);
                         setViewMode("day");
                         onButtonClick && onButtonClick("month", v);
                     }, sx: {
-                        color: selected ? "primary.contrast" : "surface.contrast"
+                        color: selected ? "primary.contrast" : "default.contrast"
                     }, children: monthNames[m] }) }, m));
         }
         return (jsxRuntime.jsx(index$1, { className: 'calender-months', sx: {
@@ -160,12 +160,12 @@ const Calendar = (_a) => {
             view = (jsxRuntime.jsx(jsxRuntime.Fragment, { children: showCalendar() }));
             break;
     }
-    return (jsxRuntime.jsx(index, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "surface.lighter", startContent: jsxRuntime.jsxs(index$1, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsxRuntime.jsx(index$2, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsxRuntime.jsx(index$3, { color: "surface", variant: 'text', size: 28, onClick: () => {
+    return (jsxRuntime.jsx(index, { className: 'calender-root', maxHeight: 308, width: 250, radius: 1, bgcolor: "default.base", startContent: jsxRuntime.jsxs(index$1, { className: 'calender-header', flexRow: true, alignItems: "center", justifyContent: "space-between", p: 1, children: [jsxRuntime.jsx(index$2, { fontWeight: "bold", cursor: "pointer", onClick: () => setViewMode(viewMode !== 'day' ? "day" : "year"), flex: 1, children: currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' }) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date());
                         onChange ? onChange(new Date()) : setSelectedDate(new Date());
-                    }, children: jsxRuntime.jsx(ResetIcon, { fontSize: 20 }) }), jsxRuntime.jsx(index$3, { color: "surface", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsxRuntime.jsx(ResetIcon, { fontSize: 20 }) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1));
-                    }, children: jsxRuntime.jsx(IconKeyboardArrowLeft, {}) }), jsxRuntime.jsx(index$3, { color: "surface", variant: 'text', size: 28, onClick: () => {
+                    }, children: jsxRuntime.jsx(IconKeyboardArrowLeft, {}) }), jsxRuntime.jsx(index$3, { color: "default", variant: 'text', size: 28, onClick: () => {
                         setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
                     }, children: jsxRuntime.jsx(IconKeyboardArrowRight, {}) })] }), children: jsxRuntime.jsx(index$1, { height: "100%", p: .5, className: 'calender-container', children: view }) }));
 };