@xanui/ui 1.1.26 → 1.1.28

package/Table/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Table/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const soft = useColorTemplate(color, \"soft\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: soft.primary.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .5,\n        medium: 1,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"text.primary\",\n                    fontSize: size === \"small\" ? \"button\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.primary.bgcolor,\n                        \"& th\": {\n                            color: main.primary.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: soft.primary.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Table/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useColorTemplate, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Scrollbar from '../Scrollbar';\n\n\nexport type TableProps<T extends TagComponentType = \"table\"> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    evenColor?: useBreakpointPropsType<boolean>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\" | number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<Omit<UseColorTemplateType, \"outline\">>;\n    borderType?: useBreakpointPropsType<\"box\" | \"line\" | \"none\">;\n}\n\nconst Table = React.forwardRef(<T extends TagComponentType = \"table\">({ children, ...props }: TableProps<T>, ref: React.Ref<any>) => {\n    let [{ evenColor, size, color, variant, borderType, ...rest }] = useInterface<any>(\"Table\", props, {})\n    const _p: any = {}\n    if (evenColor) _p.evenColor = evenColor\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (borderType) _p.borderType = borderType\n    const p: any = useBreakpointProps(_p)\n    evenColor = p.evenColor\n    size = p.size ?? \"medium\"\n    color = p.color ?? 'default'\n    variant = p.variant ?? \"fill\"\n    borderType = p.borderType ?? \"line\"\n\n    const main = useColorTemplate(color, variant)\n    const soft = useColorTemplate(color, \"soft\")\n\n    let sx: any = {}\n    if (evenColor) {\n        sx = {\n            \"& tbody tr:nth-child(even)\": {\n                bgcolor: soft.primary.bgcolor\n            }\n        }\n    }\n    if (borderType === 'box') {\n        sx = {\n            ...sx,\n            \"& tr:last-child td\": {\n                borderBottom: 0\n            },\n            \"& tr:first-child th\": {\n                borderTop: 0\n            },\n            \"& tr td:first-child, & tr th:first-child\": {\n                borderLeft: 0\n            },\n            \"& tr td:last-child, & tr th:last-child\": {\n                borderRight: 0\n            },\n        }\n    }\n    let _size = size\n    let sizes: any = {\n        small: .4,\n        medium: .8,\n        large: 2\n    }\n\n    if (typeof size === 'string' && sizes[size]) {\n        _size = sizes[size]\n    }\n    let border: any = {\n        line: {\n            borderBottom: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        box: {\n            border: \"1px solid\",\n            borderColor: \"divider\",\n        },\n        none: {}\n    }\n\n    return (\n        <Scrollbar\n            style={{\n                overflowY: \"hidden\"\n            }}\n        >\n            <Tag\n                {...rest}\n                baseClass='table'\n                sxr={{\n                    color: \"text.primary\",\n                    fontSize: size === \"small\" ? \"text\" : \"text\",\n                    width: \"100%\",\n                    \"& thead, & tfoot\": {\n                        bgcolor: main.primary.bgcolor,\n                        \"& th\": {\n                            color: main.primary.color\n                        }\n                    },\n                    \"& td, & th\": {\n                        p: _size,\n                        ...border[borderType],\n                    },\n                    \"& tr:last-child td\": {\n                        borderBottom: 0\n                    },\n                    \"& tr:first-child th\": {\n                        borderTop: 0\n                    },\n                    \"& tbody tr:hover\": {\n                        bgcolor: soft.primary.bgcolor\n                    },\n                    ...sx,\n                    ...((rest as any).sx || {})\n                }}\n                component=\"table\"\n                ref={ref}\n            >{children}</Tag>\n        </Scrollbar>\n    )\n})\n\nexport default Table"],"names":["_jsx"],"mappings":"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"}

package/TablePagination/index.d.ts

@@ -9,7 +9,7 @@ type TablePaginationState = {
     from: number;
     to: number;
 };
