@xanui/ui 1.1.37 → 1.1.40

package/Autocomplete/index.cjs

@@ -0,0 +1,136 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$3 = require('../Input/index.cjs');
+var index$4 = require('../Menu/index.cjs');
+var index$5 = require('../List/index.cjs');
+var index$6 = require('../ListItem/index.cjs');
+var index = require('../Chip/index.cjs');
+var index$1 = require('../IconButton/index.cjs');
+var Close = require('@xanui/icons/Close');
+var index$2 = require('../CircleProgress/index.cjs');
+
+const Autocomplete = (_a) => {
+    var { value, onChange, renderOption, options, getLabel, multiple } = _a, inputProps = tslib.__rest(_a, ["value", "onChange", "renderOption", "options", "getLabel", "multiple"]);
+    const [_options, setOptions] = React.useState();
+    const [inputValue, setInputValue] = React.useState("");
+    const [timer, setTimer] = React.useState(null);
+    const [loading, setLoading] = React.useState(false);
+    const [open, setOpen] = React.useState(false);
+    const menuRef = React.useRef(null);
+    getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
+    multiple !== null && multiple !== void 0 ? multiple : (multiple = false);
+    let startIcons = [
+        inputProps.startIcon
+    ];
+    if (!!value && multiple && Array.isArray(value)) {
+        value.map((v, index$2) => {
+            startIcons.push(jsxRuntime.jsx(index, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsxRuntime.jsx(index$1, { size: 20, variant: "text", color: "default", onClick: (e) => {
+                        e.stopPropagation();
+                        let newValue = Array.isArray(value) ? [...value] : [];
+                        newValue = newValue.filter((val) => getLabel(val) !== getLabel(v));
+                        onChange && onChange(newValue);
+                    }, children: jsxRuntime.jsx(Close, {}) }) }, index$2));
+        });
+    }
+    let endIcons = [
+        inputProps.endIcon
+    ];
+    if (loading) {
+        endIcons.push(jsxRuntime.jsx(index$2, { size: "small" }, "auto-complete-loading-icon"));
+    }
+    else if (!!value && !multiple) {
+        endIcons.push(jsxRuntime.jsx(index$1, { variant: "text", color: "default", onClick: (e) => {
+                e.stopPropagation();
+                onChange && onChange(undefined);
+                setInputValue("");
+            }, children: jsxRuntime.jsx(Close, {}) }, "auto-complete-clear-button"));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$3, Object.assign({}, inputProps, { ref: menuRef, slotProps: {
+                    rootContainer: Object.assign({ flexWrap: 'wrap' }, (multiple ? { height: "auto", gap: .5 } : {})),
+                    input: {
+                        width: multiple ? 'auto' : '100%',
+                        flex: 1,
+                        minWidth: 20,
+                    }
+                }, startIcon: startIcons, endIcon: endIcons, value: inputValue, onKeyDown: (e) => {
+                    if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) {
+                        inputProps.onKeyDown(e);
+                    }
+                    if (multiple && e.key === 'Backspace' && inputValue === "" && Array.isArray(value) && value.length > 0) {
+                        let newValue = [...value];
+                        newValue.pop();
+                        onChange && onChange(newValue);
+                    }
+                }, onChange: (e) => {
+                    const value = e.target.value;
+                    setInputValue(value);
+                    if (!value) {
+                        setOptions([]);
+                        setOpen(false);
+                        return;
+                    }
+                    setOpen(true);
+                    clearTimeout(timer);
+                    setTimer(setTimeout(async () => {
+                        if (typeof options === 'function') {
+                            setLoading(true);
+                            const result = await options(value);
+                            setOptions(result);
+                            setLoading(false);
+                        }
+                        else {
+                            const filtered = options.filter(option => getLabel(option).toLowerCase().includes(value.toLowerCase()));
+                            setOptions(filtered);
+                        }
+                    }, 300));
+                } })), jsxRuntime.jsx(index$4, { target: open ? menuRef.current : null, onClickOutside: () => {
+                    setOptions([]);
+                    setInputValue("");
+                }, slotProps: {
+                    content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }
+                }, children: jsxRuntime.jsx(index$5, { maxHeight: 400, overflow: "auto", children: _options === null || _options === void 0 ? void 0 : _options.map((option, index) => (renderOption ? jsxRuntime.jsx("div", { children: renderOption(option, {
+                            onClick: () => {
+                                if (multiple) {
+                                    let newValue = Array.isArray(value) ? [...value] : [];
+                                    const has = newValue.find((v) => getLabel(v) === getLabel(option));
+                                    if (!has) {
+                                        newValue.push(option);
+                                    }
+                                    else {
+                                        newValue = newValue.filter((v) => getLabel(v) !== getLabel(option));
+                                    }
+                                    onChange && onChange(newValue);
+                                }
+                                else {
+                                    onChange && onChange(option);
+                                    setOpen(false);
+                                    setInputValue(getLabel(option));
+                                    setOptions([]);
+                                }
+                            }
+                        }) }, "auto-complete" + index + getLabel(option)) : jsxRuntime.jsx(index$6, { onClick: () => {
+                            if (multiple) {
+                                let newValue = Array.isArray(value) ? [...value] : [];
+                                const has = newValue.find((v) => getLabel(v) === getLabel(option));
+                                if (!has) {
+                                    newValue.push(option);
+                                }
+                                else {
+                                    newValue = newValue.filter((v) => getLabel(v) !== getLabel(option));
+                                }
+                                onChange && onChange(newValue);
+                            }
+                            else {
+                                onChange && onChange(option);
+                                setOpen(false);
+                                setInputValue(getLabel(option));
+                                setOptions([]);
+                            }
+                        }, children: getLabel(option) }, index))) }) })] }));
+};
+
+module.exports = Autocomplete;
+//# sourceMappingURL=index.cjs.map

