@xanui/ui 1.2.1 → 1.2.3

package/Autocomplete/index.cjs

@@ -23,7 +23,9 @@ const Autocomplete = (_a) => {
     const [open, setOpen] = React.useState(false);
     const menuRef = React.useRef(null);
     React.useEffect(() => {
-        setInputValue(value ? getLabel(value) : "");
+        if (!inputValue) {
+            setInputValue(value ? getLabel(value) : "");
+        }
     }, [value]);
     getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
     multiple !== null && multiple !== void 0 ? multiple : (multiple = false);

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      setInputValue(value ? getLabel(value) : \"\")\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;;;AAIG;AACH;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      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;;"}

package/Autocomplete/index.js

@@ -21,7 +21,9 @@ const Autocomplete = (_a) => {
     const [open, setOpen] = React.useState(false);
     const menuRef = React.useRef(null);
     useEffect(() => {
-        setInputValue(value ? getLabel(value) : "");
+        if (!inputValue) {
+            setInputValue(value ? getLabel(value) : "");
+        }
     }, [value]);
     getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
     multiple !== null && multiple !== void 0 ? multiple : (multiple = false);

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      setInputValue(value ? getLabel(value) : \"\")\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;;;AAIG;AACH;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      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;;"}

package/Input/index.cjs

@@ -110,14 +110,14 @@ const Input = React.forwardRef((_a, ref) => {
         }, children: [!!label && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
                     width: "100%",
                     overflow: "hidden",
-                }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
+                }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
                                 "-webkit-text-fill-color": "text.primary",
                                 "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }, "& textarea": {
                                 resize: "none"
                             } }), (!!startIcon && {
-                            "& :first-child:not(.xui-input)": {
+                            "& > :first-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",
@@ -126,7 +126,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 flex: "0 0 auto",
                             },
                         })), (!!endIcon && {
-                            "& :last-child:not(.xui-input)": {
+                            "& > :last-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",

package/Input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\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    onChange?: (e: React.ChangeEvent<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    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        inputRoot?: React.Ref<\"div\">;\n        label?: React.Ref<\"label\">;\n        rootContainer?: React.Ref<\"div\">;\n        // startIcon?: React.Ref<ReactElement>;\n        // endIcon?: React.Ref<ReactElement>;\n        // inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n        label?: Omit<LabelProps, \"children\">;\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n        label,\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    let _focus = focused || _focused\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n    useEffect(() => {\n        if (autoFocus) {\n            setTimeout(() => {\n                inputRef.current?.focus()\n            }, 100);\n        }\n    }, [autoFocus])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 46,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            width={fullWidth ? \"100%\" : \"auto\"}\n            {...rest}\n            ref={ref}\n            baseClass=\"input-wrapper\"\n            sxr={{\n                display: 'flex',\n                flexDirection: 'column',\n                gap: .5,\n            }}\n        >\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n            <Tag\n                {...slotProps?.inputRoot}\n                ref={refs?.inputRoot}\n                baseClass={'input-root'}\n                sxr={{\n                    width: \"100%\",\n                    overflow: \"hidden\",\n                }}\n            >\n                <Tag\n                    {...slotProps?.rootContainer}\n                    ref={refs?.rootContainer}\n                    baseClass='input-root-container'\n                    sxr={{\n                        width: \"100%\",\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                        flexWrap: \"nowrap\",\n                        transitionProperty: \"border, box-shadow, background\",\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                        border: variant === \"text\" ? 0 : \"1px solid\",\n                        borderColor: borderColor,\n                        borderRadius: 1,\n                        px: 1,\n                        // py: .5,\n                        ..._size,\n                        height: multiline ? \"auto\" : _size.height,\n                        minHeight: _size.height,\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n\n                        ...(!!startIcon && {\n                            \"& :first-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: \"flex\",\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        }),\n\n                        ...(!!endIcon && {\n                            \"& :last-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: 'flex',\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        })\n\n                    }}\n                    disabled={disabled || false}\n                >\n                    {startIcon}\n                    <Tag\n                        {...slotProps?.input}\n                        ref={inputMergeRef}\n                        baseClass='input'\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        onChange={onChange}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                        onKeyDown={onKeyDown}\n                        onKeyUp={onKeyUp}\n                        name={name}\n                        placeholder={placeholder}\n                        type={type}\n                        readOnly={readOnly}\n                        autoComplete={autoComplete}\n                    />\n                    {endIcon}\n                </Tag>\n                {helperText && <Tag\n                    {...slotProps?.helperText}\n                    ref={refs?.helperText}\n                    baseClass=\"input-helper-text\"\n                    sxr={{\n                        color: error ? \"danger.primary\" : \"text.primary\",\n                        fontSize: \"small\",\n                        lineHeight: \"text\",\n                        fontWeight: 'text',\n                        pl: .5,\n                    }}\n                >{helperText}</Tag>}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\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    onChange?: (e: React.ChangeEvent<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    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        inputRoot?: React.Ref<\"div\">;\n        label?: React.Ref<\"label\">;\n        rootContainer?: React.Ref<\"div\">;\n        // startIcon?: React.Ref<ReactElement>;\n        // endIcon?: React.Ref<ReactElement>;\n        // inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n        label?: Omit<LabelProps, \"children\">;\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n        label,\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    let _focus = focused || _focused\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n    useEffect(() => {\n        if (autoFocus) {\n            setTimeout(() => {\n                inputRef.current?.focus()\n            }, 100);\n        }\n    }, [autoFocus])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 46,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            width={fullWidth ? \"100%\" : \"auto\"}\n            {...rest}\n            ref={ref}\n            baseClass=\"input-wrapper\"\n            sxr={{\n                display: 'flex',\n                flexDirection: 'column',\n                gap: .5,\n            }}\n        >\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n            <Tag\n                {...slotProps?.inputRoot}\n                ref={refs?.inputRoot}\n                baseClass={'input-root'}\n                sxr={{\n                    width: \"100%\",\n                    overflow: \"hidden\",\n                }}\n            >\n                <Tag\n                    {...slotProps?.rootContainer}\n                    ref={refs?.rootContainer}\n                    baseClass='input-root-container'\n                    sxr={{\n                        width: \"100%\",\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                        flexWrap: \"nowrap\",\n                        transitionProperty: \"border, box-shadow, background\",\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                        border: variant === \"text\" ? 0 : \"1px solid\",\n                        borderColor: borderColor,\n                        borderRadius: 1,\n                        px: 1,\n                        // py: .5,\n                        ..._size,\n                        height: multiline ? \"auto\" : _size.height,\n                        minHeight: _size.height,\n                        \"& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n\n                        ...(!!startIcon && {\n                            \"& > :first-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: \"flex\",\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        }),\n\n                        ...(!!endIcon && {\n                            \"& > :last-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: 'flex',\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        })\n\n                    }}\n                    disabled={disabled || false}\n                >\n                    {startIcon}\n                    <Tag\n                        {...slotProps?.input}\n                        ref={inputMergeRef}\n                        baseClass='input'\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        onChange={onChange}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                        onKeyDown={onKeyDown}\n                        onKeyUp={onKeyUp}\n                        name={name}\n                        placeholder={placeholder}\n                        type={type}\n                        readOnly={readOnly}\n                        autoComplete={autoComplete}\n                    />\n                    {endIcon}\n                </Tag>\n                {helperText && <Tag\n                    {...slotProps?.helperText}\n                    ref={refs?.helperText}\n                    baseClass=\"input-helper-text\"\n                    sxr={{\n                        color: error ? \"danger.primary\" : \"text.primary\",\n                        fontSize: \"small\",\n                        lineHeight: \"text\",\n                        fontWeight: 'text',\n                        pl: .5,\n                    }}\n                >{helperText}</Tag>}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}

package/Input/index.js

@@ -108,14 +108,14 @@ const Input = React.forwardRef((_a, ref) => {
         }, children: [!!label && jsx(Label, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
                     width: "100%",
                     overflow: "hidden",
-                }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active": {
+                }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.soft.primary" : variant === "fill" ? "background.secondary" : "background.primary", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
                                 "-webkit-text-fill-color": "text.primary",
                                 "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }, "& textarea": {
                                 resize: "none"
                             } }), (!!startIcon && {
-                            "& :first-child:not(.xui-input)": {
+                            "& > :first-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",
@@ -124,7 +124,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 flex: "0 0 auto",
                             },
                         })), (!!endIcon && {
-                            "& :last-child:not(.xui-input)": {
+                            "& > :last-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\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    onChange?: (e: React.ChangeEvent<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    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        inputRoot?: React.Ref<\"div\">;\n        label?: React.Ref<\"label\">;\n        rootContainer?: React.Ref<\"div\">;\n        // startIcon?: React.Ref<ReactElement>;\n        // endIcon?: React.Ref<ReactElement>;\n        // inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n        label?: Omit<LabelProps, \"children\">;\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n        label,\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    let _focus = focused || _focused\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n    useEffect(() => {\n        if (autoFocus) {\n            setTimeout(() => {\n                inputRef.current?.focus()\n            }, 100);\n        }\n    }, [autoFocus])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 46,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            width={fullWidth ? \"100%\" : \"auto\"}\n            {...rest}\n            ref={ref}\n            baseClass=\"input-wrapper\"\n            sxr={{\n                display: 'flex',\n                flexDirection: 'column',\n                gap: .5,\n            }}\n        >\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n            <Tag\n                {...slotProps?.inputRoot}\n                ref={refs?.inputRoot}\n                baseClass={'input-root'}\n                sxr={{\n                    width: \"100%\",\n                    overflow: \"hidden\",\n                }}\n            >\n                <Tag\n                    {...slotProps?.rootContainer}\n                    ref={refs?.rootContainer}\n                    baseClass='input-root-container'\n                    sxr={{\n                        width: \"100%\",\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                        flexWrap: \"nowrap\",\n                        transitionProperty: \"border, box-shadow, background\",\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                        border: variant === \"text\" ? 0 : \"1px solid\",\n                        borderColor: borderColor,\n                        borderRadius: 1,\n                        px: 1,\n                        // py: .5,\n                        ..._size,\n                        height: multiline ? \"auto\" : _size.height,\n                        minHeight: _size.height,\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n\n                        ...(!!startIcon && {\n                            \"& :first-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: \"flex\",\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        }),\n\n                        ...(!!endIcon && {\n                            \"& :last-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: 'flex',\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        })\n\n                    }}\n                    disabled={disabled || false}\n                >\n                    {startIcon}\n                    <Tag\n                        {...slotProps?.input}\n                        ref={inputMergeRef}\n                        baseClass='input'\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        onChange={onChange}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                        onKeyDown={onKeyDown}\n                        onKeyUp={onKeyUp}\n                        name={name}\n                        placeholder={placeholder}\n                        type={type}\n                        readOnly={readOnly}\n                        autoComplete={autoComplete}\n                    />\n                    {endIcon}\n                </Tag>\n                {helperText && <Tag\n                    {...slotProps?.helperText}\n                    ref={refs?.helperText}\n                    baseClass=\"input-helper-text\"\n                    sxr={{\n                        color: error ? \"danger.primary\" : \"text.primary\",\n                        fontSize: \"small\",\n                        lineHeight: \"text\",\n                        fontWeight: 'text',\n                        pl: .5,\n                    }}\n                >{helperText}</Tag>}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\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    onChange?: (e: React.ChangeEvent<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    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        inputRoot?: React.Ref<\"div\">;\n        label?: React.Ref<\"label\">;\n        rootContainer?: React.Ref<\"div\">;\n        // startIcon?: React.Ref<ReactElement>;\n        // endIcon?: React.Ref<ReactElement>;\n        // inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n        label?: Omit<LabelProps, \"children\">;\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n        label,\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    let _focus = focused || _focused\n    const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);\n    const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\n\n    useEffect(() => {\n        if (autoFocus) {\n            setTimeout(() => {\n                inputRef.current?.focus()\n            }, 100);\n        }\n    }, [autoFocus])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 38,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 46,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    return (\n        <Tag\n            width={fullWidth ? \"100%\" : \"auto\"}\n            {...rest}\n            ref={ref}\n            baseClass=\"input-wrapper\"\n            sxr={{\n                display: 'flex',\n                flexDirection: 'column',\n                gap: .5,\n            }}\n        >\n            {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\n            <Tag\n                {...slotProps?.inputRoot}\n                ref={refs?.inputRoot}\n                baseClass={'input-root'}\n                sxr={{\n                    width: \"100%\",\n                    overflow: \"hidden\",\n                }}\n            >\n                <Tag\n                    {...slotProps?.rootContainer}\n                    ref={refs?.rootContainer}\n                    baseClass='input-root-container'\n                    sxr={{\n                        width: \"100%\",\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                        flexWrap: \"nowrap\",\n                        transitionProperty: \"border, box-shadow, background\",\n                        bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                        border: variant === \"text\" ? 0 : \"1px solid\",\n                        borderColor: borderColor,\n                        borderRadius: 1,\n                        px: 1,\n                        // py: .5,\n                        ..._size,\n                        height: multiline ? \"auto\" : _size.height,\n                        minHeight: _size.height,\n                        \"& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n\n                        ...(!!startIcon && {\n                            \"& > :first-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: \"flex\",\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        }),\n\n                        ...(!!endIcon && {\n                            \"& > :last-child:not(.xui-input)\": {\n                                height: \"100%\",\n                                alignItems: 'center',\n                                justifyContent: \"center\",\n                                display: 'flex',\n                                color: error ? \"danger.primary\" : \"text.secondary\",\n                                flex: \"0 0 auto\",\n                            },\n                        })\n\n                    }}\n                    disabled={disabled || false}\n                >\n                    {startIcon}\n                    <Tag\n                        {...slotProps?.input}\n                        ref={inputMergeRef}\n                        baseClass='input'\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        onChange={onChange}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                        onKeyDown={onKeyDown}\n                        onKeyUp={onKeyUp}\n                        name={name}\n                        placeholder={placeholder}\n                        type={type}\n                        readOnly={readOnly}\n                        autoComplete={autoComplete}\n                    />\n                    {endIcon}\n                </Tag>\n                {helperText && <Tag\n                    {...slotProps?.helperText}\n                    ref={refs?.helperText}\n                    baseClass=\"input-helper-text\"\n                    sxr={{\n                        color: error ? \"danger.primary\" : \"text.primary\",\n                        fontSize: \"small\",\n                        lineHeight: \"text\",\n                        fontWeight: 'text',\n                        pl: .5,\n                    }}\n                >{helperText}</Tag>}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}

package/List/ListContext.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ListContext.cjs","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\n\nexport type ListSize = \"small\" | \"medium\" | \"large\"\n\nexport interface ListContextValue {\n   size: ListSize\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext)\n"],"names":[],"mappings":";;;;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;;"}
+{"version":3,"file":"ListContext.cjs","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\nimport { UseColorTemplateColor, UseColorTemplateType } from \"@xanui/core\"\nimport { ListItemProps } from \"../ListItem\";\nexport type ListContextValue = {\n   listItem?: Omit<ListItemProps, \"children\">;\n   color: UseColorTemplateColor;\n   variant: UseColorTemplateType;\n   size: \"small\" | \"medium\" | \"large\"\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext) as ListContextValue\n"],"names":[],"mappings":";;;;AAAA;AAWO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;;"}

package/List/ListContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListContext.js","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\n\nexport type ListSize = \"small\" | \"medium\" | \"large\"\n\nexport interface ListContextValue {\n   size: ListSize\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext)\n"],"names":[],"mappings":";;AAAA;AASO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;"}
+{"version":3,"file":"ListContext.js","sources":["../../src/List/ListContext.ts"],"sourcesContent":["// ListContext.ts\nimport React from \"react\"\nimport { UseColorTemplateColor, UseColorTemplateType } from \"@xanui/core\"\nimport { ListItemProps } from \"../ListItem\";\nexport type ListContextValue = {\n   listItem?: Omit<ListItemProps, \"children\">;\n   color: UseColorTemplateColor;\n   variant: UseColorTemplateType;\n   size: \"small\" | \"medium\" | \"large\"\n}\n\nexport const ListContext = React.createContext<ListContextValue | null>(null)\n\nexport const useListContext = () => React.useContext(ListContext) as ListContextValue\n"],"names":[],"mappings":";;AAAA;AAWO,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAA0B,IAAI;AAErE,MAAM,cAAc,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,WAAW;;;;"}

