@dashforge/tw 0.9.1-beta → 0.11.0-beta

package/dist/index.esm.js

@@ -11,10 +11,9 @@ 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 } from '@dashforge/calendar-core';
+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 RadixAccordion from '@radix-ui/react-accordion';
 
@@ -3427,334 +3426,6 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
     });
 }
 
-/**
- * Tailwind-variants recipe for `<DateTimePicker>` with 6 slots.
- *
- * Styling mirrors `<TextField>` for layout / sizes / error states so
- * the two field types compose visually in the same form.
- *
- * Native `<input type="date|time|datetime-local">` quirks handled here:
- *
- *  - 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({
-    slots: {
-        root: 'flex',
-        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]'
-        ],
-        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'
-            },
-            inline: {
-                root: 'flex-row items-start gap-3',
-                label: 'mb-0 pt-2 whitespace-nowrap shrink-0'
-            }
-        },
-        error: {
-            true: {
-                inputWrapper: 'border-danger-500 focus-within:border-danger-500 focus-within:ring-danger-500/30'
-            }
-        },
-        fullWidth: {
-            true: {
-                root: 'w-full',
-                inputWrapper: 'w-full'
-            }
-        },
-        disabled: {
-            true: {
-                inputWrapper: 'opacity-60 cursor-not-allowed bg-neutral-200'
-            }
-        }
-    },
-    defaultVariants: {
-        size: 'md',
-        layout: 'stacked',
-        error: false,
-        fullWidth: 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';
-    }
-}
-/**
- * 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;
-    }
-    // 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}`;
-}
-/**
- * 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;
-}
-/**
- * Dashforge TW DateTimePicker — bridge-integrated native date/time input.
- *
- * 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`
- *
- * **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) ─────
-    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 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 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 {
-        // Pure uncontrolled mode: defer to native input's defaultValue.
-        resolvedValue = undefined;
-    }
-    // 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)=>{
-        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,
-        layout,
-        error: resolvedError,
-        fullWidth,
-        disabled: effectiveDisabled
-    });
-    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);
-        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'
-            }));
-        }
-        onValueChange == null ? void 0 : onValueChange(next);
-    };
-    const handleBlur = (event)=>{
-        if (isFormMode && bridge) {
-            var _registration_onBlur;
-            registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, event);
-        }
-    };
-    return jsxs("div", {
-        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,
-                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("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,
-                    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)
-                })
-            }),
-            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
-            })
-        ]
-    });
-}
-
 /**
  * Structural slots for `<Calendar>`.
  *
@@ -3820,7 +3491,7 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
 });
 
 // Inline 16×16 stroke chevrons — no icon dependency (tw convention).
-function ChevronLeftIcon() {
+function ChevronLeftIcon$1() {
     return jsx("svg", {
         width: "1em",
         height: "1em",
@@ -3836,7 +3507,7 @@ function ChevronLeftIcon() {
         })
     });
 }
-function ChevronRightIcon$1() {
+function ChevronRightIcon$2() {
     return jsx("svg", {
         width: "1em",
         height: "1em",
@@ -3955,7 +3626,7 @@ function ChevronRightIcon$1() {
                         onClick: ()=>{
                             calendar.goToPreviousMonth();
                         },
-                        children: jsx(ChevronLeftIcon, {})
+                        children: jsx(ChevronLeftIcon$1, {})
                     }),
                     jsx("span", {
                         "aria-live": "polite",
@@ -3970,7 +3641,7 @@ function ChevronRightIcon$1() {
                         onClick: ()=>{
                             calendar.goToNextMonth();
                         },
-                        children: jsx(ChevronRightIcon$1, {})
+                        children: jsx(ChevronRightIcon$2, {})
                     })
                 ]
             }),
@@ -4085,33 +3756,948 @@ const popoverVariants = tv({
                     } : 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)
+                        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.
+ *
+ * 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 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-[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 `<DatePicker>` — a bridge-integrated date field whose trigger
- * is a `<button>` styled as an input, opening a `<Calendar>` popover.
+ * 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 datePickerVariants = tv({
+ */ 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-[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',
+        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'
     },
@@ -4141,8 +4727,55 @@ const popoverVariants = tv({
         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
+    }
+});
 
