@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/DateTimePicker/DateTimeDisplayInput.js

@@ -1,14 +1,14 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { getInputClasses as t } from "../utils/formFieldUtils.js";
-import { useUncontrolledState as n } from "../hooks/useUncontrolledState.js";
-import { Label as r } from "../Label.js";
-import { S as i, b as a, f as o } from "../DateTimeUtils-BJUAMuot.js";
-import { forwardRef as s, useCallback as c, useEffect as l, useId as u, useMemo as d, useRef as f } from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { getInputClasses } from "../utils/formFieldUtils.js";
+import { useUncontrolledState } from "../hooks/useUncontrolledState.js";
+import { Label } from "../Label.js";
+import { formatSelectPeriodLabel, getLocalizedPeriodLabels, getResolvedLocale } from "./DateTimeUtils.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/DateTimePicker/DateTimeDisplayInput.tsx
-var h = {
+const SEGMENT_CONFIGS = {
 	month: {
 		type: "month",
 		min: 1,
@@ -51,125 +51,206 @@ var h = {
 		max: 1,
 		length: 2
 	}
-}, g = (e, t) => e === 2 ? t % 4 == 0 && t % 100 != 0 || t % 400 == 0 ? 29 : 28 : [
-	4,
-	6,
-	9,
-	11
-].includes(e) ? 30 : 31, _ = ({ ariaLabel: t, config: n, disabled: r, onLeftFocus: i, onRightFocus: a, onValueChange: o, periodLabels: s, value: u }) => {
-	let m = f(null), h = f(""), g = f(!1), _ = d(() => {
-		switch (n.type) {
+};
+/**
+* Get max days for a given month/year
+*/
+const getMaxDaysInMonth = (month, year) => {
+	if (month === 2) return year % 4 === 0 && year % 100 !== 0 || year % 400 === 0 ? 29 : 28;
+	if ([
+		4,
+		6,
+		9,
+		11
+	].includes(month)) return 30;
+	return 31;
+};
+/**
+* SegmentInput - A single editable segment (month, day, year, hour, minute, period)
+*
+* Uses an uncontrolled input pattern to avoid React re-render issues during typing:
+* - Edit buffer stored in ref (not state) to prevent re-renders
+* - DOM value manipulated directly during typing
+* - Only syncs with React when value is committed (blur, tab, arrow keys)
+*/
+const SegmentInput = ({ ariaLabel, config, disabled, onLeftFocus, onRightFocus, onValueChange, periodLabels, value }) => {
+	const inputRef = useRef(null);
+	const editBufferRef = useRef("");
+	const isEditingRef = useRef(false);
+	const placeholderText = useMemo(() => {
+		switch (config.type) {
 			case "month": return "MM";
 			case "day": return "dd";
 			case "year": return "yyyy";
-			case "hour": return n.max === 23 ? "HH" : "hh";
+			case "hour": return config.max === 23 ? "HH" : "hh";
 			case "minute": return "mm";
-			case "period": return (s?.am ?? "am").toLowerCase();
+			case "period": return (periodLabels?.am ?? "am").toLowerCase();
 			default: return "––";
 		}
 	}, [
-		n.type,
-		n.max,
-		s
-	]), v = d(() => u === void 0 ? _ : n.type === "period" ? (u === 0 ? s?.am ?? "am" : s?.pm ?? "pm").toLowerCase() : u.toString().padStart(n.length, "0"), [
-		u,
-		n,
-		s,
-		_
+		config.type,
+		config.max,
+		periodLabels
 	]);
-	l(() => {
-		m.current && !g.current && (m.current.value = v);
-	}, [v]);
-	let y = c(() => {
-		let e = h.current;
-		if (e) {
-			let t = parseInt(e, 10);
-			isNaN(t) || (t = Math.max(n.min, Math.min(n.max, t)), o(t));
-		}
-		h.current = "", g.current = !1, m.current && (m.current.value = v);
+	const displayValue = useMemo(() => {
+		if (value === void 0) return placeholderText;
+		if (config.type === "period") return (value === 0 ? periodLabels?.am ?? "am" : periodLabels?.pm ?? "pm").toLowerCase();
+		return value.toString().padStart(config.length, "0");
 	}, [
-		n.min,
-		n.max,
-		v,
-		o
-	]), b = c((e) => {
-		if (!r) {
-			if (e.key === "Tab") {
-				y();
-				return;
-			}
-			if (e.key === "ArrowRight") {
-				e.preventDefault(), y(), a?.();
-				return;
-			}
-			if (e.key === "ArrowLeft") {
-				e.preventDefault(), y(), i?.();
-				return;
-			}
-			if (n.type === "period") {
-				e.preventDefault(), e.key === "ArrowUp" || e.key === "ArrowDown" ? o(+(u === 0)) : e.key.toLowerCase() === "a" ? o(0) : e.key.toLowerCase() === "p" && o(1);
-				return;
-			}
-			if (e.key === "ArrowUp") {
-				e.preventDefault(), h.current = "", g.current = !1, o(u === void 0 || u >= n.max ? n.min : u + 1);
-				return;
-			}
-			if (e.key === "ArrowDown") {
-				e.preventDefault(), h.current = "", g.current = !1, o(u === void 0 || u <= n.min ? n.max : u - 1);
-				return;
+		value,
+		config,
+		periodLabels,
+		placeholderText
+	]);
+	useEffect(() => {
+		if (inputRef.current && !isEditingRef.current) inputRef.current.value = displayValue;
+	}, [displayValue]);
+	const commitEdit = useCallback(() => {
+		const buffer = editBufferRef.current;
+		if (buffer) {
+			let numValue = parseInt(buffer, 10);
+			if (!isNaN(numValue)) {
+				numValue = Math.max(config.min, Math.min(config.max, numValue));
+				onValueChange(numValue);
 			}
-			if (e.key === "Home") {
-				e.preventDefault(), h.current = "", g.current = !1, o(n.min);
-				return;
+		}
+		editBufferRef.current = "";
+		isEditingRef.current = false;
+		if (inputRef.current) inputRef.current.value = displayValue;
+	}, [
+		config.min,
+		config.max,
+		displayValue,
+		onValueChange
+	]);
+	const handleKeyDown = useCallback((e) => {
+		if (disabled) return;
+		if (e.key === "Tab") {
+			commitEdit();
+			return;
+		}
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			commitEdit();
+			onRightFocus?.();
+			return;
+		}
+		if (e.key === "ArrowLeft") {
+			e.preventDefault();
+			commitEdit();
+			onLeftFocus?.();
+			return;
+		}
+		if (config.type === "period") {
+			e.preventDefault();
+			if (e.key === "ArrowUp" || e.key === "ArrowDown") onValueChange(value === 0 ? 1 : 0);
+			else if (e.key.toLowerCase() === "a") onValueChange(0);
+			else if (e.key.toLowerCase() === "p") onValueChange(1);
+			return;
+		}
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			editBufferRef.current = "";
+			isEditingRef.current = false;
+			onValueChange(value === void 0 ? config.min : value >= config.max ? config.min : value + 1);
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			editBufferRef.current = "";
+			isEditingRef.current = false;
+			onValueChange(value === void 0 ? config.max : value <= config.min ? config.max : value - 1);
+			return;
+		}
+		if (e.key === "Home") {
+			e.preventDefault();
+			editBufferRef.current = "";
+			isEditingRef.current = false;
+			onValueChange(config.min);
+			return;
+		}
+		if (e.key === "End") {
+			e.preventDefault();
+			editBufferRef.current = "";
+			isEditingRef.current = false;
+			onValueChange(config.max);
+			return;
+		}
+		if (e.key >= "0" && e.key <= "9") {
+			e.preventDefault();
+			const newBuffer = editBufferRef.current + e.key;
+			const numValue = parseInt(newBuffer, 10);
+			if (config.length === 2) if (newBuffer.length >= 2) {
+				const clamped = Math.max(config.min, Math.min(config.max, numValue));
+				editBufferRef.current = "";
+				isEditingRef.current = false;
+				onValueChange(clamped);
+				onRightFocus?.();
+			} else if (numValue * 10 > config.max) {
+				const clamped = Math.max(config.min, Math.min(config.max, numValue));
+				editBufferRef.current = "";
+				isEditingRef.current = false;
+				onValueChange(clamped);
+				onRightFocus?.();
+			} else {
+				editBufferRef.current = newBuffer;
+				isEditingRef.current = true;
+				if (inputRef.current) inputRef.current.value = newBuffer;
 			}
-			if (e.key === "End") {
-				e.preventDefault(), h.current = "", g.current = !1, o(n.max);
-				return;
+			else if (config.length === 4) if (newBuffer.length >= 4) {
+				const clamped = Math.max(config.min, Math.min(config.max, numValue));
+				editBufferRef.current = "";
+				isEditingRef.current = false;
+				onValueChange(clamped);
+				onRightFocus?.();
+			} else {
+				editBufferRef.current = newBuffer;
+				isEditingRef.current = true;
+				if (inputRef.current) inputRef.current.value = newBuffer;
 			}
-			if (e.key >= "0" && e.key <= "9") {
-				e.preventDefault();
-				let t = h.current + e.key, r = parseInt(t, 10);
-				if (n.length === 2) if (t.length >= 2) {
-					let e = Math.max(n.min, Math.min(n.max, r));
-					h.current = "", g.current = !1, o(e), a?.();
-				} else if (r * 10 > n.max) {
-					let e = Math.max(n.min, Math.min(n.max, r));
-					h.current = "", g.current = !1, o(e), a?.();
-				} else h.current = t, g.current = !0, m.current && (m.current.value = t);
-				else if (n.length === 4) if (t.length >= 4) {
-					let e = Math.max(n.min, Math.min(n.max, r));
-					h.current = "", g.current = !1, o(e), a?.();
-				} else h.current = t, g.current = !0, m.current && (m.current.value = t);
-				return;
+			return;
+		}
+		if (e.key === "Backspace") {
+			e.preventDefault();
+			if (editBufferRef.current) {
+				const newBuffer = editBufferRef.current.slice(0, -1);
+				editBufferRef.current = newBuffer;
+				isEditingRef.current = newBuffer.length > 0;
+				if (inputRef.current) inputRef.current.value = newBuffer || displayValue;
+			} else if (value !== void 0) {
+				editBufferRef.current = "";
+				isEditingRef.current = true;
+				onValueChange(config.min);
+				if (inputRef.current) inputRef.current.value = placeholderText;
 			}
-			if (e.key === "Backspace") if (e.preventDefault(), h.current) {
-				let e = h.current.slice(0, -1);
-				h.current = e, g.current = e.length > 0, m.current && (m.current.value = e || v);
-			} else u !== void 0 && (h.current = "", g.current = !0, o(n.min), m.current && (m.current.value = _));
 		}
 	}, [
-		r,
-		n,
-		u,
-		v,
-		_,
-		o,
-		i,
-		a,
-		y
-	]), x = c(() => {
-		h.current && y();
-	}, [y]), S = c(() => {
-		g.current || (h.current = "");
-		let e = m.current;
-		if (e) {
-			let t = e.value.length;
-			e.setSelectionRange(t, t);
+		disabled,
+		config,
+		value,
+		displayValue,
+		placeholderText,
+		onValueChange,
+		onLeftFocus,
+		onRightFocus,
+		commitEdit
+	]);
+	const handleBlur = useCallback(() => {
+		if (editBufferRef.current) commitEdit();
+	}, [commitEdit]);
+	const handleFocus = useCallback(() => {
+		if (!isEditingRef.current) editBufferRef.current = "";
+		const input = inputRef.current;
+		if (input) {
+			const len = input.value.length;
+			input.setSelectionRange(len, len);
 		}
-	}, []), C = c(() => {
-		m.current && (m.current.value = h.current || v);
-	}, [v]), w = c(() => {
-		switch (n.type) {
+	}, []);
+	const handleChange = useCallback(() => {
+		if (inputRef.current) inputRef.current.value = editBufferRef.current || displayValue;
+	}, [displayValue]);
+	const getSegmentStyle = useCallback(() => {
+		switch (config.type) {
 			case "year": return {
 				width: 46,
 				paddingLeft: 0
@@ -200,33 +281,65 @@ var h = {
 				paddingLeft: 0
 			};
 		}
-	}, [n.type]), T = d(() => w(), [w]), E = d(() => u === void 0, [u]);
-	return /* @__PURE__ */ p("input", {
-		"aria-label": t,
-		"aria-valuemax": n.max,
-		"aria-valuemin": n.min,
-		"aria-valuenow": u,
-		className: e("rounded inline-flex items-center justify-center text-center tabular-nums", "border-none bg-transparent outline-none", "focus:bg-bg-tertiary focus:text-text-primary focus:ring-1 focus:ring-accent", "hover:bg-bg-secondary", r && "cursor-not-allowed opacity-50", E && "text-text-placeholder text-sm"),
-		"data-segment": n.type,
-		defaultValue: v,
-		disabled: r,
+	}, [config.type]);
+	const segmentStyle = useMemo(() => getSegmentStyle(), [getSegmentStyle]);
+	const isPlaceholder = useMemo(() => value === void 0, [value]);
+	return /* @__PURE__ */ jsx("input", {
+		"aria-label": ariaLabel,
+		"aria-valuemax": config.max,
+		"aria-valuemin": config.min,
+		"aria-valuenow": value,
+		className: cn("rounded inline-flex items-center justify-center text-center tabular-nums", "border-none bg-transparent outline-none", "focus:bg-bg-tertiary focus:text-text-primary focus:ring-1 focus:ring-accent", "hover:bg-bg-secondary", disabled && "cursor-not-allowed opacity-50", isPlaceholder && "text-text-placeholder text-sm"),
+		"data-segment": config.type,
+		defaultValue: displayValue,
+		disabled,
 		inputMode: "numeric",
-		onBlur: x,
-		onChange: C,
-		onFocus: S,
-		onKeyDown: b,
-		ref: m,
+		onBlur: handleBlur,
+		onChange: handleChange,
+		onFocus: handleFocus,
+		onKeyDown: handleKeyDown,
+		ref: inputRef,
 		role: "spinbutton",
-		style: T,
-		tabIndex: r ? -1 : 0
+		style: segmentStyle,
+		tabIndex: disabled ? -1 : 0
 	});
-}, v = s(({ className: s, defaultValue: l, disabled: v, endIcon: y, hourFormat: b = "12", id: x, label: S, locale: C, onChange: w, showTime: T = !0, state: E = "default", value: D, "aria-labelledby": O, date: k, onDateChange: A, ...j }, M) => {
-	let N = u(), P = x ?? `datetime-display-input-${N}`, F = `${P}-label`, I = f(null), L = [S ? F : void 0, O].filter(Boolean).join(" ") || void 0, [R, z] = n({
-		defaultValue: l,
-		onChange: w ?? A,
-		value: D ?? k
-	}), B = d(() => i(C), [C]), V = d(() => a(B), [B]), H = d(() => {
-		if (!R) return {
+};
+/**
+* A segmented date/time input that mimics native date input behavior.
+* Each segment (month, day, year, hour, minute, period) is separately focusable.
+*
+* Supports both controlled and uncontrolled usage:
+* - Controlled: `<DateTimeDisplayInput value={date} onChange={setDate} />`
+* - Uncontrolled: `<DateTimeDisplayInput defaultValue={new Date()} />`
+*
+* @example
+* ```tsx
+* // Controlled usage
+* const [date, setDate] = useState<Date | undefined>(new Date())
+* <DateTimeDisplayInput value={date} onChange={setDate} />
+*
+* // Uncontrolled usage
+* <DateTimeDisplayInput defaultValue={new Date()} />
+*
+* // Legacy props (deprecated, use value/onChange instead)
+* <DateTimeDisplayInput date={date} onDateChange={setDate} />
+* ```
+*/
+const DateTimeDisplayInput = forwardRef(({ className, defaultValue, disabled, endIcon, hourFormat = "12", id, label, locale, onChange, showTime = true, state = "default", value, "aria-labelledby": ariaLabelledBy, date: legacyDate, onDateChange: legacyOnDateChange, ...props }, ref) => {
+	const generatedId = useId();
+	const displayInputId = id ?? `datetime-display-input-${generatedId}`;
+	const displayLabelId = `${displayInputId}-label`;
+	const containerRef = useRef(null);
+	const resolvedAriaLabelledBy = [label ? displayLabelId : void 0, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
+	const [date, setDate] = useUncontrolledState({
+		defaultValue,
+		onChange: onChange ?? legacyOnDateChange,
+		value: value ?? legacyDate
+	});
+	const resolvedLocale = useMemo(() => getResolvedLocale(locale), [locale]);
+	const periodLabels = useMemo(() => getLocalizedPeriodLabels(resolvedLocale), [resolvedLocale]);
+	const values = useMemo(() => {
+		if (!date) return {
 			month: void 0,
 			day: void 0,
 			year: void 0,
@@ -234,149 +347,183 @@ var h = {
 			minute: void 0,
 			period: void 0
 		};
-		let e = R.getHours(), t, n;
-		return b === "24" ? (t = e, n = 0) : (n = +(e >= 12), t = e % 12, t === 0 && (t = 12)), {
-			month: R.getMonth() + 1,
-			day: R.getDate(),
-			year: R.getFullYear(),
-			hour: t,
-			minute: R.getMinutes(),
-			period: n
+		const hours = date.getHours();
+		let displayHour;
+		let period;
+		if (hourFormat === "24") {
+			displayHour = hours;
+			period = 0;
+		} else {
+			period = hours >= 12 ? 1 : 0;
+			displayHour = hours % 12;
+			if (displayHour === 0) displayHour = 12;
+		}
+		return {
+			month: date.getMonth() + 1,
+			day: date.getDate(),
+			year: date.getFullYear(),
+			hour: displayHour,
+			minute: date.getMinutes(),
+			period
 		};
-	}, [R, b]), U = H.month !== void 0 && H.day !== void 0 && H.year !== void 0, W = c((e) => {
-		let t = {
-			...H,
-			...e
+	}, [date, hourFormat]);
+	const isDateComplete = values.month !== void 0 && values.day !== void 0 && values.year !== void 0;
+	const updateDate = useCallback((updates) => {
+		const newValues = {
+			...values,
+			...updates
 		};
-		if (t.month === void 0 && t.day === void 0 && t.year === void 0) {
-			z(void 0);
+		if (newValues.month === void 0 && newValues.day === void 0 && newValues.year === void 0) {
+			setDate(void 0);
 			return;
 		}
-		let n = /* @__PURE__ */ new Date(), r = (t.month ?? n.getMonth() + 1) - 1, i = t.day ?? n.getDate(), a = t.year ?? n.getFullYear(), o = g(r + 1, a), s = Math.min(i, o), c = H.month !== void 0 && H.day !== void 0 && H.year !== void 0, l = t.month !== void 0 && t.day !== void 0 && t.year !== void 0, u = !c && l, d;
-		if (b === "24") d = u ? 0 : t.hour ?? 0;
+		const now = /* @__PURE__ */ new Date();
+		const month = (newValues.month ?? now.getMonth() + 1) - 1;
+		const day = newValues.day ?? now.getDate();
+		const year = newValues.year ?? now.getFullYear();
+		const maxDays = getMaxDaysInMonth(month + 1, year);
+		const clampedDay = Math.min(day, maxDays);
+		const wasDateComplete = values.month !== void 0 && values.day !== void 0 && values.year !== void 0;
+		const isNowDateComplete = newValues.month !== void 0 && newValues.day !== void 0 && newValues.year !== void 0;
+		const dateJustCompleted = !wasDateComplete && isNowDateComplete;
+		let hours;
+		if (hourFormat === "24") hours = dateJustCompleted ? 0 : newValues.hour ?? 0;
 		else {
-			let e = u ? 12 : t.hour ?? 12, n = u ? 1 : t.period ?? 0, r = e, i = n;
-			d = r === 12 ? i === 0 ? 0 : 12 : i === 0 ? r : r + 12;
+			const defaultHour = dateJustCompleted ? 12 : newValues.hour ?? 12;
+			const defaultPeriod = dateJustCompleted ? 1 : newValues.period ?? 0;
+			const hour12 = defaultHour;
+			const period = defaultPeriod;
+			if (hour12 === 12) hours = period === 0 ? 0 : 12;
+			else hours = period === 0 ? hour12 : hour12 + 12;
 		}
-		let f = u ? 0 : t.minute ?? 0;
-		z(new Date(a, r, s, d, f, 0, 0));
+		const minutes = dateJustCompleted ? 0 : newValues.minute ?? 0;
+		setDate(new Date(year, month, clampedDay, hours, minutes, 0, 0));
 	}, [
-		H,
-		b,
-		z
-	]), G = d(() => {
-		let e = [
+		values,
+		hourFormat,
+		setDate
+	]);
+	const segments = useMemo(() => {
+		const dateSegments = [
 			{
 				key: "month",
-				config: h.month,
+				config: SEGMENT_CONFIGS.month,
 				ariaLabel: "Month"
 			},
 			{
 				key: "day",
-				config: h.day,
+				config: SEGMENT_CONFIGS.day,
 				ariaLabel: "Day"
 			},
 			{
 				key: "year",
-				config: h.year,
+				config: SEGMENT_CONFIGS.year,
 				ariaLabel: "Year"
 			}
 		];
-		if (!T) return e;
-		let t = b === "24" ? [{
+		if (!showTime) return dateSegments;
+		const timeSegments = hourFormat === "24" ? [{
 			key: "hour",
-			config: h.hour24,
+			config: SEGMENT_CONFIGS.hour24,
 			ariaLabel: "Hours"
 		}, {
 			key: "minute",
-			config: h.minute,
+			config: SEGMENT_CONFIGS.minute,
 			ariaLabel: "Minutes"
 		}] : [
 			{
 				key: "hour",
-				config: h.hour12,
+				config: SEGMENT_CONFIGS.hour12,
 				ariaLabel: "Hours"
 			},
 			{
 				key: "minute",
-				config: h.minute,
+				config: SEGMENT_CONFIGS.minute,
 				ariaLabel: "Minutes"
 			},
 			{
 				key: "period",
-				config: h.period,
-				ariaLabel: o(V, "Select {am} or {pm}")
+				config: SEGMENT_CONFIGS.period,
+				ariaLabel: formatSelectPeriodLabel(periodLabels, "Select {am} or {pm}")
 			}
 		];
-		return [...e, ...t];
+		return [...dateSegments, ...timeSegments];
 	}, [
-		T,
-		b,
-		V
-	]), K = c((e) => {
-		(I.current?.querySelectorAll("[role='spinbutton']")[e])?.focus();
-	}, []), q = t(E);
-	return /* @__PURE__ */ m("div", {
+		showTime,
+		hourFormat,
+		periodLabels
+	]);
+	const focusSegment = useCallback((index) => {
+		(containerRef.current?.querySelectorAll(`[role='spinbutton']`)[index])?.focus();
+	}, []);
+	const inputClasses = getInputClasses(state);
+	return /* @__PURE__ */ jsxs("div", {
 		className: "gap-1.5 flex flex-col",
-		children: [S && /* @__PURE__ */ p(r, {
+		children: [label && /* @__PURE__ */ jsx(Label, {
 			className: "text-sm font-medium text-text-primary",
-			id: F,
-			children: S
-		}), /* @__PURE__ */ m("div", {
-			className: e(q, "relative", (v ?? E === "disabled") && "cursor-not-allowed", s),
+			id: displayLabelId,
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn(inputClasses, "relative", (disabled ?? state === "disabled") && "cursor-not-allowed", className),
 			"data-slot": "datetime-display-input",
-			id: P,
-			ref: M ?? I,
-			"aria-labelledby": L,
-			...j,
-			children: [/* @__PURE__ */ p("div", {
+			id: displayInputId,
+			ref: ref ?? containerRef,
+			"aria-labelledby": resolvedAriaLabelledBy,
+			...props,
+			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex items-center",
-				ref: I,
-				children: G.map((e, t) => {
-					let n = [
+				ref: containerRef,
+				children: segments.map((segment, index) => {
+					const isDateSegment = [
 						"month",
 						"day",
 						"year"
-					].includes(e.key), r = [
+					].includes(segment.key);
+					const isTimeSegment = [
 						"hour",
 						"minute",
 						"period"
-					].includes(e.key), i = e.key === "year", a = e.key === "hour", o = v ?? (r && !U);
-					return /* @__PURE__ */ m("span", {
+					].includes(segment.key);
+					const isLastDateSegment = segment.key === "year";
+					const isFirstTimeSegment = segment.key === "hour";
+					const isSegmentDisabled = disabled ?? (isTimeSegment && !isDateComplete);
+					return /* @__PURE__ */ jsxs("span", {
 						className: "flex items-center",
 						children: [
-							a && /* @__PURE__ */ p("span", {
+							isFirstTimeSegment && /* @__PURE__ */ jsx("span", {
 								"aria-hidden": "true",
 								className: "text-text-secondary select-none",
 								children: ",\xA0"
 							}),
-							/* @__PURE__ */ p(_, {
-								ariaLabel: e.ariaLabel,
-								config: e.config,
-								disabled: o,
-								onLeftFocus: () => t > 0 && K(t - 1),
-								onRightFocus: () => t < G.length - 1 && K(t + 1),
-								onValueChange: (t) => W({ [e.key]: t }),
-								periodLabels: V,
-								value: H[e.key]
+							/* @__PURE__ */ jsx(SegmentInput, {
+								ariaLabel: segment.ariaLabel,
+								config: segment.config,
+								disabled: isSegmentDisabled,
+								onLeftFocus: () => index > 0 && focusSegment(index - 1),
+								onRightFocus: () => index < segments.length - 1 && focusSegment(index + 1),
+								onValueChange: (val) => updateDate({ [segment.key]: val }),
+								periodLabels,
+								value: values[segment.key]
 							}),
-							n && !i && /* @__PURE__ */ p("span", {
+							isDateSegment && !isLastDateSegment && /* @__PURE__ */ jsx("span", {
 								"aria-hidden": "true",
 								className: "text-text-secondary select-none",
 								children: "/"
 							}),
-							a && /* @__PURE__ */ p("span", {
+							isFirstTimeSegment && /* @__PURE__ */ jsx("span", {
 								"aria-hidden": "true",
 								className: "text-inherit select-none",
 								children: ":"
 							})
 						]
-					}, e.key);
+					}, segment.key);
 				})
-			}), y]
+			}), endIcon]
 		})]
 	});
 });
-v.displayName = "DateTimeDisplayInput";
+DateTimeDisplayInput.displayName = "DateTimeDisplayInput";
+
 //#endregion
-export { v as DateTimeDisplayInput };
+export { DateTimeDisplayInput };
+//# sourceMappingURL=DateTimeDisplayInput.js.map