@xanui/ui 1.1.27 → 1.1.29

package/DataFilter/index.js

@@ -0,0 +1,78 @@
+"use client";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../Stack/index.js');
+var SelectFilter = require('./options/SelectFilter.js');
+var MultiSelectFilter = require('./options/MultiSelectFilter.js');
+var NumberFilter = require('./options/NumberFilter.js');
+var TextFilter = require('./options/TextFilter.js');
+var NumberRangeFilter = require('./options/NumberRangeFilter.js');
+var DateFilter = require('./options/DateFilter.js');
+var DateRangeFilter = require('./options/DateRangeFilter.js');
+var React = require('react');
+var core = require('@xanui/core');
+
+const DataFilter$1 = (_a, ref) => {
+    var { inline, options, onChange, value } = _a, props = tslib.__rest(_a, ["inline", "options", "onChange", "value"]);
+    inline !== null && inline !== void 0 ? inline : (inline = false);
+    value !== null && value !== void 0 ? value : (value = {});
+    onChange !== null && onChange !== void 0 ? onChange : (onChange = () => { });
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, { sxr: {
+            flexBox: true,
+            flexDirection: inline ? 'row' : 'column',
+            alignItems: inline ? 'center' : 'stretch',
+            flexWrap: inline ? 'wrap' : 'nowrap',
+            gap: 1,
+            p: 2,
+            radius: 1,
+        }, baseClass: 'data-filter', ref: ref, children: options.map((option, index$1) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            switch (option.type) {
+                case "text":
+                    return (jsxRuntime.jsx(index, { width: inline ? 300 : "100%", children: jsxRuntime.jsx(TextFilter, { option: option, value: (_a = value[option.key]) !== null && _a !== void 0 ? _a : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index$1));
+                case "number":
+                    return (jsxRuntime.jsx(index, { width: inline ? 300 : "100%", children: jsxRuntime.jsx(NumberFilter, { option: option, value: (_b = value[option.key]) !== null && _b !== void 0 ? _b : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index$1));
+                case "number-range":
+                    return (jsxRuntime.jsx(index, { width: inline ? 300 : "100%", children: jsxRuntime.jsx(NumberRangeFilter, { option: option, value: (_c = value[option.key]) !== null && _c !== void 0 ? _c : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index$1));
+                case "select":
+                    return (jsxRuntime.jsx(index, { width: inline ? 300 : "100%", children: jsxRuntime.jsx(SelectFilter, { option: option, value: (_d = value[option.key]) !== null && _d !== void 0 ? _d : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index$1));
+                case "multi-select":
+                    return (jsxRuntime.jsx(index, { width: inline ? 300 : "100%", children: jsxRuntime.jsx(MultiSelectFilter, { option: option, value: (_e = value[option.key]) !== null && _e !== void 0 ? _e : [], onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index$1));
+                case "date":
+                    return (jsxRuntime.jsx(index, { width: inline ? 300 : "100%", children: jsxRuntime.jsx(DateFilter, { option: option, value: (_f = value[option.key]) !== null && _f !== void 0 ? _f : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index$1));
+                case "date-range":
+                    return (jsxRuntime.jsx(index, { width: inline ? 300 : "100%", children: jsxRuntime.jsx(DateRangeFilter, { option: option, value: (_g = value[option.key]) !== null && _g !== void 0 ? _g : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index$1));
+                default:
+                    return null;
+            }
+        }) })));
+};
+var DataFilter = React.forwardRef(DataFilter$1);
+
+exports.SelectFilter = SelectFilter;
+exports.MultiSelectFilter = MultiSelectFilter;
+exports.NumberFilter = NumberFilter;
+exports.TextFilter = TextFilter;
+exports.NumberRangeFilter = NumberRangeFilter;
+exports.DateFilter = DateFilter;
+exports.DateRangeFilter = DateRangeFilter;
+exports.default = DataFilter;
+//# sourceMappingURL=index.js.map

package/DataFilter/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/DataFilter/index.tsx"],"sourcesContent":["\"use client\"\nimport Stack from '../Stack'\nimport { DataFilterProps } from './types'\nimport SelectFilter from './options/SelectFilter'\nimport MultiSelectFilter from './options/MultiSelectFilter'\nimport NumberFilter from './options/NumberFilter'\nimport TextFilter from './options/TextFilter'\nimport NumberRangeFilter from './options/NumberRangeFilter'\nimport DateFilter from './options/DateFilter'\nimport DateRangeFilter from './options/DateRangeFilter'\nimport React from 'react'\nimport { Tag } from '@xanui/core'\n\nexport {\n   SelectFilter,\n   MultiSelectFilter,\n   NumberFilter,\n   TextFilter,\n   NumberRangeFilter,\n   DateFilter,\n   DateRangeFilter,\n}\n\nexport * from './types'\n\nconst DataFilter = ({ inline, options, onChange, value, ...props }: DataFilterProps, ref: React.Ref<HTMLDivElement>) => {\n   inline ??= false\n   value ??= {}\n   onChange ??= () => { }\n\n   return (\n      <Tag\n         {...props}\n         sxr={{\n            flexBox: true,\n            flexDirection: inline ? 'row' : 'column',\n            alignItems: inline ? 'center' : 'stretch',\n            flexWrap: inline ? 'wrap' : 'nowrap',\n            gap: 1,\n            p: 2,\n            radius: 1,\n         }}\n         baseClass='data-filter'\n         ref={ref}\n      >\n         {\n            options.map((option, index) => {\n               switch (option.type) {\n                  case \"text\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <TextFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"number\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <NumberFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"number-range\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <NumberRangeFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"select\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <SelectFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"multi-select\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <MultiSelectFilter\n                           option={option as any}\n                           value={value[option.key] ?? []}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"date\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <DateFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"date-range\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <DateRangeFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  default:\n                     return null\n\n               }\n            })\n         }\n      </Tag>\n   )\n}\n\nexport default React.forwardRef(DataFilter);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAyBA;AAAoB;;;;AAKjB;AAIS;;;;AAIA;AACA;AACA;AACF;;AAMK;AACG;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;;AAOrB;AAEA;;;;;;;;;"}

package/DataFilter/index.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import Stack from '../Stack/index.mjs';
+import SelectFilter from './options/SelectFilter.mjs';
+import MultiSelectFilter from './options/MultiSelectFilter.mjs';
+import NumberFilter from './options/NumberFilter.mjs';
+import TextFilter from './options/TextFilter.mjs';
+import NumberRangeFilter from './options/NumberRangeFilter.mjs';
+import DateFilter from './options/DateFilter.mjs';
+import DateRangeFilter from './options/DateRangeFilter.mjs';
+import React from 'react';
+import { Tag } from '@xanui/core';
+
+const DataFilter = (_a, ref) => {
+    var { inline, options, onChange, value } = _a, props = __rest(_a, ["inline", "options", "onChange", "value"]);
+    inline !== null && inline !== void 0 ? inline : (inline = false);
+    value !== null && value !== void 0 ? value : (value = {});
+    onChange !== null && onChange !== void 0 ? onChange : (onChange = () => { });
+    return (jsx(Tag, Object.assign({}, props, { sxr: {
+            flexBox: true,
+            flexDirection: inline ? 'row' : 'column',
+            alignItems: inline ? 'center' : 'stretch',
+            flexWrap: inline ? 'wrap' : 'nowrap',
+            gap: 1,
+            p: 2,
+            radius: 1,
+        }, baseClass: 'data-filter', ref: ref, children: options.map((option, index) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            switch (option.type) {
+                case "text":
+                    return (jsx(Stack, { width: inline ? 300 : "100%", children: jsx(TextFilter, { option: option, value: (_a = value[option.key]) !== null && _a !== void 0 ? _a : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index));
+                case "number":
+                    return (jsx(Stack, { width: inline ? 300 : "100%", children: jsx(NumberFilter, { option: option, value: (_b = value[option.key]) !== null && _b !== void 0 ? _b : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index));
+                case "number-range":
+                    return (jsx(Stack, { width: inline ? 300 : "100%", children: jsx(NumberRangeFilter, { option: option, value: (_c = value[option.key]) !== null && _c !== void 0 ? _c : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index));
+                case "select":
+                    return (jsx(Stack, { width: inline ? 300 : "100%", children: jsx(SelectFilter, { option: option, value: (_d = value[option.key]) !== null && _d !== void 0 ? _d : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index));
+                case "multi-select":
+                    return (jsx(Stack, { width: inline ? 300 : "100%", children: jsx(MultiSelectFilter, { option: option, value: (_e = value[option.key]) !== null && _e !== void 0 ? _e : [], onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index));
+                case "date":
+                    return (jsx(Stack, { width: inline ? 300 : "100%", children: jsx(DateFilter, { option: option, value: (_f = value[option.key]) !== null && _f !== void 0 ? _f : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index));
+                case "date-range":
+                    return (jsx(Stack, { width: inline ? 300 : "100%", children: jsx(DateRangeFilter, { option: option, value: (_g = value[option.key]) !== null && _g !== void 0 ? _g : null, onChange: (v) => {
+                                onChange(Object.assign(Object.assign({}, value), { [option.key]: v }));
+                            } }) }, index));
+                default:
+                    return null;
+            }
+        }) })));
+};
+var DataFilter$1 = React.forwardRef(DataFilter);
+
+export { DateFilter, DateRangeFilter, MultiSelectFilter, NumberFilter, NumberRangeFilter, SelectFilter, TextFilter, DataFilter$1 as default };
+//# sourceMappingURL=index.mjs.map

package/DataFilter/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/DataFilter/index.tsx"],"sourcesContent":["\"use client\"\nimport Stack from '../Stack'\nimport { DataFilterProps } from './types'\nimport SelectFilter from './options/SelectFilter'\nimport MultiSelectFilter from './options/MultiSelectFilter'\nimport NumberFilter from './options/NumberFilter'\nimport TextFilter from './options/TextFilter'\nimport NumberRangeFilter from './options/NumberRangeFilter'\nimport DateFilter from './options/DateFilter'\nimport DateRangeFilter from './options/DateRangeFilter'\nimport React from 'react'\nimport { Tag } from '@xanui/core'\n\nexport {\n   SelectFilter,\n   MultiSelectFilter,\n   NumberFilter,\n   TextFilter,\n   NumberRangeFilter,\n   DateFilter,\n   DateRangeFilter,\n}\n\nexport * from './types'\n\nconst DataFilter = ({ inline, options, onChange, value, ...props }: DataFilterProps, ref: React.Ref<HTMLDivElement>) => {\n   inline ??= false\n   value ??= {}\n   onChange ??= () => { }\n\n   return (\n      <Tag\n         {...props}\n         sxr={{\n            flexBox: true,\n            flexDirection: inline ? 'row' : 'column',\n            alignItems: inline ? 'center' : 'stretch',\n            flexWrap: inline ? 'wrap' : 'nowrap',\n            gap: 1,\n            p: 2,\n            radius: 1,\n         }}\n         baseClass='data-filter'\n         ref={ref}\n      >\n         {\n            options.map((option, index) => {\n               switch (option.type) {\n                  case \"text\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <TextFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"number\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <NumberFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"number-range\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <NumberRangeFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"select\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <SelectFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"multi-select\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <MultiSelectFilter\n                           option={option as any}\n                           value={value[option.key] ?? []}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"date\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <DateFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  case \"date-range\":\n                     return (<Stack\n                        width={inline ? 300 : \"100%\"}\n                        key={index}\n                     >\n                        <DateRangeFilter\n                           option={option as any}\n                           value={value[option.key] ?? null}\n                           onChange={(v) => {\n                              onChange({\n                                 ...value,\n                                 [option.key]: v\n                              })\n                           }}\n                        />\n                     </Stack>\n                     )\n                  default:\n                     return null\n\n               }\n            })\n         }\n      </Tag>\n   )\n}\n\nexport default React.forwardRef(DataFilter);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAyBA;AAAoB;;;;AAKjB;AAIS;;;;AAIA;AACA;AACA;AACF;;AAMK;AACG;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;AAYM;AAIT;AACG;;;AAOrB;AAEA;;"}

package/DataFilter/options/DateFilter.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataFilterDate } from '../types.js';
+
+type Props = {
+    option: DataFilterDate;
+    value: string | null;
+    onChange: (value: string | null) => void;
+};
+declare const DateFilter: ({ option, onChange, value }: Props) => react_jsx_runtime.JSX.Element;
+
+export { DateFilter as default };

package/DataFilter/options/DateFilter.js

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$4 = require('../../Menu/index.js');
+var index$2 = require('../../IconButton/index.js');
+var index = require('../../Stack/index.js');
+var index$1 = require('../../Text/index.js');
+var Close = require('@xanui/icons/Close');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Chip/index.js');
+var index$5 = require('../../Calendar/index.js');
+
+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) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { size: "small", color: "default", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
+                            onChange(null);
+                        }, children: jsxRuntime.jsx(Close, {}) }) }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { value: value ? new Date(value) : null, onChange: (date) => {
+                        onChange((date === null || date === void 0 ? void 0 : date.toISOString()) || null);
+                        setTarget(undefined);
+                    } }) })] }));
+};
+
+module.exports = DateFilter;
+//# sourceMappingURL=DateFilter.js.map

package/DataFilter/options/DateFilter.js.map

@@ -0,0 +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;;"}

package/DataFilter/options/DateFilter.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Menu from '../../Menu/index.mjs';
+import IconButton from '../../IconButton/index.mjs';
+import Stack from '../../Stack/index.mjs';
+import Text from '../../Text/index.mjs';
+import Close from '@xanui/icons/Close';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import Chip from '../../Chip/index.mjs';
+import Calendar from '../../Calendar/index.mjs';
+
+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) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", 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: () => {
+                            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);
+                        setTarget(undefined);
+                    } }) })] }));
+};
+
+export { DateFilter as default };
+//# sourceMappingURL=DateFilter.mjs.map

package/DataFilter/options/DateFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateFilter.mjs","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;;"}

package/DataFilter/options/DateRangeFilter.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataFilterDate } from '../types.js';
+
+type Props = {
+    option: DataFilterDate;
+    value: [string, string] | null;
+    onChange: (value: [string, string] | null) => void;
+};
+declare const DateRangeFilter: ({ option, onChange, value }: Props) => react_jsx_runtime.JSX.Element;
+
+export { DateRangeFilter as default };

package/DataFilter/options/DateRangeFilter.js

@@ -0,0 +1,27 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.js');
+var index = require('../../Stack/index.js');
+var index$1 = require('../../Text/index.js');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../CalendarInput/index.js');
+
+const DateRangeFilter = ({ option, onChange, value }) => {
+    const isValue = value !== null && value !== undefined && value.length === 2;
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+                                    const d = new Date();
+                                    onChange([d.toISOString(), d.toISOString()]);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(index, { p: 1, gap: 1, width: "100%", children: [jsxRuntime.jsx(index$3, { fullWidth: true, variant: "outline", value: value[0] ? new Date(value[0]) : null, onChange: (date) => {
+                                    onChange([date ? date.toISOString() : "", value ? value[1] : ""]);
+                                } }), jsxRuntime.jsx(index$3, { fullWidth: true, variant: "outline", value: value[1] ? new Date(value[1]) : null, onChange: (date) => {
+                                    onChange([value ? value[0] : "", date ? date.toISOString() : ""]);
+                                } })] }) }) })] }));
+};
+
+module.exports = DateRangeFilter;
+//# sourceMappingURL=DateRangeFilter.js.map

