@xanui/ui 1.2.6 → 1.2.7

package/DataFilter/options/DateFilter.cjs

@@ -16,11 +16,11 @@ var index$5 = require('../../Calendar/index.cjs');
 const DateFilter = ({ option, onChange, value }) => {
     const [target, setTarget] = React.useState();
     const isValue = value !== null && value !== undefined && value !== "";
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { size: "small", color: "default", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { size: "small", color: "surface", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "surface", onClick: () => {
                             onChange(null);
                         }, children: jsxRuntime.jsx(Close, {}) }) }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { value: value ? new Date(value) : null, onChange: (date) => {
                         onChange((date === null || date === void 0 ? void 0 : date.toISOString()) || null);

package/DataFilter/options/DateFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateFilter.cjs","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}
+{"version":3,"file":"DateFilter.cjs","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}

package/DataFilter/options/DateFilter.js

@@ -14,11 +14,11 @@ import Calendar from '../../Calendar/index.js';
 const DateFilter = ({ option, onChange, value }) => {
     const [target, setTarget] = React.useState();
     const isValue = value !== null && value !== undefined && value !== "";
-    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(Chip, { size: "small", color: "default", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsx(IconButton, { size: 16, variant: "text", color: "default", onClick: () => {
+                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(Chip, { size: "small", color: "surface", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsx(IconButton, { size: 16, variant: "text", color: "surface", onClick: () => {
                             onChange(null);
                         }, children: jsx(Close, {}) }) }) }), jsx(Menu, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsx(Calendar, { value: value ? new Date(value) : null, onChange: (date) => {
                         onChange((date === null || date === void 0 ? void 0 : date.toISOString()) || null);

package/DataFilter/options/DateFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateFilter.js","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}
+{"version":3,"file":"DateFilter.js","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}

package/DataFilter/options/DateRangeFilter.cjs

@@ -11,10 +11,10 @@ var index$3 = require('../../CalendarInput/index.cjs');
 
 const DateRangeFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined && value.length === 2;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     const d = new Date();
                                     onChange([d.toISOString(), d.toISOString()]);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(index, { p: 1, gap: 1, width: "100%", children: [jsxRuntime.jsx(index$3, { fullWidth: true, variant: "outline", value: value[0] ? new Date(value[0]) : null, onChange: (date) => {
                                     onChange([date ? date.toISOString() : "", value ? value[1] : ""]);

package/DataFilter/options/DateRangeFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.cjs","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}
+{"version":3,"file":"DateRangeFilter.cjs","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}

package/DataFilter/options/DateRangeFilter.js

@@ -9,10 +9,10 @@ import CalenderInput from '../../CalendarInput/index.js';
 
 const DateRangeFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined && value.length === 2;
-    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     const d = new Date();
                                     onChange([d.toISOString(), d.toISOString()]);
-                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(Fragment, { children: jsxs(Stack, { p: 1, gap: 1, width: "100%", children: [jsx(CalenderInput, { fullWidth: true, variant: "outline", value: value[0] ? new Date(value[0]) : null, onChange: (date) => {
                                     onChange([date ? date.toISOString() : "", value ? value[1] : ""]);

package/DataFilter/options/DateRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}

package/DataFilter/options/MultiSelectFilter.cjs

@@ -20,12 +20,12 @@ const MultiSelectFilter = ({ option, onChange, value }) => {
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
     const isValue = value && value.length > 0;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange([]);
                                 }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && value.map((val, index) => {
-                    return (jsxRuntime.jsx(index$3, { size: "small", color: "default", label: val, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
+                    return (jsxRuntime.jsx(index$3, { size: "small", color: "surface", label: val, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "surface", onClick: () => {
                                 onChange(value.filter(v => v !== val));
                             }, children: jsxRuntime.jsx(Close, {}) }) }, index));
                 }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsxRuntime.jsx(index$6, { startIcon: jsxRuntime.jsx(index$7, { checked: value === null || value === void 0 ? void 0 : value.includes(opt.value) }), onClick: () => {

package/DataFilter/options/MultiSelectFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectFilter.cjs","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"default\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"default\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}
+{"version":3,"file":"MultiSelectFilter.cjs","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"surface\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"surface\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}

package/DataFilter/options/MultiSelectFilter.js

@@ -18,12 +18,12 @@ const MultiSelectFilter = ({ option, onChange, value }) => {
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
     const isValue = value && value.length > 0;
-    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange([]);
                                 }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && value.map((val, index) => {
-                    return (jsx(Chip, { size: "small", color: "default", label: val, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "default", onClick: () => {
+                    return (jsx(Chip, { size: "small", color: "surface", label: val, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "surface", onClick: () => {
                                 onChange(value.filter(v => v !== val));
                             }, children: jsx(Close, {}) }) }, index));
                 }) }), jsx(Menu, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsx(List, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsx(ListItem, { startIcon: jsx(Checkbox, { checked: value === null || value === void 0 ? void 0 : value.includes(opt.value) }), onClick: () => {

package/DataFilter/options/MultiSelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectFilter.js","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"default\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"default\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}
+{"version":3,"file":"MultiSelectFilter.js","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"surface\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"surface\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}

package/DataFilter/options/NumberFilter.cjs

@@ -11,9 +11,9 @@ var index$3 = require('../../InputNumber/index.cjs');
 
 const NumberFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     onChange(0);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { variant: "outline", value: value.toString(), onChange: (e) => {
                         onChange(e.target.value);

package/DataFilter/options/NumberFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFilter.cjs","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"NumberFilter.cjs","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/NumberFilter.js

@@ -9,9 +9,9 @@ import InputNumber from '../../InputNumber/index.js';
 
 const NumberFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     onChange(0);
-                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(InputNumber, { variant: "outline", value: value.toString(), onChange: (e) => {
                         onChange(e.target.value);

package/DataFilter/options/NumberFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFilter.js","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"NumberFilter.js","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/NumberRangeFilter.cjs

@@ -12,9 +12,9 @@ var index$3 = require('../../InputNumber/index.cjs');
 const NumberRangeFilter = ({ option, onChange, value }) => {
     var _a, _b;
     const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     onChange([0, 0]);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, flex: 1, children: [jsxRuntime.jsx(index$3, { flex: 1, variant: "outline", size: "small", placeholder: "Min", value: (_a = value[0]) !== null && _a !== void 0 ? _a : '', onChange: (e) => {
                                 const val = e.target.value === '' ? 0 : Number(e.target.value);

package/DataFilter/options/NumberRangeFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangeFilter.cjs","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}
+{"version":3,"file":"NumberRangeFilter.cjs","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}

package/DataFilter/options/NumberRangeFilter.js

@@ -10,9 +10,9 @@ import InputNumber from '../../InputNumber/index.js';
 const NumberRangeFilter = ({ option, onChange, value }) => {
     var _a, _b;
     const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;
-    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     onChange([0, 0]);
-                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxs(Stack, { direction: "row", gap: 0.5, flex: 1, children: [jsx(InputNumber, { flex: 1, variant: "outline", size: "small", placeholder: "Min", value: (_a = value[0]) !== null && _a !== void 0 ? _a : '', onChange: (e) => {
                                 const val = e.target.value === '' ? 0 : Number(e.target.value);

package/DataFilter/options/NumberRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangeFilter.js","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}
+{"version":3,"file":"NumberRangeFilter.js","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}

package/DataFilter/options/SelectFilter.cjs

@@ -19,11 +19,11 @@ const SelectFilter = ({ option, onChange, value }) => {
     var _a;
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsxRuntime.jsx(Add, {}) }), !!value && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsxRuntime.jsx(Add, {}) }), !!value && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsxRuntime.jsx(index$3, { size: "small", color: "default", label: value, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsxRuntime.jsx(index$3, { size: "small", color: "surface", label: value, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "surface", onClick: () => {
                             onChange(null);
                         }, children: jsxRuntime.jsx(Close, {}) }) }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsxRuntime.jsx(index$6, { startIcon: jsxRuntime.jsx(index$7, { checked: value === opt.value }), onClick: () => {
                             onChange(opt.value);

package/DataFilter/options/SelectFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.cjs","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}
+{"version":3,"file":"SelectFilter.cjs","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}

package/DataFilter/options/SelectFilter.js

@@ -17,11 +17,11 @@ const SelectFilter = ({ option, onChange, value }) => {
     var _a;
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
-    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsx(Add, {}) }), !!value && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), !!value && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsx(Chip, { size: "small", color: "default", label: value, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "default", onClick: () => {
+                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsx(Chip, { size: "small", color: "surface", label: value, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "surface", onClick: () => {
                             onChange(null);
                         }, children: jsx(Close, {}) }) }) }), jsx(Menu, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsx(List, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsx(ListItem, { startIcon: jsx(Checkbox, { checked: value === opt.value }), onClick: () => {
                             onChange(opt.value);

package/DataFilter/options/SelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}
+{"version":3,"file":"SelectFilter.js","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}

package/DataFilter/options/TextFilter.cjs

@@ -11,9 +11,9 @@ var index$3 = require('../../Input/index.cjs');
 
 const TextFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     onChange('');
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { variant: "outline", value: value.toString(), onChange: (e) => {
                         onChange(e.target.value);

package/DataFilter/options/TextFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.cjs","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"TextFilter.cjs","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/TextFilter.js

@@ -9,9 +9,9 @@ import Input from '../../Input/index.js';
 
 const TextFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
                                     onChange('');
-                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
                                 }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(Input, { variant: "outline", value: value.toString(), onChange: (e) => {
                         onChange(e.target.value);

package/DataFilter/options/TextFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.js","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"background.secondary\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"soft\"\n                  color={\"default\"}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"soft\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"TextFilter.js","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}