@bsol-oss/react-datatable5 7.1.0 → 7.3.0

package/dist/index.js

@@ -6,8 +6,11 @@ var ai = require('react-icons/ai');
 var React = require('react');
 var md = require('react-icons/md');
 var lu = require('react-icons/lu');
-var io = require('react-icons/io');
+var Dayzed = require('@bsol-oss/dayzed-react19');
+var fa6 = require('react-icons/fa6');
 var bi = require('react-icons/bi');
+var cg = require('react-icons/cg');
+var io = require('react-icons/io');
 var hi2 = require('react-icons/hi2');
 var reactTable = require('@tanstack/react-table');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
@@ -16,12 +19,10 @@ var gr = require('react-icons/gr');
 var reactQuery = require('@tanstack/react-query');
 var io5 = require('react-icons/io5');
 var hi = require('react-icons/hi');
-var Dayzed = require('@bsol-oss/dayzed-react19');
-var fa6 = require('react-icons/fa6');
-var cg = require('react-icons/cg');
 var adapter = require('@atlaskit/pragmatic-drag-and-drop/element/adapter');
 var invariant = require('tiny-invariant');
 var axios = require('axios');
+var usehooks = require('@uidotdev/usehooks');
 var reactHookForm = require('react-hook-form');
 var dayjs = require('dayjs');
 var adapter$1 = require('@atlaskit/pragmatic-drag-and-drop/external/adapter');
