@xanui/ui 1.2.9 → 1.2.11

package/GalleryPicker/index.cjs

@@ -17,7 +17,7 @@ var core = require('@xanui/core');
 
 const FileCard = ({ file, onRemove }) => {
     const url = typeof file === "string" ? file : URL.createObjectURL(file);
-    return (jsxRuntime.jsxs(index$2, { width: 100, height: 100, border: "1px solid", borderColor: 'surface.divider', radius: 1, overflow: "hidden", position: "relative", children: [jsxRuntime.jsx(index$6, { size: 25, color: "danger", sx: {
+    return (jsxRuntime.jsxs(index$2, { width: 100, height: 100, border: "1px solid", borderColor: 'default.divider', radius: 1, overflow: "hidden", position: "relative", children: [jsxRuntime.jsx(index$6, { size: 25, color: "danger", sx: {
                     position: 'absolute',
                     top: 2,
                     right: 2,
@@ -63,25 +63,25 @@ const GalleryPicker = React.forwardRef((_a, ref) => {
                                 const newFiles = value.filter((_, i) => i !== index);
                                 onDelete && onDelete(file);
                                 onChange && onChange(newFiles.length > 0 ? newFiles : null);
-                            } }, index))), jsxRuntime.jsxs(index, { width: 100, height: 100, bgcolor: "surface.light", radius: 1, alignItems: "center", overflow: "hidden", border: "1px solid", borderColor: 'surface.divider', children: [jsxRuntime.jsx(index$3, Object.assign({}, filePickerProps, { alignItems: "center", justifyContent: "center", width: "100%", flex: 1, cursor: "pointer", borderBottom: "1px solid", borderColor: "surface.divider", sx: {
+                            } }, index))), jsxRuntime.jsxs(index, { width: 100, height: 100, bgcolor: "default.base", radius: 1, alignItems: "center", overflow: "hidden", border: "1px solid", borderColor: 'default.divider', children: [jsxRuntime.jsx(index$3, Object.assign({}, filePickerProps, { alignItems: "center", justifyContent: "center", width: "100%", flex: 1, cursor: "pointer", borderBottom: "1px solid", borderColor: "default.divider", sx: {
                                         '& svg': {
                                             opacity: 0.6,
                                         },
                                         "&:hover svg": {
                                             opacity: 1,
                                         }
-                                    }, children: jsxRuntime.jsx(AddPhotoAlternateOutlined, { fontSize: 28, color: "surface.muted" }) })), jsxRuntime.jsx(index$4, { size: "small", variant: "text", onClick: () => onChange && onChange(null), sx: {
+                                    }, children: jsxRuntime.jsx(AddPhotoAlternateOutlined, { fontSize: 28, color: "default.muted" }) })), jsxRuntime.jsx(index$4, { size: "small", variant: "text", onClick: () => onChange && onChange(null), sx: {
                                         height: 28,
                                     }, children: "CLEAR" })] })] })] }));
     }
     return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { baseClass: 'gallery-picker', ref: ref, sxr: {
             display: "flex"
-        }, children: [error && jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.alert, { variant: "fill", color: "danger", mb: 2, icon: jsxRuntime.jsx(index$2, { component: "img", src: URL.createObjectURL(error.file) }), children: error.message })), jsxRuntime.jsx(index$3, Object.assign({}, filePickerProps, { width: "100%", border: "1px dashed", borderColor: 'surface.divider', radius: 2, alignItems: "center", justifyContent: "center", children: jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'gallery-picker-content', sxr: {
+        }, children: [error && jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.alert, { variant: "fill", color: "danger", mb: 2, icon: jsxRuntime.jsx(index$2, { component: "img", src: URL.createObjectURL(error.file) }), children: error.message })), jsxRuntime.jsx(index$3, Object.assign({}, filePickerProps, { width: "100%", border: "1px dashed", borderColor: 'default.divider', radius: 2, alignItems: "center", justifyContent: "center", children: jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'gallery-picker-content', sxr: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",
                         p: 4,
-                    }, children: [jsxRuntime.jsx(core.Tag, { mb: 2, children: icon || jsxRuntime.jsx(AddPhotoAlternateOutlined, { fontSize: 38, color: "surface.muted" }) }), jsxRuntime.jsx(index$5, { children: title || "Drag & drop images here or click to upload." }), jsxRuntime.jsx(index$5, { variant: "button", color: "surface.muted", children: subtitle || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.` })] })) }))] })));
+                    }, children: [jsxRuntime.jsx(core.Tag, { mb: 2, children: icon || jsxRuntime.jsx(AddPhotoAlternateOutlined, { fontSize: 38, color: "default.muted" }) }), jsxRuntime.jsx(index$5, { children: title || "Drag & drop images here or click to upload." }), jsxRuntime.jsx(index$5, { variant: "button", color: "default.muted", children: subtitle || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.` })] })) }))] })));
 });
 
 module.exports = GalleryPicker;

