@bsol-oss/react-datatable5 12.0.0-beta.20 → 12.0.0-beta.22

package/dist/index.d.ts

@@ -3,17 +3,17 @@ import { Row, RowData, OnChangeFn, Updater, FilterFn, ColumnDef, RowSelectionSta
 import * as React$1 from 'react';
 import React__default, { ReactNode, Dispatch, SetStateAction } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImageProps, TableRootProps, TableHeaderProps as TableHeaderProps$1, TableRowProps, GridProps, CardBodyProps, FlexProps, TextProps, BoxProps } from '@chakra-ui/react';
+import { ImageProps, GridProps, TableRootProps, TableHeaderProps as TableHeaderProps$1, TableRowProps, CardBodyProps, FlexProps, TextProps, BoxProps } from '@chakra-ui/react';
 import { IconType } from 'react-icons';
 import * as react_i18next from 'react-i18next';
 import { UseTranslationResponse } from 'react-i18next';
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { UseQueryResult } from '@tanstack/react-query';
 import { JSONSchema7 } from 'json-schema';
-import { ForeignKeyProps } from '@/components/Form/components/fields/StringInputField';
+import { ForeignKeyProps as ForeignKeyProps$1 } from '@/components/Form/components/fields/StringInputField';
 import { AxiosRequestConfig } from 'axios';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, UseFormReturn, SubmitHandler } from 'react-hook-form';
+import { UseFormReturn, FieldValues, SubmitHandler } from 'react-hook-form';
 import { RenderProps, Props } from '@bsol-oss/dayzed-react19';
 
 interface DensityToggleButtonProps {
@@ -308,8 +308,9 @@ interface TableControlsProps {
     extraItems?: ReactNode;
     loading?: boolean;
     hasError?: boolean;
+    gridProps?: GridProps;
 }
-declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
+declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => react_jsx_runtime.JSX.Element;
 
 interface TableProps extends TableRootProps {
     showLoading?: boolean;
@@ -342,14 +343,10 @@ interface TableRowSelectorProps<TData> {
 declare const TableBody: ({ showSelector, alwaysShowSelector, canResize, }: TableBodyProps) => react_jsx_runtime.JSX.Element;
 
 interface TableFooterProps {
-    pinnedBgColor?: {
-        light: string;
-        dark: string;
-    };
     showSelector?: boolean;
     alwaysShowSelector?: boolean;
 }
-declare const TableFooter: ({ pinnedBgColor, showSelector, alwaysShowSelector, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
+declare const TableFooter: ({ showSelector, alwaysShowSelector, }: TableFooterProps) => react_jsx_runtime.JSX.Element;
 
 interface TableHeaderProps {
     canResize?: boolean;
@@ -448,8 +445,34 @@ declare const FilterOptions: ({ column }: FilterOptionsProps) => react_jsx_runti
 
 declare const GlobalFilter: () => react_jsx_runtime.JSX.Element;
 
+interface ForeignKeyProps {
+    column: string;
+    table: string;
+    display_column: string;
+}
+
+interface CustomJSONSchema7 extends JSONSchema7 {
+    gridColumn?: string;
+    gridRow?: string;
+    foreign_key?: ForeignKeyProps;
+    variant?: string;
+    renderDisplay?: (item: unknown) => ReactNode;
+    inputRender?: (props: {
+        column: string;
+        schema: CustomJSONSchema7;
+        prefix: string;
+        formContext: UseFormReturn;
+    }) => ReactNode;
+    inputViewerRender?: (props: {
+        column: string;
+        schema: CustomJSONSchema7;
+        prefix: string;
+        formContext: UseFormReturn;
+    }) => ReactNode;
+}
+
 interface FormRootProps<TData extends FieldValues> {
-    schema: JSONSchema7;
+    schema: CustomJSONSchema7;
     serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;
@@ -472,7 +495,7 @@ interface CustomJSONSchema7Definition extends JSONSchema7 {
     display_column: string;
     gridColumn: string;
     gridRow: string;
-    foreign_key: ForeignKeyProps;
+    foreign_key: ForeignKeyProps$1;
     children: ReactNode;
 }
 declare const idPickerSanityCheck: (column: string, foreign_key?: {

package/dist/index.js

@@ -2457,7 +2457,7 @@ function ColumnCard({ columnId }) {
             onDrop: () => setDragging(false), // NEW
         });
     }, [columnId, table]);
-    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", cursor: "grab", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "gray.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+    return (jsxRuntime.jsxs(react.Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsxRuntime.jsx(react.Flex, { alignItems: "center", padding: "0", cursor: "grab", children: jsxRuntime.jsx(fa6.FaGripLinesVertical, { color: "colorPalette.400" }) }), jsxRuntime.jsx(react.Flex, { justifyContent: "space-between", alignItems: "center", children: jsxRuntime.jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
 }
 function CardContainer({ location, children }) {
     const ref = React.useRef(null);
@@ -2589,7 +2589,7 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "null" });
     }
     return (jsxRuntime.jsx(react.Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "gray.400", children: getColumn({ field }) }), typeof value === "object" ? (jsxRuntime.jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, field));
+            return (jsxRuntime.jsxs(react.Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsxRuntime.jsx(react.Text, { color: "colorPalette.400", children: getColumn({ field }) }), typeof value === "object" ? (jsxRuntime.jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsxRuntime.jsx(react.Text, { children: JSON.stringify(value) }))] }, field));
         }) }));
 };
 
@@ -2639,7 +2639,7 @@ const CellRenderer = ({ cell }) => {
                         paddingY: 2,
                     }, object: value })] }, cell.id));
     }
-    return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { color: 'gray.400', children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
+    return (jsxRuntime.jsxs(react.Box, { gridColumn, gridRow, children: [jsxRuntime.jsx(react.Box, { color: "colorPalette.400", children: getLabel({ columnId: cell.column.id }) }), jsxRuntime.jsx(react.Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
 };
 const DataDisplay = ({ variant = "" }) => {
     const { table, translate } = useDataTableContext();
@@ -2995,13 +2995,11 @@ const TableFilterTags = () => {
         }) }));
 };
 
-const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, }) => {
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsxRuntime.jsx(jsxRuntime.Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsxRuntime.jsx(jsxRuntime.Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
     const { translate } = useDataTableContext();
-    return (jsxRuntime.jsxs(react.Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", 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: showView && jsxRuntime.jsx(ViewDialog, { 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: translate.t("has_error"), children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), 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.Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", ...gridProps, children: [jsxRuntime.jsxs(react.Flex, { flexFlow: "column", gap: 2, children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsx(react.Box, { children: showView && jsxRuntime.jsx(ViewDialog, { 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: translate.t("has_error"), children: jsxRuntime.jsx(react.Icon, { as: bs.BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsxRuntime.jsx(GlobalFilter, {}), showFilter && jsxRuntime.jsx(FilterDialog, {}), 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.Grid, { overflow: "auto", backgroundColor: "gray.50", _dark: {
-                    backgroundColor: "gray.900",
-                }, children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && (jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: translate.t("rowcount.total") }), jsxRuntime.jsx(RowCountText, {})] }))] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: showPagination && jsxRuntime.jsx(Pagination, {}) })] }))] }));
+                        }) })), showFilterTags && (jsxRuntime.jsx(react.Flex, { children: jsxRuntime.jsx(TableFilterTags, {}) }))] }), jsxRuntime.jsx(react.Grid, { overflow: "auto", bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxRuntime.jsxs(react.Flex, { justifyContent: "space-between", children: [jsxRuntime.jsxs(react.Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsxRuntime.jsx(PageSizeControl, {}), showPageCountText && (jsxRuntime.jsxs(react.Flex, { children: [jsxRuntime.jsx(react.Text, { paddingRight: "0.5rem", children: translate.t("rowcount.total") }), jsxRuntime.jsx(RowCountText, {})] }))] }), jsxRuntime.jsx(react.Box, { justifySelf: "end", children: showPagination && jsxRuntime.jsx(Pagination, {}) })] }))] }));
 };
 
 const EmptyState = React__namespace.forwardRef(function EmptyState(props, ref) {
@@ -3015,7 +3013,7 @@ const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...pr
     if (table.getRowModel().rows.length <= 0) {
         return emptyComponent;
     }
-    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, display: "grid", alignContent: "start", overflowY: "auto", ...props, children: children }));
+    return (jsxRuntime.jsx(react.Table.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, display: "grid", alignContent: "start", overflowY: "auto", bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, ...props, children: children }));
 };
 
 const Checkbox = React__namespace.forwardRef(function Checkbox(props, ref) {
@@ -3079,7 +3077,7 @@ const TableRowSelector = ({ index, row, }) => {
             onCheckedChange: row.getToggleSelectedHandler() }) }));
 };
 
