@expcat/tigercat-react 1.3.4 → 1.4.0

package/dist/{chunk-4SO4LANY.js → chunk-VC26SAXB.js}

@@ -1,11 +1,11 @@
-"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; }// src/components/TimePicker.tsx
-var _react = require('react');
-
-
+"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
 
 
 
@@ -16,7 +16,10 @@ var _react = require('react');
 
 
 
+var _tigercatcore = require('@expcat/tigercat-core');
 
+// src/components/TimePicker/state.ts
+var _react = require('react');
 
 
 
@@ -37,19 +40,8 @@ var _react = require('react');
 
 
 
-var _tigercatcore = require('@expcat/tigercat-core');
-var _jsxruntime = require('react/jsx-runtime');
-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" })
-  }
-);
-var TimePicker = (allProps) => {
+function useTimePickerState(allProps) {
+  const config = _chunkTDODFBBOjs.useTigerConfig.call(void 0, );
   const {
     size = "md",
     format = "24",
@@ -77,43 +69,44 @@ var TimePicker = (allProps) => {
   const divProps = (({ onChange: _omitOnChange, ...rest }) => rest)(restProps);
   const isRangeMode = range === true;
   const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
-  const [internalSingleValue, setInternalSingleValue] = _react.useState.call(void 0, () => {
-    if (isRangeMode) return null;
+  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 [internalRangeValue, setInternalRangeValue] = _react.useState.call(void 0, () => {
-    const dv = defaultValue;
-    if (Array.isArray(dv)) return [_nullishCoalesce(dv[0], () => ( null)), _nullishCoalesce(dv[1], () => ( null))];
-    return [null, 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 normalizeRangeValue = (input) => {
-    if (Array.isArray(input)) return [_nullishCoalesce(input[0], () => ( null)), _nullishCoalesce(input[1], () => ( null))];
-    return [null, null];
-  };
-  const isControlled = value !== void 0;
-  const currentSingleValue = (() => {
-    if (isRangeMode) return null;
-    const v = value;
-    if (isControlled && (typeof v === "string" || v === null)) return v;
-    return internalSingleValue;
-  })();
-  const currentRangeValue = (() => {
-    if (!isRangeMode) return [null, null];
-    if (isControlled) return normalizeRangeValue(value);
-    return internalRangeValue;
-  })();
+  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;
@@ -129,11 +122,11 @@ var TimePicker = (allProps) => {
     syncFromActiveValue();
   }, [syncFromActiveValue]);
   const labels = _react.useMemo.call(void 0, 
-    () => _tigercatcore.getTimePickerLabels.call(void 0, locale, labelsOverrides),
-    [locale, labelsOverrides]
+    () => _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, locale), [locale]);
+  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, 
@@ -142,7 +135,7 @@ var TimePicker = (allProps) => {
         parsedTime.seconds,
         format,
         showSeconds,
-        locale
+        localeCode
       ) : "";
     }
     const toDisplay = (timeStr) => {
@@ -154,7 +147,7 @@ var TimePicker = (allProps) => {
         parsed.seconds,
         format,
         showSeconds,
-        locale
+        localeCode
       );
     };
     const start = toDisplay(currentRangeValue[0]);
@@ -182,27 +175,10 @@ var TimePicker = (allProps) => {
   };
   const closePanel = () => {
     setIsOpen(false);
-    _optionalChain([inputRef, 'access', _4 => _4.current, 'optionalAccess', _5 => _5.focus, 'call', _6 => _6()]);
+    _optionalChain([inputRef, 'access', _5 => _5.current, 'optionalAccess', _6 => _6.focus, 'call', _7 => _7()]);
   };
   const focusOptionInUnit = (unit, action) => {
-    const panel = panelRef.current;
-    if (!panel) return;
-    const nodes = Array.from(
-      panel.querySelectorAll(`button[data-tiger-timepicker-unit="${unit}"]`)
-    ).filter((button) => !button.disabled);
-    if (nodes.length === 0) return;
-    const active = document.activeElement;
-    const activeIndex = active ? nodes.indexOf(active) : -1;
-    const selectedIndex = nodes.findIndex(
-      (button) => button.getAttribute("aria-selected") === "true"
-    );
-    const baseIndex = activeIndex >= 0 ? activeIndex : Math.max(0, selectedIndex);
-    let nextIndex = baseIndex;
-    if (action === "prev") nextIndex = Math.max(0, baseIndex - 1);
-    if (action === "next") nextIndex = Math.min(nodes.length - 1, baseIndex + 1);
-    if (action === "first") nextIndex = 0;
-    if (action === "last") nextIndex = nodes.length - 1;
-    _optionalChain([nodes, 'access', _7 => _7[nextIndex], 'optionalAccess', _8 => _8.focus, 'call', _9 => _9()]);
+    _tigercatcore.focusTimePickerOption.call(void 0, panelRef.current, unit, action);
   };
   const handlePanelKeyDown = (event) => {
     if (event.key === "Escape") {
@@ -211,7 +187,7 @@ var TimePicker = (allProps) => {
       return;
     }
     const active = document.activeElement;
-    const unit = _optionalChain([active, 'optionalAccess', _10 => _10.getAttribute, 'call', _11 => _11("data-tiger-timepicker-unit")]);
+    const unit = _optionalChain([active, 'optionalAccess', _8 => _8.getAttribute, 'call', _9 => _9("data-tiger-timepicker-unit")]);
     if (!unit) return;
     if (event.key === "ArrowUp") {
       event.preventDefault();
@@ -266,11 +242,8 @@ var TimePicker = (allProps) => {
       return;
     }
     let timeString = _tigercatcore.formatTime.call(void 0, hours, minutes, seconds, showSeconds);
-    if (allProps.range !== true) {
-      if (!isControlled) {
-        setInternalSingleValue(timeString);
-      }
-      _optionalChain([allProps, 'access', _12 => _12.onChange, 'optionalCall', _13 => _13(timeString)]);
+    if (!isRangeMode) {
+      setSingleValue(timeString);
       return;
     }
     const index = activePart === "start" ? 0 : 1;
@@ -301,30 +274,20 @@ var TimePicker = (allProps) => {
     if (activePart === "start" && endSeconds !== null && candidateSeconds > endSeconds) {
       nextRange[1] = timeString;
     }
-    if (!isControlled) {
-      setInternalRangeValue(nextRange);
-    }
-    _optionalChain([allProps, 'access', _14 => _14.onChange, 'optionalCall', _15 => _15(nextRange)]);
+    setRangeValue(nextRange);
     if (activePart === "start" && nextRange[1] === null) {
       setActivePart("end");
     }
   };
   const clearTime = (event) => {
     event.stopPropagation();
-    if (allProps.range !== true) {
-      if (!isControlled) {
-        setInternalSingleValue(null);
-      }
-      _optionalChain([allProps, 'access', _16 => _16.onChange, 'optionalCall', _17 => _17(null)]);
-      _optionalChain([onClear, 'optionalCall', _18 => _18()]);
+    if (!isRangeMode) {
+      setSingleValue(null);
+      _optionalChain([onClear, 'optionalCall', _10 => _10()]);
       return;
     }
-    const cleared = [null, null];
-    if (!isControlled) {
-      setInternalRangeValue(cleared);
-    }
-    _optionalChain([allProps, 'access', _19 => _19.onChange, 'optionalCall', _20 => _20(cleared)]);
-    _optionalChain([onClear, 'optionalCall', _21 => _21()]);
+    setRangeValue([null, null]);
+    _optionalChain([onClear, 'optionalCall', _11 => _11()]);
   };
   const setNow = () => {
     const now = _tigercatcore.getCurrentTime.call(void 0, showSeconds);
@@ -378,38 +341,284 @@ var TimePicker = (allProps) => {
       const firstHour = panel.querySelector(
         'button[data-tiger-timepicker-unit="hour"]:not([disabled])'
       );
-      _optionalChain([firstHour, 'optionalAccess', _22 => _22.focus, 'call', _23 => _23()]);
+      _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 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, _tigercatcore.timePickerBaseClasses, className), ...divProps, children: [
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: inputWrapperRef, className: _tigercatcore.timePickerInputWrapperClasses, children: [
+  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
+  };
+}
+
+// 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, 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;
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            type: "button",
+            className: _tigercatcore.getTimePickerItemClasses.call(void 0, isSelected, false),
+            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: inputRef,
+          ref: ctx.inputRef,
           type: "text",
-          className: inputClasses,
-          value: displayValue,
-          placeholder,
-          disabled,
+          className: ctx.inputClasses,
+          value: ctx.displayValue,
+          placeholder: ctx.placeholder,
+          disabled: ctx.disabled,
           readOnly: true,
-          required,
-          name,
-          id,
-          onClick: handleInputClick,
-          "aria-label": placeholder || labels.selectTime
+          required: ctx.required,
+          name: ctx.name,
+          id: ctx.id,
+          onClick: ctx.handleInputClick,
+          "aria-label": ctx.placeholder || ctx.labels.selectTime
         }
       ),
-      showClearButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ctx.showClearButton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
           type: "button",
           className: _tigercatcore.timePickerClearButtonClasses,
-          onClick: clearTime,
-          "aria-label": labels.clear,
+          onClick: ctx.clearTime,
+          "aria-label": ctx.labels.clear,
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Icon, { path: _tigercatcore.TimePickerCloseIconPath, className: "w-4 h-4" })
         }
       ),
@@ -417,203 +626,60 @@ var TimePicker = (allProps) => {
         "button",
         {
           type: "button",
-          className: iconButtonClasses,
-          disabled: disabled || readonly,
-          onClick: togglePanel,
-          "aria-label": labels.toggle,
+          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" })
         }
       )
     ] }),
-    isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    ctx.isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        ref: panelRef,
+        ref: ctx.panelRef,
         className: _tigercatcore.timePickerPanelClasses,
         role: "dialog",
-        "aria-label": labels.dialog,
-        onKeyDown: handlePanelKeyDown,
+        "aria-label": ctx.labels.dialog,
+        onKeyDown: ctx.handlePanelKeyDown,
         children: [
-          isRangeMode && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerRangeHeaderClasses, 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, activePart === "start"),
-                onClick: () => setActivePart("start"),
-                "aria-label": labels.start,
-                "aria-selected": activePart === "start",
-                children: labels.start
+                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, activePart === "end"),
-                onClick: () => setActivePart("end"),
-                "aria-label": labels.end,
-                "aria-selected": activePart === "end",
-                children: labels.end
+                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
               }
             )
           ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerMobileWheelClasses, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "select",
-              {
-                className: _tigercatcore.timePickerMobileWheelSelectClasses,
-                value: format === "12" ? _tigercatcore.to12HourFormat.call(void 0, selectedHours).hours : selectedHours,
-                "aria-label": labels.hour,
-                onChange: (event) => selectHour(Number(event.target.value)),
-                children: hoursList.map((hour) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: hour, disabled: isHourDisabled(hour), children: _tigercatcore.padTwo.call(void 0, hour) }, hour))
-              }
-            ),
+          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, 
-              "select",
-              {
-                className: _tigercatcore.timePickerMobileWheelSelectClasses,
-                value: selectedMinutes,
-                "aria-label": labels.minute,
-                onChange: (event) => selectMinute(Number(event.target.value)),
-                children: minutesList.map((minute) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: minute, disabled: isMinuteDisabled(minute), children: _tigercatcore.padTwo.call(void 0, minute) }, minute))
-              }
-            ),
-            showSeconds && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              "select",
-              {
-                className: _tigercatcore.timePickerMobileWheelSelectClasses,
-                value: selectedSeconds,
-                "aria-label": labels.second,
-                onChange: (event) => selectSecond(Number(event.target.value)),
-                children: secondsList.map((second) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: second, children: _tigercatcore.padTwo.call(void 0, second) }, second))
-              }
-            ),
-            format === "12" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-              "select",
+              "button",
               {
-                className: _tigercatcore.timePickerMobileWheelSelectClasses,
-                value: selectedPeriod,
-                "aria-label": "Period",
-                onChange: (event) => selectPeriod(event.target.value),
-                children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "AM", children: periodLabels.am }),
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "PM", children: periodLabels.pm })
-                ]
+                type: "button",
+                className: _tigercatcore.timePickerFooterButtonClasses,
+                onClick: ctx.closePanel,
+                children: ctx.labels.ok
               }
             )