package/Autocomplete/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react'\r\nimport Input from '../Input'\r\nimport Menu from '../Menu'\r\nimport List from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\nimport Chip from '../Chip';\r\nimport IconButton from '../IconButton';\r\nimport Close from '@xanui/icons/Close';\r\nimport CircleProgress from '../CircleProgress';\r\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\r\n\r\nexport type AutocompleteProps = {\r\n\r\n   options: any[] | ((text: string) => Promise<any[]>)\r\n   getLabel: (option: any) => string;\r\n   onChange?: (value: any) => void;\r\n   value?: any;\r\n   multiple?: boolean;\r\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\r\n\r\n   // input props customization\r\n   name?: string;\r\n   placeholder?: string;\r\n   readOnly?: boolean;\r\n   autoFocus?: boolean;\r\n   autoComplete?: string;\r\n   label?: useBreakpointPropsType<string>;\r\n\r\n   onFocus?: (e: React.FocusEvent<any>) => void;\r\n   onBlur?: (e: React.FocusEvent<any>) => void;\r\n   onInput?: (e: React.FormEvent<any>) => void;\r\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n   rows?: useBreakpointPropsType<number>;\r\n   minRows?: useBreakpointPropsType<number>;\r\n   maxRows?: useBreakpointPropsType<number>;\r\n   fullWidth?: boolean;\r\n\r\n   startIcon?: useBreakpointPropsType<ReactElement>;\r\n   endIcon?: useBreakpointPropsType<ReactElement>;\r\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n   focused?: boolean;\r\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n   error?: boolean;\r\n   helperText?: useBreakpointPropsType<string>;\r\n\r\n}\r\n\r\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\r\n   const [_options, setOptions] = React.useState<any[]>()\r\n   const [inputValue, setInputValue] = React.useState(\"\")\r\n   const [timer, setTimer] = React.useState<any>(null)\r\n   const [loading, setLoading] = React.useState(false)\r\n   const [open, setOpen] = React.useState(false)\r\n   const menuRef = React.useRef<any>(null)\r\n\r\n   getLabel ??= (option: any) => option.toString();\r\n   multiple ??= false;\r\n\r\n   let startIcons = [\r\n      inputProps.startIcon\r\n   ]\r\n\r\n   if (!!value && multiple && Array.isArray(value)) {\r\n      value.map((v: any, index: number) => {\r\n         startIcons.push(<Chip\r\n            key={index}\r\n            size=\"small\"\r\n            label={getLabel!(v)}\r\n            variant={\"fill\"}\r\n            color=\"default\"\r\n            endIcon={<IconButton\r\n               size={20}\r\n               variant={\"text\"}\r\n               color=\"default\"\r\n               onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  let newValue = Array.isArray(value) ? [...value] : []\r\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\r\n                  onChange && onChange(newValue)\r\n               }}\r\n            >\r\n               <Close />\r\n            </IconButton>}\r\n         />)\r\n      })\r\n   }\r\n\r\n   let endIcons = [\r\n      inputProps.endIcon\r\n   ]\r\n\r\n   if (loading) {\r\n      endIcons.push(<CircleProgress\r\n         key=\"auto-complete-loading-icon\"\r\n         size=\"small\"\r\n      />)\r\n   } else if (!!value && !multiple) {\r\n      endIcons.push(<IconButton\r\n         key=\"auto-complete-clear-button\"\r\n         variant={\"text\"}\r\n         color=\"default\"\r\n         onClick={(e) => {\r\n            e.stopPropagation();\r\n            onChange && onChange(undefined)\r\n            setInputValue(\"\")\r\n         }}\r\n      >\r\n         <Close />\r\n      </IconButton>)\r\n   }\r\n\r\n\r\n   return (\r\n      <>\r\n         <Input\r\n            {...inputProps as any}\r\n            ref={menuRef}\r\n            slotProps={{\r\n               rootContainer: {\r\n                  flexWrap: 'wrap',\r\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\r\n               },\r\n               input: {\r\n                  width: multiple ? 'auto' : '100%',\r\n                  flex: 1,\r\n                  minWidth: 20,\r\n               }\r\n            }}\r\n            startIcon={startIcons}\r\n            endIcon={endIcons}\r\n            value={inputValue}\r\n            onKeyDown={(e) => {\r\n               if (inputProps?.onKeyDown) {\r\n                  inputProps.onKeyDown(e)\r\n               }\r\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\r\n                  let newValue = [...value]\r\n                  newValue.pop()\r\n                  onChange && onChange(newValue)\r\n               }\r\n            }}\r\n            onChange={(e) => {\r\n               const value = e.target.value;\r\n               setInputValue(value)\r\n               if (!value) {\r\n                  setOptions([])\r\n                  setOpen(false)\r\n                  return;\r\n               }\r\n               setOpen(true)\r\n\r\n               clearTimeout(timer)\r\n               setTimer(setTimeout(async () => {\r\n                  if (typeof options === 'function') {\r\n                     setLoading(true)\r\n                     const result = await options(value)\r\n                     setOptions(result)\r\n                     setLoading(false)\r\n                  } else {\r\n                     const filtered = options.filter(option => getLabel!(option).toLowerCase().includes(value.toLowerCase()))\r\n                     setOptions(filtered)\r\n                  }\r\n               }, 300))\r\n            }}\r\n         />\r\n         <Menu\r\n            target={open ? menuRef.current : null}\r\n            onClickOutside={() => {\r\n               setOptions([])\r\n               setInputValue(\"\")\r\n            }}\r\n            slotProps={{\r\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\r\n            }}\r\n         >\r\n            <List\r\n               maxHeight={400}\r\n               overflow={\"auto\"}\r\n            >\r\n               {_options?.map((option, index) => (\r\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\r\n                     onClick: () => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }\r\n                  })}</div> : <ListItem\r\n                     key={index}\r\n                     onClick={() => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }}\r\n                  >\r\n                     {getLabel!(option)}\r\n                  </ListItem>\r\n               ))}\r\n            </List>\r\n         </Menu>\r\n      </>\r\n   )\r\n}\r\n\r\nexport default Autocomplete\r\n"],"names":["__rest","index","_jsx","Chip","IconButton","CircleProgress","_jsxs","_Fragment","Input","Menu","List","ListItem"],"mappings":"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"}

