@expcat/tigercat-react 2.1.2 → 2.1.4

package/dist/chunk-2MKDIXBP.mjs

@@ -0,0 +1,768 @@
+import {
+  useInputGroupContext
+} from "./chunk-2AVQQGL2.mjs";
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  renderOverlayPortal,
+  useAnchoredOverlay,
+  useFocusTrap
+} from "./chunk-OU2AV7DY.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/TimePicker.tsx
+import { forwardRef, useEffect as useEffect2, useImperativeHandle } from "react";
+import {
+  classNames as classNames2,
+  clockSolidIcon20PathD,
+  closeSolidIcon20PathD,
+  datePickerSheetScrimClasses,
+  getInputClearButtonClasses,
+  getInputPasswordToggleClasses,
+  getTimePickerRangeTabButtonClasses,
+  icon20ViewBox,
+  timePickerBaseClasses,
+  timePickerFooterButtonClasses,
+  timePickerFooterClasses,
+  timePickerPanelClasses,
+  timePickerRangeHeaderClasses
+} from "@expcat/tigercat-core";
+
+// src/components/TimePicker/render-panel.tsx
+import {
+  classNames,
+  getTimePickerItemClasses,
+  getTimePickerMobileSelectRowClasses,
+  timePickerColumnClasses,
+  timePickerColumnHeaderClasses,
+  timePickerColumnListClasses,
+  timePickerDesktopColumnsClasses,
+  timePickerMobileSelectClasses
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TimePickerDesktopColumns({
+  columns,
+  onSelect,
+  onKeyDown
+}) {
+  return /* @__PURE__ */ jsx("div", { className: timePickerDesktopColumnsClasses, children: columns.map((column) => {
+    const active = column.options.find((option) => option.selected) ?? column.options.find((option) => !option.disabled);
+    return /* @__PURE__ */ jsxs("div", { className: timePickerColumnClasses, children: [
+      /* @__PURE__ */ jsx("div", { id: column.headerId, className: timePickerColumnHeaderClasses, children: column.label }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: column.listId,
+          role: "listbox",
+          "aria-labelledby": column.headerId,
+          "aria-activedescendant": active ? `${column.listId}-${String(active.value)}` : void 0,
+          className: timePickerColumnListClasses,
+          onKeyDown,
+          children: column.options.map((option) => {
+            const selected = option.selected;
+            const tabIndex = option.disabled ? -1 : selected || option === active ? 0 : -1;
+            return /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: `${column.listId}-${String(option.value)}`,
+                role: "option",
+                tabIndex,
+                "aria-selected": selected,
+                "aria-disabled": option.disabled || void 0,
+                "aria-label": option.ariaLabel,
+                "data-tiger-timepicker-unit": column.unit,
+                className: getTimePickerItemClasses(selected, option.disabled),
+                onClick: () => {
+                  if (!option.disabled) onSelect(column.unit, option.value);
+                },
+                children: option.label
+              },
+              String(option.value)
+            );
+          })
+        }
+      )
+    ] }, column.unit);
+  }) });
+}
+function TimePickerMobileSelects({
+  columns,
+  onSelect
+}) {
+  const count = columns.length;
+  return /* @__PURE__ */ jsx("div", { className: getTimePickerMobileSelectRowClasses(count), children: columns.map((column) => {
+    const selected = column.options.find((option) => option.selected);
+    return /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: classNames(timePickerMobileSelectClasses),
+        "aria-label": column.label,
+        value: selected ? String(selected.value) : "",
+        onChange: (event) => {
+          const raw = event.target.value;
+          const option = column.unit === "period" ? raw : Number(raw);
+          onSelect(column.unit, option);
+        },
+        children: [
+          !selected ? /* @__PURE__ */ jsx("option", { value: "", disabled: true }) : null,
+          column.options.map((option) => /* @__PURE__ */ jsx(
+            "option",
+            {
+              value: String(option.value),
+              disabled: option.disabled,
+              children: option.label
+            },
+            String(option.value)
+          ))
+        ]
+      },
+      column.unit
+    );
+  }) });
+}
+
+// src/components/TimePicker/state.ts
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import {
+  SHAKE_CLASS,
+  TIGER_CHROME_ATTR,
+  TIME_PICKER_DESKTOP_QUERY,
+  adjacentTimePickerColumn,
+  applyTimePickerColumn,
+  applyTimePickerRangeColumn,
+  buildTimePickerColumns,
+  coerceTimePickerRange,
+  coerceTimePickerSingle,
+  commitTimePickerNow,
+  commitTimePickerOk,
+  emptyTimePickerValue,
+  focusTimePickerOption,
+  formatTime,
+  formatTimePickerDisplay,
+  formTimePickerValue,
+  getInputFieldClasses,
+  getInputWrapperClasses,
+  getLocaleDirection,
+  getTimePeriodLabels,
+  getTimePickerLabels,
+  isTimePickerDesktopLayout,
+  isTimePickerValueEmpty,
+  mergeAriaDescribedBy,
+  mergeTigerLocale,
+  parseTypedTimePickerValue,
+  resolveInputTrailingLayout,
+  resolveReadOnlyFlag,
+  runShakeAnimation,
+  seedTimePickerDraft,
+  visibleTimePickerColumns
+} from "@expcat/tigercat-core";
+
+// src/components/TimePicker/types.ts
+var isRangeTimePicker = (props) => props.range === true;
+
+// src/components/TimePicker/state.ts
+function useTimePickerController(props) {
+  const isRangeMode = isRangeTimePicker(props);
+  const {
+    size = "md",
+    disabled = false,
+    readonly: readonlyProp,
+    required = false,
+    clearable = true,
+    format = "24",
+    showSeconds = false,
+    hourStep = 1,
+    minuteStep = 1,
+    secondStep = 1,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    status: statusProp,
+    name,
+    id,
+    locale,
+    labels: labelsOverride,
+    className,
+    onClear,
+    onBlur
+  } = props;
+  const isReadOnly = resolveReadOnlyFlag(readonlyProp, props.readOnly);
+  const config = useTigerConfig();
+  const inputGroup = useInputGroupContext();
+  const formItemControl = useFormItemControlContext();
+  const inGroup = inputGroup != null;
+  const effectiveSize = size ?? inputGroup?.size ?? "md";
+  const effectiveDisabled = Boolean(disabled || formItemControl?.disabled);
+  const status = statusProp ?? formItemControl?.status ?? "default";
+  const shakeTrigger = formItemControl?.shakeTrigger;
+  const effectiveId = id ?? formItemControl?.id;
+  const effectiveName = name ?? formItemControl?.name;
+  const describedBy = mergeAriaDescribedBy(
+    typeof props["aria-describedby"] === "string" ? props["aria-describedby"] : void 0,
+    formItemControl?.describedBy
+  );
+  const labelledby = typeof props["aria-labelledby"] === "string" && props["aria-labelledby"].trim() ? props["aria-labelledby"] : formItemControl?.labelId;
+  const ariaLabel = typeof props["aria-label"] === "string" && props["aria-label"].trim() ? props["aria-label"] : void 0;
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const localeCode = mergedLocale?.locale;
+  const labels = useMemo(
+    () => getTimePickerLabels(mergedLocale, labelsOverride),
+    [mergedLocale, labelsOverride]
+  );
+  const periodLabels = useMemo(() => getTimePeriodLabels(localeCode), [localeCode]);
+  const dir = getLocaleDirection(mergedLocale);
+  const parsedValue = useMemo(() => {
+    if (isRangeMode) {
+      if (props.value === void 0) {
+        return coerceTimePickerRange(formItemControl?.value);
+      }
+      return coerceTimePickerRange(props.value);
+    }
+    if (props.value === void 0) {
+      return coerceTimePickerSingle(formItemControl?.value);
+    }
+    return coerceTimePickerSingle(props.value);
+  }, [formItemControl?.value, isRangeMode, props.value]);
+  const parsedDefault = useMemo(
+    () => isRangeMode ? coerceTimePickerRange(props.defaultValue) : coerceTimePickerSingle(props.defaultValue),
+    [isRangeMode, props.defaultValue]
+  );
+  const [committed, setCommitted] = useControlledState({
+    value: props.value !== void 0 || formItemControl?.value !== void 0 ? parsedValue : void 0,
+    defaultValue: parsedDefault ?? emptyTimePickerValue(isRangeMode),
+    onChange: (next) => {
+      if (isRangeMode) {
+        ;
+        props.onChange?.(
+          next
+        );
+      } else {
+        ;
+        props.onChange?.(next);
+      }
+      formItemControl?.onChange?.(formTimePickerValue(isRangeMode, next));
+    }
+  });
+  const [isOpen, setOpen] = useControlledState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [draft, setDraft] = useState(
+    () => seedTimePickerDraft(isRangeMode ? null : parsedDefault, format)
+  );
+  const [draftRange, setDraftRange] = useState(
+    isRangeMode ? parsedDefault : null
+  );
+  const [activePart, setActivePart] = useState("start");
+  const [draftText, setDraftText] = useState(null);
+  const [desktop, setDesktop] = useState(isTimePickerDesktopLayout);
+  const constraints = useMemo(
+    () => ({
+      minTime: props.minTime,
+      maxTime: props.maxTime,
+      disabledTime: props.disabledTime,
+      hourStep,
+      minuteStep,
+      secondStep,
+      format,
+      showSeconds
+    }),
+    [
+      format,
+      hourStep,
+      minuteStep,
+      props.disabledTime,
+      props.maxTime,
+      props.minTime,
+      secondStep,
+      showSeconds
+    ]
+  );
+  const displaySource = isOpen ? isRangeMode ? draftRange : draft.parts ? formatTime(draft.parts.hours, draft.parts.minutes, draft.parts.seconds, showSeconds) : null : committed;
+  const displayValue = draftText ?? formatTimePickerDisplay(isRangeMode, displaySource, format, showSeconds, localeCode);
+  const placeholder = props.placeholder ?? (isRangeMode ? labels.selectTimeRange : labels.selectTime);
+  const showClear = Boolean(
+    clearable && !effectiveDisabled && !isReadOnly && !isTimePickerValueEmpty(isRangeMode, committed)
+  );
+  const trailing = resolveInputTrailingLayout({
+    clearable,
+    disabled: effectiveDisabled,
+    readOnly: isReadOnly,
+    valueLength: showClear ? 1 : 0,
+    hasCustomSuffix: true
+  });
+  const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const panelRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const instanceId = useId();
+  const panelId = `tiger-timepicker-panel-${instanceId}`;
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    if (status === "error") runShakeAnimation(rootRef.current);
+  }, [status, shakeTrigger]);
+  useEffect(() => {
+    if (typeof window.matchMedia !== "function") return;
+    const mq = window.matchMedia(TIME_PICKER_DESKTOP_QUERY);
+    const update = () => setDesktop(mq.matches);
+    update();
+    mq.addEventListener("change", update);
+    return () => mq.removeEventListener("change", update);
+  }, []);
+  const seedPanel = useCallback(
+    (value, part) => {
+      if (isRangeMode) {
+        const tuple = value ?? null;
+        setDraftRange(tuple);
+        const active = tuple?.[part === "start" ? 0 : 1] ?? null;
+        setDraft(seedTimePickerDraft(active, format));
+        return;
+      }
+      setDraft(seedTimePickerDraft(value, format));
+    },
+    [format, isRangeMode]
+  );
+  const setOpenSafe = useCallback(
+    (next) => {
+      if (effectiveDisabled || isReadOnly) return;
+      setOpen(next);
+      if (!next) setDraftText(null);
+    },
+    [effectiveDisabled, isReadOnly, setOpen]
+  );
+  useEffect(() => {
+    if (!isOpen) return;
+    setActivePart("start");
+    seedPanel(committed, "start");
+  }, [isOpen]);
+  const writeCommitted = useCallback(
+    (next) => {
+      setCommitted(next);
+      setDraftText(null);
+    },
+    [setCommitted]
+  );
+  const confirmDraft = useCallback(() => {
+    const result = commitTimePickerOk({
+      range: isRangeMode,
+      draft,
+      draftRange,
+      constraints
+    });
+    if (!result) {
+      setOpenSafe(false);
+      return;
+    }
+    writeCommitted(result.nextCommitted);
+    if (result.close) setOpenSafe(false);
+  }, [constraints, draft, draftRange, isRangeMode, setOpenSafe, writeCommitted]);
+  const selectColumn = useCallback(
+    (unit, option) => {
+      if (isRangeMode) {
+        const next = applyTimePickerRangeColumn({
+          draftRange,
+          activePart,
+          column: unit,
+          option,
+          constraints
+        });
+        setDraftRange(next.nextRange);
+        setActivePart(next.nextActivePart);
+        const active = next.nextRange?.[next.nextActivePart === "start" ? 0 : 1] ?? null;
+        setDraft(seedTimePickerDraft(active, format));
+        return;
+      }
+      setDraft(applyTimePickerColumn(draft, unit, option, constraints));
+    },
+    [activePart, constraints, draft, draftRange, format, isRangeMode]
+  );
+  const selectNow = useCallback(() => {
+    const result = commitTimePickerNow(isRangeMode, props.now ?? /* @__PURE__ */ new Date(), constraints);
+    writeCommitted(result.nextCommitted);
+    seedPanel(result.nextCommitted, "start");
+    if (result.close) setOpenSafe(false);
+  }, [constraints, isRangeMode, props.now, seedPanel, setOpenSafe, writeCommitted]);
+  const clearValue = useCallback(() => {
+    writeCommitted(emptyTimePickerValue(isRangeMode));
+    onClear?.();
+    inputRef.current?.focus();
+  }, [isRangeMode, onClear, writeCommitted]);
+  const parseDraftInput = useCallback(() => {
+    if (draftText == null) return;
+    const parsed = parseTypedTimePickerValue(
+      draftText,
+      format,
+      showSeconds,
+      isRangeMode,
+      periodLabels
+    );
+    writeCommitted(parsed);
+  }, [draftText, format, isRangeMode, periodLabels, showSeconds, writeCommitted]);
+  const handleFocusOut = (event) => {
+    const next = event.relatedTarget;
+    if (rootRef.current && next && rootRef.current.contains(next) || panelRef.current && next && panelRef.current.contains(next)) {
+      return;
+    }
+    parseDraftInput();
+    formItemControl?.onBlur?.();
+    onBlur?.(event);
+  };
+  const handleInputKeyDown = (event) => {
+    if (effectiveDisabled || isReadOnly) return;
+    if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+      if (event.key === "Enter" && draftText != null) {
+        event.preventDefault();
+        parseDraftInput();
+        return;
+      }
+      if (event.key === "Enter" && isOpen) {
+        event.preventDefault();
+        confirmDraft();
+        return;
+      }
+      event.preventDefault();
+      setOpenSafe(true);
+    }
+  };
+  const handlePanelKeyDown = (event) => {
+    const unit = event.target.getAttribute(
+      "data-tiger-timepicker-unit"
+    );
+    if (!unit) return;
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusTimePickerOption(panelRef.current, unit, "prev");
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusTimePickerOption(panelRef.current, unit, "next");
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusTimePickerOption(panelRef.current, unit, "first");
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusTimePickerOption(panelRef.current, unit, "last");
+      return;
+    }
+    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+      event.preventDefault();
+      const next = adjacentTimePickerColumn(
+        unit,
+        visibleTimePickerColumns(format, showSeconds),
+        dir,
+        event.key
+      );
+      if (next) focusTimePickerOption(panelRef.current, next, "first");
+    }
+  };
+  const switchPart = useCallback(
+    (part) => {
+      setActivePart(part);
+      const active = draftRange?.[part === "start" ? 0 : 1] ?? null;
+      setDraft(seedTimePickerDraft(active, format));
+    },
+    [draftRange, format]
+  );
+  const columns = useMemo(
+    () => buildTimePickerColumns({
+      instanceId: panelId,
+      draft,
+      constraints,
+      labels,
+      periodLabels
+    }),
+    [constraints, draft, labels, panelId, periodLabels]
+  );
+  const inputClasses = getInputFieldClasses({
+    size: effectiveSize,
+    status,
+    hasSuffix: trailing.hasSuffix,
+    hasDualSuffix: trailing.hasDualSuffix
+  });
+  const wrapperClasses = getInputWrapperClasses(status, { inGroup });
+  return {
+    rootRef,
+    inputRef,
+    panelRef,
+    inputWrapperRef,
+    isOpen,
+    setOpenSafe,
+    isRangeMode,
+    labels,
+    periodLabels,
+    mergedLocale,
+    localeCode,
+    dir,
+    format,
+    showSeconds,
+    displayValue,
+    placeholder,
+    effectiveDisabled,
+    isReadOnly,
+    required: required || Boolean(formItemControl?.required),
+    effectiveId,
+    effectiveName,
+    describedBy,
+    labelledby,
+    ariaLabel,
+    status,
+    panelId,
+    showClear,
+    trailing,
+    inputClasses,
+    wrapperClasses,
+    chromeAttr: TIGER_CHROME_ATTR,
+    shakeClass: SHAKE_CLASS,
+    className,
+    size: effectiveSize,
+    desktop,
+    columns,
+    activePart,
+    switchPart,
+    selectColumn,
+    selectNow,
+    confirmDraft,
+    clearValue,
+    handleFocusOut,
+    handleInputKeyDown,
+    handlePanelKeyDown,
+    onDraftChange: (text) => setDraftText(text),
+    parseDraftInput,
+    placement: props.placement ?? "bottom-start",
+    offset: props.offset ?? 4,
+    dropdownClassName: props.dropdownClassName,
+    getPopupContainer: props.getPopupContainer
+  };
+}
+
+// src/components/TimePicker.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ChromeIcon({ path, className }) {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: icon20ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ jsx2("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+    }
+  );
+}
+var TimePicker = forwardRef(
+  function TimePicker2(props, ref) {
+    const ctx = useTimePickerController(props);
+    const overlay = useAnchoredOverlay({
+      enabled: ctx.isOpen,
+      referenceRef: ctx.inputWrapperRef,
+      floatingRef: ctx.panelRef,
+      placement: ctx.placement,
+      offset: ctx.offset,
+      layout: "bottom-sheet-sm",
+      dismissOnOutside: true,
+      dismissOnEscape: true,
+      restoreFocusOnDismiss: true,
+      getContainer: ctx.getPopupContainer,
+      onDismiss: () => ctx.setOpenSafe(false)
+    });
+    useFocusTrap({ enabled: ctx.isOpen, containerRef: ctx.panelRef, inert: true });
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => ctx.inputRef.current?.focus(),
+        open: () => ctx.setOpenSafe(true),
+        close: () => ctx.setOpenSafe(false)
+      }),
+      [ctx]
+    );
+    useEffect2(() => {
+      if (!ctx.isOpen) return;
+      const panel2 = ctx.panelRef.current;
+      if (!panel2) return;
+      if (ctx.desktop) {
+        const selected = panel2.querySelector(
+          '[data-tiger-timepicker-unit="hour"][aria-selected="true"]'
+        );
+        const first = panel2.querySelector(
+          '[data-tiger-timepicker-unit="hour"]:not([aria-disabled="true"])'
+        );
+        (selected ?? first)?.focus();
+        panel2.querySelectorAll('[aria-selected="true"]').forEach((node) => {
+          ;
+          node.scrollIntoView({ block: "nearest" });
+        });
+        return;
+      }
+      panel2.querySelector("select")?.focus();
+    }, [ctx.isOpen, ctx.desktop, ctx.activePart, ctx.panelRef]);
+    const panel = ctx.isOpen ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: datePickerSheetScrimClasses,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          onClick: () => ctx.setOpenSafe(false)
+        }
+      ),
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          ref: ctx.panelRef,
+          id: ctx.panelId,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": ctx.labels.dialog,
+          className: classNames2(
+            timePickerPanelClasses,
+            overlay.floatingClasses,
+            ctx.dropdownClassName
+          ),
+          style: overlay.floatingStyles,
+          "data-positioned": overlay.positioned,
+          "data-tiger": "timepicker-panel",
+          onBlur: ctx.handleFocusOut,
+          children: [
+            ctx.isRangeMode ? /* @__PURE__ */ jsxs2("div", { className: timePickerRangeHeaderClasses, role: "tablist", children: [
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  className: getTimePickerRangeTabButtonClasses(ctx.activePart === "start"),
+                  "aria-selected": ctx.activePart === "start",
+                  onClick: () => ctx.switchPart("start"),
+                  children: ctx.labels.start
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  className: getTimePickerRangeTabButtonClasses(ctx.activePart === "end"),
+                  "aria-selected": ctx.activePart === "end",
+                  onClick: () => ctx.switchPart("end"),
+                  children: ctx.labels.end
+                }
+              )
+            ] }) : null,
+            ctx.desktop ? /* @__PURE__ */ jsx2(
+              TimePickerDesktopColumns,
+              {
+                columns: ctx.columns,
+                onSelect: ctx.selectColumn,
+                onKeyDown: ctx.handlePanelKeyDown
+              }
+            ) : /* @__PURE__ */ jsx2(TimePickerMobileSelects, { columns: ctx.columns, onSelect: ctx.selectColumn }),
+            /* @__PURE__ */ jsxs2("div", { className: timePickerFooterClasses, children: [
+              /* @__PURE__ */ jsx2("button", { type: "button", className: timePickerFooterButtonClasses, onClick: ctx.selectNow, children: ctx.labels.now }),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  className: timePickerFooterButtonClasses,
+                  onClick: ctx.confirmDraft,
+                  children: ctx.labels.ok
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }) : null;
+    return /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: ctx.rootRef,
+        className: classNames2(timePickerBaseClasses, props.className),
+        ...{ [ctx.chromeAttr]: "" },
+        onAnimationEnd: () => ctx.rootRef.current?.classList.remove(ctx.shakeClass),
+        onBlur: ctx.handleFocusOut,
+        children: [
+          /* @__PURE__ */ jsxs2("div", { ref: ctx.inputWrapperRef, className: ctx.wrapperClasses, children: [
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                ref: ctx.inputRef,
+                type: "text",
+                className: ctx.inputClasses,
+                value: ctx.displayValue,
+                placeholder: ctx.placeholder,
+                disabled: ctx.effectiveDisabled,
+                readOnly: ctx.isReadOnly,
+                required: ctx.required,
+                name: ctx.effectiveName,
+                id: ctx.effectiveId,
+                autoComplete: "off",
+                "aria-label": ctx.ariaLabel ?? (ctx.labelledby ? void 0 : ctx.placeholder),
+                "aria-labelledby": ctx.labelledby,
+                "aria-describedby": ctx.describedBy,
+                "aria-invalid": ctx.status === "error" ? true : void 0,
+                "aria-required": ctx.required ? true : void 0,
+                "aria-controls": ctx.isOpen ? ctx.panelId : void 0,
+                onChange: (event) => ctx.onDraftChange(event.target.value),
+                onClick: () => ctx.setOpenSafe(true),
+                onKeyDown: ctx.handleInputKeyDown,
+                onBlur: ctx.parseDraftInput
+              }
+            ),
+            ctx.showClear ? /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: getInputClearButtonClasses(ctx.size, {
+                  offsetSlots: ctx.trailing.clearOffsetSlots
+                }),
+                "aria-label": ctx.labels.clear,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: ctx.clearValue,
+                children: /* @__PURE__ */ jsx2(ChromeIcon, { path: closeSolidIcon20PathD, className: "w-4 h-4" })
+              }
+            ) : null,
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                className: getInputPasswordToggleClasses(ctx.size, { offsetSlots: 0 }),
+                disabled: ctx.effectiveDisabled || ctx.isReadOnly,
+                "aria-label": ctx.labels.toggle,
+                onMouseDown: (event) => event.preventDefault(),
+                onClick: () => ctx.setOpenSafe(!ctx.isOpen),
+                children: /* @__PURE__ */ jsx2(ChromeIcon, { path: clockSolidIcon20PathD, className: "w-5 h-5" })
+              }
+            )
+          ] }),
+          renderOverlayPortal(panel, overlay.target)
+        ]
+      }
+    );
+  }
+);
+TimePicker.displayName = "TimePicker";
+
+export {
+  TimePicker
+};