-type TablePaginationProps = Omit<TagProps, "children"> & {
+type TablePaginationProps = Omit<TagProps, "children" | "onChange"> & {
     page: number;
     total: number;
     perpage?: number;
@@ -19,7 +19,7 @@ type TablePaginationProps = Omit<TagProps, "children"> & {
     onChange?: (state: TablePaginationState) => void;
     slotProps?: {
         button?: Omit<IconButtonProps, "children" | "color" | "variant">;
-        select?: Omit<SelectProps, "value" | "onChange">;
+        select?: Omit<SelectProps, "value" | "onChange" | "children">;
     };
 };
 declare const TablePagination: React.ForwardRefExoticComponent<Omit<TablePaginationProps, "ref"> & React.RefAttributes<any>>;

package/TablePagination/index.js

@@ -13,9 +13,8 @@ var IconKeyboardArrowRight = require('@xanui/icons/KeyboardArrowRight');
 var core = require('@xanui/core');
 
 const TablePagination = React.forwardRef((_a, ref) => {
-    var _b, _c, _d;
     var { page, total, perpage, onChange } = _a, rest = tslib.__rest(_a, ["page", "total", "perpage", "onChange"]);
-    let [_e] = core.useInterface("TablePagination", rest, {}), { perpages, color, variant, slotProps } = _e, props = tslib.__rest(_e, ["perpages", "color", "variant", "slotProps"]);
+    let [_b] = core.useInterface("TablePagination", rest, {}), { perpages, color, variant, slotProps } = _b, props = tslib.__rest(_b, ["perpages", "color", "variant", "slotProps"]);
     color !== null && color !== void 0 ? color : (color = "default");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     perpages !== null && perpages !== void 0 ? perpages : (perpages = [30, 50, 100]);
@@ -42,11 +41,7 @@ const TablePagination = React.forwardRef((_a, ref) => {
             flexDirection: "row",
             gap: 1,
             alignItems: "center"
-        }, baseClass: 'table-pagination', ref: ref, children: [isPerpage && jsxRuntime.jsxs(core.Tag, { baseClass: 'table-pagination-perpage', flexBox: true, flexRow: true, gap: 1, alignItems: "center", children: [jsxRuntime.jsx(index, { fontSize: "button", children: "PER PAGE" }), jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.select, { slotProps: Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.select) === null || _b === void 0 ? void 0 : _b.slotProps), { input: Object.assign(Object.assign({}, (_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.select) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.input), { slotProps: {
-                                    container: {
-                                        minWidth: "auto"
-                                    }
-                                }, width: perpage.toString().length * 10, size: "small" }) }), value: perpage, onChange: (value) => {
+        }, baseClass: 'table-pagination', ref: ref, children: [isPerpage && jsxRuntime.jsxs(core.Tag, { baseClass: 'table-pagination-perpage', flexBox: true, flexRow: true, gap: 1, alignItems: "center", children: [jsxRuntime.jsx(index, { fontSize: "button", children: "PER PAGE" }), jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.select, { width: (perpage.toString().length * 10) + 60, minWidth: "auto", maxWidth: "auto", value: perpage, onChange: (value) => {
                             onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) });
                         }, children: perpages.map((p) => jsxRuntime.jsx(index$2, { value: p, children: p }, p)) }))] }), jsxRuntime.jsxs(core.Tag, { sxr: {
                     display: "flex",

package/TablePagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\n\nimport Text from '../Text'\nimport Select, { SelectProps } from '../Select'\nimport Option from '../Option'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport React, { useMemo } from 'react'\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\nexport type TablePaginationProps = Omit<TagProps, \"children\"> & {\n    page: number;\n    total: number;\n    perpage?: number;\n    perpages?: number[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    onChange?: (state: TablePaginationState) => void;\n\n    slotProps?: {\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\n        select?: Omit<SelectProps, \"value\" | \"onChange\">;\n    }\n}\n\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\n    color ??= \"default\"\n    variant ??= \"fill\"\n    perpages ??= [30, 50, 100]\n    perpage = perpage || perpages[0] as number\n    const isPerpage = perpages[0] && perpages.length >= 1\n\n    const chunks = useMemo(() => {\n        const chunks: any = [];\n        let _page = 1;\n        for (let from = 0; from < total; from += perpage) {\n            const to = Math.min(from + perpage, total)\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\n            _page++\n        }\n        return chunks\n    }, [perpage, perpages, total])\n\n    if (!chunks.length) {\n        return <></>\n    }\n\n    const current = chunks[page] || chunks[1]\n    const hasNext = !!chunks[page + 1]\n    const hasPrev = !!chunks[page - 1]\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                gap: 1,\n                alignItems: \"center\"\n            }}\n            baseClass='table-pagination'\n            ref={ref}\n        >\n            {\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\n                    <Text fontSize=\"button\">PER PAGE</Text>\n                    <Select\n                        {...slotProps?.select}\n                        slotProps={{\n                            ...slotProps?.select?.slotProps,\n                            input: {\n                                ...slotProps?.select?.slotProps?.input,\n                                slotProps: {\n                                    container: {\n                                        minWidth: \"auto\"\n                                    }\n                                },\n                                width: perpage.toString().length * 10,\n                                size: \"small\",\n                            },\n                        }}\n                        value={perpage}\n                        onChange={(value: any) => {\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\n                        }}\n                    >\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\n                    </Select>\n                </Tag>\n            }\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    gap: 1,\n                    alignItems: 'center'\n                }}\n            >\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\n                <Text color=\"text.secondary\">of</Text>\n                <Text fontSize=\"button\">{total}</Text>\n            </Tag>\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasPrev}\n                    onClick={() => {\n                        onChange && onChange(chunks[page - 1]);\n                    }}\n                >\n                    <PrevIcon />\n                </IconButton>\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasNext}\n                    onClick={() => {\n                        onChange && onChange(chunks[page + 1]);\n                    }}\n                >\n                    <NextIcon />\n                </IconButton>\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA;;AAA0C;;;;AAItC;AACA;AACA;AAEA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAcuB;AACI;AACH;;AAQT;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}
+{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\n\nimport Text from '../Text'\nimport Select, { SelectProps } from '../Select'\nimport Option from '../Option'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport React, { useMemo } from 'react'\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\n    page: number;\n    total: number;\n    perpage?: number;\n    perpages?: number[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    onChange?: (state: TablePaginationState) => void;\n\n    slotProps?: {\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\n    }\n}\n\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\n    color ??= \"default\"\n    variant ??= \"fill\"\n    perpages ??= [30, 50, 100]\n    perpage = perpage || perpages[0] as number\n    const isPerpage = perpages[0] && perpages.length >= 1\n\n\n    const chunks = useMemo(() => {\n        const chunks: any = [];\n        let _page = 1;\n        for (let from = 0; from < total; from += perpage) {\n            const to = Math.min(from + perpage, total)\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\n            _page++\n        }\n        return chunks\n    }, [perpage, perpages, total])\n\n    if (!chunks.length) {\n        return <></>\n    }\n\n    const current = chunks[page] || chunks[1]\n    const hasNext = !!chunks[page + 1]\n    const hasPrev = !!chunks[page - 1]\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                gap: 1,\n                alignItems: \"center\"\n            }}\n            baseClass='table-pagination'\n            ref={ref}\n        >\n            {\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\n                    <Text fontSize=\"button\">PER PAGE</Text>\n                    <Select\n                        {...slotProps?.select}\n                        width={(perpage.toString().length * 10) + 60}\n                        minWidth={\"auto\"}\n                        maxWidth={\"auto\"}\n                        value={perpage}\n                        onChange={(value: any) => {\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\n                        }}\n                    >\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\n                    </Select>\n                </Tag>\n            }\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    gap: 1,\n                    alignItems: 'center'\n                }}\n            >\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\n                <Text color=\"text.secondary\">of</Text>\n                <Text fontSize=\"button\">{total}</Text>\n            </Tag>\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasPrev}\n                    onClick={() => {\n                        onChange && onChange(chunks[page - 1]);\n                    }}\n                >\n                    <PrevIcon />\n                </IconButton>\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasNext}\n                    onClick={() => {\n                        onChange && onChange(chunks[page + 1]);\n                    }}\n                >\n                    <NextIcon />\n                </IconButton>\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}

package/TablePagination/index.mjs

@@ -11,9 +11,8 @@ import IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';
 import { useInterface, Tag } from '@xanui/core';
 
 const TablePagination = React.forwardRef((_a, ref) => {
-    var _b, _c, _d;
     var { page, total, perpage, onChange } = _a, rest = __rest(_a, ["page", "total", "perpage", "onChange"]);
-    let [_e] = useInterface("TablePagination", rest, {}), { perpages, color, variant, slotProps } = _e, props = __rest(_e, ["perpages", "color", "variant", "slotProps"]);
+    let [_b] = useInterface("TablePagination", rest, {}), { perpages, color, variant, slotProps } = _b, props = __rest(_b, ["perpages", "color", "variant", "slotProps"]);
     color !== null && color !== void 0 ? color : (color = "default");
     variant !== null && variant !== void 0 ? variant : (variant = "fill");
     perpages !== null && perpages !== void 0 ? perpages : (perpages = [30, 50, 100]);
@@ -40,11 +39,7 @@ const TablePagination = React.forwardRef((_a, ref) => {
             flexDirection: "row",
             gap: 1,
             alignItems: "center"
-        }, baseClass: 'table-pagination', ref: ref, children: [isPerpage && jsxs(Tag, { baseClass: 'table-pagination-perpage', flexBox: true, flexRow: true, gap: 1, alignItems: "center", children: [jsx(Text, { fontSize: "button", children: "PER PAGE" }), jsx(Select, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.select, { slotProps: Object.assign(Object.assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.select) === null || _b === void 0 ? void 0 : _b.slotProps), { input: Object.assign(Object.assign({}, (_d = (_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.select) === null || _c === void 0 ? void 0 : _c.slotProps) === null || _d === void 0 ? void 0 : _d.input), { slotProps: {
-                                    container: {
-                                        minWidth: "auto"
-                                    }
-                                }, width: perpage.toString().length * 10, size: "small" }) }), value: perpage, onChange: (value) => {
+        }, baseClass: 'table-pagination', ref: ref, children: [isPerpage && jsxs(Tag, { baseClass: 'table-pagination-perpage', flexBox: true, flexRow: true, gap: 1, alignItems: "center", children: [jsx(Text, { fontSize: "button", children: "PER PAGE" }), jsx(Select, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.select, { width: (perpage.toString().length * 10) + 60, minWidth: "auto", maxWidth: "auto", value: perpage, onChange: (value) => {
                             onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) });
                         }, children: perpages.map((p) => jsx(Option, { value: p, children: p }, p)) }))] }), jsxs(Tag, { sxr: {
                     display: "flex",

package/TablePagination/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\n\nimport Text from '../Text'\nimport Select, { SelectProps } from '../Select'\nimport Option from '../Option'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport React, { useMemo } from 'react'\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\nexport type TablePaginationProps = Omit<TagProps, \"children\"> & {\n    page: number;\n    total: number;\n    perpage?: number;\n    perpages?: number[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    onChange?: (state: TablePaginationState) => void;\n\n    slotProps?: {\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\n        select?: Omit<SelectProps, \"value\" | \"onChange\">;\n    }\n}\n\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\n    color ??= \"default\"\n    variant ??= \"fill\"\n    perpages ??= [30, 50, 100]\n    perpage = perpage || perpages[0] as number\n    const isPerpage = perpages[0] && perpages.length >= 1\n\n    const chunks = useMemo(() => {\n        const chunks: any = [];\n        let _page = 1;\n        for (let from = 0; from < total; from += perpage) {\n            const to = Math.min(from + perpage, total)\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\n            _page++\n        }\n        return chunks\n    }, [perpage, perpages, total])\n\n    if (!chunks.length) {\n        return <></>\n    }\n\n    const current = chunks[page] || chunks[1]\n    const hasNext = !!chunks[page + 1]\n    const hasPrev = !!chunks[page - 1]\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                gap: 1,\n                alignItems: \"center\"\n            }}\n            baseClass='table-pagination'\n            ref={ref}\n        >\n            {\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\n                    <Text fontSize=\"button\">PER PAGE</Text>\n                    <Select\n                        {...slotProps?.select}\n                        slotProps={{\n                            ...slotProps?.select?.slotProps,\n                            input: {\n                                ...slotProps?.select?.slotProps?.input,\n                                slotProps: {\n                                    container: {\n                                        minWidth: \"auto\"\n                                    }\n                                },\n                                width: perpage.toString().length * 10,\n                                size: \"small\",\n                            },\n                        }}\n                        value={perpage}\n                        onChange={(value: any) => {\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\n                        }}\n                    >\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\n                    </Select>\n                </Tag>\n            }\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    gap: 1,\n                    alignItems: 'center'\n                }}\n            >\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\n                <Text color=\"text.secondary\">of</Text>\n                <Text fontSize=\"button\">{total}</Text>\n            </Tag>\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasPrev}\n                    onClick={() => {\n                        onChange && onChange(chunks[page - 1]);\n                    }}\n                >\n                    <PrevIcon />\n                </IconButton>\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasNext}\n                    onClick={() => {\n                        onChange && onChange(chunks[page + 1]);\n                    }}\n                >\n                    <NextIcon />\n                </IconButton>\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA4BA;;AAA0C;;;;AAItC;AACA;AACA;AAEA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAcuB;AACI;AACH;;AAQT;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\n\nimport Text from '../Text'\nimport Select, { SelectProps } from '../Select'\nimport Option from '../Option'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport React, { useMemo } from 'react'\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\n    page: number;\n    total: number;\n    perpage?: number;\n    perpages?: number[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    onChange?: (state: TablePaginationState) => void;\n\n    slotProps?: {\n        button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\n        select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\n    }\n}\n\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\n    let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\n    color ??= \"default\"\n    variant ??= \"fill\"\n    perpages ??= [30, 50, 100]\n    perpage = perpage || perpages[0] as number\n    const isPerpage = perpages[0] && perpages.length >= 1\n\n\n    const chunks = useMemo(() => {\n        const chunks: any = [];\n        let _page = 1;\n        for (let from = 0; from < total; from += perpage) {\n            const to = Math.min(from + perpage, total)\n            chunks[_page] = { from: from + 1, to, page: _page, perpage }\n            _page++\n        }\n        return chunks\n    }, [perpage, perpages, total])\n\n    if (!chunks.length) {\n        return <></>\n    }\n\n    const current = chunks[page] || chunks[1]\n    const hasNext = !!chunks[page + 1]\n    const hasPrev = !!chunks[page - 1]\n\n    return (\n        <Tag\n            {...props}\n            sxr={{\n                display: \"flex\",\n                flexDirection: \"row\",\n                gap: 1,\n                alignItems: \"center\"\n            }}\n            baseClass='table-pagination'\n            ref={ref}\n        >\n            {\n                isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\n                    <Text fontSize=\"button\">PER PAGE</Text>\n                    <Select\n                        {...slotProps?.select}\n                        width={(perpage.toString().length * 10) + 60}\n                        minWidth={\"auto\"}\n                        maxWidth={\"auto\"}\n                        value={perpage}\n                        onChange={(value: any) => {\n                            onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\n                        }}\n                    >\n                        {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\n                    </Select>\n                </Tag>\n            }\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    gap: 1,\n                    alignItems: 'center'\n                }}\n            >\n                <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\n                <Text color=\"text.secondary\">of</Text>\n                <Text fontSize=\"button\">{total}</Text>\n            </Tag>\n            <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasPrev}\n                    onClick={() => {\n                        onChange && onChange(chunks[page - 1]);\n                    }}\n                >\n                    <PrevIcon />\n                </IconButton>\n                <IconButton\n                    {...slotProps?.button}\n                    color={color}\n                    variant={variant}\n                    size={30}\n                    disabled={!hasNext}\n                    onClick={() => {\n                        onChange && onChange(chunks[page + 1]);\n                    }}\n                >\n                    <NextIcon />\n                </IconButton>\n            </Tag>\n        </Tag>\n    )\n})\n\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}

package/index.d.ts

@@ -1,55 +1,65 @@
-export { default as Accordion, default as AccordionProps } from './Accordion/index.js';
-export { default as Alert, default as AlertProps } from './Alert/index.js';
-export { default as Avatar, default as AvatarProps } from './Avatar/index.js';
-export { default as Badge, default as BadgeProps } from './Badge/index.js';
-export { default as Box, default as BoxProps } from './Box/index.js';
-export { default as Button, default as ButtonProps } from './Button/index.js';
-export { default as ButtonGroup, default as ButtonGroupProps } from './ButtonGroup/index.js';
-export { default as Calendar, default as CalendarProps } from './Calendar/index.js';
-export { default as CalendarInput, default as CalendarInputProps } from './CalendarInput/index.js';
-export { default as Checkbox, default as CheckboxProps } from './Checkbox/index.js';
-export { default as Chip, default as ChipProps } from './Chip/index.js';
-export { default as CircleProgress, default as CircleProgressProps } from './CircleProgress/index.js';
-export { default as ClickOutside, default as ClickOutsideProps } from './ClickOutside/index.js';
-export { default as Collaps, default as CollapsProps } from './Collaps/index.js';
-export { default as Container, default as ContainerProps } from './Container/index.js';
-export { default as Datatable, default as DatatableProps } from './Datatable/index.js';
-export { default as Divider, default as DividerProps } from './Divider/index.js';
-export { default as Drawer, default as DrawerProps } from './Drawer/index.js';
-export { default as Form, default as FormProps } from './Form/index.js';
-export { default as GridContainer, default as GridContainerProps } from './GridContainer/index.js';
-export { default as GridItem, default as GridItemProps } from './GridItem/index.js';
-export { default as IconButton, default as IconButtonProps } from './IconButton/index.js';
-export { default as Image, default as ImageProps } from './Image/index.js';
-export { default as Input, default as InputProps } from './Input/index.js';
-export { default as Label, default as LabelProps } from './Label/index.js';
-export { default as Layer, default as LayerProps } from './Layer/index.js';
-export { default as LineProgress, default as LineProgressProps } from './LineProgress/index.js';
-export { default as List, default as ListProps } from './List/index.js';
-export { default as ListItem, default as ListItemProps } from './ListItem/index.js';
-export { default as LoadingBox, default as LoadingBoxProps } from './LoadingBox/index.js';
-export { default as Menu, default as MenuProps } from './Menu/index.js';
-export { default as Modal, default as ModalProps } from './Modal/index.js';
-export { default as NoSSR, default as NoSSRProps } from './NoSSR/index.js';
-export { default as Option, default as OptionProps } from './Option/index.js';
-export { default as Paper, default as PaperProps } from './Paper/index.js';
-export { default as Portal, default as PortalProps } from './Portal/index.js';
-export { default as Radio, default as RadioProps } from './Radio/index.js';
-export { default as Scrollbar, default as ScrollbarProps } from './Scrollbar/index.js';
-export { default as Select, default as SelectProps } from './Select/index.js';
-export { default as Stack, default as StackProps } from './Stack/index.js';
-export { default as Switch, default as SwitchProps } from './Switch/index.js';
-export { default as Tab, default as TabProps } from './Tab/index.js';
-export { default as Table, default as TableProps } from './Table/index.js';
-export { default as TableBody, default as TableBodyProps } from './TableBody/index.js';
-export { default as TableCell, default as TableCellProps } from './TableCell/index.js';
-export { default as TableFooter, default as TableFooterProps } from './TableFooter/index.js';
-export { default as TableHead, default as TableHeadProps } from './TableHead/index.js';
-export { default as TablePagination, default as TablePaginationProps } from './TablePagination/index.js';
-export { default as TableRow, default as TableRowProps } from './TableRow/index.js';
-export { default as Tabs, default as TabsProps } from './Tabs/index.js';
-export { default as Text, default as TextProps } from './Text/index.js';
-export { default as Toast, default as ToastProps } from './Toast/index.js';
-export { default as Tooltip, default as TooltipProps } from './Tooltip/index.js';
-export { default as useCorner, default as useCornerProps } from './useCorner/index.js';
-export { default as ViewBox, default as ViewBoxProps } from './ViewBox/index.js';
+export { default as Accordion } from './Accordion/index.js';
+export { default as Autocomplete } from './Autocomplete/index.js';
+export { default as Alert } from './Alert/index.js';
+export { default as Avatar } from './Avatar/index.js';
+export { default as Badge } from './Badge/index.js';
+export { default as Box } from './Box/index.js';
+export { default as Button } from './Button/index.js';
+export { default as ButtonGroup } from './ButtonGroup/index.js';
+export { default as Calendar } from './Calendar/index.js';
+export { default as CalendarInput } from './CalendarInput/index.js';
+export { default as Checkbox } from './Checkbox/index.js';
+export { default as Chip } from './Chip/index.js';
+export { default as CircleProgress } from './CircleProgress/index.js';
+export { default as ClickOutside } from './ClickOutside/index.js';
+export { default as Collaps } from './Collaps/index.js';
+export { default as Container } from './Container/index.js';
+export { default as Datatable } from './Datatable/index.js';
+export { default as DataFilter } from './DataFilter/index.js';
+export { default as Divider } from './Divider/index.js';
+export { default as Drawer } from './Drawer/index.js';
+export { default as Form } from './Form/index.js';
+export { default as GridContainer } from './GridContainer/index.js';
+export { default as GridItem } from './GridItem/index.js';
+export { default as IconButton } from './IconButton/index.js';
+export { default as Image } from './Image/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Label } from './Label/index.js';
+export { default as Layer } from './Layer/index.js';
+export { default as LineProgress } from './LineProgress/index.js';
+export { default as List } from './List/index.js';
+export { default as ListItem } from './ListItem/index.js';
+export { default as LoadingBox } from './LoadingBox/index.js';
+export { default as Menu } from './Menu/index.js';
+export { default as Modal } from './Modal/index.js';
+export { default as NoSSR } from './NoSSR/index.js';
+export { default as Option } from './Option/index.js';
+export { default as Paper } from './Paper/index.js';
+export { default as Portal } from './Portal/index.js';
+export { default as Radio } from './Radio/index.js';
+export { default as Scrollbar } from './Scrollbar/index.js';
+export { default as Select } from './Select/index.js';
+export { default as Stack } from './Stack/index.js';
+export { default as Switch } from './Switch/index.js';
+export { default as Tab } from './Tab/index.js';
+export { default as Table } from './Table/index.js';
+export { default as TableBody } from './TableBody/index.js';
+export { default as TableCell } from './TableCell/index.js';
+export { default as TableFooter } from './TableFooter/index.js';
+export { default as TableHead } from './TableHead/index.js';
+export { default as TablePagination } from './TablePagination/index.js';
+export { default as TableRow } from './TableRow/index.js';
+export { default as Tabs } from './Tabs/index.js';
+export { default as Text } from './Text/index.js';
+export { default as Toast } from './Toast/index.js';
+export { default as Tooltip } from './Tooltip/index.js';
+export { default as useCorner } from './useCorner/index.js';
+export { default as ViewBox } from './ViewBox/index.js';
+export { default as SelectFilter } from './DataFilter/options/SelectFilter.js';
+export { default as MultiSelectFilter } from './DataFilter/options/MultiSelectFilter.js';
+export { default as NumberFilter } from './DataFilter/options/NumberFilter.js';
+export { default as TextFilter } from './DataFilter/options/TextFilter.js';
+export { default as NumberRangeFilter } from './DataFilter/options/NumberRangeFilter.js';
+export { default as DateFilter } from './DataFilter/options/DateFilter.js';
+export { default as DateRangeFilter } from './DataFilter/options/DateRangeFilter.js';
+export { DataFilterDate, DataFilterDateRange, DataFilterMultiSelect, DataFilterNumber, DataFilterNumberRange, DataFilterOption, DataFilterProps, DataFilterSelect, DataFilterText } from './DataFilter/types.js';

package/index.js

@@ -1,116 +1,134 @@
 'use strict';
 
 var index = require('./Accordion/index.js');
-var index$1 = require('./Alert/index.js');
-var index$2 = require('./Avatar/index.js');
-var index$3 = require('./Badge/index.js');
-var index$4 = require('./Box/index.js');
-var index$5 = require('./Button/index.js');
-var index$6 = require('./ButtonGroup/index.js');
-var index$7 = require('./Calendar/index.js');
-var index$8 = require('./CalendarInput/index.js');
-var index$9 = require('./Checkbox/index.js');
-var index$a = require('./Chip/index.js');
-var index$b = require('./CircleProgress/index.js');
-var index$c = require('./ClickOutside/index.js');
-var index$d = require('./Collaps/index.js');
-var index$e = require('./Container/index.js');
-var index$f = require('./Datatable/index.js');
-var index$g = require('./Divider/index.js');
-var index$h = require('./Drawer/index.js');
-var index$i = require('./Form/index.js');
-var index$j = require('./GridContainer/index.js');
-var index$k = require('./GridItem/index.js');
-var index$l = require('./IconButton/index.js');
-var index$m = require('./Image/index.js');
-var index$n = require('./Input/index.js');
-var index$o = require('./Label/index.js');
-var index$p = require('./Layer/index.js');
-var index$q = require('./LineProgress/index.js');
-var index$r = require('./List/index.js');
-var index$s = require('./ListItem/index.js');
-var index$t = require('./LoadingBox/index.js');
-var index$u = require('./Menu/index.js');
-var index$v = require('./Modal/index.js');
-var index$w = require('./NoSSR/index.js');
-var index$x = require('./Option/index.js');
-var index$y = require('./Paper/index.js');
-var index$z = require('./Portal/index.js');
-var index$A = require('./Radio/index.js');
-var index$B = require('./Scrollbar/index.js');
-var index$C = require('./Select/index.js');
-var index$D = require('./Stack/index.js');
-var index$E = require('./Switch/index.js');
-var index$F = require('./Tab/index.js');
-var index$G = require('./Table/index.js');
-var index$H = require('./TableBody/index.js');
-var index$I = require('./TableCell/index.js');
-var index$J = require('./TableFooter/index.js');
-var index$K = require('./TableHead/index.js');
-var index$L = require('./TablePagination/index.js');
-var index$M = require('./TableRow/index.js');
-var index$N = require('./Tabs/index.js');
-var index$O = require('./Text/index.js');
-var index$P = require('./Toast/index.js');
-var index$Q = require('./Tooltip/index.js');
-var index$R = require('./useCorner/index.js');
-var index$S = require('./ViewBox/index.js');
+var index$1 = require('./Autocomplete/index.js');
+var index$2 = require('./Alert/index.js');
+var index$3 = require('./Avatar/index.js');
+var index$4 = require('./Badge/index.js');
+var index$5 = require('./Box/index.js');
+var index$6 = require('./Button/index.js');
+var index$7 = require('./ButtonGroup/index.js');
+var index$8 = require('./Calendar/index.js');
+var index$9 = require('./CalendarInput/index.js');
+var index$a = require('./Checkbox/index.js');
+var index$b = require('./Chip/index.js');
+var index$c = require('./CircleProgress/index.js');
+var index$d = require('./ClickOutside/index.js');
+var index$e = require('./Collaps/index.js');
+var index$f = require('./Container/index.js');
+var index$g = require('./Datatable/index.js');
+var index$h = require('./DataFilter/index.js');
+var index$i = require('./Divider/index.js');
+var index$j = require('./Drawer/index.js');
+var index$k = require('./Form/index.js');
+var index$l = require('./GridContainer/index.js');
+var index$m = require('./GridItem/index.js');
+var index$n = require('./IconButton/index.js');
+var index$o = require('./Image/index.js');
+var index$p = require('./Input/index.js');
+var index$q = require('./Label/index.js');
+var index$r = require('./Layer/index.js');
+var index$s = require('./LineProgress/index.js');
+var index$t = require('./List/index.js');
+var index$u = require('./ListItem/index.js');
+var index$v = require('./LoadingBox/index.js');
+var index$w = require('./Menu/index.js');
+var index$x = require('./Modal/index.js');
+var index$y = require('./NoSSR/index.js');
+var index$z = require('./Option/index.js');
+var index$A = require('./Paper/index.js');
+var index$B = require('./Portal/index.js');
+var index$C = require('./Radio/index.js');
+var index$D = require('./Scrollbar/index.js');
+var index$E = require('./Select/index.js');
+var index$F = require('./Stack/index.js');
+var index$G = require('./Switch/index.js');
+var index$H = require('./Tab/index.js');
+var index$I = require('./Table/index.js');
+var index$J = require('./TableBody/index.js');
+var index$K = require('./TableCell/index.js');
+var index$L = require('./TableFooter/index.js');
+var index$M = require('./TableHead/index.js');
+var index$N = require('./TablePagination/index.js');
+var index$O = require('./TableRow/index.js');
+var index$P = require('./Tabs/index.js');
+var index$Q = require('./Text/index.js');
+var index$R = require('./Toast/index.js');
+var index$S = require('./Tooltip/index.js');
+var index$T = require('./useCorner/index.js');
+var index$U = require('./ViewBox/index.js');
+var SelectFilter = require('./DataFilter/options/SelectFilter.js');
+var MultiSelectFilter = require('./DataFilter/options/MultiSelectFilter.js');
+var NumberFilter = require('./DataFilter/options/NumberFilter.js');
+var TextFilter = require('./DataFilter/options/TextFilter.js');
+var NumberRangeFilter = require('./DataFilter/options/NumberRangeFilter.js');
+var DateFilter = require('./DataFilter/options/DateFilter.js');
+var DateRangeFilter = require('./DataFilter/options/DateRangeFilter.js');
 
 
 
 exports.Accordion = index;
-exports.Alert = index$1;
-exports.Avatar = index$2;
-exports.Badge = index$3;
-exports.Box = index$4;
-exports.Button = index$5;
-exports.ButtonGroup = index$6;
-exports.Calendar = index$7;
-exports.CalendarInput = index$8;
-exports.Checkbox = index$9;
-exports.Chip = index$a;
-exports.CircleProgress = index$b;
-exports.ClickOutside = index$c;
-exports.Collaps = index$d;
-exports.Container = index$e;
-exports.Datatable = index$f;
-exports.Divider = index$g;
-exports.Drawer = index$h;
-exports.Form = index$i;
-exports.GridContainer = index$j;
-exports.GridItem = index$k;
-exports.IconButton = index$l;
-exports.Image = index$m;
-exports.Input = index$n;
-exports.Label = index$o;
-exports.Layer = index$p;
-exports.LineProgress = index$q;
-exports.List = index$r;
-exports.ListItem = index$s;
-exports.LoadingBox = index$t;
-exports.Menu = index$u;
-exports.Modal = index$v;
-exports.NoSSR = index$w;
-exports.Option = index$x;
-exports.Paper = index$y;
-exports.Portal = index$z;
-exports.Radio = index$A;
-exports.Scrollbar = index$B;
-exports.Select = index$C;
-exports.Stack = index$D;
-exports.Switch = index$E;
-exports.Tab = index$F;
-exports.Table = index$G;
-exports.TableBody = index$H;
-exports.TableCell = index$I;
-exports.TableFooter = index$J;
-exports.TableHead = index$K;
-exports.TablePagination = index$L;
-exports.TableRow = index$M;
-exports.Tabs = index$N;
-exports.Text = index$O;
-exports.Toast = index$P;
-exports.Tooltip = index$Q;
-exports.useCorner = index$R;
-exports.ViewBox = index$S;
+exports.Autocomplete = index$1;
+exports.Alert = index$2;
+exports.Avatar = index$3;
+exports.Badge = index$4;
+exports.Box = index$5;
+exports.Button = index$6;
+exports.ButtonGroup = index$7;
+exports.Calendar = index$8;
+exports.CalendarInput = index$9;
+exports.Checkbox = index$a;
+exports.Chip = index$b;
+exports.CircleProgress = index$c;
+exports.ClickOutside = index$d;
+exports.Collaps = index$e;
+exports.Container = index$f;
+exports.Datatable = index$g;
+exports.DataFilter = index$h.default;
+exports.Divider = index$i;
+exports.Drawer = index$j;
+exports.Form = index$k;
+exports.GridContainer = index$l;
+exports.GridItem = index$m;
+exports.IconButton = index$n;
+exports.Image = index$o;
+exports.Input = index$p;
+exports.Label = index$q;
+exports.Layer = index$r;
+exports.LineProgress = index$s;
+exports.List = index$t;
+exports.ListItem = index$u;
+exports.LoadingBox = index$v;
+exports.Menu = index$w;
+exports.Modal = index$x;
+exports.NoSSR = index$y;
+exports.Option = index$z;
+exports.Paper = index$A;
+exports.Portal = index$B;
+exports.Radio = index$C;
+exports.Scrollbar = index$D;
+exports.Select = index$E;
+exports.Stack = index$F;
+exports.Switch = index$G;
+exports.Tab = index$H;
+exports.Table = index$I;
+exports.TableBody = index$J;
+exports.TableCell = index$K;
+exports.TableFooter = index$L;
+exports.TableHead = index$M;
+exports.TablePagination = index$N;
+exports.TableRow = index$O;
+exports.Tabs = index$P;
+exports.Text = index$Q;
+exports.Toast = index$R;
+exports.Tooltip = index$S;
+exports.useCorner = index$T;
+exports.ViewBox = index$U;
+exports.SelectFilter = SelectFilter;
+exports.MultiSelectFilter = MultiSelectFilter;
+exports.NumberFilter = NumberFilter;
+exports.TextFilter = TextFilter;
+exports.NumberRangeFilter = NumberRangeFilter;
+exports.DateFilter = DateFilter;
+exports.DateRangeFilter = DateRangeFilter;
 //# sourceMappingURL=index.js.map

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/index.mjs

@@ -1,4 +1,5 @@
 export { default as Accordion } from './Accordion/index.mjs';
+export { default as Autocomplete } from './Autocomplete/index.mjs';
 export { default as Alert } from './Alert/index.mjs';
 export { default as Avatar } from './Avatar/index.mjs';
 export { default as Badge } from './Badge/index.mjs';
@@ -14,6 +15,7 @@ export { default as ClickOutside } from './ClickOutside/index.mjs';
 export { default as Collaps } from './Collaps/index.mjs';
 export { default as Container } from './Container/index.mjs';
 export { default as Datatable } from './Datatable/index.mjs';
+export { default as DataFilter } from './DataFilter/index.mjs';
 export { default as Divider } from './Divider/index.mjs';
 export { default as Drawer } from './Drawer/index.mjs';
 export { default as Form } from './Form/index.mjs';
@@ -53,4 +55,11 @@ export { default as Toast } from './Toast/index.mjs';
 export { default as Tooltip } from './Tooltip/index.mjs';
 export { default as useCorner } from './useCorner/index.mjs';
 export { default as ViewBox } from './ViewBox/index.mjs';
+export { default as SelectFilter } from './DataFilter/options/SelectFilter.mjs';
+export { default as MultiSelectFilter } from './DataFilter/options/MultiSelectFilter.mjs';
+export { default as NumberFilter } from './DataFilter/options/NumberFilter.mjs';
+export { default as TextFilter } from './DataFilter/options/TextFilter.mjs';
+export { default as NumberRangeFilter } from './DataFilter/options/NumberRangeFilter.mjs';
+export { default as DateFilter } from './DataFilter/options/DateFilter.mjs';
+export { default as DateRangeFilter } from './DataFilter/options/DateRangeFilter.mjs';
 //# sourceMappingURL=index.mjs.map

package/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@xanui/ui",
-  "version": "1.1.26",
+  "version": "1.1.28",
   "description": "",
   "private": false,
   "main": "./index.js",
   "module": "./index.mjs",
   "types": "./index.d.ts",
   "dependencies": {
-    "@xanui/core": "^1.2.39",
+    "@xanui/core": "^1.2.40",
     "@xanui/icons": "^1.1.10",
     "pretty-class": "^1.0.8",
     "react-state-bucket": "^1.2.6"
@@ -15,11 +15,6 @@
   "keywords": [],
   "sideEffects": false,
   "exports": {
-    ".": {
-      "import": "./index.mjs",
-      "require": "./index.js",
-      "types": "./index.d.ts"
-    },
     "./*": {
       "import": "./*/index.mjs",
       "require": "./*/index.js",