@ultraviolet/ui 3.11.1 → 3.12.0

package/dist/components/TimeInput/index.js

@@ -1,312 +1,320 @@
 'use client';
-import { __name } from "../../_virtual/_rolldown/runtime.js";
-import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
-import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
-import { Button } from "../Button/index.js";
-import { Label } from "../Label/index.js";
-import { DEFAULT_DATE, DEFAULT_PLACEHOLDER, TIME_KEYS } from "./constants.js";
-import { canConcat, format, getLastTypedChar, getValueByType, isAOrP, isCompleteHour, isNumber, setValueByType } from "./helpers.js";
-import { timeSeparator, timeinput, timeinputWrapper } from "./styles.css.js";
+import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2, init_objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.115.0/helpers/objectSpread2.js";
+import { Stack, init_Stack } from "../Stack/index.js";
+import { Text, init_Text } from "../Text/index.js";
+import { Button, init_Button } from "../Button/index.js";
+import { Label, init_Label } from "../Label/index.js";
+import { DEFAULT_DATE, DEFAULT_PLACEHOLDER, TIME_KEYS, init_constants } from "./constants.js";
+import { canConcat, format, getLastTypedChar, getValueByType, init_helpers, isAOrP, isCompleteHour, isNumber, setValueByType } from "./helpers.js";
+import { init_styles_css, timeInputStyle } from "./styles.css.js";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
 import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 
 //#region src/components/TimeInput/index.tsx