package/GalleryPicker/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/GalleryPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport FilePicker, { FilePickerError, FilePickerProps } from '../FilePicker'\nimport Alert, { AlertProps } from \"../Alert\"\nimport Box from \"../Box\"\nimport Button from \"../Button\"\nimport IconButton from \"../IconButton\"\nimport Stack from \"../Stack\"\nimport Text from \"../Text\"\nimport AddPhotoAlternateOutlined from '@xanui/icons/AddPhotoAlternateOutlined'\nimport DeleteOutline from '@xanui/icons/DeleteOutline'\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nconst FileCard = ({ file, onRemove }: { file: File | string, onRemove: () => void }) => {\n   const url = typeof file === \"string\" ? file : URL.createObjectURL(file);\n\n   return (\n      <Box\n         width={100}\n         height={100}\n         border=\"1px solid\"\n         borderColor='surface.divider'\n         radius={1}\n         overflow=\"hidden\"\n         position=\"relative\"\n      >\n         <IconButton\n            size={25}\n            color=\"danger\"\n            sx={{\n               position: 'absolute',\n               top: 2,\n               right: 2,\n            }}\n            onClick={onRemove}\n         >\n            <DeleteOutline />\n         </IconButton>\n         <Box\n            component=\"img\"\n            src={url}\n            style={{\n               width: '100%',\n               height: '100%',\n               objectFit: 'cover',\n            }}\n         />\n      </Box>\n   )\n}\n\n\nexport type GalleryPickerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"children\"> & {\n   title?: useBreakpointPropsType<string>;\n   subtitle?: useBreakpointPropsType<string>;\n   icon?: useBreakpointPropsType<React.ReactNode>;\n   value?: (File | string)[] | null;\n   maxFileSize?: number; // in kb\n   maxFileLimits?: number;\n   onSelect?: (files: File[], oldFiles: (File | string)[] | null) => void;\n   onDelete?: (file: File | string) => void;\n   onChange?: (files: (File | string)[] | null) => void;\n   onError?: (error: FilePickerError) => void;\n\n   slotProps?: {\n      alert?: Omit<AlertProps, \"children\" | \"variant\" | \"color\" | \"icon\">;\n      filePicker?: Omit<FilePickerProps, \"multiple\" | \"accept\" | \"onChange\">;\n      content?: Omit<TagProps, \"children\">;\n   }\n}\n\nconst GalleryPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ title, subtitle, icon, value, maxFileLimits, maxFileSize, onSelect, onDelete, onChange, onError, slotProps, ...props }: GalleryPickerProps, ref: React.Ref<T>) => {\n\n   const bp: any = useBreakpointProps({\n      title,\n      subtitle,\n      icon\n   })\n\n   title = bp.title\n   subtitle = bp.subtitle\n   icon = bp.icon\n\n   const [error, setError] = React.useState<FilePickerError | null>(null);\n   maxFileLimits ??= 10\n   const filePickerProps = {\n      ...slotProps?.filePicker,\n      multiple: true,\n      accept: ['image/*'],\n      maxFileSize: maxFileSize ?? 5 * 1024, // 5MB\n      maxFileLimits,\n      onChange: (_files: File[] | null) => {\n         let all = [...((value || [])), ...(_files || [])]\n         if (all.length > maxFileLimits) {\n            setError({\n               message: `You can upload maximum ${maxFileLimits} files.`,\n               file: null as any\n            });\n            setTimeout(() => setError(null), 4000);\n            all = all.slice(0, 10);\n         }\n         if (onSelect && _files) onSelect(_files, value || [])\n         onChange && onChange(all);\n      },\n      onError: (err: FilePickerError) => {\n         setError(err);\n         onError && onError(err)\n         setTimeout(() => setError(null), 4000);\n      },\n   }\n\n   if (value && value.length > 0) {\n      return (\n         <Stack gap={2}>\n            {error && <Alert\n               variant={\"fill\"}\n               color=\"danger\"\n               mb={2}\n               icon={<Box\n                  component={\"img\"}\n                  src={URL.createObjectURL(error.file)}\n               />}\n            >\n               {error.message}\n            </Alert>}\n            <Stack direction=\"row\" gap={1} flexWrap=\"wrap\">\n               {value.map((file, index) => (\n                  <FileCard\n                     key={index}\n                     file={file}\n                     onRemove={() => {\n                        const newFiles = value.filter((_, i) => i !== index);\n                        onDelete && onDelete(file)\n                        onChange && onChange(newFiles.length > 0 ? newFiles : null);\n                     }}\n                  />\n               ))}\n               <Stack\n                  width={100}\n                  height={100}\n                  bgcolor=\"surface.light\"\n                  radius={1}\n                  alignItems=\"center\"\n                  overflow={\"hidden\"}\n                  border=\"1px solid\"\n                  borderColor='surface.divider'\n               >\n                  <FilePicker\n                     {...filePickerProps}\n                     alignItems=\"center\"\n                     justifyContent=\"center\"\n                     width={\"100%\"}\n                     flex={1}\n                     cursor={\"pointer\"}\n                     borderBottom={\"1px solid\"}\n                     borderColor=\"surface.divider\"\n                     sx={{\n                        '& svg': {\n                           opacity: 0.6,\n                        },\n                        \"&:hover svg\": {\n                           opacity: 1,\n                        }\n                     }}\n                  >\n                     <AddPhotoAlternateOutlined fontSize={28} color=\"surface.muted\" />\n                  </FilePicker>\n                  <Button\n                     size=\"small\"\n                     variant={\"text\"}\n                     onClick={() => onChange && onChange(null)}\n                     sx={{\n                        height: 28,\n                     }}\n                  >CLEAR</Button>\n               </Stack>\n            </Stack>\n\n         </Stack>\n      )\n   }\n   return (\n      <Tag\n         {...props}\n         baseClass='gallery-picker'\n         ref={ref}\n         sxr={{\n            display: \"flex\"\n         }}\n      >\n         {error && <Alert\n            {...slotProps?.alert}\n            variant={\"fill\"}\n            color=\"danger\"\n            mb={2}\n            icon={<Box\n               component={\"img\"}\n               src={URL.createObjectURL(error.file)}\n            />}\n         >\n            {error.message}\n         </Alert>}\n         <FilePicker\n            {...filePickerProps}\n            width=\"100%\"\n            border=\"1px dashed\"\n            borderColor='surface.divider'\n            radius={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n         >\n            <Tag\n               {...slotProps?.content}\n               baseClass='gallery-picker-content'\n               sxr={{\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  alignItems: \"center\",\n                  p: 4,\n               }}\n            >\n               <Tag mb={2}>\n                  {(icon as any) || <AddPhotoAlternateOutlined fontSize={38} color=\"surface.muted\" />}\n               </Tag>\n               <Text>{(title as any) || \"Drag & drop images here or click to upload.\"}</Text>\n               <Text variant=\"button\" color=\"surface.muted\">\n                  {\n                     (subtitle as any) || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.`\n                  }\n               </Text>\n            </Tag>\n         </FilePicker>\n      </Tag>\n   )\n})\n\nexport default GalleryPicker"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAcA;AACG;;AAgBY;AACA;AACA;;AAUA;AACA;AACA;;AAKf;AAsBA;;;;;;AAMI;AAED;AACA;AACA;AAEA;;AAEA;AAKG;AAEG;AACA;AACG;;AAEG;AACF;;;;;AAIoB;AACxB;AACH;;AAGG;;AAEH;;AAIA;AAmBkB;AACA;AACA;AACH;AAuBG;AACG;AACF;AACD;AACG;AACF;AACH;AASE;AACF;;AAQnB;AAMS;;AA4BM;AACA;AACA;AACA;;AAgBlB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/GalleryPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport FilePicker, { FilePickerError, FilePickerProps } from '../FilePicker'\nimport Alert, { AlertProps } from \"../Alert\"\nimport Box from \"../Box\"\nimport Button from \"../Button\"\nimport IconButton from \"../IconButton\"\nimport Stack from \"../Stack\"\nimport Text from \"../Text\"\nimport AddPhotoAlternateOutlined from '@xanui/icons/AddPhotoAlternateOutlined'\nimport DeleteOutline from '@xanui/icons/DeleteOutline'\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nconst FileCard = ({ file, onRemove }: { file: File | string, onRemove: () => void }) => {\n   const url = typeof file === \"string\" ? file : URL.createObjectURL(file);\n\n   return (\n      <Box\n         width={100}\n         height={100}\n         border=\"1px solid\"\n         borderColor='default.divider'\n         radius={1}\n         overflow=\"hidden\"\n         position=\"relative\"\n      >\n         <IconButton\n            size={25}\n            color=\"danger\"\n            sx={{\n               position: 'absolute',\n               top: 2,\n               right: 2,\n            }}\n            onClick={onRemove}\n         >\n            <DeleteOutline />\n         </IconButton>\n         <Box\n            component=\"img\"\n            src={url}\n            style={{\n               width: '100%',\n               height: '100%',\n               objectFit: 'cover',\n            }}\n         />\n      </Box>\n   )\n}\n\n\nexport type GalleryPickerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"children\"> & {\n   title?: useBreakpointPropsType<string>;\n   subtitle?: useBreakpointPropsType<string>;\n   icon?: useBreakpointPropsType<React.ReactNode>;\n   value?: (File | string)[] | null;\n   maxFileSize?: number; // in kb\n   maxFileLimits?: number;\n   onSelect?: (files: File[], oldFiles: (File | string)[] | null) => void;\n   onDelete?: (file: File | string) => void;\n   onChange?: (files: (File | string)[] | null) => void;\n   onError?: (error: FilePickerError) => void;\n\n   slotProps?: {\n      alert?: Omit<AlertProps, \"children\" | \"variant\" | \"color\" | \"icon\">;\n      filePicker?: Omit<FilePickerProps, \"multiple\" | \"accept\" | \"onChange\">;\n      content?: Omit<TagProps, \"children\">;\n   }\n}\n\nconst GalleryPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ title, subtitle, icon, value, maxFileLimits, maxFileSize, onSelect, onDelete, onChange, onError, slotProps, ...props }: GalleryPickerProps, ref: React.Ref<T>) => {\n\n   const bp: any = useBreakpointProps({\n      title,\n      subtitle,\n      icon\n   })\n\n   title = bp.title\n   subtitle = bp.subtitle\n   icon = bp.icon\n\n   const [error, setError] = React.useState<FilePickerError | null>(null);\n   maxFileLimits ??= 10\n   const filePickerProps = {\n      ...slotProps?.filePicker,\n      multiple: true,\n      accept: ['image/*'],\n      maxFileSize: maxFileSize ?? 5 * 1024, // 5MB\n      maxFileLimits,\n      onChange: (_files: File[] | null) => {\n         let all = [...((value || [])), ...(_files || [])]\n         if (all.length > maxFileLimits) {\n            setError({\n               message: `You can upload maximum ${maxFileLimits} files.`,\n               file: null as any\n            });\n            setTimeout(() => setError(null), 4000);\n            all = all.slice(0, 10);\n         }\n         if (onSelect && _files) onSelect(_files, value || [])\n         onChange && onChange(all);\n      },\n      onError: (err: FilePickerError) => {\n         setError(err);\n         onError && onError(err)\n         setTimeout(() => setError(null), 4000);\n      },\n   }\n\n   if (value && value.length > 0) {\n      return (\n         <Stack gap={2}>\n            {error && <Alert\n               variant={\"fill\"}\n               color=\"danger\"\n               mb={2}\n               icon={<Box\n                  component={\"img\"}\n                  src={URL.createObjectURL(error.file)}\n               />}\n            >\n               {error.message}\n            </Alert>}\n            <Stack direction=\"row\" gap={1} flexWrap=\"wrap\">\n               {value.map((file, index) => (\n                  <FileCard\n                     key={index}\n                     file={file}\n                     onRemove={() => {\n                        const newFiles = value.filter((_, i) => i !== index);\n                        onDelete && onDelete(file)\n                        onChange && onChange(newFiles.length > 0 ? newFiles : null);\n                     }}\n                  />\n               ))}\n               <Stack\n                  width={100}\n                  height={100}\n                  bgcolor=\"default.base\"\n                  radius={1}\n                  alignItems=\"center\"\n                  overflow={\"hidden\"}\n                  border=\"1px solid\"\n                  borderColor='default.divider'\n               >\n                  <FilePicker\n                     {...filePickerProps}\n                     alignItems=\"center\"\n                     justifyContent=\"center\"\n                     width={\"100%\"}\n                     flex={1}\n                     cursor={\"pointer\"}\n                     borderBottom={\"1px solid\"}\n                     borderColor=\"default.divider\"\n                     sx={{\n                        '& svg': {\n                           opacity: 0.6,\n                        },\n                        \"&:hover svg\": {\n                           opacity: 1,\n                        }\n                     }}\n                  >\n                     <AddPhotoAlternateOutlined fontSize={28} color=\"default.muted\" />\n                  </FilePicker>\n                  <Button\n                     size=\"small\"\n                     variant={\"text\"}\n                     onClick={() => onChange && onChange(null)}\n                     sx={{\n                        height: 28,\n                     }}\n                  >CLEAR</Button>\n               </Stack>\n            </Stack>\n\n         </Stack>\n      )\n   }\n   return (\n      <Tag\n         {...props}\n         baseClass='gallery-picker'\n         ref={ref}\n         sxr={{\n            display: \"flex\"\n         }}\n      >\n         {error && <Alert\n            {...slotProps?.alert}\n            variant={\"fill\"}\n            color=\"danger\"\n            mb={2}\n            icon={<Box\n               component={\"img\"}\n               src={URL.createObjectURL(error.file)}\n            />}\n         >\n            {error.message}\n         </Alert>}\n         <FilePicker\n            {...filePickerProps}\n            width=\"100%\"\n            border=\"1px dashed\"\n            borderColor='default.divider'\n            radius={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n         >\n            <Tag\n               {...slotProps?.content}\n               baseClass='gallery-picker-content'\n               sxr={{\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  alignItems: \"center\",\n                  p: 4,\n               }}\n            >\n               <Tag mb={2}>\n                  {(icon as any) || <AddPhotoAlternateOutlined fontSize={38} color=\"default.muted\" />}\n               </Tag>\n               <Text>{(title as any) || \"Drag & drop images here or click to upload.\"}</Text>\n               <Text variant=\"button\" color=\"default.muted\">\n                  {\n                     (subtitle as any) || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.`\n                  }\n               </Text>\n            </Tag>\n         </FilePicker>\n      </Tag>\n   )\n})\n\nexport default GalleryPicker"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAcA;AACG;;AAgBY;AACA;AACA;;AAUA;AACA;AACA;;AAKf;AAsBA;;;;;;AAMI;AAED;AACA;AACA;AAEA;;AAEA;AAKG;AAEG;AACA;AACG;;AAEG;AACF;;;;;AAIoB;AACxB;AACH;;AAGG;;AAEH;;AAIA;AAmBkB;AACA;AACA;AACH;AAuBG;AACG;AACF;AACD;AACG;AACF;AACH;AASE;AACF;;AAQnB;AAMS;;AA4BM;AACA;AACA;AACA;;AAgBlB;;"}