-// Inline 16×16 stroke calendar glyph — no icon dependency (tw convention).
+const EMPTY_RANGE = {
+    start: null,
+    end: null
+};
 function CalendarIcon() {
     return jsxs("svg", {
         width: "1em",
@@ -4169,12 +4802,40 @@ function CalendarIcon() {
         ]
     });
 }
-/**
- * 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 === '') {
+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);
@@ -4186,20 +4847,182 @@ function CalendarIcon() {
         timeZone: 'UTC'
     }).format(Date.UTC(parts.year, parts.month - 1, parts.day));
 }
+function formatRange(range, locale) {
+    const start = formatEndpoint(range.start, locale);
+    const end = formatEndpoint(range.end, locale);
+    if (start === '') {
+        return '';
+    }
+    return end === '' ? start : `${start} – ${end}`;
+}
+/** 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 `<DatePicker>` — a form-bound single-date field.
+ * Dashforge TW `<DateRangePicker>` — a form-bound start/end 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.
+ * 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.
  *
- * Storage contract: an ISO `YYYY-MM-DD` string, or `null` — shared with the
- * MUI `@dashforge/ui` `DatePicker`.
- */ function DatePicker(props) {
+ * 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;
-    // ───── Hooks (unconditional, before any early return) ─────
     const bridge = useContext(DashFormContext);
     const isVisible = useEngineVisibility(bridge == null ? void 0 : bridge.engine, visibleWhen);
     const fieldMeta = useDashFieldMeta(name);
@@ -4207,8 +5030,7 @@ function CalendarIcon() {
     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 [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : EMPTY_RANGE);
     const unregisterRef = useRef({
         bridge,
         name
@@ -4229,10 +5051,8 @@ function CalendarIcon() {
             });
         };
     }, []);
-    // ───── Derived ─────
     const effectiveDisabled = Boolean(disabled) || accessState.disabled;
-    const effectiveReadOnly = accessState.readonly;
-    const isInteractive = !effectiveDisabled && !effectiveReadOnly;
+    const isInteractive = !effectiveDisabled && !accessState.readonly;
     const isFormMode = Boolean(bridge == null ? void 0 : bridge.register);
     let resolvedError = error;
     let resolvedHelperText = helperText;
