@expcat/tigercat-react 1.3.4 → 1.5.0

package/dist/chunk-UQZ4RLTI.js

@@ -0,0 +1,698 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkL3WPA2RPjs = require('./chunk-L3WPA2RP.js');
+
+
+var _chunkTDODFBBOjs = require('./chunk-TDODFBBO.js');
+
+// src/components/TimePicker.tsx
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+
+// src/components/TimePicker/state.ts
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function useTimePickerState(allProps) {
+  const config = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
+  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] = _react.useState.call(void 0, false);
+  const normalizeRangeValue = (input) => {
+    if (Array.isArray(input)) return [_nullishCoalesce(input[0], () => ( null)), _nullishCoalesce(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 _nullishCoalesce(dv, () => ( null));
+    return null;
+  })();
+  const [singleValue, setSingleValue] = _chunkL3WPA2RPjs.useControlledState.call(void 0, 
+    singleControlled,
+    singleDefault,
+    allProps.onChange
+  );
+  const [rangeValue, setRangeValue] = _chunkL3WPA2RPjs.useControlledState.call(void 0, 
+    isRangeMode && value !== void 0 ? normalizeRangeValue(value) : void 0,
+    normalizeRangeValue(defaultValue),
+    allProps.onChange
+  );
+  const [activePart, setActivePart] = _react.useState.call(void 0, "start");
+  const panelRef = _react.useRef.call(void 0, null);
+  const inputWrapperRef = _react.useRef.call(void 0, null);
+  const inputRef = _react.useRef.call(void 0, null);
+  const currentSingleValue = isRangeMode ? null : singleValue;
+  const currentRangeValue = isRangeMode ? rangeValue : [null, null];
+  const activeValue = isRangeMode ? currentRangeValue[activePart === "start" ? 0 : 1] : currentSingleValue;
+  const parsedTime = _tigercatcore.parseTime.call(void 0, activeValue);
+  const [selectedHours, setSelectedHours] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([parsedTime, 'optionalAccess', _ => _.hours]), () => ( 0)));
+  const [selectedMinutes, setSelectedMinutes] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([parsedTime, 'optionalAccess', _2 => _2.minutes]), () => ( 0)));
+  const [selectedSeconds, setSelectedSeconds] = _react.useState.call(void 0, _nullishCoalesce(_optionalChain([parsedTime, 'optionalAccess', _3 => _3.seconds]), () => ( 0)));
+  const [selectedPeriod, setSelectedPeriod] = _react.useState.call(void 0, "AM");
+  const localeOverride = _react.useMemo.call(void 0, () => typeof locale === "string" ? { locale } : locale, [locale]);
+  const mergedLocale = _react.useMemo.call(void 0, 
+    () => _tigercatcore.mergeTigerLocale.call(void 0, config.locale, localeOverride),
+    [config.locale, localeOverride]
+  );
+  const localeCode = _optionalChain([mergedLocale, 'optionalAccess', _4 => _4.locale]);
+  const syncFromActiveValue = _react.useCallback.call(void 0, () => {
+    const parsed = _tigercatcore.parseTime.call(void 0, activeValue);
+    if (!parsed) return;
+    setSelectedHours(parsed.hours);
+    setSelectedMinutes(parsed.minutes);
+    setSelectedSeconds(parsed.seconds);
+    if (format === "12") {
+      const { period } = _tigercatcore.to12HourFormat.call(void 0, parsed.hours);
+      setSelectedPeriod(period);
+    }
+  }, [activeValue, format]);
+  _react.useEffect.call(void 0, () => {
+    syncFromActiveValue();
+  }, [syncFromActiveValue]);
+  const labels = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getTimePickerLabels.call(void 0, mergedLocale, labelsOverrides),
+    [mergedLocale, labelsOverrides]
+  );
+  const placeholder = _nullishCoalesce(allProps.placeholder, () => ( (isRangeMode ? labels.selectTimeRange : labels.selectTime)));
+  const periodLabels = _react.useMemo.call(void 0, () => _tigercatcore.getTimePeriodLabels.call(void 0, localeCode), [localeCode]);
+  const displayValue = (() => {
+    if (!isRangeMode) {
+      return parsedTime ? _tigercatcore.formatTimeDisplayWithLocale.call(void 0, 
+        parsedTime.hours,
+        parsedTime.minutes,
+        parsedTime.seconds,
+        format,
+        showSeconds,
+        localeCode
+      ) : "";
+    }
+    const toDisplay = (timeStr) => {
+      const parsed = _tigercatcore.parseTime.call(void 0, timeStr);
+      if (!parsed) return "";
+      return _tigercatcore.formatTimeDisplayWithLocale.call(void 0, 
+        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 = _react.useMemo.call(void 0, () => _tigercatcore.generateHours.call(void 0, hourStep, format), [hourStep, format]);
+  const minutesList = _react.useMemo.call(void 0, () => _tigercatcore.generateMinutes.call(void 0, minuteStep), [minuteStep]);
+  const secondsList = _react.useMemo.call(void 0, () => _tigercatcore.generateSeconds.call(void 0, secondStep), [secondStep]);
+  const togglePanel = () => {
+    if (!disabled && !readonly) {
+      if (isOpen) {
+        closePanel();
+        return;
+      }
+      setIsOpen(true);
+      syncFromActiveValue();
+    }
+  };
+  const closePanel = () => {
+    setIsOpen(false);
+    _optionalChain([inputRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.focus, 'call', _7 => _7()]);
+  };
+  const focusOptionInUnit = (unit, action) => {
+    _tigercatcore.focusTimePickerOption.call(void 0, panelRef.current, unit, action);
+  };
+  const handlePanelKeyDown = (event) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closePanel();
+      return;
+    }
+    const active = document.activeElement;
+    const unit = _optionalChain([active, 'optionalAccess', _8 => _8.getAttribute, 'call', _9 => _9("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" ? _tigercatcore.to24HourFormat.call(void 0, 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 } = _tigercatcore.to12HourFormat.call(void 0, selectedHours);
+    const hours24 = _tigercatcore.to24HourFormat.call(void 0, hours12, period);
+    setSelectedHours(hours24);
+    updateTime(hours24, selectedMinutes, selectedSeconds);
+  };
+  const updateTime = (hours, minutes, seconds) => {
+    if (!_tigercatcore.isTimeInRange.call(void 0, hours, minutes, minTime, maxTime, seconds)) {
+      return;
+    }
+    let timeString = _tigercatcore.formatTime.call(void 0, hours, minutes, seconds, showSeconds);
+    if (!isRangeMode) {
+      setSingleValue(timeString);
+      return;
+    }
+    const index = activePart === "start" ? 0 : 1;
+    const parsedStart = _tigercatcore.parseTime.call(void 0, currentRangeValue[0]);
+    const parsedEnd = _tigercatcore.parseTime.call(void 0, 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 = _tigercatcore.formatTime.call(void 0, 
+          parsedStart.hours,
+          parsedStart.minutes,
+          parsedStart.seconds,
+          showSeconds
+        );
+        setSelectedHours(parsedStart.hours);
+        setSelectedMinutes(parsedStart.minutes);
+        setSelectedSeconds(parsedStart.seconds);
+        if (format === "12") {
+          const { period } = _tigercatcore.to12HourFormat.call(void 0, 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);
+      _optionalChain([onClear, 'optionalCall', _10 => _10()]);
+      return;
+    }
+    setRangeValue([null, null]);
+    _optionalChain([onClear, 'optionalCall', _11 => _11()]);
+  };
+  const setNow = () => {
+    const now = _tigercatcore.getCurrentTime.call(void 0, showSeconds);
+    const parsed = _tigercatcore.parseTime.call(void 0, now);
+    if (parsed) {
+      setSelectedHours(parsed.hours);
+      setSelectedMinutes(parsed.minutes);
+      setSelectedSeconds(parsed.seconds);
+      if (format === "12") {
+        const { period } = _tigercatcore.to12HourFormat.call(void 0, parsed.hours);
+        setSelectedPeriod(period);
+      }
+      updateTime(parsed.hours, parsed.minutes, parsed.seconds);
+    }
+  };
+  const isHourDisabled = (hour) => {
+    const hours24 = format === "12" ? _tigercatcore.to24HourFormat.call(void 0, hour, selectedPeriod) : hour;
+    return !_tigercatcore.isTimeInRange.call(void 0, hours24, selectedMinutes, minTime, maxTime, selectedSeconds);
+  };
+  const isMinuteDisabled = (minute) => {
+    return !_tigercatcore.isTimeInRange.call(void 0, selectedHours, minute, minTime, maxTime, selectedSeconds);
+  };
+  const isSecondDisabled = (second) => {
+    return !_tigercatcore.isTimeInRange.call(void 0, selectedHours, selectedMinutes, minTime, maxTime, second);
+  };
+  const handleInputClick = () => {
+    togglePanel();
+  };
+  _react.useEffect.call(void 0, () => {
+    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]);
+  _react.useEffect.call(void 0, () => {
+    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])'
+      );
+      _optionalChain([firstHour, 'optionalAccess', _12 => _12.focus, 'call', _13 => _13()]);
+    }, 0);
+    return () => window.clearTimeout(focusTimer);
+  }, [isOpen, activePart]);
+  const inputClasses = _tigercatcore.getTimePickerInputClasses.call(void 0, size, disabled || readonly);
+  const iconButtonClasses = _tigercatcore.getTimePickerIconButtonClasses.call(void 0, size);
+  return {
+    panelRef,
+    inputWrapperRef,
+    inputRef,
+    isOpen,
+    activePart,
+    setActivePart,
+    isRangeMode,
+    placeholder,
+    disabled,
+    readonly,
+    required,
+    name,
+    id,
+    format,
+    showSeconds,
+    locale: mergedLocale,
+    labelsOverrides,
+    containerClasses: _tigercatcore.classNames.call(void 0, _tigercatcore.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
+
+
+
+
+
+
+var _jsxruntime = require('react/jsx-runtime');
+function renderTimePickerMobile(ctx) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerMobileWheelClasses, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "select",
+      {
+        className: _tigercatcore.timePickerMobileWheelSelectClasses,
+        value: ctx.format === "12" ? _tigercatcore.to12HourFormat.call(void 0, ctx.selectedHours).hours : ctx.selectedHours,
+        "aria-label": ctx.labels.hour,
+        onChange: (event) => ctx.selectHour(Number(event.target.value)),
+        children: ctx.hoursList.map((hour) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: hour, disabled: ctx.isHourDisabled(hour), children: _tigercatcore.padTwo.call(void 0, hour) }, hour))
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "select",
+      {
+        className: _tigercatcore.timePickerMobileWheelSelectClasses,
+        value: ctx.selectedMinutes,
+        "aria-label": ctx.labels.minute,
+        onChange: (event) => ctx.selectMinute(Number(event.target.value)),
+        children: ctx.minutesList.map((minute) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: minute, disabled: ctx.isMinuteDisabled(minute), children: _tigercatcore.padTwo.call(void 0, minute) }, minute))
+      }
+    ),
+    ctx.showSeconds && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "select",
+      {
+        className: _tigercatcore.timePickerMobileWheelSelectClasses,
+        value: ctx.selectedSeconds,
+        "aria-label": ctx.labels.second,
+        onChange: (event) => ctx.selectSecond(Number(event.target.value)),
+        children: ctx.secondsList.map((second) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: second, disabled: ctx.isSecondDisabled(second), children: _tigercatcore.padTwo.call(void 0, second) }, second))
+      }
+    ),
+    ctx.format === "12" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "select",
+      {
+        className: _tigercatcore.timePickerMobileWheelSelectClasses,
+        value: ctx.selectedPeriod,
+        "aria-label": "Period",
+        onChange: (event) => ctx.selectPeriod(event.target.value),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "AM", children: ctx.periodLabels.am }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "PM", children: ctx.periodLabels.pm })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/TimePicker/render-desktop.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+function renderTimePickerDesktop(ctx) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerDesktopPanelContentClasses, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerColumnClasses, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnHeaderClasses, children: ctx.labels.hour }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnListClasses, children: ctx.hoursList.map((hour) => {
+        const hours24 = ctx.format === "12" ? _tigercatcore.to24HourFormat.call(void 0, hour, ctx.selectedPeriod) : hour;
+        const isSelected = ctx.selectedHours === hours24;
+        const isDisabled = ctx.isHourDisabled(hour);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: _tigercatcore.getTimePickerItemClasses.call(void 0, isSelected, isDisabled),
+            disabled: isDisabled,
+            onClick: () => ctx.selectHour(hour),
+            "data-tiger-timepicker-unit": "hour",
+            "aria-label": _tigercatcore.getTimePickerOptionAriaLabel.call(void 0, 
+              hour,
+              "hour",
+              ctx.locale,
+              ctx.labelsOverrides
+            ),
+            "aria-selected": isSelected,
+            children: _tigercatcore.padTwo.call(void 0, hour)
+          },
+          hour
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerColumnClasses, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnHeaderClasses, children: ctx.labels.minute }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnListClasses, children: ctx.minutesList.map((minute) => {
+        const isSelected = ctx.selectedMinutes === minute;
+        const isDisabled = ctx.isMinuteDisabled(minute);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: _tigercatcore.getTimePickerItemClasses.call(void 0, isSelected, isDisabled),
+            disabled: isDisabled,
+            onClick: () => ctx.selectMinute(minute),
+            "data-tiger-timepicker-unit": "minute",
+            "aria-label": _tigercatcore.getTimePickerOptionAriaLabel.call(void 0, 
+              minute,
+              "minute",
+              ctx.locale,
+              ctx.labelsOverrides
+            ),
+            "aria-selected": isSelected,
+            children: _tigercatcore.padTwo.call(void 0, minute)
+          },
+          minute
+        );
+      }) })
+    ] }),
+    ctx.showSeconds && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerColumnClasses, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnHeaderClasses, children: ctx.labels.second }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnListClasses, children: ctx.secondsList.map((second) => {
+        const isSelected = ctx.selectedSeconds === second;
+        const isDisabled = ctx.isSecondDisabled(second);
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: _tigercatcore.getTimePickerItemClasses.call(void 0, isSelected, isDisabled),
+            disabled: isDisabled,
+            onClick: () => ctx.selectSecond(second),
+            "data-tiger-timepicker-unit": "second",
+            "aria-label": _tigercatcore.getTimePickerOptionAriaLabel.call(void 0, 
+              second,
+              "second",
+              ctx.locale,
+              ctx.labelsOverrides
+            ),
+            "aria-selected": isSelected,
+            children: _tigercatcore.padTwo.call(void 0, second)
+          },
+          second
+        );
+      }) })
+    ] }),
+    ctx.format === "12" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerColumnClasses, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnHeaderClasses, children: " " }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: _tigercatcore.getTimePickerPeriodButtonClasses.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: _tigercatcore.getTimePickerPeriodButtonClasses.call(void 0, 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
+
+
+var Icon = ({ path, className }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: _tigercatcore.icon20ViewBox,
+    fill: "currentColor",
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+  }
+);
+
+// src/components/TimePicker.tsx
+
+var TimePicker = (allProps) => {
+  const ctx = useTimePickerState(allProps);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: ctx.containerClasses, ...ctx.divProps, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: ctx.inputWrapperRef, className: _tigercatcore.timePickerInputWrapperClasses, children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "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__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: _tigercatcore.timePickerClearButtonClasses,
+          onClick: ctx.clearTime,
+          "aria-label": ctx.labels.clear,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { path: _tigercatcore.TimePickerCloseIconPath, className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          className: ctx.iconButtonClasses,
+          disabled: ctx.disabled || ctx.readonly,
+          onClick: ctx.togglePanel,
+          "aria-label": ctx.labels.toggle,
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { path: _tigercatcore.ClockIconPath, className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    ctx.isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref: ctx.panelRef,
+        className: _tigercatcore.timePickerPanelClasses,
+        role: "dialog",
+        "aria-label": ctx.labels.dialog,
+        onKeyDown: ctx.handlePanelKeyDown,
+        children: [
+          ctx.isRangeMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerRangeHeaderClasses, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: _tigercatcore.getTimePickerRangeTabButtonClasses.call(void 0, ctx.activePart === "start"),
+                onClick: () => ctx.setActivePart("start"),
+                "aria-label": ctx.labels.start,
+                "aria-selected": ctx.activePart === "start",
+                children: ctx.labels.start
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: _tigercatcore.getTimePickerRangeTabButtonClasses.call(void 0, 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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerFooterClasses, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: _tigercatcore.timePickerFooterButtonClasses, onClick: ctx.setNow, children: ctx.labels.now }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                type: "button",
+                className: _tigercatcore.timePickerFooterButtonClasses,
+                onClick: ctx.closePanel,
+                children: ctx.labels.ok
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+
+
+exports.TimePicker = TimePicker;