package/List/index.cjs

@@ -9,7 +9,7 @@ var ListContext = require('./ListContext.cjs');
 
 const List = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    var { children, slotProps } = _a, rest = tslib.__rest(_a, ["children", "slotProps"]);
     let [_e] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _e, props = tslib.__rest(_e, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
     const _p = {};
     if (color)
@@ -26,34 +26,7 @@ const List = React.forwardRef((_a, ref) => {
     color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
-    const template = core.useColorTemplate(color, variant);
-    const defaultTemplate = core.useColorTemplate("default", "text");
-    const hoverTemplate = core.useColorTemplate('default', "soft");
-    return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { size }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0, "& .list-item-icon": {
-                    color: "text.secondary"
-                }, "& .list-item-text": {
-                    color: "text.primary"
-                }, "& .list-item-subtitle": {
-                    color: "text.secondary"
-                }, "& .xui-list-item": Object.assign(Object.assign({}, defaultTemplate.primary), { "& .list-item-icon": {
-                        color: defaultTemplate.primary.color
-                    }, "& .list-item-text": {
-                        color: defaultTemplate.primary.color
-                    }, "& .list-item-subtitle": {
-                        color: hoverColor === 'default' ? "text.secondary" : defaultTemplate.primary.color
-                    } }), "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
-                        color: hoverTemplate.primary.color
-                    }, "& .list-item-text": {
-                        color: hoverTemplate.primary.color
-                    }, "& .list-item-subtitle": {
-                        color: hoverTemplate.primary.color
-                    } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
-                        color: template.primary.color
-                    }, "& .list-item-text": {
-                        color: template.primary.color
-                    }, "& .list-item-subtitle": {
-                        color: template.primary.color
-                    }, border: "0" }) }, (sx || {})), ref: ref, children: children })) }));
+    return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { color, variant, size, listItem: slotProps === null || slotProps === void 0 ? void 0 : slotProps.listItem }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0 }, (sx || {})), ref: ref, children: children })) }));
 });
 
 module.exports = List;