package/DataFilter/options/DateRangeFilter.js.map

@@ -0,0 +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;;"}

package/DataFilter/options/DateRangeFilter.mjs

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

package/DataFilter/options/DateRangeFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeFilter.mjs","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;;"}

package/DataFilter/options/MultiSelectFilter.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataFilterSelect } from '../types.js';
+
+type Props = {
+    option: DataFilterSelect;
+    value: string[];
+    onChange: (value: string[]) => void;
+};
+declare const MultiSelectFilter: ({ option, onChange, value }: Props) => react_jsx_runtime.JSX.Element;
+
+export { MultiSelectFilter as default };

package/DataFilter/options/MultiSelectFilter.js

@@ -0,0 +1,38 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$4 = require('../../Menu/index.js');
+var index$5 = require('../../List/index.js');
+var index$6 = require('../../ListItem/index.js');
+var index$7 = require('../../Checkbox/index.js');
+var index$2 = require('../../IconButton/index.js');
+var index = require('../../Stack/index.js');
+var index$1 = require('../../Text/index.js');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Chip/index.js');
+var Close = require('@xanui/icons/Close');
+
+const MultiSelectFilter = ({ option, onChange, value }) => {
+    var _a;
+    const ref = React.useRef(null);
+    const [target, setTarget] = React.useState();
+    const isValue = value && value.length > 0;
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange([]);
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && value.map((val, index) => {
+                    return (jsxRuntime.jsx(index$3, { size: "small", color: "default", label: val, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
+                                onChange(value.filter(v => v !== val));
+                            }, children: jsxRuntime.jsx(Close, {}) }) }, index));
+                }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsxRuntime.jsx(index$6, { startIcon: jsxRuntime.jsx(index$7, { checked: value === null || value === void 0 ? void 0 : value.includes(opt.value) }), onClick: () => {
+                            const has = value === null || value === void 0 ? void 0 : value.includes(opt.value);
+                            onChange(has ? value === null || value === void 0 ? void 0 : value.filter(v => v !== opt.value) : [...value || [], opt.value]);
+                        }, children: opt.label }, index))) }) })] }));
+};
+
+module.exports = MultiSelectFilter;
+//# sourceMappingURL=MultiSelectFilter.js.map

