@expcat/tigercat-react 0.0.1

package/dist/chunk-7P6PHSFM.js

@@ -0,0 +1,548 @@
+'use strict';
+
+var react = require('react');
+var tigercatCore = require('@expcat/tigercat-core');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/TimePicker.tsx
+var Icon = ({ path, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: tigercatCore.icon20ViewBox,
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: path, clipRule: "evenodd" })
+  }
+);
+var TimePicker = (allProps) => {
+  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(false);
+  const [internalSingleValue, setInternalSingleValue] = react.useState(() => {
+    if (isRangeMode) return null;
+    const dv = defaultValue;
+    if (typeof dv === "string" || dv === null || dv === void 0) return dv ?? null;
+    return null;
+  });
+  const [internalRangeValue, setInternalRangeValue] = react.useState(() => {
+    const dv = defaultValue;
+    if (Array.isArray(dv)) return [dv[0] ?? null, dv[1] ?? null];
+    return [null, null];
+  });
+  const [activePart, setActivePart] = react.useState("start");
+  const panelRef = react.useRef(null);
+  const inputWrapperRef = react.useRef(null);
+  const inputRef = react.useRef(null);
+  const normalizeRangeValue = (input) => {
+    if (Array.isArray(input)) return [input[0] ?? null, 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 activeValue = isRangeMode ? currentRangeValue[activePart === "start" ? 0 : 1] : currentSingleValue;
+  const parsedTime = tigercatCore.parseTime(activeValue);
+  const [selectedHours, setSelectedHours] = react.useState(parsedTime?.hours ?? 0);
+  const [selectedMinutes, setSelectedMinutes] = react.useState(parsedTime?.minutes ?? 0);
+  const [selectedSeconds, setSelectedSeconds] = react.useState(parsedTime?.seconds ?? 0);
+  const [selectedPeriod, setSelectedPeriod] = react.useState("AM");
+  react.useEffect(() => {
+    const parsed = tigercatCore.parseTime(activeValue);
+    if (parsed) {
+      setSelectedHours(parsed.hours);
+      setSelectedMinutes(parsed.minutes);
+      setSelectedSeconds(parsed.seconds);
+      if (format === "12") {
+        const { period } = tigercatCore.to12HourFormat(parsed.hours);
+        setSelectedPeriod(period);
+      }
+    }
+  }, [activeValue, format, activePart, isRangeMode]);
+  const labels = tigercatCore.getTimePickerLabels(locale, labelsOverrides);
+  const placeholder = allProps.placeholder ?? (isRangeMode ? labels.selectTimeRange : labels.selectTime);
+  const periodLabels = tigercatCore.getTimePeriodLabels(locale);
+  const singleDisplayValue = parsedTime ? tigercatCore.formatTimeDisplayWithLocale(
+    parsedTime.hours,
+    parsedTime.minutes,
+    parsedTime.seconds,
+    format,
+    showSeconds,
+    locale
+  ) : "";
+  const displayValue = (() => {
+    if (!isRangeMode) return singleDisplayValue;
+    const toDisplay = (timeStr) => {
+      const parsed = tigercatCore.parseTime(timeStr);
+      if (!parsed) return "";
+      return tigercatCore.formatTimeDisplayWithLocale(
+        parsed.hours,
+        parsed.minutes,
+        parsed.seconds,
+        format,
+        showSeconds,
+        locale
+      );
+    };
+    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 = tigercatCore.generateHours(hourStep, format);
+  const minutesList = tigercatCore.generateMinutes(minuteStep);
+  const secondsList = tigercatCore.generateSeconds(secondStep);
+  const togglePanel = () => {
+    if (!disabled && !readonly) {
+      if (isOpen) {
+        closePanel();
+        return;
+      }
+      setIsOpen(true);
+      if (parsedTime) {
+        setSelectedHours(parsedTime.hours);
+        setSelectedMinutes(parsedTime.minutes);
+        setSelectedSeconds(parsedTime.seconds);
+        if (format === "12") {
+          const { period } = tigercatCore.to12HourFormat(parsedTime.hours);
+          setSelectedPeriod(period);
+        }
+      }
+    }
+  };
+  const closePanel = () => {
+    setIsOpen(false);
+    inputRef.current?.focus();
+  };
+  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;
+    nodes[nextIndex]?.focus();
+  };
+  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" ? tigercatCore.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 } = tigercatCore.to12HourFormat(selectedHours);
+    const hours24 = tigercatCore.to24HourFormat(hours12, period);
+    setSelectedHours(hours24);
+    updateTime(hours24, selectedMinutes, selectedSeconds);
+  };
+  const updateTime = (hours, minutes, seconds) => {
+    if (!tigercatCore.isTimeInRange(hours, minutes, minTime, maxTime)) {
+      return;
+    }
+    let timeString = tigercatCore.formatTime(hours, minutes, seconds, showSeconds);
+    if (allProps.range !== true) {
+      if (!isControlled) {
+        setInternalSingleValue(timeString);
+      }
+      allProps.onChange?.(timeString);
+      return;
+    }
+    const index = activePart === "start" ? 0 : 1;
+    const parsedStart = tigercatCore.parseTime(currentRangeValue[0]);
+    const parsedEnd = tigercatCore.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 = tigercatCore.formatTime(
+          parsedStart.hours,
+          parsedStart.minutes,
+          parsedStart.seconds,
+          showSeconds
+        );
+        setSelectedHours(parsedStart.hours);
+        setSelectedMinutes(parsedStart.minutes);
+        setSelectedSeconds(parsedStart.seconds);
+        if (format === "12") {
+          const { period } = tigercatCore.to12HourFormat(parsedStart.hours);
+          setSelectedPeriod(period);
+        }
+      }
+    }
+    const nextRange = [currentRangeValue[0], currentRangeValue[1]];
+    nextRange[index] = timeString;
+    if (activePart === "start" && endSeconds !== null && candidateSeconds > endSeconds) {
+      nextRange[1] = timeString;
+    }
+    if (!isControlled) {
+      setInternalRangeValue(nextRange);
+    }
+    allProps.onChange?.(nextRange);
+    if (activePart === "start" && nextRange[1] === null) {
+      setActivePart("end");
+    }
+  };
+  const clearTime = (event) => {
+    event.stopPropagation();
+    if (allProps.range !== true) {
+      if (!isControlled) {
+        setInternalSingleValue(null);
+      }
+      allProps.onChange?.(null);
+      onClear?.();
+      return;
+    }
+    const cleared = [null, null];
+    if (!isControlled) {
+      setInternalRangeValue(cleared);
+    }
+    allProps.onChange?.(cleared);
+    onClear?.();
+  };
+  const setNow = () => {
+    const now = tigercatCore.getCurrentTime(showSeconds);
+    const parsed = tigercatCore.parseTime(now);
+    if (parsed) {
+      setSelectedHours(parsed.hours);
+      setSelectedMinutes(parsed.minutes);
+      setSelectedSeconds(parsed.seconds);
+      if (format === "12") {
+        const { period } = tigercatCore.to12HourFormat(parsed.hours);
+        setSelectedPeriod(period);
+      }
+      updateTime(parsed.hours, parsed.minutes, parsed.seconds);
+    }
+  };
+  const isHourDisabled = (hour) => {
+    const hours24 = format === "12" ? tigercatCore.to24HourFormat(hour, selectedPeriod) : hour;
+    return !tigercatCore.isTimeInRange(hours24, selectedMinutes, minTime, maxTime);
+  };
+  const isMinuteDisabled = (minute) => {
+    return !tigercatCore.isTimeInRange(selectedHours, minute, minTime, maxTime);
+  };
+  const handleInputClick = () => {
+    togglePanel();
+  };
+  react.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]);
+  react.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 = tigercatCore.getTimePickerInputClasses(size, disabled || readonly);
+  const iconButtonClasses = tigercatCore.getTimePickerIconButtonClasses(size);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.classNames(tigercatCore.timePickerBaseClasses, className), ...divProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: inputWrapperRef, className: tigercatCore.timePickerInputWrapperClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: inputClasses,
+          value: displayValue,
+          placeholder,
+          disabled,
+          readOnly: true,
+          required,
+          name,
+          id,
+          onClick: handleInputClick,
+          "aria-label": placeholder || labels.selectTime
+        }
+      ),
+      showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: tigercatCore.timePickerClearButtonClasses,
+          onClick: clearTime,
+          "aria-label": labels.clear,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: tigercatCore.TimePickerCloseIconPath, className: "w-4 h-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: iconButtonClasses,
+          disabled: disabled || readonly,
+          onClick: togglePanel,
+          "aria-label": labels.toggle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { path: tigercatCore.ClockIconPath, className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: tigercatCore.timePickerPanelClasses,
+        role: "dialog",
+        "aria-label": labels.dialog,
+        onKeyDown: handlePanelKeyDown,
+        children: [
+          isRangeMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerRangeHeaderClasses, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: tigercatCore.getTimePickerRangeTabButtonClasses(activePart === "start"),
+                onClick: () => setActivePart("start"),
+                "aria-label": labels.start,
+                "aria-selected": activePart === "start",
+                children: labels.start
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: tigercatCore.getTimePickerRangeTabButtonClasses(activePart === "end"),
+                onClick: () => setActivePart("end"),
+                "aria-label": labels.end,
+                "aria-selected": activePart === "end",
+                children: labels.end
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerPanelContentClasses, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerColumnClasses, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnHeaderClasses, children: labels.hour }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnListClasses, children: hoursList.map((hour) => {
+                const displayHour = format === "12" ? hour : hour;
+                const hours24 = format === "12" ? tigercatCore.to24HourFormat(hour, selectedPeriod) : hour;
+                const isSelected = selectedHours === hours24;
+                const isDisabled = isHourDisabled(hour);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: tigercatCore.getTimePickerItemClasses(isSelected, isDisabled),
+                    disabled: isDisabled,
+                    onClick: () => selectHour(hour),
+                    "data-tiger-timepicker-unit": "hour",
+                    "aria-label": tigercatCore.getTimePickerOptionAriaLabel(
+                      displayHour,
+                      "hour",
+                      locale,
+                      labelsOverrides
+                    ),
+                    "aria-selected": isSelected,
+                    children: displayHour.toString().padStart(2, "0")
+                  },
+                  hour
+                );
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerColumnClasses, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnHeaderClasses, children: labels.minute }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnListClasses, children: minutesList.map((minute) => {
+                const isSelected = selectedMinutes === minute;
+                const isDisabled = isMinuteDisabled(minute);
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: tigercatCore.getTimePickerItemClasses(isSelected, isDisabled),
+                    disabled: isDisabled,
+                    onClick: () => selectMinute(minute),
+                    "data-tiger-timepicker-unit": "minute",
+                    "aria-label": tigercatCore.getTimePickerOptionAriaLabel(
+                      minute,
+                      "minute",
+                      locale,
+                      labelsOverrides
+                    ),
+                    "aria-selected": isSelected,
+                    children: minute.toString().padStart(2, "0")
+                  },
+                  minute
+                );
+              }) })
+            ] }),
+            showSeconds && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerColumnClasses, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnHeaderClasses, children: labels.second }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnListClasses, children: secondsList.map((second) => {
+                const isSelected = selectedSeconds === second;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: tigercatCore.getTimePickerItemClasses(isSelected, false),
+                    onClick: () => selectSecond(second),
+                    "data-tiger-timepicker-unit": "second",
+                    "aria-label": tigercatCore.getTimePickerOptionAriaLabel(
+                      second,
+                      "second",
+                      locale,
+                      labelsOverrides
+                    ),
+                    "aria-selected": isSelected,
+                    children: second.toString().padStart(2, "0")
+                  },
+                  second
+                );
+              }) })
+            ] }),
+            format === "12" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerColumnClasses, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.timePickerColumnHeaderClasses, children: " " }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: tigercatCore.getTimePickerPeriodButtonClasses(selectedPeriod === "AM"),
+                    onClick: () => selectPeriod("AM"),
+                    "data-tiger-timepicker-unit": "period",
+                    "aria-label": periodLabels.am,
+                    "aria-selected": selectedPeriod === "AM",
+                    children: periodLabels.am
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: tigercatCore.getTimePickerPeriodButtonClasses(selectedPeriod === "PM"),
+                    onClick: () => selectPeriod("PM"),
+                    "data-tiger-timepicker-unit": "period",
+                    "aria-label": periodLabels.pm,
+                    "aria-selected": selectedPeriod === "PM",
+                    children: periodLabels.pm
+                  }
+                )
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.timePickerFooterClasses, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: tigercatCore.timePickerFooterButtonClasses, onClick: setNow, children: labels.now }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: tigercatCore.timePickerFooterButtonClasses, onClick: closePanel, children: labels.ok })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+exports.TimePicker = TimePicker;