package/List/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n    return (\n        <ListContext.Provider value={{ size }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    \"& .list-item-icon\": {\n                        color: \"text.secondary\"\n                    },\n                    \"& .list-item-text\": {\n                        color: \"text.primary\"\n                    },\n                    \"& .list-item-subtitle\": {\n                        color: \"text.secondary\"\n                    },\n\n                    \"& .xui-list-item\": {\n                        ...defaultTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n                        },\n\n                    },\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\n                        ...hoverTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverTemplate.primary.color\n                        },\n                    },\n                    \"& .xui-list-item.list-item-selected\": {\n                        ...template.primary,\n                        \"& .list-item-icon\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: template.primary.color\n                        },\n                        border: \"0\"\n                    },\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;;;AAYA;;AAAkE;AAC9D;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;;;;AAOA;AAWoB;AACH;AAEG;AACH;AAEG;AACH;AAKO;AACH;AAEG;AACH;AAEG;AACH;AAMG;AACH;AAEG;AACH;AAEG;AACH;AAKG;AACH;AAEG;AACH;AAEG;AACH;AAWzB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    slotProps?: {\n        listItem?: Omit<ListItemProps, \"children\">\n    }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    return (\n        <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}

package/List/index.d.ts

@@ -1,10 +1,14 @@
 import React from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
+import { ListItemProps } from '../ListItem/index.js';
 
 type ListProps<T extends TagComponentType = "ul"> = Omit<TagProps<T>, 'color' | "size"> & {
     color?: useBreakpointPropsType<UseColorTemplateColor>;
     variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, "outline">;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
+    slotProps?: {
+        listItem?: Omit<ListItemProps, "children">;
+    };
 };
 declare const List: React.ForwardRefExoticComponent<Omit<ListProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
 

package/List/index.js

@@ -2,12 +2,12 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
+import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
 import { ListContext } from './ListContext.js';
 
 const List = React.forwardRef((_a, ref) => {
     var _b, _c, _d;
-    var { children } = _a, rest = __rest(_a, ["children"]);
+    var { children, slotProps } = _a, rest = __rest(_a, ["children", "slotProps"]);
     let [_e] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _e, props = __rest(_e, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
     const _p = {};
     if (color)
@@ -24,34 +24,7 @@ const List = React.forwardRef((_a, ref) => {
     color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
     variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
     size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
-    const template = useColorTemplate(color, variant);
-    const defaultTemplate = useColorTemplate("default", "text");
-    const hoverTemplate = useColorTemplate('default', "soft");
-    return (jsx(ListContext.Provider, { value: { size }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0, "& .list-item-icon": {
-                    color: "text.secondary"
-                }, "& .list-item-text": {
-                    color: "text.primary"
-                }, "& .list-item-subtitle": {
-                    color: "text.secondary"
-                }, "& .xui-list-item": Object.assign(Object.assign({}, defaultTemplate.primary), { "& .list-item-icon": {
-                        color: defaultTemplate.primary.color
-                    }, "& .list-item-text": {
-                        color: defaultTemplate.primary.color
-                    }, "& .list-item-subtitle": {
-                        color: hoverColor === 'default' ? "text.secondary" : defaultTemplate.primary.color
-                    } }), "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
-                        color: hoverTemplate.primary.color
-                    }, "& .list-item-text": {
-                        color: hoverTemplate.primary.color
-                    }, "& .list-item-subtitle": {
-                        color: hoverTemplate.primary.color
-                    } }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
-                        color: template.primary.color
-                    }, "& .list-item-text": {
-                        color: template.primary.color
-                    }, "& .list-item-subtitle": {
-                        color: template.primary.color
-                    }, border: "0" }) }, (sx || {})), ref: ref, children: children })) }));
+    return (jsx(ListContext.Provider, { value: { color, variant, size, listItem: slotProps === null || slotProps === void 0 ? void 0 : slotProps.listItem }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0 }, (sx || {})), ref: ref, children: children })) }));
 });
 
 export { List as default };