package/Autocomplete/index.js

@@ -1,19 +1,17 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index$3 = require('../Input/index.js');
-var index$4 = require('../Menu/index.js');
-var index$5 = require('../List/index.js');
-var index$6 = require('../ListItem/index.js');
-var index = require('../Chip/index.js');
-var index$1 = require('../IconButton/index.js');
-var Close = require('@xanui/icons/Close');
-var index$2 = require('../CircleProgress/index.js');
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React from 'react';
+import Input from '../Input/index.js';
+import Menu from '../Menu/index.js';
+import List from '../List/index.js';
+import ListItem from '../ListItem/index.js';
+import Chip from '../Chip/index.js';
+import IconButton from '../IconButton/index.js';
+import Close from '@xanui/icons/Close';
+import CircleProgress from '../CircleProgress/index.js';
 
 const Autocomplete = (_a) => {
-    var { value, onChange, renderOption, options, getLabel, multiple } = _a, inputProps = tslib.__rest(_a, ["value", "onChange", "renderOption", "options", "getLabel", "multiple"]);
+    var { value, onChange, renderOption, options, getLabel, multiple } = _a, inputProps = __rest(_a, ["value", "onChange", "renderOption", "options", "getLabel", "multiple"]);
     const [_options, setOptions] = React.useState();
     const [inputValue, setInputValue] = React.useState("");
     const [timer, setTimer] = React.useState(null);
@@ -26,29 +24,29 @@ const Autocomplete = (_a) => {
         inputProps.startIcon
     ];
     if (!!value && multiple && Array.isArray(value)) {
-        value.map((v, index$2) => {
-            startIcons.push(jsxRuntime.jsx(index, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsxRuntime.jsx(index$1, { size: 20, variant: "text", color: "default", onClick: (e) => {
+        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) => {
                         e.stopPropagation();
                         let newValue = Array.isArray(value) ? [...value] : [];
                         newValue = newValue.filter((val) => getLabel(val) !== getLabel(v));
                         onChange && onChange(newValue);
-                    }, children: jsxRuntime.jsx(Close, {}) }) }, index$2));
+                    }, children: jsx(Close, {}) }) }, index));
         });
     }
     let endIcons = [
         inputProps.endIcon
     ];
     if (loading) {
-        endIcons.push(jsxRuntime.jsx(index$2, { size: "small" }, "auto-complete-loading-icon"));
+        endIcons.push(jsx(CircleProgress, { size: "small" }, "auto-complete-loading-icon"));
     }
     else if (!!value && !multiple) {
-        endIcons.push(jsxRuntime.jsx(index$1, { variant: "text", color: "default", onClick: (e) => {
+        endIcons.push(jsx(IconButton, { variant: "text", color: "default", onClick: (e) => {
                 e.stopPropagation();
                 onChange && onChange(undefined);
                 setInputValue("");
-            }, children: jsxRuntime.jsx(Close, {}) }, "auto-complete-clear-button"));
+            }, children: jsx(Close, {}) }, "auto-complete-clear-button"));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$3, Object.assign({}, inputProps, { ref: menuRef, slotProps: {
+    return (jsxs(Fragment, { children: [jsx(Input, Object.assign({}, inputProps, { ref: menuRef, slotProps: {
                     rootContainer: Object.assign({ flexWrap: 'wrap' }, (multiple ? { height: "auto", gap: .5 } : {})),
                     input: {
                         width: multiple ? 'auto' : '100%',
@@ -86,12 +84,12 @@ const Autocomplete = (_a) => {
                             setOptions(filtered);
                         }
                     }, 300));
-                } })), jsxRuntime.jsx(index$4, { target: open ? menuRef.current : null, onClickOutside: () => {
+                } })), jsx(Menu, { target: open ? menuRef.current : null, onClickOutside: () => {
                     setOptions([]);
                     setInputValue("");
                 }, slotProps: {
                     content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }
-                }, children: jsxRuntime.jsx(index$5, { maxHeight: 400, overflow: "auto", children: _options === null || _options === void 0 ? void 0 : _options.map((option, index) => (renderOption ? jsxRuntime.jsx("div", { children: renderOption(option, {
+                }, children: jsx(List, { maxHeight: 400, overflow: "auto", children: _options === null || _options === void 0 ? void 0 : _options.map((option, index) => (renderOption ? jsx("div", { children: renderOption(option, {
                             onClick: () => {
                                 if (multiple) {
                                     let newValue = Array.isArray(value) ? [...value] : [];
@@ -111,7 +109,7 @@ const Autocomplete = (_a) => {
                                     setOptions([]);
                                 }
                             }
-                        }) }, "auto-complete" + index + getLabel(option)) : jsxRuntime.jsx(index$6, { onClick: () => {
+                        }) }, "auto-complete" + index + getLabel(option)) : jsx(ListItem, { onClick: () => {
                             if (multiple) {
                                 let newValue = Array.isArray(value) ? [...value] : [];
                                 const has = newValue.find((v) => getLabel(v) === getLabel(option));
@@ -132,5 +130,5 @@ const Autocomplete = (_a) => {
                         }, children: getLabel(option) }, index))) }) })] }));
 };
 
-module.exports = Autocomplete;
+export { Autocomplete as default };
 //# sourceMappingURL=index.js.map

package/Autocomplete/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react'\r\nimport Input from '../Input'\r\nimport Menu from '../Menu'\r\nimport List from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\nimport Chip from '../Chip';\r\nimport IconButton from '../IconButton';\r\nimport Close from '@xanui/icons/Close';\r\nimport CircleProgress from '../CircleProgress';\r\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\r\n\r\nexport type AutocompleteProps = {\r\n\r\n   options: any[] | ((text: string) => Promise<any[]>)\r\n   getLabel: (option: any) => string;\r\n   onChange?: (value: any) => void;\r\n   value?: any;\r\n   multiple?: boolean;\r\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\r\n\r\n   // input props customization\r\n   name?: string;\r\n   placeholder?: string;\r\n   readOnly?: boolean;\r\n   autoFocus?: boolean;\r\n   autoComplete?: string;\r\n   label?: useBreakpointPropsType<string>;\r\n\r\n   onFocus?: (e: React.FocusEvent<any>) => void;\r\n   onBlur?: (e: React.FocusEvent<any>) => void;\r\n   onInput?: (e: React.FormEvent<any>) => void;\r\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n   rows?: useBreakpointPropsType<number>;\r\n   minRows?: useBreakpointPropsType<number>;\r\n   maxRows?: useBreakpointPropsType<number>;\r\n   fullWidth?: boolean;\r\n\r\n   startIcon?: useBreakpointPropsType<ReactElement>;\r\n   endIcon?: useBreakpointPropsType<ReactElement>;\r\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n   focused?: boolean;\r\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n   error?: boolean;\r\n   helperText?: useBreakpointPropsType<string>;\r\n\r\n}\r\n\r\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\r\n   const [_options, setOptions] = React.useState<any[]>()\r\n   const [inputValue, setInputValue] = React.useState(\"\")\r\n   const [timer, setTimer] = React.useState<any>(null)\r\n   const [loading, setLoading] = React.useState(false)\r\n   const [open, setOpen] = React.useState(false)\r\n   const menuRef = React.useRef<any>(null)\r\n\r\n   getLabel ??= (option: any) => option.toString();\r\n   multiple ??= false;\r\n\r\n   let startIcons = [\r\n      inputProps.startIcon\r\n   ]\r\n\r\n   if (!!value && multiple && Array.isArray(value)) {\r\n      value.map((v: any, index: number) => {\r\n         startIcons.push(<Chip\r\n            key={index}\r\n            size=\"small\"\r\n            label={getLabel!(v)}\r\n            variant={\"fill\"}\r\n            color=\"default\"\r\n            endIcon={<IconButton\r\n               size={20}\r\n               variant={\"text\"}\r\n               color=\"default\"\r\n               onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  let newValue = Array.isArray(value) ? [...value] : []\r\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\r\n                  onChange && onChange(newValue)\r\n               }}\r\n            >\r\n               <Close />\r\n            </IconButton>}\r\n         />)\r\n      })\r\n   }\r\n\r\n   let endIcons = [\r\n      inputProps.endIcon\r\n   ]\r\n\r\n   if (loading) {\r\n      endIcons.push(<CircleProgress\r\n         key=\"auto-complete-loading-icon\"\r\n         size=\"small\"\r\n      />)\r\n   } else if (!!value && !multiple) {\r\n      endIcons.push(<IconButton\r\n         key=\"auto-complete-clear-button\"\r\n         variant={\"text\"}\r\n         color=\"default\"\r\n         onClick={(e) => {\r\n            e.stopPropagation();\r\n            onChange && onChange(undefined)\r\n            setInputValue(\"\")\r\n         }}\r\n      >\r\n         <Close />\r\n      </IconButton>)\r\n   }\r\n\r\n\r\n   return (\r\n      <>\r\n         <Input\r\n            {...inputProps as any}\r\n            ref={menuRef}\r\n            slotProps={{\r\n               rootContainer: {\r\n                  flexWrap: 'wrap',\r\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\r\n               },\r\n               input: {\r\n                  width: multiple ? 'auto' : '100%',\r\n                  flex: 1,\r\n                  minWidth: 20,\r\n               }\r\n            }}\r\n            startIcon={startIcons}\r\n            endIcon={endIcons}\r\n            value={inputValue}\r\n            onKeyDown={(e) => {\r\n               if (inputProps?.onKeyDown) {\r\n                  inputProps.onKeyDown(e)\r\n               }\r\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\r\n                  let newValue = [...value]\r\n                  newValue.pop()\r\n                  onChange && onChange(newValue)\r\n               }\r\n            }}\r\n            onChange={(e) => {\r\n               const value = e.target.value;\r\n               setInputValue(value)\r\n               if (!value) {\r\n                  setOptions([])\r\n                  setOpen(false)\r\n                  return;\r\n               }\r\n               setOpen(true)\r\n\r\n               clearTimeout(timer)\r\n               setTimer(setTimeout(async () => {\r\n                  if (typeof options === 'function') {\r\n                     setLoading(true)\r\n                     const result = await options(value)\r\n                     setOptions(result)\r\n                     setLoading(false)\r\n                  } else {\r\n                     const filtered = options.filter(option => getLabel!(option).toLowerCase().includes(value.toLowerCase()))\r\n                     setOptions(filtered)\r\n                  }\r\n               }, 300))\r\n            }}\r\n         />\r\n         <Menu\r\n            target={open ? menuRef.current : null}\r\n            onClickOutside={() => {\r\n               setOptions([])\r\n               setInputValue(\"\")\r\n            }}\r\n            slotProps={{\r\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\r\n            }}\r\n         >\r\n            <List\r\n               maxHeight={400}\r\n               overflow={\"auto\"}\r\n            >\r\n               {_options?.map((option, index) => (\r\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\r\n                     onClick: () => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }\r\n                  })}</div> : <ListItem\r\n                     key={index}\r\n                     onClick={() => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }}\r\n                  >\r\n                     {getLabel!(option)}\r\n                  </ListItem>\r\n               ))}\r\n            </List>\r\n         </Menu>\r\n      </>\r\n   )\r\n}\r\n\r\nexport default Autocomplete\r\n"],"names":["__rest","index","_jsx","Chip","IconButton","CircleProgress","_jsxs","_Fragment","Input","Menu","List","ListItem"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react'\r\nimport Input from '../Input'\r\nimport Menu from '../Menu'\r\nimport List from '../List';\r\nimport ListItem, { ListItemProps } from '../ListItem';\r\nimport Chip from '../Chip';\r\nimport IconButton from '../IconButton';\r\nimport Close from '@xanui/icons/Close';\r\nimport CircleProgress from '../CircleProgress';\r\nimport { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';\r\n\r\nexport type AutocompleteProps = {\r\n\r\n   options: any[] | ((text: string) => Promise<any[]>)\r\n   getLabel: (option: any) => string;\r\n   onChange?: (value: any) => void;\r\n   value?: any;\r\n   multiple?: boolean;\r\n   renderOption?: (option: any, props: any) => ReactElement<ListItemProps>\r\n\r\n   // input props customization\r\n   name?: string;\r\n   placeholder?: string;\r\n   readOnly?: boolean;\r\n   autoFocus?: boolean;\r\n   autoComplete?: string;\r\n   label?: useBreakpointPropsType<string>;\r\n\r\n   onFocus?: (e: React.FocusEvent<any>) => void;\r\n   onBlur?: (e: React.FocusEvent<any>) => void;\r\n   onInput?: (e: React.FormEvent<any>) => void;\r\n   onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n   onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n   rows?: useBreakpointPropsType<number>;\r\n   minRows?: useBreakpointPropsType<number>;\r\n   maxRows?: useBreakpointPropsType<number>;\r\n   fullWidth?: boolean;\r\n\r\n   startIcon?: useBreakpointPropsType<ReactElement>;\r\n   endIcon?: useBreakpointPropsType<ReactElement>;\r\n   iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n   focused?: boolean;\r\n   color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n   variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n   error?: boolean;\r\n   helperText?: useBreakpointPropsType<string>;\r\n\r\n}\r\n\r\nconst Autocomplete = ({ value, onChange, renderOption, options, getLabel, multiple, ...inputProps }: AutocompleteProps) => {\r\n   const [_options, setOptions] = React.useState<any[]>()\r\n   const [inputValue, setInputValue] = React.useState(\"\")\r\n   const [timer, setTimer] = React.useState<any>(null)\r\n   const [loading, setLoading] = React.useState(false)\r\n   const [open, setOpen] = React.useState(false)\r\n   const menuRef = React.useRef<any>(null)\r\n\r\n   getLabel ??= (option: any) => option.toString();\r\n   multiple ??= false;\r\n\r\n   let startIcons = [\r\n      inputProps.startIcon\r\n   ]\r\n\r\n   if (!!value && multiple && Array.isArray(value)) {\r\n      value.map((v: any, index: number) => {\r\n         startIcons.push(<Chip\r\n            key={index}\r\n            size=\"small\"\r\n            label={getLabel!(v)}\r\n            variant={\"fill\"}\r\n            color=\"default\"\r\n            endIcon={<IconButton\r\n               size={20}\r\n               variant={\"text\"}\r\n               color=\"default\"\r\n               onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  let newValue = Array.isArray(value) ? [...value] : []\r\n                  newValue = newValue.filter((val: any) => getLabel!(val) !== getLabel!(v))\r\n                  onChange && onChange(newValue)\r\n               }}\r\n            >\r\n               <Close />\r\n            </IconButton>}\r\n         />)\r\n      })\r\n   }\r\n\r\n   let endIcons = [\r\n      inputProps.endIcon\r\n   ]\r\n\r\n   if (loading) {\r\n      endIcons.push(<CircleProgress\r\n         key=\"auto-complete-loading-icon\"\r\n         size=\"small\"\r\n      />)\r\n   } else if (!!value && !multiple) {\r\n      endIcons.push(<IconButton\r\n         key=\"auto-complete-clear-button\"\r\n         variant={\"text\"}\r\n         color=\"default\"\r\n         onClick={(e) => {\r\n            e.stopPropagation();\r\n            onChange && onChange(undefined)\r\n            setInputValue(\"\")\r\n         }}\r\n      >\r\n         <Close />\r\n      </IconButton>)\r\n   }\r\n\r\n\r\n   return (\r\n      <>\r\n         <Input\r\n            {...inputProps as any}\r\n            ref={menuRef}\r\n            slotProps={{\r\n               rootContainer: {\r\n                  flexWrap: 'wrap',\r\n                  ...(multiple ? { height: \"auto\", gap: .5 } : {})\r\n               },\r\n               input: {\r\n                  width: multiple ? 'auto' : '100%',\r\n                  flex: 1,\r\n                  minWidth: 20,\r\n               }\r\n            }}\r\n            startIcon={startIcons}\r\n            endIcon={endIcons}\r\n            value={inputValue}\r\n            onKeyDown={(e) => {\r\n               if (inputProps?.onKeyDown) {\r\n                  inputProps.onKeyDown(e)\r\n               }\r\n               if (multiple && e.key === 'Backspace' && inputValue === \"\" && Array.isArray(value) && value.length > 0) {\r\n                  let newValue = [...value]\r\n                  newValue.pop()\r\n                  onChange && onChange(newValue)\r\n               }\r\n            }}\r\n            onChange={(e) => {\r\n               const value = e.target.value;\r\n               setInputValue(value)\r\n               if (!value) {\r\n                  setOptions([])\r\n                  setOpen(false)\r\n                  return;\r\n               }\r\n               setOpen(true)\r\n\r\n               clearTimeout(timer)\r\n               setTimer(setTimeout(async () => {\r\n                  if (typeof options === 'function') {\r\n                     setLoading(true)\r\n                     const result = await options(value)\r\n                     setOptions(result)\r\n                     setLoading(false)\r\n                  } else {\r\n                     const filtered = options.filter(option => getLabel!(option).toLowerCase().includes(value.toLowerCase()))\r\n                     setOptions(filtered)\r\n                  }\r\n               }, 300))\r\n            }}\r\n         />\r\n         <Menu\r\n            target={open ? menuRef.current : null}\r\n            onClickOutside={() => {\r\n               setOptions([])\r\n               setInputValue(\"\")\r\n            }}\r\n            slotProps={{\r\n               content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }\r\n            }}\r\n         >\r\n            <List\r\n               maxHeight={400}\r\n               overflow={\"auto\"}\r\n            >\r\n               {_options?.map((option, index) => (\r\n                  renderOption ? <div key={\"auto-complete\" + index + getLabel!(option)}>{renderOption(option, {\r\n                     onClick: () => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }\r\n                  })}</div> : <ListItem\r\n                     key={index}\r\n                     onClick={() => {\r\n                        if (multiple) {\r\n                           let newValue = Array.isArray(value) ? [...value] : []\r\n                           const has = newValue.find((v: any) => getLabel!(v) === getLabel!(option))\r\n                           if (!has) {\r\n                              newValue.push(option)\r\n                           } else {\r\n                              newValue = newValue.filter((v: any) => getLabel!(v) !== getLabel!(option))\r\n                           }\r\n                           onChange && onChange(newValue)\r\n                        } else {\r\n                           onChange && onChange(option)\r\n                           setOpen(false)\r\n                           setInputValue(getLabel!(option))\r\n                           setOptions([])\r\n                        }\r\n                     }}\r\n                  >\r\n                     {getLabel!(option)}\r\n                  </ListItem>\r\n               ))}\r\n            </List>\r\n         </Menu>\r\n      </>\r\n   )\r\n}\r\n\r\nexport default Autocomplete\r\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Avatar/index.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+var PersonIcon = require('@xanui/icons/Person');
+var index = require('../Skeleton/index.cjs');
+
+const Avatar = React.forwardRef((_a, ref) => {
+    var _b;
+    var { children, src, alt, skeleton } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "skeleton"]);
+    const [faild, setFaild] = React.useState();
+    let [_c] = core.useInterface("Avatar", rest, {}), { size, slotProps } = _c, props = tslib.__rest(_c, ["size", "slotProps"]);
+    size !== null && size !== void 0 ? size : (size = 36);
+    const _p = {};
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    size = p.size;
+    if (skeleton) {
+        return jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: size, width: size, animation: "wave", sx: Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), { borderRadius: size }) }));
+    }
+    if (faild === false || !src) {
+        let t = (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || (children || jsxRuntime.jsx(PersonIcon, {}));
+        return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "div", src: src }, props, { baseClass: 'avatar', sxr: {
+                display: "inline-flex",
+                justifyContent: "center",
+                alignItems: "center",
+                bgcolor: "background.secondary",
+                radius: size,
+                fontSize: (size / 3) * 2,
+                width: size,
+                height: size,
+                userSelect: "none",
+                color: "text.primary",
+                '& svg': {
+                    fontSize: (size / 3) * 2,
+                    opacity: .6
+                }
+            }, ref: ref, children: t })));
+    }
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "img", radius: size, width: size, height: size, objectFit: "cover" }, props, { alt: alt, src: src, baseClass: 'avatar', onError: (e) => {
+            setFaild(false);
+            props.onError && props.onError(e);
+        }, ref: ref })));
+});
+
+module.exports = Avatar;
+//# sourceMappingURL=index.cjs.map