@@ -51,6 +52,7 @@ const DataTableContext = React.createContext({
     table: {},
     globalFilter: "",
     setGlobalFilter: () => { },
+    type: "client",
 });
 
 const useDataTableContext = () => {
@@ -92,13 +94,363 @@ react.Dialog.Description;
 const DialogTrigger = react.Dialog.Trigger;
 const DialogActionTrigger = react.Dialog.ActionTrigger;
 
+const Radio = React__namespace.forwardRef(function Radio(props, ref) {
+    const { children, inputProps, rootRef, ...rest } = props;
+    return (jsxRuntime.jsxs(react.RadioGroup.Item, { ref: rootRef, ...rest, children: [jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.RadioGroup.ItemIndicator, {}), children && (jsxRuntime.jsx(react.RadioGroup.ItemText, { children: children }))] }));
+});
+const RadioGroup = react.RadioGroup.Root;
+
+const monthNamesFull = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const weekdayNamesShort$1 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function Calendar$1({ calendars, getBackProps, getForwardProps, getDateProps, selected = [], firstDayOfWeek = 0, }) {
+    const [hoveredDate, setHoveredDate] = React.useState();
+    const onMouseLeave = () => {
+        setHoveredDate(undefined);
+    };
+    const onMouseEnter = (date) => {
+        setHoveredDate(date);
+    };
+    const isInRange = (date) => {
+        if (selected.length) {
+            const firstSelected = selected[0].getTime();
+            if (selected.length === 2) {
+                const secondSelected = selected[1].getTime();
+                return (firstSelected < date.getTime() && secondSelected > date.getTime());
+            }
+            else {
+                return !!(hoveredDate &&
+                    ((firstSelected < date.getTime() &&
+                        hoveredDate.getTime() >= date.getTime()) ||
+                        (date.getTime() < firstSelected &&
+                            date.getTime() >= hoveredDate.getTime())));
+            }
+        }
+        return false;
+    };
+    if (calendars.length) {
+        return (jsxRuntime.jsxs(react.Grid, { onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(react.Grid, { templateColumns: "repeat(4, auto)", justifyContent: "center", children: [jsxRuntime.jsx(react.Button, { variant: "ghost", ...getBackProps({
+                                calendars,
+                                offset: 12,
+                            }), children: "<<" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getBackProps({ calendars }), children: "Back" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({ calendars }), children: "Next" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({
+                                calendars,
+                                offset: 12,
+                            }), children: ">>" })] }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(2, auto)", justifyContent: "center", gap: 4, children: calendars.map((calendar) => (jsxRuntime.jsxs(react.Grid, { gap: 4, children: [jsxRuntime.jsxs(react.Grid, { justifyContent: "center", children: [monthNamesFull[calendar.month], " ", calendar.year] }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: [0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
+                                    const weekday = (weekdayNum + firstDayOfWeek) % 7;
+                                    return (jsxRuntime.jsx(react.Box, { minWidth: "48px", textAlign: "center", children: weekdayNamesShort$1[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
+                                }) }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: calendar.weeks.map((week, windex) => week.map((dateObj, index) => {
+                                    const key = `${calendar.month}${calendar.year}${windex}${index}`;
+                                    if (!dateObj) {
+                                        return jsxRuntime.jsx(react.Box, {}, key);
+                                    }
+                                    const { date, selected, selectable, today } = dateObj;
+                                    const getStyle = ({ selected, unavailable, today, isInRange, }) => {
+                                        if (unavailable) {
+                                            return {
+                                                colorPalette: "gray",
+                                                variant: "solid",
+                                            };
+                                        }
+                                        if (selected) {
+                                            return {
+                                                colorPalette: "blue",
+                                                variant: "solid",
+                                            };
+                                        }
+                                        if (isInRange) {
+                                            return {
+                                                colorPalette: "blue",
+                                                variant: "subtle",
+                                            };
+                                        }
+                                        if (today) {
+                                            return {
+                                                colorPalette: "green",
+                                                variant: "solid",
+                                            };
+                                        }
+                                        return { variant: "ghost" };
+                                    };
+                                    return (jsxRuntime.jsx(react.Button, { ...getDateProps({
+                                            dateObj,
+                                            onMouseEnter: () => {
+                                                onMouseEnter(date);
+                                            },
+                                        }), ...getStyle({
+                                            selected,
+                                            unavailable: !selectable,
+                                            today,
+                                            isInRange: isInRange(date),
+                                        }), children: selectable ? date.getDate() : "X" }, key));
+                                })) })] }, `${calendar.month}${calendar.year}`))) })] }));
+    }
+    return null;
+}
+class RangeDatePicker extends React.Component {
+    render() {
+        return (jsxRuntime.jsx(Dayzed, { onDateSelected: this.props.onDateSelected, selected: this.props.selected, firstDayOfWeek: this.props.firstDayOfWeek, showOutsideDays: this.props.showOutsideDays, date: this.props.date, minDate: this.props.minDate, maxDate: this.props.maxDate, monthsToDisplay: this.props.monthsToDisplay, render: (dayzedData) => (jsxRuntime.jsx(Calendar$1, { ...dayzedData,
+                firstDayOfWeek: this.props.firstDayOfWeek,
+                selected: this.props.selected })) }));
+    }
+}
+
+const getRangeDates = ({ selectable, date, selectedDates, }) => {
+    if (!selectable) {
+        return;
+    }
+    const dateTime = date.getTime();
+    const newDates = [...selectedDates];
+    if (selectedDates.length) {
+        if (selectedDates.length === 1) {
+            const firstTime = selectedDates[0].getTime();
+            if (firstTime < dateTime) {
+                newDates.push(date);
+            }
+            else {
+                newDates.unshift(date);
+            }
+            return newDates;
+        }
+        else if (newDates.length === 2) {
+            return [date];
+        }
+    }
+    else {
+        newDates.push(date);
+        return newDates;
+    }
+};
+
+const Slider = React__namespace.forwardRef(function Slider(props, ref) {
+    const { marks: marksProp, label, showValue, ...rest } = props;
+    const value = props.defaultValue ?? props.value;
+    const marks = marksProp?.map((mark) => {
+        if (typeof mark === "number")
+            return { value: mark, label: undefined };
+        return mark;
+    });
+    const hasMarkLabel = !!marks?.some((mark) => mark.label);
+    return (jsxRuntime.jsxs(react.Slider.Root, { ref: ref, thumbAlignment: "center", ...rest, children: [label && !showValue && (jsxRuntime.jsx(react.Slider.Label, { children: label })), label && showValue && (jsxRuntime.jsxs(react.HStack, { justify: "space-between", children: [jsxRuntime.jsx(react.Slider.Label, { children: label }), jsxRuntime.jsx(react.Slider.ValueText, {})] })), jsxRuntime.jsxs(react.Slider.Control, { "data-has-mark-label": hasMarkLabel || undefined, children: [jsxRuntime.jsx(react.Slider.Track, { children: jsxRuntime.jsx(react.Slider.Range, {}) }), jsxRuntime.jsx(SliderThumbs, { value: value }), jsxRuntime.jsx(SliderMarks, { marks: marks })] })] }));
+});
+function SliderThumbs(props) {
+    const { value } = props;
+    return (jsxRuntime.jsx(react.For, { each: value, children: (_, index) => (jsxRuntime.jsx(react.Slider.Thumb, { index: index, children: jsxRuntime.jsx(react.Slider.HiddenInput, {}) }, index)) }));
+}
+const SliderMarks = React__namespace.forwardRef(function SliderMarks(props, ref) {
+    const { marks } = props;
+    if (!marks?.length)
+        return null;
+    return (jsxRuntime.jsx(react.Slider.MarkerGroup, { ref: ref, children: marks.map((mark, index) => {
+            const value = typeof mark === "number" ? mark : mark.value;
+            const label = typeof mark === "number" ? undefined : mark.label;
+            return (jsxRuntime.jsxs(react.Slider.Marker, { value: value, children: [jsxRuntime.jsx(react.Slider.MarkerIndicator, {}), label] }, index));
+        }) }));
+});
+
+const RangeFilter = ({ range, setRange, defaultValue, min, max, step, }) => {
+    return (jsxRuntime.jsxs(react.Flex, { p: 2, gap: 2, flexFlow: 'column', children: [jsxRuntime.jsx(react.Text, { children: `${range[0]} - ${range[1]}` }), jsxRuntime.jsx(Slider, { width: "full", min: min, max: max, defaultValue: defaultValue, step: step, name: `Selected Range: ${range[0]} - ${range[1]}`, 
+                // value={field.value}
+                onValueChange: (val) => setRange(val.value) })] }));
+};
+
+const Tag = React__namespace.forwardRef(function Tag(props, ref) {
+    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
+    return (jsxRuntime.jsxs(react.Tag.Root, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.Tag.StartElement, { children: startElement })), jsxRuntime.jsx(react.Tag.Label, { children: children }), endElement && (jsxRuntime.jsx(react.Tag.EndElement, { children: endElement })), closable && (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { onClick: onClose }) }))] }));
+});
+
+const TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
+    const toggleTag = (tag) => {
+        if (selectedTags.includes(tag)) {
+            onTagChange(selectedTags.filter((t) => t !== tag));
+        }
+        else {
+            onTagChange([...selectedTags, tag]);
+        }
+    };
+    return (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => (jsxRuntime.jsx(Tag, { variant: selectedTags.includes(tag) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(tag) ? true : undefined, onClick: () => toggleTag(tag), children: tag }))) }));
+};
+
+const Filter = ({ column }) => {
+    const { filterVariant } = column.columnDef.meta ?? {};
+    const displayName = column.columnDef.meta?.displayName ?? column.id;
+    const filterOptions = column.columnDef.meta?.filterOptions ?? [];
+    if (column.columns.length > 0) {
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 1, children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: 1, children: column.columns.map((column) => {
+                        return jsxRuntime.jsx(Filter, { column: column }, column.id);
+                    }) }, column.id)] }));
+    }
+    if (!column.getCanFilter()) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    }
+    if (filterVariant === "select") {
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(RadioGroup, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onValueChange: (details) => {
+                        column.setFilterValue(details.value);
+                    }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: "0.5rem", children: filterOptions.map((item) => (jsxRuntime.jsx(Radio, { value: item, children: item }, item))) }) })] }, column.id));
+    }
+    if (filterVariant === "tag") {
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: filterOptions, selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
+                        if (tags.length === 0) {
+                            return column.setFilterValue(undefined);
+                        }
+                        column.setFilterValue(tags);
+                    } })] }, column.id));
+    }
+    if (filterVariant === "boolean") {
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: ["true", "false"], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
+                        if (tags.length === 0) {
+                            return column.setFilterValue(undefined);
+                        }
+                        column.setFilterValue(tags);
+                    } })] }, column.id));
+    }
+    if (filterVariant === "range") {
+        const filterValue = column.getFilterValue() ?? [
+            undefined,
+            undefined,
+        ];
+        const { min, max, step, defaultValue } = column.columnDef.meta
+            ?.filterRangeConfig ?? {
+            min: 0,
+            max: 100,
+            step: 1,
+            defaultValue: [4, 50],
+        };
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(RangeFilter, { range: filterValue, setRange: function (value) {
+                        // throw new Error("Function not implemented.");
+                        column.setFilterValue(value);
+                    }, defaultValue: defaultValue, min: min, max: max, step: step })] }, column.id));
+    }
+    if (filterVariant === "dateRange") {
+        const filterValue = column.getFilterValue() ?? [];
+        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(RangeDatePicker, { selected: filterValue, onDateSelected: ({ selected, selectable, date }) => {
+                        const newDates = getRangeDates({
+                            selectable,
+                            date,
+                            selectedDates: filterValue,
+                        }) ?? [];
+                        column.setFilterValue(() => {
+                            return newDates;
+                        });
+                    } })] }, column.id));
+    }
+    if (filterVariant === "custom") {
+        const renderFilter = column.columnDef.meta?.renderFilter;
+        if (renderFilter === undefined) {
+            throw new Error("renderFilter is undefined");
+        }
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderFilter(column) });
+    }
+    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(react.Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
+                    column.setFilterValue(e.target.value);
+                } })] }, column.id));
+};
+const TableFilter = () => {
+    const { table } = useDataTableContext();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getAllColumns().map((column) => {
+            return jsxRuntime.jsx(Filter, { column: column }, column.id);
+        }) }));
+};
+
+const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
+    const { table } = useDataTableContext();
+    return (jsxRuntime.jsx(react.Button, { onClick: () => {
+            table.resetColumnFilters();
+        }, children: text }));
+};
+
 const EditFilterButton = ({ text, title = "Edit Filter", closeText = "Close", resetText = "Reset", icon = jsxRuntime.jsx(md.MdFilterAlt, {}), }) => {
     const filterModal = react.useDisclosure();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: 'ghost', onClick: filterModal.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: title }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, { text: resetText })] }) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(DialogActionTrigger, { asChild: true, children: jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, children: closeText }) }), jsxRuntime.jsx(react.Button, { children: "Save" })] }), jsxRuntime.jsx(DialogCloseTrigger, {})] })] }) }) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(DialogRoot, { size: ["full", "full", "md", "md"], open: filterModal.open, children: jsxRuntime.jsxs(DialogRoot, { children: [jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", onClick: filterModal.onOpen, children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogHeader, { children: jsxRuntime.jsx(DialogTitle, { children: title }) }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "1rem", children: [jsxRuntime.jsx(TableFilter, {}), jsxRuntime.jsx(ResetFilteringButton, { text: resetText })] }) }), jsxRuntime.jsxs(DialogFooter, { children: [jsxRuntime.jsx(DialogActionTrigger, { asChild: true, children: jsxRuntime.jsx(react.Button, { onClick: filterModal.onClose, children: closeText }) }), jsxRuntime.jsx(react.Button, { children: "Save" })] }), jsxRuntime.jsx(DialogCloseTrigger, {})] })] }) }) }));
+};
+
+const ColumnOrderChanger = ({ columns }) => {
+    const [order, setOrder] = React.useState([]);
+    const [originalOrder, setOriginalOrder] = React.useState([]);
+    const { table } = useDataTableContext();
+    const handleChangeOrder = (startIndex, endIndex) => {
+        const newOrder = Array.from(order);
+        const [removed] = newOrder.splice(startIndex, 1);
+        newOrder.splice(endIndex, 0, removed);
+        setOrder(newOrder);
+    };
+    React.useEffect(() => {
+        setOrder(columns);
+    }, [columns]);
+    React.useEffect(() => {
+        if (originalOrder.length > 0) {
+            return;
+        }
+        if (columns.length <= 0) {
+            return;
+        }
+        setOriginalOrder(columns);
+    }, [columns]);
+    return (jsxRuntime.jsxs(react.Flex, { gap: 2, flexFlow: "column", children: [jsxRuntime.jsx(react.Flex, { gap: 2, flexFlow: "column", children: order.map((columnId, index) => (jsxRuntime.jsxs(react.Flex, { gap: 2, alignItems: "center", justifyContent: "space-between", children: [jsxRuntime.jsx(react.IconButton, { onClick: () => {
+                                const prevIndex = index - 1;
+                                if (prevIndex >= 0) {
+                                    handleChangeOrder(index, prevIndex);
+                                }
+                            }, disabled: index === 0, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowUpward, {}) }), table
+                            .getAllFlatColumns()
+                            .filter((column) => {
+                            return column.id === columnId;
+                        })
+                            .map((column) => {
+                            const displayName = column.columnDef.meta === undefined
+                                ? column.id
+                                : column.columnDef.meta.displayName;
+                            return jsxRuntime.jsx("span", { children: displayName }, column.id);
+                        }), jsxRuntime.jsx(react.IconButton, { onClick: () => {
+                                const nextIndex = index + 1;
+                                if (nextIndex < order.length) {
+                                    handleChangeOrder(index, nextIndex);
+                                }
+                            }, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] }, columnId))) }), jsxRuntime.jsxs(react.Flex, { gap: "0.25rem", children: [jsxRuntime.jsx(react.Button, { onClick: () => {
+                            table.setColumnOrder(order);
+                        }, children: "Apply" }), jsxRuntime.jsx(react.Button, { onClick: () => {
+                            table.setColumnOrder(originalOrder);
+                        }, children: "Reset" })] })] }));
+};
+const TableOrderer = () => {
+    const { table } = useDataTableContext();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ColumnOrderChanger, { columns: table.getState().columnOrder }) }));
+};
+
+const EditOrderButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineMoveDown, {}), title = "Change Order", }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(DialogRoot, { size: "cover", children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, {}), title] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: jsxRuntime.jsx(TableOrderer, {}) }) }), jsxRuntime.jsx(DialogFooter, {})] })] }) }));
+};
+
+const TableSorter = () => {
+    const { table } = useDataTableContext();
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
+                const displayName = header.column.columnDef.meta === undefined
+                    ? header.column.id
+                    : header.column.columnDef.meta.displayName;
+                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanSort() && (jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsxs(react.Button, { variant: "ghost", onClick: () => {
+                                    header.column.toggleSorting();
+                                }, children: [header.column.getIsSorted() === false && jsxRuntime.jsx(fa6.FaUpDown, {}), header.column.getIsSorted() === "asc" && jsxRuntime.jsx(bi.BiDownArrow, {}), header.column.getIsSorted() === "desc" && jsxRuntime.jsx(bi.BiUpArrow, {})] }), header.column.getIsSorted() && (jsxRuntime.jsx(react.Button, { onClick: () => {
+                                    header.column.clearSorting();
+                                }, children: jsxRuntime.jsx(cg.CgClose, {}) }))] })) }));
+            }) }))) }));
 };
 