@@ -4247,14 +5067,13 @@ function CalendarIcon() {
             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 {
         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') {
@@ -4263,16 +5082,15 @@ function CalendarIcon() {
     }, [
         registrationRefFn
     ]);
-    // ───── Render-time guards (after all hooks) ─────
     if (!isVisible) return null;
     if (!accessState.visible) return null;
-    const v = datePickerVariants({
+    const v = dateRangePickerVariants({
         layout,
         error: resolvedError,
         fullWidth
     });
     const resolvedLocale = locale != null ? locale : 'en-US';
-    const displayValue = formatDisplayDate(resolvedValue, resolvedLocale);
+    const displayValue = formatRange(resolvedValue, resolvedLocale);
     const commitValue = (next)=>{
         if (isFormMode && bridge) {
             var _registration_onChange;
@@ -4280,7 +5098,7 @@ function CalendarIcon() {
             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'
             }));
@@ -4289,9 +5107,6 @@ function CalendarIcon() {
         }
         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;
@@ -4299,7 +5114,7 @@ function CalendarIcon() {
             void (registration == null ? void 0 : (_registration_onBlur = registration.onBlur) == null ? void 0 : _registration_onBlur.call(registration, {
                 target: {
                     name,
-                    value: committed == null ? '' : String(committed)
+                    value: committed
                 },
                 type: 'blur'
             }));
@@ -4314,10 +5129,12 @@ function CalendarIcon() {
             markTouched();
         }
     };
-    const handleCalendarChange = (next)=>{
+    const handleRangeChange = (next)=>{
         commitValue(next);
-        setIsOpen(false);
-        markTouched();
+        if (next.start !== null && next.end !== null) {
+            setIsOpen(false);
+            markTouched();
+        }
     };
     return jsxs("div", {
         "data-testid": testId,
@@ -4340,17 +5157,15 @@ function CalendarIcon() {
                 onOpenChange: handleOpenChange,
                 side: "bottom",
                 align: "start",
-                content: jsx(Calendar, {
+                content: jsx(RangeCalendar, {
                     value: resolvedValue,
-                    onChange: handleCalendarChange,
+                    onChange: handleRangeChange,
                     minDate: minDate,
                     maxDate: maxDate,
                     disabledDates: disabledDates,
                     isDateDisabled: isDateDisabled,
                     weekStartDay: weekStartDay,
-                    locale: locale,
-                    "aria-label": "Choose date",
-                    sx: "border-0 bg-transparent p-0"
+                    locale: locale
                 }),
                 children: jsxs("button", {
                     type: "button",
@@ -4363,7 +5178,7 @@ function CalendarIcon() {
                     children: [
                         jsx("span", {
                             className: displayValue ? v.value() : v.placeholder(),
-                            children: displayValue || placeholder || 'Select a date'
+                            children: displayValue || placeholder || 'Select a date range'
                         }),
                         jsx("span", {
                             className: v.icon(),
@@ -7670,51 +8485,161 @@ const tabsVariants = tv({
     }
 });
 
+function useTabs(options) {
+    var _ref;
+    var _items_;
+    const { items, value, defaultValue, onValueChange, orientation } = options;
+    const baseId = useId();
+    const firstValue = (_ref = (_items_ = items[0]) == null ? void 0 : _items_.value) != null ? _ref : '';
+    const [internalValue, setInternalValue] = useState(defaultValue != null ? defaultValue : firstValue);
+    const isControlled = value !== undefined;
+    const activeValue = isControlled ? value : internalValue;
+    // Tab buttons, keyed by value — used to move DOM focus on keyboard nav.
+    const tabRefs = useRef(new Map());
+    const select = useCallback((next)=>{
+        if (!isControlled) {
+            setInternalValue(next);
+        }
+        onValueChange == null ? void 0 : onValueChange(next);
+    }, [
+        isControlled,
+        onValueChange
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        var _tabRefs_current_get;
+        const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+        const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+        const enabled = items.filter((item)=>item.disabled !== true);
+        if (enabled.length === 0) {
+            return;
+        }
+        const currentIndex = enabled.findIndex((item)=>item.value === activeValue);
+        let targetIndex = null;
+        if (event.key === nextKey) {
+            targetIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % enabled.length;
+        } else if (event.key === prevKey) {
+            targetIndex = currentIndex < 0 ? enabled.length - 1 : (currentIndex - 1 + enabled.length) % enabled.length;
+        } else if (event.key === 'Home') {
+            targetIndex = 0;
+        } else if (event.key === 'End') {
+            targetIndex = enabled.length - 1;
+        }
+        if (targetIndex === null) {
+            return;
+        }
+        event.preventDefault();
+        const target = enabled[targetIndex];
+        if (target === undefined) {
+            return;
+        }
+        select(target.value);
+        (_tabRefs_current_get = tabRefs.current.get(target.value)) == null ? void 0 : _tabRefs_current_get.focus();
+    }, [
+        items,
+        orientation,
+        activeValue,
+        select
+    ]);
+    const getTabListProps = ()=>({
+            role: 'tablist',
+            'aria-orientation': orientation,
+            onKeyDown: handleKeyDown
+        });
+    const getTabProps = (item)=>{
+        const active = item.value === activeValue;
+        return {
+            role: 'tab',
+            id: `${baseId}-tab-${item.value}`,
+            'aria-selected': active,
+            'aria-controls': `${baseId}-panel-${item.value}`,
+            tabIndex: active ? 0 : -1,
+            disabled: item.disabled,
+            'data-state': active ? 'active' : 'inactive',
+            onClick: ()=>{
+                if (item.disabled !== true) {
+                    select(item.value);
+                }
+            },
+            ref: (el)=>{
+                if (el) {
+                    tabRefs.current.set(item.value, el);
+                } else {
+                    tabRefs.current.delete(item.value);
+                }
+            }
+        };
+    };
+    const getPanelProps = (item)=>{
+        const active = item.value === activeValue;
+        return {
+            role: 'tabpanel',
+            id: `${baseId}-panel-${item.value}`,
+            'aria-labelledby': `${baseId}-tab-${item.value}`,
+            tabIndex: 0,
+            hidden: !active,
+            'data-state': active ? 'active' : 'inactive'
+        };
+    };
+    return {
+        activeValue,
+        getTabListProps,
+        getTabProps,
+        getPanelProps
+    };
+}
+
 /**
  * Dashforge TW `<Tabs>` — declarative tab navigation.
  *
- * Built on `@radix-ui/react-tabs`:
- *  - APG tabs pattern (arrow-key navigation, automatic activation,
- *    `role="tablist"` + `role="tab"` + `role="tabpanel"`).
- *  - Controlled / uncontrolled (`value` / `defaultValue`).
+ * Custom clean-room implementation on the headless `useTabs` engine — no
+ * runtime UI dependency. Implements the WAI-ARIA APG tabs pattern: arrow-key
+ * navigation, automatic activation, roving tabindex, `role="tablist"` +
+ * `role="tab"` + `role="tabpanel"`.
  *
  * Two variant axes:
  *  - `variant` — `underline` (default) | `pill`
  *  - `orientation` — `horizontal` (default) | `vertical`
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * `keepMounted` keeps inactive panels in the DOM (default: only the active
+ * panel is mounted).
  */ function Tabs(props) {
-    var _items_, _slotProps_root, _slotProps_list;
-    const { items, value, defaultValue, onValueChange, variant = 'underline', orientation = 'horizontal', sx, slotProps } = props;
+    var _slotProps_root, _slotProps_list;
+    const { items, value, defaultValue, onValueChange, variant = 'underline', orientation = 'horizontal', keepMounted = false, sx, slotProps } = props;
     const v = tabsVariants({
         variant,
         orientation
     });
-    const resolvedDefault = defaultValue != null ? defaultValue : (_items_ = items[0]) == null ? void 0 : _items_.value;
-    return jsxs(RadixTabs.Root, {
-        value: value,
-        defaultValue: resolvedDefault,
-        onValueChange: onValueChange,
-        orientation: orientation,
+    const tabs = useTabs({
+        items,
+        value,
+        defaultValue,
+        onValueChange,
+        orientation
+    });
+    // Either all panels (hidden when inactive) or just the active one.
+    const panels = keepMounted ? items : items.filter((item)=>item.value === tabs.activeValue);
+    return jsxs("div", {
         className: cn(v.root(), sx, slotProps == null ? void 0 : (_slotProps_root = slotProps.root) == null ? void 0 : _slotProps_root.className),
         children: [
-            jsx(RadixTabs.List, {
+            jsx("div", _extends({}, tabs.getTabListProps(), {
                 className: cn(v.list(), slotProps == null ? void 0 : (_slotProps_list = slotProps.list) == null ? void 0 : _slotProps_list.className),
                 children: items.map((item)=>{
                     var _slotProps_trigger;
-                    return jsx(RadixTabs.Trigger, {
-                        value: item.value,
-                        disabled: item.disabled,
+                    return jsx("button", _extends({
+                        type: "button"
+                    }, tabs.getTabProps(item), {
                         className: cn(v.trigger(), slotProps == null ? void 0 : (_slotProps_trigger = slotProps.trigger) == null ? void 0 : _slotProps_trigger.className),
                         children: item.label
-                    }, item.value);
+                    }), item.value);
                 })
-            }),
-            items.map((item)=>{
+            })),
+            panels.map((item)=>{
                 var _slotProps_content;
-                return jsx(RadixTabs.Content, {
-                    value: item.value,
+                return jsx("div", _extends({}, tabs.getPanelProps(item), {
                     className: cn(v.content(), slotProps == null ? void 0 : (_slotProps_content = slotProps.content) == null ? void 0 : _slotProps_content.className),
                     children: item.content
-                }, item.value);
+                }), item.value);
             })
         ]
     });
@@ -11979,6 +12904,6 @@ function SearchIcon(props) {
  */ // ───── Components ─────
 /**
  * Package version (synced with `package.json` at publish time).
- */ const VERSION = '0.7.0-beta';
+ */ const VERSION = '0.10.0-beta';
 
-export { Accordion, AppShell, AspectRatio, Autocomplete, Box, Breadcrumbs, Button, Calendar, Checkbox, ConfirmDialogProvider, Container, DataGrid, DatePicker, 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, calendarDayVariants, calendarVariants, checkboxVariants, cn, confirmDialogVariants, containerVariants, dataGridVariants, datePickerVariants, 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 };