package/GalleryPicker/index.d.ts

@@ -20,7 +20,7 @@ type GalleryPickerProps<T extends TagComponentType = "div"> = Omit<TagProps<T>,
         content?: Omit<TagProps, "children">;
     };
 };
-declare const GalleryPicker: React__default.ForwardRefExoticComponent<Omit<GalleryPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "title" | "search" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
+declare const GalleryPicker: React__default.ForwardRefExoticComponent<Omit<GalleryPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "center" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
 
 export { GalleryPicker as default };
 export type { GalleryPickerProps };

package/GalleryPicker/index.js

@@ -15,7 +15,7 @@ import { useBreakpointProps, Tag } from '@xanui/core';
 
 const FileCard = ({ file, onRemove }) => {
     const url = typeof file === "string" ? file : URL.createObjectURL(file);
-    return (jsxs(Box, { width: 100, height: 100, border: "1px solid", borderColor: 'surface.divider', radius: 1, overflow: "hidden", position: "relative", children: [jsx(IconButton, { size: 25, color: "danger", sx: {
+    return (jsxs(Box, { width: 100, height: 100, border: "1px solid", borderColor: 'default.divider', radius: 1, overflow: "hidden", position: "relative", children: [jsx(IconButton, { size: 25, color: "danger", sx: {
                     position: 'absolute',
                     top: 2,
                     right: 2,
@@ -61,25 +61,25 @@ const GalleryPicker = React.forwardRef((_a, ref) => {
                                 const newFiles = value.filter((_, i) => i !== index);
                                 onDelete && onDelete(file);
                                 onChange && onChange(newFiles.length > 0 ? newFiles : null);
-                            } }, index))), jsxs(Stack, { width: 100, height: 100, bgcolor: "surface.light", radius: 1, alignItems: "center", overflow: "hidden", border: "1px solid", borderColor: 'surface.divider', children: [jsx(FilePicker, Object.assign({}, filePickerProps, { alignItems: "center", justifyContent: "center", width: "100%", flex: 1, cursor: "pointer", borderBottom: "1px solid", borderColor: "surface.divider", sx: {
+                            } }, index))), jsxs(Stack, { width: 100, height: 100, bgcolor: "default.base", radius: 1, alignItems: "center", overflow: "hidden", border: "1px solid", borderColor: 'default.divider', children: [jsx(FilePicker, Object.assign({}, filePickerProps, { alignItems: "center", justifyContent: "center", width: "100%", flex: 1, cursor: "pointer", borderBottom: "1px solid", borderColor: "default.divider", sx: {
                                         '& svg': {
                                             opacity: 0.6,
                                         },
                                         "&:hover svg": {
                                             opacity: 1,
                                         }
-                                    }, children: jsx(AddPhotoAlternateOutlined, { fontSize: 28, color: "surface.muted" }) })), jsx(Button, { size: "small", variant: "text", onClick: () => onChange && onChange(null), sx: {
+                                    }, children: jsx(AddPhotoAlternateOutlined, { fontSize: 28, color: "default.muted" }) })), jsx(Button, { size: "small", variant: "text", onClick: () => onChange && onChange(null), sx: {
                                         height: 28,
                                     }, children: "CLEAR" })] })] })] }));
     }
     return (jsxs(Tag, Object.assign({}, props, { baseClass: 'gallery-picker', ref: ref, sxr: {
             display: "flex"
-        }, children: [error && jsx(Alert, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.alert, { variant: "fill", color: "danger", mb: 2, icon: jsx(Box, { component: "img", src: URL.createObjectURL(error.file) }), children: error.message })), jsx(FilePicker, Object.assign({}, filePickerProps, { width: "100%", border: "1px dashed", borderColor: 'surface.divider', radius: 2, alignItems: "center", justifyContent: "center", children: jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'gallery-picker-content', sxr: {
+        }, children: [error && jsx(Alert, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.alert, { variant: "fill", color: "danger", mb: 2, icon: jsx(Box, { component: "img", src: URL.createObjectURL(error.file) }), children: error.message })), jsx(FilePicker, Object.assign({}, filePickerProps, { width: "100%", border: "1px dashed", borderColor: 'default.divider', radius: 2, alignItems: "center", justifyContent: "center", children: jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'gallery-picker-content', sxr: {
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center",
                         p: 4,
-                    }, children: [jsx(Tag, { mb: 2, children: icon || jsx(AddPhotoAlternateOutlined, { fontSize: 38, color: "surface.muted" }) }), jsx(Text, { children: title || "Drag & drop images here or click to upload." }), jsx(Text, { variant: "button", color: "surface.muted", children: subtitle || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.` })] })) }))] })));
+                    }, children: [jsx(Tag, { mb: 2, children: icon || jsx(AddPhotoAlternateOutlined, { fontSize: 38, color: "default.muted" }) }), jsx(Text, { children: title || "Drag & drop images here or click to upload." }), jsx(Text, { variant: "button", color: "default.muted", children: subtitle || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.` })] })) }))] })));
 });
 
 export { GalleryPicker as default };

package/GalleryPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/GalleryPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport FilePicker, { FilePickerError, FilePickerProps } from '../FilePicker'\nimport Alert, { AlertProps } from \"../Alert\"\nimport Box from \"../Box\"\nimport Button from \"../Button\"\nimport IconButton from \"../IconButton\"\nimport Stack from \"../Stack\"\nimport Text from \"../Text\"\nimport AddPhotoAlternateOutlined from '@xanui/icons/AddPhotoAlternateOutlined'\nimport DeleteOutline from '@xanui/icons/DeleteOutline'\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nconst FileCard = ({ file, onRemove }: { file: File | string, onRemove: () => void }) => {\n   const url = typeof file === \"string\" ? file : URL.createObjectURL(file);\n\n   return (\n      <Box\n         width={100}\n         height={100}\n         border=\"1px solid\"\n         borderColor='surface.divider'\n         radius={1}\n         overflow=\"hidden\"\n         position=\"relative\"\n      >\n         <IconButton\n            size={25}\n            color=\"danger\"\n            sx={{\n               position: 'absolute',\n               top: 2,\n               right: 2,\n            }}\n            onClick={onRemove}\n         >\n            <DeleteOutline />\n         </IconButton>\n         <Box\n            component=\"img\"\n            src={url}\n            style={{\n               width: '100%',\n               height: '100%',\n               objectFit: 'cover',\n            }}\n         />\n      </Box>\n   )\n}\n\n\nexport type GalleryPickerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"children\"> & {\n   title?: useBreakpointPropsType<string>;\n   subtitle?: useBreakpointPropsType<string>;\n   icon?: useBreakpointPropsType<React.ReactNode>;\n   value?: (File | string)[] | null;\n   maxFileSize?: number; // in kb\n   maxFileLimits?: number;\n   onSelect?: (files: File[], oldFiles: (File | string)[] | null) => void;\n   onDelete?: (file: File | string) => void;\n   onChange?: (files: (File | string)[] | null) => void;\n   onError?: (error: FilePickerError) => void;\n\n   slotProps?: {\n      alert?: Omit<AlertProps, \"children\" | \"variant\" | \"color\" | \"icon\">;\n      filePicker?: Omit<FilePickerProps, \"multiple\" | \"accept\" | \"onChange\">;\n      content?: Omit<TagProps, \"children\">;\n   }\n}\n\nconst GalleryPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ title, subtitle, icon, value, maxFileLimits, maxFileSize, onSelect, onDelete, onChange, onError, slotProps, ...props }: GalleryPickerProps, ref: React.Ref<T>) => {\n\n   const bp: any = useBreakpointProps({\n      title,\n      subtitle,\n      icon\n   })\n\n   title = bp.title\n   subtitle = bp.subtitle\n   icon = bp.icon\n\n   const [error, setError] = React.useState<FilePickerError | null>(null);\n   maxFileLimits ??= 10\n   const filePickerProps = {\n      ...slotProps?.filePicker,\n      multiple: true,\n      accept: ['image/*'],\n      maxFileSize: maxFileSize ?? 5 * 1024, // 5MB\n      maxFileLimits,\n      onChange: (_files: File[] | null) => {\n         let all = [...((value || [])), ...(_files || [])]\n         if (all.length > maxFileLimits) {\n            setError({\n               message: `You can upload maximum ${maxFileLimits} files.`,\n               file: null as any\n            });\n            setTimeout(() => setError(null), 4000);\n            all = all.slice(0, 10);\n         }\n         if (onSelect && _files) onSelect(_files, value || [])\n         onChange && onChange(all);\n      },\n      onError: (err: FilePickerError) => {\n         setError(err);\n         onError && onError(err)\n         setTimeout(() => setError(null), 4000);\n      },\n   }\n\n   if (value && value.length > 0) {\n      return (\n         <Stack gap={2}>\n            {error && <Alert\n               variant={\"fill\"}\n               color=\"danger\"\n               mb={2}\n               icon={<Box\n                  component={\"img\"}\n                  src={URL.createObjectURL(error.file)}\n               />}\n            >\n               {error.message}\n            </Alert>}\n            <Stack direction=\"row\" gap={1} flexWrap=\"wrap\">\n               {value.map((file, index) => (\n                  <FileCard\n                     key={index}\n                     file={file}\n                     onRemove={() => {\n                        const newFiles = value.filter((_, i) => i !== index);\n                        onDelete && onDelete(file)\n                        onChange && onChange(newFiles.length > 0 ? newFiles : null);\n                     }}\n                  />\n               ))}\n               <Stack\n                  width={100}\n                  height={100}\n                  bgcolor=\"surface.light\"\n                  radius={1}\n                  alignItems=\"center\"\n                  overflow={\"hidden\"}\n                  border=\"1px solid\"\n                  borderColor='surface.divider'\n               >\n                  <FilePicker\n                     {...filePickerProps}\n                     alignItems=\"center\"\n                     justifyContent=\"center\"\n                     width={\"100%\"}\n                     flex={1}\n                     cursor={\"pointer\"}\n                     borderBottom={\"1px solid\"}\n                     borderColor=\"surface.divider\"\n                     sx={{\n                        '& svg': {\n                           opacity: 0.6,\n                        },\n                        \"&:hover svg\": {\n                           opacity: 1,\n                        }\n                     }}\n                  >\n                     <AddPhotoAlternateOutlined fontSize={28} color=\"surface.muted\" />\n                  </FilePicker>\n                  <Button\n                     size=\"small\"\n                     variant={\"text\"}\n                     onClick={() => onChange && onChange(null)}\n                     sx={{\n                        height: 28,\n                     }}\n                  >CLEAR</Button>\n               </Stack>\n            </Stack>\n\n         </Stack>\n      )\n   }\n   return (\n      <Tag\n         {...props}\n         baseClass='gallery-picker'\n         ref={ref}\n         sxr={{\n            display: \"flex\"\n         }}\n      >\n         {error && <Alert\n            {...slotProps?.alert}\n            variant={\"fill\"}\n            color=\"danger\"\n            mb={2}\n            icon={<Box\n               component={\"img\"}\n               src={URL.createObjectURL(error.file)}\n            />}\n         >\n            {error.message}\n         </Alert>}\n         <FilePicker\n            {...filePickerProps}\n            width=\"100%\"\n            border=\"1px dashed\"\n            borderColor='surface.divider'\n            radius={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n         >\n            <Tag\n               {...slotProps?.content}\n               baseClass='gallery-picker-content'\n               sxr={{\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  alignItems: \"center\",\n                  p: 4,\n               }}\n            >\n               <Tag mb={2}>\n                  {(icon as any) || <AddPhotoAlternateOutlined fontSize={38} color=\"surface.muted\" />}\n               </Tag>\n               <Text>{(title as any) || \"Drag & drop images here or click to upload.\"}</Text>\n               <Text variant=\"button\" color=\"surface.muted\">\n                  {\n                     (subtitle as any) || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.`\n                  }\n               </Text>\n            </Tag>\n         </FilePicker>\n      </Tag>\n   )\n})\n\nexport default GalleryPicker"],"names":[],"mappings":";;;;;;;;;;;;;;;AAcA;AACG;;AAgBY;AACA;AACA;;AAUA;AACA;AACA;;AAKf;AAsBA;;;;;;AAMI;AAED;AACA;AACA;AAEA;;AAEA;AAKG;AAEG;AACA;AACG;;AAEG;AACF;;;;;AAIoB;AACxB;AACH;;AAGG;;AAEH;;AAIA;AAmBkB;AACA;AACA;AACH;AAuBG;AACG;AACF;AACD;AACG;AACF;AACH;AASE;AACF;;AAQnB;AAMS;;AA4BM;AACA;AACA;AACA;;AAgBlB;;"}
+{"version":3,"file":"index.js","sources":["../../src/GalleryPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport FilePicker, { FilePickerError, FilePickerProps } from '../FilePicker'\nimport Alert, { AlertProps } from \"../Alert\"\nimport Box from \"../Box\"\nimport Button from \"../Button\"\nimport IconButton from \"../IconButton\"\nimport Stack from \"../Stack\"\nimport Text from \"../Text\"\nimport AddPhotoAlternateOutlined from '@xanui/icons/AddPhotoAlternateOutlined'\nimport DeleteOutline from '@xanui/icons/DeleteOutline'\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nconst FileCard = ({ file, onRemove }: { file: File | string, onRemove: () => void }) => {\n   const url = typeof file === \"string\" ? file : URL.createObjectURL(file);\n\n   return (\n      <Box\n         width={100}\n         height={100}\n         border=\"1px solid\"\n         borderColor='default.divider'\n         radius={1}\n         overflow=\"hidden\"\n         position=\"relative\"\n      >\n         <IconButton\n            size={25}\n            color=\"danger\"\n            sx={{\n               position: 'absolute',\n               top: 2,\n               right: 2,\n            }}\n            onClick={onRemove}\n         >\n            <DeleteOutline />\n         </IconButton>\n         <Box\n            component=\"img\"\n            src={url}\n            style={{\n               width: '100%',\n               height: '100%',\n               objectFit: 'cover',\n            }}\n         />\n      </Box>\n   )\n}\n\n\nexport type GalleryPickerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"children\"> & {\n   title?: useBreakpointPropsType<string>;\n   subtitle?: useBreakpointPropsType<string>;\n   icon?: useBreakpointPropsType<React.ReactNode>;\n   value?: (File | string)[] | null;\n   maxFileSize?: number; // in kb\n   maxFileLimits?: number;\n   onSelect?: (files: File[], oldFiles: (File | string)[] | null) => void;\n   onDelete?: (file: File | string) => void;\n   onChange?: (files: (File | string)[] | null) => void;\n   onError?: (error: FilePickerError) => void;\n\n   slotProps?: {\n      alert?: Omit<AlertProps, \"children\" | \"variant\" | \"color\" | \"icon\">;\n      filePicker?: Omit<FilePickerProps, \"multiple\" | \"accept\" | \"onChange\">;\n      content?: Omit<TagProps, \"children\">;\n   }\n}\n\nconst GalleryPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ title, subtitle, icon, value, maxFileLimits, maxFileSize, onSelect, onDelete, onChange, onError, slotProps, ...props }: GalleryPickerProps, ref: React.Ref<T>) => {\n\n   const bp: any = useBreakpointProps({\n      title,\n      subtitle,\n      icon\n   })\n\n   title = bp.title\n   subtitle = bp.subtitle\n   icon = bp.icon\n\n   const [error, setError] = React.useState<FilePickerError | null>(null);\n   maxFileLimits ??= 10\n   const filePickerProps = {\n      ...slotProps?.filePicker,\n      multiple: true,\n      accept: ['image/*'],\n      maxFileSize: maxFileSize ?? 5 * 1024, // 5MB\n      maxFileLimits,\n      onChange: (_files: File[] | null) => {\n         let all = [...((value || [])), ...(_files || [])]\n         if (all.length > maxFileLimits) {\n            setError({\n               message: `You can upload maximum ${maxFileLimits} files.`,\n               file: null as any\n            });\n            setTimeout(() => setError(null), 4000);\n            all = all.slice(0, 10);\n         }\n         if (onSelect && _files) onSelect(_files, value || [])\n         onChange && onChange(all);\n      },\n      onError: (err: FilePickerError) => {\n         setError(err);\n         onError && onError(err)\n         setTimeout(() => setError(null), 4000);\n      },\n   }\n\n   if (value && value.length > 0) {\n      return (\n         <Stack gap={2}>\n            {error && <Alert\n               variant={\"fill\"}\n               color=\"danger\"\n               mb={2}\n               icon={<Box\n                  component={\"img\"}\n                  src={URL.createObjectURL(error.file)}\n               />}\n            >\n               {error.message}\n            </Alert>}\n            <Stack direction=\"row\" gap={1} flexWrap=\"wrap\">\n               {value.map((file, index) => (\n                  <FileCard\n                     key={index}\n                     file={file}\n                     onRemove={() => {\n                        const newFiles = value.filter((_, i) => i !== index);\n                        onDelete && onDelete(file)\n                        onChange && onChange(newFiles.length > 0 ? newFiles : null);\n                     }}\n                  />\n               ))}\n               <Stack\n                  width={100}\n                  height={100}\n                  bgcolor=\"default.base\"\n                  radius={1}\n                  alignItems=\"center\"\n                  overflow={\"hidden\"}\n                  border=\"1px solid\"\n                  borderColor='default.divider'\n               >\n                  <FilePicker\n                     {...filePickerProps}\n                     alignItems=\"center\"\n                     justifyContent=\"center\"\n                     width={\"100%\"}\n                     flex={1}\n                     cursor={\"pointer\"}\n                     borderBottom={\"1px solid\"}\n                     borderColor=\"default.divider\"\n                     sx={{\n                        '& svg': {\n                           opacity: 0.6,\n                        },\n                        \"&:hover svg\": {\n                           opacity: 1,\n                        }\n                     }}\n                  >\n                     <AddPhotoAlternateOutlined fontSize={28} color=\"default.muted\" />\n                  </FilePicker>\n                  <Button\n                     size=\"small\"\n                     variant={\"text\"}\n                     onClick={() => onChange && onChange(null)}\n                     sx={{\n                        height: 28,\n                     }}\n                  >CLEAR</Button>\n               </Stack>\n            </Stack>\n\n         </Stack>\n      )\n   }\n   return (\n      <Tag\n         {...props}\n         baseClass='gallery-picker'\n         ref={ref}\n         sxr={{\n            display: \"flex\"\n         }}\n      >\n         {error && <Alert\n            {...slotProps?.alert}\n            variant={\"fill\"}\n            color=\"danger\"\n            mb={2}\n            icon={<Box\n               component={\"img\"}\n               src={URL.createObjectURL(error.file)}\n            />}\n         >\n            {error.message}\n         </Alert>}\n         <FilePicker\n            {...filePickerProps}\n            width=\"100%\"\n            border=\"1px dashed\"\n            borderColor='default.divider'\n            radius={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n         >\n            <Tag\n               {...slotProps?.content}\n               baseClass='gallery-picker-content'\n               sxr={{\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  alignItems: \"center\",\n                  p: 4,\n               }}\n            >\n               <Tag mb={2}>\n                  {(icon as any) || <AddPhotoAlternateOutlined fontSize={38} color=\"default.muted\" />}\n               </Tag>\n               <Text>{(title as any) || \"Drag & drop images here or click to upload.\"}</Text>\n               <Text variant=\"button\" color=\"default.muted\">\n                  {\n                     (subtitle as any) || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.`\n                  }\n               </Text>\n            </Tag>\n         </FilePicker>\n      </Tag>\n   )\n})\n\nexport default GalleryPicker"],"names":[],"mappings":";;;;;;;;;;;;;;;AAcA;AACG;;AAgBY;AACA;AACA;;AAUA;AACA;AACA;;AAKf;AAsBA;;;;;;AAMI;AAED;AACA;AACA;AAEA;;AAEA;AAKG;AAEG;AACA;AACG;;AAEG;AACF;;;;;AAIoB;AACxB;AACH;;AAGG;;AAEH;;AAIA;AAmBkB;AACA;AACA;AACH;AAuBG;AACG;AACF;AACD;AACG;AACF;AACH;AASE;AACF;;AAQnB;AAMS;;AA4BM;AACA;AACA;AACA;;AAgBlB;;"}