package/Avatar/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport PersonIcon from '@xanui/icons/Person'\r\nimport Skeleton, { SkeletonProps } from '../Skeleton';\r\n\r\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    size?: useBreakpointPropsType<number>;\r\n    skeleton?: boolean;\r\n    slotProps?: {\r\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\r\n    }\r\n}\r\n\r\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\r\n    size ??= 36\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size\r\n\r\n    if (skeleton) {\r\n        return <Skeleton\r\n            {...slotProps?.skeleton}\r\n            height={size}\r\n            width={size}\r\n            animation={\"wave\"}\r\n            sx={{\r\n                ...slotProps?.skeleton?.sx,\r\n                borderRadius: size,\r\n            }}\r\n        />\r\n    }\r\n\r\n    if (faild === false || !src) {\r\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\r\n        return (\r\n            <Tag\r\n                component=\"div\"\r\n                src={src}\r\n                {...props}\r\n                baseClass='avatar'\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                    bgcolor: \"background.secondary\",\r\n                    radius: size,\r\n                    fontSize: (size / 3) * 2,\r\n                    width: size,\r\n                    height: size,\r\n                    userSelect: \"none\",\r\n                    color: \"text.primary\",\r\n                    '& svg': {\r\n                        fontSize: (size / 3) * 2,\r\n                        opacity: .6\r\n                    }\r\n                }}\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            component=\"img\"\r\n            radius={size}\r\n            width={size}\r\n            height={size}\r\n            objectFit=\"cover\"\r\n            {...props}\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='avatar'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                props.onError && props.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Avatar\r\n\r\n\r\n"],"names":["__rest","useState","useInterface","useBreakpointProps","_jsx","Skeleton","Tag"],"mappings":"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"}

