@bsol-oss/react-datatable5 13.0.1-beta.0 → 13.0.1-beta.10

package/dist/index.mjs

@@ -1,12 +1,12 @@
 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, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Icon, EmptyState as EmptyState$2, VStack, List, Table as Table$1, Checkbox as Checkbox$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Tag as Tag$1, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, Skeleton, NumberInput, Show, RadioCard, CheckboxGroup, InputGroup as InputGroup$1, Center, Heading, Stack } 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, CheckboxCard as CheckboxCard$1, Input, Menu, createRecipeContext, createContext as createContext$1, Pagination as Pagination$1, usePaginationContext, Tooltip as Tooltip$1, Group, InputElement, Icon, EmptyState as EmptyState$2, VStack, List, Table as Table$1, Checkbox as Checkbox$1, Card, MenuRoot as MenuRoot$1, MenuTrigger as MenuTrigger$1, Clipboard, Badge, Link, Tag as Tag$1, Image, Alert, Field as Field$1, Popover, useFilter, useListCollection, Combobox, Tabs, useCombobox, Show, Skeleton, NumberInput, RadioCard, CheckboxGroup, InputGroup as InputGroup$1, Select, Center, Heading, Stack } from '@chakra-ui/react';
 import { AiOutlineColumnWidth } from 'react-icons/ai';
 import * as React from 'react';
 import { createContext, useContext, useState, useMemo, useCallback, useEffect, useRef, forwardRef } from 'react';
 import { LuX, LuCheck, LuChevronRight, LuCopy, LuExternalLink, LuSearch, LuImage, LuFile } from 'react-icons/lu';
 import { MdOutlineSort, MdFilterAlt, MdSearch, MdOutlineChecklist, MdClear, MdOutlineViewColumn, MdFilterListAlt, MdPushPin, MdCancel, MdDateRange } from 'react-icons/md';
-import { FaUpDown, FaGripLinesVertical, FaTrash } from 'react-icons/fa6';
-import { BiDownArrow, BiUpArrow, BiError } from 'react-icons/bi';
+import { FaUpDown, FaGripLinesVertical } from 'react-icons/fa6';
+import { BiDownArrow, BiUpArrow, BiX, BiError } from 'react-icons/bi';
 import { CgClose, CgTrash } from 'react-icons/cg';
 import { HiMiniEllipsisHorizontal, HiChevronLeft, HiChevronRight } from 'react-icons/hi2';
 import { IoMdEye, IoMdCheckbox, IoMdClock } from 'react-icons/io';
@@ -28,10 +28,10 @@ import { FormProvider, useFormContext, useForm as useForm$1 } from 'react-hook-f
 import Ajv from 'ajv';
 import addFormats from 'ajv-formats';
 import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import timezone from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
 import { TiDeleteOutline } from 'react-icons/ti';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { rankItem } from '@tanstack/match-sorter-utils';
 
 const DataTableContext = createContext({
@@ -3694,7 +3694,7 @@ const TextWithCopy = ({ text, globalFilter, highlightedText, }) => {
     const displayText = highlightedText !== undefined
         ? highlightedText
         : highlightText$1(textValue, globalFilter);
-    return (jsxs(HStack, { gap: 2, alignItems: "center", children: [jsx(Text, { as: "span", children: displayText }), jsx(Clipboard.Root, { value: textValue, children: jsx(Clipboard.Trigger, { asChild: true, children: jsx(IconButton, { size: "xs", variant: "ghost", "aria-label": "Copy", fontSize: "1em", children: jsx(Clipboard.Indicator, { copied: jsx(LuCheck, {}), children: jsx(LuCopy, {}) }) }) }) })] }));
+    return (jsxs(HStack, { gap: 2, alignItems: "center", children: [jsx(Text, { as: "span", children: displayText }), jsx(Clipboard.Root, { value: textValue, children: jsx(Clipboard.Trigger, { asChild: true, children: jsx(IconButton, { size: "2xs", variant: "ghost", "aria-label": "Copy", fontSize: "1em", children: jsx(Clipboard.Indicator, { copied: jsx(LuCheck, {}), children: jsx(LuCopy, {}) }) }) }) })] }));
 };
 
 // Helper function to highlight matching text
@@ -4016,7 +4016,6 @@ const getColumns = ({ schema, include = [], ignore = [], width = [], meta = {},
 //@ts-expect-error TODO: find appropriate type
 const SchemaFormContext = createContext({
     schema: {},
-    serverUrl: '',
     requestUrl: '',
     order: [],
     ignore: [],
@@ -4127,6 +4126,22 @@ const convertAjvErrorsToFieldErrors = (errors, schema) => {
             // Get the schema node for this field to check for custom error messages
             const fieldSchema = getSchemaNodeForField(schema, fieldName);
             const customMessage = fieldSchema?.errorMessages?.[error.keyword];
+            // Debug log when error message is missing
+            if (!customMessage) {
+                console.debug(`[Form Validation] Missing error message for field '${fieldName}' with keyword '${error.keyword}'. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`, {
+                    fieldName,
+                    keyword: error.keyword,
+                    instancePath: error.instancePath,
+                    schemaPath: error.schemaPath,
+                    params: error.params,
+                    fieldSchema: fieldSchema
+                        ? {
+                            type: fieldSchema.type,
+                            errorMessages: fieldSchema.errorMessages,
+                        }
+                        : undefined,
+                });
+            }
             // Provide helpful fallback message if no custom message is provided
             const fallbackMessage = customMessage ||
                 `Missing error message for ${error.keyword}. Add errorMessages.${error.keyword} to schema for field '${fieldName}'`;
@@ -4256,7 +4271,7 @@ const idPickerSanityCheck = (column, foreign_key) => {
         throw new Error(`The key column does not exist in properties of column ${column} when using id-picker.`);
     }
 };
-const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
+const FormRoot = ({ schema, idMap, setIdMap, form, translate, children, order = [], ignore = [], include = [], onSubmit = undefined, rowNumber = undefined, requestOptions = {}, getUpdatedData = () => { }, customErrorRenderer, customSuccessRenderer, displayConfig = {
     showSubmitButton: true,
     showResetButton: true,
     showTitle: true,
@@ -4297,9 +4312,11 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
         }
     };
     const defaultSubmitPromise = (data) => {
+        if (!requestOptions.url) {
+            throw new Error('requestOptions.url is required when onSubmit is not provided');
+        }
         const options = {
             method: 'POST',
-            url: `${serverUrl}`,
             data: clearEmptyString(data),
             ...requestOptions,
         };
@@ -4317,7 +4334,6 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
     };
     return (jsx(SchemaFormContext.Provider, { value: {
             schema,
-            serverUrl,
             order,
             ignore,
             include,
@@ -4357,39 +4373,31 @@ const FormRoot = ({ schema, idMap, setIdMap, form, serverUrl, translate, childre
         }, children: jsx(FormProvider, { ...form, children: children }) }));
 };
 
-function removeIndex(str) {
-    return str.replace(/\.\d+\./g, ".");
-}
-
 /**
- * Custom hook for form field labels and fallback text.
- * Automatically handles colLabel construction and removeIndex logic.
- * Uses schema.title when available, otherwise falls back to translate function.
+ * Custom hook for form field labels.
+ * Automatically handles colLabel construction.
+ * Uses schema.title for labels and schema.errorMessages for error messages.
  *
  * @param column - The column name
  * @param prefix - The prefix for the field (usually empty string or parent path)
- * @param schema - Optional schema object with title property
+ * @param schema - Required schema object with title and errorMessages properties
  * @returns Object with label helper functions
  *
  * @example
  * ```tsx
  * const formI18n = useFormI18n(column, prefix, schema);
  *
- * // Get field label (prefers schema.title)
+ * // Get field label (from schema.title)
  * <Field label={formI18n.label()} />
  *
- * // Get required error message
+ * // Get required error message (from schema.errorMessages?.required)
  * <Text>{formI18n.required()}</Text>
  *
- * // Get custom text
- * <Text>{formI18n.t('add_more')}</Text>
- *
  * // Access the raw colLabel
  * const colLabel = formI18n.colLabel;
  * ```
  */
 const useFormI18n = (column, prefix = '', schema) => {
-    const { translate } = useSchemaContext();
     const colLabel = `${prefix}${column}`;
     return {
         /**
@@ -4397,36 +4405,55 @@ const useFormI18n = (column, prefix = '', schema) => {
          */
         colLabel,
         /**
-         * Get the field label from schema title prop, or fall back to translate function
-         * Uses schema.title if available, otherwise: translate.t(removeIndex(`${colLabel}.field_label`))
+         * Get the field label from schema title property.
+         * Logs a debug message if title is missing.
          */
-        label: (options) => {
-            if (schema?.title) {
+        label: () => {
+            if (schema.title) {
                 return schema.title;
             }
-            return translate.t(removeIndex(`${colLabel}.field_label`), options);
-        },
-        /**
-         * Get the required error message
-         * Equivalent to: translate.t(removeIndex(`${colLabel}.field_required`))
-         */
-        required: (options) => {
-            return translate.t(removeIndex(`${colLabel}.field_required`), options);
+            // Debug log when field title is missing
+            console.debug(`[Form Field Label] Missing title for field '${colLabel}'. Add title property to schema for field '${colLabel}'.`, {
+                fieldName: column,
+                colLabel,
+                prefix,
+                schema: {
+                    type: schema.type,
+                    errorMessages: schema.errorMessages
+                        ? Object.keys(schema.errorMessages)
+                        : undefined,
+                },
+            });
+            // Return column name as fallback
+            return column;
         },
         /**
-         * Get text for any custom key relative to the field
-         * Equivalent to: translate.t(removeIndex(`${colLabel}.${key}`))
-         *
-         * @param key - The key suffix (e.g., 'add_more', 'total', etc.)
-         * @param options - Optional options (e.g., defaultValue, interpolation variables)
+         * Get the required error message from schema.errorMessages?.required.
+         * Returns a helpful fallback message if not provided.
          */
-        t: (key, options) => {
-            return translate.t(removeIndex(`${colLabel}.${key}`), options);
+        required: () => {
+            const errorMessage = schema.errorMessages?.required;
+            if (errorMessage) {
+                return errorMessage;
+            }
+            // Debug log when error message is missing
+            console.debug(`[Form Field Required] Missing error message for required field '${colLabel}'. Add errorMessages.required to schema for field '${colLabel}'.`, {
+                fieldName: column,
+                colLabel,
+                prefix,
+                schema: {
+                    type: schema.type,
+                    title: schema.title,
+                    required: schema.required,
+                    hasErrorMessages: !!schema.errorMessages,
+                    errorMessageKeys: schema.errorMessages
+                        ? Object.keys(schema.errorMessages)
+                        : undefined,
+                },
+            });
+            // Return helpful fallback message
+            return `Missing error message for required. Add errorMessages.required to schema for field '${colLabel}'`;
         },
-        /**
-         * Access to the original translate object for edge cases
-         */
-        translate,
     };
 };
 
@@ -4501,52 +4528,56 @@ const Calendar = ({ calendars, getBackProps, getForwardProps, getDateProps, firs
     const { labels } = useContext(DatePickerContext);
     const { monthNamesShort, weekdayNamesShort, backButtonLabel, forwardButtonLabel, } = labels;
     if (calendars.length) {
-        return (jsxs(Grid, { children: [jsxs(Grid, { templateColumns: 'repeat(4, auto)', justifyContent: 'center', children: [jsx(Button$1, { variant: 'ghost', ...getBackProps({
-                                calendars,
-                                offset: 12,
-                            }), children: '<<' }), jsx(Button$1, { variant: 'ghost', ...getBackProps({ calendars }), children: backButtonLabel }), jsx(Button$1, { variant: 'ghost', ...getForwardProps({ calendars }), children: forwardButtonLabel }), jsx(Button$1, { variant: 'ghost', ...getForwardProps({
-                                calendars,
-                                offset: 12,
-                            }), children: '>>' })] }), jsx(Grid, { templateColumns: 'repeat(2, auto)', justifyContent: 'center', children: calendars.map((calendar) => (jsxs(Grid, { gap: 4, children: [jsxs(Grid, { justifyContent: 'center', children: [monthNamesShort[calendar.month], " ", calendar.year] }), jsxs(Grid, { templateColumns: 'repeat(7, auto)', justifyContent: 'center', children: [[0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
-                                        const weekday = (weekdayNum + firstDayOfWeek) % 7;
-                                        return (jsx(Text, { textAlign: 'center', children: weekdayNamesShort[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
-                                    }), calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
-                                        const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;
-                                        if (!dateObj) {
-                                            return jsx(Grid, {}, key);
+        return (jsx(Grid, { children: jsx(Grid, { templateColumns: 'repeat(2, auto)', justifyContent: 'center', children: calendars.map((calendar) => (jsxs(Grid, { gap: 2, children: [jsxs(Grid, { templateColumns: 'repeat(6, auto)', justifyContent: 'center', alignItems: 'center', gap: 2, children: [jsx(Button$1, { variant: 'ghost', size: 'sm', colorPalette: 'gray', ...getBackProps({ calendars }), children: '<' }), jsx(Text, { textAlign: 'center', children: monthNamesShort[calendar.month] }), jsx(Button$1, { variant: 'ghost', size: 'sm', colorPalette: 'gray', ...getForwardProps({ calendars }), children: '>' }), jsx(Button$1, { variant: 'ghost', size: 'sm', colorPalette: 'gray', ...getBackProps({
+                                        calendars,
+                                        offset: 12,
+                                    }), children: '<' }), jsx(Text, { textAlign: 'center', children: calendar.year }), jsx(Button$1, { variant: 'ghost', size: 'sm', colorPalette: 'gray', ...getForwardProps({
+                                        calendars,
+                                        offset: 12,
+                                    }), children: '>' })] }), jsxs(Grid, { templateColumns: 'repeat(7, auto)', justifyContent: 'center', children: [[0, 1, 2, 3, 4, 5, 6].map((weekdayNum) => {
+                                    const weekday = (weekdayNum + firstDayOfWeek) % 7;
+                                    return (jsx(Text, { textAlign: 'center', children: weekdayNamesShort[weekday] }, `${calendar.month}${calendar.year}${weekday}`));
+                                }), calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
+                                    const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;
+                                    if (!dateObj) {
+                                        return jsx(Grid, {}, key);
+                                    }
+                                    const { date, selected, selectable, today, isCurrentMonth, } = dateObj;
+                                    const getDateColor = ({ today, selected, selectable, }) => {
+                                        if (!selectable) {
+                                            return 'gray';
                                         }
-                                        const { date, selected, selectable, today, isCurrentMonth, } = dateObj;
-                                        const getDateColor = ({ today, selected, selectable, }) => {
-                                            if (!selectable) {
-                                                return 'gray';
-                                            }
-                                            if (selected) {
-                                                return 'blue';
-                                            }
-                                            if (today) {
-                                                return 'green';
-                                            }
-                                            return '';
-                                        };
-                                        const getVariant = ({ today, selected, selectable, }) => {
-                                            if (!selectable) {
-                                                return 'surface';
-                                            }
-                                            if (selected) {
-                                                return 'solid';
-                                            }
-                                            if (today) {
-                                                return 'surface';
-                                            }
-                                            return 'ghost';
-                                        };
-                                        const color = getDateColor({ today, selected, selectable });
-                                        const variant = getVariant({ today, selected, selectable });
-                                        return (jsx(Button$1, { variant: variant, colorPalette: color, opacity: isCurrentMonth ? 1 : 0.4, ...getDateProps({ dateObj }), children: selectable ? date.getDate() : 'X' }, key));
-                                    }))] })] }, `${calendar.month}${calendar.year}`))) })] }));
+                                        if (selected) {
+                                            return 'blue';
+                                        }
+                                        if (today) {
+                                            return 'green';
+                                        }
+                                        return '';
+                                    };
+                                    const getVariant = ({ today, selected, selectable, }) => {
+                                        if (!selectable) {
+                                            return 'surface';
+                                        }
+                                        if (selected) {
+                                            return 'surface';
+                                        }
+                                        if (today) {
+                                            return 'outline';
+                                        }
+                                        return 'ghost';
+                                    };
+                                    const color = getDateColor({ today, selected, selectable });
+                                    const variant = getVariant({ today, selected, selectable });
+                                    return (jsx(Button$1, { variant: variant, colorPalette: color, size: 'xs', opacity: isCurrentMonth ? 1 : 0.4, ...getDateProps({ dateObj }), children: selectable ? date.getDate() : 'X' }, key));
+                                }))] })] }, `${calendar.month}${calendar.year}`))) }) }));
     }
     return null;
 };
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
 const DatePickerContext = createContext({
     labels: {
         monthNamesShort: [
@@ -4566,6 +4597,9 @@ const DatePickerContext = createContext({
         weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
         backButtonLabel: 'Back',
         forwardButtonLabel: 'Next',
+        todayLabel: 'Today',
+        yesterdayLabel: 'Yesterday',
+        tomorrowLabel: 'Tomorrow',
     },
 });
 const DatePicker$1 = ({ labels = {
@@ -4586,6 +4620,9 @@ const DatePicker$1 = ({ labels = {
     weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     backButtonLabel: 'Back',
     forwardButtonLabel: 'Next',
+    todayLabel: 'Today',
+    yesterdayLabel: 'Yesterday',
+    tomorrowLabel: 'Tomorrow',
 }, onDateSelected, selected, firstDayOfWeek, showOutsideDays, date, minDate, maxDate, monthsToDisplay, render, }) => {
     const calendarData = useCalendar({
         onDateSelected,
@@ -4600,9 +4637,171 @@ const DatePicker$1 = ({ labels = {
     return (jsx(DatePickerContext.Provider, { value: { labels }, children: render ? (render(calendarData)) : (jsx(Calendar, { ...calendarData,
             firstDayOfWeek })) }));
 };
+function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateFormat = 'YYYY-MM-DD', displayFormat = 'YYYY-MM-DD', labels = {
+    monthNamesShort: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ],
+    weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    backButtonLabel: 'Back',
+    forwardButtonLabel: 'Next',
+    todayLabel: 'Today',
+    yesterdayLabel: 'Yesterday',
+    tomorrowLabel: 'Tomorrow',
+}, timezone = 'Asia/Hong_Kong', minDate, maxDate, firstDayOfWeek, showOutsideDays, monthsToDisplay = 1, insideDialog = false, readOnly = false, showHelperButtons = true, }) {
+    const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    // Sync inputValue with value prop changes
+    useEffect(() => {
+        if (value) {
+            const formatted = typeof value === 'string'
+                ? dayjs(value).tz(timezone).isValid()
+                    ? dayjs(value).tz(timezone).format(displayFormat)
+                    : ''
+                : dayjs(value).tz(timezone).format(displayFormat);
+            setInputValue(formatted);
+        }
+        else {
+            setInputValue('');
+        }
+    }, [value, timezone, displayFormat]);
+    // Convert value to Date object for DatePicker
+    const selectedDate = value
+        ? typeof value === 'string'
+            ? dayjs(value).tz(timezone).isValid()
+                ? dayjs(value).tz(timezone).toDate()
+                : new Date()
+            : value
+        : new Date();
+    // Shared function to parse and validate input value
+    const parseAndValidateInput = (inputVal) => {
+        // If empty, clear the value
+        if (!inputVal.trim()) {
+            onChange?.(undefined);
+            setInputValue('');
+            return;
+        }
+        // Try parsing with displayFormat first
+        let parsedDate = dayjs(inputVal, displayFormat, true);
+        // If that fails, try common date formats
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal);
+        }
+        // If still invalid, try parsing with dateFormat
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal, dateFormat, true);
+        }
+        // If valid, check constraints and update
+        if (parsedDate.isValid()) {
+            const dateObj = parsedDate.tz(timezone).toDate();
+            // Check min/max constraints
+            if (minDate && dateObj < minDate) {
+                // Invalid: before minDate, reset to prop value
+                resetToPropValue();
+                return;
+            }
+            if (maxDate && dateObj > maxDate) {
+                // Invalid: after maxDate, reset to prop value
+                resetToPropValue();
+                return;
+            }
+            // Valid date - format and update
+            const formattedDate = parsedDate.tz(timezone).format(dateFormat);
+            const formattedDisplay = parsedDate.tz(timezone).format(displayFormat);
+            onChange?.(formattedDate);
+            setInputValue(formattedDisplay);
+        }
+        else {
+            // Invalid date - reset to prop value
+            resetToPropValue();
+        }
+    };
+    // Helper function to reset input to prop value
+    const resetToPropValue = () => {
+        if (value) {
+            const formatted = typeof value === 'string'
+                ? dayjs(value).tz(timezone).isValid()
+                    ? dayjs(value).tz(timezone).format(displayFormat)
+                    : ''
+                : dayjs(value).tz(timezone).format(displayFormat);
+            setInputValue(formatted);
+        }
+        else {
+            setInputValue('');
+        }
+    };
+    const handleInputChange = (e) => {
+        // Only update the input value, don't parse yet
+        setInputValue(e.target.value);
+    };
+    const handleInputBlur = () => {
+        // Parse and validate when input loses focus
+        parseAndValidateInput(inputValue);
+    };
+    const handleKeyDown = (e) => {
+        // Parse and validate when Enter is pressed
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            parseAndValidateInput(inputValue);
+        }
+    };
+    const handleDateSelected = ({ date }) => {
+        console.debug('[DatePickerInput] handleDateSelected called:', {
+            date: date.toISOString(),
+            timezone,
+            dateFormat,
+            formattedDate: dayjs(date).tz(timezone).format(dateFormat),
+        });
+        const formattedDate = dayjs(date).tz(timezone).format(dateFormat);
+        console.debug('[DatePickerInput] Calling onChange with formatted date:', formattedDate);
+        onChange?.(formattedDate);
+        setOpen(false);
+    };
+    // Helper function to get dates in the correct timezone
+    const getToday = () => dayjs().tz(timezone).startOf('day').toDate();
+    const getYesterday = () => dayjs().tz(timezone).subtract(1, 'day').startOf('day').toDate();
+    const getTomorrow = () => dayjs().tz(timezone).add(1, 'day').startOf('day').toDate();
+    // Check if a date is within min/max constraints
+    const isDateValid = (date) => {
+        if (minDate) {
+            const minDateStart = dayjs(minDate).tz(timezone).startOf('day').toDate();
+            const dateStart = dayjs(date).tz(timezone).startOf('day').toDate();
+            if (dateStart < minDateStart)
+                return false;
+        }
+        if (maxDate) {
+            const maxDateStart = dayjs(maxDate).tz(timezone).startOf('day').toDate();
+            const dateStart = dayjs(date).tz(timezone).startOf('day').toDate();
+            if (dateStart > maxDateStart)
+                return false;
+        }
+        return true;
+    };
+    const handleHelperButtonClick = (date) => {
+        if (isDateValid(date)) {
+            handleDateSelected({ date });
+        }
+    };
+    const today = getToday();
+    const yesterday = getYesterday();
+    const tomorrow = getTomorrow();
+    const datePickerContent = (jsxs(Grid, { gap: 2, children: [showHelperButtons && (jsxs(Grid, { templateColumns: "repeat(3, 1fr)", gap: 2, children: [jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(yesterday), disabled: !isDateValid(yesterday), children: labels.yesterdayLabel ?? 'Yesterday' }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(today), disabled: !isDateValid(today), children: labels.todayLabel ?? 'Today' }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleHelperButtonClick(tomorrow), disabled: !isDateValid(tomorrow), children: labels.tomorrowLabel ?? 'Tomorrow' })] })), jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay })] }));
+    return (jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(InputGroup, { endElement: jsx(Popover.Trigger, { asChild: true, children: jsx(IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsx(Icon, { children: jsx(MdDateRange, {}) }) }) }), children: jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) }) }))] }));
+}
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(customParseFormat);
 const DatePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { timezone, dateTimePickerLabels, insideDialog } = useSchemaContext();