package/Input/index.cjs

@@ -110,9 +110,9 @@ const Input = React.forwardRef((_a, ref) => {
         }, children: [!!label && jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
                     width: "100%",
                     overflow: "hidden",
-                }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.ghost" : variant === "fill" ? "surface.light" : "transparent", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
-                                "-webkit-text-fill-color": "surface.contrast",
-                                "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.surface.light : theme.colors.surface.main} inset`,
+                }, children: [jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.ghost" : variant === "fill" ? "default.base" : "transparent", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
+                                "-webkit-text-fill-color": "default.contrast",
+                                "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.default.base : theme.colors.default.base} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }, "& textarea": {
                                 resize: "none"
@@ -122,7 +122,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 alignItems: 'center',
                                 justifyContent: "center",
                                 display: "flex",
-                                color: error ? "danger.main" : "surface.muted",
+                                color: error ? "danger.base" : "default.muted",
                                 flex: "0 0 auto",
                             },
                         })), (!!endIcon && {
@@ -131,14 +131,14 @@ const Input = React.forwardRef((_a, ref) => {
                                 alignItems: 'center',
                                 justifyContent: "center",
                                 display: 'flex',
-                                color: error ? "danger.main" : "surface.muted",
+                                color: error ? "danger.base" : "default.muted",
                                 flex: "0 0 auto",
                             },
                         })), disabled: disabled || false, children: [startIcon, jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
                                     border: 0,
                                     outline: 0,
                                     bgcolor: "transparent",
-                                    color: error ? "danger.main" : "surface.contrast",
+                                    color: error ? "danger.base" : "default.contrast",
                                     fontSize: _size.fontSize,
                                     height: multiline ? "auto" : _size.height + "px!important",
                                     width: "100%",
@@ -150,7 +150,7 @@ const Input = React.forwardRef((_a, ref) => {
                                     focused !== null && focused !== void 0 ? focused : setFocused(false);
                                     onBlur && onBlur(e);
                                 }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })), endIcon] })), helperText && jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