-const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, }) => {
+const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
     const table = useDataTableContext().table;
     const SELECTION_BOX_WIDTH = 20;
     const [hoveredCheckBox, setHoveredCheckBox] = React.useState(false);
@@ -3098,41 +3096,11 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, s
         }
         return false;
     };
-    const getThProps = (header) => {
-        const thProps = header.column.getIsPinned()
-            ? {
-                left: showSelector
-                    ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
-                    : `${header.getStart("left") + table.getDensityValue() * 2}px`,
-                background: pinnedBgColor.light,
-                position: "sticky",
-                zIndex: 1,
-                _dark: {
-                    backgroundColor: pinnedBgColor.dark,
-                },
-            }
-            : {};
-        return thProps;
-    };
-    return (jsxRuntime.jsx(react.Table.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: "flex", children: [showSelector && (jsxRuntime.jsxs(react.Table.Header
-                // styling resize and pinning start
-                , { 
-                    // styling resize and pinning start
-                    padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
-                        ? {
-                            left: `0px`,
-                            backgroundColor: pinnedBgColor.light,
-                            position: "sticky",
-                            zIndex: 1,
-                            _dark: { backgroundColor: pinnedBgColor.dark },
-                        }
-                        : {}), 
-                    // styling resize and pinning end
-                    onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react.Box, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
+    return (jsxRuntime.jsx(react.Table.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: "flex", children: [showSelector && (jsxRuntime.jsxs(react.Table.Header, { padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsxRuntime.jsx(react.Box, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsxRuntime.jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
                                 // indeterminate: table.getIsSomeRowsSelected(),
                                 onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsxRuntime.jsx(react.Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] })), footerGroup.headers.map((header) => (jsxRuntime.jsx(react.Table.Cell, { padding: "0", columnSpan: `${header.colSpan}`, 
                     // styling resize and pinning start
-                    maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: "grid", ...getThProps(header), children: jsxRuntime.jsx(react.MenuRoot, { children: jsxRuntime.jsx(react.MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Box, { padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
+                    maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: "grid", children: jsxRuntime.jsx(react.MenuRoot, { children: jsxRuntime.jsx(react.MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Box, { padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
                                             ? null
                                             : reactTable.flexRender(header.column.columnDef.footer, header.getContext()), jsxRuntime.jsx(react.Box, { children: header.column.getCanSort() && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [header.column.getIsSorted() === false && (
                                                     // <UpDownIcon />
@@ -3158,7 +3126,7 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
         position: "sticky",
         top: 0,
     };
-    return (jsxRuntime.jsx(react.Table.Header, { ...(isSticky ? stickyProps : {}), ...tableHeaderProps, children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: "flex", ...tableRowProps, children: [showSelector && (jsxRuntime.jsx(react.Table.ColumnHeader, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
+    return (jsxRuntime.jsx(react.Table.Header, { ...(isSticky ? stickyProps : {}), bgColor: "transparent", ...tableHeaderProps, children: table.getHeaderGroups().map((headerGroup) => (jsxRuntime.jsxs(react.Table.Row, { display: "flex", bgColor: "transparent", ...tableRowProps, children: [showSelector && (jsxRuntime.jsx(react.Table.ColumnHeader, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
                         base: "colorPalette.900",
                         _dark: "colorPalette.100",
                     },
@@ -3176,10 +3144,20 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                             base: "colorPalette.800",
                             _dark: "colorPalette.200",
                         },
-                        bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", _hover: {
-                                                backgroundColor: "gray.100",
-                                                _dark: {
-                                                    backgroundColor: "gray.700",
+                        bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxRuntime.jsxs(MenuRoot, { children: [jsxRuntime.jsx(MenuTrigger, { asChild: true, children: jsxRuntime.jsx(react.Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", color: {
+                                                base: "colorPalette.800",
+                                                _dark: "colorPalette.200",
+                                                _hover: {
+                                                    base: "colorPalette.700",
+                                                    _dark: "colorPalette.300",
+                                                },
+                                            },
+                                            bg: {
+                                                base: "colorPalette.100",
+                                                _dark: "colorPalette.900",
+                                                _hover: {
+                                                    base: "colorPalette.200",
+                                                    _dark: "colorPalette.800",
                                                 },
                                             }, children: jsxRuntime.jsxs(react.Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
                                                         ? null
@@ -3207,10 +3185,12 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                                                                 });
                                                             }, children: [jsxRuntime.jsx(gr.GrDescend, {}), "Sort Descending"] }) }), header.column.getIsSorted() && (jsxRuntime.jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxRuntime.jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 header.column.clearSorting();
-                                                            }, children: [jsxRuntime.jsx(md.MdClear, {}), "Clear Sorting"] }) }))] }))] })] }), canResize && (jsxRuntime.jsx(react.Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
+                                                            }, children: [jsxRuntime.jsx(md.MdClear, {}), "Clear Sorting"] }) }))] }))] })] }), canResize && (jsxRuntime.jsx(react.Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing()
+                                    ? "colorPalette.700"
+                                    : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
-                                        ? "gray.700"
-                                        : "gray.400",
+                                        ? "colorPalette.700"
+                                        : "colorPalette.400",
                                 }, ...resizeProps }))] }, `chakra-table-header-${header.id}`));
                 })] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
 };
@@ -3678,6 +3658,18 @@ const BooleanPicker = ({ schema, column, prefix }) => {
                 } }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
+const CustomInput = ({ column, schema, prefix }) => {
+    const formContext = reactHookForm.useFormContext();
+    const { inputRender } = schema;
+    return (inputRender &&
+        inputRender({
+            column,
+            schema,
+            prefix,
+            formContext,
+        }));
+};
+
 const monthNamesShort = [
     "Jan",
     "Feb",
@@ -3775,9 +3767,9 @@ const DatePicker = ({ column, schema, prefix }) => {
     const selectedDate = watch(colLabel);
     const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+        gridRow, children: [jsxRuntime.jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
-                            }, children: selectedDate !== undefined ? `${formatedDate}` : "" }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
+                            }, justifyContent: "start", children: [jsxRuntime.jsx(md.MdDateRange, {}), selectedDate !== undefined ? `${formatedDate}` : ""] }) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { children: [jsxRuntime.jsx(PopoverTitle, {}), jsxRuntime.jsx(DatePicker$1
                                 // @ts-expect-error TODO: find appropriate types
                                 , { 
                                     // @ts-expect-error TODO: find appropriate types
@@ -3802,7 +3794,7 @@ function filterArray(array, searchTerm) {
 const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
-    const { required } = schema;
+    const { required, variant } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { gridColumn, gridRow, renderDisplay } = schema;
     const [searchText, setSearchText] = React.useState();
@@ -3819,6 +3811,22 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
         setSearchText(event.target.value);
         setLimit(10);
     };
+    if (variant === "radio") {
+        return (jsxRuntime.jsx(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+            gridRow, children: jsxRuntime.jsx(react.RadioGroup.Root, { defaultValue: "1", children: jsxRuntime.jsx(react.HStack, { gap: "6", children: filterArray(dataList, searchText ?? "").map((item) => {
+                        return (jsxRuntime.jsxs(react.RadioGroup.Item, { onClick: () => {
+                                if (!isMultiple) {
+                                    setOpenSearchResult(false);
+                                    setValue(colLabel, item);
+                                    return;
+                                }
+                                const newSet = new Set([...(watchEnums ?? []), item]);
+                                setValue(colLabel, [...newSet]);
+                            }, value: item, children: [jsxRuntime.jsx(react.RadioGroup.ItemHiddenInput, {}), jsxRuntime.jsx(react.RadioGroup.ItemIndicator, {}), jsxRuntime.jsx(react.RadioGroup.ItemText, { children: !!renderDisplay === true
+                                        ? renderDisplay(item)
+                                        : translate.t(removeIndex(`${colLabel}.${item}`)) })] }, `${colLabel}-${item}`));
+                    }) }) }) }));
+    }
     return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [isMultiple && (jsxRuntime.jsxs(react.Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
                         const item = enumValue;
@@ -3834,7 +3842,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
                             setOpenSearchResult(true);
                         }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: watchEnum === undefined
+                }, justifyContent: "start", children: watchEnum === undefined
                     ? ""
                     : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), 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, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(`${column}.type_to_search`), onChange: (event) => {
                                         onSearchChange(event);
@@ -3851,7 +3859,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
                                                         }
                                                         const newSet = new Set([...(watchEnums ?? []), item]);
                                                         setValue(colLabel, [...newSet]);
-                                                    }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                    }, ...(selected ? { color: "colorPalette.400/50" } : {}), children: !!renderDisplay === true
                                                         ? renderDisplay(item)
                                                         : translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
                                             }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