@@ -4611,15 +4810,29 @@ const DatePicker = ({ column, schema, prefix }) => {
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = formI18n.colLabel;
     const [open, setOpen] = useState(false);
+    const [inputValue, setInputValue] = useState('');
     const selectedDate = watch(colLabel);
-    const displayDate = dayjs(selectedDate)
-        .tz(timezone)
-        .format(displayDateFormat);
+    // Update input value when form value changes
+    useEffect(() => {
+        if (selectedDate) {
+            const parsedDate = dayjs(selectedDate).tz(timezone);
+            if (parsedDate.isValid()) {
+                const formatted = parsedDate.format(displayDateFormat);
+                setInputValue(formatted);
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        else {
+            setInputValue('');
+        }
+    }, [selectedDate, displayDateFormat, timezone]);
+    // Format and validate existing value
     useEffect(() => {
         try {
             if (selectedDate) {
                 // Parse the selectedDate as UTC or in a specific timezone to avoid +8 hour shift
-                // For example, parse as UTC:
                 const parsedDate = dayjs(selectedDate).tz(timezone);
                 if (!parsedDate.isValid())
                     return;
@@ -4637,7 +4850,7 @@ const DatePicker = ({ column, schema, prefix }) => {
         catch (e) {
             console.error(e);
         }
-    }, [selectedDate, dateFormat, colLabel, setValue]);
+    }, [selectedDate, dateFormat, colLabel, setValue, timezone]);
     const datePickerLabels = {
         monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
             'January',
@@ -4665,14 +4878,92 @@ const DatePicker = ({ column, schema, prefix }) => {
         backButtonLabel: dateTimePickerLabels?.backButtonLabel ?? 'Back',
         forwardButtonLabel: dateTimePickerLabels?.forwardButtonLabel ?? 'Forward',
     };
-    const datePickerContent = (jsx(DatePicker$1, { selected: new Date(selectedDate), onDateSelected: ({ date }) => {
-            setValue(colLabel, dayjs(date).format(dateFormat));
-            setOpen(false);
-        }, labels: datePickerLabels }));
+    // Convert value to Date object for DatePicker
+    const selectedDateObj = selectedDate
+        ? dayjs(selectedDate).tz(timezone).isValid()
+            ? dayjs(selectedDate).tz(timezone).toDate()
+            : new Date()
+        : new Date();
+    // Shared function to parse and validate input value
+    const parseAndValidateInput = (inputVal) => {
+        // If empty, clear the value
+        if (!inputVal.trim()) {
+            setValue(colLabel, undefined, {
+                shouldValidate: true,
+                shouldDirty: true,
+            });
+            setInputValue('');
+            return;
+        }
+        // Try parsing with displayDateFormat first
+        let parsedDate = dayjs(inputVal, displayDateFormat, true);
+        // If that fails, try common date formats
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal);
+        }
+        // If still invalid, try parsing with dateFormat
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal, dateFormat, true);
+        }
+        // If valid, format and update
+        if (parsedDate.isValid()) {
+            const formattedDate = parsedDate.tz(timezone).format(dateFormat);
+            const formattedDisplay = parsedDate
+                .tz(timezone)
+                .format(displayDateFormat);
+            setValue(colLabel, formattedDate, {
+                shouldValidate: true,
+                shouldDirty: true,
+            });
+            setInputValue(formattedDisplay);
+        }
+        else {
+            // Invalid date - reset to prop value
+            resetToPropValue();
+        }
+    };
+    // Helper function to reset input to prop value
+    const resetToPropValue = () => {
+        if (selectedDate) {
+            const parsedDate = dayjs(selectedDate).tz(timezone);
+            if (parsedDate.isValid()) {
+                const formatted = parsedDate.format(displayDateFormat);
+                setInputValue(formatted);
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        else {
+            setInputValue('');
+        }
+    };
+    const handleInputChange = (e) => {
+        // Only update the input value, don't parse yet
+        setInputValue(e.target.value);
+    };
+    const handleInputBlur = () => {
+        // Parse and validate when input loses focus
+        parseAndValidateInput(inputValue);
+    };
+    const handleKeyDown = (e) => {
+        // Parse and validate when Enter is pressed
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            parseAndValidateInput(inputValue);
+        }
+    };
+    const handleDateSelected = ({ date }) => {
+        const formattedDate = dayjs(date).tz(timezone).format(dateFormat);
+        setValue(colLabel, formattedDate, {
+            shouldValidate: true,
+            shouldDirty: true,
+        });
+        setOpen(false);
+    };
+    const datePickerContent = (jsx(DatePicker$1, { selected: selectedDateObj, onDateSelected: handleDateSelected, labels: datePickerLabels }));
     return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], 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(MdDateRange, {}), selectedDate !== undefined ? `${displayDate}` : ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) }) }))] }) }));
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(InputGroup, { endElement: jsx(Popover.Trigger, { asChild: true, children: jsx(IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsx(Icon, { children: jsx(MdDateRange, {}) }) }) }), children: jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: formI18n.label(), size: "sm" }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) }) }))] }) }));
 };
 
 dayjs.extend(utc);
@@ -4680,7 +4971,7 @@ dayjs.extend(timezone);
 const DateRangePicker = ({ column, schema, prefix, }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { timezone, insideDialog } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD', dateFormat = 'YYYY-MM-DD', } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = formI18n.colLabel;
@@ -4786,27 +5077,82 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
     const dataList = schema.enum ?? [];
+    // Helper function to render enum value (returns ReactNode)
+    // If renderDisplay is provided, use it; otherwise show the enum string value directly
+    const renderEnumValue = (value) => {
+        if (renderDisplay) {
+            return renderDisplay(value);
+        }
+        // If no renderDisplay provided, show the enum string value directly
+        return value;
+    };
+    // Helper function to get string representation for input display
+    // Converts ReactNode to string for combobox input display
+    const getDisplayString = (value) => {
+        if (renderDisplay) {
+            const rendered = renderDisplay(value);
+            // If renderDisplay returns a string, use it directly
+            if (typeof rendered === 'string') {
+                return rendered;
+            }
+            // If it's a React element, try to extract text content
+            // For now, fallback to the raw value if we can't extract text
+            // In most cases, renderDisplay should return a string or simple element
+            if (typeof rendered === 'object' &&
+                rendered !== null &&
+                'props' in rendered) {
+                const props = rendered.props;
+                // Try to extract text from React element props
+                if (props?.children) {
+                    const children = props.children;
+                    if (typeof children === 'string') {
+                        return children;
+                    }
+                }
+            }
+            // Fallback: use raw value if we can't extract string
+            return value;
+        }
+        return value;
+    };
+    // Debug log when renderDisplay is missing
+    if (!renderDisplay) {
+        console.debug(`[EnumPicker] Missing renderDisplay for field '${colLabel}'. Add renderDisplay function to schema for field '${colLabel}' to provide custom UI rendering. Currently showing enum string values directly.`, {
+            fieldName: column,
+            colLabel,
+            prefix,
+            enumValues: dataList,
+        });
+    }
     // Current value for combobox (array format)
     const currentValue = isMultiple
         ? watchEnums.filter((val) => val != null && val !== '')
         : watchEnum
             ? [watchEnum]
             : [];
-    // Transform enum data for combobox collection
+    // Track input focus state for single selection
+    const [isInputFocused, setIsInputFocused] = useState(false);
+    // Get the selected value for single selection display
+    const selectedSingleValue = !isMultiple && watchEnum ? watchEnum : null;
+    const selectedSingleRendered = selectedSingleValue
+        ? renderEnumValue(selectedSingleValue)
+        : null;
+    const isSelectedSingleValueString = typeof selectedSingleRendered === 'string';
     const comboboxItems = useMemo(() => {
         return dataList.map((item) => ({
-            label: !!renderDisplay === true
-                ? String(renderDisplay(item))
-                : formI18n.t(item),
+            label: item, // Internal: used for search/filtering only
             value: item,
+            raw: item, // Passed to renderEnumValue for UI rendering
+            displayLabel: getDisplayString(item), // Used for input display when selected
         }));
-    }, [dataList, renderDisplay, formI18n]);
+    }, [dataList, renderDisplay]);
     // Use filter hook for combobox
     const { contains } = useFilter({ sensitivity: 'base' });
     // Create collection for combobox
+    // itemToString uses displayLabel to show rendered display in input when selected
     const { collection, filter } = useListCollection({
         initialItems: comboboxItems,
-        itemToString: (item) => item.label,
+        itemToString: (item) => item.displayLabel, // Use displayLabel for selected value display
         itemToValue: (item) => item.value,
         filter: contains,
     });
@@ -4830,9 +5176,7 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                         setValue(colLabel, details.value);
                     }
                 }, children: jsx(HStack, { gap: "6", children: dataList.map((item) => {
-                        return (jsxs(RadioGroup$1.Item, { value: item, children: [jsx(RadioGroup$1.ItemHiddenInput, {}), jsx(RadioGroup$1.ItemIndicator, {}), jsx(RadioGroup$1.ItemText, { children: !!renderDisplay === true
-                                        ? renderDisplay(item)
-                                        : formI18n.t(item) })] }, `${colLabel}-${item}`));
+                        return (jsxs(RadioGroup$1.Item, { value: item, children: [jsx(RadioGroup$1.ItemHiddenInput, {}), jsx(RadioGroup$1.ItemIndicator, {}), jsx(RadioGroup$1.ItemText, { children: renderEnumValue(item) })] }, `${colLabel}-${item}`));
                     }) }) }) }));
     }
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
@@ -4843,16 +5187,31 @@ const EnumPicker = ({ column, isMultiple = false, schema, prefix, showTotalAndLi
                     return (jsx(Tag, { size: "lg", closable: true, onClick: () => {
                             const newValue = currentValue.filter((val) => val !== enumValue);
                             setValue(colLabel, newValue);
-                        }, children: !!renderDisplay === true
-                            ? renderDisplay(enumValue)
-                            : formI18n.t(enumValue) }, enumValue));
+                        }, children: renderEnumValue(enumValue) }, enumValue));
                 }) })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: isMultiple, closeOnSelect: !isMultiple, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
                     ? { strategy: 'fixed', hideWhenDetached: true }
-                    : undefined, children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: enumPickerLabels?.typeToSearch ?? formI18n.t('type_to_search') }), jsxs(Combobox.IndicatorGroup, { children: [!isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
+                    : undefined, children: [jsxs(Combobox.Control, { position: "relative", children: [!isMultiple &&
+                                selectedSingleValue &&
+                                !isInputFocused &&
+                                !isSelectedSingleValueString &&
+                                selectedSingleRendered && (jsx(Box, { position: "absolute", left: 3, top: "50%", transform: "translateY(-50%)", pointerEvents: "none", zIndex: 1, maxWidth: "calc(100% - 60px)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: selectedSingleRendered })), jsx(Combobox.Input, { placeholder: !isMultiple && selectedSingleValue && !isInputFocused
+                                    ? undefined
+                                    : enumPickerLabels?.typeToSearch ?? 'Type to search', onFocus: () => setIsInputFocused(true), onBlur: () => setIsInputFocused(false), style: {
+                                    color: !isMultiple &&
+                                        selectedSingleValue &&
+                                        !isInputFocused &&
+                                        !isSelectedSingleValueString
+                                        ? 'transparent'
+                                        : undefined,
+                                    caretColor: !isMultiple &&
+                                        selectedSingleValue &&
+                                        !isInputFocused &&
+                                        !isSelectedSingleValueString
+                                        ? 'transparent'
+                                        : undefined,
+                                } }), jsxs(Combobox.IndicatorGroup, { children: [!isMultiple && currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
                                             setValue(colLabel, '');
-                                        } })), jsx(Combobox.Trigger, {})] })] }), insideDialog ? (jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ??
-                                        formI18n.t('empty_search_result') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? formI18n.t('total')}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ??
-                                            formI18n.t('empty_search_result') })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) }) }))] })] }));
+                                        } })), jsx(Combobox.Trigger, {})] })] }), insideDialog ? (jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? 'Total'}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ?? 'No results found' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: renderEnumValue(item.raw) }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [showTotalAndLimit && (jsx(Text, { p: 2, fontSize: "sm", color: "fg.muted", children: `${enumPickerLabels?.total ?? 'Total'}: ${collection.items.length}` })), collection.items.length === 0 ? (jsx(Combobox.Empty, { children: enumPickerLabels?.emptySearchResult ?? 'No results found' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: renderEnumValue(item.raw) }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) }))] }) }) }))] })] }));
 };
 
 function isEnteringWindow(_ref) {
@@ -5325,7 +5684,7 @@ const MediaLibraryBrowser = ({ onFetchFiles, filterImageOnly = false, labels, en
                     }) })) }))] }));
 };
 
-function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, colLabel, }) {
+function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly = false, onFetchFiles, onUploadFile, enableUpload = false, labels, }) {
     const [selectedFile, setSelectedFile] = useState(undefined);
     const [activeTab, setActiveTab] = useState('browse');
     const [uploadingFiles, setUploadingFiles] = useState(new Set());
@@ -5409,7 +5768,7 @@ function MediaBrowserDialog({ open, onClose, onSelect, title, filterImageOnly =
 const FilePicker = ({ column, schema, prefix }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5467,7 +5826,7 @@ const FilePicker = ({ column, schema, prefix }) => {
                             const newFiles = files.filter(({ name }) => !currentFiles.some((cur) => cur.name === name));
                             setValue(colLabel, [...currentFiles, ...newFiles]);
                         }
-                    }, placeholder: filePickerLabels?.fileDropzone ?? formI18n.t('fileDropzone') }) }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
+                    }, placeholder: filePickerLabels?.fileDropzone ?? 'Drop files here' }) }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFiles.map((file, index) => {
                     const fileIdentifier = getFileIdentifier(file, index);
                     const fileName = getFileName(file);
                     const fileSize = getFileSize(file);
@@ -5485,7 +5844,7 @@ const FilePicker = ({ column, schema, prefix }) => {
 const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
     const { setValue, formState: { errors }, watch, } = useFormContext();
     const { filePickerLabels } = useSchemaContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', filePicker, type, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const isSingleSelect = type === 'string';
@@ -5578,11 +5937,7 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
         }
     };
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsx(VStack, { align: "stretch", gap: 2, children: jsx(Button$1, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ??
-                        formI18n.t('browse_library') ??
-                        'Browse from Library' }) }), jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ??
-                    filePickerLabels?.dialogTitle ??
-                    'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [jsx(VStack, { align: "stretch", gap: 2, children: jsx(Button$1, { variant: "outline", onClick: () => setDialogOpen(true), borderColor: "border.default", bg: "bg.panel", _hover: { bg: 'bg.muted' }, children: filePickerLabels?.browseLibrary ?? 'Browse from Library' }) }), jsx(MediaBrowserDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onSelect: handleMediaLibrarySelect, title: filePickerLabels?.dialogTitle ?? formI18n.label() ?? 'Select File', filterImageOnly: filterImageOnly, onFetchFiles: onFetchFiles, onUploadFile: onUploadFile, enableUpload: enableUpload, labels: filePickerLabels, colLabel: colLabel }), jsx(Flex, { flexFlow: 'column', gap: 1, children: currentFileIds.map((fileId, index) => {
                     const file = fileMap.get(fileId);
                     const isImage = file
                         ? /\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i.test(file.name)
@@ -5598,43 +5953,51 @@ const FormMediaLibraryBrowser = ({ column, schema, prefix, }) => {
                 }) })] }));
 };
 
