@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/TimeInput/index.js

@@ -1,369 +1,312 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { AlertCircleIcon } from "@ultraviolet/icons/AlertCircleIcon";
-import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
-import { useId, useMemo, useState, useRef, useEffect } from "react";
-import { Button } from "../Button/index.js";
-import { Label } from "../Label/index.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
-import { TIME_KEYS, DEFAULT_PLACEHOLDER, DEFAULT_DATE } from "./constants.js";
-import { format, getValueByType, getLastTypedChar, isNumber, isAOrP, setValueByType, canConcat, isCompleteHour } from "./helpers.js";
-import { timeinputWrapper, timeinput, timeSeparator } from "./styles.css.js";
-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
-}) => {
-  const localId = useId();
-  const defaultPeriod = useMemo(() => {
-    if (value) {
-      return value.getHours() >= 12 ? "pm" : "am";
-    }
-    return void 0;
-  }, [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?.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?.(newTime);
-      }
-      setPeriod("am");
-    } else {
-      if (time.getHours() < 12) {
-        const newTime = new Date(time);
-        newTime.setHours(newTime.getHours() + 12);
-        setTime(newTime);
-        onChange?.(newTime);
-      }
-      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)) {
-      const newValue2 = valueToChange % 10 * 10 + key;
-      setValueByType(type, newTime, newValue2);
-    } else {
-      setValueByType(type, newTime, key);
-    }
-    const newValue = getValueByType(type, newTime);
-    if (type === "s" && newTime && newValue >= 7 && timeFormat === 12) {
-      refPeriod.current?.focus();
-    } else if (type === "m" && newTime && newValue >= 6) {
-      refSeconds.current?.focus();
-    }
-    if (type === "h" && isCompleteHour(timeFormat, newValue)) {
-      refMinutes.current?.focus();
-    }
-    const newFilled = {
-      ...filled,
-      [type]: true
-    };
-    setTime(newTime);
-    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 = {
-      ...filled,
-      [type]: true
-    };
-    setTime(newTime);
-    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 = {
-      ...filled,
-      [type]: true
-    };
-    setTime(newTime);
-    onChange?.(newTime);
-    setFilled(newFilled);
-  };
-  const handleNext = (type) => {
-    if (type === "h") {
-      refMinutes.current?.focus();
-    }
-    if (type === "m") {
-      refSeconds.current?.focus();
-    }
-    if (type === "s" && timeFormat === 12) {
-      refPeriod.current?.focus();
-    }
-  };
-  const handlePrevious = (type) => {
-    if (type === "m") {
-      refHours.current?.focus();
-    }
-    if (type === "s") {
-      refMinutes.current?.focus();
-    }
-  };
-  return /* @__PURE__ */ jsxs(Stack, { className, gap: 0.5, style, children: [
-    label || labelDescription ? /* @__PURE__ */ jsx(
-      Label,
-      {
-        htmlFor: 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: () => refHours.current?.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: 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: 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") {
-                      event.preventDefault();
-                      refSeconds.current?.focus();
-                    }
-                  }
-                },
-                placeholder: placeholder.period ?? "AM",
-                readOnly,
-                ref: refPeriod,
-                role: "spinbutton",
-                value: 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?.(void 0);
-                },
-                sentiment: "neutral",
-                size: "small",
-                variant: "ghost",
-                children: /* @__PURE__ */ jsx(CloseIcon, {})
-              }
-            ) : null
-          ] }) : null
-        ]
-      }
-    ),
-    helper || error ? /* @__PURE__ */ jsx(
-      Text,
-      {
-        as: "p",
-        disabled,
-        prominence: error ? "default" : "weak",
-        sentiment: error ? "danger" : "neutral",
-        variant: "caption",
-        children: error || helper
-      }
-    ) : null
-  ] });
-};
-export {
-  TimeInput
+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 { 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);
+			}
+			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");
+		}
+	};
+	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, {
+					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);
+										}
+									}
+								},
+								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, {})
+					}) : null]
+				}) : 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 };