-                            color: error ? "danger.main" : "surface.contrast",
+                            color: error ? "danger.base" : "default.contrast",
                             fontSize: "small",
                             lineHeight: "text",
                             fontWeight: 'text',

package/Input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\n    name?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    autoFocus?: boolean;\n    autoComplete?: string;\n    label?: useBreakpointPropsType<string>;\n\n    onFocus?: (e: React.FocusEvent<any>) => void;\n    onBlur?: (e: React.FocusEvent<any>) => void;\n    onChange?: (e: React.ChangeEvent<any>) => void;\n    onInput?: (e: React.FormEvent<any>) => void;\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    fullWidth?: boolean;\n\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;\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 ?? \"primary\"\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\" : `${color}.divider`)\n    borderColor = error ? \"danger.divider\" : 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.ghost\" : variant === \"fill\" ? \"surface.light\" : \"transparent\",\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\": \"surface.contrast\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.surface.light : theme.colors.surface.main} 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.main\" : \"surface.muted\",\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.main\" : \"surface.muted\",\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.main\" : \"surface.contrast\",\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.main\" : \"surface.contrast\",\n                        fontSize: \"small\",\n                        lineHeight: \"text\",\n                        fontWeight: 'text',\n                        pl: .5,\n                    }}\n                >{helperText}</Tag>}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\n    name?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    autoFocus?: boolean;\n    autoComplete?: string;\n    label?: useBreakpointPropsType<string>;\n\n    onFocus?: (e: React.FocusEvent<any>) => void;\n    onBlur?: (e: React.FocusEvent<any>) => void;\n    onChange?: (e: React.ChangeEvent<any>) => void;\n    onInput?: (e: React.FormEvent<any>) => void;\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    fullWidth?: boolean;\n\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        inputRoot?: React.Ref<\"div\">;\n        label?: React.Ref<\"label\">;\n        rootContainer?: React.Ref<\"div\">;\n        // startIcon?: React.Ref<ReactElement>;\n        // endIcon?: React.Ref<ReactElement>;\n        // inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n        label?: Omit<LabelProps, \"children\">;\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n        label,\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"primary\"\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\" : `${color}.divider`)\n    borderColor = error ? \"danger.divider\" : 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.ghost\" : variant === \"fill\" ? \"default.base\" : \"transparent\",\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\": \"default.contrast\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.default.base : theme.colors.default.base} 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.base\" : \"default.muted\",\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.base\" : \"default.muted\",\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.base\" : \"default.contrast\",\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.base\" : \"default.contrast\",\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.d.ts