package/List/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    const template = useColorTemplate(color, variant)\n    const defaultTemplate = useColorTemplate(\"default\", \"text\")\n    const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n    return (\n        <ListContext.Provider value={{ size }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    \"& .list-item-icon\": {\n                        color: \"text.secondary\"\n                    },\n                    \"& .list-item-text\": {\n                        color: \"text.primary\"\n                    },\n                    \"& .list-item-subtitle\": {\n                        color: \"text.secondary\"\n                    },\n\n                    \"& .xui-list-item\": {\n                        ...defaultTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: defaultTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n                        },\n\n                    },\n                    \"& .xui-list-item:not(.list-item-selected):hover\": {\n                        ...hoverTemplate.primary,\n                        \"& .list-item-icon\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: hoverTemplate.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: hoverTemplate.primary.color\n                        },\n                    },\n                    \"& .xui-list-item.list-item-selected\": {\n                        ...template.primary,\n                        \"& .list-item-icon\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-text\": {\n                            color: template.primary.color\n                        },\n                        \"& .list-item-subtitle\": {\n                            color: template.primary.color\n                        },\n                        border: \"0\"\n                    },\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;AAYA;;AAAkE;AAC9D;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;;;;AAOA;AAWoB;AACH;AAEG;AACH;AAEG;AACH;AAKO;AACH;AAEG;AACH;AAEG;AACH;AAMG;AACH;AAEG;AACH;AAEG;AACH;AAKG;AACH;AAEG;AACH;AAEG;AACH;AAWzB;;"}
+{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\nimport { ListItemProps } from '../ListItem';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    slotProps?: {\n        listItem?: Omit<ListItemProps, \"children\">\n    }\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, slotProps, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n    let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n    const _p: any = {}\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    size = p.size ?? \"medium\"\n\n    return (\n        <ListContext.Provider value={{ color, variant, size, listItem: slotProps?.listItem }}>\n            <Tag\n                component='ul'\n                {...props}\n                baseClass='list'\n                sxr={{\n                    listStyle: \"none\",\n                    p: 0,\n                    m: 0,\n                    ...(sx || {} as any)\n                }}\n                ref={ref}\n            >\n                {children}\n            </Tag>\n        </ListContext.Provider>\n    )\n})\n\nexport default List"],"names":[],"mappings":";;;;;;;AAgBA;;;AACI;;AAEA;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAClB;AAAU;AACV;AAEA;AACA;AACA;AAEA;AAkBJ;;"}