-const getTableData = async ({ serverUrl, in_table, searching = "", where = [], limit = 10, offset = 0, }) => {
-    if (serverUrl === undefined || serverUrl.length == 0) {
-        throw new Error("The serverUrl is missing");
-    }
-    if (in_table === undefined || in_table.length == 0) {
-        throw new Error("The in_table is missing");
-    }
-    const options = {
-        method: "GET",
-        url: `${serverUrl}/api/g/${in_table}`,
-        params: {
-            searching,
-            where,
-            limit,
-            offset
-        },
-    };
-    try {
-        const { data } = await axios.request(options);
-        console.log(data);
-        return data;
-    }
-    catch (error) {
-        console.error(error);
-        throw error;
-    }
-};
-
-// Default renderDisplay function that stringifies JSON
+// Default renderDisplay function that intelligently displays items
+// If item is an object, tries to find common display fields (name, title, label, etc.)
+// Otherwise falls back to JSON.stringify
 const defaultRenderDisplay = (item) => {
+    // Check if item is an object (not null, not array, not primitive)
+    if (item !== null &&
+        typeof item === 'object' &&
+        !Array.isArray(item) &&
+        !(item instanceof Date)) {
+        const obj = item;
+        // Try common display fields in order of preference
+        const displayFields = [
+            'name',
+            'title',
+            'label',
+            'displayName',
+            'display_name',
+            'text',
+            'value',
+        ];
+        for (const field of displayFields) {
+            if (obj[field] !== undefined && obj[field] !== null) {
+                const value = obj[field];
+                // Return the value if it's a string or number, otherwise stringify it
+                if (typeof value === 'string' || typeof value === 'number') {
+                    return String(value);
+                }
+            }
+        }
+        // If no display field found, fall back to JSON.stringify
+        return JSON.stringify(item);
+    }
+    // For non-objects (primitives, arrays, dates), use JSON.stringify
     return JSON.stringify(item);
 };
 
 const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const { watch, getValues, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl, idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
-    const { renderDisplay, foreign_key } = schema;
+    const { idMap, setIdMap, idPickerLabels, insideDialog } = useSchemaContext();
+    const { renderDisplay, itemToValue: schemaItemToValue, loadInitialValues, foreign_key, variant, } = schema;
+    // loadInitialValues should be provided in schema for id-picker fields
+    // It's used to load the record of the id so the display is human-readable
+    if (variant === 'id-picker' && !loadInitialValues) {
+        console.warn(`loadInitialValues is recommended in schema for IdPicker field '${column}'. Please provide loadInitialValues function in the schema to load records for human-readable display.`);
+    }
     const { table, column: column_ref, customQueryFn, } = foreign_key;
     const [searchText, setSearchText] = useState('');
     const [debouncedSearchText, setDebouncedSearchText] = useState('');
@@ -5679,94 +6042,58 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
     const missingIdsKey = useMemo(() => {
         return JSON.stringify([...missingIds].sort());
     }, [missingIds]);
+    // Include idMap state in query key to force refetch when idMap is reset (e.g., on remount from another page)
+    // This ensures the query runs even if React Query has cached data for the same missing IDs
+    const idMapStateKey = useMemo(() => {
+        // Create a key based on whether the required IDs are in idMap
+        const hasRequiredIds = currentValue.every((id) => idMap[id]);
+        return hasRequiredIds ? 'complete' : 'incomplete';
+    }, [currentValue, idMap]);
     // Query to fetch initial values that are missing from idMap
     // This query runs automatically when missingIds.length > 0 and updates idMap
     const initialValuesQuery = useQuery({
-        queryKey: [`idpicker-initial`, column, missingIdsKey],
+        queryKey: [`idpicker-initial`, column, missingIdsKey, idMapStateKey],
         queryFn: async () => {
             if (missingIds.length === 0) {
                 return { data: [], count: 0 };
             }
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: '',
-                    limit: missingIds.length,
-                    offset: 0,
-                    where: [
-                        {
-                            id: column_ref,
-                            value: missingIds.length === 1 ? missingIds[0] : missingIds,
-                        },
-                    ],
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // Use schema's loadInitialValues (required for id-picker)
+            if (!loadInitialValues) {
+                console.warn(`loadInitialValues is required in schema for IdPicker field '${column}'. Returning empty idMap.`);
+                return { data: [], count: 0 };
             }
-            const data = await getTableData({
-                serverUrl,
-                searching: '',
-                in_table: table,
-                limit: missingIds.length,
-                offset: 0,
-                where: [
-                    {
-                        id: column_ref,
-                        value: missingIds.length === 1 ? missingIds[0] : missingIds,
-                    },
-                ],
+            const result = await loadInitialValues({
+                ids: missingIds,
+                foreign_key: foreign_key,
+                setIdMap,
             });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
-            });
-            return data;
+            return result.data;
         },
         enabled: missingIds.length > 0, // Only fetch if there are missing IDs
-        staleTime: 300000,
+        staleTime: 0, // Always consider data stale to refetch on remount
+        refetchOnMount: true, // Always refetch when component remounts (e.g., from another page)
+        refetchOnWindowFocus: false, // Don't refetch on window focus
     });
     const { isLoading: isLoadingInitialValues, isFetching: isFetchingInitialValues, } = initialValuesQuery;
     // Query for search results (async loading)
     const query = useQuery({
         queryKey: [`idpicker`, { column, searchText: debouncedSearchText, limit }],
         queryFn: async () => {
-            if (customQueryFn) {
-                const { data, idMap } = await customQueryFn({
-                    searching: debouncedSearchText ?? '',
-                    limit: limit,
-                    offset: 0,
-                });
-                setIdMap((state) => {
-                    return { ...state, ...idMap };
-                });
-                return data;
+            // customQueryFn is required when serverUrl is not available
+            if (!customQueryFn) {
+                throw new Error(`customQueryFn is required in foreign_key for table ${table}. serverUrl has been removed.`);
             }
-            const data = await getTableData({
-                serverUrl,
+            const { data, idMap } = await customQueryFn({
                 searching: debouncedSearchText ?? '',
-                in_table: table,
                 limit: limit,
                 offset: 0,
             });
-            const newMap = Object.fromEntries((data ?? { data: [] }).data.map((item) => {
-                return [
-                    item[column_ref],
-                    {
-                        ...item,
-                    },
-                ];
-            }));
-            setIdMap((state) => {
-                return { ...state, ...newMap };
-            });
+            // Update idMap with returned values
+            if (idMap && Object.keys(idMap).length > 0) {
+                setIdMap((state) => {
+                    return { ...state, ...idMap };
+                });
+            }
             return data;
         },
         enabled: true, // Always enabled for combobox
@@ -5798,17 +6125,51 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         // Depend on idMapKey which only changes when items we care about change
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [currentValueKey, idMapKey]);
+    // Default itemToValue function: extract value from item using column_ref
+    const defaultItemToValue = (item) => String(item[column_ref]);
+    // Use schema's itemToValue if provided, otherwise use default
+    const itemToValueFn = schemaItemToValue
+        ? (item) => schemaItemToValue(item)
+        : defaultItemToValue;
+    // itemToString function: convert item to readable string using renderDisplay
+    // This ensures items can always be displayed as readable strings in the combobox
+    const renderFn = renderDisplay || defaultRenderDisplay;
+    const itemToStringFn = (item) => {
+        const rendered = renderFn(item);
+        // If already a string or number, return it
+        if (typeof rendered === 'string')
+            return rendered;
+        if (typeof rendered === 'number')
+            return String(rendered);
+        // For ReactNode, fall back to defaultRenderDisplay which converts to string
+        return String(defaultRenderDisplay(item));
+    };
     // Transform data for combobox collection
     // label is used for filtering/searching (must be a string)
+    // displayLabel is used for input display when selected (string representation of rendered display)
     // raw item is stored for custom rendering
     // Also include items from idMap that match currentValue (for initial values display)
     const comboboxItems = useMemo(() => {
         const renderFn = renderDisplay || defaultRenderDisplay;
+        // Helper to convert rendered display to string for displayLabel
+        // For ReactNodes (non-string/number), we can't safely stringify due to circular refs
+        // So we use the label (which is already a string) as fallback
+        const getDisplayString = (rendered, fallbackLabel) => {
+            if (typeof rendered === 'string')
+                return rendered;
+            if (typeof rendered === 'number')
+                return String(rendered);
+            // For ReactNode, use the fallback label (which is already a string representation)
+            // The actual ReactNode will be rendered in the overlay, not in the input
+            return fallbackLabel;
+        };
         const itemsFromDataList = dataList.map((item) => {
             const rendered = renderFn(item);
+            const label = typeof rendered === 'string' ? rendered : JSON.stringify(item); // Use string for filtering
             return {
-                label: typeof rendered === 'string' ? rendered : JSON.stringify(item), // Use string for filtering
-                value: String(item[column_ref]),
+                label, // Use string for filtering
+                displayLabel: getDisplayString(rendered, label), // String representation for input display
+                value: itemToValueFn(item),
                 raw: item,
             };
         });
@@ -5817,25 +6178,28 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         const itemsFromIdMap = idMapItems
             .map((item) => {
             // Check if this item is already in itemsFromDataList
-            const alreadyIncluded = itemsFromDataList.some((i) => i.value === String(item[column_ref]));
+            const alreadyIncluded = itemsFromDataList.some((i) => i.value === itemToValueFn(item));
             if (alreadyIncluded)
                 return null;
             const rendered = renderFn(item);
+            const label = typeof rendered === 'string' ? rendered : JSON.stringify(item);
             return {
-                label: typeof rendered === 'string' ? rendered : JSON.stringify(item),
-                value: String(item[column_ref]),
+                label,
+                displayLabel: getDisplayString(rendered, label), // String representation for input display
+                value: itemToValueFn(item),
                 raw: item,
             };
         })
             .filter((item) => item !== null);
         return [...itemsFromIdMap, ...itemsFromDataList];
-    }, [dataList, column_ref, renderDisplay, idMapItems]);
+    }, [dataList, column_ref, renderDisplay, idMapItems, itemToValueFn]);
     // Use filter hook for combobox
     const { contains } = useFilter({ sensitivity: 'base' });
     // Create collection for combobox
+    // itemToString uses displayLabel to show rendered display in input when selected
     const { collection, filter, set } = useListCollection({
         initialItems: comboboxItems,
-        itemToString: (item) => item.label,
+        itemToString: (item) => item.displayLabel, // Use displayLabel for selected value display
         itemToValue: (item) => item.value,
         filter: contains,
     });
@@ -5890,6 +6254,10 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
         idPickerLabels,
         insideDialog: insideDialog ?? false,
         renderDisplay,
+        itemToValue: itemToValueFn,
+        itemToString: itemToStringFn,
+        loadInitialValues: loadInitialValues ??
+            (async () => ({ data: { data: [], count: 0 }, idMap: {} })), // Fallback if not provided
         column_ref,
         errors,
         setValue,
@@ -5898,60 +6266,69 @@ const useIdPickerData = ({ column, schema, prefix, isMultiple, }) => {
 
 const IdPickerSingle = ({ column, schema, prefix, }) => {
     const formI18n = useFormI18n(column, prefix, schema);
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { colLabel, currentValue, searchText, setSearchText, isLoading, isFetching, isPending, isError, isSearching, isLoadingInitialValues, isFetchingInitialValues, missingIds, collection, idMap, idPickerLabels, insideDialog, renderDisplay: renderDisplayFn, errors, setValue, } = useIdPickerData({
+    const { colLabel, currentValue, searchText, setSearchText, isLoading, isFetching, isPending, isError, isSearching, collection, filter, idMap, idPickerLabels, insideDialog, renderDisplay: renderDisplayFn, itemToValue, itemToString, errors, setValue, } = useIdPickerData({
         column,
         schema,
         prefix,
         isMultiple: false,
     });
-    const handleInputValueChange = (details) => {
-        setSearchText(details.inputValue);
-    };
-    const handleValueChange = (details) => {
-        setValue(colLabel, details.value[0] || '');
-    };
-    const renderDisplayFunction = renderDisplayFn || renderDisplay || defaultRenderDisplay;
-    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [currentValue.length > 0 && (jsx(Flex, { mb: 2, children: (() => {
-                    const id = currentValue[0];
-                    const item = idMap[id];
-                    // Show loading skeleton while fetching initial values
-                    if (item === undefined &&
-                        (isLoadingInitialValues || isFetchingInitialValues) &&
-                        missingIds.includes(id)) {
-                        return jsx(Skeleton, { height: "24px", width: "100px", borderRadius: "md" });
-                    }
-                    // Only show "not found" if we're not loading and item is still missing
-                    if (item === undefined) {
-                        return (jsx(Text, { fontSize: "sm", children: idPickerLabels?.undefined ?? 'Undefined' }));
-                    }
-                    return jsx(Text, { fontSize: "sm", children: renderDisplayFunction(item) });
-                })() })), jsxs(Combobox.Root, { collection: collection, value: currentValue, onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, multiple: false, closeOnSelect: true, openOnClick: true, invalid: !!errors[colLabel], width: "100%", positioning: insideDialog
-                    ? { strategy: 'fixed', hideWhenDetached: true }
-                    : undefined, children: [jsxs(Combobox.Control, { children: [jsx(Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? 'Type to search' }), jsxs(Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, { size: "xs" }), isError && (jsx(Icon, { color: "fg.error", children: jsx(BiError, {}) })), currentValue.length > 0 && (jsx(Combobox.ClearTrigger, { onClick: () => {
-                                            setValue(colLabel, '');
-                                        } })), jsx(Combobox.Trigger, {})] })] }), insideDialog ? (jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
+    // Get the selected value for single selection display
+    const selectedId = currentValue.length > 0 ? currentValue[0] : null;
+    const selectedItem = selectedId
+        ? idMap[selectedId]
+        : undefined;
+    // Use itemToValue to get the combobox value from the selected item, or use the ID directly
+    const comboboxValue = selectedItem
+        ? itemToString(selectedItem)
+        : selectedId || '';
+    // itemToString is available from the hook and can be used to get a readable string
+    // representation of any item. The collection's itemToString is automatically used
+    // by the combobox to display selected values.
+    // Use useCombobox hook to control input value
+    const combobox = useCombobox({
+        collection,
+        value: [comboboxValue],
+        onInputValueChange(e) {
+            setSearchText(e.inputValue);
+            filter(e.inputValue);
+        },
+        onValueChange(e) {
+            setValue(colLabel, e.value[0] || '');
+            // Clear the input value after selection
+            setSearchText('');
+        },
+        multiple: false,
+        closeOnSelect: true,
+        openOnClick: true,
+        invalid: !!errors[colLabel],
+    });
+    // Use renderDisplay from hook (which comes from schema) or fallback to default
+    const renderDisplayFunction = renderDisplayFn || defaultRenderDisplay;
+    // Get the selected value for single selection display (already computed above)
+    const selectedRendered = selectedItem
+        ? renderDisplayFunction(selectedItem)
+        : null;
+    return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(Combobox.RootProvider, { value: combobox, width: "100%", children: [jsx(Show, { when: selectedId && selectedRendered, children: jsxs(HStack, { justifyContent: 'space-between', children: [jsx(Box, { children: selectedRendered }), currentValue.length > 0 && (jsx(Button$1, { variant: "ghost", size: "sm", onClick: () => {
+                                    setValue(colLabel, '');
+                                }, children: jsx(Icon, { children: jsx(BiX, {}) }) }))] }) }), jsx(Show, { when: !selectedId || !selectedRendered, children: jsxs(Combobox.Control, { position: "relative", children: [jsx(Combobox.Input, { placeholder: idPickerLabels?.typeToSearch ?? 'Type to search' }), jsxs(Combobox.IndicatorGroup, { children: [(isFetching || isLoading || isPending) && jsx(Spinner, { size: "xs" }), isError && (jsx(Icon, { color: "fg.error", children: jsx(BiError, {}) })), jsx(Combobox.Trigger, {})] })] }) }), insideDialog ? (jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
+                        // Show skeleton items to prevent UI shift
+                        jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
+                                ? idPickerLabels?.emptySearchResult ?? 'No results found'
+                                : idPickerLabels?.initialResults ??
+                                    'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [renderDisplayFunction(item.raw), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
                             // Show skeleton items to prevent UI shift
                             jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
                                     ? idPickerLabels?.emptySearchResult ?? 'No results found'
                                     : idPickerLabels?.initialResults ??
-                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                ? renderDisplayFunction(item.raw)
-                                                : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
-                                // Show skeleton items to prevent UI shift
-                                jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
-                                        ? idPickerLabels?.emptySearchResult ?? 'No results found'
-                                        : idPickerLabels?.initialResults ??
-                                            'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                    ? renderDisplayFunction(item.raw)
-                                                    : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
+                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsx(Combobox.Item, { item: item, children: renderDisplayFunction(item.raw) }, item.value ?? `item-${index}`))) })) }) }) }))] }) }));
 };
 
 const IdPickerMultiple = ({ column, schema, prefix, }) => {
     const formI18n = useFormI18n(column, prefix, schema);
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', renderDisplay, } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1' } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const { colLabel, currentValue, searchText, setSearchText, isLoading, isFetching, isPending, isError, isSearching, isLoadingInitialValues, isFetchingInitialValues, missingIds, collection, idMap, idPickerLabels, insideDialog, renderDisplay: renderDisplayFn, errors, setValue, } = useIdPickerData({
         column,
@@ -5965,7 +6342,8 @@ const IdPickerMultiple = ({ column, schema, prefix, }) => {
     const handleValueChange = (details) => {
         setValue(colLabel, details.value);
     };
-    const renderDisplayFunction = renderDisplayFn || renderDisplay || defaultRenderDisplay;
+    // Use renderDisplay from hook (which comes from schema) or fallback to default
+    const renderDisplayFunction = renderDisplayFn || defaultRenderDisplay;
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: [currentValue.length > 0 && (jsx(Flex, { flexFlow: 'wrap', gap: 1, mb: 2, children: currentValue.map((id) => {
                     const item = idMap[id];
@@ -5990,16 +6368,12 @@ const IdPickerMultiple = ({ column, schema, prefix, }) => {
                             jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
                                     ? idPickerLabels?.emptySearchResult ?? 'No results found'
                                     : idPickerLabels?.initialResults ??
-                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                ? renderDisplayFunction(item.raw)
-                                                : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
+                                        'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [renderDisplayFunction(item.raw), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) })) : (jsx(Portal, { children: jsx(Combobox.Positioner, { children: jsx(Combobox.Content, { children: isError ? (jsx(Text, { p: 2, color: "fg.error", fontSize: "sm", children: idPickerLabels?.emptySearchResult ?? 'Loading failed' })) : isFetching || isLoading || isPending || isSearching ? (
                                 // Show skeleton items to prevent UI shift
                                 jsx(Fragment, { children: Array.from({ length: 5 }).map((_, index) => (jsx(Flex, { p: 2, align: "center", gap: 2, children: jsx(Skeleton, { height: "20px", flex: "1" }) }, `skeleton-${index}`))) })) : collection.items.length === 0 ? (jsx(Combobox.Empty, { children: searchText
                                         ? idPickerLabels?.emptySearchResult ?? 'No results found'
                                         : idPickerLabels?.initialResults ??
-                                            'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [jsx(Combobox.ItemText, { children: !!renderDisplayFunction === true
-                                                    ? renderDisplayFunction(item.raw)
-                                                    : item.label }), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
+                                            'Start typing to search' })) : (jsx(Fragment, { children: collection.items.map((item, index) => (jsxs(Combobox.Item, { item: item, children: [renderDisplayFunction(item.raw), jsx(Combobox.ItemIndicator, {})] }, item.value ?? `item-${index}`))) })) }) }) }))] })] }));
 };
 
 const NumberInputRoot = React.forwardRef(function NumberInput$1(props, ref) {
@@ -6183,31 +6557,35 @@ RadioCard.ItemIndicator;
 
 const TagPicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -6215,17 +6593,19 @@ const TagPicker = ({ column, schema, prefix }) => {
     const existingTagsQuery = useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -6236,9 +6616,9 @@ const TagPicker = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsx(Fragment, {});
     }
-    return (jsxs(Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxs(Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -6250,20 +6630,20 @@ const TagPicker = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsx(CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const Textarea = forwardRef(({ value, defaultValue, placeholder, onChange, onFocus, onBlur, disabled = false, readOnly = false, className, rows = 4, maxLength, autoFocus = false, invalid = false, required = false, label, helperText, errorText, ...props }, ref) => {
@@ -6370,11 +6750,193 @@ const TextAreaInput = ({ column, schema, prefix, }) => {
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
-const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem, onChange = () => { }, startTime, selectedDate, timezone = 'Asia/Hong_Kong', portalled = true, labels = {
-    placeholder: 'hh:mm AM/PM',
-    emptyMessage: 'No time found',
-}, }) => {
-    // Generate time options (every 15 minutes in 12-hour format)
+const TimePicker$1 = (props) => {
+    const { format = '12h', value: controlledValue, onChange: controlledOnChange, hour: uncontrolledHour, setHour: uncontrolledSetHour, minute: uncontrolledMinute, setMinute: uncontrolledSetMinute, startTime, selectedDate, timezone = 'Asia/Hong_Kong', portalled = true, labels = {
+        placeholder: format === '24h' ? 'HH:mm:ss' : 'hh:mm AM/PM',
+        emptyMessage: 'No time found',
+    }, onTimeChange, } = props;
+    const is24Hour = format === '24h';
+    const uncontrolledMeridiem = is24Hour ? undefined : props.meridiem;
+    const uncontrolledSetMeridiem = is24Hour ? undefined : props.setMeridiem;
+    const uncontrolledSecond = is24Hour ? props.second : undefined;
+    const uncontrolledSetSecond = is24Hour ? props.setSecond : undefined;
+    // Determine if we're in controlled mode
+    const isControlled = controlledValue !== undefined;
+    // Parse time string to extract hour, minute, second, meridiem
+    const parseTimeString = (timeStr) => {
+        if (!timeStr || !timeStr.trim()) {
+            return { hour: null, minute: null, second: null, meridiem: null };
+        }
+        // Remove timezone suffix if present (e.g., "14:30:00Z" -> "14:30:00")
+        const timeWithoutTz = timeStr.replace(/[Z+-]\d{2}:?\d{2}$/, '').trim();
+        // Try parsing 24-hour format: "HH:mm:ss" or "HH:mm"
+        const time24Pattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
+        const match24 = timeWithoutTz.match(time24Pattern);
+        if (match24) {
+            const hour24 = parseInt(match24[1], 10);
+            const minute = parseInt(match24[2], 10);
+            const second = match24[3] ? parseInt(match24[3], 10) : 0;
+            if (hour24 >= 0 &&
+                hour24 <= 23 &&
+                minute >= 0 &&
+                minute <= 59 &&
+                second >= 0 &&
+                second <= 59) {
+                if (is24Hour) {
+                    return { hour: hour24, minute, second, meridiem: null };
+                }
+                else {
+                    // Convert to 12-hour format
+                    let hour12 = hour24;
+                    let meridiem;
+                    if (hour24 === 0) {
+                        hour12 = 12;
+                        meridiem = 'am';
+                    }
+                    else if (hour24 === 12) {
+                        hour12 = 12;
+                        meridiem = 'pm';
+                    }
+                    else if (hour24 > 12) {
+                        hour12 = hour24 - 12;
+                        meridiem = 'pm';
+                    }
+                    else {
+                        hour12 = hour24;
+                        meridiem = 'am';
+                    }
+                    return { hour: hour12, minute, second: null, meridiem };
+                }
+            }
+        }
+        // Try parsing 12-hour format: "hh:mm AM/PM" or "hh:mm:ss AM/PM"
+        const time12Pattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?\s*(am|pm|AM|PM)$/i;
+        const match12 = timeWithoutTz.match(time12Pattern);
+        if (match12 && !is24Hour) {
+            const hour12 = parseInt(match12[1], 10);
+            const minute = parseInt(match12[2], 10);
+            const second = match12[3] ? parseInt(match12[3], 10) : null;
+            const meridiem = match12[4].toLowerCase();
+            if (hour12 >= 1 &&
+                hour12 <= 12 &&
+                minute >= 0 &&
+                minute <= 59 &&
+                (second === null || (second >= 0 && second <= 59))) {
+                return { hour: hour12, minute, second, meridiem };
+            }
+        }
+        return { hour: null, minute: null, second: null, meridiem: null };
+    };
+    // Format time values to time string
+    const formatTimeString = (hour, minute, second, meridiem) => {
+        if (hour === null || minute === null) {
+            return undefined;
+        }
+        if (is24Hour) {
+            const h = hour.toString().padStart(2, '0');
+            const m = minute.toString().padStart(2, '0');
+            const s = (second ?? 0).toString().padStart(2, '0');
+            return `${h}:${m}:${s}`;
+        }
+        else {
+            if (meridiem === null) {
+                return undefined;
+            }
+            const h = hour.toString();
+            const m = minute.toString().padStart(2, '0');
+            return `${h}:${m} ${meridiem.toUpperCase()}`;
+        }
+    };
+    // Internal state for controlled mode
+    const [internalHour, setInternalHour] = useState(null);
+    const [internalMinute, setInternalMinute] = useState(null);
+    const [internalSecond, setInternalSecond] = useState(null);
+    const [internalMeridiem, setInternalMeridiem] = useState(null);
+    // Use controlled or uncontrolled values
+    const hour = isControlled ? internalHour : uncontrolledHour ?? null;
+    const minute = isControlled ? internalMinute : uncontrolledMinute ?? null;
+    const second = isControlled ? internalSecond : uncontrolledSecond ?? null;
+    const meridiem = isControlled
+        ? internalMeridiem
+        : uncontrolledMeridiem ?? null;
+    // Setters that work for both modes
+    const setHour = isControlled
+        ? setInternalHour
+        : uncontrolledSetHour || (() => { });
+    const setMinute = isControlled
+        ? setInternalMinute
+        : uncontrolledSetMinute || (() => { });
+    const setSecond = isControlled
+        ? setInternalSecond
+        : uncontrolledSetSecond || (() => { });
+    const setMeridiem = isControlled
+        ? setInternalMeridiem
+        : uncontrolledSetMeridiem || (() => { });
+    // Sync internal state with controlled value prop
+    const prevValueRef = useRef(controlledValue);
+    useEffect(() => {
+        if (!isControlled)
+            return;
+        if (prevValueRef.current === controlledValue) {
+            return;
+        }
+        prevValueRef.current = controlledValue;
+        const parsed = parseTimeString(controlledValue);
+        setInternalHour(parsed.hour);
+        setInternalMinute(parsed.minute);
+        if (is24Hour) {
+            setInternalSecond(parsed.second);
+        }
+        else {
+            setInternalMeridiem(parsed.meridiem);
+        }
+    }, [controlledValue, isControlled, is24Hour]);
+    // Wrapper onChange that calls both controlled and uncontrolled onChange
+    const handleTimeChange = (newHour, newMinute, newSecond, newMeridiem) => {
+        if (isControlled) {
+            const timeString = formatTimeString(newHour, newMinute, newSecond, newMeridiem);
+            controlledOnChange?.(timeString);
+        }
+        else {
+            // Call legacy onTimeChange if provided
+            if (onTimeChange) {
+                if (is24Hour) {
+                    const timeChange24h = onTimeChange;
+                    timeChange24h({
+                        hour: newHour,
+                        minute: newMinute,
+                        second: newSecond,
+                    });
+                }
+                else {
+                    const timeChange12h = onTimeChange;
+                    timeChange12h({
+                        hour: newHour,
+                        minute: newMinute,
+                        meridiem: newMeridiem,
+                    });
+                }
+            }
+        }
+    };
+    const [inputValue, setInputValue] = useState('');
+    // Sync inputValue with current time
+    useEffect(() => {
+        if (is24Hour && second !== undefined) {
+            if (hour !== null && minute !== null && second !== null) {
+                const formatted = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
+                setInputValue(formatted);
+            }
+            else {
+                setInputValue('');
+            }
+        }
+        else {
+            // 12-hour format - input is managed by combobox
+            setInputValue('');
+        }
+    }, [hour, minute, second, is24Hour]);
+    // Generate time options based on format
     const timeOptions = useMemo(() => {
         const options = [];
         // Get start time for comparison if provided
@@ -6385,32 +6947,25 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
             const selectedDateObj = dayjs(selectedDate).tz(timezone);
             if (startDateObj.isValid() && selectedDateObj.isValid()) {
                 startDateTime = startDateObj;
-                // Only filter if dates are the same
                 shouldFilterByDate =
                     startDateObj.format('YYYY-MM-DD') ===
                         selectedDateObj.format('YYYY-MM-DD');
             }
         }
-        // Generate 12-hour format options (1-12 for hours, AM/PM)
-        for (let h = 1; h <= 12; h++) {
-            for (let m = 0; m < 60; m += 15) {
-                for (const mer of ['am', 'pm']) {
-                    // Convert 12-hour to 24-hour for comparison
-                    let hour24 = h;
-                    if (mer === 'am' && h === 12)
-                        hour24 = 0;
-                    else if (mer === 'pm' && h < 12)
-                        hour24 = h + 12;
-                    // Filter out times that would result in negative duration (only when dates are the same)
+        if (is24Hour) {
+            // Generate 24-hour format options (0-23 for hours)
+            for (let h = 0; h < 24; h++) {
+                for (let m = 0; m < 60; m += 15) {
+                    // Filter out times that would result in negative duration
                     if (startDateTime && selectedDate && shouldFilterByDate) {
                         const selectedDateObj = dayjs(selectedDate).tz(timezone);
                         const optionDateTime = selectedDateObj
-                            .hour(hour24)
+                            .hour(h)
                             .minute(m)
                             .second(0)
                             .millisecond(0);
                         if (optionDateTime.isBefore(startDateTime)) {
-                            continue; // Skip this option as it would result in negative duration
+                            continue;
                         }
                     }
                     // Calculate duration if startTime is provided
@@ -6418,7 +6973,7 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
                     if (startDateTime && selectedDate) {
                         const selectedDateObj = dayjs(selectedDate).tz(timezone);
                         const optionDateTime = selectedDateObj
-                            .hour(hour24)
+                            .hour(h)
                             .minute(m)
                             .second(0)
                             .millisecond(0);
@@ -6443,58 +6998,204 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
                             }
                         }
                     }
-                    const hourDisplay = h.toString();
-                    const minuteDisplay = m.toString().padStart(2, '0');
-                    const timeDisplay = `${hourDisplay}:${minuteDisplay} ${mer.toUpperCase()}`;
+                    const timeDisplay = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:00`;
                     options.push({
                         label: timeDisplay,
-                        value: `${h}:${m}:${mer}`,
+                        value: `${h}:${m}:0`,
                         hour: h,
                         minute: m,
-                        meridiem: mer,
-                        searchText: timeDisplay, // Use base time without duration for searching
+                        second: 0,
+                        searchText: timeDisplay,
                         durationText,
                     });
                 }
             }
         }
+        else {
+            // Generate 12-hour format options (1-12 for hours, AM/PM)
+            for (let h = 1; h <= 12; h++) {
+                for (let m = 0; m < 60; m += 15) {
+                    for (const mer of ['am', 'pm']) {
+                        // Convert 12-hour to 24-hour for comparison
+                        let hour24 = h;
+                        if (mer === 'am' && h === 12)
+                            hour24 = 0;
+                        else if (mer === 'pm' && h < 12)
+                            hour24 = h + 12;
+                        // Filter out times that would result in negative duration
+                        if (startDateTime && selectedDate && shouldFilterByDate) {
+                            const selectedDateObj = dayjs(selectedDate).tz(timezone);
+                            const optionDateTime = selectedDateObj
+                                .hour(hour24)
+                                .minute(m)
+                                .second(0)
+                                .millisecond(0);
+                            if (optionDateTime.isBefore(startDateTime)) {
+                                continue;
+                            }
+                        }
+                        // Calculate duration if startTime is provided
+                        let durationText;
+                        if (startDateTime && selectedDate) {
+                            const selectedDateObj = dayjs(selectedDate).tz(timezone);
+                            const optionDateTime = selectedDateObj
+                                .hour(hour24)
+                                .minute(m)
+                                .second(0)
+                                .millisecond(0);
+                            if (optionDateTime.isValid() &&
+                                optionDateTime.isAfter(startDateTime)) {
+                                const diffMs = optionDateTime.diff(startDateTime);
+                                const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+                                const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+                                const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+                                if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+                                    let diffText = '';
+                                    if (diffHours > 0) {
+                                        diffText = `${diffHours}h ${diffMinutes}m`;
+                                    }
+                                    else if (diffMinutes > 0) {
+                                        diffText = `${diffMinutes}m ${diffSeconds}s`;
+                                    }
+                                    else {
+                                        diffText = `${diffSeconds}s`;
+                                    }
+                                    durationText = `+${diffText}`;
+                                }
+                            }
+                        }
+                        const hourDisplay = h.toString();
+                        const minuteDisplay = m.toString().padStart(2, '0');
+                        const timeDisplay = `${hourDisplay}:${minuteDisplay} ${mer.toUpperCase()}`;
+                        options.push({
+                            label: timeDisplay,
+                            value: `${h}:${m}:${mer}`,
+                            hour: h,
+                            minute: m,
+                            meridiem: mer,
+                            searchText: timeDisplay,
+                            durationText,
+                        });
+                    }
+                }
+            }
+            // Sort 12-hour options by time (convert to 24-hour for proper chronological sorting)
+            return options.sort((a, b) => {
+                const a12 = a;
+                const b12 = b;
+                let hour24A = a12.hour;
+                if (a12.meridiem === 'am' && a12.hour === 12)
+                    hour24A = 0;
+                else if (a12.meridiem === 'pm' && a12.hour < 12)
+                    hour24A = a12.hour + 12;
+                let hour24B = b12.hour;
+                if (b12.meridiem === 'am' && b12.hour === 12)
+                    hour24B = 0;
+                else if (b12.meridiem === 'pm' && b12.hour < 12)
+                    hour24B = b12.hour + 12;
+                if (hour24A !== hour24B) {
+                    return hour24A - hour24B;
+                }
+                return a12.minute - b12.minute;
+            });
+        }
         return options;
-    }, [startTime, selectedDate, timezone]);
+    }, [startTime, selectedDate, timezone, is24Hour]);
+    // itemToString returns only the clean display text (no metadata)
+    const itemToString = useMemo(() => {
+        return (item) => {
+            return item.searchText;
+        };
+    }, []);
+    // Custom filter function
     const { contains } = useFilter({ sensitivity: 'base' });
+    const customTimeFilter = useMemo(() => {
+        if (is24Hour) {
+            return contains; // Simple contains filter for 24-hour format
+        }
+        // For 12-hour format, support both 12-hour and 24-hour input
+        return (itemText, filterText) => {
+            if (!filterText) {
+                return true;
+            }
+            const lowerItemText = itemText.toLowerCase();
+            const lowerFilterText = filterText.toLowerCase();
+            if (lowerItemText.includes(lowerFilterText)) {
+                return true;
+            }
+            const item = timeOptions.find((opt) => opt.searchText.toLowerCase() === lowerItemText);
+            if (!item || !('meridiem' in item)) {
+                return false;
+            }
+            // Convert item to 24-hour format for matching
+            let hour24 = item.hour;
+            if (item.meridiem === 'am' && item.hour === 12)
+                hour24 = 0;
+            else if (item.meridiem === 'pm' && item.hour < 12)
+                hour24 = item.hour + 12;
+            const hour24Str = hour24.toString().padStart(2, '0');
+            const minuteStr = item.minute.toString().padStart(2, '0');
+            const formats = [
+                `${hour24Str}:${minuteStr}`,
+                `${hour24Str}${minuteStr}`,
+                hour24Str,
+                `${hour24}:${minuteStr}`,
+                hour24.toString(),
+            ];
+            return formats.some((format) => format.toLowerCase().includes(lowerFilterText) ||
+                lowerFilterText.includes(format.toLowerCase()));
+        };
+    }, [timeOptions, is24Hour, contains]);
     const { collection, filter } = useListCollection({
         initialItems: timeOptions,
-        itemToString: (item) => item.searchText, // Use searchText (without duration) for filtering
+        itemToString: itemToString,
         itemToValue: (item) => item.value,
-        filter: contains,
+        filter: customTimeFilter,
     });
     // Get current value string for combobox
     const currentValue = useMemo(() => {
-        if (hour === null || minute === null || meridiem === null) {
-            return '';
+        if (is24Hour) {
+            if (hour === null || minute === null || second === null) {
+                return '';
+            }
+            return `${hour}:${minute}:${second}`;
+        }
+        else {
+            if (hour === null || minute === null || meridiem === null) {
+                return '';
+            }
+            return `${hour}:${minute}:${meridiem}`;
         }
-        return `${hour}:${minute}:${meridiem}`;
-    }, [hour, minute, meridiem]);
+    }, [hour, minute, second, meridiem, is24Hour]);
     // Calculate duration difference
     const durationDiff = useMemo(() => {
-        if (!startTime ||
-            !selectedDate ||
-            hour === null ||
-            minute === null ||
-            meridiem === null) {
+        if (!startTime || !selectedDate || hour === null || minute === null) {
             return null;
         }
+        if (is24Hour) {
+            if (second === null)
+                return null;
+        }
+        else {
+            if (meridiem === null)
+                return null;
+        }
         const startDateObj = dayjs(startTime).tz(timezone);
         const selectedDateObj = dayjs(selectedDate).tz(timezone);
-        // Convert 12-hour to 24-hour format
+        // Convert to 24-hour format
         let hour24 = hour;
-        if (meridiem === 'am' && hour === 12)
-            hour24 = 0;
-        else if (meridiem === 'pm' && hour < 12)
-            hour24 = hour + 12;
+        if (!is24Hour && meridiem) {
+            if (meridiem === 'am' && hour === 12)
+                hour24 = 0;
+            else if (meridiem === 'pm' && hour < 12)
+                hour24 = hour + 12;
+        }
         const currentDateTime = selectedDateObj
             .hour(hour24)
             .minute(minute)
-            .second(0)
+            .second(is24Hour && second !== null && second !== undefined
+            ? second
+            : 0)
             .millisecond(0);
         if (!startDateObj.isValid() || !currentDateTime.isValid()) {
             return null;
@@ -6520,13 +7221,28 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
             return `+${diffText}`;
         }
         return null;
-    }, [hour, minute, meridiem, startTime, selectedDate, timezone]);
+    }, [
+        hour,
+        minute,
+        second,
+        meridiem,
+        startTime,
+        selectedDate,
+        timezone,
+        is24Hour,
+    ]);
     const handleClear = () => {
         setHour(null);
         setMinute(null);
-        setMeridiem(null);
-        filter(''); // Reset filter to show all options
-        onChange({ hour: null, minute: null, meridiem: null });
+        if (is24Hour && setSecond) {
+            setSecond(null);
+            handleTimeChange(null, null, null, null);
+        }
+        else if (!is24Hour && setMeridiem) {
+            setMeridiem(null);
+            handleTimeChange(null, null, null, null);
+        }
+        filter('');
     };
     const handleValueChange = (details) => {
         if (details.value.length === 0) {
@@ -6538,71 +7254,165 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
         if (selectedOption) {
             setHour(selectedOption.hour);
             setMinute(selectedOption.minute);
-            setMeridiem(selectedOption.meridiem);
-            filter(''); // Reset filter after selection
-            onChange({
-                hour: selectedOption.hour,
-                minute: selectedOption.minute,
-                meridiem: selectedOption.meridiem,
-            });
+            filter('');
+            if (is24Hour) {
+                const opt24 = selectedOption;
+                if (setSecond)
+                    setSecond(opt24.second);
+                handleTimeChange(opt24.hour, opt24.minute, opt24.second, null);
+            }
+            else {
+                const opt12 = selectedOption;
+                if (setMeridiem)
+                    setMeridiem(opt12.meridiem);
+                handleTimeChange(opt12.hour, opt12.minute, null, opt12.meridiem);
+            }
         }
     };
     // Parse input value and update state
     const parseAndCommitInput = (value) => {
         const trimmedValue = value.trim();
-        // Filter the collection based on input
         filter(trimmedValue);
         if (!trimmedValue) {
             return;
         }
-        // Parse formats like "1:30 PM", "1:30PM", "1:30 pm", "1:30pm"
-        const timePattern12Hour = /^(\d{1,2}):(\d{1,2})\s*(am|pm|AM|PM)$/i;
-        const match12Hour = trimmedValue.match(timePattern12Hour);
-        if (match12Hour) {
-            const parsedHour = parseInt(match12Hour[1], 10);
-            const parsedMinute = parseInt(match12Hour[2], 10);
-            const parsedMeridiem = match12Hour[3].toLowerCase();
-            // Validate ranges
-            if (parsedHour >= 1 &&
-                parsedHour <= 12 &&
-                parsedMinute >= 0 &&
-                parsedMinute <= 59) {
-                setHour(parsedHour);
-                setMinute(parsedMinute);
-                setMeridiem(parsedMeridiem);
-                onChange({
-                    hour: parsedHour,
-                    minute: parsedMinute,
-                    meridiem: parsedMeridiem,
-                });
-                return;
+        if (is24Hour) {
+            // Parse 24-hour format: "HH:mm:ss" or "HH:mm" or "HHmmss" or "HHmm"
+            const timePattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
+            const match = trimmedValue.match(timePattern);
+            if (match) {
+                const parsedHour = parseInt(match[1], 10);
+                const parsedMinute = parseInt(match[2], 10);
+                const parsedSecond = match[3] ? parseInt(match[3], 10) : 0;
+                if (parsedHour >= 0 &&
+                    parsedHour <= 23 &&
+                    parsedMinute >= 0 &&
+                    parsedMinute <= 59 &&
+                    parsedSecond >= 0 &&
+                    parsedSecond <= 59) {
+                    setHour(parsedHour);
+                    setMinute(parsedMinute);
+                    if (setSecond)
+                        setSecond(parsedSecond);
+                    handleTimeChange(parsedHour, parsedMinute, parsedSecond, null);
+                    return;
+                }
+            }
+            // Try numbers only format: "123045" or "1230"
+            const numbersOnly = trimmedValue.replace(/[^0-9]/g, '');
+            if (numbersOnly.length >= 4) {
+                const parsedHour = parseInt(numbersOnly.slice(0, 2), 10);
+                const parsedMinute = parseInt(numbersOnly.slice(2, 4), 10);
+                const parsedSecond = numbersOnly.length >= 6 ? parseInt(numbersOnly.slice(4, 6), 10) : 0;
+                if (parsedHour >= 0 &&
+                    parsedHour <= 23 &&
+                    parsedMinute >= 0 &&
+                    parsedMinute <= 59 &&
+                    parsedSecond >= 0 &&
+                    parsedSecond <= 59) {
+                    setHour(parsedHour);
+                    setMinute(parsedMinute);
+                    if (setSecond)
+                        setSecond(parsedSecond);
+                    handleTimeChange(parsedHour, parsedMinute, parsedSecond, null);
+                    return;
+                }
             }
         }
-        // Try to parse formats like "130pm" or "130 pm" (without colon)
-        const timePatternNoColon = /^(\d{1,4})\s*(am|pm|AM|PM)$/i;
-        const matchNoColon = trimmedValue.match(timePatternNoColon);
-        if (matchNoColon) {
-            const numbersOnly = matchNoColon[1];
-            const parsedMeridiem = matchNoColon[2].toLowerCase();
-            if (numbersOnly.length >= 3) {
-                const parsedHour = parseInt(numbersOnly.slice(0, -2), 10);
-                const parsedMinute = parseInt(numbersOnly.slice(-2), 10);
-                // Validate ranges
+        else {
+            // Parse 24-hour format first (e.g., "13:30", "14:00", "1330", "1400")
+            const timePattern24Hour = /^(\d{1,2}):?(\d{2})$/;
+            const match24Hour = trimmedValue.match(timePattern24Hour);
+            if (match24Hour) {
+                const parsedHour24 = parseInt(match24Hour[1], 10);
+                const parsedMinute = parseInt(match24Hour[2], 10);
+                if (parsedHour24 >= 0 &&
+                    parsedHour24 <= 23 &&
+                    parsedMinute >= 0 &&
+                    parsedMinute <= 59) {
+                    // Convert 24-hour to 12-hour format
+                    let hour12;
+                    let meridiem;
+                    if (parsedHour24 === 0) {
+                        hour12 = 12;
+                        meridiem = 'am';
+                    }
+                    else if (parsedHour24 === 12) {
+                        hour12 = 12;
+                        meridiem = 'pm';
+                    }
+                    else if (parsedHour24 > 12) {
+                        hour12 = parsedHour24 - 12;
+                        meridiem = 'pm';
+                    }
+                    else {
+                        hour12 = parsedHour24;
+                        meridiem = 'am';
+                    }
+                    setHour(hour12);
+                    setMinute(parsedMinute);
+                    if (setMeridiem)
+                        setMeridiem(meridiem);
+                    handleTimeChange(hour12, parsedMinute, null, meridiem);
+                    return;
+                }
+            }
+            // Parse formats like "1:30 PM", "1:30PM", "1:30 pm", "1:30pm"
+            const timePattern12Hour = /^(\d{1,2}):(\d{1,2})\s*(am|pm|AM|PM)$/i;
+            const match12Hour = trimmedValue.match(timePattern12Hour);
+            if (match12Hour) {
+                const parsedHour = parseInt(match12Hour[1], 10);
+                const parsedMinute = parseInt(match12Hour[2], 10);
+                const parsedMeridiem = match12Hour[3].toLowerCase();
                 if (parsedHour >= 1 &&
                     parsedHour <= 12 &&
                     parsedMinute >= 0 &&
                     parsedMinute <= 59) {
                     setHour(parsedHour);
                     setMinute(parsedMinute);
-                    setMeridiem(parsedMeridiem);
-                    onChange({
-                        hour: parsedHour,
-                        minute: parsedMinute,
-                        meridiem: parsedMeridiem,
-                    });
+                    if (setMeridiem)
+                        setMeridiem(parsedMeridiem);
+                    handleTimeChange(parsedHour, parsedMinute, null, parsedMeridiem);
+                    return;
+                }
+            }
+            // Parse formats like "12am" or "1pm" (hour only with meridiem, no minutes)
+            const timePatternHourOnly = /^(\d{1,2})\s*(am|pm|AM|PM)$/i;
+            const matchHourOnly = trimmedValue.match(timePatternHourOnly);
+            if (matchHourOnly) {
+                const parsedHour = parseInt(matchHourOnly[1], 10);
+                const parsedMeridiem = matchHourOnly[2].toLowerCase();
+                if (parsedHour >= 1 && parsedHour <= 12) {
+                    setHour(parsedHour);
+                    setMinute(0); // Default to 0 minutes when only hour is provided
+                    if (setMeridiem)
+                        setMeridiem(parsedMeridiem);
+                    handleTimeChange(parsedHour, 0, null, parsedMeridiem);
                     return;
                 }
             }
+            // Try to parse formats like "130pm" or "130 pm" (without colon, with minutes)
+            const timePatternNoColon = /^(\d{1,4})\s*(am|pm|AM|PM)$/i;
+            const matchNoColon = trimmedValue.match(timePatternNoColon);
+            if (matchNoColon) {
+                const numbersOnly = matchNoColon[1];
+                const parsedMeridiem = matchNoColon[2].toLowerCase();
+                if (numbersOnly.length >= 3) {
+                    const parsedHour = parseInt(numbersOnly.slice(0, -2), 10);
+                    const parsedMinute = parseInt(numbersOnly.slice(-2), 10);
+                    if (parsedHour >= 1 &&
+                        parsedHour <= 12 &&
+                        parsedMinute >= 0 &&
+                        parsedMinute <= 59) {
+                        setHour(parsedHour);
+                        setMinute(parsedMinute);
+                        if (setMeridiem)
+                            setMeridiem(parsedMeridiem);
+                        handleTimeChange(parsedHour, parsedMinute, null, parsedMeridiem);
+                        return;
+                    }
+                }
+            }
         }
         // Parse failed, select first result
         selectFirstResult();
@@ -6613,58 +7423,87 @@ const TimePicker$1 = ({ hour, setHour, minute, setMinute, meridiem, setMeridiem,
             const firstItem = collection.items[0];
             setHour(firstItem.hour);
             setMinute(firstItem.minute);
-            setMeridiem(firstItem.meridiem);
-            filter(''); // Reset filter after selection
-            onChange({
-                hour: firstItem.hour,
-                minute: firstItem.minute,
-                meridiem: firstItem.meridiem,
-            });
+            filter('');
+            if (is24Hour) {
+                const opt24 = firstItem;
+                if (setSecond)
+                    setSecond(opt24.second);
+                handleTimeChange(opt24.hour, opt24.minute, opt24.second, null);
+            }
+            else {
+                const opt12 = firstItem;
+                if (setMeridiem)
+                    setMeridiem(opt12.meridiem);
+                handleTimeChange(opt12.hour, opt12.minute, null, opt12.meridiem);
+            }
         }
     };
     const handleInputValueChange = (details) => {
-        // Filter the collection based on input, but don't parse yet
+        if (is24Hour) {
+            setInputValue(details.inputValue);
+        }
         filter(details.inputValue);
     };
     const handleFocus = (e) => {
-        // Select all text when focusing
         e.target.select();
     };
     const handleBlur = (e) => {
-        // Parse and commit the input value when losing focus
-        const inputValue = e.target.value;
-        if (inputValue) {
-            parseAndCommitInput(inputValue);
+        const inputVal = e.target.value;
+        if (is24Hour) {
+            setInputValue(inputVal);
+        }
+        if (inputVal) {
+            parseAndCommitInput(inputVal);
         }
     };
     const handleKeyDown = (e) => {
-        // Commit input on Enter key
         if (e.key === 'Enter') {
             e.preventDefault();
-            const inputValue = e.currentTarget.value;
-            if (inputValue) {
-                parseAndCommitInput(inputValue);
+            const inputVal = e.currentTarget.value;
+            if (is24Hour) {
+                setInputValue(inputVal);
+            }
+            if (inputVal) {
+                parseAndCommitInput(inputVal);
             }
-            // Blur the input
             e.currentTarget?.blur();
         }
     };
-    return (jsx(Flex, { direction: "column", gap: 3, children: jsxs(Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxs(Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { placeholder: labels?.placeholder ?? 'hh:mm AM/PM', onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: !portalled, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: labels?.emptyMessage ?? 'No time found' }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsx(Text, { flex: 1, children: item.label }), item.durationText && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: item.durationText }) }))] }), jsx(Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: durationDiff }) })), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(Icon, { children: jsx(MdCancel, {}) }) })] }) }));
+    return (jsx(Flex, { direction: "column", gap: 3, children: jsxs(Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxs(Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", flex: 1, children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { value: is24Hour ? inputValue : undefined, placeholder: labels?.placeholder ?? (is24Hour ? 'HH:mm:ss' : 'hh:mm AM/PM'), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: !portalled, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: labels?.emptyMessage ?? 'No time found' }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsx(Text, { flex: 1, children: item.label }), item.durationText && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: item.durationText }) }))] }), jsx(Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: durationDiff }) }))] }) }));
 };
 
 dayjs.extend(timezone);
 const TimePicker = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
     const { timezone, insideDialog, timePickerLabels } = useSchemaContext();
-    const { required, gridColumn = 'span 12', gridRow = 'span 1', timeFormat = 'HH:mm:ssZ', displayTimeFormat = 'hh:mm A', } = schema;
+    const { required, gridColumn = 'span 12', gridRow = 'span 1', timeFormat = 'HH:mm:ssZ', displayTimeFormat = 'hh:mm A', startTimeField, selectedDateField, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = `${prefix}${column}`;
     const formI18n = useFormI18n(column, prefix, schema);
     const [open, setOpen] = useState(false);
     const value = watch(colLabel);
-    const displayedTime = dayjs(`1970-01-01T${value}`).tz(timezone).isValid()
-        ? dayjs(`1970-01-01T${value}`).tz(timezone).format(displayTimeFormat)
-        : '';
+    // Watch startTime and selectedDate fields for offset calculation
+    const startTimeValue = startTimeField
+        ? watch(`${prefix}${startTimeField}`)
+        : undefined;
+    const selectedDateValue = selectedDateField
+        ? watch(`${prefix}${selectedDateField}`)
+        : undefined;
+    // Convert to ISO string format for startTime if it's a date-time string
+    const startTime = startTimeValue
+        ? dayjs(startTimeValue).tz(timezone).isValid()
+            ? dayjs(startTimeValue).tz(timezone).toISOString()
+            : undefined
+        : undefined;
+    // Convert selectedDate to YYYY-MM-DD format
+    const selectedDate = selectedDateValue
+        ? dayjs(selectedDateValue).tz(timezone).isValid()
+            ? dayjs(selectedDateValue).tz(timezone).format('YYYY-MM-DD')
+            : undefined
+        : undefined;
+    const displayedTime = dayjs(`1970-01-01T${value}`).tz(timezone).isValid()
+        ? dayjs(`1970-01-01T${value}`).tz(timezone).format(displayTimeFormat)
+        : '';
     // Parse the initial time parts from the  time string (HH:mm:ssZ)
     const parseTime = (time) => {
         if (!time)
@@ -6717,884 +7556,898 @@ const TimePicker = ({ column, schema, prefix }) => {
     return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
         gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], 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 ? `${displayedTime}` : ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsx(Popover.Body, { overflow: "visible", children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, labels: timePickerLabels }) }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { children: jsx(Popover.Body, { children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, labels: timePickerLabels }) }) }) }) }))] }) }));
+                        }, justifyContent: 'start', children: [jsx(IoMdClock, {}), !!value ? `${displayedTime}` : ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { maxH: "70vh", overflowY: "auto", children: jsx(Popover.Body, { overflow: "visible", children: jsx(TimePicker$1, { hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: startTime, selectedDate: selectedDate, timezone: timezone, portalled: false, labels: timePickerLabels }) }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { children: jsx(Popover.Body, { children: jsx(TimePicker$1, { format: "12h", hour: hour, setHour: setHour, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: startTime, selectedDate: selectedDate, timezone: timezone, portalled: false, labels: timePickerLabels }) }) }) }) }))] }) }));
 };
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(customParseFormat);
-function DatePickerInput({ value, onChange, placeholder = 'Select a date', dateFormat = 'YYYY-MM-DD', displayFormat = 'YYYY-MM-DD', labels = {
+function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds = false, labels = {
     monthNamesShort: [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
+        'January',
+        'February',
+        'March',
+        'April',
         'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
     ],
     weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     backButtonLabel: 'Back',
-    forwardButtonLabel: 'Next',
-}, timezone = 'Asia/Hong_Kong', minDate, maxDate, firstDayOfWeek, showOutsideDays, monthsToDisplay = 1, insideDialog = false, readOnly = false, }) {
-    const [open, setOpen] = useState(false);
-    const [inputValue, setInputValue] = useState('');
-    // Update input value when prop value changes
-    useEffect(() => {
-        if (value) {
-            const formatted = typeof value === 'string'
-                ? dayjs(value).tz(timezone).isValid()
-                    ? dayjs(value).tz(timezone).format(displayFormat)
-                    : ''
-                : dayjs(value).tz(timezone).format(displayFormat);
-            setInputValue(formatted);
-        }
-        else {
-            setInputValue('');
+    forwardButtonLabel: 'Forward',
+}, timePickerLabels, timezone: tz = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, defaultDate, defaultTime, showQuickActions = false, quickActionLabels = {
+    yesterday: 'Yesterday',
+    today: 'Today',
+    tomorrow: 'Tomorrow',
+    plus7Days: '+7 Days',
+}, showTimezoneSelector = false, timezoneOffset: controlledTimezoneOffset, onTimezoneOffsetChange, }) {
+    const is24Hour = format === 'iso-date-time' || showSeconds;
+    // Labels are used in calendarLabels useMemo
+    // Parse value to get date and time
+    const parsedValue = useMemo(() => {
+        if (!value)
+            return null;
+        const dateObj = dayjs(value).tz(tz);
+        if (!dateObj.isValid())
+            return null;
+        return dateObj;
+    }, [value, tz]);
+    // Initialize date state
+    const [selectedDate, setSelectedDate] = useState(() => {
+        if (parsedValue) {
+            return parsedValue.toDate();
+        }
+        if (defaultDate) {
+            const defaultDateObj = dayjs(defaultDate).tz(tz);
+            return defaultDateObj.isValid() ? defaultDateObj.toDate() : new Date();
+        }
+        return new Date();
+    });
+    // Initialize time state
+    const [hour, setHour] = useState(() => {
+        if (parsedValue) {
+            return parsedValue.hour();
         }
-    }, [value, displayFormat, timezone]);
-    // Convert value to Date object for DatePicker
-    const selectedDate = value
-        ? typeof value === 'string'
-            ? dayjs(value).tz(timezone).isValid()
-                ? dayjs(value).tz(timezone).toDate()
-                : new Date()
-            : value
-        : new Date();
-    // Shared function to parse and validate input value
-    const parseAndValidateInput = (inputVal) => {
-        // If empty, clear the value
-        if (!inputVal.trim()) {
-            onChange?.(undefined);
-            setInputValue('');
-            return;
+        if (defaultTime?.hour !== null && defaultTime?.hour !== undefined) {
+            return defaultTime.hour;
         }
-        // Try parsing with displayFormat first
-        let parsedDate = dayjs(inputVal, displayFormat, true);
-        // If that fails, try common date formats
-        if (!parsedDate.isValid()) {
-            parsedDate = dayjs(inputVal);
+        return null;
+    });
+    const [minute, setMinute] = useState(() => {
+        if (parsedValue) {
+            return parsedValue.minute();
         }
-        // If still invalid, try parsing with dateFormat
-        if (!parsedDate.isValid()) {
-            parsedDate = dayjs(inputVal, dateFormat, true);
+        if (defaultTime?.minute !== null && defaultTime?.minute !== undefined) {
+            return defaultTime.minute;
         }
-        // If valid, check constraints and update
-        if (parsedDate.isValid()) {
-            const dateObj = parsedDate.tz(timezone).toDate();
-            // Check min/max constraints
-            if (minDate && dateObj < minDate) {
-                // Invalid: before minDate, reset to prop value
-                resetToPropValue();
-                return;
-            }
-            if (maxDate && dateObj > maxDate) {
-                // Invalid: after maxDate, reset to prop value
-                resetToPropValue();
-                return;
-            }
-            // Valid date - format and update
-            const formattedDate = parsedDate.tz(timezone).format(dateFormat);
-            const formattedDisplay = parsedDate.tz(timezone).format(displayFormat);
-            onChange?.(formattedDate);
-            setInputValue(formattedDisplay);
+        return null;
+    });
+    const [second, setSecond] = useState(() => {
+        if (parsedValue) {
+            return parsedValue.second();
         }
-        else {
-            // Invalid date - reset to prop value
-            resetToPropValue();
+        if (defaultTime?.second !== null && defaultTime?.second !== undefined) {
+            return defaultTime.second;
         }
-    };
-    // Helper function to reset input to prop value
-    const resetToPropValue = () => {
-        if (value) {
-            const formatted = typeof value === 'string'
-                ? dayjs(value).tz(timezone).isValid()
-                    ? dayjs(value).tz(timezone).format(displayFormat)
-                    : ''
-                : dayjs(value).tz(timezone).format(displayFormat);
-            setInputValue(formatted);
+        return showSeconds ? 0 : null;
+    });
+    const [meridiem, setMeridiem] = useState(() => {
+        if (parsedValue) {
+            const h = parsedValue.hour();
+            return h < 12 ? 'am' : 'pm';
         }
-        else {
-            setInputValue('');
+        if (defaultTime?.meridiem !== null && defaultTime?.meridiem !== undefined) {
+            return defaultTime.meridiem;
         }
-    };
-    const handleInputChange = (e) => {
-        // Only update the input value, don't parse yet
-        setInputValue(e.target.value);
-    };
-    const handleInputBlur = () => {
-        // Parse and validate when input loses focus
-        parseAndValidateInput(inputValue);
-    };
-    const handleKeyDown = (e) => {
-        // Parse and validate when Enter is pressed
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            parseAndValidateInput(inputValue);
+        return is24Hour ? null : 'am';
+    });
+    // Popover state - separate for date, time, and timezone
+    const [datePopoverOpen, setDatePopoverOpen] = useState(false);
+    const [timePopoverOpen, setTimePopoverOpen] = useState(false);
+    const [timezonePopoverOpen, setTimezonePopoverOpen] = useState(false);
+    const [calendarPopoverOpen, setCalendarPopoverOpen] = useState(false);
+    // Timezone offset state (controlled or uncontrolled)
+    const [internalTimezoneOffset, setInternalTimezoneOffset] = useState(() => {
+        if (controlledTimezoneOffset !== undefined) {
+            return controlledTimezoneOffset;
+        }
+        if (parsedValue) {
+            return parsedValue.format('Z');
+        }
+        // Default to +08:00
+        return '+08:00';
+    });
+    // Use controlled prop if provided, otherwise use internal state
+    const timezoneOffset = controlledTimezoneOffset ?? internalTimezoneOffset;
+    // Update internal state when controlled prop changes
+    useEffect(() => {
+        if (controlledTimezoneOffset !== undefined) {
+            setInternalTimezoneOffset(controlledTimezoneOffset);
         }
-    };
-    const handleDateSelected = ({ date }) => {
-        const formattedDate = dayjs(date).tz(timezone).format(dateFormat);
-        onChange?.(formattedDate);
-        setOpen(false);
-    };
-    const datePickerContent = (jsx(DatePicker$1, { selected: selectedDate, onDateSelected: handleDateSelected, labels: labels, minDate: minDate, maxDate: maxDate, firstDayOfWeek: firstDayOfWeek, showOutsideDays: showOutsideDays, monthsToDisplay: monthsToDisplay }));
-    return (jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(InputGroup, { endElement: jsx(Popover.Trigger, { asChild: true, children: jsx(IconButton, { variant: "ghost", size: "2xs", "aria-label": "Open calendar", onClick: () => setOpen(true), children: jsx(Icon, { children: jsx(MdDateRange, {}) }) }) }), children: jsx(Input, { value: inputValue, onChange: handleInputChange, onBlur: handleInputBlur, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minH: "25rem", children: jsx(Popover.Body, { children: datePickerContent }) }) }) }))] }));
-}
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-function IsoTimePicker({ hour, setHour, minute, setMinute, second, setSecond, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-onChange = (_newValue) => { }, startTime, selectedDate, timezone = 'Asia/Hong_Kong', portalled = true, labels = {
-    placeholder: 'HH:mm:ss',
-    emptyMessage: 'No time found',
-}, }) {
-    // Generate time options (every 15 minutes, seconds always 0)
-    const timeOptions = useMemo(() => {
-        const options = [];
-        // Get start time for comparison if provided
-        let startDateTime = null;
-        let shouldFilterByDate = false;
-        if (startTime && selectedDate) {
-            const startDateObj = dayjs(startTime).tz(timezone);
-            const selectedDateObj = dayjs(selectedDate).tz(timezone);
-            if (startDateObj.isValid() && selectedDateObj.isValid()) {
-                startDateTime = startDateObj;
-                // Only filter if dates are the same
-                shouldFilterByDate =
-                    startDateObj.format('YYYY-MM-DD') ===
-                        selectedDateObj.format('YYYY-MM-DD');
+    }, [controlledTimezoneOffset]);
+    // Sync timezone offset when value changes (only if uncontrolled)
+    useEffect(() => {
+        if (controlledTimezoneOffset === undefined && parsedValue) {
+            const offsetFromValue = parsedValue.format('Z');
+            if (offsetFromValue !== timezoneOffset) {
+                setInternalTimezoneOffset(offsetFromValue);
             }
         }
-        for (let h = 0; h < 24; h++) {
-            for (let m = 0; m < 60; m += 15) {
-                const timeDisplay = `${h.toString().padStart(2, '0')}:${m
-                    .toString()
-                    .padStart(2, '0')}:00`;
-                // Filter out times that would result in negative duration (only when dates are the same)
-                if (startDateTime && selectedDate && shouldFilterByDate) {
-                    const selectedDateObj = dayjs(selectedDate).tz(timezone);
-                    const optionDateTime = selectedDateObj
-                        .hour(h)
-                        .minute(m)
-                        .second(0)
-                        .millisecond(0);
-                    if (optionDateTime.isBefore(startDateTime)) {
-                        continue; // Skip this option as it would result in negative duration
-                    }
-                }
-                // Calculate duration if startTime is provided
-                let durationText;
-                if (startDateTime && selectedDate) {
-                    const selectedDateObj = dayjs(selectedDate).tz(timezone);
-                    const optionDateTime = selectedDateObj
-                        .hour(h)
-                        .minute(m)
-                        .second(0)
-                        .millisecond(0);
-                    if (optionDateTime.isValid() &&
-                        optionDateTime.isAfter(startDateTime)) {
-                        const diffMs = optionDateTime.diff(startDateTime);
-                        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-                        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-                        const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
-                        if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
-                            let diffText = '';
-                            if (diffHours > 0) {
-                                diffText = `${diffHours}h ${diffMinutes}m`;
-                            }
-                            else if (diffMinutes > 0) {
-                                diffText = `${diffMinutes}m ${diffSeconds}s`;
-                            }
-                            else {
-                                diffText = `${diffSeconds}s`;
-                            }
-                            durationText = `+${diffText}`;
-                        }
-                    }
-                }
-                options.push({
-                    label: timeDisplay,
-                    value: `${h}:${m}:0`,
-                    hour: h,
-                    minute: m,
-                    second: 0,
-                    searchText: timeDisplay, // Use base time without duration for searching
-                    durationText,
-                });
-            }
+    }, [parsedValue, controlledTimezoneOffset, timezoneOffset]);
+    // Sync timezone offset when value changes
+    // Generate timezone offset options (UTC-12 to UTC+14)
+    const timezoneOffsetOptions = useMemo(() => {
+        const options = [];
+        for (let offset = -12; offset <= 14; offset++) {
+            const sign = offset >= 0 ? '+' : '-';
+            const hours = Math.abs(offset).toString().padStart(2, '0');
+            const value = `${sign}${hours}:00`;
+            const label = `UTC${sign}${hours}:00`;
+            options.push({ value, label });
         }
         return options;
-    }, [startTime, selectedDate, timezone]);
-    const { contains } = useFilter({ sensitivity: 'base' });
-    const { collection, filter } = useListCollection({
-        initialItems: timeOptions,
-        itemToString: (item) => item.searchText, // Use searchText (without duration) for filtering
+    }, []);
+    // Create collection for Select
+    const { collection: timezoneCollection } = useListCollection({
+        initialItems: timezoneOffsetOptions,
+        itemToString: (item) => item.label,
         itemToValue: (item) => item.value,
-        filter: contains,
     });
-    // Get current value string for combobox
-    const currentValue = useMemo(() => {
-        if (hour === null || minute === null || second === null) {
-            return '';
-        }
-        return `${hour}:${minute}:${second}`;
-    }, [hour, minute, second]);
-    // Calculate duration difference
-    const durationDiff = useMemo(() => {
-        if (!startTime ||
-            !selectedDate ||
-            hour === null ||
-            minute === null ||
-            second === null) {
-            return null;
-        }
-        const startDateObj = dayjs(startTime).tz(timezone);
-        const selectedDateObj = dayjs(selectedDate).tz(timezone);
-        const currentDateTime = selectedDateObj
-            .hour(hour)
-            .minute(minute)
-            .second(second ?? 0)
-            .millisecond(0);
-        if (!startDateObj.isValid() || !currentDateTime.isValid()) {
-            return null;
-        }
-        const diffMs = currentDateTime.diff(startDateObj);
-        if (diffMs < 0) {
-            return null;
+    // Ensure timezoneOffset value is valid (exists in collection)
+    const validTimezoneOffset = useMemo(() => {
+        if (!timezoneOffset)
+            return undefined;
+        const exists = timezoneOffsetOptions.some((opt) => opt.value === timezoneOffset);
+        return exists ? timezoneOffset : undefined;
+    }, [timezoneOffset, timezoneOffsetOptions]);
+    // Date input state
+    const [dateInputValue, setDateInputValue] = useState('');
+    // Sync date input value with selected date
+    useEffect(() => {
+        if (selectedDate) {
+            const formatted = dayjs(selectedDate).tz(tz).format('YYYY-MM-DD');
+            setDateInputValue(formatted);
         }
-        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
-        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
-        const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
-        if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
-            let diffText = '';
-            if (diffHours > 0) {
-                diffText = `${diffHours}h ${diffMinutes}m`;
-            }
-            else if (diffMinutes > 0) {
-                diffText = `${diffMinutes}m ${diffSeconds}s`;
-            }
-            else {
-                diffText = `${diffSeconds}s`;
-            }
-            return `+${diffText}`;
+        else {
+            setDateInputValue('');
         }
-        return null;
-    }, [hour, minute, second, startTime, selectedDate, timezone]);
-    const handleClear = () => {
-        setHour(null);
-        setMinute(null);
-        setSecond(null);
-        filter(''); // Reset filter to show all options
-        onChange({ hour: null, minute: null, second: null });
-    };
-    const handleValueChange = (details) => {
-        if (details.value.length === 0) {
-            handleClear();
+    }, [selectedDate, tz]);
+    // Parse and validate date input
+    const parseAndValidateDateInput = (inputVal) => {
+        // If empty, clear the value
+        if (!inputVal.trim()) {
+            setSelectedDate(null);
+            updateDateTime(null, hour, minute, second, meridiem);
             return;
         }
-        const selectedValue = details.value[0];
-        const selectedOption = timeOptions.find((opt) => opt.value === selectedValue);
-        if (selectedOption) {
-            setHour(selectedOption.hour);
-            setMinute(selectedOption.minute);
-            setSecond(selectedOption.second);
-            filter(''); // Reset filter after selection
-            onChange({
-                hour: selectedOption.hour,
-                minute: selectedOption.minute,
-                second: selectedOption.second,
-            });
-        }
-    };
-    // Parse input value and update state
-    const parseAndCommitInput = (value) => {
-        const trimmedValue = value.trim();
-        // Filter the collection based on input
-        filter(trimmedValue);
-        if (!trimmedValue) {
-            return;
+        // Try parsing with common date formats
+        let parsedDate = dayjs(inputVal, 'YYYY-MM-DD', true);
+        // If that fails, try other common formats
+        if (!parsedDate.isValid()) {
+            parsedDate = dayjs(inputVal);
         }
-        // Parse HH:mm:ss or HH:mm format
-        const timePattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
-        const match = trimmedValue.match(timePattern);
-        if (match) {
-            const parsedHour = parseInt(match[1], 10);
-            const parsedMinute = parseInt(match[2], 10);
-            const parsedSecond = match[3] ? parseInt(match[3], 10) : 0;
-            // Validate ranges
-            if (parsedHour >= 0 &&
-                parsedHour <= 23 &&
-                parsedMinute >= 0 &&
-                parsedMinute <= 59 &&
-                parsedSecond >= 0 &&
-                parsedSecond <= 59) {
-                setHour(parsedHour);
-                setMinute(parsedMinute);
-                setSecond(parsedSecond);
-                onChange({
-                    hour: parsedHour,
-                    minute: parsedMinute,
-                    second: parsedSecond,
-                });
+        // If valid, check constraints and update
+        if (parsedDate.isValid()) {
+            const dateObj = parsedDate.tz(tz).toDate();
+            // Check min/max constraints
+            if (minDate && dateObj < minDate) {
+                // Invalid: before minDate, reset to current selected date
+                if (selectedDate) {
+                    const formatted = dayjs(selectedDate).tz(tz).format('YYYY-MM-DD');
+                    setDateInputValue(formatted);
+                }
+                else {
+                    setDateInputValue('');
+                }
                 return;
             }
-        }
-        else {
-            // Try to parse formats like "123045" (HHmmss) or "1230" (HHmm)
-            const numbersOnly = trimmedValue.replace(/[^0-9]/g, '');
-            if (numbersOnly.length >= 4) {
-                const parsedHour = parseInt(numbersOnly.slice(0, 2), 10);
-                const parsedMinute = parseInt(numbersOnly.slice(2, 4), 10);
-                const parsedSecond = numbersOnly.length >= 6 ? parseInt(numbersOnly.slice(4, 6), 10) : 0;
-                // Validate ranges
-                if (parsedHour >= 0 &&
-                    parsedHour <= 23 &&
-                    parsedMinute >= 0 &&
-                    parsedMinute <= 59 &&
-                    parsedSecond >= 0 &&
-                    parsedSecond <= 59) {
-                    setHour(parsedHour);
-                    setMinute(parsedMinute);
-                    setSecond(parsedSecond);
-                    onChange({
-                        hour: parsedHour,
-                        minute: parsedMinute,
-                        second: parsedSecond,
-                    });
-                    return;
+            if (maxDate && dateObj > maxDate) {
+                // Invalid: after maxDate, reset to current selected date
+                if (selectedDate) {
+                    const formatted = dayjs(selectedDate).tz(tz).format('YYYY-MM-DD');
+                    setDateInputValue(formatted);
+                }
+                else {
+                    setDateInputValue('');
                 }
+                return;
             }
+            // Valid date - update selected date
+            setSelectedDate(dateObj);
+            updateDateTime(dateObj, hour, minute, second, meridiem);
+            // Format and update input value
+            const formatted = parsedDate.tz(tz).format('YYYY-MM-DD');
+            setDateInputValue(formatted);
         }
-        // Parse failed, select first result
-        selectFirstResult();
-    };
-    // Select first result from filtered collection
-    const selectFirstResult = () => {
-        if (collection.items.length > 0) {
-            const firstItem = collection.items[0];
-            setHour(firstItem.hour);
-            setMinute(firstItem.minute);
-            setSecond(firstItem.second);
-            filter(''); // Reset filter after selection
-            onChange({
-                hour: firstItem.hour,
-                minute: firstItem.minute,
-                second: firstItem.second,
-            });
+        else {
+            // Invalid date - reset to current selected date
+            if (selectedDate) {
+                const formatted = dayjs(selectedDate).tz(tz).format('YYYY-MM-DD');
+                setDateInputValue(formatted);
+            }
+            else {
+                setDateInputValue('');
+            }
         }
     };
-    const handleInputValueChange = (details) => {
-        // Filter the collection based on input, but don't parse yet
-        filter(details.inputValue);
+    const handleDateInputChange = (e) => {
+        setDateInputValue(e.target.value);
     };
-    const handleFocus = (e) => {
-        // Select all text when focusing
-        e.target.select();
+    const handleDateInputBlur = () => {
+        parseAndValidateDateInput(dateInputValue);
     };
-    const handleBlur = (e) => {
-        // Parse and commit the input value when losing focus
-        const inputValue = e.target.value;
-        if (inputValue) {
-            parseAndCommitInput(inputValue);
-        }
-    };
-    const handleKeyDown = (e) => {
-        // Commit input on Enter key
+    const handleDateInputKeyDown = (e) => {
         if (e.key === 'Enter') {
             e.preventDefault();
-            const inputValue = e.currentTarget.value;
-            if (inputValue) {
-                parseAndCommitInput(inputValue);
-            }
-            // Blur the input
-            e.currentTarget?.blur();
+            parseAndValidateDateInput(dateInputValue);
         }
     };
-    return (jsx(Flex, { direction: "column", gap: 3, children: jsxs(Flex, { alignItems: "center", gap: "2", width: "auto", minWidth: "300px", children: [jsxs(Combobox.Root, { collection: collection, value: currentValue ? [currentValue] : [], onValueChange: handleValueChange, onInputValueChange: handleInputValueChange, allowCustomValue: true, selectionBehavior: "replace", openOnClick: true, flex: 1, children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { placeholder: labels.placeholder, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: !portalled, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: labels.emptyMessage }), collection.items.map((item) => (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { alignItems: "center", gap: 2, width: "100%", children: [jsx(Text, { flex: 1, children: item.label }), item.durationText && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: item.durationText }) }))] }), jsx(Combobox.ItemIndicator, {})] }, item.value)))] }) }) })] }), durationDiff && (jsx(Tag$1.Root, { size: "sm", children: jsx(Tag$1.Label, { children: durationDiff }) })), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "ghost", children: jsx(Icon, { children: jsx(MdCancel, {}) }) })] }) }));
-}
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-function DateTimePicker$1({ value, onChange, format = 'date-time', showSeconds = false, labels = {
-    monthNamesShort: [
-        'Jan',
-        'Feb',
-        'Mar',
-        'Apr',
-        'May',
-        'Jun',
-        'Jul',
-        'Aug',
-        'Sep',
-        'Oct',
-        'Nov',
-        'Dec',
-    ],
-    weekdayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    backButtonLabel: 'Back',
-    forwardButtonLabel: 'Next',
-}, timePickerLabels, timezone = 'Asia/Hong_Kong', startTime, minDate, maxDate, portalled = false, }) {
-    console.log('[DateTimePicker] Component initialized with props:', {
-        value,
-        format,
-        showSeconds,
-        timezone,
-        startTime,
-        minDate,
-        maxDate,
-    });
-    // Initialize selectedDate from value prop, converting ISO to YYYY-MM-DD format
-    const getDateString = useCallback((val) => {
-        if (!val)
-            return '';
-        const dateObj = dayjs(val).tz(timezone);
-        return dateObj.isValid() ? dateObj.format('YYYY-MM-DD') : '';
-    }, [timezone]);
-    const [selectedDate, setSelectedDate] = useState(getDateString(value));
-    // Helper to get time values from value prop with timezone
-    const getTimeFromValue = useCallback((val) => {
-        console.log('[DateTimePicker] getTimeFromValue called:', {
-            val,
-            timezone,
-            showSeconds,
-        });
-        if (!val) {
-            console.log('[DateTimePicker] No value provided, returning nulls');
-            return {
-                hour12: null,
-                minute: null,
-                meridiem: null,
-                hour24: null,
-                second: null,
-            };
-        }
-        const dateObj = dayjs(val).tz(timezone);
-        console.log('[DateTimePicker] Parsed date object:', {
-            original: val,
-            timezone,
-            isValid: dateObj.isValid(),
-            formatted: dateObj.format('YYYY-MM-DD HH:mm:ss Z'),
-            hour24: dateObj.hour(),
-            minute: dateObj.minute(),
-            second: dateObj.second(),
-        });
-        if (!dateObj.isValid()) {
-            console.log('[DateTimePicker] Invalid date object, returning nulls');
-            return {
-                hour12: null,
-                minute: null,
-                meridiem: null,
-                hour24: null,
-                second: null,
-            };
-        }
-        const hour24Value = dateObj.hour();
-        const hour12Value = hour24Value % 12 || 12;
-        const minuteValue = dateObj.minute();
-        const meridiemValue = hour24Value >= 12 ? 'pm' : 'am';
-        const secondValue = showSeconds ? dateObj.second() : null;
-        const result = {
-            hour12: hour12Value,
-            minute: minuteValue,
-            meridiem: meridiemValue,
-            hour24: hour24Value,
-            second: secondValue,
-        };
-        console.log('[DateTimePicker] Extracted time values:', result);
-        return result;
-    }, [timezone, showSeconds]);
-    const initialTime = getTimeFromValue(value);
-    console.log('[DateTimePicker] Initial time from value:', {
-        value,
-        initialTime,
-    });
-    // Time state for 12-hour format
-    const [hour12, setHour12] = useState(initialTime.hour12);
-    const [minute, setMinute] = useState(initialTime.minute);
-    const [meridiem, setMeridiem] = useState(initialTime.meridiem);
-    // Time state for 24-hour format
-    const [hour24, setHour24] = useState(initialTime.hour24);
-    const [second, setSecond] = useState(initialTime.second);
-    // Sync selectedDate and time states when value prop changes
-    useEffect(() => {
-        console.log('[DateTimePicker] useEffect triggered - value changed:', {
-            value,
-            timezone,
-            format,
-        });
-        // If value is null, undefined, or invalid, clear all fields
-        if (!value || value === null || value === undefined) {
-            console.log('[DateTimePicker] Value is null/undefined, clearing all fields');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            return;
-        }
-        // Check if value is valid
-        const dateObj = dayjs(value).tz(timezone);
-        if (!dateObj.isValid()) {
-            console.log('[DateTimePicker] Invalid value, clearing all fields');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            return;
+    // Helper functions to get dates in the correct timezone
+    const getToday = () => dayjs().tz(tz).startOf('day').toDate();
+    const getYesterday = () => dayjs().tz(tz).subtract(1, 'day').startOf('day').toDate();
+    const getTomorrow = () => dayjs().tz(tz).add(1, 'day').startOf('day').toDate();
+    const getPlus7Days = () => dayjs().tz(tz).add(7, 'day').startOf('day').toDate();
+    // Check if a date is within min/max constraints
+    const isDateValid = (date) => {
+        if (minDate) {
+            const minDateStart = dayjs(minDate).tz(tz).startOf('day').toDate();
+            const dateStart = dayjs(date).tz(tz).startOf('day').toDate();
+            if (dateStart < minDateStart)
+                return false;
         }
-        const dateString = getDateString(value);
-        console.log('[DateTimePicker] Setting selectedDate:', dateString);
-        setSelectedDate(dateString);
-        const timeData = getTimeFromValue(value);
-        console.log('[DateTimePicker] Updating time states:', {
-            timeData,
-        });
-        setHour12(timeData.hour12);
-        setMinute(timeData.minute);
-        setMeridiem(timeData.meridiem);
-        setHour24(timeData.hour24);
-        setSecond(timeData.second);
-    }, [value, getTimeFromValue, getDateString, timezone]);
-    const handleDateChange = (date) => {
-        console.log('[DateTimePicker] handleDateChange called:', {
-            date,
-            timezone,
-            showSeconds,
-            currentTimeStates: { hour12, minute, meridiem, hour24, second },
-        });
-        // If date is empty or invalid, clear all fields
-        if (!date || date === '') {
-            console.log('[DateTimePicker] Empty date, clearing all fields');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            onChange?.(undefined);
-            return;
+        if (maxDate) {
+            const maxDateStart = dayjs(maxDate).tz(tz).startOf('day').toDate();
+            const dateStart = dayjs(date).tz(tz).startOf('day').toDate();
+            if (dateStart > maxDateStart)
+                return false;
         }
-        setSelectedDate(date);
-        // Parse the date string (YYYY-MM-DD) in the specified timezone
-        const dateObj = dayjs.tz(date, timezone);
-        console.log('[DateTimePicker] Parsed date object:', {
-            date,
-            timezone,
-            isValid: dateObj.isValid(),
-            isoString: dateObj.toISOString(),
-            formatted: dateObj.format('YYYY-MM-DD HH:mm:ss Z'),
-        });
-        if (!dateObj.isValid()) {
-            console.warn('[DateTimePicker] Invalid date object in handleDateChange, clearing fields');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            onChange?.(undefined);
-            return;
+        return true;
+    };
+    // Handle quick action button clicks
+    const handleQuickActionClick = (date) => {
+        if (isDateValid(date)) {
+            setSelectedDate(date);
+            updateDateTime(date, hour, minute, second, meridiem);
+            // Close the calendar popover if open
+            setCalendarPopoverOpen(false);
         }
-        // When showSeconds is false, ignore seconds from the date
-        if (!showSeconds) {
-            const dateWithoutSeconds = dateObj.second(0).millisecond(0).toISOString();
-            console.log('[DateTimePicker] Updating date without seconds:', dateWithoutSeconds);
-            updateDateTime(dateWithoutSeconds);
+    };
+    // Display text for buttons
+    const dateDisplayText = useMemo(() => {
+        if (!selectedDate)
+            return 'Select date';
+        return dayjs(selectedDate).tz(tz).format('YYYY-MM-DD');
+    }, [selectedDate, tz]);
+    const timeDisplayText = useMemo(() => {
+        if (hour === null || minute === null)
+            return 'Select time';
+        if (is24Hour) {
+            // 24-hour format: never show meridiem, always use 24-hour format (0-23)
+            const hour24 = hour >= 0 && hour <= 23 ? hour : hour % 24;
+            const s = second ?? 0;
+            if (showSeconds) {
+                return `${hour24.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+            }
+            return `${hour24.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
         }
         else {
-            const dateWithSeconds = dateObj.toISOString();
-            console.log('[DateTimePicker] Updating date with seconds:', dateWithSeconds);
-            updateDateTime(dateWithSeconds);
+            // 12-hour format: always show meridiem (AM/PM)
+            const hour12 = hour >= 1 && hour <= 12 ? hour : hour % 12;
+            if (meridiem === null)
+                return 'Select time';
+            const hourDisplay = hour12.toString();
+            const minuteDisplay = minute.toString().padStart(2, '0');
+            return `${hourDisplay}:${minuteDisplay} ${meridiem.toUpperCase()}`;
+        }
+    }, [hour, minute, second, meridiem, is24Hour, showSeconds]);
+    const timezoneDisplayText = useMemo(() => {
+        if (!showTimezoneSelector)
+            return '';
+        // Show offset as is (e.g., "+08:00")
+        return timezoneOffset;
+    }, [timezoneOffset, showTimezoneSelector]);
+    // Update selectedDate when value changes externally
+    useEffect(() => {
+        if (parsedValue) {
+            setSelectedDate(parsedValue.toDate());
+            setHour(parsedValue.hour());
+            setMinute(parsedValue.minute());
+            setSecond(parsedValue.second());
+            if (!is24Hour) {
+                const h = parsedValue.hour();
+                setMeridiem(h < 12 ? 'am' : 'pm');
+            }
         }
-    };
-    const handleTimeChange = (timeData) => {
-        console.log('[DateTimePicker] handleTimeChange called:', {
-            timeData,
-            format,
-            selectedDate,
-            timezone,
-        });
-        if (format === 'iso-date-time') {
-            const data = timeData;
-            console.log('[DateTimePicker] ISO format - setting 24-hour time:', data);
-            setHour24(data.hour);
-            setMinute(data.minute);
-            if (showSeconds) {
-                setSecond(data.second ?? null);
+    }, [parsedValue, is24Hour]);
+    // Combine date and time and call onChange
+    const updateDateTime = (newDate, newHour, newMinute, newSecond, newMeridiem, timezoneOffsetOverride) => {
+        if (!newDate || newHour === null || newMinute === null) {
+            onChange?.(undefined);
+            return;
+        }
+        // Convert 12-hour to 24-hour if needed
+        let hour24 = newHour;
+        if (!is24Hour && newMeridiem) {
+            // In 12-hour format, hour should be 1-12
+            // If hour is > 12, it might already be in 24-hour format, convert it first
+            let hour12 = newHour;
+            if (newHour > 12) {
+                // Hour is in 24-hour format, convert to 12-hour first
+                if (newHour === 12) {
+                    hour12 = 12;
+                }
+                else {
+                    hour12 = newHour - 12;
+                }
+            }
+            // Now convert 12-hour to 24-hour format (0-23)
+            if (newMeridiem === 'am') {
+                if (hour12 === 12) {
+                    hour24 = 0; // 12 AM = 0:00
+                }
+                else {
+                    hour24 = hour12; // 1-11 AM = 1-11
+                }
             }
             else {
-                // Ignore seconds - always set to null when showSeconds is false
-                setSecond(null);
+                // PM
+                if (hour12 === 12) {
+                    hour24 = 12; // 12 PM = 12:00
+                }
+                else {
+                    hour24 = hour12 + 12; // 1-11 PM = 13-23
+                }
             }
         }
-        else {
-            const data = timeData;
-            console.log('[DateTimePicker] 12-hour format - setting time:', data);
-            setHour12(data.hour);
-            setMinute(data.minute);
-            setMeridiem(data.meridiem);
-        }
-        // Use selectedDate if valid, otherwise clear all fields
-        if (!selectedDate || !dayjs(selectedDate).isValid()) {
-            console.log('[DateTimePicker] No valid selectedDate, clearing all fields');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
+        else if (!is24Hour && !newMeridiem) {
+            // If in 12-hour mode but no meridiem, assume the hour is already in 12-hour format
+            // and default to AM (or keep as is if it's a valid 12-hour value)
+            // This shouldn't happen in normal flow, but handle it gracefully
+            hour24 = newHour;
+        }
+        // If timezone selector is enabled, create date-time without timezone conversion
+        // to ensure the selected timestamp matches the picker values exactly
+        if (showTimezoneSelector) {
+            // Use override if provided, otherwise use state value
+            const offsetToUse = timezoneOffsetOverride ?? timezoneOffset;
+            // Create date-time from the Date object without timezone conversion
+            // Extract year, month, day from the date
+            const year = newDate.getFullYear();
+            const month = newDate.getMonth();
+            const day = newDate.getDate();
+            // Create a date-time string with the exact values from the picker
+            const formattedDateTime = `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}T${String(hour24).padStart(2, '0')}:${String(newMinute).padStart(2, '0')}:${String(newSecond ?? 0).padStart(2, '0')}`;
+            onChange?.(`${formattedDateTime}${offsetToUse}`);
+            return;
+        }
+        // Normal mode: use timezone conversion
+        let dateTime = dayjs(newDate)
+            .tz(tz)
+            .hour(hour24)
+            .minute(newMinute)
+            .second(newSecond ?? 0)
+            .millisecond(0);
+        if (!dateTime.isValid()) {
             onChange?.(undefined);
             return;
         }
-        const dateObj = dayjs(selectedDate).tz(timezone);
-        if (dateObj.isValid()) {
-            updateDateTime(dateObj.toISOString(), timeData);
+        // Format based on format prop
+        if (format === 'iso-date-time') {
+            onChange?.(dateTime.format('YYYY-MM-DDTHH:mm:ss'));
         }
         else {
-            console.warn('[DateTimePicker] Invalid date object in handleTimeChange, clearing fields');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            onChange?.(undefined);
+            // date-time format with timezone
+            onChange?.(dateTime.format('YYYY-MM-DDTHH:mm:ssZ'));
         }
     };
-    const updateDateTime = (date, timeData) => {
-        console.log('[DateTimePicker] updateDateTime called:', {
-            date,
-            timeData,
-            format,
-            currentStates: { hour12, minute, meridiem, hour24, second },
-        });
-        if (!date || date === null || date === undefined) {
-            console.log('[DateTimePicker] No date provided, clearing all fields and calling onChange(undefined)');
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            onChange?.(undefined);
-            return;
+    // Handle date selection
+    const handleDateSelected = ({ date, }) => {
+        setSelectedDate(date);
+        updateDateTime(date, hour, minute, second, meridiem);
+    };
+    // Handle time change
+    const handleTimeChange = (newHour, newMinute, newSecond, newMeridiem) => {
+        setHour(newHour);
+        setMinute(newMinute);
+        if (is24Hour) {
+            setSecond(newSecond);
         }
-        // use dayjs to convert the date to the timezone
-        const dateObj = dayjs(date).tz(timezone);
-        if (!dateObj.isValid()) {
-            console.warn('[DateTimePicker] Invalid date object in updateDateTime, clearing fields:', date);
-            setSelectedDate('');
-            setHour12(null);
-            setMinute(null);
-            setMeridiem(null);
-            setHour24(null);
-            setSecond(null);
-            onChange?.(undefined);
-            return;
+        else {
+            setMeridiem(newMeridiem);
         }
-        const newDate = dateObj.toDate();
-        if (format === 'iso-date-time') {
-            const data = timeData;
-            // Use timeData values if provided, otherwise fall back to current state
-            // But if timeData is explicitly provided with nulls, we need to check if all are null
-            const h = data !== undefined ? data.hour : hour24;
-            const m = data !== undefined ? data.minute : minute;
-            // Always ignore seconds when showSeconds is false - set to 0
-            const s = showSeconds
-                ? data !== undefined
-                    ? data.second ?? null
-                    : second ?? 0
-                : 0;
-            // If all time values are null, clear the value
-            if (h === null && m === null && (showSeconds ? s === null : true)) {
-                console.log('[DateTimePicker] All time values are null, clearing value');
-                onChange?.(undefined);
-                return;
+        if (selectedDate) {
+            updateDateTime(selectedDate, newHour, newMinute, newSecond, newMeridiem);
+        }
+    };
+    // Calendar hook
+    const calendarProps = useCalendar({
+        selected: selectedDate || undefined,
+        date: selectedDate || undefined,
+        minDate,
+        maxDate,
+        monthsToDisplay: 1,
+        onDateSelected: handleDateSelected,
+    });
+    // Convert DateTimePickerLabels to DatePickerLabels format
+    const calendarLabels = useMemo(() => ({
+        monthNamesShort: labels.monthNamesShort || [
+            'Jan',
+            'Feb',
+            'Mar',
+            'Apr',
+            'May',
+            'Jun',
+            'Jul',
+            'Aug',
+            'Sep',
+            'Oct',
+            'Nov',
+            'Dec',
+        ],
+        weekdayNamesShort: labels.weekdayNamesShort || [
+            'Sun',
+            'Mon',
+            'Tue',
+            'Wed',
+            'Thu',
+            'Fri',
+            'Sat',
+        ],
+        backButtonLabel: labels.backButtonLabel || 'Back',
+        forwardButtonLabel: labels.forwardButtonLabel || 'Forward',
+        todayLabel: quickActionLabels.today || 'Today',
+        yesterdayLabel: quickActionLabels.yesterday || 'Yesterday',
+        tomorrowLabel: quickActionLabels.tomorrow || 'Tomorrow',
+    }), [labels, quickActionLabels]);
+    // Generate time options
+    const timeOptions = useMemo(() => {
+        const options = [];
+        // Get start time for comparison if provided
+        let startDateTime = null;
+        let shouldFilterByDate = false;
+        if (startTime && selectedDate) {
+            const startDateObj = dayjs(startTime).tz(tz);
+            const selectedDateObj = dayjs(selectedDate).tz(tz);
+            if (startDateObj.isValid() && selectedDateObj.isValid()) {
+                startDateTime = startDateObj;
+                shouldFilterByDate =
+                    startDateObj.format('YYYY-MM-DD') ===
+                        selectedDateObj.format('YYYY-MM-DD');
+            }
+        }
+        if (is24Hour) {
+            // Generate 24-hour format options
+            for (let h = 0; h < 24; h++) {
+                for (let m = 0; m < 60; m += 15) {
+                    // Filter out times that would result in negative duration
+                    if (startDateTime && selectedDate && shouldFilterByDate) {
+                        const selectedDateObj = dayjs(selectedDate).tz(tz);
+                        const optionDateTime = selectedDateObj
+                            .hour(h)
+                            .minute(m)
+                            .second(0)
+                            .millisecond(0);
+                        if (optionDateTime.isBefore(startDateTime)) {
+                            continue;
+                        }
+                    }
+                    // Calculate duration if startTime is provided
+                    let durationText;
+                    if (startDateTime && selectedDate) {
+                        const selectedDateObj = dayjs(selectedDate).tz(tz);
+                        const optionDateTime = selectedDateObj
+                            .hour(h)
+                            .minute(m)
+                            .second(0)
+                            .millisecond(0);
+                        if (optionDateTime.isValid() &&
+                            optionDateTime.isAfter(startDateTime)) {
+                            const diffMs = optionDateTime.diff(startDateTime);
+                            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+                            const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+                            const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+                            if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+                                let diffText = '';
+                                if (diffHours > 0) {
+                                    diffText = `${diffHours}h ${diffMinutes}m`;
+                                }
+                                else if (diffMinutes > 0) {
+                                    diffText = `${diffMinutes}m ${diffSeconds}s`;
+                                }
+                                else {
+                                    diffText = `${diffSeconds}s`;
+                                }
+                                durationText = `+${diffText}`;
+                            }
+                        }
+                    }
+                    const s = showSeconds ? 0 : 0;
+                    const timeDisplay = showSeconds
+                        ? `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:00`
+                        : `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+                    options.push({
+                        label: timeDisplay,
+                        value: `${h}:${m}:${s}`,
+                        hour: h,
+                        minute: m,
+                        second: s,
+                        searchText: timeDisplay,
+                        durationText,
+                    });
+                }
             }
-            console.log('[DateTimePicker] ISO format - setting time on date:', {
-                h,
-                m,
-                s,
-                showSeconds,
-            });
-            if (h !== null)
-                newDate.setHours(h);
-            if (m !== null)
-                newDate.setMinutes(m);
-            newDate.setSeconds(s ?? 0);
         }
         else {
-            const data = timeData;
-            console.log('[DateTimePicker] Processing 12-hour format:', {
-                'data !== undefined': data !== undefined,
-                'data?.hour': data?.hour,
-                'data?.minute': data?.minute,
-                'data?.meridiem': data?.meridiem,
-                'current hour12': hour12,
-                'current minute': minute,
-                'current meridiem': meridiem,
-            });
-            // Use timeData values if provided, otherwise fall back to current state
-            const h = data !== undefined ? data.hour : hour12;
-            const m = data !== undefined ? data.minute : minute;
-            const mer = data !== undefined ? data.meridiem : meridiem;
-            console.log('[DateTimePicker] Resolved time values:', { h, m, mer });
-            // If all time values are null, clear the value
-            if (h === null && m === null && mer === null) {
-                console.log('[DateTimePicker] All time values are null, clearing value');
-                onChange?.(undefined);
-                return;
+            // Generate 12-hour format options
+            for (let h = 1; h <= 12; h++) {
+                for (let m = 0; m < 60; m += 15) {
+                    for (const mer of ['am', 'pm']) {
+                        // Convert 12-hour to 24-hour for comparison
+                        let hour24 = h;
+                        if (mer === 'am' && h === 12)
+                            hour24 = 0;
+                        else if (mer === 'pm' && h < 12)
+                            hour24 = h + 12;
+                        // Filter out times that would result in negative duration
+                        if (startDateTime && selectedDate && shouldFilterByDate) {
+                            const selectedDateObj = dayjs(selectedDate).tz(tz);
+                            const optionDateTime = selectedDateObj
+                                .hour(hour24)
+                                .minute(m)
+                                .second(0)
+                                .millisecond(0);
+                            if (optionDateTime.isBefore(startDateTime)) {
+                                continue;
+                            }
+                        }
+                        // Calculate duration if startTime is provided
+                        let durationText;
+                        if (startDateTime && selectedDate) {
+                            const selectedDateObj = dayjs(selectedDate).tz(tz);
+                            const optionDateTime = selectedDateObj
+                                .hour(hour24)
+                                .minute(m)
+                                .second(0)
+                                .millisecond(0);
+                            if (optionDateTime.isValid() &&
+                                optionDateTime.isAfter(startDateTime)) {
+                                const diffMs = optionDateTime.diff(startDateTime);
+                                const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+                                const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
+                                const diffSeconds = Math.floor((diffMs % (1000 * 60)) / 1000);
+                                if (diffHours > 0 || diffMinutes > 0 || diffSeconds > 0) {
+                                    let diffText = '';
+                                    if (diffHours > 0) {
+                                        diffText = `${diffHours}h ${diffMinutes}m`;
+                                    }
+                                    else if (diffMinutes > 0) {
+                                        diffText = `${diffMinutes}m ${diffSeconds}s`;
+                                    }
+                                    else {
+                                        diffText = `${diffSeconds}s`;
+                                    }
+                                    durationText = `+${diffText}`;
+                                }
+                            }
+                        }
+                        const hourDisplay = h.toString();
+                        const minuteDisplay = m.toString().padStart(2, '0');
+                        const timeDisplay = `${hourDisplay}:${minuteDisplay} ${mer.toUpperCase()}`;
+                        options.push({
+                            label: timeDisplay,
+                            value: `${h}:${m}:${mer}`,
+                            hour: h,
+                            minute: m,
+                            meridiem: mer,
+                            searchText: timeDisplay,
+                            durationText,
+                        });
+                    }
+                }
             }
-            console.log('[DateTimePicker] 12-hour format - converting time:', {
-                h,
-                m,
-                mer,
+            // Sort 12-hour options by time
+            return options.sort((a, b) => {
+                const a12 = a;
+                const b12 = b;
+                let hour24A = a12.hour;
+                if (a12.meridiem === 'am' && a12.hour === 12)
+                    hour24A = 0;
+                else if (a12.meridiem === 'pm' && a12.hour < 12)
+                    hour24A = a12.hour + 12;
+                let hour24B = b12.hour;
+                if (b12.meridiem === 'am' && b12.hour === 12)
+                    hour24B = 0;
+                else if (b12.meridiem === 'pm' && b12.hour < 12)
+                    hour24B = b12.hour + 12;
+                if (hour24A !== hour24B) {
+                    return hour24A - hour24B;
+                }
+                return a12.minute - b12.minute;
             });
-            if (h !== null && mer !== null) {
-                let hour24 = h;
-                if (mer === 'am' && h === 12)
-                    hour24 = 0;
-                else if (mer === 'pm' && h < 12)
-                    hour24 = h + 12;
-                console.log('[DateTimePicker] Converted to 24-hour:', {
-                    h,
-                    mer,
-                    hour24,
-                });
-                newDate.setHours(hour24);
+        }
+        return options;
+    }, [startTime, selectedDate, tz, is24Hour, showSeconds]);
+    // Time picker combobox setup
+    const itemToString = useMemo(() => {
+        return (item) => {
+            return item.searchText;
+        };
+    }, []);
+    const { contains } = useFilter({ sensitivity: 'base' });
+    const customTimeFilter = useMemo(() => {
+        if (is24Hour) {
+            return contains;
+        }
+        return (itemText, filterText) => {
+            if (!filterText) {
+                return true;
             }
-            else {
-                console.log('[DateTimePicker] Skipping hour update - h or mer is null:', {
-                    h,
-                    mer,
-                });
+            const lowerItemText = itemText.toLowerCase();
+            const lowerFilterText = filterText.toLowerCase();
+            if (lowerItemText.includes(lowerFilterText)) {
+                return true;
             }
-            if (m !== null) {
-                newDate.setMinutes(m);
+            const item = timeOptions.find((opt) => opt.searchText.toLowerCase() === lowerItemText);
+            if (!item || !('meridiem' in item)) {
+                return false;
             }
-            else {
-                console.log('[DateTimePicker] Skipping minute update - m is null');
+            let hour24 = item.hour;
+            if (item.meridiem === 'am' && item.hour === 12)
+                hour24 = 0;
+            else if (item.meridiem === 'pm' && item.hour < 12)
+                hour24 = item.hour + 12;
+            const hour24Str = hour24.toString().padStart(2, '0');
+            const minuteStr = item.minute.toString().padStart(2, '0');
+            const formats = [
+                `${hour24Str}:${minuteStr}`,
+                `${hour24Str}${minuteStr}`,
+                hour24Str,
+                `${hour24}:${minuteStr}`,
+                hour24.toString(),
+            ];
+            return formats.some((format) => format.toLowerCase().includes(lowerFilterText) ||
+                lowerFilterText.includes(format.toLowerCase()));
+        };
+    }, [timeOptions, is24Hour, contains]);
+    const { collection, filter } = useListCollection({
+        initialItems: timeOptions,
+        itemToString: itemToString,
+        itemToValue: (item) => item.value,
+        filter: customTimeFilter,
+    });
+    // Get current value string for combobox (must match option.value format)
+    const currentTimeValue = useMemo(() => {
+        if (is24Hour) {
+            if (hour === null || minute === null) {
+                return '';
             }
-            newDate.setSeconds(0);
-        }
-        const finalISO = dayjs(newDate).tz(timezone).toISOString();
-        console.log('[DateTimePicker] Final ISO string to emit:', {
-            newDate: newDate.toISOString(),
-            timezone,
-            finalISO,
-        });
-        onChange?.(finalISO);
-    };
-    const handleClear = () => {
-        setSelectedDate('');
-        setHour12(null);
-        setHour24(null);
-        setMinute(null);
-        setSecond(null);
-        setMeridiem(null);
-        onChange?.(undefined);
-    };
-    const isISO = format === 'iso-date-time';
-    // Normalize startTime to ignore milliseconds
-    const normalizedStartTime = startTime
-        ? dayjs(startTime).tz(timezone).millisecond(0).toISOString()
-        : undefined;
-    // Determine minDate: prioritize explicit minDate prop, then fall back to startTime
-    const effectiveMinDate = minDate
-        ? minDate
-        : normalizedStartTime && dayjs(normalizedStartTime).tz(timezone).isValid()
-            ? dayjs(normalizedStartTime).tz(timezone).startOf('day').toDate()
-            : undefined;
-    // Log current state before render
-    useEffect(() => {
-        console.log('[DateTimePicker] Current state before render:', {
-            isISO,
-            hour12,
-            minute,
-            meridiem,
-            hour24,
-            second,
-            selectedDate,
-            normalizedStartTime,
-            timezone,
-        });
-    }, [
-        isISO,
-        hour12,
-        minute,
-        meridiem,
-        hour24,
-        second,
-        selectedDate,
-        normalizedStartTime,
-        timezone,
-    ]);
-    // Compute display text from current state
-    const displayText = useMemo(() => {
-        if (!selectedDate)
-            return null;
-        const dateObj = dayjs.tz(selectedDate, timezone);
-        if (!dateObj.isValid())
-            return null;
-        if (isISO) {
-            // For ISO format, use hour24, minute, second
-            if (hour24 === null || minute === null)
-                return null;
-            const dateTimeObj = dateObj
-                .hour(hour24)
-                .minute(minute)
-                .second(second ?? 0);
-            return dateTimeObj.format(showSeconds ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm');
+            const s = second ?? 0;
+            return `${hour}:${minute}:${s}`;
         }
         else {
-            // For 12-hour format, use hour12, minute, meridiem
-            if (hour12 === null || minute === null || meridiem === null)
-                return null;
-            // Convert to 24-hour format for dayjs
-            let hour24Value = hour12;
-            if (meridiem === 'am' && hour12 === 12)
-                hour24Value = 0;
-            else if (meridiem === 'pm' && hour12 < 12)
-                hour24Value = hour12 + 12;
-            const dateTimeObj = dateObj.hour(hour24Value).minute(minute).second(0);
-            return dateTimeObj.format('YYYY-MM-DD hh:mm A');
+            if (hour === null || minute === null || meridiem === null) {
+                return '';
+            }
+            return `${hour}:${minute}:${meridiem}`;
+        }
+    }, [hour, minute, second, meridiem, is24Hour]);
+    // Parse custom time input formats like "1400", "2pm", "14:00", "2:00 PM"
+    const parseCustomTimeInput = (input) => {
+        if (!input || !input.trim()) {
+            return { hour: null, minute: null, second: null, meridiem: null };
+        }
+        const trimmed = input.trim().toLowerCase();
+        // Try parsing 4-digit format without colon: "1400" -> 14:00
+        const fourDigitMatch = trimmed.match(/^(\d{4})$/);
+        if (fourDigitMatch) {
+            const digits = fourDigitMatch[1];
+            const hour = parseInt(digits.substring(0, 2), 10);
+            const minute = parseInt(digits.substring(2, 4), 10);
+            if (hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59) {
+                if (is24Hour) {
+                    return { hour, minute, second: 0, meridiem: null };
+                }
+                else {
+                    // Convert to 12-hour format
+                    let hour12 = hour;
+                    let meridiem;
+                    if (hour === 0) {
+                        hour12 = 12;
+                        meridiem = 'am';
+                    }
+                    else if (hour === 12) {
+                        hour12 = 12;
+                        meridiem = 'pm';
+                    }
+                    else if (hour > 12) {
+                        hour12 = hour - 12;
+                        meridiem = 'pm';
+                    }
+                    else {
+                        hour12 = hour;
+                        meridiem = 'am';
+                    }
+                    return { hour: hour12, minute, second: null, meridiem };
+                }
+            }
         }
-    }, [
-        selectedDate,
-        isISO,
-        hour12,
-        minute,
-        meridiem,
-        hour24,
-        second,
-        showSeconds,
-        timezone,
-    ]);
-    const timezoneOffset = useMemo(() => {
-        if (!selectedDate)
-            return null;
-        const dateObj = dayjs.tz(selectedDate, timezone);
-        return dateObj.isValid() ? dateObj.format('Z') : null;
-    }, [selectedDate, timezone]);
-    return (jsxs(Flex, { direction: "column", gap: 4, children: [jsx(DatePickerInput, { value: selectedDate || undefined, onChange: (date) => {
-                    if (date) {
-                        handleDateChange(date);
+        // Try parsing hour with meridiem: "2pm", "14pm", "2am"
+        const hourMeridiemMatch = trimmed.match(/^(\d{1,2})\s*(am|pm)$/);
+        if (hourMeridiemMatch && !is24Hour) {
+            const hour12 = parseInt(hourMeridiemMatch[1], 10);
+            const meridiem = hourMeridiemMatch[2];
+            if (hour12 >= 1 && hour12 <= 12) {
+                return { hour: hour12, minute: 0, second: null, meridiem };
+            }
+        }
+        // Try parsing 24-hour format with hour only: "14" -> 14:00
+        const hourOnlyMatch = trimmed.match(/^(\d{1,2})$/);
+        if (hourOnlyMatch && is24Hour) {
+            const hour = parseInt(hourOnlyMatch[1], 10);
+            if (hour >= 0 && hour <= 23) {
+                return { hour, minute: 0, second: 0, meridiem: null };
+            }
+        }
+        // Try parsing standard formats: "14:00", "2:00 PM"
+        const time24Pattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?$/;
+        const match24 = trimmed.match(time24Pattern);
+        if (match24) {
+            const hour24 = parseInt(match24[1], 10);
+            const minute = parseInt(match24[2], 10);
+            const second = match24[3] ? parseInt(match24[3], 10) : 0;
+            if (hour24 >= 0 &&
+                hour24 <= 23 &&
+                minute >= 0 &&
+                minute <= 59 &&
+                second >= 0 &&
+                second <= 59) {
+                if (is24Hour) {
+                    return { hour: hour24, minute, second, meridiem: null };
+                }
+                else {
+                    // Convert to 12-hour format
+                    let hour12 = hour24;
+                    let meridiem;
+                    if (hour24 === 0) {
+                        hour12 = 12;
+                        meridiem = 'am';
+                    }
+                    else if (hour24 === 12) {
+                        hour12 = 12;
+                        meridiem = 'pm';
+                    }
+                    else if (hour24 > 12) {
+                        hour12 = hour24 - 12;
+                        meridiem = 'pm';
                     }
                     else {
-                        setSelectedDate('');
-                        onChange?.(undefined);
+                        hour12 = hour24;
+                        meridiem = 'am';
+                    }
+                    return { hour: hour12, minute, second: null, meridiem };
+                }
+            }
+        }
+        // Try parsing 12-hour format: "2:00 PM", "2:00PM"
+        const time12Pattern = /^(\d{1,2}):(\d{1,2})(?::(\d{1,2}))?\s*(am|pm)$/;
+        const match12 = trimmed.match(time12Pattern);
+        if (match12 && !is24Hour) {
+            const hour12 = parseInt(match12[1], 10);
+            const minute = parseInt(match12[2], 10);
+            const second = match12[3] ? parseInt(match12[3], 10) : null;
+            const meridiem = match12[4];
+            if (hour12 >= 1 &&
+                hour12 <= 12 &&
+                minute >= 0 &&
+                minute <= 59 &&
+                (second === null || (second >= 0 && second <= 59))) {
+                return { hour: hour12, minute, second, meridiem };
+            }
+        }
+        return { hour: null, minute: null, second: null, meridiem: null };
+    };
+    const handleTimeValueChange = (details) => {
+        if (details.value.length === 0) {
+            handleTimeChange(null, null, null, null);
+            filter('');
+            return;
+        }
+        const selectedValue = details.value[0];
+        const selectedOption = timeOptions.find((opt) => opt.value === selectedValue);
+        if (selectedOption) {
+            filter('');
+            if (is24Hour) {
+                const opt24 = selectedOption;
+                handleTimeChange(opt24.hour, opt24.minute, opt24.second, null);
+            }
+            else {
+                const opt12 = selectedOption;
+                handleTimeChange(opt12.hour, opt12.minute, null, opt12.meridiem);
+            }
+        }
+    };
+    // Track the current input value for Enter key handling
+    const [timeInputValue, setTimeInputValue] = useState('');
+    const handleTimeInputChange = (details) => {
+        // Store the input value and filter
+        setTimeInputValue(details.inputValue);
+        filter(details.inputValue);
+    };
+    const handleTimeInputKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            // Use the stored input value
+            const parsed = parseCustomTimeInput(timeInputValue);
+            if (parsed.hour !== null && parsed.minute !== null) {
+                if (is24Hour) {
+                    handleTimeChange(parsed.hour, parsed.minute, parsed.second, null);
+                }
+                else {
+                    if (parsed.meridiem !== null) {
+                        handleTimeChange(parsed.hour, parsed.minute, null, parsed.meridiem);
                     }
-                }, placeholder: "Select a date", dateFormat: "YYYY-MM-DD", displayFormat: "YYYY-MM-DD", labels: labels, timezone: timezone, minDate: effectiveMinDate, maxDate: maxDate, monthsToDisplay: 1, readOnly: true }), jsxs(Grid, { templateColumns: "1fr auto", alignItems: "center", gap: 4, children: [isISO ? (jsx(IsoTimePicker, { hour: hour24, setHour: setHour24, minute: minute, setMinute: setMinute, second: showSeconds ? second : null, setSecond: showSeconds ? setSecond : () => { }, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled, labels: timePickerLabels })) : (jsx(TimePicker$1, { hour: hour12, setHour: setHour12, minute: minute, setMinute: setMinute, meridiem: meridiem, setMeridiem: setMeridiem, onChange: handleTimeChange, startTime: normalizedStartTime, selectedDate: selectedDate, timezone: timezone, portalled: portalled, labels: timePickerLabels })), jsx(Button$1, { onClick: handleClear, size: "sm", variant: "outline", colorScheme: "red", children: jsx(Icon, { as: FaTrash }) })] }), displayText && (jsxs(Flex, { gap: 2, children: [jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: displayText }), timezoneOffset && (jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezoneOffset })), jsx(Text, { fontSize: "sm", color: { base: 'gray.600', _dark: 'gray.600' }, children: timezone })] }))] }));
+                }
+                // Clear the filter and input value after applying
+                filter('');
+                setTimeInputValue('');
+                // Close the popover if value is valid
+                setTimePopoverOpen(false);
+            }
+        }
+    };
+    return (jsxs(Flex, { direction: "row", gap: 2, align: "center", children: [jsxs(Popover.Root, { open: datePopoverOpen, onOpenChange: (e) => setDatePopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button$1, { size: "sm", variant: "outline", onClick: () => setDatePopoverOpen(true), justifyContent: "start", children: [jsx(MdDateRange, {}), dateDisplayText] }) }), portalled ? (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", children: jsx(Popover.Body, { p: 4, children: jsxs(Grid, { gap: 4, children: [jsx(InputGroup$1, { endElement: jsxs(Popover.Root, { open: calendarPopoverOpen, onOpenChange: (e) => setCalendarPopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button$1, { variant: "ghost", size: "xs", "aria-label": "Open calendar", onClick: () => setCalendarPopoverOpen(true), children: jsx(MdDateRange, {}) }) }), jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", zIndex: 1500, children: jsx(Popover.Body, { p: 4, children: jsx(DatePickerContext.Provider, { value: { labels: calendarLabels }, children: jsx(Calendar, { ...calendarProps, firstDayOfWeek: 0 }) }) }) }) }) })] }), children: jsx(Input, { value: dateInputValue, onChange: handleDateInputChange, onBlur: handleDateInputBlur, onKeyDown: handleDateInputKeyDown, placeholder: "YYYY-MM-DD" }) }), showQuickActions && (jsxs(Grid, { templateColumns: "repeat(4, 1fr)", gap: 2, children: [jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getYesterday()), disabled: !isDateValid(getYesterday()), children: quickActionLabels.yesterday }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getToday()), disabled: !isDateValid(getToday()), children: quickActionLabels.today }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getTomorrow()), disabled: !isDateValid(getTomorrow()), children: quickActionLabels.tomorrow }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getPlus7Days()), disabled: !isDateValid(getPlus7Days()), children: quickActionLabels.plus7Days })] }))] }) }) }) }) })) : (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", children: jsx(Popover.Body, { p: 4, children: jsxs(Grid, { gap: 4, children: [jsx(InputGroup$1, { endElement: jsxs(Popover.Root, { open: calendarPopoverOpen, onOpenChange: (e) => setCalendarPopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button$1, { variant: "ghost", size: "xs", "aria-label": "Open calendar", onClick: () => setCalendarPopoverOpen(true), children: jsx(MdDateRange, {}) }) }), jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", zIndex: 1700, children: jsx(Popover.Body, { p: 4, children: jsx(DatePickerContext.Provider, { value: { labels: calendarLabels }, children: jsx(Calendar, { ...calendarProps, firstDayOfWeek: 0 }) }) }) }) }) })] }), children: jsx(Input, { value: dateInputValue, onChange: handleDateInputChange, onBlur: handleDateInputBlur, onKeyDown: handleDateInputKeyDown, placeholder: "YYYY-MM-DD" }) }), showQuickActions && (jsxs(Grid, { templateColumns: "repeat(4, 1fr)", gap: 2, children: [jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getYesterday()), disabled: !isDateValid(getYesterday()), children: quickActionLabels.yesterday }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getToday()), disabled: !isDateValid(getToday()), children: quickActionLabels.today }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getTomorrow()), disabled: !isDateValid(getTomorrow()), children: quickActionLabels.tomorrow }), jsx(Button$1, { size: "sm", variant: "outline", onClick: () => handleQuickActionClick(getPlus7Days()), disabled: !isDateValid(getPlus7Days()), children: quickActionLabels.plus7Days })] }))] }) }) }) }))] }), jsxs(Popover.Root, { open: timePopoverOpen, onOpenChange: (e) => setTimePopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button$1, { size: "sm", variant: "outline", onClick: () => setTimePopoverOpen(true), justifyContent: "start", children: [jsx(BsClock, {}), timeDisplayText] }) }), portalled ? (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "300px", children: jsx(Popover.Body, { p: 4, children: jsx(Grid, { gap: 2, children: jsxs(Combobox.Root, { value: currentTimeValue ? [currentTimeValue] : [], onValueChange: handleTimeValueChange, onInputValueChange: handleTimeInputChange, collection: collection, allowCustomValue: true, children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { placeholder: timePickerLabels?.placeholder ??
+                                                                    (is24Hour ? 'HH:mm' : 'hh:mm AM/PM'), onKeyDown: handleTimeInputKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: true, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: timePickerLabels?.emptyMessage ??
+                                                                        'No time found' }), collection.items.map((item) => {
+                                                                    const option = item;
+                                                                    return (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { justify: "space-between", align: "center", w: "100%", children: [jsx(Text, { children: option.label }), option.durationText && (jsx(Text, { fontSize: "xs", color: "gray.500", children: option.durationText }))] }), jsx(Combobox.ItemIndicator, {})] }, option.value));
+                                                                })] }) }) })] }) }) }) }) }) })) : (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "300px", children: jsx(Popover.Body, { p: 4, children: jsx(Grid, { gap: 2, children: jsxs(Combobox.Root, { value: currentTimeValue ? [currentTimeValue] : [], onValueChange: handleTimeValueChange, onInputValueChange: handleTimeInputChange, collection: collection, allowCustomValue: true, children: [jsxs(Combobox.Control, { children: [jsx(InputGroup$1, { startElement: jsx(BsClock, {}), children: jsx(Combobox.Input, { placeholder: timePickerLabels?.placeholder ??
+                                                                (is24Hour ? 'HH:mm' : 'hh:mm AM/PM'), onKeyDown: handleTimeInputKeyDown }) }), jsx(Combobox.IndicatorGroup, { children: jsx(Combobox.Trigger, {}) })] }), jsx(Portal, { disabled: true, children: jsx(Combobox.Positioner, { children: jsxs(Combobox.Content, { children: [jsx(Combobox.Empty, { children: timePickerLabels?.emptyMessage ?? 'No time found' }), collection.items.map((item) => {
+                                                                const option = item;
+                                                                return (jsxs(Combobox.Item, { item: item, children: [jsxs(Flex, { justify: "space-between", align: "center", w: "100%", children: [jsx(Text, { children: option.label }), option.durationText && (jsx(Text, { fontSize: "xs", color: "gray.500", children: option.durationText }))] }), jsx(Combobox.ItemIndicator, {})] }, option.value));
+                                                            })] }) }) })] }) }) }) }) }))] }), showTimezoneSelector && (jsxs(Popover.Root, { open: timezonePopoverOpen, onOpenChange: (e) => setTimezonePopoverOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsx(Button$1, { size: "sm", variant: "outline", onClick: () => setTimezonePopoverOpen(true), justifyContent: "start", children: timezoneDisplayText || 'Select timezone' }) }), portalled ? (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "250px", children: jsx(Popover.Body, { p: 4, children: jsx(Grid, { gap: 2, children: jsxs(Select.Root, { size: "sm", collection: timezoneCollection, value: validTimezoneOffset ? [validTimezoneOffset] : [], onValueChange: (e) => {
+                                                const newOffset = e.value[0];
+                                                if (newOffset) {
+                                                    // Update controlled or internal state
+                                                    if (onTimezoneOffsetChange) {
+                                                        onTimezoneOffsetChange(newOffset);
+                                                    }
+                                                    else {
+                                                        setInternalTimezoneOffset(newOffset);
+                                                    }
+                                                    // Update date-time with new offset (pass it directly to avoid stale state)
+                                                    if (selectedDate &&
+                                                        hour !== null &&
+                                                        minute !== null) {
+                                                        updateDateTime(selectedDate, hour, minute, second, meridiem, newOffset);
+                                                    }
+                                                    // Close popover after selection
+                                                    setTimezonePopoverOpen(false);
+                                                }
+                                            }, children: [jsxs(Select.Control, { children: [jsx(Select.Trigger, {}), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: timezoneCollection.items.map((item) => (jsxs(Select.Item, { item: item, children: [jsx(Select.ItemText, { children: item.label }), jsx(Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }) })) : (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "250px", children: jsx(Popover.Body, { p: 4, children: jsx(Grid, { gap: 2, children: jsxs(Select.Root, { size: "sm", collection: timezoneCollection, value: validTimezoneOffset ? [validTimezoneOffset] : [], onValueChange: (e) => {
+                                            const newOffset = e.value[0];
+                                            if (newOffset) {
+                                                // Update controlled or internal state
+                                                if (onTimezoneOffsetChange) {
+                                                    onTimezoneOffsetChange(newOffset);
+                                                }
+                                                else {
+                                                    setInternalTimezoneOffset(newOffset);
+                                                }
+                                                // Update date-time with new offset (pass it directly to avoid stale state)
+                                                if (selectedDate &&
+                                                    hour !== null &&
+                                                    minute !== null) {
+                                                    updateDateTime(selectedDate, hour, minute, second, meridiem, newOffset);
+                                                }
+                                                // Close popover after selection
+                                                setTimezonePopoverOpen(false);
+                                            }
+                                        }, children: [jsxs(Select.Control, { children: [jsx(Select.Trigger, {}), jsx(Select.IndicatorGroup, { children: jsx(Select.Indicator, {}) })] }), jsx(Select.Positioner, { children: jsx(Select.Content, { children: timezoneCollection.items.map((item) => (jsxs(Select.Item, { item: item, children: [jsx(Select.ItemText, { children: item.label }), jsx(Select.ItemIndicator, {})] }, item.value))) }) })] }) }) }) }) }))] }))] }));
 }
 
 dayjs.extend(utc);
