@bsol-oss/react-datatable5 5.0.1 → 6.0.1

package/dist/index.mjs

@@ -1,31 +1,62 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { IconButton, Button as Button$1, Portal, Dialog, useDisclosure, Flex, DialogRoot as DialogRoot$1, DialogBackdrop, DialogTrigger as DialogTrigger$1, DialogContent as DialogContent$1, DialogCloseTrigger as DialogCloseTrigger$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogBody as DialogBody$1, DialogFooter as DialogFooter$1, Text, Menu, AbsoluteCenter, Tag as Tag$1, Grid, Image, Checkbox as Checkbox$1, Table as Table$1, Box, Tooltip as Tooltip$1, Spinner, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Span, EmptyState as EmptyState$1, VStack, List, Card, Input, Slider as Slider$1, HStack, For, RadioGroup as RadioGroup$1, Group, Switch as Switch$1, InputElement } from '@chakra-ui/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, useDisclosure, Flex, DialogRoot as DialogRoot$1, DialogBackdrop, DialogTrigger as DialogTrigger$1, DialogContent as DialogContent$1, DialogCloseTrigger as DialogCloseTrigger$1, DialogHeader as DialogHeader$1, DialogTitle as DialogTitle$1, DialogBody as DialogBody$1, DialogFooter as DialogFooter$1, Text, Menu, Tag as Tag$1, Grid, Image, Card, DataList, Checkbox as Checkbox$1, Table as Table$1, Box, Tooltip as Tooltip$1, Icon, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, EmptyState as EmptyState$1, VStack, List, Input, Slider as Slider$1, HStack, For, RadioGroup as RadioGroup$1, createRecipeContext, createContext as createContext$1, Pagination, usePaginationContext, Switch as Switch$1, Group, InputElement, Popover, RadioCard, Field as Field$1, NumberInput, Accordion, CheckboxCard as CheckboxCard$1, Show, Heading, Alert, Center } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
-import { MdFilterAlt, MdOutlineMoveDown, MdOutlineSort, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdArrowUpward, MdArrowDownward, MdFirstPage, MdArrowBack, MdArrowForward, MdLastPage, MdOutlineChecklist, MdClose, MdSearch } from 'react-icons/md';
 import * as React from 'react';
-import { createContext, useContext, useEffect, useState, useRef } from 'react';
-import { LuX, LuCheck, LuChevronRight } from 'react-icons/lu';
+import React__default, { createContext, useContext, useEffect, useState, useRef } from 'react';
+import { MdFilterAlt, MdOutlineMoveDown, MdOutlineSort, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdArrowUpward, MdArrowDownward, MdOutlineChecklist, MdClose, MdSearch } from 'react-icons/md';
+import { LuX, LuCheck, LuChevronRight, LuChevronDown } from 'react-icons/lu';
 import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
 import { BiDownArrow, BiUpArrow } from 'react-icons/bi';
 import { CgClose } from 'react-icons/cg';
 import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
-import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender } from '@tanstack/react-table';
+import { makeStateUpdater, functionalUpdate, useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel, flexRender, createColumnHelper } from '@tanstack/react-table';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import { BsExclamationCircleFill } from 'react-icons/bs';
 import { GrAscend, GrDescend } from 'react-icons/gr';
 import { IoReload } from 'react-icons/io5';
-import { HiColorSwatch } from 'react-icons/hi';
+import { HiColorSwatch, HiOutlineInformationCircle } from 'react-icons/hi';
+import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
 import { monitorForElements, draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import invariant from 'tiny-invariant';
 import axios from 'axios';
+import { useFormContext, useForm, FormProvider } from 'react-hook-form';
+import { useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import dayjs from 'dayjs';
+import Dayzed from 'dayzed';
+
+const TableContext = createContext({
+    table: {},
+    refreshData: () => { },
+    globalFilter: "",
+    setGlobalFilter: () => { },
+    loading: false,
+    hasError: false,
+});
+
+const useDataTableContext = () => {
+    const { table, refreshData, globalFilter, setGlobalFilter, loading, hasError, } = useContext(TableContext);
+    return {
+        table,
+        refreshData,
+        globalFilter,
+        setGlobalFilter,
+        loading,
+        hasError,
+    };
+};
+
+const Button = React.forwardRef(function Button(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props;
+    return (jsx(Button$1, { disabled: loading || disabled, ref: ref, ...rest, children: loading && !loadingText ? (jsxs(Fragment, { children: [jsx(AbsoluteCenter, { display: "inline-flex", children: jsx(Spinner, { size: "inherit", color: "inherit" }) }), jsx(Span, { opacity: 0, children: children })] })) : loading && loadingText ? (jsxs(Fragment, { children: [jsx(Spinner, { size: "inherit", color: "inherit" }), loadingText] })) : (children) }));
+});
 
 const DensityToggleButton = ({ text, icon = jsx(AiOutlineColumnWidth, {}), }) => {
     const { table } = useDataTableContext();
-    return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { variant: "ghost", "aria-label": "Toggle Density", icon: icon, onClick: () => {
+    return (jsxs(Fragment, { children: [!!text === false && (jsx(IconButton, { variant: "ghost", "aria-label": "Toggle Density", onClick: () => {
                     table.toggleDensity();
-                } })), !!text !== false && (jsx(Button$1, { leftIcon: icon, variant: "ghost", "aria-label": "Toggle Density", onClick: () => {
+                }, children: icon })), !!text !== false && (jsxs(Button, { variant: "ghost", "aria-label": "Toggle Density", onClick: () => {
                     table.toggleDensity();
-                }, children: text }))] }));
+                }, children: [icon, text] }))] }));
 };
 
 const CloseButton = React.forwardRef(function CloseButton(props, ref) {
@@ -58,27 +89,6 @@ const EditOrderButton = ({ text, icon = jsx(MdOutlineMoveDown, {}), title = "Cha
     return (jsx(Fragment, { children: jsxs(DialogRoot$1, { size: "cover", children: [jsx(DialogBackdrop, {}), jsx(DialogTrigger$1, { children: jsxs(Button$1, { variant: "ghost", children: [icon, text] }) }), jsxs(DialogContent$1, { children: [jsx(DialogCloseTrigger$1, {}), jsxs(DialogHeader$1, { children: [jsx(DialogTitle$1, {}), title] }), jsx(DialogBody$1, { children: jsx(Flex, { flexFlow: "column", gap: "0.25rem", children: jsx(TableOrderer, {}) }) }), jsx(DialogFooter$1, {})] })] }) }));
 };
 
-const TableContext = createContext({
-    table: {},
-    refreshData: () => { },
-    globalFilter: "",
-    setGlobalFilter: () => { },
-    loading: false,
-    hasError: false,
-});
-
-const useDataTableContext = () => {
-    const { table, refreshData, globalFilter, setGlobalFilter, loading, hasError, } = useContext(TableContext);
-    return {
-        table,
-        refreshData,
-        globalFilter,
-        setGlobalFilter,
-        loading,
-        hasError,
-    };
-};
-
 const TableSorter = () => {
     const { table } = useDataTableContext();
     return (jsx(Fragment, { children: table.getHeaderGroups().map((headerGroup) => (jsx(Fragment, { children: headerGroup.headers.map((header) => {
@@ -167,6 +177,49 @@ const RowCountText = () => {
     return jsx(Text, { children: table.getRowCount() });
 };
 
+const Tag = React.forwardRef(function Tag(props, ref) {
+    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
+    return (jsxs(Tag$1.Root, { ref: ref, ...rest, children: [startElement && (jsx(Tag$1.StartElement, { children: startElement })), jsx(Tag$1.Label, { children: children }), endElement && (jsx(Tag$1.EndElement, { children: endElement })), closable && (jsx(Tag$1.EndElement, { children: jsx(Tag$1.CloseTrigger, { onClick: onClose }) }))] }));
+});
+
+const CardHeader = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, imageProps = {}, }) => {
+    if (!!row.original === false) {
+        return jsx(Fragment, {});
+    }
+    const isShowFirstColumn = !!titleColumnId || showTag;
+    return (jsxs(Grid, { templateRows: "auto auto", gap: "1rem", children: [!!imageColumnId && (jsx(Image, { width: "100%", src: row.original[imageColumnId], ...imageProps })), isShowFirstColumn && (jsxs(Flex, { gap: "0.5rem", flexFlow: "wrap", children: [!!titleColumnId && (jsx(Text, { fontWeight: "bold", fontSize: "large", children: row.original[titleColumnId] })), showTag && (jsx(Tag, { fontSize: "large", startElement: tagIcon && tagIcon({}), children: row.original[tagColumnId] }))] }))] }));
+};
+
+const snakeToLabel = (str) => {
+    return str
+        .split("_") // Split by underscore
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
+        .join(" "); // Join with space
+};
+
+const DataDisplay = ({ variant = "" }) => {
+    const { table } = useContext(TableContext);
+    if (variant == "horizontal") {
+        return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
+                return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", orientation: "horizontal", overflow: 'auto', children: row.getVisibleCells().map((cell) => {
+                                return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { children: `${cell.getValue()}` })] }, cell.id));
+                            }) }) }) }, `chakra-table-card-${row.id}`));
+            }) }));
+    }
+    if (variant == "stats") {
+        return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
+                return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "flex", flexFlow: "row", variant: "subtle", overflow: 'auto', children: row.getVisibleCells().map((cell) => {
+                                return (jsxs(DataList.Item, { display: "flex", justifyContent: "center", alignItems: "center", flex: "1 0 10rem", children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { children: `${cell.getValue()}` })] }, cell.id));
+                            }) }) }) }, `chakra-table-card-${row.id}`));
+            }) }));
+    }
+    return (jsx(Flex, { flexFlow: "column", gap: "1", children: table.getRowModel().rows.map((row) => {
+            return (jsx(Card.Root, { children: jsx(Card.Body, { children: jsx(DataList.Root, { gap: 4, padding: 4, display: "grid", variant: "subtle", gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", children: row.getVisibleCells().map((cell) => {
+                            return (jsxs(DataList.Item, { children: [jsx(DataList.ItemLabel, { children: snakeToLabel(cell.column.id) }), jsx(DataList.ItemValue, { children: `${cell.getValue()}` })] }, cell.id));
+                        }) }) }) }, `chakra-table-card-${row.id}`));
+        }) }));
+};
+
 // Reference: https://tanstack.com/table/latest/docs/framework/react/examples/custom-features
 // TypeScript setup for our new feature with all of the same type-safety as stock TanStack Table features
 // end of TS setup!
