@dashforge/tw 0.9.0-beta → 0.9.1-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 } 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() {
@@ -3754,6 +3755,632 @@ const defaultGetOptionDisabled = (option)=>Boolean(option.disabled);
     });
 }
 
+/**
+ * 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() {
+    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"
+        })
+    });
+}
+/**
+ * `<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, {})
+                    }),
+                    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$1, {})
+                    })
+                ]
+            }),
+            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.
+ *
+ * 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)
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+/**
+ * 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() {
+    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, {})
+                        })
+                    ]
+                })
+            }),
+            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
+            })
+        ]
+    });
+}
+
 /**
  * Tailwind-variants recipe for `<Breadcrumbs>`.
  *
@@ -7176,71 +7803,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',
@@ -11419,4 +11981,4 @@ function SearchIcon(props) {
  * Package version (synced with `package.json` at publish time).
  */ const VERSION = '0.7.0-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, 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 };