@@ -7605,14 +8458,15 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
     const formI18n = useFormI18n(column, prefix, schema);
     const { required, gridColumn = 'span 12', gridRow = 'span 1', displayDateFormat = 'YYYY-MM-DD HH:mm:ss', 
     // with timezone
-    dateFormat = 'YYYY-MM-DD[T]HH:mm:ssZ', } = schema;
+    dateFormat = 'YYYY-MM-DD[T]HH:mm:ssZ', dateTimePicker, } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
     const colLabel = formI18n.colLabel;
-    const [open, setOpen] = useState(false);
+    useState(false);
     const selectedDate = watch(colLabel);
-    const displayDate = selectedDate && dayjs(selectedDate).tz(timezone).isValid()
+    selectedDate && dayjs(selectedDate).tz(timezone).isValid()
         ? dayjs(selectedDate).tz(timezone).format(displayDateFormat)
         : '';
+    // Set default date on mount if no value exists
     const dateTimePickerLabelsConfig = {
         monthNamesShort: dateTimePickerLabels?.monthNamesShort ?? [
             'January',
@@ -7652,11 +8506,9 @@ const DateTimePicker = ({ column, schema, prefix, }) => {
             else {
                 setValue(colLabel, undefined);
             }
-        }, timezone: timezone, labels: dateTimePickerLabelsConfig, timePickerLabels: timePickerLabels }));
+        }, timezone: timezone, labels: dateTimePickerLabelsConfig, timePickerLabels: timePickerLabels, showQuickActions: dateTimePicker?.showQuickActions ?? false, quickActionLabels: dateTimePicker?.quickActionLabels, showTimezoneSelector: dateTimePicker?.showTimezoneSelector ?? false }));
     return (jsx(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: jsxs(Popover.Root, { open: open, onOpenChange: (e) => setOpen(e.open), closeOnInteractOutside: true, autoFocus: false, children: [jsx(Popover.Trigger, { asChild: true, children: jsxs(Button, { size: "sm", variant: "outline", onClick: () => {
-                            setOpen(true);
-                        }, justifyContent: 'start', children: [jsx(MdDateRange, {}), displayDate || ''] }) }), insideDialog ? (jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsx(Popover.Body, { children: dateTimePickerContent }) }) })) : (jsx(Portal, { children: jsx(Popover.Positioner, { children: jsx(Popover.Content, { width: "fit-content", minW: "450px", minH: "25rem", children: jsx(Popover.Body, { children: dateTimePickerContent }) }) }) }))] }) }));
+        gridRow, errorText: errors[`${colLabel}`] ? formI18n.required() : undefined, invalid: !!errors[colLabel], children: dateTimePickerContent }));
 };
 
 const SchemaRenderer = ({ schema, prefix, column, }) => {
@@ -7777,7 +8629,7 @@ const BooleanViewer = ({ schema, column, prefix, }) => {
     const value = watch(colLabel);
     const formI18n = useFormI18n(column, prefix, schema);
     return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
-        gridRow, children: [jsx(Text, { children: value ? formI18n.t('true') : formI18n.t('false') }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
+        gridRow, children: [jsx(Text, { children: value ? 'True' : 'False' }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const CustomViewer = ({ column, schema, prefix }) => {
@@ -7809,23 +8661,22 @@ const DateViewer = ({ column, schema, prefix }) => {
 
 const EnumViewer = ({ column, isMultiple = false, schema, prefix, }) => {
     const { watch, formState: { errors }, } = useFormContext();
-    const formI18n = useFormI18n(column, prefix);
+    const formI18n = useFormI18n(column, prefix, schema);
     const { required } = schema;
     const isRequired = required?.some((columnId) => columnId === column);
-    const { gridColumn = "span 12", gridRow = "span 1", renderDisplay } = schema;
+    const { gridColumn = 'span 12', gridRow = 'span 1', renderDisplay } = schema;
     const colLabel = formI18n.colLabel;
     const watchEnum = watch(colLabel);
     const watchEnums = (watch(colLabel) ?? []);
-    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: "stretch", gridColumn,
-        gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: "wrap", gap: 1, children: watchEnums.map((enumValue) => {
+    const renderDisplayFunction = renderDisplay || defaultRenderDisplay;
+    return (jsxs(Field, { label: formI18n.label(), required: isRequired, alignItems: 'stretch', gridColumn,
+        gridRow, children: [isMultiple && (jsx(Flex, { flexFlow: 'wrap', gap: 1, children: watchEnums.map((enumValue) => {
                     const item = enumValue;
                     if (item === undefined) {
                         return jsx(Fragment, { children: "undefined" });
                     }
-                    return (jsx(Tag, { size: "lg", children: !!renderDisplay === true
-                            ? renderDisplay(item)
-                            : formI18n.t(item) }, item));
-                }) })), !isMultiple && jsx(Text, { children: formI18n.t(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: formI18n.required() }))] }));
+                    return (jsx(Tag, { size: "lg", children: renderDisplayFunction(item) }, item));
+                }) })), !isMultiple && jsx(Text, { children: renderDisplayFunction(watchEnum) }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: formI18n.required() }))] }));
 };
 
 const FileViewer = ({ column, schema, prefix }) => {
@@ -7945,31 +8796,35 @@ const StringViewer = ({ column, schema, prefix, }) => {
 
 const TagViewer = ({ column, schema, prefix }) => {
     const { watch, formState: { errors }, setValue, } = useFormContext();
-    const { serverUrl } = useSchemaContext();
     if (schema.properties == undefined) {
-        throw new Error("schema properties undefined when using DatePicker");
+        throw new Error('schema properties undefined when using DatePicker');
     }
-    const { gridColumn, gridRow, in_table, object_id_column } = schema;
+    const { gridColumn, gridRow, in_table, object_id_column, tagPicker } = schema;
     if (in_table === undefined) {
-        throw new Error("in_table is undefined when using TagPicker");
+        throw new Error('in_table is undefined when using TagPicker');
     }
     if (object_id_column === undefined) {
-        throw new Error("object_id_column is undefined when using TagPicker");
+        throw new Error('object_id_column is undefined when using TagPicker');
+    }
+    if (!tagPicker?.queryFn) {
+        throw new Error('tagPicker.queryFn is required in schema. serverUrl has been removed.');
     }
     const query = useQuery({
         queryKey: [`tagpicker`, in_table],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
-                in_table: "tables_tags_view",
+            const result = await tagPicker.queryFn({
+                in_table: 'tables_tags_view',
                 where: [
                     {
-                        id: "table_name",
+                        id: 'table_name',
                         value: [in_table],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         staleTime: 10000,
     });
@@ -7977,17 +8832,19 @@ const TagViewer = ({ column, schema, prefix }) => {
     const existingTagsQuery = useQuery({
         queryKey: [`existing`, { in_table, object_id_column }, object_id],
         queryFn: async () => {
-            return await getTableData({
-                serverUrl,
+            const result = await tagPicker.queryFn({
                 in_table: in_table,
                 where: [
                     {
                         id: object_id_column,
-                        value: object_id[0],
+                        value: [object_id[0]],
                     },
                 ],
                 limit: 100,
+                offset: 0,
+                searching: '',
             });
+            return result.data || { data: [] };
         },
         enabled: object_id != undefined,
         staleTime: 10000,
@@ -7998,9 +8855,9 @@ const TagViewer = ({ column, schema, prefix }) => {
     if (!!object_id === false) {
         return jsx(Fragment, {});
     }
-    return (jsxs(Flex, { flexFlow: "column", gap: 4, gridColumn,
+    return (jsxs(Flex, { flexFlow: 'column', gap: 4, gridColumn,
         gridRow, children: [isFetching && jsx(Fragment, { children: "isFetching" }), isLoading && jsx(Fragment, { children: "isLoading" }), isPending && jsx(Fragment, { children: "isPending" }), isError && jsx(Fragment, { children: "isError" }), dataList.map(({ parent_tag_name, all_tags, is_mutually_exclusive }) => {
-                return (jsxs(Flex, { flexFlow: "column", gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: "surface", onValueChange: (tagIds) => {
+                return (jsxs(Flex, { flexFlow: 'column', gap: 2, children: [jsx(Text, { children: parent_tag_name }), is_mutually_exclusive && (jsx(RadioCardRoot, { defaultValue: "next", variant: 'surface', onValueChange: (tagIds) => {
                                 const existedTags = Object.values(all_tags)
                                     .filter(({ id }) => {
                                     return existingTagList.some(({ tag_id }) => tag_id === id);
@@ -8012,20 +8869,20 @@ const TagViewer = ({ column, schema, prefix }) => {
                                     tagIds.value,
                                 ]);
                                 setValue(`${column}.${parent_tag_name}.old`, existedTags);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", disabled: true }, `${tagName}-${id}`));
+                                        return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', disabled: true }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: "0 0 0%", colorPalette: "blue" }, `${tagName}-${id}`));
+                                    return (jsx(RadioCardItem, { label: tagName, value: id, flex: '0 0 0%', colorPalette: 'blue' }, `${tagName}-${id}`));
                                 }) }) })), !is_mutually_exclusive && (jsx(CheckboxGroup, { onValueChange: (tagIds) => {
                                 setValue(`${column}.${parent_tag_name}.current`, tagIds);
-                            }, children: jsx(Flex, { flexFlow: "wrap", gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
+                            }, children: jsx(Flex, { flexFlow: 'wrap', gap: 2, children: Object.entries(all_tags).map(([tagName, { id }]) => {
                                     if (existingTagList.some(({ tag_id }) => tag_id === id)) {
-                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%", disabled: true, colorPalette: "blue" }, `${tagName}-${id}`));
+                                        return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%', disabled: true, colorPalette: 'blue' }, `${tagName}-${id}`));
                                     }
-                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: "0 0 0%" }, `${tagName}-${id}`));
+                                    return (jsx(CheckboxCard, { label: tagName, value: id, flex: '0 0 0%' }, `${tagName}-${id}`));
                                 }) }) }))] }, `tag-${parent_tag_name}`));
-            }), errors[`${column}`] && (jsx(Text, { color: "red.400", children: (errors[`${column}`]?.message ?? "No error message") }))] }));
+            }), errors[`${column}`] && (jsx(Text, { color: 'red.400', children: (errors[`${column}`]?.message ?? 'No error message') }))] }));
 };
 
 const TextAreaViewer = ({ column, schema, prefix, }) => {
@@ -8232,6 +9089,17 @@ const FormBody = () => {
 
 const FormTitle = () => {
     const { schema } = useSchemaContext();
+    // Debug log when form title is missing
+    if (!schema.title) {
+        console.debug('[Form Title] Missing title in root schema. Add title property to schema.', {
+            schema: {
+                type: schema.type,
+                properties: schema.properties
+                    ? Object.keys(schema.properties)
+                    : undefined,
+            },
+        });
+    }
     return jsx(Heading, { children: schema.title ?? 'Form' });
 };
 
@@ -9395,4 +10263,4 @@ function DataTableServer({ columns, enableRowSelection = true, enableMultiRowSel
         }, children: jsx(DataTableServerContext.Provider, { value: { url: url ?? '', query }, children: children }) }));
 }
 
-export { CalendarDisplay, CardHeader, DataDisplay, DataTable, DataTableServer, DatePickerInput, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };
+export { CalendarDisplay, CardHeader, DataDisplay, DataTable, DataTableServer, DatePickerContext, DatePickerInput, DefaultCardTitle, DefaultForm, DefaultTable, DefaultTableServer, DensityToggleButton, EditSortingButton, EmptyState, ErrorAlert, FilterDialog, FormBody, FormRoot, FormTitle, GlobalFilter, MediaLibraryBrowser, PageSizeControl, Pagination, RecordDisplay, ReloadButton, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, RowCountText, SelectAllRowsToggle, Table, TableBody, TableCardContainer, TableCards, TableComponent, TableControls, TableDataDisplay, TableFilter, TableFilterTags, TableFooter, TableHeader, TableLoadingComponent, TableSelector, TableSorter, TableViewer, TextCell, ViewDialog, buildErrorMessages, buildFieldErrors, buildRequiredErrors, convertToAjvErrorsFormat, createErrorMessage, defaultRenderDisplay, getColumns, getMultiDates, getRangeDates, idPickerSanityCheck, useDataTable, useDataTableContext, useDataTableServer, useForm, widthSanityCheck };