package/DataFilter/options/MultiSelectFilter.js.map

@@ -0,0 +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;;"}

package/DataFilter/options/MultiSelectFilter.mjs

@@ -0,0 +1,36 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Menu from '../../Menu/index.mjs';
+import List from '../../List/index.mjs';
+import ListItem from '../../ListItem/index.mjs';
+import Checkbox from '../../Checkbox/index.mjs';
+import IconButton from '../../IconButton/index.mjs';
+import Stack from '../../Stack/index.mjs';
+import Text from '../../Text/index.mjs';
+import Add from '@xanui/icons/Add';
+import ClearAll from '@xanui/icons/ClearAll';
+import Chip from '../../Chip/index.mjs';
+import Close from '@xanui/icons/Close';
+
+const MultiSelectFilter = ({ option, onChange, value }) => {
+    var _a;
+    const ref = React.useRef(null);
+    const [target, setTarget] = React.useState();
+    const isValue = value && value.length > 0;
+    return (jsxs(Stack, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "soft", color: "default", onClick: (e) => {
+                                    setTarget(e.currentTarget);
+                                }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "soft", 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: () => {
+                                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: () => {
+                            const has = value === null || value === void 0 ? void 0 : value.includes(opt.value);
+                            onChange(has ? value === null || value === void 0 ? void 0 : value.filter(v => v !== opt.value) : [...value || [], opt.value]);
+                        }, children: opt.label }, index))) }) })] }));
+};
+
+export { MultiSelectFilter as default };
+//# sourceMappingURL=MultiSelectFilter.mjs.map

