@xanui/ui 1.2.6 → 1.2.7

package/Autocomplete/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { ListItemProps } from '../ListItem/index.js';
 import { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
@@ -17,11 +17,11 @@ type AutocompleteProps = {
     autoFocus?: boolean;
     autoComplete?: string;
     label?: useBreakpointPropsType<string>;
-    onFocus?: (e: React.FocusEvent<any>) => void;
-    onBlur?: (e: React.FocusEvent<any>) => void;
-    onInput?: (e: React.FormEvent<any>) => void;
-    onKeyDown?: (e: React.KeyboardEvent<any>) => void;
-    onKeyUp?: (e: React.KeyboardEvent<any>) => void;
+    onFocus?: (e: React__default.FocusEvent<any>) => void;
+    onBlur?: (e: React__default.FocusEvent<any>) => void;
+    onInput?: (e: React__default.FormEvent<any>) => void;
+    onKeyDown?: (e: React__default.KeyboardEvent<any>) => void;
+    onKeyUp?: (e: React__default.KeyboardEvent<any>) => void;
     rows?: useBreakpointPropsType<number>;
     minRows?: useBreakpointPropsType<number>;
     maxRows?: useBreakpointPropsType<number>;
@@ -30,7 +30,7 @@ type AutocompleteProps = {
     endIcon?: useBreakpointPropsType<ReactElement>;
     iconPlacement?: useBreakpointPropsType<"start" | "center" | "end">;
     focused?: boolean;
-    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, "default">>;
+    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;
     variant?: useBreakpointPropsType<"fill" | "outline" | "text">;
     error?: boolean;
     helperText?: useBreakpointPropsType<string>;

package/Autocomplete/index.js

@@ -33,7 +33,7 @@ const Autocomplete = (_a) => {
     }
     if (!!value && multiple && Array.isArray(value)) {
         value.map((v, index) => {
-            startIcons.push(jsx(Chip, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsx(IconButton, { size: 20, variant: "text", color: "default", onClick: (e) => {
+            startIcons.push(jsx(Chip, { size: "small", label: getLabel(v), variant: "fill", color: "surface", endIcon: jsx(IconButton, { size: 20, variant: "text", color: "surface", onClick: (e) => {
                         e.stopPropagation();
                         let newValue = Array.isArray(value) ? [...value] : [];
                         newValue = newValue.filter((val) => getLabel(val) !== getLabel(v));
@@ -49,7 +49,7 @@ const Autocomplete = (_a) => {
         endIcons.push(jsx(CircleProgress, { size: "small" }, "auto-complete-loading-icon"));
     }
     else if (!!value && !multiple) {
-        endIcons.unshift(jsx(IconButton, { variant: "text", color: "default", onClick: (e) => {
+        endIcons.unshift(jsx(IconButton, { variant: "text", color: "surface", onClick: (e) => {
                 e.stopPropagation();
                 onChange && onChange(null);
                 setInputValue("");

package/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n   options: any[] | ((text: string) => Promise<any[]>)\n   getLabel: (option: any) => string;\n   onChange?: (value: any) => void;\n   value?: any;\n   multiple?: boolean;\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n   // input props customization\n   disabled?: boolean;\n   name?: string;\n   placeholder?: string;\n   readOnly?: boolean;\n   autoFocus?: boolean;\n   autoComplete?: string;\n   label?: useBreakpointPropsType<string>;\n\n   onFocus?: (e: React.FocusEvent<any>) => void;\n   onBlur?: (e: React.FocusEvent<any>) => void;\n   onInput?: (e: React.FormEvent<any>) => void;\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n   rows?: useBreakpointPropsType<number>;\n   minRows?: useBreakpointPropsType<number>;\n   maxRows?: useBreakpointPropsType<number>;\n   fullWidth?: boolean;\n\n   startIcon?: useBreakpointPropsType<ReactElement>;\n   endIcon?: useBreakpointPropsType<ReactElement>;\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n   focused?: boolean;\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n   error?: boolean;\n   helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n   const [_options, setOptions] = React.useState<any[]>()\n   const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n   const [timer, setTimer] = React.useState<any>(null)\n   const [loading, setLoading] = React.useState(false)\n   const [focused, setFocused] = React.useState(false)\n   const [open, setOpen] = React.useState(false)\n   const menuRef = React.useRef<any>(null)\n\n   useEffect(() => {\n      if (!inputValue) {\n         setInputValue(value ? getLabel(value) : \"\")\n      }\n   }, [value])\n\n   getLabel ??= (option: any) => option.toString();\n   multiple ??= false;\n\n   let startIcons = []\n   if (inputProps.startIcon) {\n      startIcons.push(inputProps.startIcon)\n   }\n\n   if (!!value && multiple && Array.isArray(value)) {\n      value.map((v: any, index: number) => {\n         startIcons.push(<Chip\n            key={index}\n            size=\"small\"\n            label={getLabel!(v)}\n            variant={\"fill\"}\n            color=\"default\"\n            endIcon={<IconButton\n               size={20}\n               variant={\"text\"}\n               color=\"default\"\n               onClick={(e) => {\n                  e.stopPropagation();\n                  let newValue = Array.isArray(value) ? [...value] : []\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n                  onChange && onChange(newValue)\n               }}\n            >\n               <Close />\n            </IconButton>}\n         />)\n      })\n   }\n\n   let endIcons = []\n   if (inputProps.endIcon) {\n      endIcons.push(inputProps.endIcon)\n   }\n   if (loading) {\n      endIcons.push(<CircleProgress\n         key=\"auto-complete-loading-icon\"\n         size=\"small\"\n      />)\n   } else if (!!value && !multiple) {\n      endIcons.unshift(<IconButton\n         key=\"auto-complete-clear-button\"\n         variant={\"text\"}\n         color=\"default\"\n         onClick={(e) => {\n            e.stopPropagation();\n            onChange && onChange(null)\n            setInputValue(\"\")\n         }}\n      >\n         <Close />\n      </IconButton>)\n   }\n\n   const loadOptions = async () => {\n      setLoading(true)\n      setOpen(false)\n      let results = []\n      if (typeof options === 'function') {\n         results = await options(inputValue)\n      } else {\n         results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n      }\n      if (!multiple && inputValue) {\n         const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n         onChange && onChange(find || null)\n      }\n      setOptions(results)\n      setOpen(true)\n      setLoading(false)\n   }\n\n   useEffect(() => {\n      if (focused) {\n         clearTimeout(timer)\n         setTimer(setTimeout(() => {\n            loadOptions()\n         }, 300))\n      } else {\n         setOpen(false)\n      }\n   }, [focused, inputValue])\n\n\n   return (\n      <>\n         <Input\n            {...inputProps as any}\n            ref={menuRef}\n            slotProps={{\n               rootContainer: {\n                  flexWrap: 'wrap',\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\n               },\n               input: {\n                  width: multiple ? 'initial' : '100%',\n                  flex: 1,\n                  minWidth: 20,\n               }\n            }}\n            startIcon={startIcons.length ? startIcons : undefined}\n            endIcon={endIcons}\n            value={inputValue}\n            onFocus={() => setFocused(true)}\n            onKeyDown={(e) => {\n               if (inputProps?.onKeyDown) {\n                  inputProps.onKeyDown(e)\n               }\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n                  let newValue = [...value]\n                  newValue.pop()\n                  onChange && onChange(newValue)\n               }\n            }}\n            onChange={(e) => {\n               const value = e.target.value;\n               setInputValue(value)\n            }}\n         />\n         <Menu\n            target={open ? menuRef.current : null}\n            onClickOutside={() => {\n               setFocused(false)\n            }}\n            slotProps={{\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n            }}\n         >\n            <List\n               maxHeight={400}\n               overflow={\"auto\"}\n            >\n               {_options?.map((option, index) => (\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n                     onClick: () => {\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }\n                  })}</div> : <ListItem\n                     key={index}\n                     onClick={() => {\n\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }}\n                  >\n                     {getLabel!(option)}\n                  </ListItem>\n               ))}\n            </List>\n         </Menu>\n      </>\n   )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["\"use client\"\nimport React, { ReactElement, useEffect } from 'react'\nimport Input from '../Input'\nimport Menu from '../Menu'\nimport List from '../List';\nimport ListItem, { ListItemProps } from '../ListItem';\nimport Chip from '../Chip';\nimport IconButton from '../IconButton';\nimport Close from '@xanui/icons/Close';\nimport CircleProgress from '../CircleProgress';\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\n\nexport type AutocompleteProps = {\n\n   options: any[] | ((text: string) => Promise<any[]>)\n   getLabel: (option: any) => string;\n   onChange?: (value: any) => void;\n   value?: any;\n   multiple?: boolean;\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\n\n   // input props customization\n   disabled?: boolean;\n   name?: string;\n   placeholder?: string;\n   readOnly?: boolean;\n   autoFocus?: boolean;\n   autoComplete?: string;\n   label?: useBreakpointPropsType<string>;\n\n   onFocus?: (e: React.FocusEvent<any>) => void;\n   onBlur?: (e: React.FocusEvent<any>) => void;\n   onInput?: (e: React.FormEvent<any>) => void;\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n   rows?: useBreakpointPropsType<number>;\n   minRows?: useBreakpointPropsType<number>;\n   maxRows?: useBreakpointPropsType<number>;\n   fullWidth?: boolean;\n\n   startIcon?: useBreakpointPropsType<ReactElement>;\n   endIcon?: useBreakpointPropsType<ReactElement>;\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n   focused?: boolean;\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n   error?: boolean;\n   helperText?: useBreakpointPropsType<string>;\n\n}\n\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\n   const [_options, setOptions] = React.useState<any[]>()\n   const [inputValue, setInputValue] = React.useState(value ? getLabel(value) : \"\")\n   const [timer, setTimer] = React.useState<any>(null)\n   const [loading, setLoading] = React.useState(false)\n   const [focused, setFocused] = React.useState(false)\n   const [open, setOpen] = React.useState(false)\n   const menuRef = React.useRef<any>(null)\n\n   useEffect(() => {\n      if (!inputValue) {\n         setInputValue(value ? getLabel(value) : \"\")\n      }\n   }, [value])\n\n   getLabel ??= (option: any) => option.toString();\n   multiple ??= false;\n\n   let startIcons = []\n   if (inputProps.startIcon) {\n      startIcons.push(inputProps.startIcon)\n   }\n\n   if (!!value && multiple && Array.isArray(value)) {\n      value.map((v: any, index: number) => {\n         startIcons.push(<Chip\n            key={index}\n            size=\"small\"\n            label={getLabel!(v)}\n            variant={\"fill\"}\n            color=\"surface\"\n            endIcon={<IconButton\n               size={20}\n               variant={\"text\"}\n               color=\"surface\"\n               onClick={(e) => {\n                  e.stopPropagation();\n                  let newValue = Array.isArray(value) ? [...value] : []\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\n                  onChange && onChange(newValue)\n               }}\n            >\n               <Close />\n            </IconButton>}\n         />)\n      })\n   }\n\n   let endIcons = []\n   if (inputProps.endIcon) {\n      endIcons.push(inputProps.endIcon)\n   }\n   if (loading) {\n      endIcons.push(<CircleProgress\n         key=\"auto-complete-loading-icon\"\n         size=\"small\"\n      />)\n   } else if (!!value && !multiple) {\n      endIcons.unshift(<IconButton\n         key=\"auto-complete-clear-button\"\n         variant={\"text\"}\n         color=\"surface\"\n         onClick={(e) => {\n            e.stopPropagation();\n            onChange && onChange(null)\n            setInputValue(\"\")\n         }}\n      >\n         <Close />\n      </IconButton>)\n   }\n\n   const loadOptions = async () => {\n      setLoading(true)\n      setOpen(false)\n      let results = []\n      if (typeof options === 'function') {\n         results = await options(inputValue)\n      } else {\n         results = options.filter(option => getLabel!(option).toString().toLowerCase().includes(inputValue.toLowerCase()))\n      }\n      if (!multiple && inputValue) {\n         const find = results.find(option => getLabel!(option).toString().toLowerCase() === inputValue.toLowerCase())\n         onChange && onChange(find || null)\n      }\n      setOptions(results)\n      setOpen(true)\n      setLoading(false)\n   }\n\n   useEffect(() => {\n      if (focused) {\n         clearTimeout(timer)\n         setTimer(setTimeout(() => {\n            loadOptions()\n         }, 300))\n      } else {\n         setOpen(false)\n      }\n   }, [focused, inputValue])\n\n\n   return (\n      <>\n         <Input\n            {...inputProps as any}\n            ref={menuRef}\n            slotProps={{\n               rootContainer: {\n                  flexWrap: 'wrap',\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\n               },\n               input: {\n                  width: multiple ? 'initial' : '100%',\n                  flex: 1,\n                  minWidth: 20,\n               }\n            }}\n            startIcon={startIcons.length ? startIcons : undefined}\n            endIcon={endIcons}\n            value={inputValue}\n            onFocus={() => setFocused(true)}\n            onKeyDown={(e) => {\n               if (inputProps?.onKeyDown) {\n                  inputProps.onKeyDown(e)\n               }\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\n                  let newValue = [...value]\n                  newValue.pop()\n                  onChange && onChange(newValue)\n               }\n            }}\n            onChange={(e) => {\n               const value = e.target.value;\n               setInputValue(value)\n            }}\n         />\n         <Menu\n            target={open ? menuRef.current : null}\n            onClickOutside={() => {\n               setFocused(false)\n            }}\n            slotProps={{\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\n            }}\n         >\n            <List\n               maxHeight={400}\n               overflow={\"auto\"}\n            >\n               {_options?.map((option, index) => (\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\n                     onClick: () => {\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }\n                  })}</div> : <ListItem\n                     key={index}\n                     onClick={() => {\n\n                        if (multiple) {\n                           let newValue = Array.isArray(value) ? [...value] : []\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\n                           if (!has) {\n                              newValue.push(option)\n                           } else {\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\n                           }\n                           onChange && onChange(newValue)\n                        } else {\n                           setFocused(false)\n                           onChange && onChange(option)\n                           setOpen(false)\n                           setInputValue(getLabel!(option))\n                           setOptions([])\n                        }\n                     }}\n                  >\n                     {getLabel!(option)}\n                  </ListItem>\n               ))}\n            </List>\n         </Menu>\n      </>\n   )\n}\n\nexport default Autocomplete\n"],"names":[],"mappings":";;;;;;;;;;;;;AAoDA;AAAsB;;;AAGnB;AACA;AACA;AACA;;;;AAKM;;AAEN;AAEA;;;AAIA;AACG;;AAGH;;;;AAce;;AAEA;;AAMZ;;;AAIH;AACG;;;AAGA;;AAII;AACJ;;AAMM;;;;AAQT;;;;AAIG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAUA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}

package/Avatar/index.cjs

@@ -28,13 +28,13 @@ const Avatar = React.forwardRef((_a, ref) => {
                 display: "inline-flex",
                 justifyContent: "center",
                 alignItems: "center",
-                bgcolor: "background.secondary",
+                bgcolor: "surface.light",
                 radius: size,
                 fontSize: (size / 3) * 2,
                 width: size,
                 height: size,
                 userSelect: "none",
-                color: "text.primary",
+                color: "surface.contrast",
                 '& svg': {
                     fontSize: (size / 3) * 2,
                     opacity: .6

package/Avatar/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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: \"background.secondary\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"text.primary\",\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.cjs","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;;"}

package/Avatar/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
 import { SkeletonProps } from '../Skeleton/index.js';
 
@@ -9,7 +9,7 @@ type AvatarProps<T extends TagComponentType = "img"> = TagProps<T> & {
         skeleton?: Omit<SkeletonProps, "height" | "width" | "loading" | "children">;
     };
 };
-declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps<TagComponentType>, "ref"> & React.RefAttributes<unknown>>;
+declare const Avatar: React__default.ForwardRefExoticComponent<Omit<AvatarProps<TagComponentType>, "ref"> & React__default.RefAttributes<unknown>>;
 
 export { Avatar as default };
 export type { AvatarProps };

package/Avatar/index.js

@@ -26,13 +26,13 @@ const Avatar = React.forwardRef((_a, ref) => {
                 display: "inline-flex",
                 justifyContent: "center",
                 alignItems: "center",
-                bgcolor: "background.secondary",
+                bgcolor: "surface.light",
                 radius: size,
                 fontSize: (size / 3) * 2,
                 width: size,
                 height: size,
                 userSelect: "none",
-                color: "text.primary",
+                color: "surface.contrast",
                 '& svg': {
                     fontSize: (size / 3) * 2,
                     opacity: .6

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: \"background.secondary\",\n                    radius: size,\n                    fontSize: (size / 3) * 2,\n                    width: size,\n                    height: size,\n                    userSelect: \"none\",\n                    color: \"text.primary\",\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: \"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;;"}

package/AvatarBox/index.cjs

@@ -0,0 +1,19 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var index = require('../Avatar/index.cjs');
+var index$1 = require('../Text/index.cjs');
+
+const AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }, ref) => {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'avatar-box', sxr: {
+            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 }))] })] })));
+});
+
+module.exports = AvatarBox;
+//# sourceMappingURL=index.cjs.map

package/AvatarBox/index.cjs.map

@@ -0,0 +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;;"}

package/AvatarBox/index.d.ts

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { TagProps } from '@xanui/core';
+import { AvatarProps } from '../Avatar/index.js';
+
+type AvatarBoxProps = {
+    src?: string;
+    title?: string;
+    subtitle?: string;
+    slotProps?: {
+        root?: TagProps;
+        avatar?: Omit<AvatarProps, "src">;
+        title?: TagProps;
+        subtitle?: TagProps;
+    };
+};
+declare const AvatarBox: React__default.ForwardRefExoticComponent<AvatarBoxProps & React__default.RefAttributes<any>>;
+
+export { AvatarBox as default };
+export type { AvatarBoxProps };

package/AvatarBox/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { Tag } from '@xanui/core';
+import Avatar from '../Avatar/index.js';
+import Text from '../Text/index.js';
+
+const AvatarBox = React.forwardRef(({ src, title, subtitle, slotProps }, ref) => {
+    return (jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'avatar-box', sxr: {
+            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 }))] })] })));
+});
+
+export { AvatarBox as default };
+//# sourceMappingURL=index.js.map

package/AvatarBox/index.js.map

@@ -0,0 +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;;"}

package/AvatarPicker/index.cjs

@@ -0,0 +1,80 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var CloseOutlined = require('@xanui/icons/CloseOutlined');
+var CameraAltOutlined = require('@xanui/icons/CameraAltOutlined');
+var index$1 = require('../Avatar/index.cjs');
+var index = require('../Badge/index.cjs');
+var index$4 = require('../IconButton/index.cjs');
+var index$2 = require('../Menu/index.cjs');
+var index$3 = require('../Text/index.cjs');
+var React = require('react');
+var core = require('@xanui/core');
+
+const AvatarPicker = React.forwardRef((_a, ref) => {
+    var _b;
+    var { value, maxSize, changeIcon, onChange, onDelete, onSelect, loading, bgcolor } = _a, rest = tslib.__rest(_a, ["value", "maxSize", "changeIcon", "onChange", "onDelete", "onSelect", "loading", "bgcolor"]);
+    let [_c] = core.useInterface("AvaterPicker", rest, {}), { defaultPreview, avatarSize, slotProps } = _c, props = tslib.__rest(_c, ["defaultPreview", "avatarSize", "slotProps"]);
+    const _p = {};
+    if (defaultPreview)
+        _p.defaultPreview = defaultPreview;
+    if (avatarSize)
+        _p.avatarSize = avatarSize;
+    const bp = core.useBreakpointProps(_p);
+    maxSize = maxSize || (1024 * 2); // default 2MB
+    defaultPreview = bp.defaultPreview;
+    avatarSize = (_b = bp.avatarSize) !== null && _b !== void 0 ? _b : 100;
+    const [preview, setPreview] = React.useState();
+    const [target, setTarget] = React.useState();
+    React.useEffect(() => {
+        if (!value) {
+            setPreview(undefined);
+            return;
+        }
+        if (typeof value === 'string') {
+            setPreview(value);
+            return;
+        }
+        const objectUrl = URL.createObjectURL(value);
+        setPreview(objectUrl);
+        return () => URL.revokeObjectURL(objectUrl);
+    }, [value, onChange]);
+    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) => {
+                        if (value) {
+                            onDelete && onDelete(value);
+                            onChange && onChange(null);
+                            return;
+                        }
+                        if (target) {
+                            setTarget(undefined);
+                        }
+                        const input = document.createElement('input');
+                        input.type = 'file';
+                        input.accept = 'image/*';
+                        input.onchange = (e) => {
+                            const selectedFile = e.target.files[0];
+                            if (maxSize && selectedFile.size > maxSize * 1024) {
+                                setTarget(be.target);
+                                setTimeout(() => {
+                                    setTarget(undefined);
+                                }, 3000);
+                                return;
+                            }
+                            onSelect && onSelect(selectedFile);
+                            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: {
+                        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` }) }))] })) })));
+});
+
+module.exports = AvatarPicker;
+//# sourceMappingURL=index.cjs.map

package/AvatarPicker/index.cjs.map

@@ -0,0 +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;;"}

package/AvatarPicker/index.d.ts

@@ -0,0 +1,27 @@
+import { AvatarProps } from '../Avatar/index.js';
+import { BadgeProps } from '../Badge/index.js';
+import { MenuProps } from '../Menu/index.js';
+import React__default from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
+
+type AvataPickerValue = File | string | null;
+type AvatarPickerProps<T extends TagComponentType = "div"> = TagProps<T> & {
+    value?: AvataPickerValue;
+    defaultPreview?: string;
+    maxSize?: number;
+    changeIcon?: React__default.ReactNode;
+    loading?: boolean;
+    avatarSize?: useBreakpointPropsType<number>;
+    onChange?: (file: AvataPickerValue) => void;
+    onDelete?: (file: File | string) => void;
+    onSelect?: (file: File | string) => void;
+    slotProps?: {
+        Avatar?: Omit<AvatarProps, "src">;
+        badge?: Omit<BadgeProps, "placement" | "content">;
+        menu?: Omit<MenuProps, "target" | "onClickOutside">;
+    };
+};
+declare const AvatarPicker: React__default.ForwardRefExoticComponent<Omit<AvatarPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "cite" | "data" | "form" | "label" | "pattern" | "span" | "summary" | "slot" | "style" | "title" | "div" | "filter" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "big" | "text" | "button" | "p" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | "code" | "col" | "colgroup" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "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" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "script" | "section" | "select" | "source" | "strong" | "sub" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "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

@@ -0,0 +1,78 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import CloseOutlined from '@xanui/icons/CloseOutlined';
+import CameraAltOutlined from '@xanui/icons/CameraAltOutlined';
+import Avatar from '../Avatar/index.js';
+import Badge from '../Badge/index.js';
+import IconButton from '../IconButton/index.js';
+import Menu from '../Menu/index.js';
+import Text from '../Text/index.js';
+import React from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+
+const AvatarPicker = React.forwardRef((_a, ref) => {
+    var _b;
+    var { value, maxSize, changeIcon, onChange, onDelete, onSelect, loading, bgcolor } = _a, rest = __rest(_a, ["value", "maxSize", "changeIcon", "onChange", "onDelete", "onSelect", "loading", "bgcolor"]);
+    let [_c] = useInterface("AvaterPicker", rest, {}), { defaultPreview, avatarSize, slotProps } = _c, props = __rest(_c, ["defaultPreview", "avatarSize", "slotProps"]);
+    const _p = {};
+    if (defaultPreview)
+        _p.defaultPreview = defaultPreview;
+    if (avatarSize)
+        _p.avatarSize = avatarSize;
+    const bp = useBreakpointProps(_p);
+    maxSize = maxSize || (1024 * 2); // default 2MB
+    defaultPreview = bp.defaultPreview;
+    avatarSize = (_b = bp.avatarSize) !== null && _b !== void 0 ? _b : 100;
+    const [preview, setPreview] = React.useState();
+    const [target, setTarget] = React.useState();
+    React.useEffect(() => {
+        if (!value) {
+            setPreview(undefined);
+            return;
+        }
+        if (typeof value === 'string') {
+            setPreview(value);
+            return;
+        }
+        const objectUrl = URL.createObjectURL(value);
+        setPreview(objectUrl);
+        return () => URL.revokeObjectURL(objectUrl);
+    }, [value, onChange]);
+    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) => {
+                        if (value) {
+                            onDelete && onDelete(value);
+                            onChange && onChange(null);
+                            return;
+                        }
+                        if (target) {
+                            setTarget(undefined);
+                        }
+                        const input = document.createElement('input');
+                        input.type = 'file';
+                        input.accept = 'image/*';
+                        input.onchange = (e) => {
+                            const selectedFile = e.target.files[0];
+                            if (maxSize && selectedFile.size > maxSize * 1024) {
+                                setTarget(be.target);
+                                setTimeout(() => {
+                                    setTarget(undefined);
+                                }, 3000);
+                                return;
+                            }
+                            onSelect && onSelect(selectedFile);
+                            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: {
+                        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` }) }))] })) })));
+});
+
+export { AvatarPicker as default };
+//# sourceMappingURL=index.js.map

package/AvatarPicker/index.js.map

@@ -0,0 +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;;"}

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.primary), _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.main), _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.primary,\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.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;;"}

package/Badge/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, TransitionProps } from '@xanui/core';
 
 type BadgeProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "baseClass" | "content"> & {
@@ -13,11 +13,11 @@ type BadgeProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "baseCla
         content?: Omit<TagProps<"span">, "children">;
     };
     refs?: {
-        content?: React.Ref<any>;
-        transition?: React.Ref<any>;
+        content?: React__default.Ref<any>;
+        transition?: React__default.Ref<any>;
     };
 };
-declare const Badge: React.ForwardRefExoticComponent<Omit<BadgeProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Badge: React__default.ForwardRefExoticComponent<Omit<BadgeProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Badge as default };
 export type { BadgeProps };

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.primary), _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.main), _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.primary,\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.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;;"}