@@ -4206,7 +4214,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
         const filesArray = [...event.target.files];
         onDrop({ files: filesArray });
     };
-    return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "gray.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
+    return (jsxRuntime.jsxs(react.Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "colorPalette.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Flex, { children: placeholder }), jsxRuntime.jsx(react.Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
 };
 
 const FilePicker = ({ column, schema, prefix }) => {
@@ -4224,7 +4232,7 @@ const FilePicker = ({ column, schema, prefix }) => {
                                 setValue(column, currentFiles.filter(({ name }) => {
                                     return name !== file.name;
                                 }));
-                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
+                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [file.type.startsWith("image/") && (jsxRuntime.jsx(react.Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
                 }) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
@@ -4357,7 +4365,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                             setOpenSearchResult(true);
                         }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsxRuntime.jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
+                }, justifyContent: "start", children: getPickedValue() })), jsxRuntime.jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsxRuntime.jsx(PopoverTrigger, {}), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsxRuntime.jsx(react.Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
                                     }, autoComplete: "off", ref: ref }), jsxRuntime.jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isFetching && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isFetching" }), isLoading && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isLoading" }), isPending && jsxRuntime.jsx(jsxRuntime.Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsxRuntime.jsx(react.Spinner, {}), isError && (jsxRuntime.jsx(react.Icon, { color: "red.400", children: jsxRuntime.jsx(bi.BiError, {}) })), jsxRuntime.jsx(react.Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxRuntime.jsxs(react.Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsxRuntime.jsx(react.Flex, { flexFlow: "column wrap", children: 
@@ -4377,7 +4385,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                                                                     item[column_ref],
                                                                 ]);
                                                                 setValue(colLabel, [...newSet]);
-                                                            }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                            }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
+                                                                ? { color: "colorPalette.400/50" }
+                                                                : {}), children: !!renderDisplay === true
                                                                 ? renderDisplay(item)
                                                                 : item[display_column] }, item[column_ref]));
                                                     }) }), isDirty && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: dataList.length <= 0 && (jsxRuntime.jsx(react.Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsxRuntime.jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxRuntime.jsxs(react.HStack, { gap: "4", children: [jsxRuntime.jsx(PaginationPrevTrigger, {}), count > 0 && jsxRuntime.jsx(PaginationPageText, {}), jsxRuntime.jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
@@ -4577,9 +4587,115 @@ const TagPicker = ({ column, schema, prefix }) => {
             }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
+function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
+    am: "am",
+    pm: "pm",
+}, onChange = () => { }, }) {
+    const hours = Array.from({ length: 12 }, (_, i) => {
+        const hour = i + 1;
+        return hour.toString().padStart(2, "0");
+    });
+    const minutes = Array.from({ length: 60 }, (_, i) => {
+        return i.toString().padStart(2, "0");
+    });
+    const hoursCollection = react.createListCollection({
+        items: hours.map((hour) => ({
+            value: hour,
+            label: hour,
+        })),
+    });
+    const minutesCollection = react.createListCollection({
+        items: minutes.map((hour) => ({
+            value: hour,
+            label: hour,
+        })),
+    });
+    const meridiemsCollection = react.createListCollection({
+        items: ["am", "pm"].map((hour) => ({
+            value: hour,
+            label: meridiemLabel[hour] ?? hour,
+        })),
+    });
+    return (jsxRuntime.jsxs(react.Grid, { templateColumns: "auto  auto", gap: "4", children: [jsxRuntime.jsxs(react.Flex, { justifyContent: "center", alignItems: "center", gap: "2", children: [jsxRuntime.jsxs(react.Select.Root, { value: [`${hour.toString().padStart(2, "0")}`], onValueChange: (e) => {
+                            setHour(parseInt(e.value[0]));
+                            onChange({ hour: parseInt(e.value[0]), minute, meridiem });
+                        }, collection: hoursCollection, positioning: { sameWidth: true, placement: "bottom" }, children: [jsxRuntime.jsx(react.Select.HiddenSelect, {}), jsxRuntime.jsx(react.Select.Control, { children: jsxRuntime.jsx(react.Select.Trigger, { children: jsxRuntime.jsx(react.Select.ValueText, { placeholder: "Hour" }) }) }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { width: "full", children: hoursCollection.items.map(({ value: hour }) => (jsxRuntime.jsxs(react.Select.Item, { item: hour, children: [hour, jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, hour))) }) })] }), jsxRuntime.jsx(react.Text, { children: ":" }), jsxRuntime.jsxs(react.Select.Root, { value: [`${minute.toString().padStart(2, "0")}`], onValueChange: (e) => {
+                            setMinute(parseInt(e.value[0]));
+                            onChange({ hour, minute: parseInt(e.value[0]), meridiem });
+                        }, collection: minutesCollection, positioning: { sameWidth: true, placement: "bottom" }, children: [jsxRuntime.jsx(react.Select.HiddenSelect, {}), jsxRuntime.jsx(react.Select.Control, { children: jsxRuntime.jsx(react.Select.Trigger, { children: jsxRuntime.jsx(react.Select.ValueText, { placeholder: "Minute" }) }) }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { width: "full", children: minutes.map((minute) => (jsxRuntime.jsxs(react.Select.Item, { item: minute, children: [minute, jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, minute))) }) })] })] }), jsxRuntime.jsxs(react.Select.Root, { value: [meridiem], onValueChange: (e) => {
+                    setMeridiem(e.value[0]);
+                    onChange({ hour, minute, meridiem: e.value[0] });
+                }, collection: meridiemsCollection, positioning: { sameWidth: true, placement: "bottom" }, children: [jsxRuntime.jsx(react.Select.HiddenSelect, {}), jsxRuntime.jsx(react.Select.Control, { children: jsxRuntime.jsx(react.Select.Trigger, { children: jsxRuntime.jsx(react.Select.ValueText, { placeholder: "am/pm" }) }) }), jsxRuntime.jsx(react.Select.Positioner, { children: jsxRuntime.jsx(react.Select.Content, { width: "full", children: meridiemsCollection.items.map(({ value: hour, label }) => (jsxRuntime.jsxs(react.Select.Item, { item: hour, children: [label, jsxRuntime.jsx(react.Select.ItemIndicator, {})] }, hour))) }) })] })] }));
+}
+
+const TimePicker = ({ column, schema, prefix }) => {
+    const { watch, formState: { errors }, setValue, } = reactHookForm.useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    const [open, setOpen] = React.useState(false);
+    const value = watch(colLabel);
+    const formatedTime = dayjs(value).format("hh:mm A");
+    // Parse the initial time parts from the ISO time string (HH:mm:ss)
+    const parseTime = (isoTime) => {
+        if (!isoTime)
+            return { hour: 12, minute: 0, meridiem: "am" };
+        const parsed = dayjs(isoTime);
+        if (!parsed.isValid())
+            return { hour: 12, minute: 0, meridiem: "am" };
+        let hour = parsed.hour();
+        const minute = parsed.minute();
+        const meridiem = hour >= 12 ? "pm" : "am";
+        if (hour === 0)
+            hour = 12;
+        else if (hour > 12)
+            hour -= 12;
+        return { hour, minute, meridiem };
+    };
+    const initialTime = parseTime(value);
+    const [hour, setHour] = React.useState(initialTime.hour);
+    const [minute, setMinute] = React.useState(initialTime.minute);
+    const [meridiem, setMeridiem] = React.useState(initialTime.meridiem);
+    React.useEffect(() => {
+        const { hour, minute, meridiem } = parseTime(value);
+        setHour(hour);
+        setMinute(minute);
+        setMeridiem(meridiem);
+    }, [value]);
+    // Convert hour, minute, meridiem to 24-hour ISO time string
+    const toIsoTime = (hour, minute, meridiem) => {
+        let h = hour;
+        if (meridiem === "am" && hour === 12)
+            h = 0;
+        else if (meridiem === "pm" && hour < 12)
+            h = hour + 12;
+        return dayjs().hour(h).minute(minute).second(0).toISOString();
+    };
+    // Handle changes to time parts
+    const handleTimeChange = ({ hour: newHour, minute: newMinute, meridiem: newMeridiem, }) => {
+        setHour(newHour);
+        setMinute(newMinute);
+        setMeridiem(newMeridiem);
+        const isoTime = toIsoTime(newHour, newMinute, newMeridiem);
+        setValue(colLabel, isoTime, { shouldValidate: true, shouldDirty: true });
+    };
+    const containerRef = React.useRef(null);
+    return (jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsxRuntime.jsxs(react.Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: jsxRuntime.jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                                setOpen(true);
+                            }, justifyContent: "start", children: [jsxRuntime.jsx(io.IoMdClock, {}), value !== undefined ? `${formatedTime}` : ""] }) }), jsxRuntime.jsx(react.Portal, { children: jsxRuntime.jsx(react.Popover.Positioner, { children: jsxRuntime.jsx(react.Popover.Content, { ref: containerRef, children: jsxRuntime.jsx(react.Popover.Body, { children: jsxRuntime.jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, meridiemLabel: {
+                                            am: translate.t(removeIndex(`${colLabel}.am`)),
+                                            pm: translate.t(removeIndex(`${colLabel}.pm`)),
+                                        } }) }) }) }) })] }), errors[`${column}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+};
+
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
+    if (variant === "custom-input") {
+        return jsxRuntime.jsx(CustomInput, { schema: colSchema, prefix, column });
+    }
     if (type === "string") {
         if ((schema.enum ?? []).length > 0) {
             return jsxRuntime.jsx(EnumPicker, { schema: colSchema, prefix, column });
@@ -4591,6 +4707,9 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         if (variant === "date-picker") {
             return jsxRuntime.jsx(DatePicker, { schema: colSchema, prefix, column });
         }
+        if (variant === "time-picker") {
+            return jsxRuntime.jsx(TimePicker, { schema: colSchema, prefix, column });
+        }
         return jsxRuntime.jsx(StringInputField, { schema: colSchema, prefix, column });
     }
     if (type === "number" || type === "integer") {
@@ -4694,22 +4813,15 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
-    const { setValue, formState: { errors }, watch, } = reactHookForm.useFormContext();
+    const { watch } = reactHookForm.useFormContext();
     const { translate } = useSchemaContext();
     const { required, gridColumn, gridRow } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const currentFiles = (watch(column) ?? []);
     const colLabel = `${prefix}${column}`;
-    return (jsxRuntime.jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsxRuntime.jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(`${colLabel}.fileDropzone`) }), jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
-                    return (jsxRuntime.jsx(react.Card.Root, { variant: "subtle", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", cursor: "pointer", onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsxRuntime.jsx(react.Box, { children: file.name }), jsxRuntime.jsx(ti.TiDeleteOutline, {})] }) }, file.name));
-                }) }), errors[`${colLabel}`] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+    return (jsxRuntime.jsx(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: jsxRuntime.jsx(react.Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
+                return (jsxRuntime.jsx(react.Card.Root, { variant: "subtle", children: jsxRuntime.jsxs(react.Card.Body, { gap: "2", display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [file.type.startsWith("image/") && (jsxRuntime.jsx(react.Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsxRuntime.jsx(react.Box, { children: file.name })] }) }, file.name));
+            }) }) }));
 };
 
 const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
@@ -4918,9 +5030,24 @@ const StringViewer = ({ column, schema, prefix, }) => {
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsxRuntime.jsx(react.Text, { children: value }), errors[colLabel] && (jsxRuntime.jsx(react.Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
 };
 
+const CustomViewer = ({ column, schema, prefix }) => {
+    const formContext = reactHookForm.useFormContext();
+    const { inputViewerRender } = schema;
+    return (inputViewerRender &&
+        inputViewerRender({
+            column,
+            schema,
+            prefix,
+            formContext,
+        }));
+};
+
 const SchemaViewer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
+    if (variant === "custom-input") {
+        return jsxRuntime.jsx(CustomViewer, { schema: colSchema, prefix, column });
+    }
     if (type === "string") {
         if ((schema.enum ?? []).length > 0) {
             return jsxRuntime.jsx(EnumViewer, { schema: colSchema, prefix, column });

package/dist/index.mjs

@@ -1,16 +1,16 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Image, EmptyState as EmptyState$2, VStack, Alert, Card, Tooltip as Tooltip$1, Group, InputElement, Icon, List, Table as Table$1, Checkbox as Checkbox$1, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, Center, Heading } from '@chakra-ui/react';
+import { Button as Button$1, AbsoluteCenter, Spinner, Span, IconButton, Portal, Dialog, Flex, Text, useDisclosure, DialogBackdrop, RadioGroup as RadioGroup$1, Grid, Box, Slider as Slider$1, HStack, For, Tag as Tag$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, CheckboxCard as CheckboxCard$1, Image, EmptyState as EmptyState$2, VStack, Alert, Card, Tooltip as Tooltip$1, Group, InputElement, Icon, List, Table as Table$1, Checkbox as Checkbox$1, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Accordion, Field as Field$1, Popover, NumberInput, Show, RadioCard, CheckboxGroup, createListCollection, Select, Center, Heading } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import React__default, { createContext, useContext, useState, useEffect, useRef } from 'react';
 import { LuX, LuCheck, LuChevronRight, LuChevronDown } from 'react-icons/lu';
-import { MdOutlineSort, MdFilterAlt, MdSearch, MdClose, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdOutlineChecklist } from 'react-icons/md';
+import { MdOutlineSort, MdFilterAlt, MdSearch, MdClose, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdClear, MdOutlineChecklist, MdDateRange } from 'react-icons/md';
 import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
 import { BiDownArrow, BiUpArrow, BiError } from 'react-icons/bi';
 import { CgClose } from 'react-icons/cg';
 import Dayzed from '@bsol-oss/dayzed-react19';
 import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
-import { IoMdEye, IoMdCheckbox } from 'react-icons/io';
+import { IoMdEye, IoMdCheckbox, IoMdClock } from 'react-icons/io';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { bind, bindAll } from 'bind-event-listener';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
@@ -2437,7 +2437,7 @@ function ColumnCard({ columnId }) {
             onDrop: () => setDragging(false), // NEW
         });
     }, [columnId, table]);
-    return (jsxs(Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsx(Flex, { alignItems: "center", padding: "0", cursor: "grab", children: jsx(FaGripLinesVertical, { color: "gray.400" }) }), jsx(Flex, { justifyContent: "space-between", alignItems: "center", children: jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
+    return (jsxs(Grid, { ref: ref, templateColumns: "auto 1fr", gap: "0.5rem", alignItems: "center", style: dragging ? { opacity: 0.4 } : {}, children: [jsx(Flex, { alignItems: "center", padding: "0", cursor: "grab", children: jsx(FaGripLinesVertical, { color: "colorPalette.400" }) }), jsx(Flex, { justifyContent: "space-between", alignItems: "center", children: jsx(CheckboxCard, { variant: "surface", label: displayName, checked: column.getIsVisible(), onChange: column.getToggleVisibilityHandler() }) })] }));
 }
 function CardContainer({ location, children }) {
     const ref = useRef(null);
@@ -2569,7 +2569,7 @@ const RecordDisplay = ({ object, boxProps, translate, prefix = "", }) => {
         return jsx(Fragment, { children: "null" });
     }
     return (jsx(Grid, { rowGap: 1, padding: 1, overflow: "auto", ...boxProps, children: Object.entries(object).map(([field, value]) => {
-            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "gray.400", children: getColumn({ field }) }), typeof value === "object" ? (jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsx(Text, { children: JSON.stringify(value) }))] }, field));
+            return (jsxs(Grid, { columnGap: 2, gridTemplateColumns: "auto 1fr", children: [jsx(Text, { color: "colorPalette.400", children: getColumn({ field }) }), typeof value === "object" ? (jsx(RecordDisplay, { object: value, prefix: `${prefix}${field}.`, translate: translate })) : (jsx(Text, { children: JSON.stringify(value) }))] }, field));
         }) }));
 };
 
@@ -2619,7 +2619,7 @@ const CellRenderer = ({ cell }) => {
                         paddingY: 2,
                     }, object: value })] }, cell.id));
     }
-    return (jsxs(Box, { gridColumn, gridRow, children: [jsx(Box, { color: 'gray.400', children: getLabel({ columnId: cell.column.id }) }), jsx(Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
+    return (jsxs(Box, { gridColumn, gridRow, children: [jsx(Box, { color: "colorPalette.400", children: getLabel({ columnId: cell.column.id }) }), jsx(Box, { wordBreak: "break-word", textOverflow: "ellipsis", overflow: "hidden", children: `${formatValue(cell.getValue())}` })] }, cell.id));
 };
 const DataDisplay = ({ variant = "" }) => {
     const { table, translate } = useDataTableContext();
@@ -2975,13 +2975,11 @@ const TableFilterTags = () => {
         }) }));
 };
 
-const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, }) => {
+const TableControls = ({ fitTableWidth = false, fitTableHeight = false, children = jsx(Fragment, {}), showGlobalFilter = false, showFilter = false, showFilterName = false, showFilterTags = false, showReload = false, showPagination = true, showPageSizeControl = true, showPageCountText = true, showView = true, filterOptions = [], extraItems = jsx(Fragment, {}), loading = false, hasError = false, gridProps = {}, }) => {
     const { translate } = useDataTableContext();
-    return (jsxs(Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", children: [jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsxs(Flex, { justifyContent: "space-between", children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { content: translate.t("has_error"), children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsx(Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
+    return (jsxs(Grid, { templateRows: "auto 1fr", width: fitTableWidth ? "fit-content" : "100%", height: fitTableHeight ? "fit-content" : "100%", gap: "0.5rem", ...gridProps, children: [jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsxs(Flex, { justifyContent: "space-between", children: [jsx(Box, { children: showView && jsx(ViewDialog, { icon: jsx(MdOutlineViewColumn, {}) }) }), jsxs(Flex, { gap: "0.5rem", alignItems: "center", justifySelf: "end", children: [loading && jsx(Spinner, { size: "sm" }), hasError && (jsx(Tooltip, { content: translate.t("has_error"), children: jsx(Icon, { as: BsExclamationCircleFill, color: "red.400" }) })), showGlobalFilter && jsx(GlobalFilter, {}), showFilter && jsx(FilterDialog, {}), showReload && jsx(ReloadButton, {}), extraItems] })] }), filterOptions.length > 0 && (jsx(Flex, { flexFlow: "column", gap: "0.5rem", children: filterOptions.map((column) => {
                             return (jsxs(Flex, { alignItems: "center", flexFlow: "wrap", gap: "0.5rem", children: [showFilterName && jsxs(Text, { children: [column, ":"] }), jsx(FilterOptions, { column: column })] }, column));
-                        }) })), showFilterTags && (jsx(Flex, { children: jsx(TableFilterTags, {}) }))] }), jsx(Grid, { overflow: "auto", backgroundColor: "gray.50", _dark: {
-                    backgroundColor: "gray.900",
-                }, children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxs(Flex, { justifyContent: "space-between", children: [jsxs(Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && (jsxs(Flex, { children: [jsx(Text, { paddingRight: "0.5rem", children: translate.t("rowcount.total") }), jsx(RowCountText, {})] }))] }), jsx(Box, { justifySelf: "end", children: showPagination && jsx(Pagination, {}) })] }))] }));
+                        }) })), showFilterTags && (jsx(Flex, { children: jsx(TableFilterTags, {}) }))] }), jsx(Grid, { overflow: "auto", bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, children: children }), (showPageSizeControl || showPageCountText || showPagination) && (jsxs(Flex, { justifyContent: "space-between", children: [jsxs(Flex, { gap: "1rem", alignItems: "center", children: [showPageSizeControl && jsx(PageSizeControl, {}), showPageCountText && (jsxs(Flex, { children: [jsx(Text, { paddingRight: "0.5rem", children: translate.t("rowcount.total") }), jsx(RowCountText, {})] }))] }), jsx(Box, { justifySelf: "end", children: showPagination && jsx(Pagination, {}) })] }))] }));
 };
 
 const EmptyState = React.forwardRef(function EmptyState(props, ref) {
@@ -2995,7 +2993,7 @@ const Table = ({ children, emptyComponent = EmptyResult, canResize = true, ...pr
     if (table.getRowModel().rows.length <= 0) {
         return emptyComponent;
     }
-    return (jsx(Table$1.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, display: "grid", alignContent: "start", overflowY: "auto", ...props, children: children }));
+    return (jsx(Table$1.Root, { stickyHeader: true, variant: "outline", width: canResize ? table.getCenterTotalSize() : undefined, display: "grid", alignContent: "start", overflowY: "auto", bg: { base: "colorPalette.50", _dark: "colorPalette.950" }, ...props, children: children }));
 };
 
 const Checkbox = React.forwardRef(function Checkbox(props, ref) {
@@ -3059,7 +3057,7 @@ const TableRowSelector = ({ index, row, }) => {
             onCheckedChange: row.getToggleSelectedHandler() }) }));
 };
 
-const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, showSelector = false, alwaysShowSelector = true, }) => {
+const TableFooter = ({ showSelector = false, alwaysShowSelector = true, }) => {
     const table = useDataTableContext().table;
     const SELECTION_BOX_WIDTH = 20;
     const [hoveredCheckBox, setHoveredCheckBox] = useState(false);
@@ -3078,41 +3076,11 @@ const TableFooter = ({ pinnedBgColor = { light: "gray.50", dark: "gray.700" }, s
         }
         return false;
     };
-    const getThProps = (header) => {
-        const thProps = header.column.getIsPinned()
-            ? {
-                left: showSelector
-                    ? `${header.getStart("left") + SELECTION_BOX_WIDTH + table.getDensityValue() * 2}px`
-                    : `${header.getStart("left") + table.getDensityValue() * 2}px`,
-                background: pinnedBgColor.light,
-                position: "sticky",
-                zIndex: 1,
-                _dark: {
-                    backgroundColor: pinnedBgColor.dark,
-                },
-            }
-            : {};
-        return thProps;
-    };
-    return (jsx(Table$1.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Table$1.Row, { display: "flex", children: [showSelector && (jsxs(Table$1.Header
-                // styling resize and pinning start
-                , { 
-                    // styling resize and pinning start
-                    padding: `${table.getDensityValue()}px`, ...(table.getIsSomeColumnsPinned("left")
-                        ? {
-                            left: `0px`,
-                            backgroundColor: pinnedBgColor.light,
-                            position: "sticky",
-                            zIndex: 1,
-                            _dark: { backgroundColor: pinnedBgColor.dark },
-                        }
-                        : {}), 
-                    // styling resize and pinning end
-                    onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsx(Box, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
+    return (jsx(Table$1.Footer, { children: table.getFooterGroups().map((footerGroup) => (jsxs(Table$1.Row, { display: "flex", children: [showSelector && (jsxs(Table$1.Header, { padding: `${table.getDensityValue()}px`, onMouseEnter: () => handleRowHover(true), onMouseLeave: () => handleRowHover(false), display: "grid", children: [isCheckBoxVisible() && (jsx(Box, { margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", children: jsx(Checkbox, { width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px`, isChecked: table.getIsAllRowsSelected(),
                                 // indeterminate: table.getIsSomeRowsSelected(),
                                 onChange: table.getToggleAllRowsSelectedHandler() }) })), !isCheckBoxVisible() && (jsx(Box, { as: "span", margin: "0rem", display: "grid", justifyItems: "center", alignItems: "center", width: `${SELECTION_BOX_WIDTH}px`, height: `${SELECTION_BOX_WIDTH}px` }))] })), footerGroup.headers.map((header) => (jsx(Table$1.Cell, { padding: "0", columnSpan: `${header.colSpan}`, 
                     // styling resize and pinning start
-                    maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: "grid", ...getThProps(header), children: jsx(MenuRoot$1, { children: jsx(MenuTrigger$1, { asChild: true, children: jsx(Box, { padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", _hover: { backgroundColor: "gray.100" }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
+                    maxWidth: `${header.getSize()}px`, width: `${header.getSize()}px`, display: "grid", children: jsx(MenuRoot$1, { children: jsx(MenuTrigger$1, { asChild: true, children: jsx(Box, { padding: `${table.getDensityValue()}px`, display: "flex", alignItems: "center", justifyContent: "start", borderRadius: "0rem", children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
                                             ? null
                                             : flexRender(header.column.columnDef.footer, header.getContext()), jsx(Box, { children: header.column.getCanSort() && (jsxs(Fragment, { children: [header.column.getIsSorted() === false && (
                                                     // <UpDownIcon />
@@ -3138,7 +3106,7 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
         position: "sticky",
         top: 0,
     };
-    return (jsx(Table$1.Header, { ...(isSticky ? stickyProps : {}), ...tableHeaderProps, children: table.getHeaderGroups().map((headerGroup) => (jsxs(Table$1.Row, { display: "flex", ...tableRowProps, children: [showSelector && (jsx(Table$1.ColumnHeader, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
+    return (jsx(Table$1.Header, { ...(isSticky ? stickyProps : {}), bgColor: "transparent", ...tableHeaderProps, children: table.getHeaderGroups().map((headerGroup) => (jsxs(Table$1.Row, { display: "flex", bgColor: "transparent", ...tableRowProps, children: [showSelector && (jsx(Table$1.ColumnHeader, { padding: `${table.getDensityValue()}px`, display: "grid", color: {
                         base: "colorPalette.900",
                         _dark: "colorPalette.100",
                     },
@@ -3156,10 +3124,20 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                             base: "colorPalette.800",
                             _dark: "colorPalette.200",
                         },
-                        bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsx(Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", _hover: {
-                                                backgroundColor: "gray.100",
-                                                _dark: {
-                                                    backgroundColor: "gray.700",
+                        bg: { base: "colorPalette.100", _dark: "colorPalette.900" }, ...getThProps(header), children: [jsxs(MenuRoot, { children: [jsx(MenuTrigger, { asChild: true, children: jsx(Flex, { padding: `${table.getDensityValue()}px`, alignItems: "center", justifyContent: "start", borderRadius: "0rem", overflow: "auto", color: {
+                                                base: "colorPalette.800",
+                                                _dark: "colorPalette.200",
+                                                _hover: {
+                                                    base: "colorPalette.700",
+                                                    _dark: "colorPalette.300",
+                                                },
+                                            },
+                                            bg: {
+                                                base: "colorPalette.100",
+                                                _dark: "colorPalette.900",
+                                                _hover: {
+                                                    base: "colorPalette.200",
+                                                    _dark: "colorPalette.800",
                                                 },
                                             }, children: jsxs(Flex, { gap: "0.5rem", alignItems: "center", children: [header.isPlaceholder
                                                         ? null
@@ -3187,10 +3165,12 @@ const TableHeader = ({ canResize = true, showSelector = false, isSticky = true,
                                                                 });
                                                             }, children: [jsx(GrDescend, {}), "Sort Descending"] }) }), header.column.getIsSorted() && (jsx(MenuItem, { asChild: true, value: "sort-descend", children: jsxs(Button, { variant: "ghost", onClick: () => {
                                                                 header.column.clearSorting();
-                                                            }, children: [jsx(MdClear, {}), "Clear Sorting"] }) }))] }))] })] }), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing() ? "gray.700" : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
+                                                            }, children: [jsx(MdClear, {}), "Clear Sorting"] }) }))] }))] })] }), canResize && (jsx(Box, { borderRight: "0.2rem solid", borderRightColor: header.column.getIsResizing()
+                                    ? "colorPalette.700"
+                                    : "transparent", position: "relative", right: "0.1rem", width: "2px", height: "100%", userSelect: "none", style: { touchAction: "none" }, _hover: {
                                     borderRightColor: header.column.getIsResizing()
-                                        ? "gray.700"
-                                        : "gray.400",
+                                        ? "colorPalette.700"
+                                        : "colorPalette.400",
                                 }, ...resizeProps }))] }, `chakra-table-header-${header.id}`));
                 })] }, `chakra-table-headergroup-${headerGroup.id}`))) }));
 };
@@ -3658,6 +3638,18 @@ const BooleanPicker = ({ schema, column, prefix }) => {
                 } }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
+const CustomInput = ({ column, schema, prefix }) => {
+    const formContext = useFormContext();
+    const { inputRender } = schema;
+    return (inputRender &&
+        inputRender({
+            column,
+            schema,
+            prefix,
+            formContext,
+        }));
+};
+
 const monthNamesShort = [
     "Jan",
     "Feb",
@@ -3755,9 +3747,9 @@ const DatePicker = ({ column, schema, prefix }) => {
     const selectedDate = watch(colLabel);
     const formatedDate = dayjs(selectedDate).format("YYYY-MM-DD");
     return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { size: "sm", variant: "outline", onClick: () => {
+        gridRow, children: [jsxs(PopoverRoot, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(PopoverTrigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
                                 setOpen(true);
-                            }, children: selectedDate !== undefined ? `${formatedDate}` : "" }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
+                            }, justifyContent: "start", children: [jsx(MdDateRange, {}), selectedDate !== undefined ? `${formatedDate}` : ""] }) }), jsx(PopoverContent, { children: jsxs(PopoverBody, { children: [jsx(PopoverTitle, {}), jsx(DatePicker$1
                                 // @ts-expect-error TODO: find appropriate types
                                 , { 
                                     // @ts-expect-error TODO: find appropriate types
@@ -3782,7 +3774,7 @@ function filterArray(array, searchTerm) {
 const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { translate } = useSchemaContext();
-    const { required } = schema;
+    const { required, variant } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { gridColumn, gridRow, renderDisplay } = schema;
     const [searchText, setSearchText] = useState();
@@ -3799,6 +3791,22 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
         setSearchText(event.target.value);
         setLimit(10);
     };
+    if (variant === "radio") {
+        return (jsx(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+            gridRow, children: jsx(RadioGroup$1.Root, { defaultValue: "1", children: jsx(HStack, { gap: "6", children: filterArray(dataList, searchText ?? "").map((item) => {
+                        return (jsxs(RadioGroup$1.Item, { onClick: () => {
+                                if (!isMultiple) {
+                                    setOpenSearchResult(false);
+                                    setValue(colLabel, item);
+                                    return;
+                                }
+                                const newSet = new Set([...(watchEnums ?? []), item]);
+                                setValue(colLabel, [...newSet]);
+                            }, value: item, children: [jsx(RadioGroup$1.ItemHiddenInput, {}), jsx(RadioGroup$1.ItemIndicator, {}), jsx(RadioGroup$1.ItemText, { children: !!renderDisplay === true
+                                        ? renderDisplay(item)
+                                        : translate.t(removeIndex(`${colLabel}.${item}`)) })] }, `${colLabel}-${item}`));
+                    }) }) }) }));
+    }
     return (jsxs(Field, { label: `${translate.t(removeIndex(`${column}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
         gridRow, children: [isMultiple && (jsxs(Flex, { flexFlow: "wrap", gap: 1, children: [watchEnums.map((enumValue) => {
                         const item = enumValue;
@@ -3814,7 +3822,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
                             setOpenSearchResult(true);
                         }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: watchEnum === undefined
+                }, justifyContent: "start", children: watchEnum === undefined
                     ? ""
                     : translate.t(removeIndex(`${colLabel}.${watchEnum}`)) })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(`${column}.type_to_search`), onChange: (event) => {
                                         onSearchChange(event);
@@ -3831,7 +3839,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, }) => {
                                                         }
                                                         const newSet = new Set([...(watchEnums ?? []), item]);
                                                         setValue(colLabel, [...newSet]);
-                                                    }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                    }, ...(selected ? { color: "colorPalette.400/50" } : {}), children: !!renderDisplay === true
                                                         ? renderDisplay(item)
                                                         : translate.t(removeIndex(`${colLabel}.${item}`)) }, `${colLabel}-${item}`));
                                             }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Fragment, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] })] }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
@@ -4186,7 +4194,7 @@ const FileDropzone = ({ children = undefined, gridProps = {}, onDrop = () => { }
         const filesArray = [...event.target.files];
         onDrop({ files: filesArray });
     };
-    return (jsxs(Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "gray.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxs(Fragment, { children: [jsx(Flex, { children: placeholder }), jsx(Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
+    return (jsxs(Grid, { ...getColor(isDraggedOver), ref: ref, cursor: "pointer", onClick: handleClick, borderStyle: "dashed", borderColor: "colorPalette.400", alignContent: "center", justifyContent: "center", borderWidth: 1, borderRadius: 4, ...gridProps, children: [children, !!children === false && (jsxs(Fragment, { children: [jsx(Flex, { children: placeholder }), jsx(Input, { type: "file", multiple: true, style: { display: "none" }, ref: fileInput, onChange: handleChange })] }))] }));
 };
 
 const FilePicker = ({ column, schema, prefix }) => {
@@ -4204,7 +4212,7 @@ const FilePicker = ({ column, schema, prefix }) => {
                                 setValue(column, currentFiles.filter(({ name }) => {
                                     return name !== file.name;
                                 }));
-                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
+                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [file.type.startsWith("image/") && (jsx(Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
                 }) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
 };
 
@@ -4337,7 +4345,7 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                             setOpenSearchResult(true);
                         }, children: translate.t(removeIndex(`${colLabel}.add_more`)) })] })), !isMultiple && (jsx(Button, { variant: "outline", onClick: () => {
                     setOpenSearchResult(true);
-                }, children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
+                }, justifyContent: "start", children: getPickedValue() })), jsxs(PopoverRoot, { open: openSearchResult, onOpenChange: (e) => setOpenSearchResult(e.open), closeOnInteractOutside: true, initialFocusEl: () => ref.current, positioning: { placement: "bottom-start", strategy: "fixed" }, children: [jsx(PopoverTrigger, {}), jsx(PopoverContent, { children: jsxs(PopoverBody, { display: "grid", gap: 1, children: [jsx(Input, { placeholder: translate.t(removeIndex(`${colLabel}.typeToSearch`)), onChange: (event) => {
                                         onSearchChange(event);
                                         setOpenSearchResult(true);
                                     }, autoComplete: "off", ref: ref }), jsx(PopoverTitle, {}), (searchText?.length ?? 0) > 0 && (jsxs(Fragment, { children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), (isFetching || isLoading || isPending) && jsx(Spinner, {}), isError && (jsx(Icon, { color: "red.400", children: jsx(BiError, {}) })), jsx(Text, { justifySelf: "center", children: `${translate.t(removeIndex(`${colLabel}.total`))} ${count}, ${translate.t(removeIndex(`${colLabel}.showing`))} ${limit}` }), jsxs(Grid, { gridTemplateColumns: "repeat(auto-fit, minmax(15rem, 1fr))", overflow: "auto", maxHeight: "50vh", children: [jsx(Flex, { flexFlow: "column wrap", children: 
@@ -4357,7 +4365,9 @@ const IdPicker = ({ column, schema, prefix, isMultiple = false, }) => {
                                                                     item[column_ref],
                                                                 ]);
                                                                 setValue(colLabel, [...newSet]);
-                                                            }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected ? { color: "gray.400/50" } : {}), children: !!renderDisplay === true
+                                                            }, opacity: 0.7, _hover: { opacity: 1 }, ...(selected
+                                                                ? { color: "colorPalette.400/50" }
+                                                                : {}), children: !!renderDisplay === true
                                                                 ? renderDisplay(item)
                                                                 : item[display_column] }, item[column_ref]));
                                                     }) }), isDirty && (jsx(Fragment, { children: dataList.length <= 0 && (jsx(Text, { children: translate.t(removeIndex(`${colLabel}.empty_search_result`)) })) }))] }), jsx(PaginationRoot, { justifySelf: "center", count: count, pageSize: 10, defaultPage: 1, page: page + 1, onPageChange: (e) => setPage(e.page - 1), children: jsxs(HStack, { gap: "4", children: [jsx(PaginationPrevTrigger, {}), count > 0 && jsx(PaginationPageText, {}), jsx(PaginationNextTrigger, {})] }) })] }))] }) })] }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
