@xanui/ui 1.1.38 → 1.1.40

package/Container/index.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@xanui/core');
+
+const Container = React.forwardRef((_a, ref) => {
+    var { children, maxWidth } = _a, rest = tslib.__rest(_a, ["children", "maxWidth"]);
+    const _p = {};
+    if (maxWidth)
+        _p.maxWidth = maxWidth;
+    const p = core.useBreakpointProps(_p);
+    maxWidth = p.maxWidth;
+    const { breakpoints } = core.useTheme();
+    maxWidth = maxWidth || "lg";
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
+            width: "100%",
+            maxWidth: {
+                xs: "100%",
+                [maxWidth]: breakpoints[maxWidth]
+            },
+            mx: "auto",
+            px: 2,
+        }, baseClass: "container", ref: ref, children: children })));
+});
+
+module.exports = Container;
+//# sourceMappingURL=index.cjs.map

package/Container/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/Container/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useTheme, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ContainerProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    maxWidth?: useBreakpointPropsType<'lg' | 'md' | \"sm\" | 'xs'>\r\n}\r\n\r\nconst Container = React.forwardRef(<T extends TagComponentType = \"div\">({ children, maxWidth, ...rest }: ContainerProps<T>, ref?: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (maxWidth) _p.maxWidth = maxWidth\r\n    const p: any = useBreakpointProps(_p)\r\n    maxWidth = p.maxWidth\r\n\r\n    const { breakpoints } = useTheme()\r\n    maxWidth = maxWidth || \"lg\"\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                width: \"100%\",\r\n                maxWidth: {\r\n                    xs: \"100%\",\r\n                    [maxWidth as any]: (breakpoints as any)[maxWidth as any]\r\n                },\r\n                mx: \"auto\",\r\n                px: 2,\r\n            }}\r\n            baseClass=\"container\"\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Container\r\n\r\n\r\n"],"names":["__rest","useBreakpointProps","useTheme","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAkD,EAAE,GAAoB,KAAI;QAA5E,EAAE,QAAQ,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA7B,wBAA+B,CAAF;IACjG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,QAAQ;AAAE,QAAA,EAAE,CAAC,QAAQ,GAAG,QAAQ;AACpC,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAErB,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGC,aAAQ,EAAE;AAClC,IAAA,QAAQ,GAAG,QAAQ,IAAI,IAAI;AAC3B,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,QAAQ,EAAE;AACN,gBAAA,EAAE,EAAE,MAAM;AACV,gBAAA,CAAC,QAAe,GAAI,WAAmB,CAAC,QAAe;AAC1D,aAAA;AACD,YAAA,EAAE,EAAE,MAAM;AACV,YAAA,EAAE,EAAE,CAAC;SACR,EACD,SAAS,EAAC,WAAW,EACrB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/DataFilter/index.cjs

@@ -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.cjs');
+var SelectFilter = require('./options/SelectFilter.cjs');
+var MultiSelectFilter = require('./options/MultiSelectFilter.cjs');
+var NumberFilter = require('./options/NumberFilter.cjs');
+var TextFilter = require('./options/TextFilter.cjs');
+var NumberRangeFilter = require('./options/NumberRangeFilter.cjs');
+var DateFilter = require('./options/DateFilter.cjs');
+var DateRangeFilter = require('./options/DateRangeFilter.cjs');
+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.cjs.map

package/DataFilter/index.cjs.map

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

@@ -0,0 +1,32 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$4 = require('../../Menu/index.cjs');
+var index$2 = require('../../IconButton/index.cjs');
+var index = require('../../Stack/index.cjs');
+var index$1 = require('../../Text/index.cjs');
+var Close = require('@xanui/icons/Close');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Chip/index.cjs');
+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) => {
+                                    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.cjs.map

package/DataFilter/options/DateFilter.cjs.map

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

package/DataFilter/options/DateRangeFilter.cjs

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

package/DataFilter/options/DateRangeFilter.cjs.map

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

package/DataFilter/options/MultiSelectFilter.cjs

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

package/DataFilter/options/MultiSelectFilter.cjs.map

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

package/DataFilter/options/NumberFilter.cjs

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

package/DataFilter/options/NumberFilter.cjs.map

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

package/DataFilter/options/NumberRangeFilter.cjs

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

package/DataFilter/options/NumberRangeFilter.cjs.map

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

package/DataFilter/options/SelectFilter.cjs

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

package/DataFilter/options/SelectFilter.cjs.map

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

package/DataFilter/options/TextFilter.cjs

@@ -0,0 +1,24 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index$2 = require('../../IconButton/index.cjs');
+var index = require('../../Stack/index.cjs');
+var index$1 = require('../../Text/index.cjs');
+var Add = require('@xanui/icons/Add');
+var ClearAll = require('@xanui/icons/ClearAll');
+var index$3 = require('../../Input/index.cjs');
+
+const TextFilter = ({ option, onChange, value }) => {
+    const isValue = value !== null && value !== undefined;
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "background.secondary", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "soft", color: "default", onClick: () => {
+                                    onChange('');
+                                }, 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 = TextFilter;
+//# sourceMappingURL=TextFilter.cjs.map

package/DataFilter/options/TextFilter.cjs.map

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

package/Datatable/FilterBox.cjs

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var index = require('../Stack/index.cjs');
+var index$1 = require('../Tabs/index.cjs');
+var index$2 = require('../Tab/index.cjs');
+var index$3 = require('../Input/index.cjs');
+var IconSearch = require('@xanui/icons/Search');
+var index$4 = require('../IconButton/index.cjs');
+var FilterListOutlined = require('@xanui/icons/FilterListOutlined');
+var index$5 = require('../Drawer/index.cjs');
+var index$8 = require('../Text/index.cjs');
+var React = require('react');
+var CloseOutlined = require('@xanui/icons/CloseOutlined');
+var index$6 = require('../ViewBox/index.cjs');
+var index$7 = require('../DataFilter/index.cjs');
+
+const FilterBox = (props) => {
+    let { tabs, filters, hideSearch, slotProps, skeleton, state, update, } = props;
+    const [openFilter, setOpenFilter] = React.useState(false);
+    let checked = state.selectAll || !!state.selected.length;
+    if (checked)
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    return (jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", zIndex: 1, radius: 1, mb: 1, height: 50, width: "100%", children: [jsxRuntime.jsx(index, { gap: 2.4, flexRow: true, children: tabs && jsxRuntime.jsx(index$1, { disabled: skeleton ? true : false, onChange: (value) => {
+                        update({ tab: value });
+                    }, value: state.tab, children: tabs.map(t => jsxRuntime.jsx(index$2, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxRuntime.jsxs(index, { flexRow: true, gap: 2, className: 'datatable-header-right-area', alignItems: "center", children: [!hideSearch && jsxRuntime.jsx(index$3, Object.assign({ disabled: skeleton ? true : false, endIcon: jsxRuntime.jsx(IconSearch, {}), placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
+                            update({ search: e.target.value });
+                        } })), filters && jsxRuntime.jsxs(index, { children: [jsxRuntime.jsx(index$4, { color: "default", variant: "text", onClick: () => {
+                                    setOpenFilter(true);
+                                }, children: jsxRuntime.jsx(FilterListOutlined, {}) }), jsxRuntime.jsx(index$5, { open: openFilter, onClickOutside: () => { }, placement: "right", children: jsxRuntime.jsx(index$6, { height: "100%", p: 1, startContent: jsxRuntime.jsxs(index, { mb: 2, px: 2, flexRow: true, justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsx(index$8, { fontWeight: 600, fontSize: "h6", children: "Filters" }), jsxRuntime.jsx(index$4, { size: "small", color: "default", variant: "text", onClick: () => {
+                                                    setOpenFilter(false);
+                                                }, children: jsxRuntime.jsx(CloseOutlined, {}) })] }), children: jsxRuntime.jsx(index, { gap: 2, children: jsxRuntime.jsx(index$7.default, { options: filters, value: state.filters, onChange: (s) => {
+                                                update({ filters: s });
+                                            } }) }) }) })] })] })] }));
+};
+
+module.exports = FilterBox;
+//# sourceMappingURL=FilterBox.cjs.map