package/Avatar/index.js

@@ -1,29 +1,27 @@
-'use strict';
-
-var tslib = require('tslib');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var core = require('@xanui/core');
-var PersonIcon = require('@xanui/icons/Person');
-var index = require('../Skeleton/index.js');
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import React, { useState } from 'react';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+import PersonIcon from '@xanui/icons/Person';
+import Skeleton from '../Skeleton/index.js';
 
 const Avatar = React.forwardRef((_a, ref) => {
     var _b;
-    var { children, src, alt, skeleton } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "skeleton"]);
-    const [faild, setFaild] = React.useState();
-    let [_c] = core.useInterface("Avatar", rest, {}), { size, slotProps } = _c, props = tslib.__rest(_c, ["size", "slotProps"]);
+    var { children, src, alt, skeleton } = _a, rest = __rest(_a, ["children", "src", "alt", "skeleton"]);
+    const [faild, setFaild] = useState();
+    let [_c] = useInterface("Avatar", rest, {}), { size, slotProps } = _c, props = __rest(_c, ["size", "slotProps"]);
     size !== null && size !== void 0 ? size : (size = 36);
     const _p = {};
     if (size)
         _p.size = size;
-    const p = core.useBreakpointProps(_p);
+    const p = useBreakpointProps(_p);
     size = p.size;
     if (skeleton) {
-        return jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: size, width: size, animation: "wave", sx: Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), { borderRadius: size }) }));
+        return jsx(Skeleton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: size, width: size, animation: "wave", sx: Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), { borderRadius: size }) }));
     }
     if (faild === false || !src) {
-        let t = (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || (children || jsxRuntime.jsx(PersonIcon, {}));
-        return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "div", src: src }, props, { baseClass: 'avatar', sxr: {
+        let t = (alt === null || alt === void 0 ? void 0 : alt.charAt(0).toUpperCase()) || (children || jsx(PersonIcon, {}));
+        return (jsx(Tag, Object.assign({ component: "div", src: src }, props, { baseClass: 'avatar', sxr: {
                 display: "inline-flex",
                 justifyContent: "center",
                 alignItems: "center",
@@ -40,11 +38,11 @@ const Avatar = React.forwardRef((_a, ref) => {
                 }
             }, ref: ref, children: t })));
     }
-    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "img", radius: size, width: size, height: size, objectFit: "cover" }, props, { alt: alt, src: src, baseClass: 'avatar', onError: (e) => {
+    return (jsx(Tag, Object.assign({ component: "img", radius: size, width: size, height: size, objectFit: "cover" }, props, { alt: alt, src: src, baseClass: 'avatar', onError: (e) => {
             setFaild(false);
             props.onError && props.onError(e);
         }, ref: ref })));
 });
 
-module.exports = Avatar;
+export { Avatar as default };
 //# sourceMappingURL=index.js.map

package/Avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport PersonIcon from '@xanui/icons/Person'\r\nimport Skeleton, { SkeletonProps } from '../Skeleton';\r\n\r\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    size?: useBreakpointPropsType<number>;\r\n    skeleton?: boolean;\r\n    slotProps?: {\r\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\r\n    }\r\n}\r\n\r\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\r\n    size ??= 36\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size\r\n\r\n    if (skeleton) {\r\n        return <Skeleton\r\n            {...slotProps?.skeleton}\r\n            height={size}\r\n            width={size}\r\n            animation={\"wave\"}\r\n            sx={{\r\n                ...slotProps?.skeleton?.sx,\r\n                borderRadius: size,\r\n            }}\r\n        />\r\n    }\r\n\r\n    if (faild === false || !src) {\r\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\r\n        return (\r\n            <Tag\r\n                component=\"div\"\r\n                src={src}\r\n                {...props}\r\n                baseClass='avatar'\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                    bgcolor: \"background.secondary\",\r\n                    radius: size,\r\n                    fontSize: (size / 3) * 2,\r\n                    width: size,\r\n                    height: size,\r\n                    userSelect: \"none\",\r\n                    color: \"text.primary\",\r\n                    '& svg': {\r\n                        fontSize: (size / 3) * 2,\r\n                        opacity: .6\r\n                    }\r\n                }}\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            component=\"img\"\r\n            radius={size}\r\n            width={size}\r\n            height={size}\r\n            objectFit=\"cover\"\r\n            {...props}\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='avatar'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                props.onError && props.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Avatar\r\n\r\n\r\n"],"names":["__rest","useState","useInterface","useBreakpointProps","_jsx","Skeleton","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Avatar/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\r\nimport PersonIcon from '@xanui/icons/Person'\r\nimport Skeleton, { SkeletonProps } from '../Skeleton';\r\n\r\nexport type AvatarProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    size?: useBreakpointPropsType<number>;\r\n    skeleton?: boolean;\r\n    slotProps?: {\r\n        skeleton?: Omit<SkeletonProps, \"height\" | \"width\" | \"loading\" | \"children\">\r\n    }\r\n}\r\n\r\nconst Avatar = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, skeleton, ...rest }: AvatarProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n    let [{ size, slotProps, ...props }] = useInterface<any>(\"Avatar\", rest, {})\r\n    size ??= 36\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    size = p.size\r\n\r\n    if (skeleton) {\r\n        return <Skeleton\r\n            {...slotProps?.skeleton}\r\n            height={size}\r\n            width={size}\r\n            animation={\"wave\"}\r\n            sx={{\r\n                ...slotProps?.skeleton?.sx,\r\n                borderRadius: size,\r\n            }}\r\n        />\r\n    }\r\n\r\n    if (faild === false || !src) {\r\n        let t = alt?.charAt(0).toUpperCase() || (children || <PersonIcon />)\r\n        return (\r\n            <Tag\r\n                component=\"div\"\r\n                src={src}\r\n                {...props}\r\n                baseClass='avatar'\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                    bgcolor: \"background.secondary\",\r\n                    radius: size,\r\n                    fontSize: (size / 3) * 2,\r\n                    width: size,\r\n                    height: size,\r\n                    userSelect: \"none\",\r\n                    color: \"text.primary\",\r\n                    '& svg': {\r\n                        fontSize: (size / 3) * 2,\r\n                        opacity: .6\r\n                    }\r\n                }}\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            component=\"img\"\r\n            radius={size}\r\n            width={size}\r\n            height={size}\r\n            objectFit=\"cover\"\r\n            {...props}\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='avatar'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                props.onError && props.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Avatar\r\n\r\n\r\n"],"names":["_jsx"],"mappings":"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"}

package/Badge/index.cjs

@@ -0,0 +1,109 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Badge = React.forwardRef((_a, ref) => {
+    var { children, content, refs } = _a, rest = tslib.__rest(_a, ["children", "content", "refs"]);
+    let [_b] = core.useInterface("Badge", rest, {}), { color, placement, visible, slotProps, disableTransition, disableSpace } = _b, props = tslib.__rest(_b, ["color", "placement", "visible", "slotProps", "disableTransition", "disableSpace"]);
+    color !== null && color !== void 0 ? color : (color = "danger");
+    visible !== null && visible !== void 0 ? visible : (visible = true);
+    placement !== null && placement !== void 0 ? placement : (placement = "right-top");
+    disableTransition !== null && disableTransition !== void 0 ? disableTransition : (disableTransition = false);
+    disableSpace !== null && disableSpace !== void 0 ? disableSpace : (disableSpace = false);
+    const _p = {};
+    _p.content = content;
+    _p.color = color;
+    _p.placement = placement;
+    _p.visible = visible;
+    _p.disableTransition = disableTransition !== null && disableTransition !== void 0 ? disableTransition : false;
+    const p = core.useBreakpointProps(_p);
+    content = p.content;
+    color = p.color;
+    placement = p.placement;
+    visible = p.visible;
+    disableTransition = p.disableTransition;
+    const isReactElement = React.isValidElement(content);
+    let template = core.useColorTemplate(color, "fill");
+    let _css = {
+        position: "absolute",
+    };
+    let translate = '';
+    switch (placement) {
+        case "right-top":
+            _css.top = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, -50%)";
+            }
+            break;
+        case "right-bottom":
+            _css.bottom = 0;
+            _css.right = 0;
+            if (!disableSpace) {
+                translate = "translate(50%, 50%)";
+            }
+            break;
+        case "left-top":
+            _css.top = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, -50%)";
+            }
+            break;
+        case "left-bottom":
+            _css.bottom = 0;
+            _css.left = 0;
+            if (!disableSpace) {
+                translate = "translate(-50%, 50%)";
+            }
+            break;
+    }
+    if (disableTransition) {
+        _css.transform = translate;
+    }
+    if (!isReactElement) {
+        _css.userSelect = "none";
+        _css.pointerEvents = "none";
+        _css.fontSize = "small";
+        _css.lineHeight = 1;
+        _css.fontWeight = 500;
+        _css.radius = 2;
+        if (typeof content === 'number') {
+            if (content > 99) {
+                content = "99+";
+            }
+        }
+        if (content !== undefined) {
+            _css.minWidth = 16;
+            _css.height = 16;
+            _css.p = .8;
+            _css.px = .4;
+        }
+        else {
+            _css.width = 8;
+            _css.height = 8;
+        }
+    }
+    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 }));
+    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: {
+                            opacity: 0,
+                            transform: `scale(0) ${translate}`.trim(),
+                        },
+                        to: {
+                            opacity: 1,
+                            transform: `scale(1) ${translate}`.trim(),
+                        },
+                    };
+                }, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: _badge }), children] })));
+});
+
+module.exports = Badge;
+//# sourceMappingURL=index.cjs.map