@@ -4557,9 +4567,115 @@ const TagPicker = ({ column, schema, prefix }) => {
             }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
 };
 
+function TimePicker$1({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel = {
+    am: "am",
+    pm: "pm",
+}, onChange = () => { }, }) {
+    const hours = Array.from({ length: 12 }, (_, i) => {
+        const hour = i + 1;
+        return hour.toString().padStart(2, "0");
+    });
+    const minutes = Array.from({ length: 60 }, (_, i) => {
+        return i.toString().padStart(2, "0");
+    });
+    const hoursCollection = createListCollection({
+        items: hours.map((hour) => ({
+            value: hour,
+            label: hour,
+        })),
+    });
+    const minutesCollection = createListCollection({
+        items: minutes.map((hour) => ({
+            value: hour,
+            label: hour,
+        })),
+    });
+    const meridiemsCollection = createListCollection({
+        items: ["am", "pm"].map((hour) => ({
+            value: hour,
+            label: meridiemLabel[hour] ?? hour,
+        })),
+    });
+    return (jsxs(Grid, { templateColumns: "auto  auto", gap: "4", children: [jsxs(Flex, { justifyContent: "center", alignItems: "center", gap: "2", children: [jsxs(Select.Root, { value: [`${hour.toString().padStart(2, "0")}`], onValueChange: (e) => {
+                            setHour(parseInt(e.value[0]));
+                            onChange({ hour: parseInt(e.value[0]), minute, meridiem });
+                        }, collection: hoursCollection, positioning: { sameWidth: true, placement: "bottom" }, children: [jsx(Select.HiddenSelect, {}), jsx(Select.Control, { children: jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: "Hour" }) }) }), jsx(Select.Positioner, { children: jsx(Select.Content, { width: "full", children: hoursCollection.items.map(({ value: hour }) => (jsxs(Select.Item, { item: hour, children: [hour, jsx(Select.ItemIndicator, {})] }, hour))) }) })] }), jsx(Text, { children: ":" }), jsxs(Select.Root, { value: [`${minute.toString().padStart(2, "0")}`], onValueChange: (e) => {
+                            setMinute(parseInt(e.value[0]));
+                            onChange({ hour, minute: parseInt(e.value[0]), meridiem });
+                        }, collection: minutesCollection, positioning: { sameWidth: true, placement: "bottom" }, children: [jsx(Select.HiddenSelect, {}), jsx(Select.Control, { children: jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: "Minute" }) }) }), jsx(Select.Positioner, { children: jsx(Select.Content, { width: "full", children: minutes.map((minute) => (jsxs(Select.Item, { item: minute, children: [minute, jsx(Select.ItemIndicator, {})] }, minute))) }) })] })] }), jsxs(Select.Root, { value: [meridiem], onValueChange: (e) => {
+                    setMeridiem(e.value[0]);
+                    onChange({ hour, minute, meridiem: e.value[0] });
+                }, collection: meridiemsCollection, positioning: { sameWidth: true, placement: "bottom" }, children: [jsx(Select.HiddenSelect, {}), jsx(Select.Control, { children: jsx(Select.Trigger, { children: jsx(Select.ValueText, { placeholder: "am/pm" }) }) }), jsx(Select.Positioner, { children: jsx(Select.Content, { width: "full", children: meridiemsCollection.items.map(({ value: hour, label }) => (jsxs(Select.Item, { item: hour, children: [label, jsx(Select.ItemIndicator, {})] }, hour))) }) })] })] }));
+}
+
+const TimePicker = ({ column, schema, prefix }) => {
+    const { watch, formState: { errors }, setValue, } = useFormContext();
+    const { translate } = useSchemaContext();
+    const { required, gridColumn, gridRow } = schema;
+    const isRequired = required?.some((columnId) => columnId === column);
+    const colLabel = `${prefix}${column}`;
+    const [open, setOpen] = useState(false);
+    const value = watch(colLabel);
+    const formatedTime = dayjs(value).format("hh:mm A");
+    // Parse the initial time parts from the ISO time string (HH:mm:ss)
+    const parseTime = (isoTime) => {
+        if (!isoTime)
+            return { hour: 12, minute: 0, meridiem: "am" };
+        const parsed = dayjs(isoTime);
+        if (!parsed.isValid())
+            return { hour: 12, minute: 0, meridiem: "am" };
+        let hour = parsed.hour();
+        const minute = parsed.minute();
+        const meridiem = hour >= 12 ? "pm" : "am";
+        if (hour === 0)
+            hour = 12;
+        else if (hour > 12)
+            hour -= 12;
+        return { hour, minute, meridiem };
+    };
+    const initialTime = parseTime(value);
+    const [hour, setHour] = useState(initialTime.hour);
+    const [minute, setMinute] = useState(initialTime.minute);
+    const [meridiem, setMeridiem] = useState(initialTime.meridiem);
+    useEffect(() => {
+        const { hour, minute, meridiem } = parseTime(value);
+        setHour(hour);
+        setMinute(minute);
+        setMeridiem(meridiem);
+    }, [value]);
+    // Convert hour, minute, meridiem to 24-hour ISO time string
+    const toIsoTime = (hour, minute, meridiem) => {
+        let h = hour;
+        if (meridiem === "am" && hour === 12)
+            h = 0;
+        else if (meridiem === "pm" && hour < 12)
+            h = hour + 12;
+        return dayjs().hour(h).minute(minute).second(0).toISOString();
+    };
+    // Handle changes to time parts
+    const handleTimeChange = ({ hour: newHour, minute: newMinute, meridiem: newMeridiem, }) => {
+        setHour(newHour);
+        setMinute(newMinute);
+        setMeridiem(newMeridiem);
+        const isoTime = toIsoTime(newHour, newMinute, newMeridiem);
+        setValue(colLabel, isoTime, { shouldValidate: true, shouldDirty: true });
+    };
+    const containerRef = useRef(null);
+    return (jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, alignItems: "stretch", gridColumn,
+        gridRow, children: [jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
+                                setOpen(true);
+                            }, justifyContent: "start", children: [jsx(IoMdClock, {}), value !== undefined ? `${formatedTime}` : ""] }) }), jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { ref: containerRef, children: jsx(Popover.Body, { children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, meridiemLabel: {
+                                            am: translate.t(removeIndex(`${colLabel}.am`)),
+                                            pm: translate.t(removeIndex(`${colLabel}.pm`)),
+                                        } }) }) }) }) })] }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+};
+
 const SchemaRenderer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
