@techsio/ui-kit 0.43.0 → 0.44.1

package/dist/molecules/date-picker.js

@@ -0,0 +1,1374 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as external_react_Fragment, createContext, createElement, useContext, useEffect, useId, useReducer, useRef, useState } from "react";
+import { connect, machine } from "@zag-js/date-input";
+import { connect as date_picker_connect, machine as date_picker_machine } from "@zag-js/date-picker";
+import { Portal, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
+import { Button } from "../atoms/button.js";
+import { Input } from "../atoms/input.js";
+import { Label } from "../atoms/label.js";
+import { canConfirmDatePickerDraft, createDatePickerCoordinatorState, datePickerCoordinatorReducer, getDatePickerDraftTimeParts } from "../internal/date-picker-coordinator.js";
+import { tv } from "../utils.js";
+const datePickerVariants = tv({
+    slots: {
+        root: "relative flex w-full flex-col gap-date-picker-root",
+        label: "text-date-picker-label-fg",
+        control: "w-full",
+        inputControl: [
+            "form-control-base flex w-full items-center gap-date-picker-control",
+            "border-(length:--border-width-date-picker-control)",
+            "border-date-picker-control-border bg-date-picker-control-bg text-date-picker-control-fg",
+            "hover:border-date-picker-control-border-hover hover:bg-date-picker-control-bg-hover",
+            "data-focus:border-date-picker-control-border-focus data-focus:bg-date-picker-control-bg-focus",
+            "has-focus-visible:outline-(style:--default-ring-style) has-focus-visible:outline-(length:--default-ring-width)",
+            "has-focus-visible:outline-date-picker-control-ring",
+            "has-focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-[validation=error]:border-(length:--border-width-validation)",
+            "data-[validation=error]:border-date-picker-control-border-error",
+            "data-[validation=error]:hover:border-date-picker-control-border-error-hover",
+            "data-focus:data-[validation=error]:border-date-picker-control-border-error-focus",
+            "data-disabled:cursor-not-allowed data-disabled:border-date-picker-control-border-disabled",
+            "data-disabled:bg-date-picker-control-bg-disabled data-disabled:text-date-picker-control-fg-disabled",
+            "data-readonly:bg-date-picker-control-bg-readonly",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        segments: [
+            "date-picker-scrollbar-hidden flex min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden outline-none",
+            "data-disabled:overflow-hidden"
+        ],
+        segmentGroup: "flex min-w-0 items-center",
+        rangeSeparator: "shrink-0 px-date-picker-range-separator text-date-picker-range-separator-fg",
+        segment: [
+            "date-picker-segment-size inline-flex shrink-0 items-center justify-center rounded-date-picker-day px-date-picker-segment tabular-nums outline-none",
+            "data-placeholder-shown:text-date-picker-segment-fg-placeholder",
+            "focus:bg-date-picker-segment-bg-focus",
+            "data-[type=literal]:min-h-0 data-[type=literal]:min-w-0 data-[type=literal]:px-0 data-[type=literal]:text-date-picker-control-fg",
+            "data-disabled:cursor-not-allowed data-readonly:cursor-default"
+        ],
+        indicatorGroup: "flex shrink-0 items-center gap-date-picker-indicator",
+        trigger: [
+            "inline-flex shrink-0 items-center justify-center rounded-date-picker-day border-0 p-0",
+            "bg-date-picker-trigger-bg text-date-picker-trigger-fg",
+            "hover:bg-date-picker-trigger-bg-hover",
+            "active:bg-date-picker-trigger-bg-active",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-date-picker-trigger-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-disabled:cursor-not-allowed data-disabled:text-date-picker-trigger-fg-disabled",
+            "disabled:cursor-not-allowed disabled:bg-date-picker-control-bg-disabled disabled:text-date-picker-trigger-fg-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        clearTrigger: [
+            "inline-flex shrink-0 items-center justify-center rounded-date-picker-day p-0",
+            "text-date-picker-trigger-fg hover:bg-date-picker-trigger-bg-hover active:bg-date-picker-trigger-bg-active",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-date-picker-trigger-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-disabled:cursor-not-allowed data-disabled:text-date-picker-trigger-fg-disabled",
+            "data-readonly:hidden",
+            "disabled:cursor-not-allowed disabled:text-date-picker-trigger-fg-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        positioner: "isolate z-(--z-index)",
+        content: [
+            "flex max-h-(--available-height) w-date-picker-content max-w-date-picker-viewport flex-col overflow-hidden",
+            "data-[selection-mode=range]:w-date-picker-content-range",
+            "border-(length:--border-width-date-picker-content) border-date-picker-content-border",
+            "rounded-date-picker-content bg-date-picker-content-bg text-date-picker-content-fg shadow-date-picker-content",
+            "outline-none duration-200 ease-out",
+            "motion-safe:transition motion-reduce:transition-none",
+            "starting:-translate-y-date-picker-enter-offset starting:opacity-0"
+        ],
+        calendar: [
+            "grid min-h-0 grid-cols-1 gap-date-picker-calendar overflow-y-auto p-date-picker-content",
+            "sm:data-[selection-mode=range]:grid-cols-2"
+        ],
+        monthPanel: [
+            "grid min-w-0 content-start gap-date-picker-calendar",
+            "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-l sm:data-[index=1]:pl-date-picker-content"
+        ],
+        view: "min-w-0",
+        viewControl: "flex min-w-0 items-center justify-between gap-date-picker-calendar",
+        navigationTrigger: [
+            "size-date-picker-navigation shrink-0 rounded-date-picker-day p-0",
+            "text-date-picker-navigation-fg hover:bg-date-picker-navigation-bg-hover",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-date-picker-navigation-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "disabled:cursor-not-allowed disabled:text-date-picker-navigation-fg-disabled"
+        ],
+        viewTrigger: [
+            "min-w-0 flex-1 truncate rounded-date-picker-day px-date-picker-calendar-cell",
+            "font-date-picker-view text-date-picker-navigation-fg hover:bg-date-picker-navigation-bg-hover",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-date-picker-navigation-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)"
+        ],
+        viewHeading: "min-w-0 flex-1 truncate px-date-picker-calendar-cell text-center font-date-picker-view text-date-picker-navigation-fg",
+        table: "w-full table-fixed border-separate border-spacing-0",
+        tableHeader: [
+            "text-center align-middle",
+            "font-date-picker-weekday text-date-picker-weekday text-date-picker-weekday-fg"
+        ],
+        tableCell: "p-0 text-center align-middle",
+        dayTrigger: [
+            "border-(length:--border-width-date-picker-day) flex w-full items-center justify-center",
+            "rounded-date-picker-day border-date-picker-day-border bg-date-picker-day-bg text-date-picker-day-fg",
+            "hover:bg-date-picker-day-bg-hover",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-date-picker-day-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-today:border-date-picker-day-today-border",
+            "data-in-range:rounded-none data-in-range:bg-date-picker-day-bg-range",
+            "data-in-hover-range:rounded-none data-in-hover-range:bg-date-picker-day-bg-range-hover",
+            "data-range-start:rounded-date-picker-day data-range-start:rounded-r-none",
+            "data-range-end:rounded-date-picker-day data-range-end:rounded-l-none",
+            "data-range-start:bg-date-picker-day-bg-selected data-range-end:bg-date-picker-day-bg-selected",
+            "data-range-start:text-date-picker-day-fg-selected data-range-end:text-date-picker-day-fg-selected",
+            "data-selected:bg-date-picker-day-bg-selected data-selected:text-date-picker-day-fg-selected",
+            "data-selected:hover:bg-date-picker-day-bg-selected-hover",
+            "data-unavailable:text-date-picker-day-fg-unavailable data-unavailable:line-through",
+            "data-outside-range:opacity-date-picker-outside",
+            "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-date-picker-disabled",
+            "forced-colors:data-selected:outline-2",
+            "forced-colors:data-disabled:opacity-date-picker-disabled",
+            "transition-colors duration-200 motion-reduce:transition-none"
+        ],
+        periodTrigger: [
+            "w-full rounded-date-picker-day p-date-picker-calendar-cell",
+            "text-date-picker-day-fg hover:bg-date-picker-day-bg-hover",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-date-picker-day-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "data-selected:bg-date-picker-day-bg-selected data-selected:text-date-picker-day-fg-selected",
+            "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-date-picker-disabled"
+        ],
+        timeControl: [
+            "grid shrink-0 grid-cols-1 gap-date-picker-time border-date-picker-time-border border-t",
+            "bg-date-picker-time-bg p-date-picker-time text-date-picker-time-fg",
+            "sm:data-[selection-mode=range]:grid-cols-2"
+        ],
+        timeGroup: [
+            "flex min-w-0 items-center gap-date-picker-time",
+            "data-[index=1]:border-date-picker-time-border data-[index=1]:border-t data-[index=1]:pt-date-picker-time",
+            "sm:data-[index=1]:border-l sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:pl-date-picker-time"
+        ],
+        timeGroupLabel: "shrink-0 font-date-picker-view text-date-picker-time-label-fg text-date-picker-time-label",
+        timeFields: "flex min-w-0 items-center gap-date-picker-indicator",
+        timeField: "w-date-picker-time-field shrink-0",
+        timeLabel: "sr-only",
+        timeSeparator: "shrink-0 text-date-picker-time-label-fg tabular-nums",
+        timeInput: "token-date-picker-time-input px-date-picker-time-input text-center tabular-nums",
+        dayPeriod: [
+            "h-date-picker-time-field border-(length:--border-width-date-picker-time) rounded-date-picker-time text-date-picker-sm",
+            "border-date-picker-time-border bg-date-picker-time-bg px-date-picker-calendar-cell text-date-picker-time-fg",
+            "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
+            "focus-visible:outline-date-picker-time-ring",
+            "focus-visible:outline-offset-(length:--default-ring-offset)",
+            "disabled:cursor-not-allowed disabled:opacity-date-picker-disabled"
+        ],
+        timeZone: "ms-auto self-center truncate text-date-picker-time-label text-date-picker-time-label-fg",
+        footer: [
+            "flex shrink-0 items-center justify-end gap-date-picker-footer border-date-picker-footer-border border-t",
+            "p-date-picker-footer"
+        ],
+        cancelTrigger: "shrink-0 text-date-picker-content-fg",
+        confirmTrigger: "shrink-0"
+    },
+    variants: {
+        size: {
+            sm: {
+                inputControl: "h-date-picker-control-sm rounded-date-picker-control-sm p-date-picker-segments-sm text-date-picker-sm",
+                trigger: "size-icon-control-sm text-icon-control-sm",
+                clearTrigger: "size-icon-control-sm text-icon-control-sm",
+                content: "text-date-picker-content-sm",
+                dayTrigger: "size-date-picker-day-sm",
+                tableHeader: "h-date-picker-day-sm"
+            },
+            md: {
+                inputControl: "h-date-picker-control-md rounded-date-picker-control-md p-date-picker-segments-md text-date-picker-md",
+                trigger: "size-icon-control-md text-icon-control-md",
+                clearTrigger: "size-icon-control-md text-icon-control-md",
+                content: "text-date-picker-content-md",
+                dayTrigger: "size-date-picker-day-md",
+                tableHeader: "h-date-picker-day-md"
+            },
+            lg: {
+                inputControl: "h-date-picker-control-lg rounded-date-picker-control-lg p-date-picker-segments-lg text-date-picker-lg",
+                trigger: "size-icon-control-lg text-icon-control-lg",
+                clearTrigger: "size-icon-control-lg text-icon-control-lg",
+                content: "text-date-picker-content-lg",
+                dayTrigger: "size-date-picker-day-lg",
+                tableHeader: "h-date-picker-day-lg"
+            }
+        },
+        timed: {
+            true: {
+                calendar: "p-date-picker-content-timed",
+                dayTrigger: "h-date-picker-day-timed",
+                tableHeader: "h-date-picker-day-timed"
+            }
+        }
+    },
+    defaultVariants: {
+        size: "md"
+    }
+});
+const DatePickerContext = /*#__PURE__*/ createContext(null);
+function useDatePickerContext() {
+    const context = useContext(DatePickerContext);
+    if (!context) throw new Error("DatePicker components must be used within DatePicker.Root");
+    return context;
+}
+function setRefValue(ref, value) {
+    if ("function" == typeof ref) return void ref(value);
+    if (ref) ref.current = value;
+}
+function toCompleteDatePickerRange(value) {
+    const start = value[0];
+    const end = value[1];
+    if (!(start && end && start.compare(end) <= 0)) return null;
+    return [
+        start,
+        end
+    ];
+}
+function toDateValues(value) {
+    if (isDateValueArray(value)) return [
+        ...value
+    ];
+    return value ? [
+        value
+    ] : [];
+}
+function isDateValueArray(value) {
+    return Array.isArray(value);
+}
+function serializeDatePickerValue(value) {
+    if (Array.isArray(value)) {
+        const range = toCompleteDatePickerRange(value);
+        return range ? [
+            range[0].toString(),
+            range[1].toString()
+        ] : [
+            "",
+            ""
+        ];
+    }
+    return value?.toString() ?? "";
+}
+function DatePicker({ children, className, defaultOpen = false, defaultValue, disabled, endName, flip = true, form, granularity = "day", gutter = 8, hideTimeZone = false, hourCycle, id, invalid, isDateUnavailable, isTimeUnavailable, locale = "en-US", max, min, name, numOfMonths, offset = {
+    mainAxis: 8,
+    crossAxis: 0
+}, onOpenChange, onValueChange, open, overflowPadding = 8, placement = "bottom-start", readOnly, ref, required, sameWidth = false, selectionMode = "single", shouldForceLeadingZeros = false, size = "md", slide = true, startOfWeek, startName, timeZone = "UTC", value, ...htmlProps }) {
+    const generatedId = useId();
+    const uniqueId = id ?? generatedId;
+    const isTimed = "day" !== granularity;
+    const resolvedHourCycle = hourCycle ?? (new Intl.DateTimeFormat(locale, {
+        hour: "numeric"
+    }).resolvedOptions().hour12 ? 12 : 24);
+    const [uncontrolledValue, setUncontrolledValue] = useState(()=>defaultValue ?? null);
+    const acceptedValue = void 0 === value ? uncontrolledValue : value;
+    const acceptedValues = toDateValues(acceptedValue);
+    const acceptedScalarValue = acceptedValues[0] ?? null;
+    const acceptedCandidate = "range" === selectionMode ? acceptedValues : acceptedScalarValue;
+    const [rangeInputDraft, setRangeInputDraft] = useState(null);
+    const usesPopupDraft = isTimed || "range" === selectionMode;
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const resolvedOpen = void 0 === open ? uncontrolledOpen : open;
+    const isTimedRangePopupOpen = isTimed && "range" === selectionMode && resolvedOpen;
+    const [coordinator, dispatch] = useReducer(datePickerCoordinatorReducer, void 0, ()=>usesPopupDraft && resolvedOpen ? {
+            draft: {
+                baseline: acceptedCandidate,
+                candidate: acceptedCandidate
+            }
+        } : createDatePickerCoordinatorState());
+    const acceptedValueAsString = serializeDatePickerValue(acceptedValue);
+    const acceptedValuesAsString = acceptedValues.map((item)=>item.toString());
+    const acceptedValueKey = JSON.stringify(acceptedValueAsString);
+    const previousAcceptedValue = useRef(acceptedValueKey);
+    const previousOpen = useRef(resolvedOpen);
+    const triggerElementRef = useRef(null);
+    const styles = datePickerVariants({
+        size,
+        timed: isTimed
+    });
+    useEffect(()=>{
+        if (previousOpen.current === resolvedOpen) return;
+        previousOpen.current = resolvedOpen;
+        const pendingTimedRange = resolvedOpen && isTimed && "range" === selectionMode && rangeInputDraft ? toCompleteDatePickerRange(rangeInputDraft) : null;
+        if ("range" === selectionMode) setRangeInputDraft(null);
+        if (!(resolvedOpen && usesPopupDraft)) return void dispatch({
+            type: "discard"
+        });
+        dispatch({
+            type: "open",
+            value: acceptedCandidate
+        });
+        if (pendingTimedRange) dispatch({
+            type: "edit",
+            value: pendingTimedRange
+        });
+    }, [
+        acceptedCandidate,
+        isTimed,
+        rangeInputDraft,
+        resolvedOpen,
+        selectionMode,
+        usesPopupDraft
+    ]);
+    useEffect(()=>{
+        if (previousAcceptedValue.current === acceptedValueKey) return;
+        previousAcceptedValue.current = acceptedValueKey;
+        setRangeInputDraft(null);
+        if (usesPopupDraft && resolvedOpen) dispatch({
+            type: "resync",
+            value: acceptedCandidate
+        });
+    }, [
+        acceptedCandidate,
+        acceptedValueKey,
+        resolvedOpen,
+        usesPopupDraft
+    ]);
+    const commitValue = (nextValue)=>{
+        if (void 0 === value) setUncontrolledValue(nextValue);
+        onValueChange?.({
+            value: nextValue,
+            valueAsString: serializeDatePickerValue(nextValue)
+        });
+    };
+    const requestOpen = (nextOpen)=>{
+        if (nextOpen === resolvedOpen) return;
+        const activeElement = nextOpen || "u" < typeof document ? null : document.activeElement;
+        const shouldRestoreFocus = activeElement instanceof HTMLElement && Boolean(activeElement.closest('[data-scope="date-picker"][data-part="content"]'));
+        if (void 0 === open) setUncontrolledOpen(nextOpen);
+        onOpenChange?.({
+            open: nextOpen
+        });
+        if (shouldRestoreFocus) requestAnimationFrame(()=>{
+            if (document.activeElement === document.body) triggerElementRef.current?.focus({
+                preventScroll: true
+            });
+        });
+    };
+    const draftValue = coordinator.draft ? coordinator.draft.candidate : acceptedCandidate;
+    const pickerValues = usesPopupDraft && resolvedOpen ? toDateValues(draftValue) : acceptedValues;
+    const dateInputValues = "range" !== selectionMode || isTimedRangePopupOpen ? acceptedValues : rangeInputDraft ?? acceptedValues;
+    const resolvedNumOfMonths = numOfMonths ?? ("range" === selectionMode ? 2 : 1);
+    const pickerService = useMachine(date_picker_machine, {
+        closeOnSelect: !isTimed,
+        disabled,
+        id: `${uniqueId}-calendar`,
+        ids: {
+            label: ()=>`${uniqueId}-label`
+        },
+        invalid,
+        isDateUnavailable,
+        locale,
+        max,
+        min,
+        fixedWeeks: resolvedNumOfMonths > 1,
+        numOfMonths: 1,
+        onOpenChange: (details)=>requestOpen(details.open),
+        onValueChange: (details)=>{
+            const nextValue = details.value[0] ?? null;
+            if ("range" === selectionMode) {
+                dispatch({
+                    type: "edit",
+                    value: details.value
+                });
+                const nextRange = toCompleteDatePickerRange(details.value);
+                if (isTimed || !nextRange) return;
+                commitValue(nextRange);
+                requestOpen(false);
+                return;
+            }
+            if (isTimed) return void dispatch({
+                type: "edit",
+                value: nextValue
+            });
+            commitValue(nextValue);
+            requestOpen(false);
+        },
+        open: resolvedOpen,
+        openOnClick: false,
+        positioning: {
+            flip,
+            gutter,
+            offset,
+            overflowPadding,
+            placement,
+            sameWidth,
+            slide
+        },
+        readOnly,
+        required,
+        selectionMode,
+        startOfWeek,
+        timeZone,
+        value: pickerValues
+    });
+    const pickerApi = date_picker_connect(pickerService, normalizeProps);
+    const dateInputService = useMachine(machine, {
+        disabled,
+        granularity,
+        hideTimeZone,
+        hourCycle,
+        id: `${uniqueId}-input`,
+        ids: {
+            label: ()=>`${uniqueId}-label`
+        },
+        invalid,
+        isDateUnavailable,
+        locale,
+        max,
+        min,
+        onValueChange: (details)=>{
+            if ("range" === selectionMode) {
+                dispatch({
+                    type: "edit",
+                    value: details.value
+                });
+                if (isTimedRangePopupOpen) return;
+                setRangeInputDraft(details.value);
+                const nextRange = toCompleteDatePickerRange(details.value);
+                if (nextRange) {
+                    if (isTimed) return void requestOpen(true);
+                    setRangeInputDraft(null);
+                    commitValue(nextRange);
+                    requestOpen(false);
+                }
+                return;
+            }
+            commitValue(details.value[0] ?? null);
+        },
+        readOnly: readOnly || isTimed && resolvedOpen,
+        required,
+        selectionMode,
+        shouldForceLeadingZeros,
+        timeZone,
+        value: dateInputValues
+    });
+    const dateInputApi = connect(dateInputService, normalizeProps);
+    const canConfirm = canConfirmDatePickerDraft(coordinator, isTimeUnavailable);
+    const submitDraft = ()=>{
+        if (!(canConfirm && coordinator.draft)) return;
+        const candidate = coordinator.draft.candidate;
+        if ("range" === selectionMode) if (null === candidate) commitValue(null);
+        else {
+            const nextRange = toCompleteDatePickerRange(toDateValues(candidate));
+            if (!nextRange) return;
+            commitValue(nextRange);
+        }
+        else if (!isDateValueArray(candidate)) commitValue(candidate);
+        requestOpen(false);
+    };
+    const clearValue = ()=>{
+        if (disabled || readOnly) return;
+        setRangeInputDraft(null);
+        if (isTimed && resolvedOpen) return void dispatch({
+            type: "edit",
+            value: null
+        });
+        commitValue(null);
+    };
+    const rootProps = mergeProps(htmlProps, pickerApi.getRootProps());
+    return /*#__PURE__*/ jsx(DatePickerContext.Provider, {
+        value: {
+            acceptedValue,
+            canConfirm,
+            clearValue,
+            coordinator,
+            dateInputApi,
+            granularity,
+            hideTimeZone,
+            hourCycle: resolvedHourCycle,
+            isTimed,
+            max,
+            min,
+            numOfMonths: resolvedNumOfMonths,
+            pickerApi,
+            requestOpen,
+            required: Boolean(required),
+            selectionMode,
+            setDraftTimePart: (part, nextValue, index = 0)=>{
+                if ("day" !== granularity) dispatch({
+                    type: "edit-time",
+                    granularity,
+                    hourCycle: resolvedHourCycle,
+                    index,
+                    part,
+                    value: nextValue
+                });
+            },
+            setDraftValue: (nextValue)=>dispatch({
+                    type: "edit",
+                    value: nextValue
+                }),
+            size,
+            styles,
+            submitDraft,
+            triggerElementRef
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            ...rootProps,
+            className: styles.root({
+                className
+            }),
+            "data-granularity": granularity,
+            "data-selection-mode": selectionMode,
+            ref: ref,
+            children: [
+                children,
+                "range" === selectionMode ? /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ jsx("input", {
+                            disabled: disabled,
+                            form: form,
+                            name: startName,
+                            type: "hidden",
+                            value: acceptedValuesAsString[0] ?? ""
+                        }),
+                        /*#__PURE__*/ jsx("input", {
+                            disabled: disabled,
+                            form: form,
+                            name: endName,
+                            type: "hidden",
+                            value: acceptedValuesAsString[1] ?? ""
+                        })
+                    ]
+                }) : /*#__PURE__*/ jsx("input", {
+                    disabled: disabled,
+                    form: form,
+                    name: name,
+                    type: "hidden",
+                    value: acceptedValuesAsString[0] ?? ""
+                })
+            ]
+        })
+    });
+}
+DatePicker.Label = function({ children, className, ref, ...props }) {
+    const { dateInputApi, pickerApi, required, size, styles } = useDatePickerContext();
+    const labelProps = mergeProps({
+        ...props,
+        ref
+    }, pickerApi.getLabelProps(), dateInputApi.getLabelProps());
+    return /*#__PURE__*/ jsx(Label, {
+        ...labelProps,
+        className: styles.label({
+            className
+        }),
+        disabled: dateInputApi.disabled,
+        required: required,
+        size: size,
+        children: children
+    });
+};
+DatePicker.Control = function({ children, className, ref, ...props }) {
+    const { dateInputApi, pickerApi, styles } = useDatePickerContext();
+    const controlProps = mergeProps(props, pickerApi.getControlProps());
+    const { "data-invalid": _dataInvalid, ...dateInputControlProps } = dateInputApi.getControlProps();
+    return /*#__PURE__*/ jsx("div", {
+        ...controlProps,
+        className: styles.control({
+            className
+        }),
+        ref: ref,
+        children: /*#__PURE__*/ jsx("div", {
+            ...dateInputControlProps,
+            className: styles.inputControl(),
+            "data-disabled": dateInputApi.disabled || void 0,
+            "data-readonly": pickerApi.readOnly || void 0,
+            "data-validation": dateInputApi.invalid ? "error" : void 0,
+            children: children
+        })
+    });
+};
+DatePicker.Segments = function({ className, endLabel = "End", ref, separator = "–", startLabel = "Start", ...props }) {
+    const { dateInputApi, required, selectionMode, styles } = useDatePickerContext();
+    const startDescriptorId = useId();
+    const endDescriptorId = useId();
+    const renderSegments = (index)=>dateInputApi.getSegments({
+            index
+        }).map((segment, segmentIndex)=>/*#__PURE__*/ createElement("span", {
+                ...dateInputApi.getSegmentProps({
+                    index,
+                    segment
+                }),
+                "aria-required": required && "literal" !== segment.type ? true : void 0,
+                className: styles.segment(),
+                key: `${segment.type}-${segmentIndex}`
+            }, segment.text));
+    if ("range" === selectionMode) {
+        const visibleLabel = props["aria-label"];
+        const baseLabelId = dateInputApi.getLabelProps().id;
+        const getRangeGroupLabelProps = (index, descriptorId, label)=>({
+                ...visibleLabel ? {
+                    "aria-label": `${visibleLabel} ${label}`
+                } : {
+                    "aria-labelledby": `${baseLabelId} ${descriptorId}`
+                },
+                ...dateInputApi.getSegmentGroupProps({
+                    index
+                }),
+                ...visibleLabel ? {
+                    "aria-label": `${visibleLabel} ${label}`,
+                    "aria-labelledby": void 0
+                } : {
+                    "aria-labelledby": `${baseLabelId} ${descriptorId}`
+                }
+            });
+        return /*#__PURE__*/ jsxs("div", {
+            ...props,
+            "aria-label": void 0,
+            className: styles.segments({
+                className
+            }),
+            "data-part": "segments",
+            "data-scope": "date-picker",
+            ref: ref,
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "sr-only",
+                    id: startDescriptorId,
+                    children: startLabel
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    ...getRangeGroupLabelProps(0, startDescriptorId, startLabel),
+                    className: styles.segmentGroup(),
+                    children: renderSegments(0)
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": "true",
+                    className: styles.rangeSeparator(),
+                    children: separator
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "sr-only",
+                    id: endDescriptorId,
+                    children: endLabel
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    ...getRangeGroupLabelProps(1, endDescriptorId, endLabel),
+                    className: styles.segmentGroup(),
+                    children: renderSegments(1)
+                })
+            ]
+        });
+    }
+    const groupProps = mergeProps(props, dateInputApi.getSegmentGroupProps());
+    return /*#__PURE__*/ jsx("div", {
+        ...groupProps,
+        className: styles.segments({
+            className
+        }),
+        ref: ref,
+        children: renderSegments(0)
+    });
+};
+DatePicker.IndicatorGroup = function({ className, ref, ...props }) {
+    const { styles } = useDatePickerContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: styles.indicatorGroup({
+            className
+        }),
+        "data-part": "indicator-group",
+        "data-scope": "date-picker",
+        ref: ref
+    });
+};
+DatePicker.Trigger = function({ children, className, icon, iconSize = "current", ref, size = "current", theme = "unstyled", type = "button", ...props }) {
+    const { dateInputApi, pickerApi, styles, triggerElementRef } = useDatePickerContext();
+    const triggerProps = mergeProps(props, pickerApi.getTriggerProps());
+    return /*#__PURE__*/ jsx(Button, {
+        ...triggerProps,
+        "aria-invalid": dateInputApi.invalid || void 0,
+        className: styles.trigger({
+            className
+        }),
+        icon: icon ?? (children ? void 0 : "token-icon-date-picker-calendar"),
+        iconSize: iconSize,
+        ref: (node)=>{
+            triggerElementRef.current = node;
+            setRefValue(ref, node);
+        },
+        size: size,
+        theme: theme,
+        type: type,
+        children: children
+    });
+};
+DatePicker.ClearTrigger = function({ children, className, icon, iconSize = "current", onClick, ref, size = "current", theme = "unstyled", type = "button", ...props }) {
+    const { clearValue, pickerApi, styles } = useDatePickerContext();
+    const { onClick: _onMachineClick, ...machineClearProps } = pickerApi.getClearTriggerProps();
+    const clearProps = mergeProps(props, machineClearProps);
+    const isClearDisabled = Boolean(clearProps.disabled || pickerApi.disabled || pickerApi.readOnly);
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (!(event.defaultPrevented || isClearDisabled)) clearValue();
+    };
+    return /*#__PURE__*/ jsx(Button, {
+        ...clearProps,
+        className: styles.clearTrigger({
+            className
+        }),
+        "data-readonly": pickerApi.readOnly || void 0,
+        disabled: isClearDisabled,
+        icon: icon ?? (children ? void 0 : "token-icon-date-picker-clear"),
+        iconSize: iconSize,
+        onClick: handleClick,
+        ref: ref,
+        size: size,
+        theme: theme,
+        type: type,
+        children: children
+    });
+};
+DatePicker.Positioner = function({ children, className, forceMount = false, ref, ...props }) {
+    const { pickerApi, styles } = useDatePickerContext();
+    if (!(pickerApi.open || forceMount)) return null;
+    const positionerProps = mergeProps(props, pickerApi.getPositionerProps());
+    const node = /*#__PURE__*/ jsx("div", {
+        ...positionerProps,
+        className: styles.positioner({
+            className
+        }),
+        ref: ref,
+        children: children
+    });
+    return /*#__PURE__*/ jsx(Portal, {
+        children: node
+    });
+};
+DatePicker.Content = function({ className, ref, ...props }) {
+    const { isTimed, pickerApi, selectionMode, styles } = useDatePickerContext();
+    const contentProps = mergeProps(props, pickerApi.getContentProps());
+    return /*#__PURE__*/ jsx("div", {
+        ...contentProps,
+        className: styles.content({
+            className
+        }),
+        "data-selection-mode": selectionMode,
+        "data-timed": isTimed || void 0,
+        ref: ref
+    });
+};
+DatePicker.Calendar = function({ className, ref, ...props }) {
+    const { acceptedValue, max, min, numOfMonths, pickerApi, selectionMode, styles } = useDatePickerContext();
+    const createPanelMonths = ()=>Array.from({
+            length: numOfMonths
+        }, (_, index)=>pickerApi.visibleRange.start.add({
+                months: index
+            }).set({
+                day: 1
+            }));
+    const [panelMonths, setPanelMonths] = useState(createPanelMonths);
+    const [activePanelIndex, setActivePanelIndex] = useState(null);
+    const acceptedValueKey = JSON.stringify(serializeDatePickerValue(acceptedValue));
+    const previousAcceptedValue = useRef(acceptedValueKey);
+    const previousNumOfMonths = useRef(numOfMonths);
+    const previousView = useRef(pickerApi.view);
+    const focusedMonthKey = `${pickerApi.focusedValue.year}-${pickerApi.focusedValue.month}`;
+    const visibleRangeStartKey = pickerApi.visibleRange.start.toString();
+    useEffect(()=>{
+        if ("single" !== selectionMode) return;
+        setPanelMonths(createPanelMonths());
+    }, [
+        numOfMonths,
+        selectionMode,
+        visibleRangeStartKey
+    ]);
+    useEffect(()=>{
+        if (previousAcceptedValue.current === acceptedValueKey && previousNumOfMonths.current === numOfMonths) return;
+        previousAcceptedValue.current = acceptedValueKey;
+        previousNumOfMonths.current = numOfMonths;
+        setPanelMonths(createPanelMonths());
+        setActivePanelIndex(null);
+        pickerApi.setView("day");
+    }, [
+        acceptedValueKey,
+        numOfMonths
+    ]);
+    useEffect(()=>{
+        const returnedToDay = "day" !== previousView.current && "day" === pickerApi.view;
+        previousView.current = pickerApi.view;
+        if (!(returnedToDay && null !== activePanelIndex)) return;
+        const selectedMonth = pickerApi.focusedValue.set({
+            day: 1
+        });
+        setPanelMonths((current)=>current.map((month, index)=>index === activePanelIndex ? selectedMonth : month));
+        setActivePanelIndex(null);
+    }, [
+        activePanelIndex,
+        focusedMonthKey,
+        pickerApi.view
+    ]);
+    const canShowPanelMonth = (index, value)=>{
+        const monthStart = value.set({
+            day: 1
+        });
+        const monthEnd = monthStart.add({
+            months: 1
+        }).subtract({
+            days: 1
+        });
+        const previousMonth = panelMonths[index - 1];
+        const nextMonth = panelMonths[index + 1];
+        if (min && monthEnd.compare(min) < 0) return false;
+        if (max && monthStart.compare(max) > 0) return false;
+        if (previousMonth && monthStart.compare(previousMonth) <= 0) return false;
+        if (nextMonth && monthStart.compare(nextMonth) >= 0) return false;
+        return true;
+    };
+    const movePanel = (index, months)=>{
+        const currentMonth = panelMonths[index];
+        if (!currentMonth) return;
+        const nextMonth = currentMonth.add({
+            months
+        }).set({
+            day: 1
+        });
+        if (!canShowPanelMonth(index, nextMonth)) return;
+        setPanelMonths((current)=>current.map((month, panelIndex)=>panelIndex === index ? nextMonth : month));
+        setActivePanelIndex(null);
+        pickerApi.setView("day");
+        pickerApi.setFocusedValue(nextMonth);
+    };
+    const openPeriodChooser = (index)=>{
+        const panelMonth = panelMonths[index];
+        if (!panelMonth) return;
+        setActivePanelIndex(index);
+        pickerApi.setFocusedValue(panelMonth);
+        pickerApi.setView("month");
+    };
+    const renderPanelNavigationTrigger = (index, months, view)=>{
+        const isPrevious = months < 0;
+        const machineProps = isPrevious ? pickerApi.getPrevTriggerProps({
+            view
+        }) : pickerApi.getNextTriggerProps({
+            view
+        });
+        const panelMonth = panelMonths[index];
+        const nextMonth = panelMonth?.add({
+            months
+        }).set({
+            day: 1
+        });
+        const disabled = pickerApi.disabled || !nextMonth || !canShowPanelMonth(index, nextMonth);
+        const isYearJump = 12 === Math.abs(months);
+        return /*#__PURE__*/ jsx(Button, {
+            ...machineProps,
+            className: styles.navigationTrigger(),
+            disabled: disabled,
+            icon: isYearJump ? isPrevious ? "token-icon-date-picker-previous-year" : "token-icon-date-picker-next-year" : isPrevious ? "token-icon-date-picker-previous" : "token-icon-date-picker-next",
+            iconSize: "current",
+            id: `${machineProps.id}-${index}-${Math.abs(months)}`,
+            onClick: ()=>movePanel(index, months),
+            size: "current",
+            theme: "unstyled",
+            type: "button"
+        });
+    };
+    const renderDayView = (month, index)=>{
+        const visibleRange = {
+            end: month.add({
+                months: 1
+            }).subtract({
+                days: 1
+            }),
+            start: month
+        };
+        const viewProps = pickerApi.getViewProps({
+            view: "day"
+        });
+        return /*#__PURE__*/ jsx("div", {
+            ...viewProps,
+            className: styles.view(),
+            hidden: false,
+            children: /*#__PURE__*/ jsxs("table", {
+                ...pickerApi.getTableProps({
+                    id: `panel-${index}`,
+                    view: "day"
+                }),
+                className: styles.table(),
+                children: [
+                    /*#__PURE__*/ jsx("thead", {
+                        ...pickerApi.getTableHeadProps({
+                            view: "day"
+                        }),
+                        children: /*#__PURE__*/ jsx("tr", {
+                            ...pickerApi.getTableRowProps({
+                                view: "day"
+                            }),
+                            children: pickerApi.weekDays.map((weekDay)=>/*#__PURE__*/ createElement("th", {
+                                    ...pickerApi.getTableHeaderProps({
+                                        view: "day"
+                                    }),
+                                    className: styles.tableHeader(),
+                                    key: weekDay.value.toString(),
+                                    scope: "col"
+                                }, /*#__PURE__*/ jsx("abbr", {
+                                    title: weekDay.long,
+                                    children: weekDay.short
+                                })))
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("tbody", {
+                        ...pickerApi.getTableBodyProps({
+                            view: "day"
+                        }),
+                        children: pickerApi.getMonthWeeks(month).map((week)=>/*#__PURE__*/ createElement("tr", {
+                                ...pickerApi.getTableRowProps({
+                                    view: "day"
+                                }),
+                                key: week[0]?.toString()
+                            }, week.map((day)=>/*#__PURE__*/ createElement("td", {
+                                    ...pickerApi.getDayTableCellProps({
+                                        value: day,
+                                        visibleRange
+                                    }),
+                                    className: styles.tableCell(),
+                                    key: day.toString()
+                                }, /*#__PURE__*/ jsx(Button, {
+                                    ...pickerApi.getDayTableCellTriggerProps({
+                                        value: day,
+                                        visibleRange
+                                    }),
+                                    className: styles.dayTrigger(),
+                                    size: "current",
+                                    theme: "unstyled",
+                                    type: "button",
+                                    children: pickerApi.format(day, {
+                                        day: "numeric"
+                                    })
+                                })))))
+                    })
+                ]
+            })
+        });
+    };
+    const renderMonthView = (index)=>/*#__PURE__*/ jsx("div", {
+            ...pickerApi.getViewProps({
+                view: "month"
+            }),
+            className: styles.view(),
+            children: /*#__PURE__*/ jsx("table", {
+                ...pickerApi.getTableProps({
+                    columns: 3,
+                    view: "month"
+                }),
+                className: styles.table(),
+                children: /*#__PURE__*/ jsx("tbody", {
+                    ...pickerApi.getTableBodyProps({
+                        view: "month"
+                    }),
+                    children: pickerApi.getMonthsGrid({
+                        columns: 3
+                    }).map((row)=>/*#__PURE__*/ createElement("tr", {
+                            ...pickerApi.getTableRowProps({
+                                view: "month"
+                            }),
+                            key: row[0]?.value
+                        }, row.map((month)=>{
+                            const candidate = pickerApi.focusedValue.set({
+                                month: month.value
+                            }).set({
+                                day: 1
+                            });
+                            const machineProps = pickerApi.getMonthTableCellTriggerProps({
+                                columns: 3,
+                                value: month.value
+                            });
+                            const disabled = Boolean(machineProps.disabled) || !canShowPanelMonth(index, candidate);
+                            return /*#__PURE__*/ createElement("td", {
+                                ...pickerApi.getMonthTableCellProps({
+                                    columns: 3,
+                                    value: month.value
+                                }),
+                                "aria-disabled": disabled || void 0,
+                                className: styles.tableCell(),
+                                key: month.value
+                            }, /*#__PURE__*/ jsx(Button, {
+                                ...machineProps,
+                                "aria-disabled": disabled || void 0,
+                                className: styles.periodTrigger(),
+                                "data-disabled": disabled || void 0,
+                                disabled: disabled,
+                                size: "current",
+                                theme: "unstyled",
+                                type: "button",
+                                children: month.label
+                            }));
+                        })))
+                })
+            })
+        });
+    const renderYearView = ()=>/*#__PURE__*/ jsx("div", {
+            ...pickerApi.getViewProps({
+                view: "year"
+            }),
+            className: styles.view(),
+            children: /*#__PURE__*/ jsx("table", {
+                ...pickerApi.getTableProps({
+                    columns: 4,
+                    view: "year"
+                }),
+                className: styles.table(),
+                children: /*#__PURE__*/ jsx("tbody", {
+                    ...pickerApi.getTableBodyProps({
+                        view: "year"
+                    }),
+                    children: pickerApi.getYearsGrid({
+                        columns: 4
+                    }).map((row)=>/*#__PURE__*/ createElement("tr", {
+                            ...pickerApi.getTableRowProps({
+                                view: "year"
+                            }),
+                            key: row[0]?.value
+                        }, row.map((year)=>/*#__PURE__*/ createElement("td", {
+                                ...pickerApi.getYearTableCellProps({
+                                    columns: 4,
+                                    value: year.value
+                                }),
+                                className: styles.tableCell(),
+                                key: year.value
+                            }, /*#__PURE__*/ jsx(Button, {
+                                ...pickerApi.getYearTableCellTriggerProps({
+                                    columns: 4,
+                                    value: year.value
+                                }),
+                                className: styles.periodTrigger(),
+                                size: "current",
+                                theme: "unstyled",
+                                type: "button",
+                                children: year.label
+                            })))))
+                })
+            })
+        });
+    const renderPeriodPanel = (index)=>/*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    ...pickerApi.getViewControlProps({
+                        view: pickerApi.view
+                    }),
+                    className: styles.viewControl(),
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            ...pickerApi.getPrevTriggerProps({
+                                view: pickerApi.view
+                            }),
+                            className: styles.navigationTrigger(),
+                            icon: "token-icon-date-picker-previous",
+                            iconSize: "current",
+                            size: "current",
+                            theme: "unstyled",
+                            type: "button"
+                        }),
+                        "month" === pickerApi.view ? /*#__PURE__*/ jsx(Button, {
+                            ...pickerApi.getViewTriggerProps({
+                                view: "month"
+                            }),
+                            className: styles.viewTrigger(),
+                            size: "current",
+                            theme: "unstyled",
+                            type: "button",
+                            children: pickerApi.focusedValue.year
+                        }) : /*#__PURE__*/ jsxs("span", {
+                            className: styles.viewHeading(),
+                            children: [
+                                pickerApi.getDecade().start,
+                                "–",
+                                pickerApi.getDecade().end
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            ...pickerApi.getNextTriggerProps({
+                                view: pickerApi.view
+                            }),
+                            className: styles.navigationTrigger(),
+                            icon: "token-icon-date-picker-next",
+                            iconSize: "current",
+                            size: "current",
+                            theme: "unstyled",
+                            type: "button"
+                        })
+                    ]
+                }),
+                "month" === pickerApi.view ? renderMonthView(index) : null,
+                "year" === pickerApi.view ? renderYearView() : null
+            ]
+        });
+    const renderDayPanel = (month, index)=>{
+        const monthText = pickerApi.format(month, {
+            month: "short",
+            year: "numeric"
+        });
+        const monthLabel = pickerApi.format(month, {
+            month: "long",
+            year: "numeric"
+        });
+        const viewTriggerProps = pickerApi.getViewTriggerProps({
+            view: "day"
+        });
+        const isPeriodPanel = activePanelIndex === index && "day" !== pickerApi.view;
+        const isInactivePanel = null !== activePanelIndex && activePanelIndex !== index;
+        return /*#__PURE__*/ jsx("div", {
+            className: styles.monthPanel(),
+            "data-index": index,
+            "data-view": isPeriodPanel ? pickerApi.view : "day",
+            inert: isInactivePanel || void 0,
+            children: isPeriodPanel ? renderPeriodPanel(index) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        ...pickerApi.getViewControlProps({
+                            view: "day"
+                        }),
+                        className: styles.viewControl(),
+                        children: [
+                            renderPanelNavigationTrigger(index, -12, "month"),
+                            renderPanelNavigationTrigger(index, -1, "day"),
+                            /*#__PURE__*/ jsx(Button, {
+                                ...viewTriggerProps,
+                                "aria-label": `${viewTriggerProps["aria-label"]}: ${monthLabel}`,
+                                className: styles.viewTrigger(),
+                                id: `${viewTriggerProps.id}-${index}`,
+                                onClick: ()=>openPeriodChooser(index),
+                                size: "current",
+                                theme: "unstyled",
+                                title: monthLabel,
+                                type: "button",
+                                children: monthText
+                            }),
+                            renderPanelNavigationTrigger(index, 1, "day"),
+                            renderPanelNavigationTrigger(index, 12, "month")
+                        ]
+                    }),
+                    renderDayView(month, index)
+                ]
+            })
+        }, index);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: styles.calendar({
+            className
+        }),
+        "data-part": "calendar",
+        "data-scope": "date-picker",
+        "data-selection-mode": selectionMode,
+        "data-view": null === activePanelIndex ? "day" : pickerApi.view,
+        ref: ref,
+        children: panelMonths.map(renderDayPanel)
+    });
+};
+DatePicker.TimeControl = function({ className, endLabel = "End time", ref, startLabel = "Start time", ...props }) {
+    const { coordinator, granularity, hideTimeZone, hourCycle, isTimed, pickerApi, selectionMode, setDraftTimePart, styles } = useDatePickerContext();
+    if (!isTimed) return null;
+    const visibleParts = [
+        {
+            label: "Hour",
+            part: "hour"
+        },
+        ..."minute" === granularity || "second" === granularity ? [
+            {
+                label: "Minute",
+                part: "minute"
+            }
+        ] : [],
+        ..."second" === granularity ? [
+            {
+                label: "Second",
+                part: "second"
+            }
+        ] : []
+    ];
+    const draftValues = toDateValues(coordinator.draft?.candidate);
+    const renderTimeGroup = (index, accessibleLabel)=>{
+        const candidate = draftValues[index];
+        const timeParts = getDatePickerDraftTimeParts(coordinator, hourCycle, index);
+        const isDisabled = pickerApi.disabled || pickerApi.readOnly || !candidate;
+        const candidateTimeZone = !hideTimeZone && candidate && "timeZone" in candidate ? candidate.timeZone : null;
+        return /*#__PURE__*/ jsxs("div", {
+            "aria-label": accessibleLabel,
+            className: styles.timeGroup(),
+            "data-index": index,
+            role: "group",
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    "aria-hidden": "true",
+                    className: styles.timeGroupLabel(),
+                    children: accessibleLabel
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: styles.timeFields(),
+                    children: [
+                        visibleParts.map(({ label, part }, partIndex)=>{
+                            const hourMaximum = 12 === hourCycle ? 12 : 23;
+                            const max = "hour" === part ? hourMaximum : 59;
+                            const min = "hour" === part && 12 === hourCycle ? 1 : 0;
+                            return /*#__PURE__*/ jsxs(external_react_Fragment, {
+                                children: [
+                                    partIndex > 0 ? /*#__PURE__*/ jsx("span", {
+                                        "aria-hidden": "true",
+                                        className: styles.timeSeparator(),
+                                        children: ":"
+                                    }) : null,
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: styles.timeField(),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: styles.timeLabel(),
+                                                children: label
+                                            }),
+                                            /*#__PURE__*/ jsx(Input, {
+                                                "aria-label": "range" === selectionMode ? `${accessibleLabel} ${label.toLowerCase()}` : label,
+                                                className: styles.timeInput(),
+                                                disabled: isDisabled,
+                                                inputMode: "numeric",
+                                                max: max,
+                                                min: min,
+                                                onChange: (event)=>{
+                                                    const nextValue = event.currentTarget.value;
+                                                    if ("" === nextValue) return void setDraftTimePart(part, null, index);
+                                                    const parsedValue = Number(nextValue);
+                                                    if (Number.isInteger(parsedValue) && parsedValue >= min && parsedValue <= max) setDraftTimePart(part, parsedValue, index);
+                                                },
+                                                placeholder: "--",
+                                                readOnly: pickerApi.readOnly,
+                                                size: "sm",
+                                                step: 1,
+                                                type: "number",
+                                                value: timeParts[part] ?? ""
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, part);
+                        }),
+                        12 === hourCycle ? /*#__PURE__*/ jsxs("div", {
+                            className: styles.timeField(),
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: styles.timeLabel(),
+                                    children: "Day period"
+                                }),
+                                /*#__PURE__*/ jsxs("select", {
+                                    "aria-label": "range" === selectionMode ? `${accessibleLabel} day period` : "Day period",
+                                    className: styles.dayPeriod(),
+                                    disabled: isDisabled,
+                                    onChange: (event)=>{
+                                        const nextValue = event.currentTarget.value;
+                                        setDraftTimePart("dayPeriod", "" === nextValue ? null : Number(nextValue), index);
+                                    },
+                                    value: timeParts.dayPeriod ?? "",
+                                    children: [
+                                        /*#__PURE__*/ jsx("option", {
+                                            value: "",
+                                            children: "--"
+                                        }),
+                                        /*#__PURE__*/ jsx("option", {
+                                            value: "0",
+                                            children: "AM"
+                                        }),
+                                        /*#__PURE__*/ jsx("option", {
+                                            value: "12",
+                                            children: "PM"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }) : null,
+                        candidateTimeZone ? /*#__PURE__*/ jsx("span", {
+                            className: styles.timeZone(),
+                            title: candidateTimeZone,
+                            children: candidateTimeZone
+                        }) : null
+                    ]
+                })
+            ]
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        "aria-label": "single" === selectionMode ? props["aria-label"] ?? "Time" : void 0,
+        className: styles.timeControl({
+            className
+        }),
+        "data-granularity": granularity,
+        "data-hour-cycle": hourCycle,
+        "data-part": "time-control",
+        "data-scope": "date-picker",
+        "data-selection-mode": selectionMode,
+        ref: ref,
+        role: "single" === selectionMode ? "group" : void 0,
+        children: [
+            renderTimeGroup(0, "range" === selectionMode ? startLabel : "Time"),
+            "range" === selectionMode ? renderTimeGroup(1, endLabel) : null
+        ]
+    });
+};
+DatePicker.Footer = function({ className, ref, ...props }) {
+    const { styles } = useDatePickerContext();
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: styles.footer({
+            className
+        }),
+        "data-part": "footer",
+        "data-scope": "date-picker",
+        ref: ref
+    });
+};
+DatePicker.CancelTrigger = function({ children = "Cancel", className, onClick, ref, size: sizeProp, theme = "borderless", type = "button", variant = "primary", ...props }) {
+    const { requestOpen, size, styles } = useDatePickerContext();
+    const actionSize = sizeProp ?? ("lg" === size ? "md" : "sm");
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (!event.defaultPrevented) requestOpen(false);
+    };
+    return /*#__PURE__*/ jsx(Button, {
+        ...props,
+        className: styles.cancelTrigger({
+            className
+        }),
+        "data-part": "cancel-trigger",
+        "data-scope": "date-picker",
+        onClick: handleClick,
+        ref: ref,
+        size: actionSize,
+        theme: theme,
+        type: type,
+        variant: variant,
+        children: children
+    });
+};
+DatePicker.ConfirmTrigger = function({ children = "Confirm", className, disabled, onClick, ref, size: sizeProp, theme = "solid", type = "button", variant = "primary", ...props }) {
+    const { canConfirm, size, styles, submitDraft } = useDatePickerContext();
+    const actionSize = sizeProp ?? ("lg" === size ? "md" : "sm");
+    const handleClick = (event)=>{
+        onClick?.(event);
+        if (!event.defaultPrevented) submitDraft();
+    };
+    return /*#__PURE__*/ jsx(Button, {
+        ...props,
+        className: styles.confirmTrigger({
+            className
+        }),
+        "data-part": "confirm-trigger",
+        "data-scope": "date-picker",
+        disabled: disabled || !canConfirm,
+        onClick: handleClick,
+        ref: ref,
+        size: actionSize,
+        theme: theme,
+        type: type,
+        variant: variant,
+        children: children
+    });
+};
+DatePicker.Root = DatePicker;
+DatePicker.displayName = "DatePicker";
+export { DatePicker };