-const EditOrderButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineMoveDown, {}), title = "Change Order", }) => {
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(DialogRoot, { size: "cover", children: [jsxRuntime.jsx(react.DialogBackdrop, {}), jsxRuntime.jsx(DialogTrigger, { asChild: true, children: jsxRuntime.jsxs(react.Button, { as: react.Box, variant: "ghost", children: [icon, " ", text] }) }), jsxRuntime.jsxs(DialogContent, { children: [jsxRuntime.jsx(DialogCloseTrigger, {}), jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(DialogTitle, {}), title] }), jsxRuntime.jsx(DialogBody, { children: jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.25rem", children: jsxRuntime.jsx(TableOrderer, {}) }) }), jsxRuntime.jsx(DialogFooter, {})] })] }) }));
+const ResetSortingButton = ({ text = "Reset Sorting", }) => {
+    const { table } = useDataTableContext();
+    return (jsxRuntime.jsx(react.Button, { onClick: () => {
+            table.resetSorting();
+        }, children: text }));
 };
 
 const EditSortingButton = ({ text, icon = jsxRuntime.jsx(md.MdOutlineSort, {}), title = "Edit Sorting", }) => {
@@ -149,13 +501,6 @@ const PageSizeControl = ({ pageSizes = [10, 20, 30, 40, 50], }) => {
                         }, children: pageSize }, `chakra-table-pageSize-${pageSize}`))) })] }) }));
 };
 
-const ResetFilteringButton = ({ text = "Reset Filtering", }) => {
-    const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(react.Button, { onClick: () => {
-            table.resetColumnFilters();
-        }, children: text }));
-};
-
 const ResetSelectionButton = ({ text = "Reset Selection", }) => {
     const { table } = useDataTableContext();
     return (jsxRuntime.jsx(react.Button, { onClick: () => {
@@ -163,16 +508,15 @@ const ResetSelectionButton = ({ text = "Reset Selection", }) => {
         }, children: text }));
 };
 
-const ResetSortingButton = ({ text = "Reset Sorting", }) => {
-    const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(react.Button, { onClick: () => {
-            table.resetSorting();
-        }, children: text }));
-};
-
 const RowCountText = () => {
-    const { table } = useDataTableContext();
-    return jsxRuntime.jsx(react.Text, { children: table.getFilteredRowModel().flatRows.length ?? 0 });
+    const { table, type } = useDataTableContext();
+    const getCount = () => {
+        if (type === "client") {
+            return table.getFilteredRowModel().flatRows.length ?? 0;
+        }
+        return table.getRowCount();
+    };
+    return jsxRuntime.jsx(react.Text, { children: getCount() });
 };
 
 const { withContext } = react.createRecipeContext({ key: "button" });
@@ -241,17 +585,18 @@ React__namespace.forwardRef(function PaginationPageText(props, ref) {
 
 // TODO: not working in client side
 const TablePagination = () => {
-    const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(PaginationRoot, { page: table.getState().pagination.pageIndex + 1, count: table.getFilteredRowModel().flatRows.length ?? 0, pageSize: table.getState().pagination.pageSize, onPageChange: (e) => {
+    const { table, type } = useDataTableContext();
+    const getCount = () => {
+        if (type === "client") {
+            return table.getFilteredRowModel().flatRows.length ?? 0;
+        }
+        return table.getRowCount();
+    };
+    return (jsxRuntime.jsx(PaginationRoot, { page: table.getState().pagination.pageIndex + 1, count: getCount(), pageSize: table.getState().pagination.pageSize, onPageChange: (e) => {
             table.setPageIndex(e.page - 1);
         }, children: jsxRuntime.jsxs(react.HStack, { children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), jsxRuntime.jsx(PaginationItems, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) }));
 };
 
-const Tag = React__namespace.forwardRef(function Tag(props, ref) {
-    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
-    return (jsxRuntime.jsxs(react.Tag.Root, { ref: ref, ...rest, children: [startElement && (jsxRuntime.jsx(react.Tag.StartElement, { children: startElement })), jsxRuntime.jsx(react.Tag.Label, { children: children }), endElement && (jsxRuntime.jsx(react.Tag.EndElement, { children: endElement })), closable && (jsxRuntime.jsx(react.Tag.EndElement, { children: jsxRuntime.jsx(react.Tag.CloseTrigger, { onClick: onClose }) }))] }));
-});
-
 const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
     if (!!row.original === false) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -389,7 +734,7 @@ const fuzzyFilter = (row, columnId, value, addMeta) => {
     // Return if the item should be filtered in/out
     return itemRank.passed;
 };
-const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) => {
+function DataTable({ columns, data, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, children, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: data,
@@ -436,24 +781,19 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
         onDensityChange: setDensity,
         onColumnVisibilityChange: setColumnVisibility,
     });
-    React.useEffect(() => {
-        setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
-    }, [table, setColumnOrder]);
-    React.useEffect(() => {
-        onRowSelect(table.getState().rowSelection, data);
-    }, [data, onRowSelect, table]);
     return (jsxRuntime.jsx(DataTableContext.Provider, { value: {
             table: { ...table },
             globalFilter: globalFilter,
             setGlobalFilter: setGlobalFilter,
+            type: "client",
         }, children: children }));
-};
+}
 
 const DataTableServerContext = React.createContext({
     url: "",
 });
 
-const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, onRowSelect = () => { }, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }) => {
+function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSelection = true, enableSubRowSelection = true, columnOrder, columnFilters, columnVisibility, density, globalFilter, pagination, sorting, rowSelection, setPagination, setSorting, setColumnFilters, setRowSelection, setGlobalFilter, setColumnOrder, setDensity, setColumnVisibility, query, children, url, }) {
     const table = reactTable.useReactTable({
         _features: [DensityFeature],
         data: query.data?.data ?? [],
@@ -505,8 +845,9 @@ const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSel
             table: { ...table },
             globalFilter,
             setGlobalFilter,
+            type: "server",
         }, children: jsxRuntime.jsx(DataTableServerContext.Provider, { value: { url }, children: children }) }));
-};
+}
 
 const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