@@ -25,7 +25,7 @@ type InputProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "size" |
     endIcon?: useBreakpointPropsType<ReactElement>;
     iconPlacement?: useBreakpointPropsType<"start" | "center" | "end">;
     focused?: boolean;
-    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;
+    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;
     variant?: useBreakpointPropsType<"fill" | "outline" | "text">;
     error?: boolean;
     helperText?: useBreakpointPropsType<string>;

package/Input/index.js

@@ -108,9 +108,9 @@ const Input = React.forwardRef((_a, ref) => {
         }, children: [!!label && jsx(Label, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.label, { ref: refs === null || refs === void 0 ? void 0 : refs.label, children: label })), jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputRoot, { ref: refs === null || refs === void 0 ? void 0 : refs.inputRoot, baseClass: 'input-root', sxr: {
                     width: "100%",
                     overflow: "hidden",
-                }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.ghost" : variant === "fill" ? "surface.light" : "transparent", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
-                                "-webkit-text-fill-color": "surface.contrast",
-                                "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.surface.light : theme.colors.surface.main} inset`,
+                }, children: [jsxs(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rootContainer, { ref: refs === null || refs === void 0 ? void 0 : refs.rootContainer, baseClass: 'input-root-container', sxr: Object.assign(Object.assign(Object.assign(Object.assign({ width: "100%", display: "flex", flexDirection: "row", alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`, flexWrap: "nowrap", transitionProperty: "border, box-shadow, background", bgcolor: error ? "danger.ghost" : variant === "fill" ? "default.base" : "transparent", border: variant === "text" ? 0 : "1px solid", borderColor: borderColor, borderRadius: 1, px: 1 }, _size), { height: multiline ? "auto" : _size.height, minHeight: _size.height, "& > input:-webkit-autofill,& > input:-webkit-autofill:hover, & > input:-webkit-autofill:focus,& > input:-webkit-autofill:active": {
+                                "-webkit-text-fill-color": "default.contrast",
+                                "box-shadow": `0 0 0px 1000px ${variant === "fill" ? theme.colors.default.base : theme.colors.default.base} inset`,
                                 transition: "background-color 5000s ease-in-out 0s"
                             }, "& textarea": {
                                 resize: "none"
@@ -120,7 +120,7 @@ const Input = React.forwardRef((_a, ref) => {
                                 alignItems: 'center',
                                 justifyContent: "center",
                                 display: "flex",
-                                color: error ? "danger.main" : "surface.muted",
+                                color: error ? "danger.base" : "default.muted",
                                 flex: "0 0 auto",
                             },
                         })), (!!endIcon && {
@@ -129,14 +129,14 @@ const Input = React.forwardRef((_a, ref) => {
                                 alignItems: 'center',
                                 justifyContent: "center",
                                 display: 'flex',
-                                color: error ? "danger.main" : "surface.muted",
+                                color: error ? "danger.base" : "default.muted",
                                 flex: "0 0 auto",
                             },
                         })), disabled: disabled || false, children: [startIcon, jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input, { ref: inputMergeRef, baseClass: 'input', component: multiline ? 'textarea' : 'input' }, multiprops, { sxr: {
                                     border: 0,
                                     outline: 0,
                                     bgcolor: "transparent",
-                                    color: error ? "danger.main" : "surface.contrast",
+                                    color: error ? "danger.base" : "default.contrast",
                                     fontSize: _size.fontSize,
                                     height: multiline ? "auto" : _size.height + "px!important",
                                     width: "100%",
@@ -148,7 +148,7 @@ const Input = React.forwardRef((_a, ref) => {
                                     focused !== null && focused !== void 0 ? focused : setFocused(false);
                                     onBlur && onBlur(e);
                                 }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, name: name, placeholder: placeholder, type: type, readOnly: readOnly, autoComplete: autoComplete })), endIcon] })), helperText && jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.helperText, { ref: refs === null || refs === void 0 ? void 0 : refs.helperText, baseClass: "input-helper-text", sxr: {
-                            color: error ? "danger.main" : "surface.contrast",
+                            color: error ? "danger.base" : "default.contrast",
                             fontSize: "small",
                             lineHeight: "text",
                             fontWeight: 'text',

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\n    name?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    autoFocus?: boolean;\n    autoComplete?: string;\n    label?: useBreakpointPropsType<string>;\n\n    onFocus?: (e: React.FocusEvent<any>) => void;\n    onBlur?: (e: React.FocusEvent<any>) => void;\n    onChange?: (e: React.ChangeEvent<any>) => void;\n    onInput?: (e: React.FormEvent<any>) => void;\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    fullWidth?: boolean;\n\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'surface'>>;\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 ?? \"primary\"\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\" : `${color}.divider`)\n    borderColor = error ? \"danger.divider\" : 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.ghost\" : variant === \"fill\" ? \"surface.light\" : \"transparent\",\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\": \"surface.contrast\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.surface.light : theme.colors.surface.main} 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.main\" : \"surface.muted\",\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.main\" : \"surface.muted\",\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.main\" : \"surface.contrast\",\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.main\" : \"surface.contrast\",\n                        fontSize: \"small\",\n                        lineHeight: \"text\",\n                        fontWeight: 'text',\n                        pl: .5,\n                    }}\n                >{helperText}</Tag>}\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AA6DA;;;AACI;;AAmCA;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAGG;AACI;AACA;AACA;AACA;;AAEA;AACH;AACJ;AAaG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AAiBA;AACA;AACA;AACA;AACH;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\nimport Label, { LabelProps } from '../Label';\n\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" | \"color\" | \"label\"> & {\n    value?: string;\n    type?: TagProps<'input'>['type'];\n    name?: string;\n    placeholder?: string;\n    readOnly?: boolean;\n    autoFocus?: boolean;\n    autoComplete?: string;\n    label?: useBreakpointPropsType<string>;\n\n    onFocus?: (e: React.FocusEvent<any>) => void;\n    onBlur?: (e: React.FocusEvent<any>) => void;\n    onChange?: (e: React.ChangeEvent<any>) => void;\n    onInput?: (e: React.FormEvent<any>) => void;\n    onKeyDown?: (e: React.KeyboardEvent<any>) => void;\n    onKeyUp?: (e: React.KeyboardEvent<any>) => void;\n\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    fullWidth?: boolean;\n\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, 'default'>>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n\n    refs?: {\n        inputRoot?: React.Ref<\"div\">;\n        label?: React.Ref<\"label\">;\n        rootContainer?: React.Ref<\"div\">;\n        // startIcon?: React.Ref<ReactElement>;\n        // endIcon?: React.Ref<ReactElement>;\n        // inputContainer?: React.Ref<\"div\">;\n        input?: React.Ref<'input' | 'textarea'>;\n        helperText?: React.Ref<\"div\">;\n    };\n\n    slotProps?: {\n        inputRoot?: Omit<TagProps<\"div\">, \"children\">;\n        label?: Omit<LabelProps, \"children\">;\n        rootContainer?: Omit<TagProps<\"div\">, \"children\">;\n        // startIcon?: Omit<TagProps<'div'>, \"children\">;\n        // endIcon?: Omit<TagProps<'div'>, \"children\">;\n        // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\n        helperText?: Omit<TagProps<\"div\">, \"children\">;\n        input?: Partial<TagProps<T>>;\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        color,\n        label,\n        name,\n        placeholder,\n        type,\n        readOnly,\n        autoFocus,\n        autoComplete,\n        onFocus,\n        onBlur,\n        onChange,\n        onKeyDown,\n        onKeyUp,\n\n        focused,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        fullWidth,\n        slotProps,\n\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"primary\"\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\" : `${color}.divider`)\n    borderColor = error ? \"danger.divider\" : 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.ghost\" : variant === \"fill\" ? \"default.base\" : \"transparent\",\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\": \"default.contrast\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.default.base : theme.colors.default.base} 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.base\" : \"default.muted\",\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.base\" : \"default.muted\",\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.base\" : \"default.contrast\",\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.base\" : \"default.contrast\",\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/Label/index.cjs

@@ -14,7 +14,7 @@ const Label = React.forwardRef((_a, ref) => {
             verticalAlign: "middle",
             fontSize: "text",
             gap: .4,
-            color: "surface.contrast",
+            color: "default.contrast",
             userSelect: "none",
             cursor: "pointer",
             fontWeight: "500",

package/Label/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"surface.contrast\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"default.contrast\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}

package/Label/index.js

@@ -12,7 +12,7 @@ const Label = React.forwardRef((_a, ref) => {
             verticalAlign: "middle",
             fontSize: "text",
             gap: .4,
-            color: "surface.contrast",
+            color: "default.contrast",
             userSelect: "none",
             cursor: "pointer",
             fontWeight: "500",

package/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"surface.contrast\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"default.contrast\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":[],"mappings":";;;;;;AAMA;AAAsE;;AAK1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKZ;;"}

package/LineProgress/index.cjs

@@ -38,10 +38,10 @@ const LineProgress = React.forwardRef((_a, ref) => {
             height: thumbSize,
             position: "relative",
             overflow: "hidden",
-            bgcolor: hideTrack ? "transparent" : `surface.divider`,
+            bgcolor: hideTrack ? "transparent" : `default.divider`,
             radius: 2,
         }, ref: ref, children: jsxRuntime.jsx(core.Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
-                bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,
+                bgcolor: color === 'default' ? `default.contrast` : `${color}`,
                 width: isVal ? `${value}%` : "50%",
                 height: thumbSize,
                 position: "absolute",

package/LineProgress/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `surface.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `default.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'default' ? `default.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/LineProgress/index.js

@@ -36,10 +36,10 @@ const LineProgress = React.forwardRef((_a, ref) => {
             height: thumbSize,
             position: "relative",
             overflow: "hidden",
-            bgcolor: hideTrack ? "transparent" : `surface.divider`,
+            bgcolor: hideTrack ? "transparent" : `default.divider`,
             radius: 2,
         }, ref: ref, children: jsx(Tag, { component: "span", baseClass: "line-progress-thumb", sxr: {
-                bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,
+                bgcolor: color === 'default' ? `default.contrast` : `${color}`,
                 width: isVal ? `${value}%` : "50%",
                 height: thumbSize,
                 position: "absolute",

package/LineProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `surface.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'surface' ? `surface.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"primary\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed ?? 1\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : `default.divider`,\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'default' ? `default.contrast` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}

package/ListItem/index.cjs

@@ -21,8 +21,8 @@ const ListItem = React.forwardRef((_a, ref) => {
     const p = core.useBreakpointProps(_p);
     const listProps = ListContext.useListContext();
     const template = core.useColorTemplate(listProps.color, listProps.variant);
-    const defaultTemplate = core.useColorTemplate("surface", "text");
-    const hoverTemplate = core.useColorTemplate('surface', "fill");
+    const defaultTemplate = core.useColorTemplate("default", "text");
+    const hoverTemplate = core.useColorTemplate('default', "fill");
     subtitle = p.subtitle;
     startIcon = p.startIcon;
     endIcon = p.endIcon;