@dashforge/tw 0.9.0-beta → 0.10.0-beta

package/dist/index.esm.js

@@ -11,10 +11,11 @@ import { useDashFieldMeta } from '@dashforge/forms';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import { useCalendar, resolveCalendarKey, formatLongDate, parseISODate, formatTime, generateTimeOptions, timeStringToMinutes, getTodayISODate, useDateRange } from '@dashforge/calendar-core';
+import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import * as RadixTabs from '@radix-ui/react-tabs';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import * as RadixPopover from '@radix-ui/react-popover';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 
 function _extends() {
@@ -3427,193 +3428,1610 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
 }
 
 /**
- * Tailwind-variants recipe for `<DateTimePicker>` with 6 slots.
+ * Structural slots for `<Calendar>`.
+ *
+ * Theme identity: every class is a bare neutral / brand token-backed
+ * Tailwind class. The `dashforgePreset()` CSS-variable swap auto-inverts
+ * the neutral palette, so there are NO `dark:` variants here (a `dark:` on
+ * a neutral class would double-invert — see `_shared/themeIdentity.test.ts`).
+ */ const calendarVariants = tv({
+    slots: {
+        root: 'inline-flex w-fit flex-col gap-2 rounded-lg border border-neutral-200 bg-neutral-50 p-3 select-none',
+        header: 'flex items-center justify-between gap-1',
+        navButton: 'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[1rem] text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 disabled:pointer-events-none disabled:opacity-40',
+        monthLabel: 'flex-1 text-center text-sm font-semibold text-neutral-900',
+        grid: 'flex flex-col gap-1 focus:outline-none',
+        weekdayRow: 'grid grid-cols-7 gap-1',
+        weekday: 'flex h-8 items-center justify-center text-xs font-semibold text-neutral-500',
+        weekRow: 'grid grid-cols-7 gap-1'
+    },
+    variants: {
+        disabled: {
+            true: {
+                root: 'opacity-60'
+            }
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+/**
+ * Per-day-cell recipe. Each of the 42 grid cells is rendered with its own
+ * state (`siblingMonth` / `today` / `selected` / `disabled`).
+ */ const calendarDayVariants = tv({
+    base: 'flex h-9 w-9 items-center justify-center rounded-md text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+    variants: {
+        siblingMonth: {
+            true: 'text-neutral-400'
+        },
+        today: {
+            true: 'font-bold ring-1 ring-inset ring-primary-400'
+        },
+        selected: {
+            true: 'bg-primary-600 text-white hover:bg-primary-600'
+        },
+        disabled: {
+            true: 'cursor-default text-neutral-300 opacity-60 hover:bg-transparent'
+        }
+    },
+    compoundVariants: [
+        // A selected cell drops the "today" ring — the solid fill is enough.
+        {
+            selected: true,
+            today: true,
+            class: 'ring-0'
+        }
+    ],
+    defaultVariants: {
+        siblingMonth: false,
+        today: false,
+        selected: false,
+        disabled: false
+    }
+});
+
+// Inline 16×16 stroke chevrons — no icon dependency (tw convention).
+function ChevronLeftIcon$1() {
+    return jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "M10 4 6 8l4 4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+}
+function ChevronRightIcon$2() {
+    return jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "m6 4 4 4-4 4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+}
+/**
+ * `<Calendar>` — a standalone, inline month-grid date picker.
+ *
+ * The Tailwind presentation layer over the headless `useCalendar` engine
+ * from `@dashforge/calendar-core` (the same engine the MUI `@dashforge/ui`
+ * calendar consumes — only the skin differs). Implements the WCAG grid
+ * pattern with roving tab-index focus.
+ *
+ * It is a primitive: no form-bridge / RBAC integration — use `<DatePicker>`
+ * for a form-bound date field.
+ */ function Calendar(props) {
+    var _slotProps_root, _slotProps_header, _slotProps_grid;
+    const { value, defaultValue, onChange, month, year, defaultMonth, defaultYear, onMonthChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, today, disabled = false, autoFocus = false, sx, slotProps, testId, 'aria-label': ariaLabel = 'Calendar' } = props;
+    const isValueControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : null);
+    const selectedValue = isValueControlled ? value : internalValue;
+    const handleSelect = useCallback((iso)=>{
+        if (!isValueControlled) {
+            setInternalValue(iso);
+        }
+        onChange == null ? void 0 : onChange(iso);
+    }, [
+        isValueControlled,
+        onChange
+    ]);
+    const calendar = useCalendar({
+        selected: selectedValue,
+        month,
+        year,
+        defaultMonth,
+        defaultYear,
+        onMonthChange,
+        minDate,
+        maxDate,
+        disabledDates,
+        isDateDisabled,
+        weekStartDay,
+        locale,
+        today,
+        onSelect: handleSelect
+    });
+    // Roving focus: the active day cell holds DOM focus; it is moved only
+    // after a keyboard interaction (or on mount when `autoFocus`). `focus`
+    // uses `preventScroll` so opening the calendar inside a popup never
+    // scroll-jumps the page before the popup is positioned.
+    const focusedCellRef = useRef(null);
+    const shouldFocusRef = useRef(autoFocus);
+    useEffect(()=>{
+        if (shouldFocusRef.current && focusedCellRef.current) {
+            focusedCellRef.current.focus({
+                preventScroll: true
+            });
+            shouldFocusRef.current = false;
+        }
+    }, [
+        calendar.focusedDate
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        if (disabled) {
+            return;
+        }
+        const action = resolveCalendarKey(event.key);
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        shouldFocusRef.current = true;
+        switch(action){
+            case 'select':
+                calendar.selectDate(calendar.focusedDate);
+                break;
+            case 'monthForward':
+                calendar.goToNextMonth();
+                break;
+            case 'monthBackward':
+                calendar.goToPreviousMonth();
+                break;
+            default:
+                calendar.navigate(action);
+        }
+    }, [
+        disabled,
+        calendar
+    ]);
+    const resolvedLocale = locale != null ? locale : 'en-US';
+    const v = calendarVariants({
+        disabled
+    });
+    return jsxs("div", {
+        "data-testid": testId,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            jsxs("div", {
+                className: cn(v.header(), slotProps == null ? void 0 : (_slotProps_header = slotProps.header) == null ? void 0 : _slotProps_header.className),
+                children: [
+                    jsx("button", {
+                        type: "button",
+                        className: v.navButton(),
+                        disabled: disabled,
+                        "aria-label": "Previous month",
+                        onClick: ()=>{
+                            calendar.goToPreviousMonth();
+                        },
+                        children: jsx(ChevronLeftIcon$1, {})
+                    }),
+                    jsx("span", {
+                        "aria-live": "polite",
+                        className: v.monthLabel(),
+                        children: calendar.monthLabel
+                    }),
+                    jsx("button", {
+                        type: "button",
+                        className: v.navButton(),
+                        disabled: disabled,
+                        "aria-label": "Next month",
+                        onClick: ()=>{
+                            calendar.goToNextMonth();
+                        },
+                        children: jsx(ChevronRightIcon$2, {})
+                    })
+                ]
+            }),
+            jsxs("div", {
+                role: "grid",
+                "aria-label": ariaLabel,
+                onKeyDown: handleKeyDown,
+                className: cn(v.grid(), slotProps == null ? void 0 : (_slotProps_grid = slotProps.grid) == null ? void 0 : _slotProps_grid.className),
+                children: [
+                    jsx("div", {
+                        role: "row",
+                        className: v.weekdayRow(),
+                        children: calendar.weekdayNames.map((dayName, index)=>jsx("span", {
+                                role: "columnheader",
+                                className: v.weekday(),
+                                children: dayName
+                            }, `weekday-${String(index)}`))
+                    }),
+                    calendar.weeks.map((week)=>jsx("div", {
+                            role: "row",
+                            className: v.weekRow(),
+                            children: week.days.map((day)=>{
+                                var _slotProps_day;
+                                const isActiveCell = day.iso === calendar.focusedDate;
+                                return jsx("span", {
+                                    role: "gridcell",
+                                    className: "flex",
+                                    children: jsx("button", {
+                                        type: "button",
+                                        ref: isActiveCell ? focusedCellRef : null,
+                                        tabIndex: isActiveCell ? 0 : -1,
+                                        disabled: disabled,
+                                        "aria-label": formatLongDate({
+                                            year: day.year,
+                                            month: day.month,
+                                            day: day.day
+                                        }, resolvedLocale),
+                                        "aria-current": day.isToday ? 'date' : undefined,
+                                        "aria-pressed": day.isSelected,
+                                        "aria-disabled": day.isDisabled,
+                                        onClick: ()=>{
+                                            calendar.selectDate(day.iso);
+                                        },
+                                        className: cn(calendarDayVariants({
+                                            siblingMonth: day.isSiblingMonth,
+                                            today: day.isToday,
+                                            selected: day.isSelected,
+                                            disabled: day.isDisabled
+                                        }), slotProps == null ? void 0 : (_slotProps_day = slotProps.day) == null ? void 0 : _slotProps_day.className),
+                                        children: day.day
+                                    })
+                                }, day.iso);
+                            })
+                        }, week.key))
+                ]
+            })
+        ]
+    });
+}
+
+const popoverVariants = tv({
+    slots: {
+        content: [
+            // Neutral border auto-inverts via CSS-var swap.
+            'z-50 rounded-md border border-neutral-200',
+            // bg-white hardcoded (no auto-invert) so `dark:` is required.
+            // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
+            // (one elevation tier above the page surface).
+            'bg-white dark:bg-neutral-100 p-4 shadow-lg',
+            // Text auto-inverts.
+            'text-sm text-neutral-900',
+            'focus:outline-none',
+            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+            'motion-reduce:transition-none motion-reduce:duration-0'
+        ],
+        // Arrow follows content bg: `fill-white` in light + matching dark target.
+        arrow: 'fill-white dark:fill-neutral-100'
+    }
+});
+
+/**
+ * Dashforge TW `<Popover>` — clickable floating content panel.
  *
- * Styling mirrors `<TextField>` for layout / sizes / error states so
- * the two field types compose visually in the same form.
+ * Built on `@radix-ui/react-popover`:
+ *  - Focus trap inside the popover (Tab cycles within).
+ *  - Outside-click + Escape dismiss.
+ *  - APG dialog-like semantics (`role="dialog"` on content).
+ *  - Portal-rendered.
  *
- * Native `<input type="date|time|datetime-local">` quirks handled here:
+ * Use `<Popover>` for menus / pickers / settings panels with
+ * interactive children. Use `<Tooltip>` for read-only hints.
+ */ function Popover(props) {
+    var _slotProps_content, _slotProps_arrow;
+    const { children, content, side = 'bottom', align = 'center', showArrow = false, open, onOpenChange, sideOffset = 8, width, slotProps } = props;
+    const v = popoverVariants();
+    return jsxs(RadixPopover.Root, {
+        open: open,
+        onOpenChange: onOpenChange,
+        children: [
+            jsx(RadixPopover.Trigger, {
+                asChild: true,
+                children: children
+            }),
+            jsx(RadixPopover.Portal, {
+                children: jsxs(RadixPopover.Content, {
+                    side: side,
+                    align: align,
+                    sideOffset: sideOffset,
+                    style: width != null ? {
+                        width
+                    } : undefined,
+                    className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
+                    children: [
+                        content,
+                        showArrow && jsx(RadixPopover.Arrow, {
+                            className: cn(v.arrow(), slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+/**
+ * Slots for `<DatePicker>` — a bridge-integrated date field whose trigger
+ * is a `<button>` styled as an input, opening a `<Calendar>` popover.
  *
- *  - The browser-rendered placeholder mask (e.g., `mm/dd/yyyy`) is
- *    invisible on `bg-neutral-50` by default in some themes; we keep
- *    the same neutral palette and rely on the input's own contrast
- *    rules (no extra `::placeholder` styling — browsers don't honor it
- *    on these input types).
- *  - The native picker indicator (calendar / clock icon) is
- *    browser-supplied; we ensure it stays visible in dark mode via
- *    `color-scheme: light dark` on the input (set inline below).
- */ const dateTimePickerVariants = tv({
+ * Theme identity: bare neutral / brand token-backed classes only — no
+ * `dark:` variants on the neutral palette (the preset CSS-var swap
+ * auto-inverts). See `_shared/themeIdentity.test.ts`.
+ */ const datePickerVariants = tv({
     slots: {
-        root: 'flex',
+        root: 'flex flex-col',
         label: 'block text-sm font-medium text-neutral-900 mb-1',
         requiredMark: 'text-danger-500 ml-0.5',
-        inputWrapper: [
-            'relative flex items-center',
-            'rounded-md border bg-neutral-50',
-            'border-neutral-300',
-            'transition-colors',
-            'focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30'
-        ],
-        input: [
-            'block w-full bg-transparent outline-none',
-            'text-neutral-900 placeholder:text-neutral-400',
-            'disabled:cursor-not-allowed disabled:opacity-60',
-            'read-only:cursor-default',
-            // `color-scheme` lets the native calendar / clock icon respect
-            // the dark mode (otherwise it stays light-themed against dark bg)
-            '[color-scheme:light_dark]'
-        ],
+        trigger: 'flex items-center gap-2 h-10 min-w-[12rem] rounded-md border border-neutral-300 bg-neutral-50 px-3 text-base text-neutral-900 cursor-pointer transition-colors hover:border-neutral-400 focus-visible:outline-none focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/30 disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-neutral-200',
+        value: 'flex-1 truncate text-left',
+        placeholder: 'flex-1 truncate text-left text-neutral-400',
+        icon: 'shrink-0 text-[1rem] text-neutral-500',
+        helperText: 'mt-1 text-sm text-neutral-600',
+        errorText: 'mt-1 text-sm text-danger-600'
+    },
+    variants: {
+        layout: {
+            stacked: {},
+            inline: {
+                root: 'flex-row items-start gap-3',
+                label: 'mb-0 pt-2.5 whitespace-nowrap shrink-0'
+            }
+        },
+        error: {
+            true: {
+                trigger: 'border-danger-500 hover:border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/30'
+            }
+        },
+        fullWidth: {
+            true: {
+                root: 'w-full',
+                trigger: 'w-full min-w-0'
+            }
+        }
+    },
+    defaultVariants: {
+        layout: 'stacked',
+        error: false,
+        fullWidth: false
+    }
+});
+
+// Inline 16×16 stroke calendar glyph — no icon dependency (tw convention).
+function CalendarIcon$2() {
+    return jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+            jsx("rect", {
+                x: "2.5",
+                y: "3.5",
+                width: "11",
+                height: "10",
+                rx: "1.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+            }),
+            jsx("path", {
+                d: "M2.5 6.5h11M5.5 2v3M10.5 2v3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+/**
+ * Formats a stored ISO date for the trigger display, localized to a medium
+ * date style (e.g. `"May 20, 2026"`). Formatting is done in UTC so the
+ * displayed day always matches the stored `YYYY-MM-DD`.
+ */ function formatDisplayDate(iso, locale) {
+    if (iso == null || iso === '') {
+        return '';
+    }
+    const parts = parseISODate(iso);
+    if (parts === null) {
+        return iso;
+    }
+    return new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeZone: 'UTC'
+    }).format(Date.UTC(parts.year, parts.month - 1, parts.day));
+}
+/**
+ * Dashforge TW `<DatePicker>` — a form-bound single-date field.
+ *
+ * A read-only trigger button paired with a `<Calendar>` popover (Radix
+ * Popover — toggle / Escape / outside-click / focus-trap are Radix-managed).
+ * Integrates with the Dashforge form bridge + RBAC, mirroring the other
+ * `@dashforge/tw` form fields.
+ *
+ * Storage contract: an ISO `YYYY-MM-DD` string, or `null` — shared with the
+ * MUI `@dashforge/ui` `DatePicker`.
+ */ function DatePicker(props) {
+    var _slotProps_root, _slotProps_label, _slotProps_requiredMark, _slotProps_trigger, _slotProps_errorText, _slotProps_helperText;
+    const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, fullWidth, sx, slotProps, testId } = props;
+    // ───── Hooks (unconditional, before any early return) ─────
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const fieldMeta = useDashFieldMeta(name);
+    const accessState = useAccessState(access);
+    const fieldId = useId();
+    const helperId = `${fieldId}-help`;
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : null);
+    // StrictMode-safe unregister-on-unmount.
+    const unregisterRef = useRef({
+        bridge,
+        name
+    });
+    unregisterRef.current = {
+        bridge,
+        name
+    };
+    const isMountedRef = useRef(false);
+    useEffect(()=>{
+        isMountedRef.current = true;
+        return ()=>{
+            isMountedRef.current = false;
+            const { bridge: cap, name: capName } = unregisterRef.current;
+            queueMicrotask(()=>{
+                var _cap_unregister;
+                if (!isMountedRef.current) cap == null ? void 0 : (_cap_unregister = cap.unregister) == null ? void 0 : _cap_unregister.call(cap, capName);
+            });
+        };
+    }, []);
+    // ───── Derived ─────
+    const effectiveDisabled = Boolean(disabled) || accessState.disabled;
+    const effectiveReadOnly = accessState.readonly;
+    const isInteractive = !effectiveDisabled && !effectiveReadOnly;
+    const isFormMode = Boolean(bridge == null ? void 0 : bridge.register);
+    let resolvedError = error;
+    let resolvedHelperText = helperText;
+    let registration = null;
+    let resolvedValue;
+    if (isFormMode && bridge) {
+        registration = bridge.register(name, rules);
+        const validation = resolveValidationState(name, bridge, error, helperText);
+        resolvedError = validation.error;
+        resolvedHelperText = validation.helperText;
+        if (explicitValue !== undefined) {
+            resolvedValue = explicitValue;
+        } else {
+            const bv = fieldMeta.value;
+            resolvedValue = bv == null ? null : String(bv);
+        }
+    } else if (explicitValue !== undefined) {
+        resolvedValue = explicitValue;
+    } else {
+        resolvedValue = internalValue;
+    }
+    // RHF threads its own callback ref through here in form mode.
+    const registrationRefFn = registration == null ? void 0 : registration.ref;
+    const triggerRef = useCallback((instance)=>{
+        if (typeof registrationRefFn === 'function') {
+            registrationRefFn(instance);
+        }
+    }, [
+        registrationRefFn
+    ]);
+    // ───── Render-time guards (after all hooks) ─────
+    if (!isVisible) return null;
+    if (!accessState.visible) return null;
+    const v = datePickerVariants({
+        layout,
+        error: resolvedError,
+        fullWidth
+    });
+    const resolvedLocale = locale != null ? locale : 'en-US';
+    const displayValue = formatDisplayDate(resolvedValue, resolvedLocale);
+    const commitValue = (next)=>{
+        if (isFormMode && bridge) {
+            var _registration_onChange;
+            bridge.setValue == null ? void 0 : bridge.setValue.call(bridge, name, next);
+            void (registration == null ? void 0 : (_registration_onChange = registration.onChange) == null ? void 0 : _registration_onChange.call(registration, {
+                target: {
+                    name,
+                    value: next != null ? next : ''
+                },
+                type: 'change'
+            }));
+        } else if (explicitValue === undefined) {
+            setInternalValue(next);
+        }
+        onChange == null ? void 0 : onChange(next);
+    };
+    // Mark the field touched on popover close. Reads the freshest committed
+    // value straight from the bridge so the touched-blur never reverts a
+    // value just chosen in the calendar.
+    const markTouched = ()=>{
+        if (isFormMode && bridge) {
+            var _registration_onBlur;
+            const committed = bridge.getValue(name);
+            void (registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, {
+                target: {
+                    name,
+                    value: committed == null ? '' : String(committed)
+                },
+                type: 'blur'
+            }));
+        }
+    };
+    const handleOpenChange = (next)=>{
+        if (next && !isInteractive) {
+            return;
+        }
+        setIsOpen(next);
+        if (!next) {
+            markTouched();
+        }
+    };
+    const handleCalendarChange = (next)=>{
+        commitValue(next);
+        setIsOpen(false);
+        markTouched();
+    };
+    return jsxs("div", {
+        "data-testid": testId,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            label && jsxs("label", {
+                htmlFor: fieldId,
+                className: cn(v.label(), slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
+                children: [
+                    label,
+                    required && jsx("span", {
+                        "aria-hidden": "true",
+                        className: cn(v.requiredMark(), slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                        children: "*"
+                    })
+                ]
+            }),
+            jsx(Popover, {
+                open: isOpen,
+                onOpenChange: handleOpenChange,
+                side: "bottom",
+                align: "start",
+                content: jsx(Calendar, {
+                    value: resolvedValue,
+                    onChange: handleCalendarChange,
+                    minDate: minDate,
+                    maxDate: maxDate,
+                    disabledDates: disabledDates,
+                    isDateDisabled: isDateDisabled,
+                    weekStartDay: weekStartDay,
+                    locale: locale,
+                    "aria-label": "Choose date",
+                    sx: "border-0 bg-transparent p-0"
+                }),
+                children: jsxs("button", {
+                    type: "button",
+                    id: fieldId,
+                    ref: triggerRef,
+                    disabled: effectiveDisabled,
+                    "aria-invalid": resolvedError ? true : undefined,
+                    "aria-describedby": resolvedHelperText ? helperId : undefined,
+                    className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
+                    children: [
+                        jsx("span", {
+                            className: displayValue ? v.value() : v.placeholder(),
+                            children: displayValue || placeholder || 'Select a date'
+                        }),
+                        jsx("span", {
+                            className: v.icon(),
+                            children: jsx(CalendarIcon$2, {})
+                        })
+                    ]
+                })
+            }),
+            resolvedHelperText && jsx("p", {
+                id: helperId,
+                className: cn(resolvedError ? v.errorText() : v.helperText(), resolvedError ? slotProps == null ? void 0 : (_slotProps_errorText = slotProps.errorText) == null ? void 0 : _slotProps_errorText.className : slotProps == null ? void 0 : (_slotProps_helperText = slotProps.helperText) == null ? void 0 : _slotProps_helperText.className),
+                children: resolvedHelperText
+            })
+        ]
+    });
+}
+
+/**
+ * Slots for `<TimePicker>` — a bridge-integrated time field whose trigger
+ * is a `<button>` styled as an input, opening a time-list popover.
+ *
+ * Theme identity: bare neutral / brand token-backed classes only — no
+ * `dark:` variants on the neutral palette (the preset CSS-var swap
+ * auto-inverts). See `_shared/themeIdentity.test.ts`.
+ */ const timePickerVariants = tv({
+    slots: {
+        root: 'flex flex-col',
+        label: 'block text-sm font-medium text-neutral-900 mb-1',
+        requiredMark: 'text-danger-500 ml-0.5',
+        trigger: 'flex items-center gap-2 h-10 min-w-[10rem] rounded-md border border-neutral-300 bg-neutral-50 px-3 text-base text-neutral-900 cursor-pointer transition-colors hover:border-neutral-400 focus-visible:outline-none focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/30 disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-neutral-200',
+        value: 'flex-1 truncate text-left',
+        placeholder: 'flex-1 truncate text-left text-neutral-400',
+        icon: 'shrink-0 text-[1rem] text-neutral-500',
+        list: 'flex max-h-64 min-w-[8rem] flex-col gap-0.5 overflow-y-auto p-1',
+        option: 'flex w-full cursor-pointer items-center rounded px-2.5 py-1.5 text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 aria-selected:bg-primary-600 aria-selected:text-white aria-selected:hover:bg-primary-600 aria-disabled:cursor-default aria-disabled:text-neutral-300 aria-disabled:opacity-60 aria-disabled:hover:bg-transparent',
+        helperText: 'mt-1 text-sm text-neutral-600',
+        errorText: 'mt-1 text-sm text-danger-600'
+    },
+    variants: {
+        layout: {
+            stacked: {},
+            inline: {
+                root: 'flex-row items-start gap-3',
+                label: 'mb-0 pt-2.5 whitespace-nowrap shrink-0'
+            }
+        },
+        error: {
+            true: {
+                trigger: 'border-danger-500 hover:border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/30'
+            }
+        },
+        fullWidth: {
+            true: {
+                root: 'w-full',
+                trigger: 'w-full min-w-0'
+            }
+        }
+    },
+    defaultVariants: {
+        layout: 'stacked',
+        error: false,
+        fullWidth: false
+    }
+});
+
+// Inline 16×16 stroke clock glyph — no icon dependency (tw convention).
+function ClockIcon() {
+    return jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+            jsx("circle", {
+                cx: "8",
+                cy: "8",
+                r: "6",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+            }),
+            jsx("path", {
+                d: "M8 4.5V8l2.4 1.4",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+            })
+        ]
+    });
+}
+/**
+ * Dashforge TW `<TimePicker>` — a form-bound time-of-day field.
+ *
+ * A read-only trigger button paired with a time-list popover (Radix
+ * Popover). Integrates with the Dashforge form bridge + RBAC.
+ *
+ * Storage contract: a canonical 24-hour `"HH:mm"` string, or `null` —
+ * shared with the MUI `@dashforge/ui` `TimePicker`. `hour12` is display-only.
+ */ function TimePicker(props) {
+    var _timeStringToMinutes, _timeStringToMinutes1;
+    var _slotProps_root, _slotProps_label, _slotProps_requiredMark, _slotProps_trigger, _slotProps_errorText, _slotProps_helperText;
+    const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minTime, maxTime, stepMinutes, hour12 = false, fullWidth, sx, slotProps, testId } = props;
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const fieldMeta = useDashFieldMeta(name);
+    const accessState = useAccessState(access);
+    const fieldId = useId();
+    const helperId = `${fieldId}-help`;
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : null);
+    const unregisterRef = useRef({
+        bridge,
+        name
+    });
+    unregisterRef.current = {
+        bridge,
+        name
+    };
+    const isMountedRef = useRef(false);
+    useEffect(()=>{
+        isMountedRef.current = true;
+        return ()=>{
+            isMountedRef.current = false;
+            const { bridge: cap, name: capName } = unregisterRef.current;
+            queueMicrotask(()=>{
+                var _cap_unregister;
+                if (!isMountedRef.current) cap == null ? void 0 : (_cap_unregister = cap.unregister) == null ? void 0 : _cap_unregister.call(cap, capName);
+            });
+        };
+    }, []);
+    const effectiveDisabled = Boolean(disabled) || accessState.disabled;
+    const isInteractive = !effectiveDisabled && !accessState.readonly;
+    const isFormMode = Boolean(bridge == null ? void 0 : bridge.register);
+    let resolvedError = error;
+    let resolvedHelperText = helperText;
+    let registration = null;
+    let resolvedValue;
+    if (isFormMode && bridge) {
+        registration = bridge.register(name, rules);
+        const validation = resolveValidationState(name, bridge, error, helperText);
+        resolvedError = validation.error;
+        resolvedHelperText = validation.helperText;
+        if (explicitValue !== undefined) {
+            resolvedValue = explicitValue;
+        } else {
+            const bv = fieldMeta.value;
+            resolvedValue = bv == null ? null : String(bv);
+        }
+    } else if (explicitValue !== undefined) {
+        resolvedValue = explicitValue;
+    } else {
+        resolvedValue = internalValue;
+    }
+    const registrationRefFn = registration == null ? void 0 : registration.ref;
+    const triggerRef = useCallback((instance)=>{
+        if (typeof registrationRefFn === 'function') {
+            registrationRefFn(instance);
+        }
+    }, [
+        registrationRefFn
+    ]);
+    if (!isVisible) return null;
+    if (!accessState.visible) return null;
+    const v = timePickerVariants({
+        layout,
+        error: resolvedError,
+        fullWidth
+    });
+    const displayValue = resolvedValue != null && resolvedValue !== '' ? formatTime(resolvedValue, {
+        hour12
+    }) : '';
+    const options = generateTimeOptions(_extends({}, minTime !== undefined && {
+        start: minTime
+    }, maxTime !== undefined && {
+        end: maxTime
+    }, stepMinutes !== undefined && {
+        stepMinutes
+    }));
+    const minMinutes = (_timeStringToMinutes = timeStringToMinutes(minTime != null ? minTime : '00:00')) != null ? _timeStringToMinutes : 0;
+    const maxMinutes = (_timeStringToMinutes1 = timeStringToMinutes(maxTime != null ? maxTime : '23:59')) != null ? _timeStringToMinutes1 : 1439;
+    const isTimeDisabled = (time)=>{
+        const minutes = timeStringToMinutes(time);
+        return minutes === null || minutes < minMinutes || minutes > maxMinutes;
+    };
+    const commitValue = (next)=>{
+        if (isFormMode && bridge) {
+            var _registration_onChange;
+            bridge.setValue == null ? void 0 : bridge.setValue.call(bridge, name, next);
+            void (registration == null ? void 0 : (_registration_onChange = registration.onChange) == null ? void 0 : _registration_onChange.call(registration, {
+                target: {
+                    name,
+                    value: next != null ? next : ''
+                },
+                type: 'change'
+            }));
+        } else if (explicitValue === undefined) {
+            setInternalValue(next);
+        }
+        onChange == null ? void 0 : onChange(next);
+    };
+    const markTouched = ()=>{
+        if (isFormMode && bridge) {
+            var _registration_onBlur;
+            const committed = bridge.getValue(name);
+            void (registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, {
+                target: {
+                    name,
+                    value: committed == null ? '' : String(committed)
+                },
+                type: 'blur'
+            }));
+        }
+    };
+    const handleOpenChange = (next)=>{
+        if (next && !isInteractive) {
+            return;
+        }
+        setIsOpen(next);
+        if (!next) {
+            markTouched();
+        }
+    };
+    const handleSelect = (time)=>{
+        if (isTimeDisabled(time)) {
+            return;
+        }
+        commitValue(time);
+        setIsOpen(false);
+        markTouched();
+    };
+    return jsxs("div", {
+        "data-testid": testId,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            label && jsxs("label", {
+                htmlFor: fieldId,
+                className: cn(v.label(), slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
+                children: [
+                    label,
+                    required && jsx("span", {
+                        "aria-hidden": "true",
+                        className: cn(v.requiredMark(), slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                        children: "*"
+                    })
+                ]
+            }),
+            jsx(Popover, {
+                open: isOpen,
+                onOpenChange: handleOpenChange,
+                side: "bottom",
+                align: "start",
+                content: jsx("div", {
+                    role: "listbox",
+                    "aria-label": "Time options",
+                    className: v.list(),
+                    children: options.map((time)=>jsx("button", {
+                            type: "button",
+                            role: "option",
+                            "aria-selected": time === resolvedValue,
+                            "aria-disabled": isTimeDisabled(time),
+                            className: v.option(),
+                            onClick: ()=>{
+                                handleSelect(time);
+                            },
+                            children: formatTime(time, {
+                                hour12
+                            })
+                        }, time))
+                }),
+                children: jsxs("button", {
+                    type: "button",
+                    id: fieldId,
+                    ref: triggerRef,
+                    disabled: effectiveDisabled,
+                    "aria-invalid": resolvedError ? true : undefined,
+                    "aria-describedby": resolvedHelperText ? helperId : undefined,
+                    className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
+                    children: [
+                        jsx("span", {
+                            className: displayValue ? v.value() : v.placeholder(),
+                            children: displayValue || placeholder || 'Select a time'
+                        }),
+                        jsx("span", {
+                            className: v.icon(),
+                            children: jsx(ClockIcon, {})
+                        })
+                    ]
+                })
+            }),
+            resolvedHelperText && jsx("p", {
+                id: helperId,
+                className: cn(resolvedError ? v.errorText() : v.helperText(), resolvedError ? slotProps == null ? void 0 : (_slotProps_errorText = slotProps.errorText) == null ? void 0 : _slotProps_errorText.className : slotProps == null ? void 0 : (_slotProps_helperText = slotProps.helperText) == null ? void 0 : _slotProps_helperText.className),
+                children: resolvedHelperText
+            })
+        ]
+    });
+}
+
+/**
+ * Slots for `<DateTimePicker>` — a bridge-integrated date+time field whose
+ * trigger is a `<button>` styled as an input, opening a popover that
+ * combines a `<Calendar>` with a time list.
+ *
+ * Theme identity: bare neutral / brand token-backed classes only — no
+ * `dark:` variants on the neutral palette (the preset CSS-var swap
+ * auto-inverts). See `_shared/themeIdentity.test.ts`.
+ */ const dateTimePickerVariants = tv({
+    slots: {
+        root: 'flex flex-col',
+        label: 'block text-sm font-medium text-neutral-900 mb-1',
+        requiredMark: 'text-danger-500 ml-0.5',
+        trigger: 'flex items-center gap-2 h-10 min-w-[13rem] rounded-md border border-neutral-300 bg-neutral-50 px-3 text-base text-neutral-900 cursor-pointer transition-colors hover:border-neutral-400 focus-visible:outline-none focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/30 disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-neutral-200',
+        value: 'flex-1 truncate text-left',
+        placeholder: 'flex-1 truncate text-left text-neutral-400',
+        icon: 'shrink-0 text-[1rem] text-neutral-500',
+        panel: 'flex items-stretch',
+        list: 'flex max-h-[19rem] min-w-[6.5rem] flex-col gap-0.5 overflow-y-auto border-l border-neutral-200 p-1',
+        option: 'flex w-full cursor-pointer items-center rounded px-2.5 py-1.5 text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 aria-selected:bg-primary-600 aria-selected:text-white aria-selected:hover:bg-primary-600',
+        helperText: 'mt-1 text-sm text-neutral-600',
+        errorText: 'mt-1 text-sm text-danger-600'
+    },
+    variants: {
+        layout: {
+            stacked: {},
+            inline: {
+                root: 'flex-row items-start gap-3',
+                label: 'mb-0 pt-2.5 whitespace-nowrap shrink-0'
+            }
+        },
+        error: {
+            true: {
+                trigger: 'border-danger-500 hover:border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/30'
+            }
+        },
+        fullWidth: {
+            true: {
+                root: 'w-full',
+                trigger: 'w-full min-w-0'
+            }
+        }
+    },
+    defaultVariants: {
+        layout: 'stacked',
+        error: false,
+        fullWidth: false
+    }
+});
+
+// Inline 16×16 stroke calendar glyph — no icon dependency (tw convention).
+function CalendarIcon$1() {
+    return jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+            jsx("rect", {
+                x: "2.5",
+                y: "3.5",
+                width: "11",
+                height: "10",
+                rx: "1.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+            }),
+            jsx("path", {
+                d: "M2.5 6.5h11M5.5 2v3M10.5 2v3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+const DATETIME_PATTERN = /^(\d{4}-\d{2}-\d{2})T(\d{2}):(\d{2})/;
+/** Splits a stored `YYYY-MM-DDTHH:mm` value into its date and time parts. */ function splitDateTime(value) {
+    if (value == null || value === '') {
+        return {
+            date: null,
+            time: null
+        };
+    }
+    const match = DATETIME_PATTERN.exec(value);
+    if (match !== null) {
+        var _match_, _match_1, _match_2;
+        return {
+            date: (_match_ = match[1]) != null ? _match_ : null,
+            time: `${(_match_1 = match[2]) != null ? _match_1 : '00'}:${(_match_2 = match[3]) != null ? _match_2 : '00'}`
+        };
+    }
+    return {
+        date: parseISODate(value) !== null ? value : null,
+        time: null
+    };
+}
+/** Combines a date and a time into a `YYYY-MM-DDTHH:mm` value (or `null`). */ function joinDateTime(date, time) {
+    if (date === null && time === null) {
+        return null;
+    }
+    return `${date != null ? date : getTodayISODate()}T${time != null ? time : '00:00'}`;
+}
+/** Formats a stored datetime for the trigger display. */ function formatDateTime(value, locale, hour12) {
+    const { date, time } = splitDateTime(value);
+    const parts = [];
+    if (date !== null) {
+        const parsed = parseISODate(date);
+        parts.push(parsed === null ? date : new Intl.DateTimeFormat(locale, {
+            dateStyle: 'medium',
+            timeZone: 'UTC'
+        }).format(Date.UTC(parsed.year, parsed.month - 1, parsed.day)));
+    }
+    if (time !== null) {
+        parts.push(formatTime(time, {
+            hour12
+        }));
+    }
+    return parts.join(', ');
+}
+/**
+ * Dashforge TW `<DateTimePicker>` — a form-bound date + time field.
+ *
+ * A read-only trigger button paired with a popover combining a `<Calendar>`
+ * and a time list (Radix Popover). Integrates with the Dashforge form
+ * bridge + RBAC.
+ *
+ * Storage contract: a naive ISO datetime `"YYYY-MM-DDTHH:mm"` — no seconds,
+ * no timezone. Shared with the MUI `@dashforge/ui` `DateTimePicker`.
+ */ function DateTimePicker(props) {
+    var _slotProps_root, _slotProps_label, _slotProps_requiredMark, _slotProps_trigger, _slotProps_errorText, _slotProps_helperText;
+    const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, stepMinutes, hour12 = false, fullWidth, sx, slotProps, testId } = props;
+    const bridge = useContext(DashFormContext);
+    const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
+    const fieldMeta = useDashFieldMeta(name);
+    const accessState = useAccessState(access);
+    const fieldId = useId();
+    const helperId = `${fieldId}-help`;
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : null);
+    const unregisterRef = useRef({
+        bridge,
+        name
+    });
+    unregisterRef.current = {
+        bridge,
+        name
+    };
+    const isMountedRef = useRef(false);
+    useEffect(()=>{
+        isMountedRef.current = true;
+        return ()=>{
+            isMountedRef.current = false;
+            const { bridge: cap, name: capName } = unregisterRef.current;
+            queueMicrotask(()=>{
+                var _cap_unregister;
+                if (!isMountedRef.current) cap == null ? void 0 : (_cap_unregister = cap.unregister) == null ? void 0 : _cap_unregister.call(cap, capName);
+            });
+        };
+    }, []);
+    const effectiveDisabled = Boolean(disabled) || accessState.disabled;
+    const isInteractive = !effectiveDisabled && !accessState.readonly;
+    const isFormMode = Boolean(bridge == null ? void 0 : bridge.register);
+    let resolvedError = error;
+    let resolvedHelperText = helperText;
+    let registration = null;
+    let resolvedValue;
+    if (isFormMode && bridge) {
+        registration = bridge.register(name, rules);
+        const validation = resolveValidationState(name, bridge, error, helperText);
+        resolvedError = validation.error;
+        resolvedHelperText = validation.helperText;
+        if (explicitValue !== undefined) {
+            resolvedValue = explicitValue;
+        } else {
+            const bv = fieldMeta.value;
+            resolvedValue = bv == null ? null : String(bv);
+        }
+    } else if (explicitValue !== undefined) {
+        resolvedValue = explicitValue;
+    } else {
+        resolvedValue = internalValue;
+    }
+    const registrationRefFn = registration == null ? void 0 : registration.ref;
+    const triggerRef = useCallback((instance)=>{
+        if (typeof registrationRefFn === 'function') {
+            registrationRefFn(instance);
+        }
+    }, [
+        registrationRefFn
+    ]);
+    if (!isVisible) return null;
+    if (!accessState.visible) return null;
+    const v = dateTimePickerVariants({
+        layout,
+        error: resolvedError,
+        fullWidth
+    });
+    const resolvedLocale = locale != null ? locale : 'en-US';
+    const { date, time } = splitDateTime(resolvedValue);
+    const displayValue = formatDateTime(resolvedValue, resolvedLocale, hour12);
+    const options = generateTimeOptions(_extends({}, stepMinutes !== undefined && {
+        stepMinutes
+    }));
+    const commitValue = (next)=>{
+        if (isFormMode && bridge) {
+            var _registration_onChange;
+            bridge.setValue == null ? void 0 : bridge.setValue.call(bridge, name, next);
+            void (registration == null ? void 0 : (_registration_onChange = registration.onChange) == null ? void 0 : _registration_onChange.call(registration, {
+                target: {
+                    name,
+                    value: next != null ? next : ''
+                },
+                type: 'change'
+            }));
+        } else if (explicitValue === undefined) {
+            setInternalValue(next);
+        }
+        onChange == null ? void 0 : onChange(next);
+    };
+    const markTouched = ()=>{
+        if (isFormMode && bridge) {
+            var _registration_onBlur;
+            const committed = bridge.getValue(name);
+            void (registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, {
+                target: {
+                    name,
+                    value: committed == null ? '' : String(committed)
+                },
+                type: 'blur'
+            }));
+        }
+    };
+    const handleOpenChange = (next)=>{
+        if (next && !isInteractive) {
+            return;
+        }
+        setIsOpen(next);
+        if (!next) {
+            markTouched();
+        }
+    };
+    // Picking a date keeps the popover open — the user still needs a time.
+    const handleDateSelect = (nextDate)=>{
+        commitValue(joinDateTime(nextDate, time));
+    };
+    // Picking a time completes the value and closes the popover.
+    const handleTimeSelect = (nextTime)=>{
+        commitValue(joinDateTime(date, nextTime));
+        setIsOpen(false);
+        markTouched();
+    };
+    return jsxs("div", {
+        "data-testid": testId,
+        className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
+        children: [
+            label && jsxs("label", {
+                htmlFor: fieldId,
+                className: cn(v.label(), slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
+                children: [
+                    label,
+                    required && jsx("span", {
+                        "aria-hidden": "true",
+                        className: cn(v.requiredMark(), slotProps == null ? void 0 : (_slotProps_requiredMark = slotProps.requiredMark) == null ? void 0 : _slotProps_requiredMark.className),
+                        children: "*"
+                    })
+                ]
+            }),
+            jsx(Popover, {
+                open: isOpen,
+                onOpenChange: handleOpenChange,
+                side: "bottom",
+                align: "start",
+                content: jsxs("div", {
+                    className: v.panel(),
+                    children: [
+                        jsx(Calendar, {
+                            value: date,
+                            onChange: handleDateSelect,
+                            minDate: minDate,
+                            maxDate: maxDate,
+                            disabledDates: disabledDates,
+                            isDateDisabled: isDateDisabled,
+                            weekStartDay: weekStartDay,
+                            locale: locale,
+                            "aria-label": "Choose date",
+                            sx: "border-0 bg-transparent p-0"
+                        }),
+                        jsx("div", {
+                            role: "listbox",
+                            "aria-label": "Time options",
+                            className: v.list(),
+                            children: options.map((option)=>jsx("button", {
+                                    type: "button",
+                                    role: "option",
+                                    "aria-selected": option === time,
+                                    className: v.option(),
+                                    onClick: ()=>{
+                                        handleTimeSelect(option);
+                                    },
+                                    children: formatTime(option, {
+                                        hour12
+                                    })
+                                }, option))
+                        })
+                    ]
+                }),
+                children: jsxs("button", {
+                    type: "button",
+                    id: fieldId,
+                    ref: triggerRef,
+                    disabled: effectiveDisabled,
+                    "aria-invalid": resolvedError ? true : undefined,
+                    "aria-describedby": resolvedHelperText ? helperId : undefined,
+                    className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
+                    children: [
+                        jsx("span", {
+                            className: displayValue ? v.value() : v.placeholder(),
+                            children: displayValue || placeholder || 'Select date and time'
+                        }),
+                        jsx("span", {
+                            className: v.icon(),
+                            children: jsx(CalendarIcon$1, {})
+                        })
+                    ]
+                })
+            }),
+            resolvedHelperText && jsx("p", {
+                id: helperId,
+                className: cn(resolvedError ? v.errorText() : v.helperText(), resolvedError ? slotProps == null ? void 0 : (_slotProps_errorText = slotProps.errorText) == null ? void 0 : _slotProps_errorText.className : slotProps == null ? void 0 : (_slotProps_helperText = slotProps.helperText) == null ? void 0 : _slotProps_helperText.className),
+                children: resolvedHelperText
+            })
+        ]
+    });
+}
+
+/**
+ * Slots for `<DateRangePicker>` — a bridge-integrated start/end date field
+ * whose trigger is a `<button>` styled as an input, opening a dual-month
+ * range calendar popover.
+ *
+ * Theme identity: bare neutral / brand token-backed classes only — no
+ * `dark:` variants on the neutral palette (the preset CSS-var swap
+ * auto-inverts). See `_shared/themeIdentity.test.ts`.
+ */ const dateRangePickerVariants = tv({
+    slots: {
+        root: 'flex flex-col',
+        label: 'block text-sm font-medium text-neutral-900 mb-1',
+        requiredMark: 'text-danger-500 ml-0.5',
+        trigger: 'flex items-center gap-2 h-10 min-w-[15rem] rounded-md border border-neutral-300 bg-neutral-50 px-3 text-base text-neutral-900 cursor-pointer transition-colors hover:border-neutral-400 focus-visible:outline-none focus-visible:border-primary-500 focus-visible:ring-2 focus-visible:ring-primary-500/30 disabled:cursor-not-allowed disabled:opacity-60 disabled:bg-neutral-200',
+        value: 'flex-1 truncate text-left',
+        placeholder: 'flex-1 truncate text-left text-neutral-400',
+        icon: 'shrink-0 text-[1rem] text-neutral-500',
+        panel: 'flex gap-3 p-3 select-none',
+        month: 'flex flex-col gap-2',
+        header: 'flex items-center justify-between gap-1',
+        navButton: 'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[1rem] text-neutral-600 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
+        navSpacer: 'h-7 w-7 shrink-0',
+        monthLabel: 'flex-1 text-center text-sm font-semibold text-neutral-900',
+        grid: 'flex flex-col gap-1',
+        weekdayRow: 'grid grid-cols-7 gap-1',
+        weekday: 'flex h-8 items-center justify-center text-xs font-semibold text-neutral-500',
+        weekRow: 'grid grid-cols-7 gap-1',
         helperText: 'mt-1 text-sm text-neutral-600',
         errorText: 'mt-1 text-sm text-danger-600'
     },
     variants: {
-        size: {
-            sm: {
-                inputWrapper: 'h-8 px-2',
-                input: 'text-sm'
-            },
-            md: {
-                inputWrapper: 'h-10 px-3',
-                input: 'text-base'
-            },
-            lg: {
-                inputWrapper: 'h-12 px-4',
-                input: 'text-lg'
-            }
-        },
         layout: {
-            stacked: {
-                root: 'flex-col'
-            },
+            stacked: {},
             inline: {
                 root: 'flex-row items-start gap-3',
-                label: 'mb-0 pt-2 whitespace-nowrap shrink-0'
+                label: 'mb-0 pt-2.5 whitespace-nowrap shrink-0'
             }
         },
         error: {
             true: {
-                inputWrapper: 'border-danger-500 focus-within:border-danger-500 focus-within:ring-danger-500/30'
+                trigger: 'border-danger-500 hover:border-danger-500 focus-visible:border-danger-500 focus-visible:ring-danger-500/30'
             }
         },
         fullWidth: {
             true: {
                 root: 'w-full',
-                inputWrapper: 'w-full'
-            }
-        },
-        disabled: {
-            true: {
-                inputWrapper: 'opacity-60 cursor-not-allowed bg-neutral-200'
+                trigger: 'w-full min-w-0'
             }
         }
     },
     defaultVariants: {
-        size: 'md',
         layout: 'stacked',
         error: false,
-        fullWidth: false,
+        fullWidth: false
+    }
+});
+/**
+ * Per-day-cell recipe for the range grid. `endpoint` (a committed start/end)
+ * is the solid fill; `inBand` (inside the committed or previewed range) is
+ * the light tint. Declared `inBand` before `endpoint` so an endpoint cell —
+ * which is also in-band — resolves to the solid fill.
+ */ const dateRangeDayVariants = tv({
+    base: 'flex h-9 w-9 items-center justify-center rounded-md text-sm text-neutral-900 transition-colors hover:bg-neutral-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500',
+    variants: {
+        inBand: {
+            true: 'bg-primary-100 hover:bg-primary-100'
+        },
+        endpoint: {
+            true: 'bg-primary-600 text-white hover:bg-primary-600'
+        },
+        siblingMonth: {
+            true: 'text-neutral-400'
+        },
+        today: {
+            true: 'font-bold ring-1 ring-inset ring-primary-400'
+        },
+        disabled: {
+            true: 'cursor-default text-neutral-300 opacity-60 hover:bg-transparent'
+        }
+    },
+    compoundVariants: [
+        {
+            endpoint: true,
+            today: true,
+            class: 'ring-0'
+        },
+        {
+            endpoint: true,
+            siblingMonth: true,
+            class: 'text-white'
+        }
+    ],
+    defaultVariants: {
+        inBand: false,
+        endpoint: false,
+        siblingMonth: false,
+        today: false,
         disabled: false
     }
 });
 
-/**
- * Resolve the native HTML input `type` for a given picker mode.
- */ function inputTypeFor(mode) {
-    switch(mode){
-        case 'time':
-            return 'time';
-        case 'datetime':
-            return 'datetime-local';
-        case 'date':
-        default:
-            return 'date';
+const EMPTY_RANGE = {
+    start: null,
+    end: null
+};
+function CalendarIcon() {
+    return jsxs("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+            jsx("rect", {
+                x: "2.5",
+                y: "3.5",
+                width: "11",
+                height: "10",
+                rx: "1.5",
+                stroke: "currentColor",
+                strokeWidth: "1.5"
+            }),
+            jsx("path", {
+                d: "M2.5 6.5h11M5.5 2v3M10.5 2v3",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+function ChevronLeftIcon() {
+    return jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "M10 4 6 8l4 4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+}
+function ChevronRightIcon$1() {
+    return jsx("svg", {
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true",
+        children: jsx("path", {
+            d: "m6 4 4 4-4 4",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+        })
+    });
+}
+/** Formats a stored ISO date for the trigger display (medium style). */ function formatEndpoint(iso, locale) {
+    if (iso === null || iso === '') {
+        return '';
     }
+    const parts = parseISODate(iso);
+    if (parts === null) {
+        return iso;
+    }
+    return new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeZone: 'UTC'
+    }).format(Date.UTC(parts.year, parts.month - 1, parts.day));
 }
-/**
- * Coerce a stored/exposed value (ISO 8601-ish string or `null`/`undefined`)
- * into the format the native input expects.
- *
- * Contract:
- *   - `date`     → `YYYY-MM-DD`
- *   - `time`     → `HH:mm` (or `HH:mm:ss` if seconds present)
- *   - `datetime` → `YYYY-MM-DDTHH:mm` (no timezone, datetime-local
- *                  rejects `Z` / offset suffixes)
- *
- * The function is intentionally lenient:
- *   - Pass-through when the input already matches the expected shape.
- *   - Truncates a richer ISO string (e.g. `2026-05-16T10:23:45.000Z`)
- *     down to the mode-appropriate prefix.
- *   - Returns `''` for null / undefined / unparseable inputs (native
- *     inputs use `''` to represent "no value").
- */ function isoToInputValue(mode, raw) {
-    if (raw == null || raw === '') return '';
-    // Fast path: already in the expected shape.
-    if (mode === 'date' && /^\d{4}-\d{2}-\d{2}$/.test(raw)) return raw;
-    if (mode === 'time' && /^\d{2}:\d{2}(:\d{2})?$/.test(raw)) return raw;
-    if (mode === 'datetime' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?$/.test(raw)) {
-        return raw;
+function formatRange(range, locale) {
+    const start = formatEndpoint(range.start, locale);
+    const end = formatEndpoint(range.end, locale);
+    if (start === '') {
+        return '';
     }
-    // Slow path: parse via Date and re-format locally.
-    const d = new Date(raw);
-    if (isNaN(d.getTime())) return '';
-    const pad = (n)=>String(n).padStart(2, '0');
-    const yyyy = d.getFullYear();
-    const mm = pad(d.getMonth() + 1);
-    const dd = pad(d.getDate());
-    const hh = pad(d.getHours());
-    const mi = pad(d.getMinutes());
-    if (mode === 'date') return `${yyyy}-${mm}-${dd}`;
-    if (mode === 'time') return `${hh}:${mi}`;
-    return `${yyyy}-${mm}-${dd}T${hh}:${mi}`;
+    return end === '' ? start : `${start} – ${end}`;
 }
-/**
- * Take a native input string and return the canonical "stored" value:
- * the same string for non-empty input, or `null` for empty (so the
- * bridge / consumer never receives the ambiguous empty string).
- */ function inputValueToStored(raw) {
-    return raw === '' ? null : raw;
+/** The dual-month range grid rendered inside the popover. */ function RangeCalendar(props) {
+    const { value, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale } = props;
+    const range = useDateRange(_extends({
+        value,
+        onChange,
+        monthCount: 2
+    }, minDate !== undefined && {
+        minDate
+    }, maxDate !== undefined && {
+        maxDate
+    }, disabledDates !== undefined && {
+        disabledDates
+    }, isDateDisabled !== undefined && {
+        isDateDisabled
+    }, weekStartDay !== undefined && {
+        weekStartDay
+    }, locale !== undefined && {
+        locale
+    }));
+    const focusedCellRef = useRef(null);
+    const shouldFocusRef = useRef(false);
+    useEffect(()=>{
+        if (shouldFocusRef.current && focusedCellRef.current) {
+            focusedCellRef.current.focus({
+                preventScroll: true
+            });
+            shouldFocusRef.current = false;
+        }
+    }, [
+        range.focusedDate
+    ]);
+    const handleKeyDown = (event)=>{
+        const action = resolveCalendarKey(event.key);
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        shouldFocusRef.current = true;
+        switch(action){
+            case 'select':
+                range.selectDate(range.focusedDate);
+                break;
+            case 'monthForward':
+                range.goToNextMonth();
+                break;
+            case 'monthBackward':
+                range.goToPreviousMonth();
+                break;
+            default:
+                range.navigate(action);
+        }
+    };
+    const v = dateRangePickerVariants();
+    const resolvedLocale = locale != null ? locale : 'en-US';
+    const lastIndex = range.months.length - 1;
+    return jsx("div", {
+        className: v.panel(),
+        onMouseLeave: ()=>{
+            range.hoverDate(null);
+        },
+        children: range.months.map((monthView, monthIndex)=>jsxs("div", {
+                className: v.month(),
+                children: [
+                    jsxs("div", {
+                        className: v.header(),
+                        children: [
+                            monthIndex === 0 ? jsx("button", {
+                                type: "button",
+                                className: v.navButton(),
+                                "aria-label": "Previous month",
+                                onClick: ()=>{
+                                    range.goToPreviousMonth();
+                                },
+                                children: jsx(ChevronLeftIcon, {})
+                            }) : jsx("span", {
+                                className: v.navSpacer()
+                            }),
+                            jsx("span", {
+                                "aria-live": "polite",
+                                className: v.monthLabel(),
+                                children: monthView.monthLabel
+                            }),
+                            monthIndex === lastIndex ? jsx("button", {
+                                type: "button",
+                                className: v.navButton(),
+                                "aria-label": "Next month",
+                                onClick: ()=>{
+                                    range.goToNextMonth();
+                                },
+                                children: jsx(ChevronRightIcon$1, {})
+                            }) : jsx("span", {
+                                className: v.navSpacer()
+                            })
+                        ]
+                    }),
+                    jsxs("div", {
+                        role: "grid",
+                        "aria-label": "Choose date range",
+                        onKeyDown: handleKeyDown,
+                        className: v.grid(),
+                        children: [
+                            jsx("div", {
+                                role: "row",
+                                className: v.weekdayRow(),
+                                children: range.weekdayNames.map((dayName, index)=>jsx("span", {
+                                        role: "columnheader",
+                                        className: v.weekday(),
+                                        children: dayName
+                                    }, `weekday-${String(index)}`))
+                            }),
+                            monthView.weeks.map((week)=>jsx("div", {
+                                    role: "row",
+                                    className: v.weekRow(),
+                                    children: week.days.map((day)=>{
+                                        const isActiveCell = day.iso === range.focusedDate;
+                                        const endpoint = day.isRangeStart || day.isRangeEnd;
+                                        const inBand = day.isInRange || day.isRangePreview;
+                                        return jsx("span", {
+                                            role: "gridcell",
+                                            className: "flex",
+                                            children: jsx("button", {
+                                                type: "button",
+                                                ref: isActiveCell ? focusedCellRef : null,
+                                                tabIndex: isActiveCell ? 0 : -1,
+                                                "aria-label": formatLongDate({
+                                                    year: day.year,
+                                                    month: day.month,
+                                                    day: day.day
+                                                }, resolvedLocale),
+                                                "aria-current": day.isToday ? 'date' : undefined,
+                                                "aria-pressed": endpoint,
+                                                "aria-disabled": day.isDisabled,
+                                                onClick: ()=>{
+                                                    range.selectDate(day.iso);
+                                                },
+                                                onMouseEnter: ()=>{
+                                                    range.hoverDate(day.iso);
+                                                },
+                                                className: dateRangeDayVariants({
+                                                    inBand,
+                                                    endpoint,
+                                                    siblingMonth: day.isSiblingMonth,
+                                                    today: day.isToday,
+                                                    disabled: day.isDisabled
+                                                }),
+                                                children: day.day
+                                            })
+                                        }, day.iso);
+                                    })
+                                }, week.key))
+                        ]
+                    })
+                ]
+            }, `${String(monthView.year)}-${String(monthView.month)}`))
+    });
 }
 /**
- * Dashforge TW DateTimePicker — bridge-integrated native date/time input.
+ * Dashforge TW `<DateRangePicker>` — a form-bound start/end date field.
  *
- * Three modes (`mode` prop):
- *   - `date`     — `<input type="date">` → `YYYY-MM-DD`
- *   - `time`     — `<input type="time">` → `HH:mm` (`HH:mm:ss` with `step={1}`)
- *   - `datetime` — `<input type="datetime-local">` → `YYYY-MM-DDTHH:mm`
+ * A read-only trigger button paired with a dual-month range calendar popover
+ * (Radix Popover), built on the headless `useDateRange` engine. Integrates
+ * with the Dashforge form bridge + RBAC.
  *
- * **Why native inputs instead of React Aria `<DatePicker>`?**
- *
- * 1. Zero new deps (`@internationalized/date` would add ~30 KB).
- * 2. Mirrors `@dashforge/ui/DateTimePicker` (MUI side) for API parity.
- * 3. Native inputs are AAA-grade a11y out of the box — screen readers,
- *    keyboard nav, OS-provided calendar/clock UI.
- * 4. Predictable state (no internal Aria state machine that fights
- *    controlled props — the F5-A lesson learned in `<Autocomplete>`).
- *
- * A richer custom-calendar version (range mode, locale awareness,
- * custom popover styling) can land as F5-B-bis built on Aria
- * `<DatePicker>` / `<Calendar>`.
- *
- * **A11y**:
- *   - `aria-invalid` driven by the resolved validation state.
- *   - `aria-describedby` links input ↔ helper/error.
- *   - Required fields get the native `required` attribute + a visual `*`.
- *   - `color-scheme: light dark` keeps the OS calendar icon readable
- *     in both color schemes.
- */ function DateTimePicker(props) {
-    var _slotProps_root, _slotProps_label, _slotProps_requiredMark, _slotProps_inputWrapper, _slotProps_input, _slotProps_errorText, _slotProps_helperText;
-    const { name, rules, mode = 'date', visibleWhen, layout = 'stacked', size, label, helperText, required, error, disabled, fullWidth, access, sx, slotProps, placeholder, min, max, step, value: explicitValue, defaultValue, onValueChange } = props;
-    // ───── Hooks (unconditional) ─────
+ * Storage contract: a `{ start, end }` pair of ISO `YYYY-MM-DD` dates —
+ * shared with the MUI `@dashforge/ui` `DateRangePicker`.
+ */ function DateRangePicker(props) {
+    var _slotProps_root, _slotProps_label, _slotProps_requiredMark, _slotProps_trigger, _slotProps_errorText, _slotProps_helperText;
+    const { name, rules, label, helperText, error, required, disabled, placeholder, layout = 'stacked', visibleWhen, access, value: explicitValue, defaultValue, onChange, minDate, maxDate, disabledDates, isDateDisabled, weekStartDay, locale, fullWidth, sx, slotProps, testId } = props;
     const bridge = useContext(DashFormContext);
     const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
-    // Per-field reactive snapshot. Same pattern as <TextField> — re-renders
-    // this component when its OWN bridge value changes, but not when a
-    // sibling field changes (perf contract).
     const fieldMeta = useDashFieldMeta(name);
     const accessState = useAccessState(access);
-    const inputId = useId();
-    const helperId = `${inputId}-help`;
-    // StrictMode-safe unregister-on-unmount.
+    const fieldId = useId();
+    const helperId = `${fieldId}-help`;
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : EMPTY_RANGE);
     const unregisterRef = useRef({
         bridge,
         name
@@ -3634,9 +5052,8 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
             });
         };
     }, []);
-    // ───── Derived ─────
     const effectiveDisabled = Boolean(disabled) || accessState.disabled;
-    const effectiveReadOnly = accessState.readonly;
+    const isInteractive = !effectiveDisabled && !accessState.readonly;
     const isFormMode = Boolean(bridge == null ? void 0 : bridge.register);
     let resolvedError = error;
     let resolvedHelperText = helperText;
@@ -3651,65 +5068,81 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
             resolvedValue = explicitValue;
         } else {
             const bv = fieldMeta.value;
-            resolvedValue = bv == null ? null : String(bv);
+            resolvedValue = bv != null ? bv : EMPTY_RANGE;
         }
     } else if (explicitValue !== undefined) {
         resolvedValue = explicitValue;
     } else {
-        // Pure uncontrolled mode: defer to native input's defaultValue.
-        resolvedValue = undefined;
+        resolvedValue = internalValue;
     }
-    // Registration-supplied callback ref (RHF threads its own ref through
-    // here in form mode). Stable callback to keep React 19 happy.
     const registrationRefFn = registration == null ? void 0 : registration.ref;
-    const inputRef = useCallback((instance)=>{
+    const triggerRef = useCallback((instance)=>{
         if (typeof registrationRefFn === 'function') {
             registrationRefFn(instance);
         }
     }, [
         registrationRefFn
     ]);
-    // ───── Render-time guards (after all hooks) ─────
     if (!isVisible) return null;
     if (!accessState.visible) return null;
-    const v = dateTimePickerVariants({
-        size,
+    const v = dateRangePickerVariants({
         layout,
         error: resolvedError,
-        fullWidth,
-        disabled: effectiveDisabled
+        fullWidth
     });
-    const inputType = inputTypeFor(mode);
-    const nativeValue = resolvedValue === undefined ? undefined : isoToInputValue(mode, resolvedValue);
-    const nativeDefault = !isFormMode && explicitValue === undefined && defaultValue !== undefined ? isoToInputValue(mode, defaultValue) : undefined;
-    const nativeMin = min != null ? isoToInputValue(mode, min) : undefined;
-    const nativeMax = max != null ? isoToInputValue(mode, max) : undefined;
-    const handleChange = (event)=>{
-        const next = inputValueToStored(event.target.value);
+    const resolvedLocale = locale != null ? locale : 'en-US';
+    const displayValue = formatRange(resolvedValue, resolvedLocale);
+    const commitValue = (next)=>{
         if (isFormMode && bridge) {
             var _registration_onChange;
             bridge.setValue == null ? void 0 : bridge.setValue.call(bridge, name, next);
             void (registration == null ? void 0 : (_registration_onChange = registration.onChange) == null ? void 0 : _registration_onChange.call(registration, {
                 target: {
                     name,
-                    value: next != null ? next : ''
+                    value: next
                 },
                 type: 'change'
             }));
+        } else if (explicitValue === undefined) {
+            setInternalValue(next);
         }
-        onValueChange == null ? void 0 : onValueChange(next);
+        onChange == null ? void 0 : onChange(next);
     };
-    const handleBlur = (event)=>{
+    const markTouched = ()=>{
         if (isFormMode && bridge) {
             var _registration_onBlur;
-            registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, event);
+            const committed = bridge.getValue(name);
+            void (registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, {
+                target: {
+                    name,
+                    value: committed
+                },
+                type: 'blur'
+            }));
+        }
+    };
+    const handleOpenChange = (next)=>{
+        if (next && !isInteractive) {
+            return;
+        }
+        setIsOpen(next);
+        if (!next) {
+            markTouched();
+        }
+    };
+    const handleRangeChange = (next)=>{
+        commitValue(next);
+        if (next.start !== null && next.end !== null) {
+            setIsOpen(false);
+            markTouched();
         }
     };
     return jsxs("div", {
+        "data-testid": testId,
         className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
             label && jsxs("label", {
-                htmlFor: inputId,
+                htmlFor: fieldId,
                 className: cn(v.label(), slotProps == null ? void 0 : (_slotProps_label = slotProps.label) == null ? void 0 : _slotProps_label.className),
                 children: [
                     label,
@@ -3720,29 +5153,39 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
                     })
                 ]
             }),
-            jsx("div", {
-                className: cn(v.inputWrapper(), slotProps == null ? void 0 : (_slotProps_inputWrapper = slotProps.inputWrapper) == null ? void 0 : _slotProps_inputWrapper.className),
-                children: jsx("input", {
-                    id: inputId,
-                    ref: inputRef,
-                    name: name,
-                    type: inputType,
-                    // Controlled in form / explicit-value mode; uncontrolled with
-                    // `defaultValue` otherwise. Mirrors the TextField pattern.
-                    value: nativeValue,
-                    defaultValue: nativeDefault,
-                    min: nativeMin,
-                    max: nativeMax,
-                    step: step,
-                    placeholder: placeholder,
+            jsx(Popover, {
+                open: isOpen,
+                onOpenChange: handleOpenChange,
+                side: "bottom",
+                align: "start",
+                content: jsx(RangeCalendar, {
+                    value: resolvedValue,
+                    onChange: handleRangeChange,
+                    minDate: minDate,
+                    maxDate: maxDate,
+                    disabledDates: disabledDates,
+                    isDateDisabled: isDateDisabled,
+                    weekStartDay: weekStartDay,
+                    locale: locale
+                }),
+                children: jsxs("button", {
+                    type: "button",
+                    id: fieldId,
+                    ref: triggerRef,
                     disabled: effectiveDisabled,
-                    readOnly: effectiveReadOnly,
-                    required: required,
                     "aria-invalid": resolvedError ? true : undefined,
                     "aria-describedby": resolvedHelperText ? helperId : undefined,
-                    onChange: handleChange,
-                    onBlur: handleBlur,
-                    className: cn(v.input(), slotProps == null ? void 0 : (_slotProps_input = slotProps.input) == null ? void 0 : _slotProps_input.className)
+                    className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
+                    children: [
+                        jsx("span", {
+                            className: displayValue ? v.value() : v.placeholder(),
+                            children: displayValue || placeholder || 'Select a date range'
+                        }),
+                        jsx("span", {
+                            className: v.icon(),
+                            children: jsx(CalendarIcon, {})
+                        })
+                    ]
                 })
             }),
             resolvedHelperText && jsx("p", {
@@ -7176,71 +8619,6 @@ const tooltipVariants = tv({
     });
 }
 
-const popoverVariants = tv({
-    slots: {
-        content: [
-            // Neutral border auto-inverts via CSS-var swap.
-            'z-50 rounded-md border border-neutral-200',
-            // bg-white hardcoded (no auto-invert) so `dark:` is required.
-            // Target `dark:bg-neutral-100` resolves to #171717 in dark mode
-            // (one elevation tier above the page surface).
-            'bg-white dark:bg-neutral-100 p-4 shadow-lg',
-            // Text auto-inverts.
-            'text-sm text-neutral-900',
-            'focus:outline-none',
-            'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
-            'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
-            'motion-reduce:transition-none motion-reduce:duration-0'
-        ],
-        // Arrow follows content bg: `fill-white` in light + matching dark target.
-        arrow: 'fill-white dark:fill-neutral-100'
-    }
-});
-
-/**
- * Dashforge TW `<Popover>` — clickable floating content panel.
- *
- * Built on `@radix-ui/react-popover`:
- *  - Focus trap inside the popover (Tab cycles within).
- *  - Outside-click + Escape dismiss.
- *  - APG dialog-like semantics (`role="dialog"` on content).
- *  - Portal-rendered.
- *
- * Use `<Popover>` for menus / pickers / settings panels with
- * interactive children. Use `<Tooltip>` for read-only hints.
- */ function Popover(props) {
-    var _slotProps_content, _slotProps_arrow;
-    const { children, content, side = 'bottom', align = 'center', showArrow = false, open, onOpenChange, sideOffset = 8, width, slotProps } = props;
-    const v = popoverVariants();
-    return jsxs(RadixPopover.Root, {
-        open: open,
-        onOpenChange: onOpenChange,
-        children: [
-            jsx(RadixPopover.Trigger, {
-                asChild: true,
-                children: children
-            }),
-            jsx(RadixPopover.Portal, {
-                children: jsxs(RadixPopover.Content, {
-                    side: side,
-                    align: align,
-                    sideOffset: sideOffset,
-                    style: width != null ? {
-                        width
-                    } : undefined,
-                    className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
-                    children: [
-                        content,
-                        showArrow && jsx(RadixPopover.Arrow, {
-                            className: cn(v.arrow(), slotProps == null ? void 0 : (_slotProps_arrow = slotProps.arrow) == null ? void 0 : _slotProps_arrow.className)
-                        })
-                    ]
-                })
-            })
-        ]
-    });
-}
-
 const accordionVariants = tv({
     slots: {
         root: 'w-full',
@@ -11417,6 +12795,6 @@ function SearchIcon(props) {
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.7.0-beta';
+ */ const VERSION = '0.9.1-beta';
 
-export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Checkbox, ConfirmDialogProvider, Container, DataGrid, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, Skeleton, SnackbarProvider, Stack, Switch, Table, Tabs, TextField, Textarea, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, isoToInputValue, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };
+export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Calendar, Checkbox, ConfirmDialogProvider, Container, DataGrid, DatePicker, DateRangePicker, DateTimePicker, Dialog, Divider, Grid, LeftNav, NumberField, OTPField, Pagination, Popover, RadioGroup, RenderButton, RenderChip, RenderText, RenderTwoLine, RowActionsMenu, Skeleton, SnackbarProvider, Stack, Switch, Table, Tabs, TextField, Textarea, TimePicker, Tooltip, TopBar, Typography, VERSION, VisuallyHidden, accordionVariants, appShellVariants, autocompleteVariants, boxVariants, breadcrumbsVariants, buttonVariants, calendarDayVariants, calendarVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, dateRangeDayVariants, dateRangePickerVariants, dateTimePickerVariants, dialogVariants, dividerLineVariants, dividerVariants, getNestedValue, gridVariants, leftNavVariants, numberFieldVariants, otpFieldVariants, paginationVariants, popoverVariants, radioGroupVariants, skeletonVariants, snackbarVariants, stackVariants, switchVariants, tableVariants, tabsVariants, textFieldVariants, textareaVariants, timePickerVariants, tooltipVariants, topBarVariants, typographyVariants, useAccessState, useConfirm, useSnackbar };