@xanui/ui 1.1.37 → 1.1.40

package/DataFilter/options/DateFilter.js

@@ -1,32 +1,30 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index$4 = require('../../Menu/index.js');
-var index$2 = require('../../IconButton/index.js');
-var index = require('../../Stack/index.js');
-var index$1 = require('../../Text/index.js');
-var Close = require('@xanui/icons/Close');
-var Add = require('@xanui/icons/Add');
-var ClearAll = require('@xanui/icons/ClearAll');
-var index$3 = require('../../Chip/index.js');
-var index$5 = require('../../Calendar/index.js');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Menu from '../../Menu/index.js';
+import IconButton from '../../IconButton/index.js';
+import Stack from '../../Stack/index.js';
+import Text from '../../Text/index.js';
+import Close from '@xanui/icons/Close';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import Chip from '../../Chip/index.js';
+import Calendar from '../../Calendar/index.js';
 
 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 (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) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", 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: 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: () => {
                             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) => {
+                        }, 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);
                         setTarget(undefined);
                     } }) })] }));
 };
 
-module.exports = DateFilter;
+export { DateFilter as default };
 //# sourceMappingURL=DateFilter.js.map

package/DataFilter/options/DateFilter.js.map

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

package/DataFilter/options/DateRangeFilter.cjs

@@ -0,0 +1,27 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.cjs');
+var index = require('../../Stack/index.cjs');
+var index$1 = require('../../Text/index.cjs');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+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: () => {
+                                    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: () => {
+                                    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] : ""]);
+                                } }), jsxRuntime.jsx(index$3, { fullWidth: true, variant: "outline", value: value[1] ? new Date(value[1]) : null, onChange: (date) => {
+                                    onChange([value ? value[0] : "", date ? date.toISOString() : ""]);
+                                } })] }) }) })] }));
+};
+
+module.exports = DateRangeFilter;
+//# sourceMappingURL=DateRangeFilter.cjs.map

package/DataFilter/options/DateRangeFilter.cjs.map

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

package/DataFilter/options/DateRangeFilter.js

@@ -1,27 +1,25 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var index$2 = require('../../IconButton/index.js');
-var index = require('../../Stack/index.js');
-var index$1 = require('../../Text/index.js');
-var Add = require('@xanui/icons/Add');
-var ClearAll = require('@xanui/icons/ClearAll');
-var index$3 = require('../../CalendarInput/index.js');
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import IconButton from '../../IconButton/index.js';
+import Stack from '../../Stack/index.js';
+import Text from '../../Text/index.js';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import CalenderInput from '../../CalendarInput/index.js';
 
 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 (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: () => {
                                     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: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", 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) => {
+                                }, 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] : ""]);
-                                } }), jsxRuntime.jsx(index$3, { fullWidth: true, variant: "outline", value: value[1] ? new Date(value[1]) : null, onChange: (date) => {
+                                } }), jsx(CalenderInput, { fullWidth: true, variant: "outline", value: value[1] ? new Date(value[1]) : null, onChange: (date) => {
                                     onChange([value ? value[0] : "", date ? date.toISOString() : ""]);
                                 } })] }) }) })] }));
 };
 
-module.exports = DateRangeFilter;
+export { DateRangeFilter as default };
 //# sourceMappingURL=DateRangeFilter.js.map

package/DataFilter/options/DateRangeFilter.js.map

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

package/DataFilter/options/MultiSelectFilter.cjs

@@ -0,0 +1,38 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$4 = require('../../Menu/index.cjs');
+var index$5 = require('../../List/index.cjs');
+var index$6 = require('../../ListItem/index.cjs');
+var index$7 = require('../../Checkbox/index.cjs');
+var index$2 = require('../../IconButton/index.cjs');
+var index = require('../../Stack/index.cjs');
+var index$1 = require('../../Text/index.cjs');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Chip/index.cjs');
+var Close = require('@xanui/icons/Close');
+
+const MultiSelectFilter = ({ option, onChange, value }) => {
+    var _a;
+    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) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", 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: () => {
+                                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: () => {
+                            const has = value === null || value === void 0 ? void 0 : value.includes(opt.value);
+                            onChange(has ? value === null || value === void 0 ? void 0 : value.filter(v => v !== opt.value) : [...value || [], opt.value]);
+                        }, children: opt.label }, index))) }) })] }));
+};
+
+module.exports = MultiSelectFilter;
+//# sourceMappingURL=MultiSelectFilter.cjs.map

package/DataFilter/options/MultiSelectFilter.cjs.map

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

package/DataFilter/options/MultiSelectFilter.js

@@ -1,38 +1,36 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var index$4 = require('../../Menu/index.js');
-var index$5 = require('../../List/index.js');
-var index$6 = require('../../ListItem/index.js');
-var index$7 = require('../../Checkbox/index.js');
-var index$2 = require('../../IconButton/index.js');
-var index = require('../../Stack/index.js');
-var index$1 = require('../../Text/index.js');
-var Add = require('@xanui/icons/Add');
-var ClearAll = require('@xanui/icons/ClearAll');
-var index$3 = require('../../Chip/index.js');
-var Close = require('@xanui/icons/Close');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Menu from '../../Menu/index.js';
+import List from '../../List/index.js';
+import ListItem from '../../ListItem/index.js';
+import Checkbox from '../../Checkbox/index.js';
+import IconButton from '../../IconButton/index.js';
+import Stack from '../../Stack/index.js';
+import Text from '../../Text/index.js';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import Chip from '../../Chip/index.js';
+import Close from '@xanui/icons/Close';
 
 const MultiSelectFilter = ({ option, onChange, value }) => {
     var _a;
     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 (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) => {
                                     setTarget(e.currentTarget);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", 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: () => {
+                                }, 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: () => {
                                 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: () => {
+                            }, 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: () => {
                             const has = value === null || value === void 0 ? void 0 : value.includes(opt.value);
                             onChange(has ? value === null || value === void 0 ? void 0 : value.filter(v => v !== opt.value) : [...value || [], opt.value]);
                         }, children: opt.label }, index))) }) })] }));
 };
 