package/ListItem/index.cjs

@@ -9,9 +9,8 @@ var index = require('../Text/index.cjs');
 var ListContext = require('../List/ListContext.cjs');
 
 const ListItem = React.forwardRef((_a, ref) => {
-    var _b, _c;
-    var { children, startIcon, endIcon, subtitle, size } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle", "size"]);
-    let [_d] = core.useInterface("ListItem", rest, {}), { selected } = _d, props = tslib.__rest(_d, ["selected"]);
+    var { children, startIcon, endIcon, subtitle, slotProps } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle", "slotProps"]);
+    let [_b] = core.useInterface("ListItem", rest, {}), { selected } = _b, props = tslib.__rest(_b, ["selected"]);
     const _p = {};
     if (subtitle)
         _p.subtitle = subtitle;
@@ -19,14 +18,15 @@ const ListItem = React.forwardRef((_a, ref) => {
         _p.startIcon = startIcon;
     if (endIcon)
         _p.endIcon = endIcon;
-    if (size)
-        _p.size = size;
     const p = core.useBreakpointProps(_p);
-    const ctx = ListContext.useListContext();
+    const listProps = ListContext.useListContext();
+    const template = core.useColorTemplate(listProps.color, listProps.variant);
+    const defaultTemplate = core.useColorTemplate("default", "text");
+    const hoverTemplate = core.useColorTemplate('default', "soft");
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
-    size = (_c = (_b = p.size) !== null && _b !== void 0 ? _b : ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _c !== void 0 ? _c : "medium";
+    const size = listProps === null || listProps === void 0 ? void 0 : listProps.size;
     let sizes = {
         small: {
             fontSize: "button",
@@ -47,9 +47,24 @@ const ListItem = React.forwardRef((_a, ref) => {
             minHeight: 48,
         }
     };
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'li' }, props, { sxr: Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sizes[size]), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
+    const hoversx = Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
+            color: hoverTemplate.primary.color
+        }, "& .list-item-text": {
+            color: hoverTemplate.primary.color
+        }, "& .list-item-subtitle": {
+            color: hoverTemplate.primary.color
+        } });
+    let sx = {
+        item: selected ? template.primary : defaultTemplate.primary,
+        text: {
+            color: selected ? template.primary.color : defaultTemplate.primary.color
+        }
+    };
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'li' }, listProps === null || listProps === void 0 ? void 0 : listProps.listItem, props, { sxr: Object.assign(Object.assign(Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sx.item), sizes[size]), { border: 0, "&:hover:not(.list-item-selected)": hoversx }), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { component: "span", baseClass: 'list-item-icon', sxr: Object.assign(Object.assign({}, sx.text), { mr: 1, display: "inline-block" }), children: startIcon })), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", sx: sx.text, children: children })), subtitle && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtititle, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", sx: sx.text, children: subtitle }))] }), endIcon && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { component: "span", baseClass: 'list-item-icon', sxr: {
+                    ml: 1,
+                    display: "inline-block"
+                }, children: endIcon }))] })));
 });
