@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-ALSOPYM5.mjs

@@ -1,705 +0,0 @@
-import {
-  useControlledState
-} from "./chunk-MEFARVQI.mjs";
-import {
-  renderOverlayPortal,
-  useAnchoredOverlay
-} from "./chunk-HKAZXG74.mjs";
-import {
-  useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
-
-// src/components/TimePicker.tsx
-import {
-  timePickerInputWrapperClasses,
-  timePickerClearButtonClasses,
-  timePickerPanelClasses,
-  timePickerRangeHeaderClasses,
-  getTimePickerRangeTabButtonClasses,
-  timePickerFooterClasses,
-  timePickerFooterButtonClasses,
-  clockSolidIcon20PathD,
-  closeSolidIcon20PathD
-} 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, seconds)) {
-      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, selectedSeconds);
-  };
-  const isMinuteDisabled = (minute) => {
-    return !isTimeInRange(selectedHours, minute, minTime, maxTime, selectedSeconds);
-  };
-  const isSecondDisabled = (second) => {
-    return !isTimeInRange(selectedHours, selectedMinutes, minTime, maxTime, second);
-  };
-  const handleInputClick = () => {
-    togglePanel();
-  };
-  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, showClearButton);
-  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,
-    isSecondDisabled
-  };
-}
-
-// 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, disabled: ctx.isSecondDisabled(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;
-        const isDisabled = ctx.isSecondDisabled(second);
-        return /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: getTimePickerItemClasses(isSelected, isDisabled),
-            disabled: isDisabled,
-            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);
-  const overlay = useAnchoredOverlay({
-    enabled: ctx.isOpen,
-    referenceRef: ctx.inputWrapperRef,
-    floatingRef: ctx.panelRef,
-    placement: "bottom-start",
-    offset: 4,
-    layout: "bottom-sheet-sm",
-    dismissOnOutside: true,
-    dismissOnEscape: true,
-    onDismiss: ctx.closePanel
-  });
-  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: closeSolidIcon20PathD, 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: clockSolidIcon20PathD, className: "w-5 h-5" })
-        }
-      )
-    ] }),
-    renderOverlayPortal(
-      ctx.isOpen ? /* @__PURE__ */ jsxs3(
-        "div",
-        {
-          ref: ctx.panelRef,
-          className: `${timePickerPanelClasses} ${overlay.floatingClasses}`,
-          style: overlay.floatingStyles,
-          "data-positioned": overlay.positioned,
-          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
-                }
-              )
-            ] })
-          ]
-        }
-      ) : null,
-      overlay.target
-    )
-  ] });
-};
-
-export {
-  TimePicker
-};