@@ -300,10 +353,10 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
     });
     useEffect(() => {
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
-    }, []);
+    }, [table, setColumnOrder]);
     useEffect(() => {
         onRowSelect(table.getState().rowSelection, data);
-    }, [table.getState().rowSelection]);
+    }, [data, onRowSelect, table]);
     return (jsx(TableContext.Provider, { value: {
             table: { ...table },
             refreshData: () => {
@@ -319,7 +372,7 @@ const DataTable = ({ columns, data, enableRowSelection = true, enableMultiRowSel
 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, data, loading, hasError, refreshData, children, }) => {
     const table = useReactTable({
         _features: [DensityFeature],
-        data: data.results,
+        data: data.data,
         rowCount: data.count ?? 0,
         columns: columns,
         getCoreRowModel: getCoreRowModel(),
@@ -368,7 +421,7 @@ const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSel
         setColumnOrder(table.getAllLeafColumns().map((column) => column.id));
     }, []);
     useEffect(() => {
-        onRowSelect(table.getState().rowSelection, data.results);
+        onRowSelect(table.getState().rowSelection, data.data);
     }, [table.getState().rowSelection]);
     useEffect(() => {
         table.resetPagination();
@@ -383,27 +436,6 @@ const DataTableServer = ({ columns, enableRowSelection = true, enableMultiRowSel
         }, children: children }));
 };
 
-const Tag = React.forwardRef(function Tag(props, ref) {
-    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
-    return (jsxs(Tag$1.Root, { ref: ref, ...rest, children: [startElement && (jsx(Tag$1.StartElement, { children: startElement })), jsx(Tag$1.Label, { children: children }), endElement && (jsx(Tag$1.EndElement, { children: endElement })), closable && (jsx(Tag$1.EndElement, { children: jsx(Tag$1.CloseTrigger, { onClick: onClose }) }))] }));
-});
-
-const DefaultCard = ({ row, imageColumnId = undefined, titleColumnId = undefined, tagColumnId = undefined, tagIcon = undefined, showTag = true, }) => {
-    if (!!row.original === false) {
-        return jsx(Fragment, {});
-    }
-    //   const imageIdExists = Object.keys(row.original).some((key) => {
-    //     return key === imageColumnId;
-    //   });
-    //   const titleIdExists = Object.keys(row.original).some((key) => {
-    //     return key === titleColumnId;
-    //   });
-    //   const tagIdExists = Object.keys(row.original).some((key) => {
-    //     return key === tagColumnId;
-    //   });
-    return (jsxs(Grid, { templateRows: "auto auto", gap: "1rem", children: [jsx(Flex, { justifyContent: "center", alignItems: "center", children: jsx(Image, { src: row.original[imageColumnId] }) }), jsxs(Flex, { gap: "0.5rem", flexFlow: "wrap", children: [jsx(Text, { fontWeight: "bold", fontSize: "large", children: row.original[titleColumnId] }), showTag && (jsx(Tag, { fontSize: "large", startElement: tagIcon && tagIcon({}), children: row.original[tagColumnId] }))] })] }));
-};
-
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
     const { icon, children, inputProps, rootRef, ...rest } = props;
     return (jsxs(Checkbox$1.Root, { ref: rootRef, ...rest, children: [jsx(Checkbox$1.HiddenInput, { ref: ref, ...inputProps }), jsx(Checkbox$1.Control, { children: icon || jsx(Checkbox$1.Indicator, {}) }), children != null && (jsx(Checkbox$1.Label, { children: children }))] }));
@@ -545,11 +577,6 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, s
                                                     jsx(Fragment, {})), header.column.getIsSorted() === "asc" && (jsx(BiUpArrow, {})), header.column.getIsSorted() === "desc" && (jsx(BiDownArrow, {}))] })) })] }) }) }) }) }, `chakra-table-footer-${footerGroup.id}`)))] }, `chakra-table-footergroup-${footerGroup.id}`))) }));
 };
 
-const Button = React.forwardRef(function Button(props, ref) {
-    const { loading, disabled, loadingText, children, ...rest } = props;
-    return (jsx(Button$1, { disabled: loading || disabled, ref: ref, ...rest, children: loading && !loadingText ? (jsxs(Fragment, { children: [jsx(AbsoluteCenter, { display: "inline-flex", children: jsx(Spinner, { size: "inherit", color: "inherit" }) }), jsx(Span, { opacity: 0, children: children })] })) : loading && loadingText ? (jsxs(Fragment, { children: [jsx(Spinner, { size: "inherit", color: "inherit" }), loadingText] })) : (children) }));
-});
-
 const TableHeader = ({ canResize, pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, isSticky = true, alwaysShowSelector = true, tHeadProps = {}, }) => {
     const { table } = useDataTableContext();
     const SELECTION_BOX_WIDTH = 20;
@@ -656,9 +683,9 @@ const ReloadButton = ({ text = "Reload", variant = "icon", }) => {
                     refreshData();
                 }, "aria-label": "refresh", children: jsx(IoReload, {}) }) }));
     }