+    if (variant === "custom-input") {
+        return jsx(CustomInput, { schema: colSchema, prefix, column });
+    }
     if (type === "string") {
         if ((schema.enum ?? []).length > 0) {
             return jsx(EnumPicker, { schema: colSchema, prefix, column });
@@ -4571,6 +4687,9 @@ const SchemaRenderer = ({ schema, prefix, column, }) => {
         if (variant === "date-picker") {
             return jsx(DatePicker, { schema: colSchema, prefix, column });
         }
+        if (variant === "time-picker") {
+            return jsx(TimePicker, { schema: colSchema, prefix, column });
+        }
         return jsx(StringInputField, { schema: colSchema, prefix, column });
     }
     if (type === "number" || type === "integer") {
@@ -4674,22 +4793,15 @@ const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
-    const { setValue, formState: { errors }, watch, } = useFormContext();
+    const { watch } = useFormContext();
     const { translate } = useSchemaContext();
     const { required, gridColumn, gridRow } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const currentFiles = (watch(column) ?? []);
     const colLabel = `${prefix}${column}`;
-    return (jsxs(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: [jsx(FileDropzone, { onDrop: ({ files }) => {
-                    const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
-                    setValue(colLabel, [...currentFiles, ...newFiles]);
-                }, placeholder: translate.t(`${colLabel}.fileDropzone`) }), jsx(Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
-                    return (jsx(Card.Root, { variant: "subtle", children: jsxs(Card.Body, { gap: "2", cursor: "pointer", onClick: () => {
-                                setValue(column, currentFiles.filter(({ name }) => {
-                                    return name !== file.name;
-                                }));
-                            }, display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [jsx(Box, { children: file.name }), jsx(TiDeleteOutline, {})] }) }, file.name));
-                }) }), errors[`${colLabel}`] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }));
+    return (jsx(Field, { label: `${translate.t(`${colLabel}.field_label`)}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", display: "grid", gridTemplateRows: "auto 1fr auto", alignItems: "stretch", children: jsx(Flex, { flexFlow: "column", gap: 1, children: currentFiles.map((file) => {
+                return (jsx(Card.Root, { variant: "subtle", children: jsxs(Card.Body, { gap: "2", display: "flex", flexFlow: "row", alignItems: "center", padding: "2", children: [file.type.startsWith("image/") && (jsx(Image, { src: URL.createObjectURL(file), alt: file.name, boxSize: "50px", objectFit: "cover", borderRadius: "md", marginRight: "2" })), jsx(Box, { children: file.name })] }) }, file.name));
+            }) }) }));
 };
 
 const IdViewer = ({ column, schema, prefix, isMultiple = false, }) => {
@@ -4898,9 +5010,24 @@ const StringViewer = ({ column, schema, prefix, }) => {
     return (jsx(Fragment, { children: jsxs(Field, { label: `${translate.t(removeIndex(`${colLabel}.field_label`))}`, required: isRequired, gridColumn: gridColumn ?? "span 4", gridRow: gridRow ?? "span 1", children: [jsx(Text, { children: value }), errors[colLabel] && (jsx(Text, { color: "red.400", children: translate.t(removeIndex(`${colLabel}.field_required`)) }))] }) }));
 };
 
+const CustomViewer = ({ column, schema, prefix }) => {
+    const formContext = useFormContext();
+    const { inputViewerRender } = schema;
+    return (inputViewerRender &&
+        inputViewerRender({
+            column,
+            schema,
+            prefix,
+            formContext,
+        }));
+};
+
 const SchemaViewer = ({ schema, prefix, column, }) => {
     const colSchema = schema;
     const { type, variant, properties: innerProperties, foreign_key, items, } = schema;
+    if (variant === "custom-input") {
+        return jsx(CustomViewer, { schema: colSchema, prefix, column });
+    }
     if (type === "string") {
         if ((schema.enum ?? []).length > 0) {
             return jsx(EnumViewer, { schema: colSchema, prefix, column });

package/dist/types/components/DataTable/controls/TableControls.d.ts

@@ -1,3 +1,4 @@
+import { GridProps } from "@chakra-ui/react";
 import { ReactNode } from "react";
 export interface TableControlsProps {
     totalText?: string;
@@ -17,5 +18,6 @@ export interface TableControlsProps {
     extraItems?: ReactNode;
     loading?: boolean;
     hasError?: boolean;
+    gridProps?: GridProps;
 }
-export declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableControls: ({ fitTableWidth, fitTableHeight, children, showGlobalFilter, showFilter, showFilterName, showFilterTags, showReload, showPagination, showPageSizeControl, showPageCountText, showView, filterOptions, extraItems, loading, hasError, gridProps, }: TableControlsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DataTable/display/TableFooter.d.ts

@@ -1,9 +1,5 @@
 export interface TableFooterProps {
-    pinnedBgColor?: {
-        light: string;
-        dark: string;
-    };
     showSelector?: boolean;
     alwaysShowSelector?: boolean;
 }
-export declare const TableFooter: ({ pinnedBgColor, showSelector, alwaysShowSelector, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableFooter: ({ showSelector, alwaysShowSelector, }: TableFooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/core/FormRoot.d.ts

@@ -4,8 +4,9 @@ import { JSONSchema7 } from "json-schema";
 import { Dispatch, ReactNode, SetStateAction } from "react";
 import { FieldValues, SubmitHandler, UseFormReturn } from "react-hook-form";
 import { UseTranslationResponse } from "react-i18next";
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
 export interface FormRootProps<TData extends FieldValues> {
-    schema: JSONSchema7;
+    schema: CustomJSONSchema7;
     serverUrl: string;
     requestUrl?: string;
     idMap: Record<string, object>;

package/dist/types/components/Form/components/fields/CustomInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface DatePickerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const CustomInput: ({ column, schema, prefix }: DatePickerProps) => import("react").ReactNode;

package/dist/types/components/Form/components/fields/TimePicker.d.ts

@@ -0,0 +1,7 @@
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface DatePickerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const TimePicker: ({ column, schema, prefix }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Form/components/types/CustomJSONSchema7.d.ts

@@ -1,12 +1,25 @@
 import { JSONSchema7 } from "json-schema";
 import { ReactNode } from "react";
 import { ForeignKeyProps } from "../fields/StringInputField";
+import { UseFormReturn } from "react-hook-form";
 export interface CustomJSONSchema7 extends JSONSchema7 {
     gridColumn?: string;
     gridRow?: string;
     foreign_key?: ForeignKeyProps;
     variant?: string;
-    renderDisplay: (item: unknown) => ReactNode;
+    renderDisplay?: (item: unknown) => ReactNode;
+    inputRender?: (props: {
+        column: string;
+        schema: CustomJSONSchema7;
+        prefix: string;
+        formContext: UseFormReturn;
+    }) => ReactNode;
+    inputViewerRender?: (props: {
+        column: string;
+        schema: CustomJSONSchema7;
+        prefix: string;
+        formContext: UseFormReturn;
+    }) => ReactNode;
 }
 export interface TagPickerProps {
     column: string;

package/dist/types/components/Form/components/viewers/CustomViewer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CustomJSONSchema7 } from "../types/CustomJSONSchema7";
+export interface DatePickerProps {
+    column: string;
+    schema: CustomJSONSchema7;
+    prefix: string;
+}
+export declare const CustomViewer: ({ column, schema, prefix }: DatePickerProps) => import("react").ReactNode;

package/dist/types/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,19 @@
+interface TimePickerProps {
+    hour: number;
+    setHour: (hour: number) => void;
+    minute: number;
+    setMinute: (minute: number) => void;
+    meridiem: "am" | "pm";
+    setMeridiem: (meridiem: "am" | "pm") => void;
+    onChange?: (newValue: {
+        hour: number;
+        minute: number;
+        meridiem: "am" | "pm";
+    }) => void;
+    meridiemLabel?: {
+        am: string;
+        pm: string;
+    };
+}
+export declare function TimePicker({ hour, setHour, minute, setMinute, meridiem, setMeridiem, meridiemLabel, onChange, }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "12.0.0-beta.20",
+  "version": "12.0.0-beta.22",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",