package/Datatable/FilterBox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterBox.cjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["'use client'\r\nimport Stack from '../Stack'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\nimport { DatatablePropsWithState } from './types';\r\nimport IconButton from '../IconButton';\r\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\r\nimport Drawer from '../Drawer';\r\nimport Text from '../Text';\r\nimport React from 'react';\r\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\r\nimport ViewBox from '../ViewBox';\r\nimport DataFilter from '../DataFilter';\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n   let {\r\n      tabs,\r\n      filters,\r\n      hideSearch,\r\n      slotProps,\r\n      skeleton,\r\n      state,\r\n      update,\r\n   } = props\r\n   const [openFilter, setOpenFilter] = React.useState(false)\r\n   let checked = state.selectAll || !!state.selected.length\r\n\r\n   if (checked) return <></>\r\n\r\n   return (\r\n      <Stack\r\n         direction=\"row\"\r\n         alignItems=\"center\"\r\n         justifyContent=\"space-between\"\r\n         zIndex={1}\r\n         radius={1}\r\n         mb={1}\r\n         height={50}\r\n         width=\"100%\"\r\n      >\r\n         <Stack gap={2.4} flexRow>\r\n            {\r\n               tabs && <Tabs\r\n                  disabled={skeleton ? true : false}\r\n                  onChange={(value: any) => {\r\n                     update({ tab: value })\r\n                  }}\r\n                  value={state.tab}\r\n               >\r\n                  {\r\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\r\n                  }\r\n               </Tabs>\r\n            }\r\n         </Stack>\r\n         <Stack\r\n            flexRow\r\n            gap={2}\r\n            className='datatable-header-right-area'\r\n            alignItems={\"center\"}\r\n         >\r\n            {!hideSearch && <Input\r\n               disabled={skeleton ? true : false}\r\n               endIcon={<IconSearch />}\r\n               placeholder='Search...'\r\n               {...slotProps?.search}\r\n               value={state.search}\r\n               onChange={(e: any) => {\r\n                  update({ search: e.target.value })\r\n               }}\r\n            />}\r\n            {\r\n               filters && <Stack>\r\n                  <IconButton\r\n                     color=\"default\"\r\n                     variant={\"text\"}\r\n                     onClick={() => {\r\n                        setOpenFilter(true)\r\n                     }}\r\n                  >\r\n                     <FilterListOutlined />\r\n                  </IconButton>\r\n                  <Drawer\r\n                     open={openFilter}\r\n                     onClickOutside={() => { }}\r\n                     placement={\"right\"}\r\n                  >\r\n                     <ViewBox\r\n                        height=\"100%\"\r\n                        p={1}\r\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\r\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\r\n                           <IconButton\r\n                              size=\"small\"\r\n                              color=\"default\"\r\n                              variant=\"text\"\r\n                              onClick={() => {\r\n                                 setOpenFilter(false)\r\n                              }}\r\n                           >\r\n                              <CloseOutlined />\r\n                           </IconButton>\r\n                        </Stack>}\r\n                     >\r\n                        <Stack\r\n                           gap={2}\r\n                        >\r\n                           <DataFilter\r\n                              options={filters}\r\n                              value={state.filters}\r\n                              onChange={(s) => {\r\n                                 update({ filters: s })\r\n                              }}\r\n                           />\r\n                        </Stack>\r\n                     </ViewBox>\r\n                  </Drawer>\r\n               </Stack>\r\n            }\r\n         </Stack>\r\n      </Stack>\r\n   )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}

package/Datatable/FilterBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\r\nimport Stack from '../Stack'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\nimport { DatatablePropsWithState } from './types';\r\nimport IconButton from '../IconButton';\r\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\r\nimport Drawer from '../Drawer';\r\nimport Text from '../Text';\r\nimport React from 'react';\r\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\r\nimport ViewBox from '../ViewBox';\r\nimport DataFilter from '../DataFilter';\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n   let {\r\n      tabs,\r\n      filters,\r\n      hideSearch,\r\n      slotProps,\r\n      skeleton,\r\n      state,\r\n      update,\r\n   } = props\r\n   const [openFilter, setOpenFilter] = React.useState(false)\r\n   let checked = state.selectAll || !!state.selected.length\r\n\r\n   if (checked) return <></>\r\n\r\n   return (\r\n      <Stack\r\n         direction=\"row\"\r\n         alignItems=\"center\"\r\n         justifyContent=\"space-between\"\r\n         zIndex={1}\r\n         radius={1}\r\n         mb={1}\r\n         height={50}\r\n         width=\"100%\"\r\n      >\r\n         <Stack gap={2.4} flexRow>\r\n            {\r\n               tabs && <Tabs\r\n                  disabled={skeleton ? true : false}\r\n                  onChange={(value: any) => {\r\n                     update({ tab: value })\r\n                  }}\r\n                  value={state.tab}\r\n               >\r\n                  {\r\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\r\n                  }\r\n               </Tabs>\r\n            }\r\n         </Stack>\r\n         <Stack\r\n            flexRow\r\n            gap={2}\r\n            className='datatable-header-right-area'\r\n            alignItems={\"center\"}\r\n         >\r\n            {!hideSearch && <Input\r\n               disabled={skeleton ? true : false}\r\n               endIcon={<IconSearch />}\r\n               placeholder='Search...'\r\n               {...slotProps?.search}\r\n               value={state.search}\r\n               onChange={(e: any) => {\r\n                  update({ search: e.target.value })\r\n               }}\r\n            />}\r\n            {\r\n               filters && <Stack>\r\n                  <IconButton\r\n                     color=\"default\"\r\n                     variant={\"text\"}\r\n                     onClick={() => {\r\n                        setOpenFilter(true)\r\n                     }}\r\n                  >\r\n                     <FilterListOutlined />\r\n                  </IconButton>\r\n                  <Drawer\r\n                     open={openFilter}\r\n                     onClickOutside={() => { }}\r\n                     placement={\"right\"}\r\n                  >\r\n                     <ViewBox\r\n                        height=\"100%\"\r\n                        p={1}\r\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\r\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\r\n                           <IconButton\r\n                              size=\"small\"\r\n                              color=\"default\"\r\n                              variant=\"text\"\r\n                              onClick={() => {\r\n                                 setOpenFilter(false)\r\n                              }}\r\n                           >\r\n                              <CloseOutlined />\r\n                           </IconButton>\r\n                        </Stack>}\r\n                     >\r\n                        <Stack\r\n                           gap={2}\r\n                        >\r\n                           <DataFilter\r\n                              options={filters}\r\n                              value={state.filters}\r\n                              onChange={(s) => {\r\n                                 update({ filters: s })\r\n                              }}\r\n                           />\r\n                        </Stack>\r\n                     </ViewBox>\r\n                  </Drawer>\r\n               </Stack>\r\n            }\r\n         </Stack>\r\n      </Stack>\r\n   )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}
+{"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["'use client'\r\nimport Stack from '../Stack'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\nimport { DatatablePropsWithState } from './types';\r\nimport IconButton from '../IconButton';\r\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\r\nimport Drawer from '../Drawer';\r\nimport Text from '../Text';\r\nimport React from 'react';\r\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\r\nimport ViewBox from '../ViewBox';\r\nimport DataFilter from '../DataFilter';\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n   let {\r\n      tabs,\r\n      filters,\r\n      hideSearch,\r\n      slotProps,\r\n      skeleton,\r\n      state,\r\n      update,\r\n   } = props\r\n   const [openFilter, setOpenFilter] = React.useState(false)\r\n   let checked = state.selectAll || !!state.selected.length\r\n\r\n   if (checked) return <></>\r\n\r\n   return (\r\n      <Stack\r\n         direction=\"row\"\r\n         alignItems=\"center\"\r\n         justifyContent=\"space-between\"\r\n         zIndex={1}\r\n         radius={1}\r\n         mb={1}\r\n         height={50}\r\n         width=\"100%\"\r\n      >\r\n         <Stack gap={2.4} flexRow>\r\n            {\r\n               tabs && <Tabs\r\n                  disabled={skeleton ? true : false}\r\n                  onChange={(value: any) => {\r\n                     update({ tab: value })\r\n                  }}\r\n                  value={state.tab}\r\n               >\r\n                  {\r\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\r\n                  }\r\n               </Tabs>\r\n            }\r\n         </Stack>\r\n         <Stack\r\n            flexRow\r\n            gap={2}\r\n            className='datatable-header-right-area'\r\n            alignItems={\"center\"}\r\n         >\r\n            {!hideSearch && <Input\r\n               disabled={skeleton ? true : false}\r\n               endIcon={<IconSearch />}\r\n               placeholder='Search...'\r\n               {...slotProps?.search}\r\n               value={state.search}\r\n               onChange={(e: any) => {\r\n                  update({ search: e.target.value })\r\n               }}\r\n            />}\r\n            {\r\n               filters && <Stack>\r\n                  <IconButton\r\n                     color=\"default\"\r\n                     variant={\"text\"}\r\n                     onClick={() => {\r\n                        setOpenFilter(true)\r\n                     }}\r\n                  >\r\n                     <FilterListOutlined />\r\n                  </IconButton>\r\n                  <Drawer\r\n                     open={openFilter}\r\n                     onClickOutside={() => { }}\r\n                     placement={\"right\"}\r\n                  >\r\n                     <ViewBox\r\n                        height=\"100%\"\r\n                        p={1}\r\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\r\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\r\n                           <IconButton\r\n                              size=\"small\"\r\n                              color=\"default\"\r\n                              variant=\"text\"\r\n                              onClick={() => {\r\n                                 setOpenFilter(false)\r\n                              }}\r\n                           >\r\n                              <CloseOutlined />\r\n                           </IconButton>\r\n                        </Stack>}\r\n                     >\r\n                        <Stack\r\n                           gap={2}\r\n                        >\r\n                           <DataFilter\r\n                              options={filters}\r\n                              value={state.filters}\r\n                              onChange={(s) => {\r\n                                 update({ filters: s })\r\n                              }}\r\n                           />\r\n                        </Stack>\r\n                     </ViewBox>\r\n                  </Drawer>\r\n               </Stack>\r\n            }\r\n         </Stack>\r\n      </Stack>\r\n   )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}

package/Datatable/Row.cjs

@@ -0,0 +1,59 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index = require('../TableRow/index.cjs');
+var index$1 = require('../TableCell/index.cjs');
+var index$2 = require('../Checkbox/index.cjs');
+var index$3 = require('../IconButton/index.cjs');
+var index$5 = require('../List/index.cjs');
+var index$6 = require('../ListItem/index.cjs');
+var ActionIcon = require('@xanui/icons/MoreVert');
+var index$4 = require('../Menu/index.cjs');
+
+const Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }) => {
+    var _a;
+    const selected = row.id ? state.selected.includes(row === null || row === void 0 ? void 0 : row.id) : false;
+    let selectedColor = selected ? "primary.soft" : "transparent";
+    const [target, setTarget] = React.useState();
+    const isDisable = (disableRow ? disableRow(rawRow, state) : false) || false;
+    return (jsxRuntime.jsxs(index, { children: [!hideCheckbox && jsxRuntime.jsx(index$1, { width: 40, bgcolor: selectedColor, children: !!row.id && jsxRuntime.jsx(index$2, { size: compact ? "small" : "medium", checked: selected, onChange: () => {
+                        if (isDisable || !row.id)
+                            return;
+                        let ids = [...state.selected];
+                        ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id);
+                        let selectedLength = 0;
+                        rows.forEach(r => {
+                            const isDisable = (disableRow ? disableRow(r, state) : false) || false;
+                            if (!isDisable)
+                                selectedLength++;
+                        });
+                        update({
+                            selectAll: selectedLength === ids.length,
+                            selected: ids
+                        });
+                    } }) }), columns.map((_a, idx) => {
+                var { label, field, sortable } = _a, rest = tslib.__rest(_a, ["label", "field", "sortable"]);
+                field = field || label;
+                if (!row[field])
+                    return jsxRuntime.jsx(index$1, {}, idx);
+                return (jsxRuntime.jsx(index$1, Object.assign({ textAlign: "left" }, rest, { bgcolor: selectedColor, children: row[field] }), idx));
+            }), !!(rows.length && rowAction && ((_a = rowAction(rows[0])) === null || _a === void 0 ? void 0 : _a.length)) && jsxRuntime.jsxs(index$1, { width: 30, bgcolor: selectedColor, borderColor: "divider", children: [jsxRuntime.jsx(index$3, { disabled: isDisable || selected, onClick: (e) => setTarget(e.currentTarget), variant: "text", color: "default", children: jsxRuntime.jsx(ActionIcon, {}) }), jsxRuntime.jsx(index$4, { target: target, placement: "bottom-right", onClickOutside: () => setTarget(null), children: jsxRuntime.jsx(index$5, { bgcolor: "background.primary", minWidth: 160, sx: {
+                                '& > li': {
+                                    borderBottom: 1,
+                                    '&:last-child': {
+                                        borderBottom: 0
+                                    }
+                                }
+                            }, children: rowAction({ row, state }).map(({ label, icon, onClick }) => {
+                                return (jsxRuntime.jsx(index$6, { startIcon: icon, onClick: (e) => {
+                                        onClick && onClick(e);
+                                        setTarget(null);
+                                    }, children: label }, label));
+                            }) }) })] })] }));
+};
+
+module.exports = Row;
+//# sourceMappingURL=Row.cjs.map