@@ -596,8 +937,8 @@ const Tooltip = React__namespace.forwardRef(function Tooltip(props, ref) {
     return (jsxRuntime.jsxs(react.Tooltip.Root, { ...rest, children: [jsxRuntime.jsx(react.Tooltip.Trigger, { asChild: true, children: children }), jsxRuntime.jsx(react.Portal, { disabled: !portalled, container: portalRef, children: jsxRuntime.jsx(react.Tooltip.Positioner, { children: jsxRuntime.jsxs(react.Tooltip.Content, { ref: ref, ...contentProps, children: [showArrow && (jsxRuntime.jsx(react.Tooltip.Arrow, { children: jsxRuntime.jsx(react.Tooltip.ArrowTip, {}) })), content] }) }) })] }));
 });
 
-const TableControls = ({ totalText = "Total:", showFilter = false, fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showFilterName = false, showFilterTags = false, showReload = false, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, }) => {
-    return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: "An error occurred while fetching data", children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showFilter && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(GlobalFilter, {}), jsxRuntime.jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" })] })), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
+const TableControls = ({ totalText = "Total:", fitTableWidth = false, fitTableHeight = false, isMobile = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, }) => {
+    return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr auto", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", justifySelf: "center", alignSelf: "center", gap: "0.5rem", children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: jsxRuntime.jsx(EditViewButton, { text: isMobile ? undefined : "View", icon: jsxRuntime.jsx(md.MdOutlineViewColumn, {}) }) }), jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsxRuntime.jsx(react.Spinner, { size: "sm" }), hasError && (jsxRuntime.jsx(Tooltip, { content: "An error occurred while fetching data", children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(EditFilterButton, { text: isMobile ? undefined : "Advanced Filter" }) })), showReload && jsxRuntime.jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
                             return (jsxRuntime.jsxs(react.Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxRuntime.jsxs(react.Text, { children: [column, ":"] }), jsxRuntime.jsx(FilterOptions, { column: column })] }, column));
                         }) })), showFilterTags && (jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(TableFilterTags, {}) }))] }), jsxRuntime.jsx(react.Box, { overflow: "auto", width: "100%", height: "100%", backgroundColor: "gray.50", _dark: {
                     backgroundColor: "gray.900",
@@ -788,316 +1129,52 @@ const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
         }, children: [jsxRuntime.jsx(io5.IoReload, {}), " ", text] }));
 };
 
