@xanui/ui 1.2.3 → 1.2.5

package/Autocomplete/index.cjs

@@ -59,6 +59,7 @@ const Autocomplete = (_a) => {
     }
     const loadOptions = async () => {
         setLoading(true);
+        setOpen(false);
         let results = [];
         if (typeof options === 'function') {
             results = await options(inputValue);

package/Autocomplete/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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      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         />\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;;;AAGG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAWA;AACF;;;AAUc;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;;AAIR;;AAKQ;;;AAGG;;;;;AAIH;;;;AAGA;;AAEA;;;AAGN;AASrB;;"}
+{"version":3,"file":"index.cjs","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;;"}

package/Autocomplete/index.js

@@ -57,6 +57,7 @@ const Autocomplete = (_a) => {
     }
     const loadOptions = async () => {
         setLoading(true);
+        setOpen(false);
         let results = [];
         if (typeof options === 'function') {
             results = await options(inputValue);

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      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         />\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;;;AAGG;AACG;;;AAEA;;AAEH;;AAEG;;;;;AAKN;;;;AAKM;AACG;AACH;;;;;AAIN;AAGA;;AAUY;;AAEG;AACA;AACF;AACH;;AAOK;;;AAGA;;AAEA;;AAEN;AAEG;;;;;AAWA;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, \"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;;"}

package/Button/index.cjs

@@ -17,7 +17,7 @@ const Button = React.forwardRef((_a, ref) => {
         color: "brand",
         corner: "rounded",
         size: "medium"
-    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
+    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled } = _d, _props = tslib.__rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps", "disabled"]);
     const _p = {};
     if (startIcon)
         _p.startIcon = startIcon;
@@ -77,7 +77,7 @@ const Button = React.forwardRef((_a, ref) => {
     if (skeleton) {
         return jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: _size.height, animation: "wave", sx: Object.assign(Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), _size), cornerCss) }));
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = disabled !== null && disabled !== void 0 ? disabled : loading) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
                     position: "absolute",
                     top: 0,
                     left: 0,

package/Button/index.cjs.map

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

package/Button/index.js

@@ -15,7 +15,7 @@ const Button = React.forwardRef((_a, ref) => {
         color: "brand",
         corner: "rounded",
         size: "medium"
-    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps"]);
+    }), { variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, disabled } = _d, _props = __rest(_d, ["variant", "startIcon", "endIcon", "color", "corner", "size", "loading", "direction", "slotProps", "disabled"]);
     const _p = {};
     if (startIcon)
         _p.startIcon = startIcon;
@@ -75,7 +75,7 @@ const Button = React.forwardRef((_a, ref) => {
     if (skeleton) {
         return jsx(Skeleton, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton, { height: _size.height, animation: "wave", sx: Object.assign(Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.skeleton) === null || _b === void 0 ? void 0 : _b.sx), _size), cornerCss) }));
     }
-    return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
+    return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_c = disabled !== null && disabled !== void 0 ? disabled : loading) !== null && _c !== void 0 ? _c : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
                     position: "absolute",
                     top: 0,
                     left: 0,

package/Button/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xanui/ui",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Xanui - A React Component Library",
   "private": false,
   "dependencies": {