@expcat/tigercat-react 1.3.3 → 1.4.0

package/dist/chunk-SQTOVSDU.mjs

@@ -0,0 +1,692 @@
+import {
+  useControlledState
+} from "./chunk-WHYHLUXG.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
+// src/components/TimePicker.tsx
+import {
+  timePickerInputWrapperClasses,
+  timePickerClearButtonClasses,
+  timePickerPanelClasses,
+  timePickerRangeHeaderClasses,
+  getTimePickerRangeTabButtonClasses,
+  timePickerFooterClasses,
+  timePickerFooterButtonClasses,
+  ClockIconPath,
+  TimePickerCloseIconPath
+} from "@expcat/tigercat-core";
+
+// src/components/TimePicker/state.ts
+import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import {
+  classNames,
+  parseTime,
+  formatTime,
+  formatTimeDisplayWithLocale,
+  getTimePeriodLabels,
+  getTimePickerLabels,
+  mergeTigerLocale,
+  to12HourFormat,
+  to24HourFormat,
+  isTimeInRange,
+  generateHours,
+  generateMinutes,
+  generateSeconds,
+  getCurrentTime,
+  timePickerBaseClasses,
+  getTimePickerInputClasses,
+  getTimePickerIconButtonClasses,
+  focusTimePickerOption
+} from "@expcat/tigercat-core";
+function useTimePickerState(allProps) {
+  const config = useTigerConfig();
+  const {
+    size = "md",
+    format = "24",
+    showSeconds = false,
+    hourStep = 1,
+    minuteStep = 1,
+    secondStep = 1,
+    disabled = false,
+    readonly = false,
+    required = false,
+    minTime,
+    maxTime,
+    clearable = true,
+    name,
+    id,
+    className,
+    onClear,
+    locale,
+    labels: labelsOverrides,
+    value,
+    defaultValue,
+    range,
+    ...restProps
+  } = allProps;
+  const divProps = (({ onChange: _omitOnChange, ...rest }) => rest)(restProps);
+  const isRangeMode = range === true;
+  const [isOpen, setIsOpen] = useState(false);
+  const normalizeRangeValue = (input) => {
+    if (Array.isArray(input)) return [input[0] ?? null, input[1] ?? null];
+    return [null, null];
+  };
+  const singleControlled = !isRangeMode && value !== void 0 && (typeof value === "string" || value === null) ? value : void 0;
+  const singleDefault = (() => {
+    const dv = defaultValue;
+    if (typeof dv === "string" || dv === null || dv === void 0) return dv ?? null;
+    return null;
+  })();
+  const [singleValue, setSingleValue] = useControlledState(
+    singleControlled,
+    singleDefault,
+    allProps.onChange
+  );
+  const [rangeValue, setRangeValue] = useControlledState(
+    isRangeMode && value !== void 0 ? normalizeRangeValue(value) : void 0,
+    normalizeRangeValue(defaultValue),
+    allProps.onChange
+  );
+  const [activePart, setActivePart] = useState("start");
+  const panelRef = useRef(null);
+  const inputWrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const currentSingleValue = isRangeMode ? null : singleValue;
+  const currentRangeValue = isRangeMode ? rangeValue : [null, null];
+  const activeValue = isRangeMode ? currentRangeValue[activePart === "start" ? 0 : 1] : currentSingleValue;
+  const parsedTime = parseTime(activeValue);
+  const [selectedHours, setSelectedHours] = useState(parsedTime?.hours ?? 0);
+  const [selectedMinutes, setSelectedMinutes] = useState(parsedTime?.minutes ?? 0);
+  const [selectedSeconds, setSelectedSeconds] = useState(parsedTime?.seconds ?? 0);
+  const [selectedPeriod, setSelectedPeriod] = useState("AM");
+  const localeOverride = useMemo(() => typeof locale === "string" ? { locale } : locale, [locale]);
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, localeOverride),
+    [config.locale, localeOverride]
+  );
+  const localeCode = mergedLocale?.locale;
+  const syncFromActiveValue = useCallback(() => {
+    const parsed = parseTime(activeValue);
+    if (!parsed) return;
+    setSelectedHours(parsed.hours);
+    setSelectedMinutes(parsed.minutes);
+    setSelectedSeconds(parsed.seconds);
+    if (format === "12") {
+      const { period } = to12HourFormat(parsed.hours);
+      setSelectedPeriod(period);
+    }
+  }, [activeValue, format]);
+  useEffect(() => {
+    syncFromActiveValue();
+  }, [syncFromActiveValue]);
+  const labels = useMemo(
+    () => getTimePickerLabels(mergedLocale, labelsOverrides),
+    [mergedLocale, labelsOverrides]
+  );
+  const placeholder = allProps.placeholder ?? (isRangeMode ? labels.selectTimeRange : labels.selectTime);
+  const periodLabels = useMemo(() => getTimePeriodLabels(localeCode), [localeCode]);
+  const displayValue = (() => {
+    if (!isRangeMode) {
+      return parsedTime ? formatTimeDisplayWithLocale(
+        parsedTime.hours,
+        parsedTime.minutes,
+        parsedTime.seconds,
+        format,
+        showSeconds,
+        localeCode
+      ) : "";
+    }
+    const toDisplay = (timeStr) => {
+      const parsed = parseTime(timeStr);
+      if (!parsed) return "";
+      return formatTimeDisplayWithLocale(
+        parsed.hours,
+        parsed.minutes,
+        parsed.seconds,
+        format,
+        showSeconds,
+        localeCode
+      );
+    };
+    const start = toDisplay(currentRangeValue[0]);
+    const end = toDisplay(currentRangeValue[1]);
+    if (!start && !end) return "";
+    return `${start} - ${end}`;
+  })();
+  const showClearButton = (() => {
+    if (!clearable || disabled || readonly) return false;
+    if (!isRangeMode) return currentSingleValue !== null;
+    return currentRangeValue[0] !== null || currentRangeValue[1] !== null;
+  })();
+  const hoursList = useMemo(() => generateHours(hourStep, format), [hourStep, format]);
+  const minutesList = useMemo(() => generateMinutes(minuteStep), [minuteStep]);
+  const secondsList = useMemo(() => generateSeconds(secondStep), [secondStep]);
+  const togglePanel = () => {
+    if (!disabled && !readonly) {
+      if (isOpen) {
+        closePanel();
+        return;
+      }
+      setIsOpen(true);
+      syncFromActiveValue();
+    }
+  };
+  const closePanel = () => {
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+  const focusOptionInUnit = (unit, action) => {
+    focusTimePickerOption(panelRef.current, unit, action);
+  };
+  const handlePanelKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closePanel();
+      return;
+    }
+    const active = document.activeElement;
+    const unit = active?.getAttribute("data-tiger-timepicker-unit");
+    if (!unit) return;
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "prev");
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "next");
+      return;
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "first");
+      return;
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      focusOptionInUnit(unit, "last");
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      const el = document.activeElement;
+      if (el && el.tagName === "BUTTON" && !el.disabled) {
+        event.preventDefault();
+        el.click();
+      }
+    }
+  };
+  const selectHour = (hour) => {
+    const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
+    setSelectedHours(hours24);
+    updateTime(hours24, selectedMinutes, selectedSeconds);
+  };
+  const selectMinute = (minute) => {
+    setSelectedMinutes(minute);
+    updateTime(selectedHours, minute, selectedSeconds);
+  };
+  const selectSecond = (second) => {
+    setSelectedSeconds(second);
+    updateTime(selectedHours, selectedMinutes, second);
+  };
+  const selectPeriod = (period) => {
+    setSelectedPeriod(period);
+    const { hours: hours12 } = to12HourFormat(selectedHours);
+    const hours24 = to24HourFormat(hours12, period);
+    setSelectedHours(hours24);
+    updateTime(hours24, selectedMinutes, selectedSeconds);
+  };
+  const updateTime = (hours, minutes, seconds) => {
+    if (!isTimeInRange(hours, minutes, minTime, maxTime)) {
+      return;
+    }
+    let timeString = formatTime(hours, minutes, seconds, showSeconds);
+    if (!isRangeMode) {
+      setSingleValue(timeString);
+      return;
+    }
+    const index = activePart === "start" ? 0 : 1;
+    const parsedStart = parseTime(currentRangeValue[0]);
+    const parsedEnd = parseTime(currentRangeValue[1]);
+    const candidateSeconds = hours * 3600 + minutes * 60 + seconds;
+    const startSeconds = parsedStart ? parsedStart.hours * 3600 + parsedStart.minutes * 60 + parsedStart.seconds : null;
+    const endSeconds = parsedEnd ? parsedEnd.hours * 3600 + parsedEnd.minutes * 60 + parsedEnd.seconds : null;
+    if (activePart === "end" && parsedStart && startSeconds !== null) {
+      if (candidateSeconds < startSeconds) {
+        timeString = formatTime(
+          parsedStart.hours,
+          parsedStart.minutes,
+          parsedStart.seconds,
+          showSeconds
+        );
+        setSelectedHours(parsedStart.hours);
+        setSelectedMinutes(parsedStart.minutes);
+        setSelectedSeconds(parsedStart.seconds);
+        if (format === "12") {
+          const { period } = to12HourFormat(parsedStart.hours);
+          setSelectedPeriod(period);
+        }
+      }
+    }
+    const nextRange = [currentRangeValue[0], currentRangeValue[1]];
+    nextRange[index] = timeString;
+    if (activePart === "start" && endSeconds !== null && candidateSeconds > endSeconds) {
+      nextRange[1] = timeString;
+    }
+    setRangeValue(nextRange);
+    if (activePart === "start" && nextRange[1] === null) {
+      setActivePart("end");
+    }
+  };
+  const clearTime = (event) => {
+    event.stopPropagation();
+    if (!isRangeMode) {
+      setSingleValue(null);
+      onClear?.();
+      return;
+    }
+    setRangeValue([null, null]);
+    onClear?.();
+  };
+  const setNow = () => {
+    const now = getCurrentTime(showSeconds);
+    const parsed = parseTime(now);
+    if (parsed) {
+      setSelectedHours(parsed.hours);
+      setSelectedMinutes(parsed.minutes);
+      setSelectedSeconds(parsed.seconds);
+      if (format === "12") {
+        const { period } = to12HourFormat(parsed.hours);
+        setSelectedPeriod(period);
+      }
+      updateTime(parsed.hours, parsed.minutes, parsed.seconds);
+    }
+  };
+  const isHourDisabled = (hour) => {
+    const hours24 = format === "12" ? to24HourFormat(hour, selectedPeriod) : hour;
+    return !isTimeInRange(hours24, selectedMinutes, minTime, maxTime);
+  };
+  const isMinuteDisabled = (minute) => {
+    return !isTimeInRange(selectedHours, minute, minTime, maxTime);
+  };
+  const handleInputClick = () => {
+    togglePanel();
+  };
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (panelRef.current && inputWrapperRef.current && !panelRef.current.contains(event.target) && !inputWrapperRef.current.contains(event.target)) {
+        closePanel();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+      return () => {
+        document.removeEventListener("click", handleClickOutside);
+      };
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const panel = panelRef.current;
+    if (!panel) return;
+    const focusTimer = window.setTimeout(() => {
+      const selectedHour = panel.querySelector(
+        'button[data-tiger-timepicker-unit="hour"][aria-selected="true"]:not([disabled])'
+      );
+      if (selectedHour) {
+        selectedHour.focus();
+        return;
+      }
+      const firstHour = panel.querySelector(
+        'button[data-tiger-timepicker-unit="hour"]:not([disabled])'
+      );
+      firstHour?.focus();
+    }, 0);
+    return () => window.clearTimeout(focusTimer);
+  }, [isOpen, activePart]);
+  const inputClasses = getTimePickerInputClasses(size, disabled || readonly);
+  const iconButtonClasses = getTimePickerIconButtonClasses(size);
+  return {
+    panelRef,
+    inputWrapperRef,
+    inputRef,
+    isOpen,
+    activePart,
+    setActivePart,
+    isRangeMode,
+    placeholder,
+    disabled,
+    readonly,
+    required,
+    name,
+    id,
+    format,
+    showSeconds,
+    locale: mergedLocale,
+    labelsOverrides,
+    containerClasses: classNames(timePickerBaseClasses, className),
+    divProps,
+    displayValue,
+    showClearButton,
+    inputClasses,
+    iconButtonClasses,
+    labels,
+    periodLabels,
+    hoursList,
+    minutesList,
+    secondsList,
+    selectedHours,
+    selectedMinutes,
+    selectedSeconds,
+    selectedPeriod,
+    togglePanel,
+    closePanel,
+    handleInputClick,
+    clearTime,
+    setNow,
+    handlePanelKeyDown,
+    selectHour,
+    selectMinute,
+    selectSecond,
+    selectPeriod,
+    isHourDisabled,
+    isMinuteDisabled
+  };
+}
+
+// src/components/TimePicker/render-mobile.tsx
+import {
+  timePickerMobileWheelClasses,
+  timePickerMobileWheelSelectClasses,
+  to12HourFormat as to12HourFormat2,
+  padTwo
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function renderTimePickerMobile(ctx) {
+  return /* @__PURE__ */ jsxs("div", { className: timePickerMobileWheelClasses, children: [
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: timePickerMobileWheelSelectClasses,
+        value: ctx.format === "12" ? to12HourFormat2(ctx.selectedHours).hours : ctx.selectedHours,
+        "aria-label": ctx.labels.hour,
+        onChange: (event) => ctx.selectHour(Number(event.target.value)),
+        children: ctx.hoursList.map((hour) => /* @__PURE__ */ jsx("option", { value: hour, disabled: ctx.isHourDisabled(hour), children: padTwo(hour) }, hour))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: timePickerMobileWheelSelectClasses,
+        value: ctx.selectedMinutes,
+        "aria-label": ctx.labels.minute,
+        onChange: (event) => ctx.selectMinute(Number(event.target.value)),
+        children: ctx.minutesList.map((minute) => /* @__PURE__ */ jsx("option", { value: minute, disabled: ctx.isMinuteDisabled(minute), children: padTwo(minute) }, minute))
+      }
+    ),
+    ctx.showSeconds && /* @__PURE__ */ jsx(
+      "select",
+      {
+        className: timePickerMobileWheelSelectClasses,
+        value: ctx.selectedSeconds,
+        "aria-label": ctx.labels.second,
+        onChange: (event) => ctx.selectSecond(Number(event.target.value)),
+        children: ctx.secondsList.map((second) => /* @__PURE__ */ jsx("option", { value: second, children: padTwo(second) }, second))
+      }
+    ),
+    ctx.format === "12" && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: timePickerMobileWheelSelectClasses,
+        value: ctx.selectedPeriod,
+        "aria-label": "Period",
+        onChange: (event) => ctx.selectPeriod(event.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "AM", children: ctx.periodLabels.am }),
+          /* @__PURE__ */ jsx("option", { value: "PM", children: ctx.periodLabels.pm })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/TimePicker/render-desktop.tsx
+import {
+  timePickerDesktopPanelContentClasses,
+  timePickerColumnClasses,
+  timePickerColumnHeaderClasses,
+  timePickerColumnListClasses,
+  getTimePickerItemClasses,
+  getTimePickerPeriodButtonClasses,
+  getTimePickerOptionAriaLabel,
+  to24HourFormat as to24HourFormat2,
+  padTwo as padTwo2
+} from "@expcat/tigercat-core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function renderTimePickerDesktop(ctx) {
+  return /* @__PURE__ */ jsxs2("div", { className: timePickerDesktopPanelContentClasses, children: [
+    /* @__PURE__ */ jsxs2("div", { className: timePickerColumnClasses, children: [
+      /* @__PURE__ */ jsx2("div", { className: timePickerColumnHeaderClasses, children: ctx.labels.hour }),
+      /* @__PURE__ */ jsx2("div", { className: timePickerColumnListClasses, children: ctx.hoursList.map((hour) => {
+        const hours24 = ctx.format === "12" ? to24HourFormat2(hour, ctx.selectedPeriod) : hour;
+        const isSelected = ctx.selectedHours === hours24;
+        const isDisabled = ctx.isHourDisabled(hour);
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: getTimePickerItemClasses(isSelected, isDisabled),
+            disabled: isDisabled,
+            onClick: () => ctx.selectHour(hour),
+            "data-tiger-timepicker-unit": "hour",
+            "aria-label": getTimePickerOptionAriaLabel(
+              hour,
+              "hour",
+              ctx.locale,
+              ctx.labelsOverrides
+            ),
+            "aria-selected": isSelected,
+            children: padTwo2(hour)
+          },
+          hour
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: timePickerColumnClasses, children: [
+      /* @__PURE__ */ jsx2("div", { className: timePickerColumnHeaderClasses, children: ctx.labels.minute }),
+      /* @__PURE__ */ jsx2("div", { className: timePickerColumnListClasses, children: ctx.minutesList.map((minute) => {
+        const isSelected = ctx.selectedMinutes === minute;
+        const isDisabled = ctx.isMinuteDisabled(minute);
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: getTimePickerItemClasses(isSelected, isDisabled),
+            disabled: isDisabled,
+            onClick: () => ctx.selectMinute(minute),
+            "data-tiger-timepicker-unit": "minute",
+            "aria-label": getTimePickerOptionAriaLabel(
+              minute,
+              "minute",
+              ctx.locale,
+              ctx.labelsOverrides
+            ),
+            "aria-selected": isSelected,
+            children: padTwo2(minute)
+          },
+          minute
+        );
+      }) })
+    ] }),
+    ctx.showSeconds && /* @__PURE__ */ jsxs2("div", { className: timePickerColumnClasses, children: [
+      /* @__PURE__ */ jsx2("div", { className: timePickerColumnHeaderClasses, children: ctx.labels.second }),
+      /* @__PURE__ */ jsx2("div", { className: timePickerColumnListClasses, children: ctx.secondsList.map((second) => {
+        const isSelected = ctx.selectedSeconds === second;
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: getTimePickerItemClasses(isSelected, false),
+            onClick: () => ctx.selectSecond(second),
+            "data-tiger-timepicker-unit": "second",
+            "aria-label": getTimePickerOptionAriaLabel(
+              second,
+              "second",
+              ctx.locale,
+              ctx.labelsOverrides
+            ),
+            "aria-selected": isSelected,
+            children: padTwo2(second)
+          },
+          second
+        );
+      }) })
+    ] }),
+    ctx.format === "12" && /* @__PURE__ */ jsxs2("div", { className: timePickerColumnClasses, children: [
+      /* @__PURE__ */ jsx2("div", { className: timePickerColumnHeaderClasses, children: " " }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: getTimePickerPeriodButtonClasses(ctx.selectedPeriod === "AM"),
+            onClick: () => ctx.selectPeriod("AM"),
+            "data-tiger-timepicker-unit": "period",
+            "aria-label": ctx.periodLabels.am,
+            "aria-selected": ctx.selectedPeriod === "AM",
+            children: ctx.periodLabels.am
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            className: getTimePickerPeriodButtonClasses(ctx.selectedPeriod === "PM"),
+            onClick: () => ctx.selectPeriod("PM"),
+            "data-tiger-timepicker-unit": "period",
+            "aria-label": ctx.periodLabels.pm,
+            "aria-selected": ctx.selectedPeriod === "PM",
+            children: ctx.periodLabels.pm
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/TimePicker/icons.tsx
+import { icon20ViewBox } from "@expcat/tigercat-core";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Icon = ({ path, className }) => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: icon20ViewBox,
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx3("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+  }
+);
+
+// src/components/TimePicker.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var TimePicker = (allProps) => {
+  const ctx = useTimePickerState(allProps);
+  return /* @__PURE__ */ jsxs3("div", { className: ctx.containerClasses, ...ctx.divProps, children: [
+    /* @__PURE__ */ jsxs3("div", { ref: ctx.inputWrapperRef, className: timePickerInputWrapperClasses, children: [
+      /* @__PURE__ */ jsx4(
+        "input",
+        {
+          ref: ctx.inputRef,
+          type: "text",
+          className: ctx.inputClasses,
+          value: ctx.displayValue,
+          placeholder: ctx.placeholder,
+          disabled: ctx.disabled,
+          readOnly: true,
+          required: ctx.required,
+          name: ctx.name,
+          id: ctx.id,
+          onClick: ctx.handleInputClick,
+          "aria-label": ctx.placeholder || ctx.labels.selectTime
+        }
+      ),
+      ctx.showClearButton && /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: timePickerClearButtonClasses,
+          onClick: ctx.clearTime,
+          "aria-label": ctx.labels.clear,
+          children: /* @__PURE__ */ jsx4(Icon, { path: TimePickerCloseIconPath, className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        "button",
+        {
+          type: "button",
+          className: ctx.iconButtonClasses,
+          disabled: ctx.disabled || ctx.readonly,
+          onClick: ctx.togglePanel,
+          "aria-label": ctx.labels.toggle,
+          children: /* @__PURE__ */ jsx4(Icon, { path: ClockIconPath, className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    ctx.isOpen && /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        ref: ctx.panelRef,
+        className: timePickerPanelClasses,
+        role: "dialog",
+        "aria-label": ctx.labels.dialog,
+        onKeyDown: ctx.handlePanelKeyDown,
+        children: [
+          ctx.isRangeMode && /* @__PURE__ */ jsxs3("div", { className: timePickerRangeHeaderClasses, children: [
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: getTimePickerRangeTabButtonClasses(ctx.activePart === "start"),
+                onClick: () => ctx.setActivePart("start"),
+                "aria-label": ctx.labels.start,
+                "aria-selected": ctx.activePart === "start",
+                children: ctx.labels.start
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: getTimePickerRangeTabButtonClasses(ctx.activePart === "end"),
+                onClick: () => ctx.setActivePart("end"),
+                "aria-label": ctx.labels.end,
+                "aria-selected": ctx.activePart === "end",
+                children: ctx.labels.end
+              }
+            )
+          ] }),
+          renderTimePickerMobile(ctx),
+          renderTimePickerDesktop(ctx),
+          /* @__PURE__ */ jsxs3("div", { className: timePickerFooterClasses, children: [
+            /* @__PURE__ */ jsx4("button", { type: "button", className: timePickerFooterButtonClasses, onClick: ctx.setNow, children: ctx.labels.now }),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                className: timePickerFooterButtonClasses,
+                onClick: ctx.closePanel,
+                children: ctx.labels.ok
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+export {
+  TimePicker
+};