-    return (jsx(Button, { variant: "ghost", leftIcon: jsx(IoReload, {}), onClick: () => {
+    return (jsxs(Button, { variant: "ghost", onClick: () => {
             refreshData();
-        }, children: text }));
+        }, children: [jsx(IoReload, {}), " ", text] }));
 };
 
 const EmptyState = React.forwardRef(function EmptyState(props, ref) {
@@ -675,17 +702,20 @@ const Table = ({ children, emptyComponent = EmptyResult, ...props }) => {
     return (jsx(Table$1.Root, { stickyHeader: true, variant: "outline", width: table.getCenterTotalSize(), ...props, children: children }));
 };
 
-const TableCardContainer = ({ children, ...props }) => {
-    return (jsx(Grid, { gridTemplateColumns: ["1fr", "1fr 1fr", "1fr 1fr 1fr"], gap: "0.5rem", ...props, children: children }));
+const TableCardContainer = ({ children, variant = "", ...props }) => {
+    if (variant === "carousel") {
+        return (jsx(Flex, { overflow: "scroll", gap: "1rem", children: children }));
+    }
+    return (jsx(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: "0.5rem", ...props, children: children }));
 };
 
 const DefaultCardTitle = () => {
     return jsx(Fragment, {});
 };
-const TableCards = ({ isSelectable = false, showDisplayNameOnly = false, renderTitle = DefaultCardTitle, cardBodyProps = {} }) => {
+const TableCards = ({ isSelectable = false, showDisplayNameOnly = false, renderTitle = DefaultCardTitle, cardBodyProps = {}, }) => {
     const { table } = useContext(TableContext);
     return (jsx(Fragment, { children: table.getRowModel().rows.map((row) => {
-            return (jsx(Card.Root, { children: jsxs(Card.Body, { display: "flex", flexFlow: "column", gap: "0.5rem", ...cardBodyProps, children: [isSelectable && (jsx(Checkbox, { isChecked: row.getIsSelected(),
+            return (jsx(Card.Root, { flex: "1 0 20rem", children: jsxs(Card.Body, { display: "flex", flexFlow: "column", gap: "0.5rem", ...cardBodyProps, children: [isSelectable && (jsx(Checkbox, { isChecked: row.getIsSelected(),
                             disabled: !row.getCanSelect(),
                             // indeterminate: row.getIsSomeSelected(),
                             onChange: row.getToggleSelectedHandler() })), renderTitle(row), jsx(Grid, { templateColumns: "auto 1fr", gap: "1rem", children: row.getVisibleCells().map((cell) => {
@@ -736,9 +766,9 @@ const SliderMarks = React.forwardRef(function SliderMarks(props, ref) {
 });
 
 const RangeFilter = ({ range, setRange, defaultValue, min, max, step, }) => {
-    return (jsx(Box, { p: 8, children: 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) }) }));
+    return (jsxs(Flex, { p: 2, gap: 2, flexFlow: 'column', children: [jsx(Text, { children: `${range[0]} - ${range[1]}` }), 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 TagFilter = ({ availableTags, selectedTags, onTagChange, }) => {
@@ -767,9 +797,9 @@ const Filter = ({ column }) => {
     //   items: filterOptions,
     // });
     if (column.columns.length > 0) {
-        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), column.columns.map((column) => {
-                    return jsx(Filter, { column: column }, column.id);
-                })] }, column.id));
+        return (jsxs(Flex, { flexFlow: "column", gap: 1, children: [jsx(Text, { children: displayName }), jsx(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))", gap: 1, children: column.columns.map((column) => {
+                        return jsx(Filter, { column: column }, column.id);
+                    }) }, column.id)] }));
     }
     if (!column.getCanFilter()) {
         return jsx(Fragment, {});
@@ -777,7 +807,7 @@ const Filter = ({ column }) => {
     if (filterVariant === "select") {
         return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(RadioGroup, { value: column.getFilterValue() ? String(column.getFilterValue()) : "", onValueChange: (details) => {
                         column.setFilterValue(details.value);
-                    }, children: jsx(Flex, { flexFlow: 'wrap', gap: '0.5rem', children: filterOptions.map((item) => (jsx(Radio, { value: item, children: item }, item))) }) })] }, column.id));
+                    }, children: jsx(Flex, { flexFlow: "wrap", gap: "0.5rem", children: filterOptions.map((item) => (jsx(Radio, { value: item, children: item }, item))) }) })] }, column.id));
     }
     if (filterVariant === "tag") {
         return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), jsx(TagFilter, { availableTags: filterOptions, selectedTags: (column.getFilterValue() ?? []), onTagChange: (tags) => {
@@ -807,10 +837,10 @@ const Filter = ({ column }) => {
             step: 1,
             defaultValue: [4, 50],
         };
-        return (jsx(RangeFilter, { range: filterValue, setRange: function (value) {
-                // throw new Error("Function not implemented.");
-                column.setFilterValue(value);
-            }, defaultValue: defaultValue, min: min, max: max, step: step }));
+        return (jsxs(Flex, { flexFlow: "column", gap: "0.25rem", children: [jsx(Text, { children: displayName }), 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 [start, end] = column.getFilterValue() ?? [
@@ -914,25 +944,91 @@ const TableOrderer = () => {
     return (jsx(Fragment, { children: jsx(ColumnOrderChanger, { columns: table.getState().columnOrder }) }));
 };
 
+const { withContext } = createRecipeContext({ key: "button" });
+// Replace "a" with your framework's link component
+const LinkButton = withContext("a");
+
+const [RootPropsProvider, useRootProps] = createContext$1({
+    name: "RootPropsProvider",
+});
+const variantMap = {
+    outline: { default: "ghost", ellipsis: "plain", current: "outline" },
+    solid: { default: "outline", ellipsis: "outline", current: "solid" },
+    subtle: { default: "ghost", ellipsis: "plain", current: "subtle" },
+};
+const PaginationRoot = React.forwardRef(function PaginationRoot(props, ref) {
+    const { size = "sm", variant = "outline", getHref, ...rest } = props;
+    return (jsx(RootPropsProvider, { value: { size, variantMap: variantMap[variant], getHref }, children: jsx(Pagination.Root, { ref: ref, type: getHref ? "link" : "button", ...rest }) }));
+});
+const PaginationEllipsis = React.forwardRef(function PaginationEllipsis(props, ref) {
+    const { size, variantMap } = useRootProps();
+    return (jsx(Pagination.Ellipsis, { ref: ref, ...props, asChild: true, children: jsx(Button$1, { as: "span", variant: variantMap.ellipsis, size: size, children: jsx(HiMiniEllipsisHorizontal, {}) }) }));
+});
+const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
+    const { page } = usePaginationContext();
+    const { size, variantMap, getHref } = useRootProps();
+    const current = page === props.value;
+    const variant = current ? variantMap.current : variantMap.default;
+    if (getHref) {
+        return (jsx(LinkButton, { href: getHref(props.value), variant: variant, size: size, children: props.value }));
+    }
+    return (jsx(Pagination.Item, { ref: ref, ...props, asChild: true, children: jsx(Button$1, { variant: variant, size: size, children: props.value }) }));
+});
+const PaginationPrevTrigger = React.forwardRef(function PaginationPrevTrigger(props, ref) {
+    const { size, variantMap, getHref } = useRootProps();
+    const { previousPage } = usePaginationContext();
+    if (getHref) {
+        return (jsx(LinkButton, { href: previousPage != null ? getHref(previousPage) : undefined, variant: variantMap.default, size: size, children: jsx(HiChevronLeft, {}) }));
+    }
+    return (jsx(Pagination.PrevTrigger, { ref: ref, asChild: true, ...props, children: jsx(IconButton, { variant: variantMap.default, size: size, children: jsx(HiChevronLeft, {}) }) }));
+});
+const PaginationNextTrigger = React.forwardRef(function PaginationNextTrigger(props, ref) {
+    const { size, variantMap, getHref } = useRootProps();
+    const { nextPage } = usePaginationContext();
+    if (getHref) {
+        return (jsx(LinkButton, { href: nextPage != null ? getHref(nextPage) : undefined, variant: variantMap.default, size: size, children: jsx(HiChevronRight, {}) }));
+    }
+    return (jsx(Pagination.NextTrigger, { ref: ref, asChild: true, ...props, children: jsx(IconButton, { variant: variantMap.default, size: size, children: jsx(HiChevronRight, {}) }) }));
+});
+const PaginationItems = (props) => {
+    return (jsx(Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+            return page.type === "ellipsis" ? (jsx(PaginationEllipsis, { index: index, ...props }, index)) : (jsx(PaginationItem, { type: "page", value: page.value, ...props }, index));
+        }) }));
+};
+const PaginationPageText = React.forwardRef(function PaginationPageText(props, ref) {
+    const { format = "compact", ...rest } = props;
+    const { page, totalPages, pageRange, count } = usePaginationContext();
+    const content = React.useMemo(() => {
+        if (format === "short")
+            return `${page} / ${totalPages}`;
+        if (format === "compact")
+            return `${page} of ${totalPages}`;
+        return `${pageRange.start + 1} - ${Math.min(pageRange.end, count)} of ${count}`;
+    }, [format, page, totalPages, pageRange, count]);
+    return (jsx(Text, { fontWeight: "medium", ref: ref, ...rest, children: content }));
+});
+
 const TablePagination = () => {
-    const { firstPage, getCanPreviousPage, previousPage, getState, nextPage, getCanNextPage, lastPage, } = useDataTableContext().table;
-    return (jsxs(Group, { attached: true, children: [jsx(IconButton, { onClick: () => firstPage(), disabled: !getCanPreviousPage(), "aria-label": "first-page", variant: "ghost", children: jsx(MdFirstPage, {}) }), jsx(IconButton, { onClick: () => previousPage(), disabled: !getCanPreviousPage(), "aria-label": "previous-page", variant: "ghost", children: jsx(MdArrowBack, {}) }), jsx(Button, { variant: "ghost", onClick: () => { }, disabled: !getCanPreviousPage(), children: getState().pagination.pageIndex + 1 }), jsx(IconButton, { onClick: () => nextPage(), disabled: !getCanNextPage(), "aria-label": "next-page", variant: "ghost", children: jsx(MdArrowForward, {}) }), jsx(IconButton, { onClick: () => lastPage(), disabled: !getCanNextPage(), "aria-label": "last-page", variant: "ghost", children: jsx(MdLastPage, {}) })] }));
+    const { table } = useDataTableContext();
+    return (jsx(PaginationRoot, { page: table.getState().pagination.pageIndex + 1, count: table.getRowCount(), pageSize: table.getState().pagination.pageSize, onPageChange: (e) => {
+            table.setPageIndex(e.page - 1);
+        }, children: jsxs(HStack, { children: [jsx(PaginationPageText, { format: "long" }), jsx(PaginationPrevTrigger, {}), jsx(PaginationItems, {}), jsx(PaginationNextTrigger, {})] }) }));
 };
 
 const SelectAllRowsToggle = ({ selectAllIcon = jsx(MdOutlineChecklist, {}), clearAllIcon = jsx(MdClear, {}), selectAllText = "", clearAllText = "", }) => {
     const { table } = useDataTableContext();
-    return (jsxs(Fragment, { children: [!!selectAllText === false && (jsx(IconButton, { icon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
+    return (jsxs(Fragment, { children: [!!selectAllText === false && (jsx(IconButton, { variant: "ghost", "aria-label": table.getIsAllRowsSelected() ? clearAllText : selectAllText, onClick: (event) => {
                     table.getToggleAllRowsSelectedHandler()(event);
-                } })), !!selectAllText !== false && (jsx(Button$1, { leftIcon: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, variant: "ghost", onClick: (event) => {
+                }, children: table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon })), !!selectAllText !== false && (jsxs(Button$1, { variant: "ghost", onClick: (event) => {
                     table.getToggleAllRowsSelectedHandler()(event);
-                }, children: table.getIsAllRowsSelected() ? clearAllText : selectAllText }))] }));
+                }, children: [table.getIsAllRowsSelected() ? clearAllIcon : selectAllIcon, table.getIsAllRowsSelected() ? clearAllText : selectAllText] }))] }));
 };
 
 const TableSelector = () => {
     const { table } = useContext(TableContext);
-    return (jsxs(Fragment, { children: [table.getSelectedRowModel().rows.length > 0 && (jsxs(Button$1, { onClick: () => { }, variant: "ghost", display: "flex", gap: "0.25rem", children: [jsx(Box, { fontSize: "sm", children: `${table.getSelectedRowModel().rows.length}` }), jsx(Icon, { as: IoMdCheckbox })] })), !table.getIsAllPageRowsSelected() && jsx(SelectAllRowsToggle, {}), table.getSelectedRowModel().rows.length > 0 && (jsx(IconButton, { variant: "ghost", icon: jsx(Icon, { as: MdClear }), onClick: () => {
+    return (jsxs(Fragment, { children: [table.getSelectedRowModel().rows.length > 0 && (jsxs(Button$1, { onClick: () => { }, variant: "ghost", display: "flex", gap: "0.25rem", children: [jsx(Box, { fontSize: "sm", children: `${table.getSelectedRowModel().rows.length}` }), jsx(Icon, { as: IoMdCheckbox })] })), !table.getIsAllPageRowsSelected() && jsx(SelectAllRowsToggle, {}), table.getSelectedRowModel().rows.length > 0 && (jsx(IconButton, { variant: "ghost", onClick: () => {
                     table.resetRowSelection();
-                }, "aria-label": "reset selection" }))] }));
+                }, "aria-label": "reset selection", children: jsx(MdClear, {}) }))] }));
 };
 
 const Switch = React.forwardRef(function Switch(props, ref) {
@@ -1035,7 +1131,11 @@ const useDataFromUrl = ({ url, params = {}, disableFirstFetch = false, onFetchSu
     const [hasError, setHasError] = useState(false);
     const [data, setData] = useState(defaultData);
     const [timer, setTimer] = useState();
-    const refreshData = async ({ debounce, delay } = { debounce: false, delay: 1000 }) => {
+    const refreshData = async (config = {
+        debounce: false,
+        delay: 1000,
+    }) => {
+        const { debounce, delay } = config;
         if (debounce) {
             await debouncedGetData(delay);
             return;
@@ -1162,30 +1262,25 @@ const useDataTableServer = ({ url, onFetchSuccess = () => { }, default: { sortin
     const { data, loading, hasError, refreshData } = useDataFromUrl({
         url: url,
         defaultData: {
-            success: false,
-            results: [],
+            data: [],
             count: 0,
         },
         params: {
-            pagination: JSON.stringify({
-                offset: pagination.pageIndex * pagination.pageSize,
-                rows: pagination.pageSize,
-            }),
-            sorting: JSON.stringify(sorting.length > 0
-                ? { field: sorting[0].id, sort: sorting[0].desc ? "desc" : "asc" }
-                : {}),
-            where: JSON.stringify(columnFilters.reduce((accumulator, filter) => {
+            offset: pagination.pageIndex * pagination.pageSize,
+            limit: pagination.pageSize,
+            sorting,
+            where: columnFilters.reduce((accumulator, filter) => {
                 const obj = {};
                 obj[filter.id] = filter.value;
                 return { ...accumulator, ...obj };
-            }, {})),
+            }, {}),
             searching: globalFilter,
         },
         disableFirstFetch: true,
         onFetchSuccess: onFetchSuccess,
     });
     useEffect(() => {
-        refreshData({ debounce, debounceDelay });
+        refreshData({ debounce, delay: debounceDelay });
     }, [pagination, sorting, columnFilters, globalFilter, url]);
     return {
         sorting,
@@ -1238,6 +1333,7 @@ const InputGroup = React.forwardRef(function InputGroup(props, ref) {
                     ps: `calc(var(--input-height) - ${startOffset})`,
                 }),
                 ...(endElement && { pe: `calc(var(--input-height) - ${endOffset})` }),
+                // @ts-expect-error chakra generated files
                 ...children.props,
             }), endElement && (jsx(InputElement, { placement: "end", ...endElementProps, children: endElement }))] }));
 });
@@ -1249,4 +1345,899 @@ const GlobalFilter = () => {
                 } }) }) }));
 };
 
-export { DataTable, DataTableServer, DefaultCard, DefaultCardTitle, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, FilterOptions, GlobalFilter, PageSizeControl, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer };
+const idListSanityCheck = (param, idList, properties) => {
+    const allKeyExists = idList.every((key) => Object.keys(properties).some((column) => column == key));
+    if (!allKeyExists) {
+        const wrongKey = idList.find((key) => !Object.keys(properties).some((column) => column == key));
+        throw new Error(`The key ${wrongKey} in ${param} does not exist in schema.`);
+    }
+};
+
+const widthSanityCheck = (widthList, ignoreList, properties) => {
+    const widthListToolong = widthList.length > Object.keys(properties).length;
+    if (widthListToolong) {
+        throw new Error(`The width list is too long given from the number of properties.`);
+    }
+    const widthListToolongWithIgnore = widthList.length > Object.keys(properties).length - ignoreList.length;
+    if (widthListToolongWithIgnore) {
+        throw new Error(`The width list is too long given from the number of remaining properties after ignore some.`);
+    }
+};
+const getColumns = ({ schema, ignore = [], width = [], meta = {}, defaultWidth = 400, }) => {
+    const { properties } = schema;
+    idListSanityCheck("ignore", ignore, properties);
+    widthSanityCheck(width, ignore, properties);
+    idListSanityCheck("meta", Object.keys(meta), properties);
+    const keys = Object.keys(properties);
+    const ignored = keys.filter((key) => {
+        return !ignore.some((shouldIgnoreKey) => key === shouldIgnoreKey);
+    });
+    const columnHelper = createColumnHelper();
+    // @ts-expect-error find type for unknown
+    const columns = [
+        ...ignored.map((column, index) => {
+            return columnHelper.accessor(column, {
+                cell: (props) => {
+                    // @ts-expect-error find type for unknown
+                    return jsx(TextCell, { children: props.row.original[column] });
+                },
+                header: (columnHeader) => {
+                    const displayName = columnHeader.column.columnDef.meta?.displayName ??
+                        snakeToLabel(column);
+                    return jsx("span", { children: displayName });
+                },
+                footer: (columnFooter) => {
+                    const displayName = columnFooter.column.columnDef.meta?.displayName ??
+                        snakeToLabel(column);
+                    return jsx("span", { children: displayName });
+                },
+                size: width[index] ?? defaultWidth,
+                meta: Object.keys(meta).length > 0 ? meta[column] : {},
+            });
+        }),
+    ];
+    return columns;
+};
+
+//@ts-expect-error TODO: find appropriate type
+const SchemaFormContext = createContext({
+    schema: {},
+    serverUrl: "",
+    order: [],
+    ignore: [],
+    onSubmit: () => { },
+    preLoadedValues: {},
+    rowNumber: 0,
+    displayText: {},
+});
+
+const PopoverContent = React.forwardRef(function PopoverContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return (jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { ref: ref, ...rest }) }) }));
+});
+React.forwardRef(function PopoverArrow(props, ref) {
+    return (jsx(Popover.Arrow, { ...props, ref: ref, children: jsx(Popover.ArrowTip, {}) }));
+});
+React.forwardRef(function PopoverCloseTrigger(props, ref) {
+    return (jsx(Popover.CloseTrigger, { position: "absolute", top: "1", insetEnd: "1", ...props, asChild: true, ref: ref, children: jsx(CloseButton, { size: "sm" }) }));
+});
+const PopoverTitle = Popover.Title;
+Popover.Description;
+Popover.Footer;
+Popover.Header;
+const PopoverRoot = Popover.Root;
+const PopoverBody = Popover.Body;
+const PopoverTrigger = Popover.Trigger;
+
+const RadioCardItem = React.forwardRef(function RadioCardItem(props, ref) {
+    const { inputProps, label, description, addon, icon, indicator = jsx(RadioCard.ItemIndicator, {}), indicatorPlacement = "end", ...rest } = props;
+    const hasContent = label || description || icon;
+    const ContentWrapper = indicator ? RadioCard.ItemContent : React.Fragment;
+    return (jsxs(RadioCard.Item, { ...rest, children: [jsx(RadioCard.ItemHiddenInput, { ref: ref, ...inputProps }), jsxs(RadioCard.ItemControl, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxs(ContentWrapper, { children: [icon, label && jsx(RadioCard.ItemText, { children: label }), description && (jsx(RadioCard.ItemDescription, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsx(RadioCard.ItemAddon, { children: addon })] }));
+});
+const RadioCardRoot = RadioCard.Root;
+RadioCard.Label;
+RadioCard.ItemIndicator;
+
+const Field = React.forwardRef(function Field(props, ref) {
+    const { label, children, helperText, errorText, optionalText, ...rest } = props;
+    return (jsxs(Field$1.Root, { ref: ref, ...rest, children: [label && (jsxs(Field$1.Label, { children: [label, jsx(Field$1.RequiredIndicator, { fallback: optionalText })] })), children, helperText && (jsx(Field$1.HelperText, { children: helperText })), errorText && (jsx(Field$1.ErrorText, { children: errorText }))] }));
+});
+
+const useSchemaContext = () => {
+    const { schema, serverUrl, order, ignore, onSubmit, preLoadedValues, rowNumber, displayText, } = useContext(SchemaFormContext);
+    return {
+        schema,
+        serverUrl,
+        order,
+        ignore,
+        onSubmit,
+        preLoadedValues,
+        rowNumber,
+        displayText,
+    };
+};
+
+const getTableData = async ({ serverUrl, in_table, searching = '', where = [], limit = 10, }) => {
+    if (serverUrl === undefined || serverUrl.length == 0) {
+        throw new Error('The serverUrl is missing');
+    }
+    if (in_table === undefined || in_table.length == 0) {
+        throw new Error('The in_table is missing');
+    }
+    const options = {
+        method: "GET",
+        url: `${serverUrl}/api/g/${in_table}`,
+        headers: {
+            Apikey: "YOUR_SECRET_TOKEN",
+            "Content-Type": "application/json",
+        },
+        params: {
+            searching,
+            where,
+            limit,
+        },
+    };
+    try {
+        const { data } = await axios.request(options);
+        console.log(data);
+        return data;
+    }
+    catch (error) {
+        console.error(error);
+        throw error;
+    }
+};
+
+const IdPicker = ({ column, in_table, column_ref, display_column, }) => {
+    const { formState: { errors }, setValue, } = 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 } = schema.properties[column];
+    const [selectedId, setSelectedId] = useState();
+    const [searchText, setSearchText] = useState();
+    const [limit, setLimit] = useState(10);
+    const [openSearchResult, setOpenSearchResult] = useState();
+    const ref = useRef(null);
+    const query = useQuery({
+        queryKey: [`idpicker`, searchText, in_table, limit],
+        queryFn: async () => {
+            return await getTableData({
+                serverUrl,
+                searching: searchText ?? "",
+                in_table: in_table,
+                limit: limit,
+            });
+        },
+        staleTime: 10000,
+    });
+    const { isLoading, isFetching, data, isPending, isError } = query;
+    const dataList = data?.data ?? [];
+    const count = data?.count ?? 0;
+    const isDirty = (searchText?.length ?? 0) > 0;
+    const onSearchChange = async (event) => {
+        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],
+            };
+        });
+    };
+    // 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 = () => {
+        const selectedItem = getIdMap(dataList)[selectedId ?? ""];
+        if (selectedItem == undefined) {
+            return "";
+        }
+        return selectedItem[display_column];
+    };
+    if (selectedId != undefined) {
+        return (jsx(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, gridColumn,
+            gridRow, children: jsx(Tag, { closable: true, onClick: () => {
+                    setSelectedId(undefined);
+                    setValue(column, "");
+                }, children: getSelectedName() }) }));
+    }
+    return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsx(Input, { placeholder: "Type to search", onChange: (event) => {
+                    onSearchChange(event);
+                    setOpenSearchResult(true);
+                }, autoComplete: "off", ref: ref }), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsxs(RadioCardRoot, { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), jsx(Text, { children: `Search Result: ${count}, Showing ${limit}` }), jsx(Button, { onClick: async () => {
+                                                setOpenSearchResult(false);
+                                            }, children: "close" }), 
+                                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                        getItemList(dataList).map((item) => (jsx(RadioCardItem, { label: item.label, description: item.description, value: item.value, onClick: () => {
+                                                setSelectedId(item.key);
+                                                setValue(column, item.key);
+                                                setOpenSearchResult(false);
+                                            }, indicator: false }, item.key))), isDirty && (jsxs(Fragment, { children: [dataList.length <= 0 && jsx(Fragment, { children: "Empty Search Result" }), " ", count > dataList.length && (jsx(Fragment, { children: 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}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+};
+
+const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
+    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
+    return (jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [jsx(Popover.Trigger, { asChild: true, children: children }), jsx(Portal, { disabled: !portalled, container: portalRef, children: jsx(Popover.Positioner, { children: jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && (jsx(Popover.Arrow, { children: jsx(Popover.ArrowTip, {}) })), content] }) }) })] }));
+});
+const InfoTip = React.forwardRef(function InfoTip(props, ref) {
+    const { children, ...rest } = props;
+    return (jsx(ToggleTip, { content: children, ...rest, ref: ref, children: jsx(IconButton, { variant: "ghost", "aria-label": "info", size: "2xs", colorPalette: "gray", children: jsx(HiOutlineInformationCircle, {}) }) }));
+});
+
+const DataListRoot = DataList.Root;
+const DataListItem = React.forwardRef(function DataListItem(props, ref) {
+    const { label, info, value, children, grow, ...rest } = props;
+    return (jsxs(DataList.Item, { ref: ref, ...rest, children: [jsxs(DataList.ItemLabel, { flex: grow ? "1" : undefined, children: [label, info && jsx(InfoTip, { children: info })] }), jsx(DataList.ItemValue, { flex: grow ? "1" : undefined, children: value }), children] }));
+});
+
+const IdViewer = ({ value, in_table, column_ref, display_column, column, }) => {
+    const { schema, serverUrl } = useSchemaContext();
+    if (schema.properties == undefined) {
+        throw new Error("schema properties when using DatePicker");
+    }
+    const { title } = schema.properties[column];
+    const query = useQuery({
+        queryKey: [`idpicker`, in_table, value],
+        queryFn: async () => {
+            return await getTableData({
+                serverUrl,
+                in_table: in_table,
+                where: [
+                    {
+                        id: column_ref,
+                        value: value,
+                    },
+                ],
+            });
+        },
+        staleTime: 10000,
+    });
+    const getDataListProps = (value) => {
+        if (value == undefined || value.length <= 0) {
+            return {
+                value: "<empty>",
+                color: "gray.400",
+            };
+        }
+        return {
+            value: value,
+        };
+    };
+    return (jsx(Fragment, { children: jsx(DataListItem, { label: `${title ?? snakeToLabel(column)}`, ...getDataListProps((query.data?.data[0] ?? {})[display_column]) }) }));
+};
+
+const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
+    const { children, ...rest } = props;
+    return (jsxs(NumberInput.Root, { ref: ref, variant: "outline", ...rest, children: [children, jsxs(NumberInput.Control, { children: [jsx(NumberInput.IncrementTrigger, {}), jsx(NumberInput.DecrementTrigger, {})] })] }));
+});
+const NumberInputField$1 = NumberInput.Input;
+NumberInput.Scrubber;
+NumberInput.Label;
+
+const NumberInputField = ({ column }) => {
+    const { register, formState: { errors }, } = useFormContext();
+    const { schema, 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 String Input Field");
+    }
+    const { gridColumn, gridRow, title } = schema.properties[column];
+    return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, gridColumn, gridRow, children: [jsx(NumberInputRoot, { children: jsx(NumberInputField$1, { ...register(column, { required: isRequired }) }) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+};
+
+const StringInputField = ({ column }) => {
+    const { register, formState: { errors }, } = useFormContext();
+    const { schema, 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 String Input Field");
+    }
+    const { gridColumn, gridRow, title } = schema.properties[column];
+    return (jsx(Fragment, { children: jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Input, { ...register(column, { required: isRequired }), autoComplete: "off" }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }) }));
+};
+
+const clearEmptyString = (object) => {
+    return Object.fromEntries(Object.entries(object).filter(([, value]) => value !== ""));
+};
+
+const AccordionItemTrigger = React.forwardRef(function AccordionItemTrigger(props, ref) {
+    const { children, indicatorPlacement = "end", ...rest } = props;
+    return (jsxs(Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === "start" && (jsx(Accordion.ItemIndicator, { rotate: { base: "-90deg", _open: "0deg" }, children: jsx(LuChevronDown, {}) })), jsx(HStack, { gap: "4", flex: "1", textAlign: "start", width: "full", children: children }), indicatorPlacement === "end" && (jsx(Accordion.ItemIndicator, { children: jsx(LuChevronDown, {}) }))] }));
+});
+const AccordionItemContent = React.forwardRef(function AccordionItemContent(props, ref) {
+    return (jsx(Accordion.ItemContent, { children: jsx(Accordion.ItemBody, { ...props, ref: ref }) }));
+});
+const AccordionRoot = Accordion.Root;
+const AccordionItem = Accordion.Item;
+
+const CheckboxCard = React.forwardRef(function CheckboxCard(props, ref) {
+    const { inputProps, label, description, icon, addon, indicator = jsx(CheckboxCard$1.Indicator, {}), indicatorPlacement = "end", ...rest } = props;
+    const hasContent = label || description || icon;
+    const ContentWrapper = indicator ? CheckboxCard$1.Content : React.Fragment;
+    return (jsxs(CheckboxCard$1.Root, { ...rest, children: [jsx(CheckboxCard$1.HiddenInput, { ref: ref, ...inputProps }), jsxs(CheckboxCard$1.Control, { children: [indicatorPlacement === "start" && indicator, hasContent && (jsxs(ContentWrapper, { children: [icon, label && (jsx(CheckboxCard$1.Label, { children: label })), description && (jsx(CheckboxCard$1.Description, { children: description })), indicatorPlacement === "inside" && indicator] })), indicatorPlacement === "end" && indicator] }), addon && jsx(CheckboxCard$1.Addon, { children: addon })] }));
+});
+CheckboxCard$1.Indicator;
+
+const BooleanPicker = ({ column }) => {
+    const { formState: { errors }, setValue, getValues, } = useFormContext();
+    const { schema, 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 BooleanPicker");
+    }
+    const { gridColumn, gridRow, title } = schema.properties[column];
+    return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsx(CheckboxCard
+            // label={snakeToLabel(column)}
+            , { 
+                // label={snakeToLabel(column)}
+                value: getValues(column), variant: "surface", onSelect: () => {
+                    setValue(column, !getValues(column));
+                } }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+};
+
+const monthNamesShort = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+];
+const weekdayNamesShort$1 = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const Calendar$1 = ({ calendars, getBackProps, getForwardProps, getDateProps, firstDayOfWeek = 0, }) => {
+    if (calendars.length) {
+        return (jsxs(Grid, { children: [jsxs(Grid, { templateColumns: "repeat(4, auto)", justifyContent: "center", children: [jsx(Button$1, { variant: "ghost", ...getBackProps({
+                                calendars,
+                                offset: 12,
+                            }), children: "<<" }), jsx(Button$1, { variant: "ghost", ...getBackProps({ calendars }), children: "Back" }), jsx(Button$1, { variant: "ghost", ...getForwardProps({ calendars }), children: "Next" }), jsx(Button$1, { variant: "ghost", ...getForwardProps({
+                                calendars,
+                                offset: 12,
+                            }), children: ">>" })] }), jsx(Grid, { templateColumns: "repeat(2, auto)", justifyContent: "center", children: calendars.map((calendar) => (jsxs(Grid, { gap: 4, children: [jsxs(Grid, { justifyContent: "center", children: [monthNamesShort[calendar.month], " ", calendar.year] }), jsxs(Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: [[0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
+                                        const weekday = (weekdayNum + firstDayOfWeek) % 7;
+                                        return (jsx(Text, { textAlign: "center", children: weekdayNamesShort$1[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
+                                    }), calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
+                                        const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;
+                                        if (!dateObj) {
+                                            return jsx(Grid, {}, key);
+                                        }
+                                        const { date, selected, selectable, today } = dateObj;
+                                        const getDateColor = ({ today, selected, selectable, }) => {
+                                            if (!selectable) {
+                                                return "gray";
+                                            }
+                                            if (selected) {
+                                                return "blue";
+                                            }
+                                            if (today) {
+                                                return "green";
+                                            }
+                                            return "";
+                                        };
+                                        const getVariant = ({ today, selected, selectable, }) => {
+                                            if (!selectable) {
+                                                return "solid";
+                                            }
+                                            if (selected) {
+                                                return "solid";
+                                            }
+                                            if (today) {
+                                                return "solid";
+                                            }
+                                            return "ghost";
+                                        };
+                                        const color = getDateColor({ today, selected, selectable });
+                                        const variant = getVariant({ today, selected, selectable });
+                                        return (jsx(Button$1, { variant: variant, colorPalette: color, ...getDateProps({ dateObj }), children: selectable ? date.getDate() : "X" }, key));
+                                    }))] })] }, `${calendar.month}${calendar.year}`))) })] }));
+    }
+    return null;
+};
+let DatePicker$1 = class DatePicker extends React__default.Component {
+    render() {
+        return (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) => (jsx(Calendar$1, { ...dayzedData, firstDayOfWeek: this.props.firstDayOfWeek })) }));
+    }
+};
+
+const DatePicker = ({ column }) => {
+    const { formState: { errors }, setValue, getValues, } = useFormContext();
+    const { schema, displayText } = useSchemaContext();
+    const { fieldRequired } = displayText;
+    const { required } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const [open, setOpen] = useState(false);
+    if (schema.properties == undefined) {
+        throw new Error("schema properties when using DatePicker");
+    }
+    const { gridColumn, gridRow, title } = schema.properties[column];
+    return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, positioning: { sameWidth: true }, children: [jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+                                setOpen(true);
+                            }, children: getValues(column) !== undefined
+                                ? dayjs(getValues(column)).format("YYYY-MM-DD")
+                                : "" }) }), jsx(PopoverContent, { width: "auto", children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), 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}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+};
+
+const ObjectInput = ({ column }) => {
+    const { formState: { errors }, setValue, getValues, } = useFormContext();
+    const { schema, displayText } = useSchemaContext();
+    const { addNew, fieldRequired, save } = displayText;
+    const { required } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const entries = Object.entries(getValues(column) ?? {});
+    const [showNewEntries, setShowNewEntries] = useState(false);
+    const [newKey, setNewKey] = useState();
+    const [newValue, setNewValue] = useState();
+    if (schema.properties == undefined) {
+        throw new Error("schema properties when using DatePicker");
+    }
+    const { gridColumn, gridRow, title } = schema.properties[column];
+    return (jsxs(Field, { label: `${title ?? snakeToLabel(column)}`, required: isRequired, alignItems: "stretch", gridColumn, gridRow, children: [entries.map(([key, value]) => {
+                return (jsxs(Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsx(Input, { value: key, onChange: (e) => {
+                                const filtered = entries.filter(([target]) => {
+                                    return target !== key;
+                                });
+                                setValue(column, Object.fromEntries([...filtered, [e.target.value, value]]));
+                            }, autoComplete: "off" }), jsx(Input, { value: value, onChange: (e) => {
+                                setValue(column, {
+                                    ...getValues(column),
+                                    [key]: e.target.value,
+                                });
+                            }, autoComplete: "off" }), jsx(IconButton, { variant: "ghost", onClick: () => {
+                                const filtered = entries.filter(([target]) => {
+                                    return target !== key;
+                                });
+                                setValue(column, Object.fromEntries([...filtered]));
+                            }, children: jsx(CgClose, {}) })] }));
+            }), jsx(Show, { when: showNewEntries, children: jsxs(Card.Root, { children: [jsx(Card.Body, { gap: "2", children: jsxs(Grid, { templateColumns: "1fr 1fr auto", gap: 1, children: [jsx(Input, { value: newKey, onChange: (e) => {
+                                            setNewKey(e.target.value);
+                                        }, autoComplete: "off" }), jsx(Input, { value: newValue, onChange: (e) => {
+                                            setNewValue(e.target.value);
+                                        }, autoComplete: "off" })] }) }), jsxs(Card.Footer, { justifyContent: "flex-end", children: [jsx(IconButton, { variant: "subtle", onClick: () => {
+                                        setShowNewEntries(false);
+                                        setNewKey(undefined);
+                                        setNewValue(undefined);
+                                    }, children: jsx(CgClose, {}) }), jsx(Button, { onClick: () => {
+                                        if (!!newKey === false) {
+                                            setShowNewEntries(false);
+                                            setNewKey(undefined);
+                                            setNewValue(undefined);
+                                            return;
+                                        }
+                                        setValue(column, Object.fromEntries([...entries, [newKey, newValue]]));
+                                        setShowNewEntries(false);
+                                        setNewKey(undefined);
+                                        setNewValue(undefined);
+                                    }, children: save ?? "Save" })] })] }) }), jsx(Button, { onClick: () => {
+                    setShowNewEntries(true);
+                    setNewKey(undefined);
+                    setNewValue(undefined);
+                }, children: addNew ?? "Add New" }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: fieldRequired ?? "The field is requried" }))] }));
+};
+
+const idPickerSanityCheck = (column, in_table, column_ref, display_column) => {
+    console.log(!!in_table, "okgsd");
+    if (!!in_table == false) {
+        throw new Error(`The key in_table does not exist in properties of column ${column}.`);
+    }
+    if (!!column_ref == false) {
+        throw new Error(`The key column_ref does not exist in properties of column ${column}.`);
+    }
+    if (!!display_column == false) {
+        throw new Error(`The key display_column does not exist in properties of column ${column}.`);
+    }
+};
+const FormInternal = () => {
+    const { schema, serverUrl, displayText, order, ignore, onSubmit, preLoadedValues, rowNumber, } = useSchemaContext();
+    const { title, submit, empty, cancel, submitSuccess, submitAgain, confirm } = displayText;
+    const methods = useFormContext();
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [isError, setIsError] = useState(false);
+    const [isSubmiting, setIsSubmiting] = useState(false);
+    const [isConfirming, setIsConfirming] = useState(false);
+    const [validatedData, setValidatedData] = useState();
+    const [error, setError] = useState();
+    const { properties } = schema;
+    const onBeforeSubmit = () => {
+        setIsSubmiting(true);
+    };
+    const onAfterSubmit = () => {
+        setIsSubmiting(false);
+    };
+    const onSubmitError = () => {
+        setIsError(true);
+    };
+    const onSubmitSuccess = () => {
+        setIsSuccess(true);
+    };
+    const defaultOnSubmit = async (data) => {
+        const options = {
+            method: "POST",
+            url: `${serverUrl}/api/g/${schema.title}`,
+            headers: {
+                Apikey: "YOUR_SECRET_TOKEN",
+                "Content-Type": "application/json",
+            },
+            data: clearEmptyString(data),
+        };
+        try {
+            onBeforeSubmit();
+            await axios.request(options);
+            onSubmitSuccess();
+        }
+        catch (error) {
+            setIsError(true);
+            setError(error);
+            onSubmitError();
+        }
+        finally {
+            onAfterSubmit();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onFormSubmit = async (data) => {
+        if (onSubmit === undefined) {
+            defaultOnSubmit(data);
+            return;
+        }
+        onSubmit(data);
+    };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onValid = (data) => {
+        setValidatedData(data);
+        setIsError(false);
+        setIsConfirming(true);
+    };
+    const renderOrder = (order, origin_list) => {
+        const not_exist = origin_list.filter((columnA) => !order.some((columnB) => columnA === columnB));
+        return [...order, ...not_exist];
+    };
+    const ordered = renderOrder(order, Object.keys(properties));
+    const getDataListProps = (value) => {
+        if (value == undefined || value.length <= 0) {
+            return {
+                value: `<${empty ?? "Empty"}>`,
+                color: "gray.400",
+            };
+        }
+        return {
+            value: value,
+        };
+    };
+    useEffect(() => {
+        const loadData = () => {
+            Object.entries(preLoadedValues).map(([column, value]) => {
+                methods.setValue(column, value);
+            });
+        };
+        loadData();
+    }, [preLoadedValues, methods]);
+    if (isSuccess) {
+        return (jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: title ?? snakeToLabel(schema.title ?? "") }), jsxs(Alert.Root, { status: "success", children: [jsx(Alert.Indicator, {}), jsx(Alert.Title, { children: submitSuccess ?? "Data uploaded to the server. Fire on!" })] }), jsx(Button, { onClick: () => {
+                        setIsError(false);
+                        setIsSubmiting(false);
+                        setIsSuccess(false);
+                        setIsConfirming(false);
+                        setValidatedData(undefined);
+                        methods.reset();
+                    }, formNoValidate: true, children: submitAgain ?? "Submit Again" })] }));
+    }
+    if (isConfirming) {
+        return (jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: title ?? snakeToLabel(schema.title ?? "") }), jsx(DataListRoot, { orientation: "horizontal", gap: 4, display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+                        if (properties === undefined) {
+                            return jsx(Fragment, {});
+                        }
+                        const key = column;
+                        const values = properties[column];
+                        const shouldIgnore = ignore.some((column) => {
+                            return column == key;
+                        });
+                        if (shouldIgnore) {
+                            return jsx(Fragment, {});
+                        }
+                        const { type, variant, in_table, column_ref, display_column, gridColumn, gridRow, } = values;
+                        if (type === "string") {
+                            if (variant === "id-picker") {
+                                idPickerSanityCheck(column, in_table, column_ref, display_column);
+                                return (jsx(IdViewer, { value: (validatedData ?? {})[column], in_table,
+                                    column_ref,
+                                    display_column,
+                                    column,
+                                    gridColumn,
+                                    gridRow }, `form-${key}`));
+                            }
+                            if (variant === "date-picker") {
+                                const value = (validatedData ?? {})[column];
+                                if (!!value === false) {
+                                    return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${snakeToLabel(column)}`, ...getDataListProps(undefined) }, `form-${key}`));
+                                }
+                                const date = dayjs(value).format("YYYY-MM-DD");
+                                return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${snakeToLabel(column)}`, ...getDataListProps(date) }, `form-${key}`));
+                            }
+                            return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${snakeToLabel(column)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
+                        }
+                        if (type === "object") {
+                            const value = (validatedData ?? {})[column];
+                            if (!!value === false) {
+                                return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", label: `${snakeToLabel(column)}`, ...getDataListProps(undefined) }, `form-${key}`));
+                            }
+                            return (jsxs(Flex, { flexFlow: "column", gap: 2, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { children: snakeToLabel(column) }), jsx(DataListRoot, { orientation: "horizontal", padding: 4, borderColor: "gray.200", borderWidth: 1, borderRadius: 4, children: Object.entries(value).map(([key, value]) => {
+                                            return (jsx(DataListItem, { label: `${key}`, ...getDataListProps(value) }, `form-${column}-${key}`));
+                                        }) })] }));
+                        }
+                        if (type === "boolean") {
+                            return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${snakeToLabel(column)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
+                        }
+                        if (type === "number" || type === "integer") {
+                            return (jsx(DataListItem, { gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 4", label: `${snakeToLabel(column)}`, ...getDataListProps((validatedData ?? {})[column]) }, `form-${key}`));
+                        }
+                        if (type === "array") {
+                            return jsx(Fragment, { children: `array ${column}` });
+                        }
+                        if (type === "null") {
+                            return jsx(Fragment, { children: `null ${column}` });
+                        }
+                        return jsx(Fragment, { children: `unknown type ${column}` });
+                    }) }), jsx(Button, { onClick: () => {
+                        onFormSubmit(validatedData);
+                    }, children: confirm ?? "Confirm" }), jsx(Button, { onClick: () => {
+                        setIsConfirming(false);
+                    }, variant: "subtle", children: cancel ?? "Cancel" }), isSubmiting && (jsx(Box, { pos: "absolute", inset: "0", bg: "bg/80", children: jsx(Center, { h: "full", children: jsx(Spinner, { color: "teal.500" }) }) })), isError && (jsx(Fragment, { children: jsx(Alert.Root, { status: "error", children: jsx(Alert.Title, { children: jsx(AccordionRoot, { collapsible: true, defaultValue: ["b"], children: jsxs(AccordionItem, { value: "b", children: [jsxs(AccordionItemTrigger, { children: [jsx(Alert.Indicator, {}), `${error}`] }), jsx(AccordionItemContent, { children: `${JSON.stringify(error)}` })] }) }) }) }) }))] }));
+    }
+    return (jsxs(Fragment, { children: [jsxs(Grid, { gap: 2, children: [jsx(Heading, { children: title ?? snakeToLabel(schema.title ?? "") }), jsx(Grid, { gap: 4, gridTemplateColumns: "repeat(12, 1fr)", gridTemplateRows: `repeat(${rowNumber ?? "auto-fit"}, auto)`, children: ordered.map((column) => {
+                            if (properties === undefined) {
+                                return jsx(Fragment, {});
+                            }
+                            const key = column;
+                            const values = properties[column];
+                            const shouldIgnore = ignore.some((column) => {
+                                return column == key;
+                            });
+                            if (shouldIgnore) {
+                                return jsx(Fragment, {});
+                            }
+                            //@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 (variant === "id-picker") {
+                                    idPickerSanityCheck(column, in_table, column_ref, display_column);
+                                    return (jsx(IdPicker, { column: key, in_table: in_table, column_ref: column_ref, display_column: display_column }, `form-${key}`));
+                                }
+                                if (variant === "date-picker") {
+                                    return jsx(DatePicker, { column: key }, `form-${key}`);
+                                }
+                                return jsx(StringInputField, { column: key }, `form-${key}`);
+                            }
+                            if (type === "number" || type === "integer") {
+                                return jsx(NumberInputField, { column: key }, `form-${key}`);
+                            }
+                            if (type === "boolean") {
+                                return jsx(BooleanPicker, { column: key }, `form-${key}`);
+                            }
+                            if (type === "object") {
+                                return (jsx(Fragment, { children: jsx(ObjectInput, { column: key }, `form-${key}`) }));
+                            }
+                            if (type === "array") {
+                                return jsx(Fragment, { children: `array ${column}` });
+                            }
+                            if (type === "null") {
+                                return jsx(Fragment, { children: `null ${column}` });
+                            }
+                            return jsx(Fragment, { children: "missing type" });
+                        }) }), jsx(Button, { onClick: () => {
+                            methods.handleSubmit(onValid)();
+                        }, formNoValidate: true, children: submit ?? "Submit" })] }), isError && (jsxs(Fragment, { children: ["isError", jsxs(Fragment, { children: [" ", `${error}`] })] }))] }));
+};
+const Form = ({ schema, serverUrl, order = [], ignore = [], onSubmit = undefined, preLoadedValues = {}, rowNumber = undefined, displayText = {}, }) => {
+    const queryClient = new QueryClient();
+    const methods = useForm();
+    const { properties } = schema;
+    idListSanityCheck("order", order, properties);
+    idListSanityCheck("ignore", ignore, properties);
+    idListSanityCheck("preLoadedValues", Object.keys(preLoadedValues), properties);
+    return (jsx(QueryClientProvider, { client: queryClient, children: jsx(SchemaFormContext.Provider, { value: {
+                schema,
+                serverUrl,
+                displayText,
+                order,
+                ignore,
+                // @ts-expect-error TODO: find appropriate types
+                onSubmit,
+                preLoadedValues,
+                rowNumber,
+            }, children: jsx(FormProvider, { ...methods, children: jsx(FormInternal, {}) }) }) }));
+};
+
+const getMultiDates = ({ selected, selectedDate, selectedDates, selectable, }) => {
+    if (!selectable) {
+        return [...selectedDates];
+    }
+    if (selected) {
+        // Remove
+        return selectedDates.filter((time) => {
+            return selectedDate.getTime() !== time.getTime();
+        });
+    }
+    else {
+        // Add
+        return [...selectedDates, selectedDate];
+    }
+};
+
+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 monthNamesFull = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const weekdayNamesShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+function Calendar({ calendars, getBackProps, getForwardProps, getDateProps, selected = [], firstDayOfWeek = 0, }) {
+    const [hoveredDate, setHoveredDate] = 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 (jsxs(Grid, { onMouseLeave: onMouseLeave, children: [jsxs(Grid, { templateColumns: "repeat(4, auto)", justifyContent: "center", children: [jsx(Button$1, { variant: "ghost", ...getBackProps({
+                                calendars,
+                                offset: 12,
+                            }), children: "<<" }), jsx(Button$1, { variant: "ghost", ...getBackProps({ calendars }), children: "Back" }), jsx(Button$1, { variant: "ghost", ...getForwardProps({ calendars }), children: "Next" }), jsx(Button$1, { variant: "ghost", ...getForwardProps({
+                                calendars,
+                                offset: 12,
+                            }), children: ">>" })] }), jsx(Grid, { templateColumns: "repeat(2, auto)", justifyContent: "center", gap: 4, children: calendars.map((calendar) => (jsxs(Grid, { gap: 4, children: [jsxs(Grid, { justifyContent: "center", children: [monthNamesFull[calendar.month], " ", calendar.year] }), jsx(Grid, { templateColumns: "repeat(7, auto)", justifyContent: "center", children: [0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
+                                    const weekday = (weekdayNum + firstDayOfWeek) % 7;
+                                    return (jsx(Box, { minWidth: "48px", textAlign: 'center', children: weekdayNamesShort[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
+                                }) }), jsx(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 jsx(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 (jsx(Button$1, { ...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__default.Component {
+    render() {
+        return (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) => (jsx(Calendar, { ...dayzedData,
+                firstDayOfWeek: this.props.firstDayOfWeek,
+                selected: this.props.selected })) }));
+    }
+}
+
+export { CardHeader, DataDisplay, DataTable, DataTableServer, DefaultCardTitle, DefaultTable, DensityToggleButton, EditFilterButton, EditOrderButton, EditSortingButton, EditViewButton, FilterOptions, Form, GlobalFilter, PageSizeControl, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableOrderer, TablePagination, TableSelector, TableSorter, TableViewer, TextCell, getColumns, getMultiDates, getRangeDates, useDataFromUrl, useDataTable, useDataTableContext, useDataTableServer, widthSanityCheck };