package/DataFilter/options/MultiSelectFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectFilter.mjs","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;;"}

package/DataFilter/options/NumberFilter.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataFilterSelect } from '../types.js';
+
+type Props = {
+    option: DataFilterSelect;
+    value: number | null;
+    onChange: (value: number | null) => void;
+};
+declare const NumberFilter: ({ option, onChange, value }: Props) => react_jsx_runtime.JSX.Element;
+
+export { NumberFilter as default };

package/DataFilter/options/NumberFilter.js

@@ -0,0 +1,24 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.js');
+var index = require('../../Stack/index.js');
+var index$1 = require('../../Text/index.js');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../InputNumber/index.js');
+
+const NumberFilter = ({ option, onChange, value }) => {
+    const isValue = value !== null && value !== undefined;
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+                                    onChange(0);
+                                }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "danger", onClick: () => {
+                                    onChange(null);
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { variant: "outline", value: value.toString(), onChange: (e) => {
+                        onChange(e.target.value);
+                    }, fullWidth: true }) })] }));
+};
+
+module.exports = NumberFilter;
+//# sourceMappingURL=NumberFilter.js.map

package/DataFilter/options/NumberFilter.js.map

@@ -0,0 +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()}\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.mjs

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

package/DataFilter/options/NumberFilter.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberFilter.mjs","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()}\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.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataFilterSelect } from '../types.js';
+
+type Props = {
+    option: DataFilterSelect;
+    value: [number, number] | null;
+    onChange: (value: [number, number] | null) => void;
+};
+declare const NumberRangeFilter: ({ option, onChange, value }: Props) => react_jsx_runtime.JSX.Element;
+
+export { NumberRangeFilter as default };