npm - @xanui/ui - Versions diffs - 1.1.68 → 1.1.69 - Mend

@xanui/ui 1.1.68 → 1.1.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/Autocomplete/index.cjs +44 -31
package/Autocomplete/index.cjs.map +1 -1
package/Autocomplete/index.js +45 -32
package/Autocomplete/index.js.map +1 -1
package/Chip/index.cjs +8 -4
package/Chip/index.cjs.map +1 -1
package/Chip/index.d.ts +3 -0
package/Chip/index.js +8 -4
package/Chip/index.js.map +1 -1
package/Input/index.cjs +2 -2
package/Input/index.cjs.map +1 -1
package/Input/index.js +2 -2
package/Input/index.js.map +1 -1
package/package.json +1 -1

package/Autocomplete/index.cjs CHANGED Viewed

@@ -18,13 +18,15 @@ const Autocomplete = (_a) => {
     const [inputValue, setInputValue] = React.useState("");
     const [timer, setTimer] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
     const [open, setOpen] = React.useState(false);
     const menuRef = React.useRef(null);
     getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
     multiple !== null && multiple !== void 0 ? multiple : (multiple = false);
-    let startIcons = [
-        inputProps.startIcon
-    ];
+    let startIcons = [];
+    if (inputProps.startIcon) {
+        startIcons.push(inputProps.startIcon);
+    }
     if (!!value && multiple && Array.isArray(value)) {
         value.map((v, index$2) => {
             startIcons.push(jsxRuntime.jsx(index, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsxRuntime.jsx(index$1, { size: 20, variant: "text", color: "default", onClick: (e) => {
@@ -35,27 +37,56 @@ const Autocomplete = (_a) => {
                     }, children: jsxRuntime.jsx(Close, {}) }) }, index$2));
         });
     }
-    let endIcons = [
-        inputProps.endIcon
-    ];
+    let endIcons = [];
+    if (inputProps.endIcon) {
+        endIcons.push(inputProps.endIcon);
+    }
     if (loading) {
         endIcons.push(jsxRuntime.jsx(index$2, { size: "small" }, "auto-complete-loading-icon"));
     }
     else if (!!value && !multiple) {
-        endIcons.push(jsxRuntime.jsx(index$1, { variant: "text", color: "default", onClick: (e) => {
+        endIcons.unshift(jsxRuntime.jsx(index$1, { variant: "text", color: "default", onClick: (e) => {
                 e.stopPropagation();
-                onChange && onChange(undefined);
+                onChange && onChange(null);
                 setInputValue("");
             }, children: jsxRuntime.jsx(Close, {}) }, "auto-complete-clear-button"));
     }
+    const loadOptions = async () => {
+        setLoading(true);
+        let results = [];
+        if (typeof options === 'function') {
+            results = await options(inputValue);
+        }
+        else {
+            results = options.filter(option => getLabel(option).toLowerCase().includes(inputValue.toLowerCase()));
+        }
+        if (!multiple && inputValue) {
+            const find = results.find(option => getLabel(option).toLowerCase() == inputValue.toLowerCase());
+            onChange && onChange(find || null);
+        }
+        setOptions(results);
+        setOpen(true);
+        setLoading(false);
+    };
+    React.useEffect(() => {
+        if (focused) {
+            clearTimeout(timer);
+            setTimer(setTimeout(() => {
+                loadOptions();
+            }, 300));
+        }
+        else {
+            setOpen(false);
+        }
+    }, [focused, inputValue]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(index$3, Object.assign({}, inputProps, { ref: menuRef, slotProps: {
                     rootContainer: Object.assign({ flexWrap: 'wrap' }, (multiple ? { height: "auto", gap: .5 } : {})),
                     input: {
-                        width: multiple ? 'auto' : '100%',
+                        width: multiple ? 'initial' : '100%',
                         flex: 1,
                         minWidth: 20,
                     }
-                }, startIcon: startIcons, endIcon: endIcons, value: inputValue, onKeyDown: (e) => {
+                }, startIcon: startIcons.length ? startIcons : undefined, endIcon: endIcons, value: inputValue, onFocus: () => setFocused(true), onKeyDown: (e) => {
                     if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) {
                         inputProps.onKeyDown(e);
                     }
@@ -67,28 +98,8 @@ const Autocomplete = (_a) => {
                 }, onChange: (e) => {
                     const value = e.target.value;
                     setInputValue(value);
-                    if (!value) {
-                        setOptions([]);
-                        setOpen(false);
-                        return;
-                    }
-                    setOpen(true);
-                    clearTimeout(timer);
-                    setTimer(setTimeout(async () => {
-                        if (typeof options === 'function') {
-                            setLoading(true);
-                            const result = await options(value);
-                            setOptions(result);
-                            setLoading(false);
-                        }
-                        else {
-                            const filtered = options.filter(option => getLabel(option).toLowerCase().includes(value.toLowerCase()));
-                            setOptions(filtered);
-                        }
-                    }, 300));
                 } })), jsxRuntime.jsx(index$4, { target: open ? menuRef.current : null, onClickOutside: () => {
-                    setOptions([]);
-                    setInputValue("");
+                    setFocused(false);
                 }, slotProps: {
                     content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }
                 }, children: jsxRuntime.jsx(index$5, { maxHeight: 400, overflow: "auto", children: _options === null || _options === void 0 ? void 0 : _options.map((option, index) => (renderOption ? jsxRuntime.jsx("div", { children: renderOption(option, {
@@ -105,6 +116,7 @@ const Autocomplete = (_a) => {
                                     onChange && onChange(newValue);
                                 }
                                 else {
+                                    setFocused(false);
                                     onChange && onChange(option);
                                     setOpen(false);
                                     setInputValue(getLabel(option));
@@ -124,6 +136,7 @@ const Autocomplete = (_a) => {
                                 onChange && onChange(newValue);
                             }
                             else {
+                                setFocused(false);
                                 onChange && onChange(option);
                                 setOpen(false);
                                 setInputValue(getLabel(option));

package/Autocomplete/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import React, { ReactElement } 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 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(\"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = [\n 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 inputProps.endIcon\n ]\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.push(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(undefined)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\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 ? 'auto' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons}\n endIcon={endIcons}\n value={inputValue}\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 if (!value) {\n setOptions([])\n setOpen(false)\n return;\n }\n setOpen(true)\n\n clearTimeout(timer)\n setTimer(setTimeout(async () => {\n if (typeof options === 'function') {\n setLoading(true)\n const result = await options(value)\n setOptions(result)\n setLoading(false)\n } else {\n const filtered = options.filter(option => getLabel!(option).toLowerCase().includes(value.toLowerCase()))\n setOptions(filtered)\n }\n }, 300))\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setOptions([])\n setInputValue(\"\")\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 onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\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 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":["__rest","index","_jsx","Chip","IconButton","CircleProgress","_jsxs","_Fragment","Input","Menu","List","ListItem"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import 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 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(\"\")\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 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).toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).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":["__rest","index","_jsx","Chip","IconButton","CircleProgress","useEffect","_jsxs","_Fragment","Input","Menu","List","ListItem"],"mappings":"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"}

package/Autocomplete/index.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React from 'react';
+import React, { useEffect } from 'react';
 import Input from '../Input/index.js';
 import Menu from '../Menu/index.js';
 import List from '../List/index.js';
@@ -16,13 +16,15 @@ const Autocomplete = (_a) => {
     const [inputValue, setInputValue] = React.useState("");
     const [timer, setTimer] = React.useState(null);
     const [loading, setLoading] = React.useState(false);
+    const [focused, setFocused] = React.useState(false);
     const [open, setOpen] = React.useState(false);
     const menuRef = React.useRef(null);
     getLabel !== null && getLabel !== void 0 ? getLabel : (getLabel = (option) => option.toString());
     multiple !== null && multiple !== void 0 ? multiple : (multiple = false);
-    let startIcons = [
-        inputProps.startIcon
-    ];
+    let startIcons = [];
+    if (inputProps.startIcon) {
+        startIcons.push(inputProps.startIcon);
+    }
     if (!!value && multiple && Array.isArray(value)) {
         value.map((v, index) => {
             startIcons.push(jsx(Chip, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsx(IconButton, { size: 20, variant: "text", color: "default", onClick: (e) => {
@@ -33,27 +35,56 @@ const Autocomplete = (_a) => {
                     }, children: jsx(Close, {}) }) }, index));
         });
     }
-    let endIcons = [
-        inputProps.endIcon
-    ];
+    let endIcons = [];
+    if (inputProps.endIcon) {
+        endIcons.push(inputProps.endIcon);
+    }
     if (loading) {
         endIcons.push(jsx(CircleProgress, { size: "small" }, "auto-complete-loading-icon"));
     }
     else if (!!value && !multiple) {
-        endIcons.push(jsx(IconButton, { variant: "text", color: "default", onClick: (e) => {
+        endIcons.unshift(jsx(IconButton, { variant: "text", color: "default", onClick: (e) => {
                 e.stopPropagation();
-                onChange && onChange(undefined);
+                onChange && onChange(null);
                 setInputValue("");
             }, children: jsx(Close, {}) }, "auto-complete-clear-button"));
     }
+    const loadOptions = async () => {
+        setLoading(true);
+        let results = [];
+        if (typeof options === 'function') {
+            results = await options(inputValue);
+        }
+        else {
+            results = options.filter(option => getLabel(option).toLowerCase().includes(inputValue.toLowerCase()));
+        }
+        if (!multiple && inputValue) {
+            const find = results.find(option => getLabel(option).toLowerCase() == inputValue.toLowerCase());
+            onChange && onChange(find || null);
+        }
+        setOptions(results);
+        setOpen(true);
+        setLoading(false);
+    };
+    useEffect(() => {
+        if (focused) {
+            clearTimeout(timer);
+            setTimer(setTimeout(() => {
+                loadOptions();
+            }, 300));
+        }
+        else {
+            setOpen(false);
+        }
+    }, [focused, inputValue]);
     return (jsxs(Fragment, { children: [jsx(Input, Object.assign({}, inputProps, { ref: menuRef, slotProps: {
                     rootContainer: Object.assign({ flexWrap: 'wrap' }, (multiple ? { height: "auto", gap: .5 } : {})),
                     input: {
-                        width: multiple ? 'auto' : '100%',
+                        width: multiple ? 'initial' : '100%',
                         flex: 1,
                         minWidth: 20,
                     }
-                }, startIcon: startIcons, endIcon: endIcons, value: inputValue, onKeyDown: (e) => {
+                }, startIcon: startIcons.length ? startIcons : undefined, endIcon: endIcons, value: inputValue, onFocus: () => setFocused(true), onKeyDown: (e) => {
                     if (inputProps === null || inputProps === void 0 ? void 0 : inputProps.onKeyDown) {
                         inputProps.onKeyDown(e);
                     }
@@ -65,28 +96,8 @@ const Autocomplete = (_a) => {
                 }, onChange: (e) => {
                     const value = e.target.value;
                     setInputValue(value);
-                    if (!value) {
-                        setOptions([]);
-                        setOpen(false);
-                        return;
-                    }
-                    setOpen(true);
-                    clearTimeout(timer);
-                    setTimer(setTimeout(async () => {
-                        if (typeof options === 'function') {
-                            setLoading(true);
-                            const result = await options(value);
-                            setOptions(result);
-                            setLoading(false);
-                        }
-                        else {
-                            const filtered = options.filter(option => getLabel(option).toLowerCase().includes(value.toLowerCase()));
-                            setOptions(filtered);
-                        }
-                    }, 300));
                 } })), jsx(Menu, { target: open ? menuRef.current : null, onClickOutside: () => {
-                    setOptions([]);
-                    setInputValue("");
+                    setFocused(false);
                 }, slotProps: {
                     content: { minWidth: menuRef.current ? menuRef.current.offsetWidth : 'auto' }
                 }, children: jsx(List, { maxHeight: 400, overflow: "auto", children: _options === null || _options === void 0 ? void 0 : _options.map((option, index) => (renderOption ? jsx("div", { children: renderOption(option, {
@@ -103,6 +114,7 @@ const Autocomplete = (_a) => {
                                     onChange && onChange(newValue);
                                 }
                                 else {
+                                    setFocused(false);
                                     onChange && onChange(option);
                                     setOpen(false);
                                     setInputValue(getLabel(option));
@@ -122,6 +134,7 @@ const Autocomplete = (_a) => {
                                 onChange && onChange(newValue);
                             }
                             else {
+                                setFocused(false);
                                 onChange && onChange(option);
                                 setOpen(false);
                                 setInputValue(getLabel(option));

package/Autocomplete/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import React, { ReactElement } 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 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(\"\")\n const [timer, setTimer] = React.useState<any>(null)\n const [loading, setLoading] = React.useState(false)\n const [open, setOpen] = React.useState(false)\n const menuRef = React.useRef<any>(null)\n\n getLabel ??= (option: any) => option.toString();\n multiple ??= false;\n\n let startIcons = [\n 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 inputProps.endIcon\n ]\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.push(<IconButton\n key=\"auto-complete-clear-button\"\n variant={\"text\"}\n color=\"default\"\n onClick={(e) => {\n e.stopPropagation();\n onChange && onChange(undefined)\n setInputValue(\"\")\n }}\n >\n <Close />\n </IconButton>)\n }\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 ? 'auto' : '100%',\n flex: 1,\n minWidth: 20,\n }\n }}\n startIcon={startIcons}\n endIcon={endIcons}\n value={inputValue}\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 if (!value) {\n setOptions([])\n setOpen(false)\n return;\n }\n setOpen(true)\n\n clearTimeout(timer)\n setTimer(setTimeout(async () => {\n if (typeof options === 'function') {\n setLoading(true)\n const result = await options(value)\n setOptions(result)\n setLoading(false)\n } else {\n const filtered = options.filter(option => getLabel!(option).toLowerCase().includes(value.toLowerCase()))\n setOptions(filtered)\n }\n }, 300))\n }}\n />\n <Menu\n target={open ? menuRef.current : null}\n onClickOutside={() => {\n setOptions([])\n setInputValue(\"\")\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 onChange && onChange(option)\n setOpen(false)\n setInputValue(getLabel!(option))\n setOptions([])\n }\n }\n })}</div> : <ListItem\n key={index}\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 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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","sources":["../../src/Autocomplete/index.tsx"],"sourcesContent":["import 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 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(\"\")\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 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).toLowerCase().includes(inputValue.toLowerCase()))\n }\n if (!multiple && inputValue) {\n const find = results.find(option => getLabel!(option).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":["_jsx","_jsxs","_Fragment"],"mappings":"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"}

package/Chip/index.cjs CHANGED Viewed

@@ -7,7 +7,7 @@ var core = require('@xanui/core');
 var index = require('../useCorner/index.cjs');
 const Chip = React.forwardRef((props, ref) => {
-    let [_a] = core.useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = tslib.__rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
+    let [_a] = core.useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size, slotProps } = _a, rest = tslib.__rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size", "slotProps"]);
     const _p = {};
     if (label)
         _p.label = label;
@@ -23,6 +23,8 @@ const Chip = React.forwardRef((props, ref) => {
         _p.corner = corner;
     if (size)
         _p.size = size;
+    if (slotProps)
+        _p.slotProps = slotProps;
     const p = core.useBreakpointProps(_p);
     label = p.label;
     startIcon = p.startIcon;
@@ -31,6 +33,7 @@ const Chip = React.forwardRef((props, ref) => {
     variant = p.variant || "fill";
     corner = p.corner || "circle";
     size = p.size || "medium";
+    slotProps = p.slotProps;
     rest.sx = rest.sx || {};
     const cornerCss = index(corner);
     const template = core.useColorTemplate(color, variant);
@@ -66,10 +69,11 @@ const Chip = React.forwardRef((props, ref) => {
                 whiteSpace: "nowrap",
                 overflow: "hidden",
             },
-        }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, { sxr: {
+        }, baseClass: 'chip', ref: ref, children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { baseClass: 'chip-label', sxr: {
                     alignItems: "center",
-                    flexBox: true
-                }, children: label }), endIcon] })));
+                    flexBox: true,
+                    color: template.primary.color + "!important"
+                }, children: label })), endIcon] })));
 });
 module.exports = Chip;

package/Chip/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" \| \"children\" \| \"size\"> & {\n label: useBreakpointPropsType<string \| ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" \| \"medium\" \| \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n const _p: any = {}\n if (label) _p.label = label\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n\n label = p.label\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color \|\| \"brand\"\n variant = p.variant \|\| \"fill\"\n corner = p.corner \|\| \"circle\"\n size = p.size \|\| \"medium\"\n rest.sx = (rest as any).sx \|\| {};\n\n const cornerCss = useCorner(corner)\n const template = useColorTemplate(color, variant)\n\n const sizes: any = {\n small: {\n height: 24,\n gap: .5,\n px: startIcon \|\| endIcon ? .8 : 1,\n fontSize: \"small\"\n },\n medium: {\n height: 32,\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n fontSize: 'button',\n },\n large: {\n height: 40,\n fontSize: 'text',\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n }\n }\n\n return (\n <Tag\n {...cornerCss}\n {...template.primary}\n {...(sizes[size as any] \|\| {})}\n {...rest}\n sxr={{\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n transition: \"background .3s\",\n overflow: \"hidden\",\n\n \"& > *\": {\n flex: \"0 0 auto\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n },\n }}\n baseClass='chip'\n ref={ref}\n >\n {startIcon}\n <Tag\n sxr={{\n alignItems: \"center\",\n flexBox: true\n }}\n >{label}</Tag>\n {endIcon}\n </Tag>\n )\n})\n\nexport default Chip\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":";;;;;;;;~~AAiBA~~,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,KAAmB,EAAE,GAAmB,KAAI;AAC3G,IAAA,IAAI,CAAA,EAAA,CAAA,~~GAAyEA~~,iBAAY,CAAM,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,~~EAA5G~~,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAC,YAAA,CAAA,EAAA,~~EAAlE~~,CAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,~~CAAoE~~,CAAwC;~~IACjH~~,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,MAAM;AAAE,QAAA,EAAE,CAAC,MAAM,GAAG,MAAM;AAC9B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,OAAO;AAC1B,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO,IAAI,MAAM;AAC7B,IAAA,MAAM,GAAG,CAAC,CAAC,MAAM,IAAI,QAAQ;AAC7B,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,QAAQ;~~IACzB~~,IAAI,CAAC,EAAE,GAAI,IAAY,CAAC,EAAE,IAAI,EAAE;AAEhC,IAAA,MAAM,SAAS,GAAGC,KAAS,CAAC,MAAM,CAAC;IACnC,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC;AAEjD,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,EAAE;YACP,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,CAAC;AACjC,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACnC,YAAA,QAAQ,EAAE,QAAQ;AACrB,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACtC;KACJ;IAED,QACIC,gBAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,EACT,QAAQ,CAAC,OAAO,GACf,KAAK,CAAC,IAAW,CAAC,IAAI,EAAE,GACzB,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,QAAQ,EAAE,QAAQ;AAElB,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE,UAAU;AAChB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;~~AACJ~~,~~SAAA,~~EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,SAAS,EACVC,cAAA,CAACD,QAAG,EAAA,~~EACA~~,GAAG,EAAE;AACD,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,OAAO,EAAE;~~AACZ~~,iBAAA,EAAA,QAAA,EACH,KAAK,EAAA,CAAO,EACb,OAAO,CAAA,EAAA,CAAA,CACN;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" \| \"children\" \| \"size\"> & {\n label: useBreakpointPropsType<string \| ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" \| \"medium\" \| \"large\">;\n\n slotProps?: {\n label?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n const _p: any = {}\n if (label) _p.label = label\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (slotProps) _p.slotProps = slotProps\n const p: any = useBreakpointProps(_p)\n\n label = p.label\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color \|\| \"brand\"\n variant = p.variant \|\| \"fill\"\n corner = p.corner \|\| \"circle\"\n size = p.size \|\| \"medium\"\n slotProps = p.slotProps\n rest.sx = (rest as any).sx \|\| {};\n\n const cornerCss = useCorner(corner)\n const template = useColorTemplate(color, variant)\n\n const sizes: any = {\n small: {\n height: 24,\n gap: .5,\n px: startIcon \|\| endIcon ? .8 : 1,\n fontSize: \"small\"\n },\n medium: {\n height: 32,\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n fontSize: 'button',\n },\n large: {\n height: 40,\n fontSize: 'text',\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n }\n }\n\n return (\n <Tag\n {...cornerCss}\n {...template.primary}\n {...(sizes[size as any] \|\| {})}\n {...rest}\n sxr={{\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n transition: \"background .3s\",\n overflow: \"hidden\",\n\n \"& > *\": {\n flex: \"0 0 auto\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n },\n }}\n baseClass='chip'\n ref={ref}\n >\n {startIcon}\n <Tag\n {...slotProps?.label}\n baseClass='chip-label'\n sxr={{\n alignItems: \"center\",\n flexBox: true,\n color: template.primary.color + \"!important\"\n }}\n >{label}</Tag>\n {endIcon}\n </Tag>\n )\n})\n\nexport default Chip\n"],"names":["useInterface","__rest","useBreakpointProps","useCorner","useColorTemplate","_jsxs","Tag","_jsx"],"mappings":"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"}

package/Chip/index.d.ts CHANGED Viewed

@@ -10,6 +10,9 @@ type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, "color" |
     variant?: useBreakpointPropsType<UseColorTemplateType>;
     corner?: useBreakpointPropsType<UseCornerTypes>;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
+    slotProps?: {
+        label?: Omit<TagProps<"div">, "children">;
+    };
 };
 declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;

package/Chip/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/
 import useCorner from '../useCorner/index.js';
 const Chip = React.forwardRef((props, ref) => {
-    let [_a] = useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size } = _a, rest = __rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size"]);
+    let [_a] = useInterface("Chip", props, {}), { label, variant, startIcon, endIcon, color, corner, size, slotProps } = _a, rest = __rest(_a, ["label", "variant", "startIcon", "endIcon", "color", "corner", "size", "slotProps"]);
     const _p = {};
     if (label)
         _p.label = label;
@@ -21,6 +21,8 @@ const Chip = React.forwardRef((props, ref) => {
         _p.corner = corner;
     if (size)
         _p.size = size;
+    if (slotProps)
+        _p.slotProps = slotProps;
     const p = useBreakpointProps(_p);
     label = p.label;
     startIcon = p.startIcon;
@@ -29,6 +31,7 @@ const Chip = React.forwardRef((props, ref) => {
     variant = p.variant || "fill";
     corner = p.corner || "circle";
     size = p.size || "medium";
+    slotProps = p.slotProps;
     rest.sx = rest.sx || {};
     const cornerCss = useCorner(corner);
     const template = useColorTemplate(color, variant);
@@ -64,10 +67,11 @@ const Chip = React.forwardRef((props, ref) => {
                 whiteSpace: "nowrap",
                 overflow: "hidden",
             },
-        }, baseClass: 'chip', ref: ref, children: [startIcon, jsx(Tag, { sxr: {
+        }, baseClass: 'chip', ref: ref, children: [startIcon, jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { baseClass: 'chip-label', sxr: {
                     alignItems: "center",
-                    flexBox: true
-                }, children: label }), endIcon] })));
+                    flexBox: true,
+                    color: template.primary.color + "!important"
+                }, children: label })), endIcon] })));
 });
 export { Chip as default };

package/Chip/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" \| \"children\" \| \"size\"> & {\n label: useBreakpointPropsType<string \| ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" \| \"medium\" \| \"large\">;\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n let [{ label, variant, startIcon, endIcon, color, corner, size, ...rest }] = useInterface<any>(\"Chip\", props, {})\n const _p: any = {}\n if (label) _p.label = label\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n\n label = p.label\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color \|\| \"brand\"\n variant = p.variant \|\| \"fill\"\n corner = p.corner \|\| \"circle\"\n size = p.size \|\| \"medium\"\n rest.sx = (rest as any).sx \|\| {};\n\n const cornerCss = useCorner(corner)\n const template = useColorTemplate(color, variant)\n\n const sizes: any = {\n small: {\n height: 24,\n gap: .5,\n px: startIcon \|\| endIcon ? .8 : 1,\n fontSize: \"small\"\n },\n medium: {\n height: 32,\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n fontSize: 'button',\n },\n large: {\n height: 40,\n fontSize: 'text',\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n }\n }\n\n return (\n <Tag\n {...cornerCss}\n {...template.primary}\n {...(sizes[size as any] \|\| {})}\n {...rest}\n sxr={{\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n transition: \"background .3s\",\n overflow: \"hidden\",\n\n \"& > *\": {\n flex: \"0 0 auto\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n },\n }}\n baseClass='chip'\n ref={ref}\n >\n {startIcon}\n <Tag\n sxr={{\n alignItems: \"center\",\n flexBox: true\n }}\n >{label}</Tag>\n {endIcon}\n </Tag>\n )\n})\n\nexport default Chip\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;~~AAiBA~~,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,KAAmB,EAAE,GAAmB,KAAI;AAC3G,IAAA,IAAI,CAAA,EAAA,CAAA,~~GAAyE~~,YAAY,CAAM,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,~~EAA5G~~,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,~~EAAlE~~,CAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,SAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,~~CAAoE~~,CAAwC;~~IACjH~~,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,IAAI,MAAM;AAAE,QAAA,EAAE,CAAC,MAAM,GAAG,MAAM;AAC9B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AAErC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AACf,IAAA,SAAS,GAAG,CAAC,CAAC,SAAS;AACvB,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO;AACnB,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,OAAO;AAC1B,IAAA,OAAO,GAAG,CAAC,CAAC,OAAO,IAAI,MAAM;AAC7B,IAAA,MAAM,GAAG,CAAC,CAAC,MAAM,IAAI,QAAQ;AAC7B,IAAA,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,QAAQ;~~IACzB~~,IAAI,CAAC,EAAE,GAAI,IAAY,CAAC,EAAE,IAAI,EAAE;AAEhC,IAAA,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC;AAEjD,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,EAAE;YACP,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,CAAC;AACjC,YAAA,QAAQ,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACnC,YAAA,QAAQ,EAAE,QAAQ;AACrB,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACV,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,CAAC;YACN,EAAE,EAAE,SAAS,IAAI,OAAO,GAAG,EAAE,GAAG,GAAG;AACtC;KACJ;IAED,QACIA,KAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,SAAS,EACT,QAAQ,CAAC,OAAO,GACf,KAAK,CAAC,IAAW,CAAC,IAAI,EAAE,GACzB,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,gBAAgB;AAC5B,YAAA,QAAQ,EAAE,QAAQ;AAElB,YAAA,QAAQ,EAAE;AACN,gBAAA,IAAI,EAAE,UAAU;AAChB,gBAAA,YAAY,EAAE,UAAU;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,QAAQ,EAAE,QAAQ;AACrB,aAAA;~~AACJ~~,~~SAAA,~~EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,SAAS,EACVC,GAAA,CAAC,GAAG,EAAA,~~EACA~~,GAAG,EAAE;AACD,oBAAA,UAAU,EAAE,QAAQ;AACpB,oBAAA,OAAO,EAAE;~~AACZ~~,iBAAA,EAAA,QAAA,EACH,KAAK,EAAA,CAAO,EACb,OAAO,CAAA,EAAA,CAAA,CACN;AAEd,CAAC;;;;"}
1	+ {"version":3,"file":"index.js","sources":["../../src/Chip/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\n\n\n\nexport type ChipProps<T extends TagComponentType = 'div'> = Omit<TagProps<T>, \"color\" \| \"children\" \| \"size\"> & {\n label: useBreakpointPropsType<string \| ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<UseCornerTypes>;\n size?: useBreakpointPropsType<\"small\" \| \"medium\" \| \"large\">;\n\n slotProps?: {\n label?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\n\nconst Chip = React.forwardRef(<T extends TagComponentType = 'div'>(props: ChipProps<T>, ref: React.Ref<any>) => {\n let [{ label, variant, startIcon, endIcon, color, corner, size, slotProps, ...rest }] = useInterface<any>(\"Chip\", props, {})\n const _p: any = {}\n if (label) _p.label = label\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n if (size) _p.size = size\n if (slotProps) _p.slotProps = slotProps\n const p: any = useBreakpointProps(_p)\n\n label = p.label\n startIcon = p.startIcon\n endIcon = p.endIcon\n color = p.color \|\| \"brand\"\n variant = p.variant \|\| \"fill\"\n corner = p.corner \|\| \"circle\"\n size = p.size \|\| \"medium\"\n slotProps = p.slotProps\n rest.sx = (rest as any).sx \|\| {};\n\n const cornerCss = useCorner(corner)\n const template = useColorTemplate(color, variant)\n\n const sizes: any = {\n small: {\n height: 24,\n gap: .5,\n px: startIcon \|\| endIcon ? .8 : 1,\n fontSize: \"small\"\n },\n medium: {\n height: 32,\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n fontSize: 'button',\n },\n large: {\n height: 40,\n fontSize: 'text',\n gap: 1,\n px: startIcon \|\| endIcon ? .8 : 1.5,\n }\n }\n\n return (\n <Tag\n {...cornerCss}\n {...template.primary}\n {...(sizes[size as any] \|\| {})}\n {...rest}\n sxr={{\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n transition: \"background .3s\",\n overflow: \"hidden\",\n\n \"& > *\": {\n flex: \"0 0 auto\",\n textOverflow: \"ellipsis\",\n whiteSpace: \"nowrap\",\n overflow: \"hidden\",\n },\n }}\n baseClass='chip'\n ref={ref}\n >\n {startIcon}\n <Tag\n {...slotProps?.label}\n baseClass='chip-label'\n sxr={{\n alignItems: \"center\",\n flexBox: true,\n color: template.primary.color + \"!important\"\n }}\n >{label}</Tag>\n {endIcon}\n </Tag>\n )\n})\n\nexport default Chip\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/Input/index.cjs CHANGED Viewed

@@ -117,7 +117,7 @@ const Input = React.forwardRef((_a, ref) => {
                             }, "& textarea": {
                                 resize: "none"
                             } }), (!!startIcon && {
-                            "& :first-child": {
+                            "& :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": {
+                            "& :last-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",

package/Input/index.cjs.map CHANGED Viewed

	@@ -1 +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\": {\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\": {\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 && <Tag\n {...slotProps?.startIcon}\n ref={refs?.startIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>} /}\n {startIcon}\n {/ <Tag\n {...slotProps?.inputContainer}\n ref={refs?.inputContainer}\n baseClass='input-container'\n flex={1}\n sxr={{\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n },\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 }}\n >\n \n </Tag> /}\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 && <Tag\n {...slotProps?.endIcon}\n ref={refs?.endIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>} */}\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;AAiDG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
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;;"}

package/Input/index.js CHANGED Viewed

@@ -115,7 +115,7 @@ const Input = React.forwardRef((_a, ref) => {
                             }, "& textarea": {
                                 resize: "none"
                             } }), (!!startIcon && {
-                            "& :first-child": {
+                            "& :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": {
+                            "& :last-child:not(.xui-input)": {
                                 height: "100%",
                                 alignItems: 'center',
                                 justifyContent: "center",

package/Input/index.js.map CHANGED Viewed

	@@ -1 +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\": {\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\": {\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 && <Tag\n {...slotProps?.startIcon}\n ref={refs?.startIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>} /}\n {startIcon}\n {/ <Tag\n {...slotProps?.inputContainer}\n ref={refs?.inputContainer}\n baseClass='input-container'\n flex={1}\n sxr={{\n width: \"100%\",\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n },\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 }}\n >\n \n </Tag> /}\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 && <Tag\n {...slotProps?.endIcon}\n ref={refs?.endIcon}\n flex={\"0 0 auto\"}\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>} */}\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;AAiDG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
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;;"}

package/package.json CHANGED Viewed

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