-const EmptyState = React__namespace.forwardRef(function EmptyState(props, ref) {
-    const { title, description, icon, children, ...rest } = props;
-    return (jsxRuntime.jsx(react.EmptyState.Root, { ref: ref, ...rest, children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [icon && (jsxRuntime.jsx(react.EmptyState.Indicator, { children: icon })), description ? (jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })) : (jsxRuntime.jsx(react.EmptyState.Title, { children: title })), children] }) }));
-});
-
-const EmptyResult = (jsxRuntime.jsx(EmptyState, { icon: jsxRuntime.jsx(hi.HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxRuntime.jsxs(react.List.Root, { variant: "marker", children: [jsxRuntime.jsx(react.List.Item, { children: "Try removing filters" }), jsxRuntime.jsx(react.List.Item, { children: "Try different keywords" })] }) }));
-const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...props }) => {
-    const { table } = useDataTableContext();
-    if (table.getRowModel().rows.length <= 0) {
-        return emptyComponent;
-    }
-    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, ...props, children: children }));
-};
-
-const TableCardContainer = ({ children, variant = "", ...props }) => {
-    if (variant === "carousel") {
-        return (jsxRuntime.jsx(react.Flex, { overflow: "scroll", gap: "1rem", children: children }));
-    }
-    return (jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: "0.5rem", ...props, children: children }));
-};
-
-const DefaultCardTitle = () => {
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-};
-const TableCards = ({ isSelectable = false, showDisplayNameOnly = false, renderTitle = DefaultCardTitle, cardBodyProps = {}, }) => {
-    const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
-            return (jsxRuntime.jsx(react.Card.Root, { flex: "1 0 20rem", children: jsxRuntime.jsxs(react.Card.Body, { display: "flex", flexFlow: "column", gap: "0.5rem", ...cardBodyProps, children: [isSelectable && (jsxRuntime.jsx(Checkbox, { isChecked: row.getIsSelected(),
-                            disabled: !row.getCanSelect(),
-                            // indeterminate: row.getIsSomeSelected(),
-                            onChange: row.getToggleSelectedHandler() })), renderTitle(row), jsxRuntime.jsx(react.Grid, { templateColumns: "auto 1fr", gap: "1rem", children: row.getVisibleCells().map((cell) => {
-                                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react.Box, { children: [showDisplayNameOnly && (jsxRuntime.jsx(react.Text, { fontWeight: "bold", children: cell.column.columnDef.meta?.displayName ??
-                                                        cell.column.id })), !showDisplayNameOnly && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.header, 
-                                                    // @ts-expect-error Assuming the CellContext interface is the same as HeaderContext
-                                                    cell.getContext()) }))] }, `chakra-table-cardcolumnid-${row.id}`), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-cardcolumn-${row.id}`)] }));
-                            }) })] }) }, `chakra-table-card-${row.id}`));
-        }) }));
-};
-
-const TableComponent = ({ render = () => {
-    throw Error("Not Implemented");
-}, }) => {
-    const { table } = useDataTableContext();
-    return render(table);
-};
-
-const Radio = React__namespace.forwardRef(function Radio(props, ref) {
-    const { children, inputProps, rootRef, ...rest } = props;
-    return (jsxRuntime.jsxs(react.RadioGroup.Item, { ref: rootRef, ...rest, children: [jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsx(react.RadioGroup.ItemIndicator, {}), children && (jsxRuntime.jsx(react.RadioGroup.ItemText, { children: children }))] }));
-});
-const RadioGroup = react.RadioGroup.Root;
-
-const monthNamesFull = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-];
-const weekdayNamesShort$1 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-function Calendar$1({ calendars, getBackProps, getForwardProps, getDateProps, selected = [], firstDayOfWeek = 0, }) {
-    const [hoveredDate, setHoveredDate] = React.useState();
-    const onMouseLeave = () => {
-        setHoveredDate(undefined);
-    };
-    const onMouseEnter = (date) => {
-        setHoveredDate(date);
-    };
-    const isInRange = (date) => {
-        if (selected.length) {
-            const firstSelected = selected[0].getTime();
-            if (selected.length === 2) {
-                const secondSelected = selected[1].getTime();
-                return (firstSelected < date.getTime() && secondSelected > date.getTime());
-            }
-            else {
-                return !!(hoveredDate &&
-                    ((firstSelected < date.getTime() &&
-                        hoveredDate.getTime() >= date.getTime()) ||
-                        (date.getTime() < firstSelected &&
-                            date.getTime() >= hoveredDate.getTime())));
-            }
-        }
-        return false;
-    };
-    if (calendars.length) {
-        return (jsxRuntime.jsxs(react.Grid, { onMouseLeave: onMouseLeave, children: [jsxRuntime.jsxs(react.Grid, { templateColumns: "repeat(4, auto)", justifyContent: "center", children: [jsxRuntime.jsx(react.Button, { variant: "ghost", ...getBackProps({
-                                calendars,
-                                offset: 12,
-                            }), children: "<<" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getBackProps({ calendars }), children: "Back" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({ calendars }), children: "Next" }), jsxRuntime.jsx(react.Button, { variant: "ghost", ...getForwardProps({
-                                calendars,
-                                offset: 12,
-                            }), children: ">>" })] }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(2, auto)", justifyContent: "center", gap: 4, children: calendars.map((calendar) => (jsxRuntime.jsxs(react.Grid, { gap: 4, children: [jsxRuntime.jsxs(react.Grid, { justifyContent: "center", children: [monthNamesFull[calendar.month], " ", calendar.year] }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: [0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
-                                    const weekday = (weekdayNum + firstDayOfWeek) % 7;
-                                    return (jsxRuntime.jsx(react.Box, { minWidth: "48px", textAlign: "center", children: weekdayNamesShort$1[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
-                                }) }), jsxRuntime.jsx(react.Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: calendar.weeks.map((week, windex) => week.map((dateObj, index) => {
-                                    const key = `${calendar.month}${calendar.year}${windex}${index}`;
-                                    if (!dateObj) {
-                                        return jsxRuntime.jsx(react.Box, {}, key);
-                                    }
-                                    const { date, selected, selectable, today } = dateObj;
-                                    const getStyle = ({ selected, unavailable, today, isInRange, }) => {
-                                        if (unavailable) {
-                                            return {
-                                                colorPalette: "gray",
-                                                variant: "solid",
-                                            };
-                                        }
-                                        if (selected) {
-                                            return {
-                                                colorPalette: "blue",
-                                                variant: "solid",
-                                            };
-                                        }
-                                        if (isInRange) {
-                                            return {
-                                                colorPalette: "blue",
-                                                variant: "subtle",
-                                            };
-                                        }
-                                        if (today) {
-                                            return {
-                                                colorPalette: "green",
-                                                variant: "solid",
-                                            };
-                                        }
-                                        return { variant: "ghost" };
-                                    };
-                                    return (jsxRuntime.jsx(react.Button, { ...getDateProps({
-                                            dateObj,
-                                            onMouseEnter: () => {
-                                                onMouseEnter(date);
-                                            },
-                                        }), ...getStyle({
-                                            selected,
-                                            unavailable: !selectable,
-                                            today,
-                                            isInRange: isInRange(date),
-                                        }), children: selectable ? date.getDate() : "X" }, key));
-                                })) })] }, `${calendar.month}${calendar.year}`))) })] }));
-    }
-    return null;
-}
-class RangeDatePicker extends React.Component {
-    render() {
-        return (jsxRuntime.jsx(Dayzed, { onDateSelected: this.props.onDateSelected, selected: this.props.selected, firstDayOfWeek: this.props.firstDayOfWeek, showOutsideDays: this.props.showOutsideDays, date: this.props.date, minDate: this.props.minDate, maxDate: this.props.maxDate, monthsToDisplay: this.props.monthsToDisplay, render: (dayzedData) => (jsxRuntime.jsx(Calendar$1, { ...dayzedData,
-                firstDayOfWeek: this.props.firstDayOfWeek,
-                selected: this.props.selected })) }));
-    }
-}
-
-const getRangeDates = ({ selectable, date, selectedDates, }) => {
-    if (!selectable) {
-        return;
-    }
-    const dateTime = date.getTime();
-    const newDates = [...selectedDates];
-    if (selectedDates.length) {
-        if (selectedDates.length === 1) {
-            const firstTime = selectedDates[0].getTime();
-            if (firstTime < dateTime) {
-                newDates.push(date);
-            }
-            else {
-                newDates.unshift(date);
-            }
-            return newDates;
-        }
-        else if (newDates.length === 2) {
-            return [date];
-        }
-    }
-    else {
-        newDates.push(date);
-        return newDates;
-    }
-};
-
-const Slider = React__namespace.forwardRef(function Slider(props, ref) {
-    const { marks: marksProp, label, showValue, ...rest } = props;
-    const value = props.defaultValue ?? props.value;
-    const marks = marksProp?.map((mark) => {
-        if (typeof mark === "number")
-            return { value: mark, label: undefined };
-        return mark;
-    });
-    const hasMarkLabel = !!marks?.some((mark) => mark.label);
-    return (jsxRuntime.jsxs(react.Slider.Root, { ref: ref, thumbAlignment: "center", ...rest, children: [label && !showValue && (jsxRuntime.jsx(react.Slider.Label, { children: label })), label && showValue && (jsxRuntime.jsxs(react.HStack, { justify: "space-between", children: [jsxRuntime.jsx(react.Slider.Label, { children: label }), jsxRuntime.jsx(react.Slider.ValueText, {})] })), jsxRuntime.jsxs(react.Slider.Control, { "data-has-mark-label": hasMarkLabel || undefined, children: [jsxRuntime.jsx(react.Slider.Track, { children: jsxRuntime.jsx(react.Slider.Range, {}) }), jsxRuntime.jsx(SliderThumbs, { value: value }), jsxRuntime.jsx(SliderMarks, { marks: marks })] })] }));
-});
-function SliderThumbs(props) {
-    const { value } = props;
-    return (jsxRuntime.jsx(react.For, { each: value, children: (_, index) => (jsxRuntime.jsx(react.Slider.Thumb, { index: index, children: jsxRuntime.jsx(react.Slider.HiddenInput, {}) }, index)) }));
-}
-const SliderMarks = React__namespace.forwardRef(function SliderMarks(props, ref) {
-    const { marks } = props;
-    if (!marks?.length)
-        return null;
-    return (jsxRuntime.jsx(react.Slider.MarkerGroup, { ref: ref, children: marks.map((mark, index) => {
-            const value = typeof mark === "number" ? mark : mark.value;
-            const label = typeof mark === "number" ? undefined : mark.label;
-            return (jsxRuntime.jsxs(react.Slider.Marker, { value: value, children: [jsxRuntime.jsx(react.Slider.MarkerIndicator, {}), label] }, index));
-        }) }));
+const EmptyState$1 = React__namespace.forwardRef(function EmptyState(props, ref) {
+    const { title, description, icon, children, ...rest } = props;
+    return (jsxRuntime.jsx(react.EmptyState.Root, { ref: ref, ...rest, children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [icon && (jsxRuntime.jsx(react.EmptyState.Indicator, { children: icon })), description ? (jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })) : (jsxRuntime.jsx(react.EmptyState.Title, { children: title })), children] }) }));
 });
 
-const RangeFilter = ({ range, setRange, defaultValue, min, max, step, }) => {
-    return (jsxRuntime.jsxs(react.Flex, { p: 2, gap: 2, flexFlow: 'column', children: [jsxRuntime.jsx(react.Text, { children: `${range[0]} - ${range[1]}` }), jsxRuntime.jsx(Slider, { width: "full", min: min, max: max, defaultValue: defaultValue, step: step, name: `Selected Range: ${range[0]} - ${range[1]}`, 
-                // value={field.value}
-                onValueChange: (val) => setRange(val.value) })] }));
+const EmptyResult = (jsxRuntime.jsx(EmptyState$1, { icon: jsxRuntime.jsx(hi.HiColorSwatch, {}), title: "No results found", description: "Try adjusting your search", children: jsxRuntime.jsxs(react.List.Root, { variant: "marker", children: [jsxRuntime.jsx(react.List.Item, { children: "Try removing filters" }), jsxRuntime.jsx(react.List.Item, { children: "Try different keywords" })] }) }));
+const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...props }) => {
+    const { table } = useDataTableContext();
+    if (table.getRowModel().rows.length <= 0) {
+        return emptyComponent;
+    }
+    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, ...props, children: children }));
 };
 
-const TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
-    const toggleTag = (tag) => {
-        if (selectedTags.includes(tag)) {
-            onTagChange(selectedTags.filter((t) => t !== tag));
-        }
-        else {
-            onTagChange([...selectedTags, tag]);
-        }
-    };
-    return (jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", p: "0.5rem", gap: "0.5rem", children: availableTags.map((tag) => (jsxRuntime.jsx(Tag, { variant: selectedTags.includes(tag) ? "solid" : "outline", cursor: "pointer", closable: selectedTags.includes(tag) ? true : undefined, onClick: () => toggleTag(tag), children: tag }))) }));
+const TableCardContainer = ({ children, variant = "", ...props }) => {
+    if (variant === "carousel") {
+        return (jsxRuntime.jsx(react.Flex, { overflow: "scroll", gap: "1rem", children: children }));
+    }
+    return (jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: "0.5rem", ...props, children: children }));
 };
 
-const Filter = ({ column }) => {
-    const { filterVariant } = column.columnDef.meta ?? {};
-    const displayName = column.columnDef.meta?.displayName ?? column.id;
-    const filterOptions = column.columnDef.meta?.filterOptions ?? [];
-    if (column.columns.length > 0) {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 1, children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: 1, children: column.columns.map((column) => {
-                        return jsxRuntime.jsx(Filter, { column: column }, column.id);
-                    }) }, column.id)] }));
-    }
-    if (!column.getCanFilter()) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-    }
-    if (filterVariant === "select") {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(RadioGroup, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onValueChange: (details) => {
-                        column.setFilterValue(details.value);
-                    }, children: jsxRuntime.jsx(react.Flex, { flexFlow: "wrap", gap: "0.5rem", children: filterOptions.map((item) => (jsxRuntime.jsx(Radio, { value: item, children: item }, item))) }) })] }, column.id));
-    }
-    if (filterVariant === "tag") {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: filterOptions, selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
-                        if (tags.length === 0) {
-                            return column.setFilterValue(undefined);
-                        }
-                        column.setFilterValue(tags);
-                    } })] }, column.id));
-    }
-    if (filterVariant === "boolean") {
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(TagFilter, { availableTags: ["true", "false"], selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
-                        if (tags.length === 0) {
-                            return column.setFilterValue(undefined);
-                        }
-                        column.setFilterValue(tags);
-                    } })] }, column.id));
-    }
-    if (filterVariant === "range") {
-        const filterValue = column.getFilterValue() ?? [
-            undefined,
-            undefined,
-        ];
-        const { min, max, step, defaultValue } = column.columnDef.meta
-            ?.filterRangeConfig ?? {
-            min: 0,
-            max: 100,
-            step: 1,
-            defaultValue: [4, 50],
-        };
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(RangeFilter, { range: filterValue, setRange: function (value) {
-                        // throw new Error("Function not implemented.");
-                        column.setFilterValue(value);
-                    }, defaultValue: defaultValue, min: min, max: max, step: step })] }, column.id));
-    }
-    if (filterVariant === "dateRange") {
-        const filterValue = column.getFilterValue() ?? [];
-        return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(RangeDatePicker, { selected: filterValue, onDateSelected: ({ selected, selectable, date }) => {
-                        const newDates = getRangeDates({
-                            selectable,
-                            date,
-                            selectedDates: filterValue,
-                        }) ?? [];
-                        column.setFilterValue(() => {
-                            return newDates;
-                        });
-                    } })] }, column.id));
-    }
-    if (filterVariant === "custom") {
-        const renderFilter = column.columnDef.meta?.renderFilter;
-        if (renderFilter === undefined) {
-            throw new Error("renderFilter is undefined");
-        }
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderFilter(column) });
-    }
-    return (jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: "0.25rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsx(react.Input, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onChange: (e) => {
-                    column.setFilterValue(e.target.value);
-                } })] }, column.id));
+const DefaultCardTitle = () => {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
-const TableFilter = () => {
+const TableCards = ({ isSelectable = false, showDisplayNameOnly = false, renderTitle = DefaultCardTitle, cardBodyProps = {}, }) => {
     const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getAllColumns().map((column) => {
-            return jsxRuntime.jsx(Filter, { column: column }, column.id);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getRowModel().rows.map((row) => {
+            return (jsxRuntime.jsx(react.Card.Root, { flex: "1 0 20rem", children: jsxRuntime.jsxs(react.Card.Body, { display: "flex", flexFlow: "column", gap: "0.5rem", ...cardBodyProps, children: [isSelectable && (jsxRuntime.jsx(Checkbox, { isChecked: row.getIsSelected(),
+                            disabled: !row.getCanSelect(),
+                            // indeterminate: row.getIsSomeSelected(),
+                            onChange: row.getToggleSelectedHandler() })), renderTitle(row), jsxRuntime.jsx(react.Grid, { templateColumns: "auto 1fr", gap: "1rem", children: row.getVisibleCells().map((cell) => {
+                                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(react.Box, { children: [showDisplayNameOnly && (jsxRuntime.jsx(react.Text, { fontWeight: "bold", children: cell.column.columnDef.meta?.displayName ??
+                                                        cell.column.id })), !showDisplayNameOnly && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: reactTable.flexRender(cell.column.columnDef.header, 
+                                                    // @ts-expect-error Assuming the CellContext interface is the same as HeaderContext
+                                                    cell.getContext()) }))] }, `chakra-table-cardcolumnid-${row.id}`), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, `chakra-table-cardcolumn-${row.id}`)] }));
+                            }) })] }) }, `chakra-table-card-${row.id}`));
         }) }));
 };
 
+const TableComponent = ({ render = () => {
+    throw Error("Not Implemented");
+}, }) => {
+    const { table } = useDataTableContext();
+    return render(table);
+};
+
 const TableFilterTags = () => {
     const { table } = useDataTableContext();
     return (jsxRuntime.jsx(react.Flex, { gap: "0.5rem", flexFlow: "wrap", children: table.getState().columnFilters.map(({ id, value }) => {
@@ -1114,59 +1191,6 @@ const TableLoadingComponent = ({ render, }) => {
     return jsxRuntime.jsx(jsxRuntime.Fragment, { children: render(loading) });
 };
 
-const ColumnOrderChanger = ({ columns }) => {
-    const [order, setOrder] = React.useState([]);
-    const [originalOrder, setOriginalOrder] = React.useState([]);
-    const { table } = useDataTableContext();
-    const handleChangeOrder = (startIndex, endIndex) => {
-        const newOrder = Array.from(order);
-        const [removed] = newOrder.splice(startIndex, 1);
-        newOrder.splice(endIndex, 0, removed);
-        setOrder(newOrder);
-    };
-    React.useEffect(() => {
-        setOrder(columns);
-    }, [columns]);
-    React.useEffect(() => {
-        if (originalOrder.length > 0) {
-            return;
-        }
-        if (columns.length <= 0) {
-            return;
-        }
-        setOriginalOrder(columns);
-    }, [columns]);
-    return (jsxRuntime.jsxs(react.Flex, { gap: 2, flexFlow: "column", children: [jsxRuntime.jsx(react.Flex, { gap: 2, flexFlow: "column", children: order.map((columnId, index) => (jsxRuntime.jsxs(react.Flex, { gap: 2, alignItems: "center", justifyContent: "space-between", children: [jsxRuntime.jsx(react.IconButton, { onClick: () => {
-                                const prevIndex = index - 1;
-                                if (prevIndex >= 0) {
-                                    handleChangeOrder(index, prevIndex);
-                                }
-                            }, disabled: index === 0, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowUpward, {}) }), table
-                            .getAllFlatColumns()
-                            .filter((column) => {
-                            return column.id === columnId;
-                        })
-                            .map((column) => {
-                            const displayName = column.columnDef.meta === undefined
-                                ? column.id
-                                : column.columnDef.meta.displayName;
-                            return jsxRuntime.jsx("span", { children: displayName }, column.id);
-                        }), jsxRuntime.jsx(react.IconButton, { onClick: () => {
-                                const nextIndex = index + 1;
-                                if (nextIndex < order.length) {
-                                    handleChangeOrder(index, nextIndex);
-                                }
-                            }, disabled: index === order.length - 1, "aria-label": "", children: jsxRuntime.jsx(md.MdArrowDownward, {}) })] }, columnId))) }), jsxRuntime.jsxs(react.Flex, { gap: "0.25rem", children: [jsxRuntime.jsx(react.Button, { onClick: () => {
-                            table.setColumnOrder(order);
-                        }, children: "Apply" }), jsxRuntime.jsx(react.Button, { onClick: () => {
-                            table.setColumnOrder(originalOrder);
-                        }, children: "Reset" })] })] }));
-};
-const TableOrderer = () => {
-    const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(ColumnOrderChanger, { columns: table.getState().columnOrder }) }));
-};
-
 const SelectAllRowsToggle = ({ selectAllIcon = jsxRuntime.jsx(md.MdOutlineChecklist, {}), clearAllIcon = jsxRuntime.jsx(md.MdClear, {}), selectAllText = "", clearAllText = "", }) => {
     const { table } = useDataTableContext();
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!selectAllText === false && (jsxRuntime.jsx(react.IconButton, { variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
@@ -1183,20 +1207,6 @@ const TableSelector = () => {
                 }, "aria-label": "reset selection", children: jsxRuntime.jsx(md.MdClear, {}) }))] }));
 };
 
-const TableSorter = () => {
-    const { table } = useDataTableContext();
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerGroup.headers.map((header) => {
-                const displayName = header.column.columnDef.meta === undefined
-                    ? header.column.id
-                    : header.column.columnDef.meta.displayName;
-                return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: header.column.getCanSort() && (jsxRuntime.jsxs(react.Flex, { alignItems: "center", gap: "0.5rem", padding: "0.5rem", children: [jsxRuntime.jsx(react.Text, { children: displayName }), jsxRuntime.jsxs(react.Button, { variant: "ghost", onClick: () => {
-                                    header.column.toggleSorting();
-                                }, children: [header.column.getIsSorted() === false && jsxRuntime.jsx(fa6.FaUpDown, {}), header.column.getIsSorted() === "asc" && jsxRuntime.jsx(bi.BiDownArrow, {}), header.column.getIsSorted() === "desc" && jsxRuntime.jsx(bi.BiUpArrow, {})] }), header.column.getIsSorted() && (jsxRuntime.jsx(react.Button, { onClick: () => {
-                                    header.column.clearSorting();
-                                }, children: jsxRuntime.jsx(cg.CgClose, {}) }))] })) }));
-            }) }))) }));
-};
-
 const CheckboxCard = React__namespace.forwardRef(function CheckboxCard(props, ref) {
     const { inputProps, label, description, icon, addon, indicator = jsxRuntime.jsx(react.CheckboxCard.Indicator, {}), indicatorPlacement = "end", ...rest } = props;
     const hasContent = label || description || icon;
@@ -1398,7 +1408,7 @@ const useDataTableServer = ({ url, default: { sorting: defaultSorting = [], pagi
         searching: globalFilter,
     };
     const query = reactQuery.useQuery({
-        queryKey: [url, params],
+        queryKey: [url, JSON.stringify(params)],
         queryFn: () => {
             return axios
                 .get(url, {
@@ -1490,6 +1500,18 @@ const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth =
     return columns;
 };
 
+const EmptyState = ({ title = "No records", description = "Add a new events to get started or refine your search", }) => {
+    const { query } = useDataTableContext();
+    const { data } = query;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (data ?? { count: 0 }).count <= 0 && (jsxRuntime.jsx(react.EmptyState.Root, { children: jsxRuntime.jsxs(react.EmptyState.Content, { children: [jsxRuntime.jsx(react.EmptyState.Indicator, { children: jsxRuntime.jsx(hi.HiColorSwatch, {}) }), jsxRuntime.jsxs(react.VStack, { textAlign: "center", children: [jsxRuntime.jsx(react.EmptyState.Title, { children: title }), jsxRuntime.jsx(react.EmptyState.Description, { children: description })] })] }) })) }));
+};
+
+const ErrorAlert = ({ showMessage }) => {
+    const { query } = useDataTableContext();
+    const { isError, error } = query;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isError && (jsxRuntime.jsxs(react.Alert.Root, { status: "error", children: [jsxRuntime.jsx(react.Alert.Indicator, {}), jsxRuntime.jsxs(react.Alert.Content, { children: [jsxRuntime.jsx(react.Alert.Title, { children: error.name }), showMessage && (jsxRuntime.jsx(react.Alert.Description, { children: error.message }))] })] })) }));
+};
+
 const FilterOptions = ({ column }) => {
     const { table } = useDataTableContext();
     const tableColumn = table.getColumn(column);
@@ -1524,8 +1546,16 @@ const InputGroup = React__namespace.forwardRef(function InputGroup(props, ref) {
 
 const GlobalFilter = () => {
     const { table } = useDataTableContext();
+    const [searchTerm, setSearchTerm] = React.useState("");
+    const debouncedSearchTerm = usehooks.useDebounce(searchTerm, 500);
+    React.useEffect(() => {
+        const searchHN = async () => {
+            table.setGlobalFilter(debouncedSearchTerm);
+        };
+        searchHN();
+    }, [debouncedSearchTerm]);
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(InputGroup, { flex: "1", startElement: jsxRuntime.jsx(md.MdSearch, {}), children: jsxRuntime.jsx(react.Input, { placeholder: "Outline", variant: "outline", onChange: (e) => {
-                    table.setGlobalFilter(e.target.value);
+                    setSearchTerm(e.target.value);
                 } }) }) }));
 };
 
@@ -1559,16 +1589,6 @@ const PopoverRoot = react.Popover.Root;
 const PopoverBody = react.Popover.Body;
 const PopoverTrigger = react.Popover.Trigger;
 
-const RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
-    const { inputProps, label, description, addon, icon, indicator = jsxRuntime.jsx(react.RadioCard.ItemIndicator, {}), indicatorPlacement = "end", ...rest } = props;
-    const hasContent = label || description || icon;
-    const ContentWrapper = indicator ? react.RadioCard.ItemContent : React__namespace.Fragment;
-    return (jsxRuntime.jsxs(react.RadioCard.Item, { ...rest, children: [jsxRuntime.jsx(react.RadioCard.ItemHiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsxs(react.RadioCard.ItemControl, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxRuntime.jsxs(ContentWrapper, { children: [icon, label && jsxRuntime.jsx(react.RadioCard.ItemText, { children: label }), description && (jsxRuntime.jsx(react.RadioCard.ItemDescription, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsxRuntime.jsx(react.RadioCard.ItemAddon, { children: addon })] }));
-});
-const RadioCardRoot = react.RadioCard.Root;
-react.RadioCard.Label;
-react.RadioCard.ItemIndicator;
-
 const Field = React__namespace.forwardRef(function Field(props, ref) {
     const { label, children, helperText, errorText, optionalText, ...rest } = props;
     return (jsxRuntime.jsxs(react.Field.Root, { ref: ref, ...rest, children: [label && (jsxRuntime.jsxs(react.Field.Label, { children: [label, jsxRuntime.jsx(react.Field.RequiredIndicator, { fallback: optionalText })] })), children, helperText && (jsxRuntime.jsx(react.Field.HelperText, { children: helperText })), errorText && (jsxRuntime.jsx(react.Field.ErrorText, { children: errorText }))] }));
@@ -1628,11 +1648,13 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
     if (schema.properties == undefined) {
         throw new Error("schema properties when using DatePicker");
     }
-    const { gridColumn, gridRow, title } = schema.properties[column];
+    const { total, showing, close, typeToSearch, showMore } = displayText;
+    const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
     const [selectedIds, setSelectedIds] = React.useState([]);
     const [searchText, setSearchText] = React.useState();
     const [limit, setLimit] = React.useState(10);
     const [openSearchResult, setOpenSearchResult] = React.useState();
+    const [idMap, setIdMap] = React.useState({});
     const ref = React.useRef(null);
     const query = reactQuery.useQuery({
         queryKey: [`idpicker`, searchText, in_table, limit],
@@ -1654,68 +1676,70 @@ const IdPicker = ({ column, in_table, column_ref, display_column, isMultiple = f
         setSearchText(event.target.value);
         setLimit(10);
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const getItemList = (data) => {
-        return data.map((item) => {
-            return {
-                label: item[display_column],
-                key: item[column_ref],
-                value: item[column_ref],
-            };
+    const ids = (watch(column) ?? []);
+    const newIdMap = React.useMemo(() => Object.fromEntries(dataList.map((item) => {
+        return [
+            item[column_ref],
+            {
+                ...item,
+            },
+        ];
+    })), [dataList, column_ref]);
+    React.useEffect(() => {
+        setIdMap((state) => {
+            return { ...state, ...newIdMap };
         });
-    };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const getIdMap = (data) => {
-        return Object.fromEntries(data.map((item) => {
-            return [
-                item[column_ref],
-                {
-                    ...item,
-                },
-            ];
-        }));
-    };
-    const getSelectedName = (id) => {
-        const selectedItem = getIdMap(dataList)[id];
-        if (selectedItem == undefined) {
-            return "";
-        }
-        return selectedItem[display_column];
-    };
-    if (selectedIds.length >= 1 && isMultiple === false) {
-        return (jsxRuntime.jsx(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, gridColumn,
-            gridRow, children: jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
-                    setSelectedIds([]);
-                    setValue(column, "");
-                }, children: getSelectedName(selectedIds[0]) }) }));
-    }
+    }, [newIdMap]);
     return (jsxRuntime.jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [selectedIds.map((id) => {
-                return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
-                        setSelectedIds([]);
-                        setValue(column, "");
-                    }, children: getSelectedName(id) }));
-            }), jsxRuntime.jsx(react.Input, { placeholder: "Type to search", onChange: (event) => {
-                    onSearchChange(event);
+        gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedIds.map((id) => {
+                        const item = idMap[id];
+                        if (item === undefined) {
+                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
+                        }
+                        return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
+                                setSelectedIds((state) => state.filter((id) => id != item[column_ref]));
+                                setValue(column, ids.filter((id) => id != item[column_ref]));
+                            }, children: !!renderDisplay === true
+                                ? renderDisplay(item)
+                                : item[display_column] }));
+                    }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
+                            setOpenSearchResult(true);
+                        }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: (event) => {
                     setOpenSearchResult(true);
-                }, autoComplete: "off", ref: ref }), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(RadioCardRoot, { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), jsxRuntime.jsx(react.Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
-                                                setOpenSearchResult(false);
-                                            }, children: "close" }), 
-                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                        getItemList(dataList).map((item) => (jsxRuntime.jsx(RadioCardItem, { label: item.label, description: item.description, value: item.value, onClick: () => {
-                                                const ids = watch(column);
-                                                setSelectedIds((state) => [...state, item.key]);
-                                                setValue(column, [...(ids ?? []), item.key]);
+                }, children: selectedIds[0] ? idMap[selectedIds[0]][display_column] ?? "" : "" })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(react.Input, { placeholder: typeToSearch, onChange: (event) => {
+                                        onSearchChange(event);
+                                        setOpenSearchResult(true);
+                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), isError && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isError" }), jsxRuntime.jsx(react.Text, { children: `${total ?? "Total"} ${count}, ${showing ?? "Showing"} ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
                                                 setOpenSearchResult(false);
-                                            }, indicator: false }, item.key))), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Empty Search Result" }), " ", count > dataList.length && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Button, { onClick: async () => {
-                                                            setLimit((limit) => limit + 10);
-                                                            await getTableData({
-                                                                serverUrl,
-                                                                searching: searchText ?? "",
-                                                                in_table: in_table,
-                                                                limit: limit + 10,
-                                                            });
-                                                        }, children: "show more" }) }))] }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+                                            }, children: close ?? "Close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: 
+                                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                            dataList.map((item) => {
+                                                const selected = ids.some((id) => item[column_ref] === id);
+                                                return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
+                                                        if (!isMultiple) {
+                                                            setOpenSearchResult(false);
+                                                            setSelectedIds(() => [item[column_ref]]);
+                                                            setValue(column, [item[column_ref]]);
+                                                            return;
+                                                        }
+                                                        const newSet = new Set([
+                                                            ...(ids ?? []),
+                                                            item[column_ref],
+                                                        ]);
+                                                        setSelectedIds(() => [...newSet]);
+                                                        setValue(column, [...newSet]);
+                                                    }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                        ? renderDisplay(item)
+                                                        : item[display_column] }));
+                                            }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Empty Search Result" }), " "] })), count > dataList.length && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Button, { onClick: async () => {
+                                                    setLimit((limit) => limit + 10);
+                                                    await getTableData({
+                                                        serverUrl,
+                                                        searching: searchText ?? "",
+                                                        in_table: in_table,
+                                                        limit: limit + 10,
+                                                    });
+                                                }, children: showMore ?? "Show More" }) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
 const ToggleTip = React__namespace.forwardRef(function ToggleTip(props, ref) {
@@ -1923,7 +1947,6 @@ const DatePicker = ({ column }) => {
                             }, children: getValues(column) !== undefined
                                 ? dayjs(getValues(column)).format("YYYY-MM-DD")
                                 : "" }) }), jsxRuntime.jsx(PopoverContent, { width: "auto", children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1, { selected: new Date(getValues(column)), onDateSelected: ({ selected, selectable, date }) => {
-                                        console.log(date, selected, selectable, "jasdio");
                                         setValue(column, dayjs(date).format("YYYY-MM-DD"));
                                         setOpen(false);
                                     } })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
@@ -1986,6 +2009,16 @@ const ObjectInput = ({ column }) => {
                 }, children: addNew ?? "Add New" }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
