@tensor_1/react 2.34.0 → 2.36.0

package/dist/components/DateFieldParts.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { addCalendarDays, addCalendarMonths, buildMonthGrid, isDateUnavailable, startOfMonth } from "../calendar-model.js";
+import { ChevronLeftIcon, ChevronRightIcon } from "../icons/components.js";
+const localDateKey = (now = /* @__PURE__ */ new Date()) => `${now.getFullYear().toString().padStart(4, "0")}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")}`;
+const utc = (date) => /* @__PURE__ */ new Date(`${date}T00:00:00Z`);
+const monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(utc(date));
+const fullDateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(utc(date));
+const weekdayNames = (locale, weekStartsOn = 1) => {
+  const fmt = new Intl.DateTimeFormat(locale, { weekday: "short", timeZone: "UTC" });
+  return Array.from({ length: 7 }, (_, i) => fmt.format(new Date(Date.UTC(2024, 0, 7 + weekStartsOn + i))));
+};
+const isOpen = (el) => {
+  try {
+    return !!el?.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+function useFieldPopover(popoverId, restoreFocus, onOpenChange) {
+  const [open, setOpen] = useState(false);
+  const pointerWasOpen = useRef(null);
+  const restoreRef = useRef(restoreFocus);
+  restoreRef.current = restoreFocus;
+  const onOpenChangeRef = useRef(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  const skipRestore = useRef(false);
+  const popoverEl = () => typeof document === "undefined" ? null : document.getElementById(popoverId);
+  useEffect(() => {
+    const el = popoverEl();
+    if (!el) return;
+    const onToggle = (event) => {
+      const { newState } = event;
+      const nowOpen = newState ? newState === "open" : isOpen(el);
+      setOpen(nowOpen);
+      onOpenChangeRef.current?.(nowOpen);
+      if (nowOpen) return;
+      const active = el.ownerDocument.activeElement;
+      if (skipRestore.current) skipRestore.current = false;
+      else if (el.contains(active) || active === el.ownerDocument.body) restoreRef.current();
+    };
+    el.addEventListener("toggle", onToggle);
+    return () => el.removeEventListener("toggle", onToggle);
+  }, [popoverId]);
+  const show = () => {
+    const el = popoverEl();
+    if (el && !isOpen(el)) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+  };
+  const hide = (restore = true) => {
+    const el = popoverEl();
+    if (!el || !isOpen(el)) return;
+    skipRestore.current = !restore;
+    try {
+      el.hidePopover();
+    } catch {
+      skipRestore.current = false;
+    }
+  };
+  return {
+    open,
+    show,
+    hide,
+    /** Spread on the button that opens the calendar. */
+    triggerProps: {
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": popoverId,
+      // A pointer press outside an open auto popover already closed it (light dismiss); the
+      // click that follows must not open it again.
+      onPointerDown: () => {
+        pointerWasOpen.current = isOpen(popoverEl());
+      },
+      // A press that never became a click (dragged off, cancelled) must not decide the next one.
+      onPointerLeave: () => {
+        pointerWasOpen.current = null;
+      },
+      onPointerCancel: () => {
+        pointerWasOpen.current = null;
+      },
+      onClick: (event) => {
+        if (event.defaultPrevented) return;
+        const was = pointerWasOpen.current;
+        pointerWasOpen.current = null;
+        if (was === true) {
+          hide();
+          return;
+        }
+        if (isOpen(popoverEl())) hide();
+        else show();
+      }
+    }
+  };
+}
+function MonthCalendar({
+  value,
+  onSelect,
+  initialDate,
+  min,
+  max,
+  isUnavailable,
+  locale,
+  weekStartsOn = 1,
+  today,
+  labels,
+  autoFocus = false
+}) {
+  const clamp = (date) => min && date < min ? min : max && date > max ? max : date;
+  const [active, setActive] = useState(() => clamp(initialDate));
+  const gridRef = useRef(null);
+  const pendingFocus = useRef(autoFocus);
+  const month = startOfMonth(active);
+  const days = useMemo(() => buildMonthGrid(month, weekStartsOn).filter((day) => day.inMonth), [month, weekStartsOn]);
+  const blanks = (utc(month).getUTCDay() - weekStartsOn + 7) % 7;
+  const weekdays = useMemo(() => weekdayNames(locale, weekStartsOn), [locale, weekStartsOn]);
+  useEffect(() => {
+    if (!pendingFocus.current) return;
+    pendingFocus.current = false;
+    gridRef.current?.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
+  }, [active]);
+  const focusDate = (date) => {
+    pendingFocus.current = true;
+    setActive(clamp(date));
+  };
+  const showMonth = (amount) => setActive((current) => clamp(addCalendarMonths(current, amount)));
+  const unavailable = (date) => isDateUnavailable(date, { min, max, isDisabled: isUnavailable });
+  const onDayKeyDown = (event, date) => {
+    const rtl = typeof getComputedStyle === "function" && getComputedStyle(event.currentTarget).direction === "rtl";
+    const offsets = { ArrowLeft: rtl ? 1 : -1, ArrowRight: rtl ? -1 : 1, ArrowUp: -7, ArrowDown: 7 };
+    if (event.key in offsets) {
+      event.preventDefault();
+      focusDate(addCalendarDays(date, offsets[event.key]));
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      const index = (utc(date).getUTCDay() - weekStartsOn + 7) % 7;
+      focusDate(addCalendarDays(date, event.key === "Home" ? -index : 6 - index));
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      focusDate(addCalendarMonths(date, (event.key === "PageUp" ? -1 : 1) * (event.shiftKey ? 12 : 1)));
+    }
+  };
+  const atMin = !!min && month <= startOfMonth(min);
+  const atMax = !!max && month >= startOfMonth(max);
+  return /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__calendar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__nav", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-date-picker__nav-btn", "aria-label": labels.previousMonth, "aria-disabled": atMin || void 0, onClick: () => {
+        if (!atMin) showMonth(-1);
+      }, children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: "sm" }) }),
+      /* @__PURE__ */ jsx("span", { className: "uix-date-picker__month", "aria-live": "polite", children: monthLabel(month, locale) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "uix-date-picker__nav-btn", "aria-label": labels.nextMonth, "aria-disabled": atMax || void 0, onClick: () => {
+        if (!atMax) showMonth(1);
+      }, children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: "sm" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: weekdays.map((day, index) => /* @__PURE__ */ jsx("span", { children: day }, index)) }),
+    /* @__PURE__ */ jsxs("div", { ref: gridRef, className: "uix-date-range-picker__grid uix-date-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
+      Array.from({ length: blanks }, (_, index) => /* @__PURE__ */ jsx("span", { "aria-hidden": "true" }, `blank-${index}`)),
+      days.map((day) => {
+        const off = unavailable(day.date);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-date": day.date,
+            "data-selected": day.date === value || void 0,
+            "aria-pressed": day.date === value,
+            "aria-label": fullDateLabel(day.date, locale),
+            "aria-current": day.date === today ? "date" : void 0,
+            "aria-disabled": off || void 0,
+            tabIndex: active === day.date ? 0 : -1,
+            onFocus: () => setActive(day.date),
+            onKeyDown: (event) => onDayKeyDown(event, day.date),
+            onClick: () => {
+              if (!off) onSelect(day.date);
+            },
+            children: day.day
+          },
+          day.date
+        );
+      })
+    ] })
+  ] });
+}
+export {
+  MonthCalendar,
+  fullDateLabel,
+  localDateKey,
+  monthLabel,
+  useFieldPopover,
+  weekdayNames
+};

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,129 @@
+import * as react from 'react';
+import { AriaAttributes, CSSProperties } from 'react';
+import { CalendarWeekday } from '../calendar-model.js';
+import { Placement } from '../overlay-position.js';
+
+/** Every word `DatePicker` renders or announces. */
+interface DatePickerLabels {
+    /** The calendar button's name while no date is set. */
+    open: string;
+    /** The calendar button's name with a date set; `{date}` is the date in full. */
+    openSelected: string;
+    /** The calendar popover's name. */
+    calendar: string;
+    previousMonth: string;
+    nextMonth: string;
+    /**
+     * Shown when the typed text is not a date; `{pattern}` is the expected shape: the
+     * `placeholder` when one is given, else the locale's (`DD.MM.YYYY`).
+     */
+    invalidDate: string;
+    /** The same, when the shape is not known: a custom `parseDate` and no `placeholder`. */
+    notADate: string;
+    /** Shown when the typed date is outside `min` / `max` or refused by `isUnavailable`. */
+    unavailable: string;
+}
+declare const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels;
+/** Why typed text was refused: not a date, or a date that cannot be chosen. */
+type DateInputProblem = 'format' | 'unavailable';
+interface DatePickerProps {
+    /** The date as `YYYY-MM-DD`, or `null` for none. */
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    /** First and last selectable day (`YYYY-MM-DD`). The calendar does not go past them. */
+    min?: string;
+    max?: string;
+    /** Days inside `min` / `max` that cannot be chosen (weekends, a freeze, days already taken). */
+    isUnavailable?: (date: string) => boolean;
+    /**
+     * How the field writes a date. Default: the locale's numeric date (22.11.2026, 11/22/2026).
+     * Pass `parseDate` with it when your format is not three numbers, so typing still works.
+     */
+    formatDate?: (date: string) => string;
+    /** Read typed text into `YYYY-MM-DD`, or `null` when it is not a date. Default: ISO or the locale's order. */
+    parseDate?: (text: string) => string | null;
+    locale?: string;
+    /** First column of the calendar, in `Date.getUTCDay()` numbering (0 = Sunday). Default 1, Monday. */
+    weekStartsOn?: CalendarWeekday;
+    /**
+     * The ISO date that gets the today ring. Defaults to the viewer's local date; pass it when
+     * the product works in another zone, or `null` for no today marker.
+     */
+    today?: string | null;
+    /** Default: the locale's date shape, e.g. `DD.MM.YYYY`. */
+    placeholder?: string;
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    /** Submits the ISO value under this name (a hidden input), whatever the field shows. */
+    name?: string;
+    /** Lands on the text input, so a `<label htmlFor>` or `<Field>` names it. */
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-invalid'?: AriaAttributes['aria-invalid'];
+    'aria-required'?: AriaAttributes['aria-required'];
+    /** Where the calendar opens. Default `'bottom-start'`; it flips and shifts to stay on screen. */
+    placement?: Placement;
+    /** Told when typed text is refused, and `null` once the field is fine again. */
+    onInputProblem?: (problem: DateInputProblem | null) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** Translatable words; English defaults in {@link DEFAULT_DATE_PICKER_LABELS}. */
+    labels?: Partial<DatePickerLabels>;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * A single date as a form field (HAR-1383): a text input that shows the formatted date and
+ * accepts a typed one, and a calendar button that opens one month in a popover. The value is an
+ * ISO `YYYY-MM-DD` string. Typed text is read on Enter and when focus leaves the field: ISO or
+ * the locale's own order (`3.4.2026` in German, `4/3/2026` in en-US); text that is not a date,
+ * or a date that cannot be chosen, marks the field invalid, says why, and leaves `value` alone.
+ * ArrowDown in the field opens the calendar; Escape closes it and focus returns to the field.
+ */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
+/** The words `DateTimePicker` adds to the date field's own ({@link DatePickerLabels}). */
+interface DateTimePickerLabels extends DatePickerLabels {
+    /** Name of the date input when the picker has its own `aria-label`. */
+    date: string;
+    /** Name of the time input. */
+    time: string;
+    /** Name of the time input inside a labelled field; `{label}` is the field's label. */
+    timeOf: string;
+    /** Read after the time; `{zone}` is the zone shown beside it. */
+    timeZone: string;
+}
+declare const DEFAULT_DATE_TIME_PICKER_LABELS: DateTimePickerLabels;
+interface DateTimePickerProps extends Omit<DatePickerProps, 'value' | 'onValueChange' | 'labels' | 'min' | 'max'> {
+    /** A wall-clock date and time, `YYYY-MM-DDTHH:mm` (what `datetime-local` holds), or `null`. */
+    value: string | null;
+    onValueChange: (value: string | null) => void;
+    /** First and last selectable day; a date-time is read by its date. */
+    min?: string;
+    max?: string;
+    /**
+     * The IANA zone the wall clock is in (`Europe/Vienna`). Its short name on the chosen day is
+     * shown beside the time. Without it the viewer's own zone is shown. The value itself carries
+     * no zone: turning it into an instant is the product's job.
+     */
+    timeZone?: string;
+    /** Text shown instead of the zone's short name ("Vienna time", "UTC+2"); `null` shows none. */
+    timeZoneLabel?: string | null;
+    /** Minutes between time steps. Default 1. */
+    minuteStep?: number;
+    /** The time a date gets when it is chosen before any time. Default `'00:00'`. */
+    defaultTime?: string;
+    labels?: Partial<DateTimePickerLabels>;
+}
+/**
+ * A date and a time as one field (HAR-1383): the {@link DatePicker} and a time input, with the
+ * time zone the pair is in shown beside them. The value is `YYYY-MM-DDTHH:mm`, the shape
+ * `datetime-local` uses, so it replaces that input without changing what a form submits.
+ * Clearing the date clears the value; a time alone is not a value.
+ */
+declare const DateTimePicker: react.ForwardRefExoticComponent<DateTimePickerProps & react.RefAttributes<HTMLInputElement>>;
+
+export { DEFAULT_DATE_PICKER_LABELS, DEFAULT_DATE_TIME_PICKER_LABELS, type DateInputProblem, DatePicker, type DatePickerLabels, type DatePickerProps, DateTimePicker, type DateTimePickerLabels, type DateTimePickerProps };

package/dist/components/DatePicker.js

@@ -0,0 +1,340 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { isDateUnavailable } from "../calendar-model.js";
+import { cx } from "../cx.js";
+import { datePattern, formatDateKey, isValidDateKey, joinDateTime, parseDateInput, splitDateTime, timeZoneName } from "../date-field-model.js";
+import { fillLabel } from "../fill-label.js";
+import { CalendarIcon } from "../icons/components.js";
+import { useUixLabels } from "../labels-context.js";
+import { fullDateLabel, localDateKey, MonthCalendar, useFieldPopover } from "./DateFieldParts.js";
+import { Popover } from "./Popover.js";
+const DEFAULT_DATE_PICKER_LABELS = {
+  open: "Choose date",
+  openSelected: "Change date, {date}",
+  calendar: "Calendar",
+  previousMonth: "Show previous month",
+  nextMonth: "Show next month",
+  invalidDate: "Enter a date as {pattern}.",
+  notADate: "That is not a date.",
+  unavailable: "That date is not available."
+};
+const DatePicker = forwardRef(function DatePicker2({
+  value,
+  onValueChange,
+  min,
+  max,
+  isUnavailable,
+  formatDate,
+  parseDate,
+  locale,
+  weekStartsOn = 1,
+  today,
+  placeholder,
+  size = "md",
+  disabled,
+  readOnly,
+  required,
+  invalid,
+  name,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  placement = "bottom-start",
+  onInputProblem,
+  onOpenChange,
+  labels: labelOverrides,
+  className,
+  style
+}, forwardedRef) {
+  const uid = useId();
+  const id = idProp ?? `${uid}-input`;
+  const popoverId = `${uid}-calendar`;
+  const errorId = `${uid}-error`;
+  const labels = { ...DEFAULT_DATE_PICKER_LABELS, ...useUixLabels().datePicker, ...labelOverrides };
+  const anchorRef = useRef(null);
+  const inputRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  const format = (date) => formatDate?.(date) ?? formatDateKey(date, locale);
+  const [text, setText] = useState(() => value ? format(value) : "");
+  const [problem, setProblemState] = useState(null);
+  const reported = useRef(null);
+  const setProblem = (next) => {
+    if (next !== reported.current) {
+      reported.current = next;
+      onInputProblem?.(next);
+    }
+    setProblemState(next);
+  };
+  useEffect(() => {
+    setText(value ? format(value) : "");
+    setProblem(null);
+  }, [value, locale]);
+  const { open, show, hide, triggerProps } = useFieldPopover(popoverId, () => inputRef.current?.focus({ preventScroll: true }), onOpenChange);
+  const locked = !!disabled || !!readOnly;
+  const commit = () => {
+    const typed = text.trim();
+    if (!typed) {
+      setProblem(null);
+      if (text) setText("");
+      if (value !== null) onValueChange(null);
+      return true;
+    }
+    if (value && typed === format(value)) {
+      setProblem(null);
+      return true;
+    }
+    const parsed = parseDate ? parseDate(typed) : parseDateInput(typed, locale);
+    if (!parsed || !isValidDateKey(parsed)) {
+      setProblem("format");
+      return false;
+    }
+    if (isDateUnavailable(parsed, { min, max, isDisabled: isUnavailable })) {
+      setProblem("unavailable");
+      return false;
+    }
+    setProblem(null);
+    setText(format(parsed));
+    if (parsed !== value) onValueChange(parsed);
+    return true;
+  };
+  const onInputKeyDown = (event) => {
+    if (locked) return;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      show();
+    } else if (event.key === "Enter" && text.trim() !== (value ? format(value) : "")) {
+      event.preventDefault();
+      commit();
+    }
+  };
+  const choose = (date) => {
+    setProblem(null);
+    setText(format(date));
+    if (date !== value) onValueChange(date);
+    hide(false);
+    inputRef.current?.focus({ preventScroll: true });
+  };
+  const todayDate = today === void 0 ? localDateKey() : today;
+  const pattern = datePattern(locale);
+  const expected = placeholder ?? (parseDate ? null : pattern);
+  const describedBy = [ariaDescribedBy, problem ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+  const isInvalid = !!invalid || !!problem || ariaInvalid === true || ariaInvalid === "true";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: anchorRef,
+      className: cx("uix-date-picker", size === "sm" && "uix-date-picker--sm", className),
+      style,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !open) return;
+        event.stopPropagation();
+        event.preventDefault();
+        hide();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-date-picker__control", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              type: "text",
+              autoComplete: "off",
+              spellCheck: false,
+              className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-picker__input"),
+              value: text,
+              placeholder: placeholder ?? (formatDate ? void 0 : pattern),
+              disabled,
+              readOnly,
+              required,
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-describedby": describedBy,
+              "aria-invalid": isInvalid || void 0,
+              "aria-required": ariaRequired,
+              onChange: (event) => {
+                setText(event.target.value);
+                if (problem) setProblem(null);
+              },
+              onBlur: () => {
+                if (!locked) commit();
+              },
+              onKeyDown: onInputKeyDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uix-date-picker__toggle",
+              disabled: locked,
+              "aria-label": value && isValidDateKey(value) ? fillLabel(labels.openSelected, { date: fullDateLabel(value, locale) }) : labels.open,
+              ...triggerProps,
+              children: /* @__PURE__ */ jsx(CalendarIcon, { size: "sm" })
+            }
+          )
+        ] }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", disabled }),
+        problem && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error uix-date-picker__error", role: "alert", children: problem !== "format" ? labels.unavailable : expected ? fillLabel(labels.invalidDate, { pattern: expected }) : labels.notADate }),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            id: popoverId,
+            anchor: anchorRef,
+            placement,
+            className: "uix-date-picker__popover",
+            role: "dialog",
+            "aria-label": labels.calendar,
+            closeWhenAnchorHidden: true,
+            children: open && /* @__PURE__ */ jsx(
+              MonthCalendar,
+              {
+                value,
+                onSelect: choose,
+                initialDate: value && isValidDateKey(value) ? value : todayDate ?? localDateKey(),
+                min,
+                max,
+                isUnavailable,
+                locale,
+                weekStartsOn,
+                today: todayDate,
+                labels,
+                autoFocus: true
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+const DEFAULT_DATE_TIME_PICKER_LABELS = {
+  ...DEFAULT_DATE_PICKER_LABELS,
+  date: "Date",
+  time: "Time",
+  timeOf: "{label}, time",
+  timeZone: "Time zone: {zone}"
+};
+const DateTimePicker = forwardRef(function DateTimePicker2({
+  value,
+  onValueChange,
+  timeZone,
+  timeZoneLabel,
+  minuteStep = 1,
+  defaultTime = "00:00",
+  min,
+  max,
+  name,
+  id: idProp,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  labels: labelOverrides,
+  locale,
+  size = "md",
+  disabled,
+  readOnly,
+  required,
+  className,
+  style,
+  ...dateProps
+}, forwardedRef) {
+  const uid = useId();
+  const id = idProp ?? `${uid}-date`;
+  const zoneId = `${uid}-zone`;
+  const labels = { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...useUixLabels().dateTimePicker, ...labelOverrides };
+  const { date, time } = splitDateTime(value);
+  const dateRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => dateRef.current);
+  const [pendingTime, setPendingTime] = useState("");
+  const shownTime = date ? time : pendingTime;
+  const [fieldLabel, setFieldLabel] = useState("");
+  const [viewerZone, setViewerZone] = useState(null);
+  const grouped = !!ariaLabel || !!ariaLabelledBy;
+  useEffect(() => {
+    if (!grouped) setFieldLabel(dateRef.current?.labels?.[0]?.textContent?.trim() ?? "");
+    if (!timeZone) {
+      try {
+        setViewerZone(new Intl.DateTimeFormat().resolvedOptions().timeZone);
+      } catch {
+      }
+    }
+  }, [grouped, timeZone]);
+  const zone = timeZone ?? viewerZone;
+  const zoneText = timeZoneLabel === null ? null : timeZoneLabel ?? (zone ? timeZoneName(zone, date, locale) : null);
+  const timeName = grouped ? labels.time : fieldLabel ? fillLabel(labels.timeOf, { label: fieldLabel }) : labels.time;
+  const step = Math.max(1, Math.round(minuteStep)) * 60;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-date-time-picker", size === "sm" && "uix-date-time-picker--sm", className),
+      style,
+      role: "group",
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children: [
+        /* @__PURE__ */ jsx(
+          DatePicker,
+          {
+            ...dateProps,
+            ref: dateRef,
+            id,
+            value: date,
+            locale,
+            size,
+            min: min?.slice(0, 10),
+            max: max?.slice(0, 10),
+            disabled,
+            readOnly,
+            required,
+            "aria-label": grouped ? labels.date : void 0,
+            "aria-describedby": ariaDescribedBy,
+            labels,
+            onValueChange: (next) => {
+              if (!next) {
+                setPendingTime("");
+                onValueChange(null);
+                return;
+              }
+              onValueChange(joinDateTime(next, shownTime, defaultTime));
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "time",
+            className: cx("uix-input", size === "sm" && "uix-input--sm", "uix-date-time-picker__time"),
+            value: shownTime,
+            step,
+            disabled,
+            readOnly,
+            required: required && !!date,
+            "aria-label": timeName,
+            "aria-describedby": zoneText ? zoneId : void 0,
+            onChange: (event) => {
+              const next = event.target.value;
+              if (date) onValueChange(joinDateTime(date, next, defaultTime));
+              else setPendingTime(next);
+            }
+          }
+        ),
+        zoneText && /* @__PURE__ */ jsxs("span", { className: "uix-date-time-picker__zone", children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: zoneText }),
+          /* @__PURE__ */ jsx("span", { id: zoneId, className: "uix-visually-hidden", children: fillLabel(labels.timeZone, { zone: zoneText }) })
+        ] }),
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value ?? "", disabled })
+      ]
+    }
+  );
+});
+export {
+  DEFAULT_DATE_PICKER_LABELS,
+  DEFAULT_DATE_TIME_PICKER_LABELS,
+  DatePicker,
+  DateTimePicker
+};