-module.exports = MultiSelectFilter;
+export { MultiSelectFilter as default };
 //# sourceMappingURL=MultiSelectFilter.js.map

package/DataFilter/options/MultiSelectFilter.js.map

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

package/DataFilter/options/NumberFilter.cjs

@@ -0,0 +1,24 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.cjs');
+var index = require('../../Stack/index.cjs');
+var index$1 = require('../../Text/index.cjs');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+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: () => {
+                                    onChange(0);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", 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);
+                    }, fullWidth: true }) })] }));
+};
+
+module.exports = NumberFilter;
+//# sourceMappingURL=NumberFilter.cjs.map

package/DataFilter/options/NumberFilter.cjs.map

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

package/DataFilter/options/NumberFilter.js

@@ -1,24 +1,22 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var index$2 = require('../../IconButton/index.js');
-var index = require('../../Stack/index.js');
-var index$1 = require('../../Text/index.js');
-var Add = require('@xanui/icons/Add');
-var ClearAll = require('@xanui/icons/ClearAll');
-var index$3 = require('../../InputNumber/index.js');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import IconButton from '../../IconButton/index.js';
+import Stack from '../../Stack/index.js';
+import Text from '../../Text/index.js';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import InputNumber from '../../InputNumber/index.js';
 
 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 (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: () => {
                                     onChange(0);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", 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) => {
+                                }, 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);
                     }, fullWidth: true }) })] }));
 };
 
-module.exports = NumberFilter;
+export { NumberFilter as default };
 //# sourceMappingURL=NumberFilter.js.map

package/DataFilter/options/NumberFilter.js.map

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

package/DataFilter/options/NumberRangeFilter.cjs

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.cjs');
+var index = require('../../Stack/index.cjs');
+var index$1 = require('../../Text/index.cjs');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+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: () => {
+                                    onChange([0, 0]);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", 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);
+                                onChange([val, value ? value[1] : 0]);
+                            } }), jsxRuntime.jsx(index$3, { variant: "outline", flex: 1, size: "small", placeholder: "Max", value: (_b = value[1]) !== null && _b !== void 0 ? _b : undefined, onChange: (e) => {
+                                const val = e.target.value === '' ? 0 : Number(e.target.value);
+                                onChange([value ? value[0] : 0, val]);
+                            } })] }) })] }));
+};
+
+module.exports = NumberRangeFilter;
+//# sourceMappingURL=NumberRangeFilter.cjs.map

package/DataFilter/options/NumberRangeFilter.cjs.map

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

package/DataFilter/options/NumberRangeFilter.js

@@ -1,29 +1,27 @@
 "use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var index$2 = require('../../IconButton/index.js');
-var index = require('../../Stack/index.js');
-var index$1 = require('../../Text/index.js');
-var Add = require('@xanui/icons/Add');
-var ClearAll = require('@xanui/icons/ClearAll');
-var index$3 = require('../../InputNumber/index.js');
+import { jsxs, jsx } from 'react/jsx-runtime';
+import IconButton from '../../IconButton/index.js';
+import Stack from '../../Stack/index.js';
+import Text from '../../Text/index.js';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+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 (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 (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: () => {
                                     onChange([0, 0]);
-                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", 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) => {
+                                }, 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);
                                 onChange([val, value ? value[1] : 0]);
-                            } }), jsxRuntime.jsx(index$3, { variant: "outline", flex: 1, size: "small", placeholder: "Max", value: (_b = value[1]) !== null && _b !== void 0 ? _b : undefined, onChange: (e) => {
+                            } }), jsx(InputNumber, { variant: "outline", flex: 1, size: "small", placeholder: "Max", value: (_b = value[1]) !== null && _b !== void 0 ? _b : undefined, onChange: (e) => {
                                 const val = e.target.value === '' ? 0 : Number(e.target.value);
                                 onChange([value ? value[0] : 0, val]);
                             } })] }) })] }));
 };
 
-module.exports = NumberRangeFilter;
+export { NumberRangeFilter as default };
 //# sourceMappingURL=NumberRangeFilter.js.map

package/DataFilter/options/NumberRangeFilter.js.map

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

package/DataFilter/options/SelectFilter.cjs

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$4 = require('../../Menu/index.cjs');
+var index$5 = require('../../List/index.cjs');
+var index$6 = require('../../ListItem/index.cjs');
+var index$7 = require('../../Checkbox/index.cjs');
+var index$2 = require('../../IconButton/index.cjs');
+var index = require('../../Stack/index.cjs');
+var index$1 = require('../../Text/index.cjs');
+var Close = require('@xanui/icons/Close');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Chip/index.cjs');
+
+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) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsxRuntime.jsx(Add, {}) }), !!value && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", 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: () => {
+                            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);
+                        }, children: opt.label }, index))) }) })] }));
+};
+
+module.exports = SelectFilter;
+//# sourceMappingURL=SelectFilter.cjs.map