@xanui/ui 1.2.6 → 1.2.8

package/Collaps/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps, TransitionProps } from '@xanui/core';
 
 type CollapsProps<T extends TagComponentType = "div"> = TagProps<T> & Omit<TransitionProps, "variant" | "children"> & {};
-declare const Collaps: React.ForwardRefExoticComponent<Omit<CollapsProps<TagComponentType>, "ref"> & React.RefAttributes<unknown>>;
+declare const Collaps: React__default.ForwardRefExoticComponent<Omit<CollapsProps<TagComponentType>, "ref"> & React__default.RefAttributes<unknown>>;
 
 export { Collaps as default };
 export type { CollapsProps };

package/Collaps/index.js

@@ -6,7 +6,7 @@ import { useInterface, Transition, Tag } from '@xanui/core';
 
 const Collaps = React.forwardRef((_a, ref) => {
     var { children, open } = _a, props = __rest(_a, ["children", "open"]);
-    let [_b] = useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onOpen, onOpened, onClose, onClosed } = _b, rest = __rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onOpen", "onOpened", "onClose", "onClosed"]);
+    let [_b] = useInterface("Collaps", props, {}), { ease, easing, duration, delay, onStart, onFinish, onEnter, onEntered, onExit, onExited } = _b, rest = __rest(_b, ["ease", "easing", "duration", "delay", "onStart", "onFinish", "onEnter", "onEntered", "onExit", "onExited"]);
     open !== null && open !== void 0 ? open : (open = false);
     easing !== null && easing !== void 0 ? easing : (easing = "standard");
     return (jsx(Transition, { ease,
@@ -15,10 +15,10 @@ const Collaps = React.forwardRef((_a, ref) => {
         delay,
         onStart,
         onFinish,
-        onOpen,
-        onOpened,
-        onClose,
-        onClosed, disableInitialTransition: true, variant: "collapseVertical", open: open, children: jsx(Tag, Object.assign({}, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
+        onEnter,
+        onEntered,
+        onExit,
+        onExited, initialTransition: false, variant: "collapseVertical", open: open, children: jsx(Tag, Object.assign({ overflow: "hidden" }, rest, { baseClass: 'collaps', ref: ref, children: children })) }));
 });
 
 export { Collaps as default };

package/Collaps/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onOpen,\n                onOpened,\n                onClose,\n                onClosed\n            }}\n            disableInitialTransition\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":[],"mappings":";;;;;;AAQA;;AACI;;;AAiBA;;;;;;;;;AAYY;AAahB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Collaps/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, TransitionProps, Transition } from '@xanui/core';\n\nexport type CollapsProps<T extends TagComponentType = \"div\"> = TagProps<T> & Omit<TransitionProps, \"variant\" | \"children\"> & {\n\n}\n\nconst Collaps = React.forwardRef(<T extends TagComponentType = \"div\">({ children, open, ...props }: CollapsProps<T>, ref: any) => {\n    let [{\n        ease,\n        easing,\n        duration,\n        delay,\n        onStart,\n        onFinish,\n        onEnter,\n        onEntered,\n        onExit,\n        onExited,\n        ...rest\n    }] = useInterface<any>(\"Collaps\", props, {})\n\n    open ??= false\n    easing ??= \"standard\"\n\n    return (\n        <Transition\n            {...{\n                ease,\n                easing,\n                duration,\n                delay,\n                onStart,\n                onFinish,\n                onEnter,\n                onEntered,\n                onExit,\n                onExited\n            }}\n            initialTransition={false}\n            variant=\"collapseVertical\"\n            open={open}\n        >\n            <Tag\n                overflow={\"hidden\"}\n                {...rest}\n                baseClass='collaps'\n                ref={ref}\n            >{children}</Tag>\n        </Transition>\n    )\n})\n\nexport default Collaps\n\n\n"],"names":[],"mappings":";;;;;;AAQA;;AACI;;;AAiBA;;;;;;;;;AAYY;AAchB;;"}

package/Container/index.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
 
 type ContainerProps<T extends TagComponentType = "div"> = TagProps<T> & {
     maxWidth?: useBreakpointPropsType<'lg' | 'md' | "sm" | 'xs'>;
 };
-declare const Container: React.ForwardRefExoticComponent<Omit<ContainerProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Container: React__default.ForwardRefExoticComponent<Omit<ContainerProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Container as default };
 export type { ContainerProps };

package/DataFilter/index.d.ts

@@ -1,7 +1,7 @@
 import { DataFilterProps } from './types.js';
 export { DataFilterDate, DataFilterDateRange, DataFilterMultiSelect, DataFilterNumber, DataFilterNumberRange, DataFilterOption, DataFilterSelect, DataFilterText } from './types.js';
-import React from 'react';
+import React__default from 'react';
 
-declare const _default: React.ForwardRefExoticComponent<Omit<DataFilterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React__default.ForwardRefExoticComponent<Omit<DataFilterProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 export { DataFilterProps, _default as default };

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;;"}