-/**
-* A time input component that allows users to type a time in a 24 or 12-hour format.
-* @experimental This component is experimental and may be subject to breaking changes in the future.
-*/
-const TimeInput = ({ label, timeFormat = 24, value, clearable, required, labelDescription, helper, size = "large", disabled = false, readOnly = false, error = false, onChange, onBlur, onFocus, className, id, autoFocus, style, "data-testid": dataTestId, placeholder = DEFAULT_PLACEHOLDER, "aria-label": ariaLabel }) => {
-	var _placeholder$period;
-	const localId = useId();
-	const defaultPeriod = useMemo(() => {
-		if (value) return value.getHours() >= 12 ? "pm" : "am";
-	}, [value]);
-	const [time, setTime] = useState(value);
-	const [period, setPeriod] = useState(defaultPeriod);
-	const [filled, setFilled] = useState(value ? {
-		h: true,
-		m: true,
-		s: true
-	} : {
-		h: false,
-		m: false,
-		s: false
-	});
-	const refHours = useRef(null);
-	const refSeconds = useRef(null);
-	const refMinutes = useRef(null);
-	const refPeriod = useRef(null);
-	useEffect(() => {
-		if (value) {
-			setTime(value);
-			if (value.getTime() !== (time === null || time === void 0 ? void 0 : time.getTime())) setFilled({
-				h: true,
-				m: true,
-				s: true
-			});
-		}
-	}, [value]);
-	const handleChangePeriod = (key) => {
-		if (!time) setPeriod(`${key}m`);
-		else if (key.toLowerCase() === "a") {
-			if (time.getHours() >= 12) {
-				const newTime = new Date(time);
-				newTime.setHours(newTime.getHours() - 12);
-				setTime(newTime);
-				onChange === null || onChange === void 0 || onChange(newTime);
+var TimeInput;
+var init_TimeInput = __esmMin(() => {
+	init_Button();
+	init_Label();
+	init_Stack();
+	init_Text();
+	init_constants();
+	init_helpers();
+	init_styles_css();
+	init_objectSpread2();
+	TimeInput = ({ label, timeFormat = 24, value, clearable, required, labelDescription, helper, size = "large", disabled = false, readOnly = false, error = false, onChange, onBlur, onFocus, className, id, autoFocus, style, "data-testid": dataTestId, placeholder = DEFAULT_PLACEHOLDER, "aria-label": ariaLabel }) => {
+		var _placeholder$period;
+		const localId = useId();
+		const defaultPeriod = useMemo(() => {
+			if (value) return value.getHours() >= 12 ? "pm" : "am";
+		}, [value]);
+		const [time, setTime] = useState(value);
+		const [period, setPeriod] = useState(defaultPeriod);
+		const [filled, setFilled] = useState(value ? {
+			h: true,
+			m: true,
+			s: true
+		} : {
+			h: false,
+			m: false,
+			s: false
+		});
+		const refHours = useRef(null);
+		const refSeconds = useRef(null);
+		const refMinutes = useRef(null);
+		const refPeriod = useRef(null);
+		useEffect(() => {
+			if (value) {
+				setTime(value);
+				if (value.getTime() !== (time === null || time === void 0 ? void 0 : time.getTime())) setFilled({
+					h: true,
+					m: true,
+					s: true
+				});
 			}
-			setPeriod("am");
-		} else {
-			if (time.getHours() < 12) {
-				const newTime = new Date(time);
-				newTime.setHours(newTime.getHours() + 12);
-				setTime(newTime);
-				onChange === null || onChange === void 0 || onChange(newTime);
+		}, [value]);
+		const handleChangePeriod = (key) => {
+			if (!time) setPeriod(`${key}m`);
+			else if (key.toLowerCase() === "a") {
+				if (time.getHours() >= 12) {
+					const newTime = new Date(time);
+					newTime.setHours(newTime.getHours() - 12);
+					setTime(newTime);
+					onChange === null || onChange === void 0 || onChange(newTime);
+				}
+				setPeriod("am");
+			} else {
+				if (time.getHours() < 12) {
+					const newTime = new Date(time);
+					newTime.setHours(newTime.getHours() + 12);
+					setTime(newTime);
+					onChange === null || onChange === void 0 || onChange(newTime);
+				}
+				setPeriod("pm");
 			}
-			setPeriod("pm");
-		}
-	};
-	const handleChange = (type, key) => {
-		const newTime = time ? new Date(time) : DEFAULT_DATE;
-		const valueToChange = getValueByType(type, time);
-		if (canConcat(valueToChange, type, key, timeFormat)) setValueByType(type, newTime, valueToChange % 10 * 10 + key);
-		else setValueByType(type, newTime, key);
-		const newValue = getValueByType(type, newTime);
-		if (type === "s" && newTime && newValue >= 7 && timeFormat === 12) {
-			var _refPeriod$current;
-			(_refPeriod$current = refPeriod.current) === null || _refPeriod$current === void 0 || _refPeriod$current.focus();
-		} else if (type === "m" && newTime && newValue >= 6) {
-			var _refSeconds$current;
-			(_refSeconds$current = refSeconds.current) === null || _refSeconds$current === void 0 || _refSeconds$current.focus();
-		}
-		if (type === "h" && isCompleteHour(timeFormat, newValue)) {
-			var _refMinutes$current;
-			(_refMinutes$current = refMinutes.current) === null || _refMinutes$current === void 0 || _refMinutes$current.focus();
-		}
-		const newFilled = _objectSpread2(_objectSpread2({}, filled), {}, { [type]: true });
-		setTime(newTime);
-		onChange === null || onChange === void 0 || onChange(newTime);
-		setFilled(newFilled);
-	};
-	const handleIncrease = (type) => {
-		const newTime = time ? new Date(time) : DEFAULT_DATE;
-		const currentValue = getValueByType(type, newTime);
-		if (type === "h" && timeFormat === 24) setValueByType(type, newTime, currentValue === 23 ? 0 : currentValue + 1);
-		else if (type === "h" && timeFormat === 12) setValueByType(type, newTime, currentValue === 12 ? 1 : currentValue + 1);
-		else setValueByType(type, newTime, currentValue === 59 ? 0 : currentValue + 1);
-		const newFilled = _objectSpread2(_objectSpread2({}, filled), {}, { [type]: true });
-		setTime(newTime);
-		onChange === null || onChange === void 0 || onChange(newTime);
-		setFilled(newFilled);
-	};
-	const handleDecrease = (type) => {
-		const newTime = time ? new Date(time) : DEFAULT_DATE;
-		const currentValue = getValueByType(type, newTime);
-		if (type === "h" && timeFormat === 24) setValueByType(type, newTime, currentValue === 0 ? 23 : currentValue - 1);
-		else if (type === "h" && timeFormat === 12) setValueByType(type, newTime, currentValue === 1 ? 12 : currentValue - 1);
-		else setValueByType(type, newTime, currentValue === 0 ? 59 : currentValue - 1);
-		const newFilled = _objectSpread2(_objectSpread2({}, filled), {}, { [type]: true });
-		setTime(newTime);
-		onChange === null || onChange === void 0 || onChange(newTime);
-		setFilled(newFilled);
-	};
-	const handleNext = (type) => {
-		if (type === "h") {
-			var _refMinutes$current2;
-			(_refMinutes$current2 = refMinutes.current) === null || _refMinutes$current2 === void 0 || _refMinutes$current2.focus();
-		}
-		if (type === "m") {
-			var _refSeconds$current2;
-			(_refSeconds$current2 = refSeconds.current) === null || _refSeconds$current2 === void 0 || _refSeconds$current2.focus();
-		}
-		if (type === "s" && timeFormat === 12) {
-			var _refPeriod$current2;
-			(_refPeriod$current2 = refPeriod.current) === null || _refPeriod$current2 === void 0 || _refPeriod$current2.focus();
-		}
-	};
-	const handlePrevious = (type) => {
-		if (type === "m") {
-			var _refHours$current;
-			(_refHours$current = refHours.current) === null || _refHours$current === void 0 || _refHours$current.focus();
-		}
-		if (type === "s") {
-			var _refMinutes$current3;
-			(_refMinutes$current3 = refMinutes.current) === null || _refMinutes$current3 === void 0 || _refMinutes$current3.focus();
-		}
-	};
-	return /* @__PURE__ */ jsxs(Stack, {
-		className,
-		gap: .5,
-		style,
-		children: [
-			label || labelDescription ? /* @__PURE__ */ jsx(Label, {
-				htmlFor: id !== null && id !== void 0 ? id : localId,
-				labelDescription,
-				required,
-				size,
-				children: label
-			}) : null,
-			/* @__PURE__ */ jsxs(Stack, {
-				alignItems: "center",
-				"aria-label": ariaLabel,
-				"aria-required": required,
-				className: timeinputWrapper({
-					disabled,
-					error: !!error,
-					readOnly,
-					size
-				}),
-				"data-testid": dataTestId,
-				direction: "row",
-				id,
-				justifyContent: "space-between",
-				onBlur,
-				onClick: () => {
-					var _refHours$current2;
-					return (_refHours$current2 = refHours.current) === null || _refHours$current2 === void 0 ? void 0 : _refHours$current2.focus();
-				},
-				onFocus,
-				children: [/* @__PURE__ */ jsxs(Stack, {
+		};
+		const handleChange = (type, key) => {
+			const newTime = time ? new Date(time) : DEFAULT_DATE;
+			const valueToChange = getValueByType(type, time);
+			if (canConcat(valueToChange, type, key, timeFormat)) setValueByType(type, newTime, valueToChange % 10 * 10 + key);
+			else setValueByType(type, newTime, key);
+			const newValue = getValueByType(type, newTime);
+			if (type === "s" && newTime && newValue >= 7 && timeFormat === 12) {
+				var _refPeriod$current;
+				(_refPeriod$current = refPeriod.current) === null || _refPeriod$current === void 0 || _refPeriod$current.focus();
+			} else if (type === "m" && newTime && newValue >= 6) {
+				var _refSeconds$current;
+				(_refSeconds$current = refSeconds.current) === null || _refSeconds$current === void 0 || _refSeconds$current.focus();
+			}
+			if (type === "h" && isCompleteHour(timeFormat, newValue)) {
+				var _refMinutes$current;
+				(_refMinutes$current = refMinutes.current) === null || _refMinutes$current === void 0 || _refMinutes$current.focus();
+			}
+			const newFilled = _objectSpread2(_objectSpread2({}, filled), {}, { [type]: true });
+			setTime(newTime);
+			onChange === null || onChange === void 0 || onChange(newTime);
+			setFilled(newFilled);
+		};
+		const handleIncrease = (type) => {
+			const newTime = time ? new Date(time) : DEFAULT_DATE;
+			const currentValue = getValueByType(type, newTime);
+			if (type === "h" && timeFormat === 24) setValueByType(type, newTime, currentValue === 23 ? 0 : currentValue + 1);
+			else if (type === "h" && timeFormat === 12) setValueByType(type, newTime, currentValue === 12 ? 1 : currentValue + 1);
+			else setValueByType(type, newTime, currentValue === 59 ? 0 : currentValue + 1);
+			const newFilled = _objectSpread2(_objectSpread2({}, filled), {}, { [type]: true });
+			setTime(newTime);
+			onChange === null || onChange === void 0 || onChange(newTime);
+			setFilled(newFilled);
+		};
+		const handleDecrease = (type) => {
+			const newTime = time ? new Date(time) : DEFAULT_DATE;
+			const currentValue = getValueByType(type, newTime);
+			if (type === "h" && timeFormat === 24) setValueByType(type, newTime, currentValue === 0 ? 23 : currentValue - 1);
+			else if (type === "h" && timeFormat === 12) setValueByType(type, newTime, currentValue === 1 ? 12 : currentValue - 1);
+			else setValueByType(type, newTime, currentValue === 0 ? 59 : currentValue - 1);
+			const newFilled = _objectSpread2(_objectSpread2({}, filled), {}, { [type]: true });
+			setTime(newTime);
+			onChange === null || onChange === void 0 || onChange(newTime);
+			setFilled(newFilled);
+		};
+		const handleNext = (type) => {
+			if (type === "h") {
+				var _refMinutes$current2;
+				(_refMinutes$current2 = refMinutes.current) === null || _refMinutes$current2 === void 0 || _refMinutes$current2.focus();
+			}
+			if (type === "m") {
+				var _refSeconds$current2;
+				(_refSeconds$current2 = refSeconds.current) === null || _refSeconds$current2 === void 0 || _refSeconds$current2.focus();
+			}
+			if (type === "s" && timeFormat === 12) {
+				var _refPeriod$current2;
+				(_refPeriod$current2 = refPeriod.current) === null || _refPeriod$current2 === void 0 || _refPeriod$current2.focus();
+			}
+		};
+		const handlePrevious = (type) => {
+			if (type === "m") {
+				var _refHours$current;
+				(_refHours$current = refHours.current) === null || _refHours$current === void 0 || _refHours$current.focus();
+			}
+			if (type === "s") {
+				var _refMinutes$current3;
+				(_refMinutes$current3 = refMinutes.current) === null || _refMinutes$current3 === void 0 || _refMinutes$current3.focus();
+			}
+		};
+		return /* @__PURE__ */ jsxs(Stack, {
+			className,
+			gap: .5,
+			style,
+			children: [
+				label || labelDescription ? /* @__PURE__ */ jsx(Label, {
+					htmlFor: id !== null && id !== void 0 ? id : localId,
+					labelDescription,
+					required,
+					size,
+					children: label
+				}) : null,
+				/* @__PURE__ */ jsxs(Stack, {
+					alignItems: "center",
+					"aria-label": ariaLabel,
+					"aria-required": required,
+					className: timeInputStyle.wrapper({
+						disabled,
+						error: !!error,
+						readOnly,
+						size
+					}),
+					"data-testid": dataTestId,
 					direction: "row",
-					children: [TIME_KEYS.map((type) => {
-						const computedRef = () => {
-							if (type === "h") return refHours;
-							if (type === "m") return refMinutes;
-							return refSeconds;
-						};
-						const fullName = () => {
-							if (type === "h") return "hours";
-							if (type === "m") return "minutes";
-							return "seconds";
-						};
-						const computeMaxValue = () => {
-							if (type === "h" && timeFormat === 12) return 12;
-							if (type === "h" && timeFormat === 24) return 23;
-							return 59;
-						};
-						return /* @__PURE__ */ jsxs(Stack, {
-							direction: "row",
-							children: [/* @__PURE__ */ jsx("input", {
-								"aria-label": ariaLabel,
-								"aria-valuemax": computeMaxValue(),
-								"aria-valuemin": type === "h" && timeFormat === 12 ? 1 : 0,
-								"aria-valuenow": filled[type] ? Number.parseInt(format(getValueByType(type, time), type, timeFormat), 10) : void 0,
-								autoComplete: "off",
-								autoFocus: autoFocus && type === "h",
-								className: timeinput(),
-								"data-size": size,
-								"data-testid": `${fullName()}-input`,
-								disabled,
-								onChange: (event) => {
-									if (!(readOnly || disabled)) {
-										const key = getLastTypedChar(event.target.value, getValueByType(type, time));
-										if (isNumber(key)) handleChange(type, Number.parseInt(key, 10));
-									}
-								},
-								onClick: (event) => {
-									event.stopPropagation();
-								},
-								onKeyDown: (event) => {
-									if (!(readOnly || disabled)) {
-										if (event.key === "ArrowUp") {
-											event.preventDefault();
-											handleIncrease(type);
-										} else if (event.key === "ArrowDown") {
-											event.preventDefault();
-											handleDecrease(type);
-										} else if (event.key === "ArrowLeft") {
-											event.preventDefault();
-											handlePrevious(type);
-										} else if (event.key === "ArrowRight") {
-											event.preventDefault();
-											handleNext(type);
+					id,
+					justifyContent: "space-between",
+					onBlur,
+					onClick: () => {
+						var _refHours$current2;
+						return (_refHours$current2 = refHours.current) === null || _refHours$current2 === void 0 ? void 0 : _refHours$current2.focus();
+					},
+					onFocus,
+					children: [/* @__PURE__ */ jsxs(Stack, {
+						direction: "row",
+						children: [TIME_KEYS.map((type) => {
+							const computedRef = () => {
+								if (type === "h") return refHours;
+								if (type === "m") return refMinutes;
+								return refSeconds;
+							};
+							const fullName = () => {
+								if (type === "h") return "hours";
+								if (type === "m") return "minutes";
+								return "seconds";
+							};
+							const computeMaxValue = () => {
+								if (type === "h" && timeFormat === 12) return 12;
+								if (type === "h" && timeFormat === 24) return 23;
+								return 59;
+							};
+							return /* @__PURE__ */ jsxs(Stack, {
+								direction: "row",
+								children: [/* @__PURE__ */ jsx("input", {
+									"aria-label": ariaLabel,
+									"aria-valuemax": computeMaxValue(),
+									"aria-valuemin": type === "h" && timeFormat === 12 ? 1 : 0,
+									"aria-valuenow": filled[type] ? Number.parseInt(format(getValueByType(type, time), type, timeFormat), 10) : void 0,
+									autoComplete: "off",
+									autoFocus: autoFocus && type === "h",
+									className: timeInputStyle.timeinput(),
+									"data-size": size,
+									"data-testid": `${fullName()}-input`,
+									disabled,
+									onChange: (event) => {
+										if (!(readOnly || disabled)) {
+											const key = getLastTypedChar(event.target.value, getValueByType(type, time));
+											if (isNumber(key)) handleChange(type, Number.parseInt(key, 10));
 										}
+									},
+									onClick: (event) => {
+										event.stopPropagation();
+									},
+									onKeyDown: (event) => {
+										if (!(readOnly || disabled)) {
+											if (event.key === "ArrowUp") {
+												event.preventDefault();
+												handleIncrease(type);
+											} else if (event.key === "ArrowDown") {
+												event.preventDefault();
+												handleDecrease(type);
+											} else if (event.key === "ArrowLeft") {
+												event.preventDefault();
+												handlePrevious(type);
+											} else if (event.key === "ArrowRight") {
+												event.preventDefault();
+												handleNext(type);
+											}
+										}
+									},
+									placeholder: placeholder[type],
+									readOnly,
+									ref: computedRef(),
+									role: "spinbutton",
+									value: filled[type] ? format(getValueByType(type, time), type, timeFormat) : ""
+								}), type === "s" ? null : /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									className: timeInputStyle.timeSeparator,
+									prominence: "default",
+									sentiment: "neutral",
+									variant: "body",
+									children: ":"
+								})]
+							}, type);
+						}), timeFormat === 12 ? /* @__PURE__ */ jsx("input", {
+							"aria-label": ariaLabel,
+							"aria-valuemax": 12,
+							"aria-valuemin": 0,
+							"aria-valuenow": period === "am" ? 0 : 12,
+							"aria-valuetext": period,
+							autoComplete: "off",
+							className: timeInputStyle.timeinput({ period: true }),
+							"data-size": size,
+							"data-testid": "am-pm-input",
+							disabled,
+							onChange: (event) => {
+								if (!(readOnly || disabled)) {
+									const key = event.target.value.slice(-1);
+									if (isAOrP(key)) handleChangePeriod(key);
+								}
+							},
+							onClick: (event) => event.stopPropagation(),
+							onKeyDown: (event) => {
+								if (!(readOnly || disabled)) {
+									if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+										event.preventDefault();
+										handleChangePeriod(period === "am" ? "p" : "a");
+									} else if (event.key === "ArrowLeft") {
+										var _refSeconds$current3;
+										event.preventDefault();
+										(_refSeconds$current3 = refSeconds.current) === null || _refSeconds$current3 === void 0 || _refSeconds$current3.focus();
 									}
-								},
-								placeholder: placeholder[type],
-								readOnly,
-								ref: computedRef(),
-								role: "spinbutton",
-								value: filled[type] ? format(getValueByType(type, time), type, timeFormat) : ""
-							}), type === "s" ? null : /* @__PURE__ */ jsx(Text, {
-								as: "span",
-								className: timeSeparator,
-								prominence: "default",
-								sentiment: "neutral",
-								variant: "body",
-								children: ":"
-							})]
-						}, type);
-					}), timeFormat === 12 ? /* @__PURE__ */ jsx("input", {
-						"aria-label": ariaLabel,
-						"aria-valuemax": 12,
-						"aria-valuemin": 0,
-						"aria-valuenow": period === "am" ? 0 : 12,
-						"aria-valuetext": period,
-						autoComplete: "off",
-						className: timeinput({ period: true }),
-						"data-size": size,
-						"data-testid": "am-pm-input",
-						disabled,
-						onChange: (event) => {
-							if (!(readOnly || disabled)) {
-								const key = event.target.value.slice(-1);
-								if (isAOrP(key)) handleChangePeriod(key);
-							}
-						},
-						onClick: (event) => event.stopPropagation(),
-						onKeyDown: (event) => {
-							if (!(readOnly || disabled)) {
-								if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-									event.preventDefault();
-									handleChangePeriod(period === "am" ? "p" : "a");
-								} else if (event.key === "ArrowLeft") {
-									var _refSeconds$current3;
-									event.preventDefault();
-									(_refSeconds$current3 = refSeconds.current) === null || _refSeconds$current3 === void 0 || _refSeconds$current3.focus();
 								}
-							}
-						},
-						placeholder: (_placeholder$period = placeholder.period) !== null && _placeholder$period !== void 0 ? _placeholder$period : "AM",
-						readOnly,
-						ref: refPeriod,
-						role: "spinbutton",
-						value: period === null || period === void 0 ? void 0 : period.toUpperCase()
-					}) : null]
-				}), error || clearable ? /* @__PURE__ */ jsxs(Stack, {
-					alignItems: "center",
-					direction: "row",
-					gap: "1",
-					children: [error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null, clearable ? /* @__PURE__ */ jsx(Button, {
-						"aria-label": "clear value",
-						"data-testid": "clear",
-						disabled: disabled || readOnly,
-						onClick: (event) => {
-							event.stopPropagation();
-							setTime(void 0);
-							onChange === null || onChange === void 0 || onChange(void 0);
-						},
-						sentiment: "neutral",
-						size: "small",
-						variant: "ghost",
-						children: /* @__PURE__ */ jsx(CloseIcon, {})
+							},
+							placeholder: (_placeholder$period = placeholder.period) !== null && _placeholder$period !== void 0 ? _placeholder$period : "AM",
+							readOnly,
+							ref: refPeriod,
+							role: "spinbutton",
+							value: period === null || period === void 0 ? void 0 : period.toUpperCase()
+						}) : null]
+					}), error || clearable ? /* @__PURE__ */ jsxs(Stack, {
+						alignItems: "center",
+						direction: "row",
+						gap: "1",
+						children: [error ? /* @__PURE__ */ jsx(AlertCircleIcon, { sentiment: "danger" }) : null, clearable ? /* @__PURE__ */ jsx(Button, {
+							"aria-label": "clear value",
+							"data-testid": "clear",
+							disabled: disabled || readOnly,
+							onClick: (event) => {
+								event.stopPropagation();
+								setTime(void 0);
+								onChange === null || onChange === void 0 || onChange(void 0);
+							},
+							sentiment: "neutral",
+							size: "small",
+							variant: "ghost",
+							children: /* @__PURE__ */ jsx(CloseIcon, {})
+						}) : null]
 					}) : null]
-				}) : null]
-			}),
-			helper || error ? /* @__PURE__ */ jsx(Text, {
-				as: "p",
-				disabled,
-				prominence: error ? "default" : "weak",
-				sentiment: error ? "danger" : "neutral",
-				variant: "caption",
-				children: error || helper
-			}) : null
-		]
-	});
-};
+				}),
+				helper || error ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					disabled,
+					prominence: error ? "default" : "weak",
+					sentiment: error ? "danger" : "neutral",
+					variant: "caption",
+					children: error || helper
+				}) : null
+			]
+		});
+	};
+});
 
 //#endregion
-export { TimeInput };
+init_TimeInput();
+export { TimeInput, init_TimeInput };