-ListItem.displayName = "ListItem";
 
 module.exports = ListItem;
 //# sourceMappingURL=index.cjs.map

package/ListItem/index.cjs.map

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

package/ListItem/index.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
+import { TextProps } from '../Text/index.js';
 
 type ListItemProps<T extends TagComponentType = "li"> = TagProps<T> & {
     selected?: boolean;
@@ -7,6 +8,12 @@ type ListItemProps<T extends TagComponentType = "li"> = TagProps<T> & {
     startIcon?: useBreakpointPropsType<ReactElement>;
     endIcon?: useBreakpointPropsType<ReactElement>;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
+    slotProps?: {
+        content: Omit<TextProps, "children">;
+        startIcon: Omit<TagProps, "children">;
+        endIcon: Omit<TagProps, "children">;
+        subtititle: Omit<TextProps, "children">;
+    };
 };
 declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
 

package/ListItem/index.js

@@ -2,14 +2,13 @@
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
-import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
+import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
 import Text from '../Text/index.js';
 import { useListContext } from '../List/ListContext.js';
 
 const ListItem = React.forwardRef((_a, ref) => {
-    var _b, _c;
-    var { children, startIcon, endIcon, subtitle, size } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle", "size"]);
-    let [_d] = useInterface("ListItem", rest, {}), { selected } = _d, props = __rest(_d, ["selected"]);
+    var { children, startIcon, endIcon, subtitle, slotProps } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle", "slotProps"]);
+    let [_b] = useInterface("ListItem", rest, {}), { selected } = _b, props = __rest(_b, ["selected"]);
     const _p = {};
     if (subtitle)
         _p.subtitle = subtitle;
@@ -17,14 +16,15 @@ const ListItem = React.forwardRef((_a, ref) => {
         _p.startIcon = startIcon;
     if (endIcon)
         _p.endIcon = endIcon;
-    if (size)
-        _p.size = size;
     const p = useBreakpointProps(_p);
-    const ctx = useListContext();
+    const listProps = useListContext();
+    const template = useColorTemplate(listProps.color, listProps.variant);
+    const defaultTemplate = useColorTemplate("default", "text");
+    const hoverTemplate = useColorTemplate('default', "soft");
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;
-    size = (_c = (_b = p.size) !== null && _b !== void 0 ? _b : ctx === null || ctx === void 0 ? void 0 : ctx.size) !== null && _c !== void 0 ? _c : "medium";
+    const size = listProps === null || listProps === void 0 ? void 0 : listProps.size;
     let sizes = {
         small: {
             fontSize: "button",
@@ -45,9 +45,24 @@ const ListItem = React.forwardRef((_a, ref) => {
             minHeight: 48,
         }
     };
-    return (jsxs(Tag, Object.assign({ component: 'li' }, props, { sxr: Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sizes[size]), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxs(Tag, { flex: 1, children: [jsx(Text, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsx(Text, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsx(Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
+    const hoversx = Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
+            color: hoverTemplate.primary.color
+        }, "& .list-item-text": {
+            color: hoverTemplate.primary.color
+        }, "& .list-item-subtitle": {
+            color: hoverTemplate.primary.color
+        } });
+    let sx = {
+        item: selected ? template.primary : defaultTemplate.primary,
+        text: {
+            color: selected ? template.primary.color : defaultTemplate.primary.color
+        }
+    };
+    return (jsxs(Tag, Object.assign({ component: 'li' }, listProps === null || listProps === void 0 ? void 0 : listProps.listItem, props, { sxr: Object.assign(Object.assign(Object.assign({ alignItems: "center", display: "flex", flexDirection: "row", userSelect: "none", cursor: "pointer", lineHeight: 1.4, whiteSpace: "nowrap", flexShrink: "0" }, sx.item), sizes[size]), { border: 0, "&:hover:not(.list-item-selected)": hoversx }), baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.startIcon, { component: "span", baseClass: 'list-item-icon', sxr: Object.assign(Object.assign({}, sx.text), { mr: 1, display: "inline-block" }), children: startIcon })), jsxs(Tag, { flex: 1, children: [jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", sx: sx.text, children: children })), subtitle && jsx(Text, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.subtititle, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", sx: sx.text, children: subtitle }))] }), endIcon && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.endIcon, { component: "span", baseClass: 'list-item-icon', sxr: {
+                    ml: 1,
+                    display: "inline-block"
+                }, children: endIcon }))] })));
 });
-ListItem.displayName = "ListItem";
 
 export { ListItem as default };
 //# sourceMappingURL=index.js.map

package/ListItem/index.js.map

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

package/package.json

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