@expcat/tigercat-react 1.4.0 → 2.0.0-preview.1

package/dist/{chunk-KXT2TP6A.mjs → chunk-WKTIDYPD.mjs}

@@ -2,6 +2,9 @@ import {
   renderBodyPortal,
   useEscapeKey
 } from "./chunk-SEWNVIHH.mjs";
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
 
 // src/components/ImagePreview.tsx
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
@@ -31,7 +34,9 @@ import {
   movePan,
   createPinchState,
   startPinch,
-  movePinch
+  movePinch,
+  getImageViewerLabels,
+  mergeTigerLocale
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsx(
@@ -54,10 +59,19 @@ var ImagePreview = ({
   scaleStep = 0.5,
   minScale = 0.25,
   maxScale = 5,
+  touchSwipeable = true,
+  touchSwipeThreshold = 48,
+  locale,
   onOpenChange,
   onCurrentIndexChange,
   onScaleChange
 }) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getImageViewerLabels(mergedLocale), [mergedLocale]);
   const isOpen = open ?? false;
   const [scale, setScale] = useState(1);
   const [rotation, setRotation] = useState(0);
@@ -68,6 +82,13 @@ var ImagePreview = ({
   const dragStartRef = useRef({ x: 0, y: 0, ox: 0, oy: 0 });
   const panRef = useRef(createPanState());
   const pinchRef = useRef(createPinchState());
+  const touchSwipeRef = useRef({
+    isTracking: false,
+    startX: 0,
+    startY: 0,
+    currentX: 0,
+    currentY: 0
+  });
   const resetTransform = useCallback(() => {
     setScale(1);
     setRotation(0);
@@ -75,6 +96,7 @@ var ImagePreview = ({
     setOffsetY(0);
     panRef.current = createPanState();
     pinchRef.current = createPinchState();
+    touchSwipeRef.current.isTracking = false;
   }, []);
   useEffect(() => {
     setIndex(currentIndex);
@@ -179,14 +201,28 @@ var ImagePreview = ({
     (e) => {
       if (e.touches.length === 2) {
         e.preventDefault();
+        touchSwipeRef.current.isTracking = false;
         pinchRef.current = startPinch(e.touches[0], e.touches[1], scale);
         return;
       }
       if (e.touches.length === 1) {
-        panRef.current = startPan(e.touches[0].clientX, e.touches[0].clientY, offsetX, offsetY);
+        const touch = e.touches[0];
+        if (touchSwipeable && images.length > 1 && scale === 1) {
+          touchSwipeRef.current = {
+            isTracking: true,
+            startX: touch.clientX,
+            startY: touch.clientY,
+            currentX: touch.clientX,
+            currentY: touch.clientY
+          };
+          panRef.current = createPanState();
+          return;
+        }
+        touchSwipeRef.current.isTracking = false;
+        panRef.current = startPan(touch.clientX, touch.clientY, offsetX, offsetY);
       }
     },
-    [offsetX, offsetY, scale]
+    [images.length, offsetX, offsetY, scale, touchSwipeable]
   );
   const handleTouchMove = useCallback(
     (e) => {
@@ -201,14 +237,44 @@ var ImagePreview = ({
         const next = movePan(panRef.current, e.touches[0].clientX, e.touches[0].clientY);
         setOffsetX(next.translateX);
         setOffsetY(next.translateY);
+        return;
+      }
+      if (e.touches.length === 1 && touchSwipeRef.current.isTracking) {
+        const touch = e.touches[0];
+        touchSwipeRef.current.currentX = touch.clientX;
+        touchSwipeRef.current.currentY = touch.clientY;
+        const deltaX = touch.clientX - touchSwipeRef.current.startX;
+        const deltaY = touch.clientY - touchSwipeRef.current.startY;
+        if (Math.abs(deltaX) > 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+          e.preventDefault();
+        }
       }
     },
     [maxScale, minScale, onScaleChange]
   );
-  const handleTouchEnd = useCallback(() => {
-    panRef.current = createPanState();
-    pinchRef.current = createPinchState();
-  }, []);
+  const handleTouchEnd = useCallback(
+    (e) => {
+      if (touchSwipeRef.current.isTracking) {
+        const endedTouch = e?.changedTouches?.[0];
+        const currentX = endedTouch?.clientX ?? touchSwipeRef.current.currentX;
+        const currentY = endedTouch?.clientY ?? touchSwipeRef.current.currentY;
+        const deltaX = currentX - touchSwipeRef.current.startX;
+        const deltaY = currentY - touchSwipeRef.current.startY;
+        const threshold = Math.max(0, touchSwipeThreshold);
+        if (Math.abs(deltaX) >= threshold && Math.abs(deltaX) > Math.abs(deltaY) * 1.2) {
+          if (deltaX < 0) {
+            handleNext();
+          } else {
+            handlePrev();
+          }
+        }
+      }
+      touchSwipeRef.current.isTracking = false;
+      panRef.current = createPanState();
+      pinchRef.current = createPinchState();
+    },
+    [handleNext, handlePrev, touchSwipeThreshold]
+  );
   const handleMaskClick = useCallback(
     (e) => {
       if (maskClosable && e.target === e.currentTarget) {
@@ -231,7 +297,7 @@ var ImagePreview = ({
         style: { zIndex },
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": "Image preview",
+        "aria-label": labels.previewDialogAriaLabel,
         onClick: handleMaskClick,
         onWheel: handleWheel,
         children: [
@@ -259,7 +325,7 @@ var ImagePreview = ({
             {
               className: imagePreviewCloseBtnClasses,
               onClick: handleClose,
-              "aria-label": "Close preview",
+              "aria-label": labels.closePreviewAriaLabel,
               type: "button",
               children: /* @__PURE__ */ jsx(SvgIcon, { d: previewCloseIconPath })
             }
@@ -270,7 +336,7 @@ var ImagePreview = ({
               className: classNames(imagePreviewNavBtnClasses, "left-4"),
               onClick: handlePrev,
               disabled: !navState.hasPrev,
-              "aria-label": "Previous image",
+              "aria-label": labels.previousImageAriaLabel,
               type: "button",
               children: /* @__PURE__ */ jsx(SvgIcon, { d: prevIconPath })
             }
@@ -281,7 +347,7 @@ var ImagePreview = ({
               className: classNames(imagePreviewNavBtnClasses, "right-4"),
               onClick: handleNext,
               disabled: !navState.hasNext,
-              "aria-label": "Next image",
+              "aria-label": labels.nextImageAriaLabel,
               type: "button",
               children: /* @__PURE__ */ jsx(SvgIcon, { d: nextIconPath })
             }
@@ -292,7 +358,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleZoomOut,
-                "aria-label": "Zoom out",
+                "aria-label": labels.zoomOutAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomOutIconPath })
               }
@@ -302,7 +368,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleReset,
-                "aria-label": "Reset",
+                "aria-label": labels.resetAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: resetIconPath })
               }
@@ -312,7 +378,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleZoomIn,
-                "aria-label": "Zoom in",
+                "aria-label": labels.zoomInAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomInIconPath })
               }
@@ -322,7 +388,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleRotateLeft,
-                "aria-label": "Rotate left",
+                "aria-label": labels.rotateLeftAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateLeft })
               }
@@ -332,7 +398,7 @@ var ImagePreview = ({
               {
                 className: imagePreviewToolbarBtnClasses,
                 onClick: handleRotateRight,
-                "aria-label": "Rotate right",
+                "aria-label": labels.rotateRightAriaLabel,
                 type: "button",
                 children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateRight })
               }

package/dist/chunk-WLFLQB4R.mjs

@@ -0,0 +1,312 @@
+import {
+  useTigerConfig
+} from "./chunk-QAIBQHIO.mjs";
+
+// src/components/Calendar.tsx
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { classNames } from "@expcat/tigercat-core";
+import {
+  getCalendarContainerClasses,
+  calendarHeaderClasses,
+  calendarNavButtonClasses,
+  calendarTitleClasses,
+  calendarWeekdayClasses,
+  getCalendarDayClasses,
+  getCalendarMonthClasses,
+  isSameDay,
+  getMonthDays,
+  getShortDayNames,
+  getShortMonthNames,
+  formatMonthYear,
+  formatDate,
+  parseDate,
+  addDays,
+  getCalendarLabels,
+  mergeTigerLocale
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Calendar = ({
+  value,
+  mode = "month",
+  fullscreen = false,
+  disabledDate,
+  locale,
+  onChange,
+  onPanelChange,
+  className
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const localeCode = mergedLocale?.locale;
+  const labels = useMemo(() => getCalendarLabels(mergedLocale), [mergedLocale]);
+  const weekdayNames = useMemo(() => getShortDayNames(localeCode), [localeCode]);
+  const monthNames = useMemo(() => getShortMonthNames(localeCode), [localeCode]);
+  const today = /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = useState(value?.getFullYear() ?? today.getFullYear());
+  const [viewMonth, setViewMonth] = useState(value?.getMonth() ?? today.getMonth());
+  const days = useMemo(() => getMonthDays(viewYear, viewMonth), [viewYear, viewMonth]);
+  const weeks = useMemo(() => {
+    const out = [];
+    for (let i = 0; i < days.length; i += 7) out.push(days.slice(i, i + 7));
+    return out;
+  }, [days]);
+  const monthRows = useMemo(() => {
+    const out = [];
+    for (let i = 0; i < monthNames.length; i += 3) out.push(monthNames.slice(i, i + 3));
+    return out;
+  }, [monthNames]);
+  const navigate = useCallback(
+    (newYear, newMonth) => {
+      setViewYear(newYear);
+      setViewMonth(newMonth);
+      onPanelChange?.(new Date(newYear, newMonth, 1), mode);
+    },
+    [mode, onPanelChange]
+  );
+  const prevMonth = useCallback(() => {
+    if (viewMonth === 0) navigate(viewYear - 1, 11);
+    else navigate(viewYear, viewMonth - 1);
+  }, [viewYear, viewMonth, navigate]);
+  const nextMonth = useCallback(() => {
+    if (viewMonth === 11) navigate(viewYear + 1, 0);
+    else navigate(viewYear, viewMonth + 1);
+  }, [viewYear, viewMonth, navigate]);
+  const prevYear = useCallback(
+    () => navigate(viewYear - 1, viewMonth),
+    [viewYear, viewMonth, navigate]
+  );
+  const nextYear = useCallback(
+    () => navigate(viewYear + 1, viewMonth),
+    [viewYear, viewMonth, navigate]
+  );
+  const selectDay = useCallback(
+    (date) => {
+      if (disabledDate?.(date)) return;
+      onChange?.(date);
+    },
+    [disabledDate, onChange]
+  );
+  const selectMonth = useCallback(
+    (monthIdx) => {
+      setViewMonth(monthIdx);
+      onPanelChange?.(new Date(viewYear, monthIdx, 1), mode);
+    },
+    [viewYear, mode, onPanelChange]
+  );
+  const dayGridRef = useRef(null);
+  const pendingFocusIsoRef = useRef(null);
+  const [activeIso, setActiveIso] = useState(null);
+  const toIso = (d) => formatDate(d, "yyyy-MM-dd");
+  const defaultDayIso = (() => {
+    if (value && value.getFullYear() === viewYear && value.getMonth() === viewMonth)
+      return toIso(value);
+    if (today.getFullYear() === viewYear && today.getMonth() === viewMonth) return toIso(today);
+    return toIso(new Date(viewYear, viewMonth, 1));
+  })();
+  const rovingDayIso = activeIso ?? defaultDayIso;
+  const focusDayIso = (iso) => {
+    const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
+    if (el && !el.disabled) {
+      el.focus();
+      setActiveIso(iso);
+      return true;
+    }
+    return false;
+  };
+  const moveDayFocus = (deltaDays) => {
+    const activeEl = document.activeElement;
+    const currentIso = activeEl?.getAttribute("data-date") ?? rovingDayIso;
+    const base = parseDate(currentIso);
+    if (!base) return;
+    let candidate = addDays(base, deltaDays);
+    for (let attempts = 0; attempts < 42; attempts++) {
+      const iso = toIso(candidate);
+      const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
+      if (el && !el.disabled) {
+        el.focus();
+        setActiveIso(iso);
+        return;
+      }
+      if (!el) {
+        pendingFocusIsoRef.current = iso;
+        setActiveIso(iso);
+        navigate(candidate.getFullYear(), candidate.getMonth());
+        return;
+      }
+      candidate = addDays(candidate, deltaDays);
+    }
+  };
+  useEffect(() => {
+    const iso = pendingFocusIsoRef.current;
+    if (!iso) return;
+    const el = dayGridRef.current?.querySelector(`button[data-date="${iso}"]`);
+    if (el) {
+      el.focus();
+      pendingFocusIsoRef.current = null;
+    }
+  }, [days]);
+  const handleDayGridKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        moveDayFocus(-1);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        moveDayFocus(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveDayFocus(-7);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        moveDayFocus(7);
+        break;
+      case "Home":
+        e.preventDefault();
+        focusDayIso(toIso(new Date(viewYear, viewMonth, 1)));
+        break;
+      case "End":
+        e.preventDefault();
+        focusDayIso(toIso(new Date(viewYear, viewMonth + 1, 0)));
+        break;
+      case "Enter":
+      case " ": {
+        const activeEl = document.activeElement;
+        const iso = activeEl?.getAttribute("data-date");
+        if (iso) {
+          e.preventDefault();
+          const d = parseDate(iso);
+          if (d) selectDay(d);
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const [activeMonthIdx, setActiveMonthIdx] = useState(null);
+  const rovingMonthIdx = activeMonthIdx ?? viewMonth;
+  const monthGridRef = useRef(null);
+  const focusMonthIdx = (idx) => {
+    const els = monthGridRef.current?.querySelectorAll('button[role="gridcell"]');
+    els?.[idx]?.focus();
+    setActiveMonthIdx(idx);
+  };
+  const handleMonthKeyDown = (e, idx) => {
+    let target = idx;
+    switch (e.key) {
+      case "ArrowRight":
+        target = Math.min(11, idx + 1);
+        break;
+      case "ArrowLeft":
+        target = Math.max(0, idx - 1);
+        break;
+      case "ArrowDown":
+        target = Math.min(11, idx + 3);
+        break;
+      case "ArrowUp":
+        target = Math.max(0, idx - 3);
+        break;
+      case "Home":
+        target = 0;
+        break;
+      case "End":
+        target = 11;
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        selectMonth(idx);
+        return;
+      default:
+        return;
+    }
+    e.preventDefault();
+    focusMonthIdx(target);
+  };
+  const containerClass = classNames(getCalendarContainerClasses(fullscreen), className);
+  return /* @__PURE__ */ jsxs("div", { className: containerClass, role: "group", children: [
+    /* @__PURE__ */ jsxs("div", { className: calendarHeaderClasses, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: calendarNavButtonClasses,
+          "aria-label": mode === "month" ? labels.previousMonth : labels.previousYear,
+          onClick: mode === "month" ? prevMonth : prevYear,
+          children: "\u2039"
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: calendarTitleClasses, children: mode === "month" ? formatMonthYear(viewYear, viewMonth, localeCode) : `${viewYear}` }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: calendarNavButtonClasses,
+          "aria-label": mode === "month" ? labels.nextMonth : labels.nextYear,
+          onClick: mode === "month" ? nextMonth : nextYear,
+          children: "\u203A"
+        }
+      )
+    ] }),
+    mode === "year" ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2", role: "grid", ref: monthGridRef, children: monthRows.map((row, ri) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-2", role: "row", children: row.map((m, ci) => {
+      const i = ri * 3 + ci;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "gridcell",
+          "aria-selected": viewMonth === i,
+          tabIndex: rovingMonthIdx === i ? 0 : -1,
+          className: getCalendarMonthClasses(viewMonth === i),
+          onClick: () => selectMonth(i),
+          onFocus: () => setActiveMonthIdx(i),
+          onKeyDown: (e) => handleMonthKeyDown(e, i),
+          children: m
+        },
+        i
+      );
+    }) }, ri)) }) : /* @__PURE__ */ jsxs("div", { role: "grid", "aria-rowcount": 7, "aria-colcount": 7, ref: dayGridRef, children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", role: "row", children: weekdayNames.map((wd) => /* @__PURE__ */ jsx("div", { className: calendarWeekdayClasses, role: "columnheader", children: wd }, wd)) }),
+      weeks.map((week, wi) => /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7", role: "row", onKeyDown: handleDayGridKeyDown, children: week.map((date) => {
+        const isCurrentMonth = date.getMonth() === viewMonth;
+        const isSelected = value ? isSameDay(date, value) : false;
+        const isTodayDate = isSameDay(date, today);
+        const isDisabled = !!disabledDate?.(date);
+        const iso = toIso(date);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "gridcell",
+            "data-date": iso,
+            "aria-label": iso,
+            "aria-selected": isSelected,
+            "aria-current": isTodayDate ? "date" : void 0,
+            disabled: isDisabled,
+            tabIndex: rovingDayIso === iso && !isDisabled ? 0 : -1,
+            className: classNames(
+              getCalendarDayClasses(isSelected, isTodayDate, isCurrentMonth, isDisabled),
+              "justify-self-center my-0.5"
+            ),
+            onClick: () => selectDay(date),
+            onFocus: () => setActiveIso(iso),
+            children: date.getDate()
+          },
+          iso
+        );
+      }) }, wi))
+    ] })
+  ] });
+};
+var Calendar_default = Calendar;
+
+export {
+  Calendar,
+  Calendar_default
+};

package/dist/{chunk-2LYV6NBJ.mjs → chunk-WTIEJCRV.mjs}

@@ -11,6 +11,7 @@ import { useEffect, useState, useMemo } from "react";
 import {
   classNames,
   resolveLocaleText,
+  mergeTigerLocale,
   getLoadingBarClasses,
   getLoadingBarsWrapperClasses,
   getLoadingClasses,
@@ -36,9 +37,14 @@ var Loading = ({
   lockScroll = true,
   className,
   style,
+  locale,
   ...props
 }) => {
   const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
   const [visible, setVisible] = useState(delay <= 0);
   useEffect(() => {
     injectLoadingAnimationStyles();
@@ -121,7 +127,7 @@ var Loading = ({
       className: containerClasses,
       style: mergedStyle,
       role: "status",
-      "aria-label": text || resolveLocaleText("Loading", config.locale?.common?.loadingText),
+      "aria-label": text || resolveLocaleText("Loading", mergedLocale?.common?.loadingText),
       "aria-live": "polite",
       "aria-busy": true,
       ...props,