-          ] }),
-          /* @__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: labels.hour }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnListClasses, children: hoursList.map((hour) => {
-                const hours24 = format === "12" ? _tigercatcore.to24HourFormat.call(void 0, hour, selectedPeriod) : hour;
-                const isSelected = selectedHours === hours24;
-                const isDisabled = isHourDisabled(hour);
-                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "button",
-                  {
-                    type: "button",
-                    className: _tigercatcore.getTimePickerItemClasses.call(void 0, isSelected, isDisabled),
-                    disabled: isDisabled,
-                    onClick: () => selectHour(hour),
-                    "data-tiger-timepicker-unit": "hour",
-                    "aria-label": _tigercatcore.getTimePickerOptionAriaLabel.call(void 0, 
-                      hour,
-                      "hour",
-                      locale,
-                      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: labels.minute }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnListClasses, children: minutesList.map((minute) => {
-                const isSelected = selectedMinutes === minute;
-                const isDisabled = isMinuteDisabled(minute);
-                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "button",
-                  {
-                    type: "button",
-                    className: _tigercatcore.getTimePickerItemClasses.call(void 0, isSelected, isDisabled),
-                    disabled: isDisabled,
-                    onClick: () => selectMinute(minute),
-                    "data-tiger-timepicker-unit": "minute",
-                    "aria-label": _tigercatcore.getTimePickerOptionAriaLabel.call(void 0, 
-                      minute,
-                      "minute",
-                      locale,
-                      labelsOverrides
-                    ),
-                    "aria-selected": isSelected,
-                    children: _tigercatcore.padTwo.call(void 0, minute)
-                  },
-                  minute
-                );
-              }) })
-            ] }),
-            showSeconds && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerColumnClasses, children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnHeaderClasses, children: labels.second }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.timePickerColumnListClasses, children: secondsList.map((second) => {
-                const isSelected = selectedSeconds === second;
-                return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "button",
-                  {
-                    type: "button",
-                    className: _tigercatcore.getTimePickerItemClasses.call(void 0, isSelected, false),
-                    onClick: () => selectSecond(second),
-                    "data-tiger-timepicker-unit": "second",
-                    "aria-label": _tigercatcore.getTimePickerOptionAriaLabel.call(void 0, 
-                      second,
-                      "second",
-                      locale,
-                      labelsOverrides
-                    ),
-                    "aria-selected": isSelected,
-                    children: _tigercatcore.padTwo.call(void 0, second)
-                  },
-                  second
-                );
-              }) })
-            ] }),
-            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, selectedPeriod === "AM"),
-                    onClick: () => selectPeriod("AM"),
-                    "data-tiger-timepicker-unit": "period",
-                    "aria-label": periodLabels.am,
-                    "aria-selected": selectedPeriod === "AM",
-                    children: periodLabels.am
-                  }
-                ),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "button",
-                  {
-                    type: "button",
-                    className: _tigercatcore.getTimePickerPeriodButtonClasses.call(void 0, selectedPeriod === "PM"),
-                    onClick: () => selectPeriod("PM"),
-                    "data-tiger-timepicker-unit": "period",
-                    "aria-label": periodLabels.pm,
-                    "aria-selected": selectedPeriod === "PM",
-                    children: periodLabels.pm
-                  }
-                )
-              ] })
-            ] })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.timePickerFooterClasses, children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: _tigercatcore.timePickerFooterButtonClasses, onClick: setNow, children: labels.now }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", className: _tigercatcore.timePickerFooterButtonClasses, onClick: closePanel, children: labels.ok })
           ] })
         ]
       }