+const RadioCardItem = React__namespace.forwardRef(function RadioCardItem(props, ref) {
+    const { inputProps, label, description, addon, icon, indicator = jsxRuntime.jsx(react.RadioCard.ItemIndicator, {}), indicatorPlacement = "end", ...rest } = props;
+    const hasContent = label || description || icon;
+    const ContentWrapper = indicator ? react.RadioCard.ItemContent : React__namespace.Fragment;
+    return (jsxRuntime.jsxs(react.RadioCard.Item, { ...rest, children: [jsxRuntime.jsx(react.RadioCard.ItemHiddenInput, { ref: ref, ...inputProps }), jsxRuntime.jsxs(react.RadioCard.ItemControl, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxRuntime.jsxs(ContentWrapper, { children: [icon, label && jsxRuntime.jsx(react.RadioCard.ItemText, { children: label }), description && (jsxRuntime.jsx(react.RadioCard.ItemDescription, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsxRuntime.jsx(react.RadioCard.ItemAddon, { children: addon })] }));
+});
+const RadioCardRoot = react.RadioCard.Root;
+react.RadioCard.Label;
+react.RadioCard.ItemIndicator;
+
 const TagPicker = ({ column }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { schema, serverUrl } = useSchemaContext();
@@ -2026,7 +2059,7 @@ const TagPicker = ({ column }) => {
                 where: [
                     {
                         id: object_id_column,
-                        value: [object_id],
+                        value: object_id[0],
                     },
                 ],
                 limit: 100,
@@ -2143,6 +2176,65 @@ const FilePicker = ({ column }) => {
                 }) }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
 };
 
+const EnumPicker = ({ column, isMultiple = false }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { schema, serverUrl, displayText } = useSchemaContext();
+    const { fieldRequired } = displayText;
+    const { required } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    if (schema.properties == undefined) {
+        throw new Error("schema properties when using DatePicker");
+    }
+    const { gridColumn, gridRow, title, renderDisplay } = schema.properties[column];
+    const [selectedEnums, setSelectedEnums] = React.useState([]);
+    const [searchText, setSearchText] = React.useState();
+    const [limit, setLimit] = React.useState(10);
+    const [openSearchResult, setOpenSearchResult] = React.useState();
+    const ref = React.useRef(null);
+    const watchEnums = (watch(column) ?? []);
+    const properties = (schema.properties[column] ?? {});
+    const dataList = properties.enum ?? [];
+    const count = properties.enum?.length ?? 0;
+    const isDirty = (searchText?.length ?? 0) > 0;
+    const onSearchChange = async (event) => {
+        setSearchText(event.target.value);
+        setLimit(10);
+    };
+    return (jsxRuntime.jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [selectedEnums.map((enumValue) => {
+                        const item = enumValue;
+                        if (item === undefined) {
+                            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "undefined" });
+                        }
+                        return (jsxRuntime.jsx(Tag, { closable: true, onClick: () => {
+                                setSelectedEnums((state) => state.filter((id) => id != item));
+                                setValue(column, watchEnums.filter((id) => id != item));
+                            }, children: !!renderDisplay === true ? renderDisplay(item) : item }));
+                    }), jsxRuntime.jsx(Tag, { cursor: "pointer", onClick: () => {
+                            setOpenSearchResult(true);
+                        }, children: "Add" })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: (event) => {
+                    setOpenSearchResult(true);
+                }, children: selectedEnums[0] })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(react.Input, { placeholder: "Type to search", onChange: (event) => {
+                                        onSearchChange(event);
+                                        setOpenSearchResult(true);
+                                    }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsxRuntime.jsx(Button, { onClick: async () => {
+                                                setOpenSearchResult(false);
+                                            }, children: "close" }), jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: dataList.map((item) => {
+                                                const selected = watchEnums.some((enumValue) => item === enumValue);
+                                                return (jsxRuntime.jsx(react.Box, { cursor: "pointer", onClick: () => {
+                                                        if (!isMultiple) {
+                                                            setOpenSearchResult(false);
+                                                            setSelectedEnums(() => [item]);
+                                                            setValue(column, [item]);
+                                                            return;
+                                                        }
+                                                        const newSet = new Set([...(watchEnums ?? []), item]);
+                                                        setSelectedEnums(() => [...newSet]);
+                                                        setValue(column, [...newSet]);
+                                                    }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true ? renderDisplay(item) : item }, `${column}-${item}`));
+                                            }) }), isDirty && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [dataList.length <= 0 && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Empty Search Result" }), " "] }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+};
+
 const idPickerSanityCheck = (column, in_table, column_ref, display_column) => {
     if (!!in_table == false) {
         throw new Error(`The key in_table does not exist in properties of column ${column}.`);
@@ -2340,6 +2432,9 @@ const FormInternal = () => {
                             //@ts-expect-error TODO: add more fields to support form-creation
                             const { type, variant, in_table, column_ref, display_column } = values;
                             if (type === "string") {
+                                if ((values.enum ?? []).length > 0) {
+                                    return jsxRuntime.jsx(EnumPicker, { column: key }, `form-${key}`);
+                                }
                                 if (variant === "id-picker") {
                                     idPickerSanityCheck(column, in_table, column_ref, display_column);
                                     return (jsxRuntime.jsx(IdPicker, { column: key, in_table: in_table, column_ref: column_ref, display_column: display_column }, `form-${key}`));
@@ -2426,6 +2521,8 @@ exports.EditFilterButton = EditFilterButton;
 exports.EditOrderButton = EditOrderButton;
 exports.EditSortingButton = EditSortingButton;
 exports.EditViewButton = EditViewButton;
+exports.EmptyState = EmptyState;
+exports.ErrorAlert = ErrorAlert;
 exports.FilterOptions = FilterOptions;
 exports.Form = Form;
 exports.GlobalFilter = GlobalFilter;