@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/{chunk-CUAXRBKO.mjs → chunk-OP77MPGN.mjs}

@@ -1,18 +1,21 @@
 // src/components/ChartCanvas.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import {
   chartCanvasBaseClasses,
+  chartCanvasHostClasses,
   classNames,
   createChartResizeObserverController,
+  DEFAULT_CHART_PADDING,
+  DEFAULT_CHART_SIZE,
   getChartInnerRect,
   resolveResponsiveChartSize
 } from "@expcat/tigercat-core";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ChartCanvas = ({
-  width = 320,
-  height = 200,
+  width = DEFAULT_CHART_SIZE.width,
+  height = DEFAULT_CHART_SIZE.height,
   responsive = false,
-  padding = 24,
+  padding = DEFAULT_CHART_PADDING,
   className,
   title,
   desc,
@@ -20,7 +23,8 @@ var ChartCanvas = ({
   onResolvedSizeChange,
   ...props
 }) => {
-  const svgRef = useRef(null);
+  const hostRef = useRef(null);
+  const labelId = useId();
   const [observedSize, setObservedSize] = useState(null);
   const lastReportedSizeRef = useRef(null);
   const resizeControllerRef = useRef(
@@ -37,6 +41,9 @@ var ChartCanvas = ({
     [resolvedSize.width, resolvedSize.height, padding]
   );
   const svgClasses = useMemo(() => classNames(chartCanvasBaseClasses, className), [className]);
+  const titleId = title ? `${labelId}-title` : void 0;
+  const descId = desc ? `${labelId}-desc` : void 0;
+  const named = Boolean(title || props["aria-label"]);
   useEffect(() => {
     const controller = resizeControllerRef.current;
     if (!responsive) {
@@ -44,7 +51,7 @@ var ChartCanvas = ({
       setObservedSize(null);
       return void 0;
     }
-    const target = svgRef.current?.parentElement;
+    const target = hostRef.current;
     if (!target) return void 0;
     controller.observe(target);
     return () => controller.disconnect();
@@ -59,22 +66,25 @@ var ChartCanvas = ({
     lastReportedSizeRef.current = nextSize;
     onResolvedSizeChange(nextSize);
   }, [resolvedSize.width, resolvedSize.height, onResolvedSizeChange]);
-  return /* @__PURE__ */ jsxs(
+  const content = typeof children === "function" ? children({ innerRect, width: resolvedSize.width, height: resolvedSize.height }) : children;
+  return /* @__PURE__ */ jsx("div", { ref: hostRef, className: chartCanvasHostClasses, "data-chart-canvas-host": "", children: /* @__PURE__ */ jsxs(
     "svg",
     {
       ...props,
-      ref: svgRef,
       width: resolvedSize.width,
       height: resolvedSize.height,
       viewBox: `0 0 ${resolvedSize.width} ${resolvedSize.height}`,
       className: svgClasses,
+      role: named ? "img" : void 0,
+      "aria-labelledby": titleId,
+      "aria-describedby": descId,
       children: [
-        title ? /* @__PURE__ */ jsx("title", { children: title }) : null,
-        desc ? /* @__PURE__ */ jsx("desc", { children: desc }) : null,
-        /* @__PURE__ */ jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children })
+        title ? /* @__PURE__ */ jsx("title", { id: titleId, children: title }) : null,
+        desc ? /* @__PURE__ */ jsx("desc", { id: descId, children: desc }) : null,
+        /* @__PURE__ */ jsx("g", { transform: `translate(${innerRect.x}, ${innerRect.y})`, children: content })
       ]
     }
-  );
+  ) });
 };
 var ChartCanvas_default = ChartCanvas;
 

package/dist/chunk-OTABJT7Z.mjs

@@ -0,0 +1,61 @@
+import {
+  StatusIcon
+} from "./chunk-ED7QR6PJ.mjs";
+
+// src/components/Result.tsx
+import { forwardRef, useMemo } from "react";
+import {
+  classNames,
+  resultBaseClasses,
+  resultIconContainerBaseClasses,
+  resultIconClasses,
+  resultHttpLabelClasses,
+  resultTitleClasses,
+  resultSubTitleClasses,
+  resultExtraClasses,
+  RESULT_ICON_SIZE_PX,
+  getResultColorScheme,
+  getResultIconPath,
+  isHttpResultStatus,
+  resultHeadingTag
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Result = forwardRef(function Result2({ status = "info", title, subTitle, headingLevel, icon, extra, className, children, ...props }, ref) {
+  const colors = useMemo(() => getResultColorScheme(status), [status]);
+  const iconPath = useMemo(() => getResultIconPath(status), [status]);
+  const httpLabel = isHttpResultStatus(status) ? status : void 0;
+  const hasTitle = title !== void 0 && title !== null && title !== false && title !== "";
+  const Heading = resultHeadingTag(headingLevel);
+  const wrapperClasses = classNames(resultBaseClasses, className);
+  const iconSvgCls = classNames(resultIconClasses, colors.iconColor);
+  const titleCls = resultTitleClasses;
+  return /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, ...props, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: resultIconContainerBaseClasses,
+        style: {
+          width: RESULT_ICON_SIZE_PX,
+          height: RESULT_ICON_SIZE_PX,
+          background: colors.iconBg
+        },
+        children: icon !== void 0 ? icon : httpLabel ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: classNames(resultHttpLabelClasses, colors.iconColor),
+            "aria-hidden": hasTitle ? true : void 0,
+            children: httpLabel
+          }
+        ) : /* @__PURE__ */ jsx(StatusIcon, { path: iconPath, className: iconSvgCls, "aria-hidden": "true", focusable: "false" })
+      }
+    ),
+    hasTitle ? /* @__PURE__ */ jsx(Heading, { className: titleCls, children: title }) : null,
+    subTitle ? /* @__PURE__ */ jsx("div", { className: resultSubTitleClasses, children: subTitle }) : null,
+    extra ? /* @__PURE__ */ jsx("div", { className: resultExtraClasses, children: extra }) : null,
+    children ? /* @__PURE__ */ jsx("div", { className: "mt-6 w-full", children }) : null
+  ] });
+});
+
+export {
+  Result
+};

package/dist/chunk-OYQ6HTLQ.mjs

@@ -0,0 +1,457 @@
+import {
+  renderBodyPortal,
+  useBodyScrollLock,
+  useEscapeKey,
+  useFocusTrap
+} from "./chunk-NPGU6VYD.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ImagePreview.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  applyWheelZoom,
+  captureActiveElement,
+  classNames,
+  createDefaultTransform,
+  createLightboxGestureSession,
+  focusFirst,
+  formatLightboxImageAlt,
+  getImageTransformStyle,
+  getImageViewerLabels,
+  getLightboxNavState,
+  clampLightboxIndex,
+  imagePreviewCloseBtnClasses,
+  imagePreviewCounterClasses,
+  imagePreviewImgClasses,
+  imagePreviewImgMotionClasses,
+  imagePreviewMaskClasses,
+  imagePreviewNavNextClasses,
+  imagePreviewNavPrevClasses,
+  imagePreviewToolbarBtnClasses,
+  imagePreviewToolbarClasses,
+  imagePreviewWrapperClasses,
+  imageViewerIcons,
+  LIGHTBOX_SCALE_STEP,
+  lightboxShouldClose,
+  mergeTigerLocale,
+  nextIconPath,
+  normalizeRotation,
+  OVERLAY_Z_INDEX,
+  previewCloseIconPath,
+  prevIconPath,
+  resetIconPath,
+  resolveLightboxImages,
+  resolveLightboxKeyAction,
+  resolveLightboxNavIndex,
+  resolveLightboxScaleRange,
+  restoreFocus,
+  zoomInIconPath,
+  zoomOutIconPath
+} from "@expcat/tigercat-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: cls,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d })
+  }
+);
+var ImagePreview = ({
+  open,
+  images,
+  currentIndex = 0,
+  zIndex,
+  maskClosable = true,
+  scaleStep = LIGHTBOX_SCALE_STEP,
+  minScale,
+  maxScale,
+  touchSwipeable = true,
+  touchSwipeThreshold = 48,
+  zoomable = true,
+  rotatable = true,
+  showNav = true,
+  showCounter = true,
+  locale,
+  className,
+  style,
+  onOpenChange,
+  onCurrentIndexChange,
+  onScaleChange,
+  onKeyDown,
+  ...rest
+}) => {
+  const config = useTigerConfig();
+  const mergedLocale = useMemo(
+    () => mergeTigerLocale(config.locale, locale),
+    [config.locale, locale]
+  );
+  const labels = useMemo(() => getImageViewerLabels(mergedLocale), [mergedLocale]);
+  const scaleRange = useMemo(
+    () => resolveLightboxScaleRange({ minScale, maxScale }),
+    [minScale, maxScale]
+  );
+  const resolved = useMemo(() => resolveLightboxImages(images), [images]);
+  const isOpen = open ?? false;
+  const shouldRender = isOpen && resolved.length > 0;
+  const [transform, setTransform] = useState(createDefaultTransform);
+  const [index, setIndex] = useState(
+    () => resolved.length ? Math.min(Math.max(0, currentIndex), resolved.length - 1) : 0
+  );
+  const [dragging, setDragging] = useState(false);
+  const rootRef = useRef(null);
+  const closeButtonRef = useRef(null);
+  const previousActiveRef = useRef(null);
+  const transformRef = useRef(transform);
+  const indexRef = useRef(index);
+  const resolvedRef = useRef(resolved);
+  const onCurrentIndexChangeRef = useRef(onCurrentIndexChange);
+  const onScaleChangeRef = useRef(onScaleChange);
+  const gestureRef = useRef(null);
+  transformRef.current = transform;
+  indexRef.current = index;
+  resolvedRef.current = resolved;
+  onCurrentIndexChangeRef.current = onCurrentIndexChange;
+  onScaleChangeRef.current = onScaleChange;
+  const resetTransform = useCallback(() => {
+    setTransform(createDefaultTransform());
+    setDragging(false);
+  }, []);
+  useEffect(() => {
+    if (lightboxShouldClose(isOpen, resolved.length)) {
+      onOpenChange?.(false);
+    }
+  }, [isOpen, resolved.length, onOpenChange]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const nextIndex = resolved.length === 0 ? 0 : Math.min(Math.max(0, Math.floor(currentIndex)), resolved.length - 1);
+    setIndex(nextIndex);
+    resetTransform();
+  }, [isOpen, currentIndex, resolved.length, resetTransform]);
+  useBodyScrollLock({ enabled: shouldRender });
+  useFocusTrap({ enabled: shouldRender, containerRef: rootRef, inert: true });
+  const handleClose = useCallback(() => {
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  useEscapeKey({ enabled: shouldRender, onEscape: handleClose, layerRef: rootRef });
+  const applyIndex = useCallback(
+    (next) => {
+      setIndex(next);
+      resetTransform();
+      onCurrentIndexChangeRef.current?.(next);
+    },
+    [resetTransform]
+  );
+  const handlePrev = useCallback(() => {
+    const next = resolveLightboxNavIndex(indexRef.current, resolvedRef.current.length, "prev");
+    if (next === null) return;
+    applyIndex(next);
+  }, [applyIndex]);
+  const handleNext = useCallback(() => {
+    const next = resolveLightboxNavIndex(indexRef.current, resolvedRef.current.length, "next");
+    if (next === null) return;
+    applyIndex(next);
+  }, [applyIndex]);
+  const setScale = useCallback((next) => {
+    setTransform((current2) => ({ ...current2, scale: next }));
+    onScaleChangeRef.current?.(next);
+  }, []);
+  const handleZoomIn = useCallback(() => {
+    const current2 = transformRef.current.scale;
+    setScale(Math.min(current2 + scaleStep, scaleRange.maxScale));
+  }, [scaleRange.maxScale, scaleStep, setScale]);
+  const handleZoomOut = useCallback(() => {
+    const current2 = transformRef.current.scale;
+    setScale(Math.max(current2 - scaleStep, scaleRange.minScale));
+  }, [scaleRange.minScale, scaleStep, setScale]);
+  const handleReset = useCallback(() => {
+    resetTransform();
+    onScaleChangeRef.current?.(1);
+  }, [resetTransform]);
+  const handleRotateLeft = useCallback(() => {
+    setTransform((current2) => ({ ...current2, rotation: normalizeRotation(current2.rotation - 90) }));
+  }, []);
+  const handleRotateRight = useCallback(() => {
+    setTransform((current2) => ({ ...current2, rotation: normalizeRotation(current2.rotation + 90) }));
+  }, []);
+  useEffect(() => {
+    if (!shouldRender) return;
+    previousActiveRef.current = captureActiveElement();
+    const timer = window.setTimeout(() => {
+      focusFirst([closeButtonRef.current, rootRef.current]);
+    }, 0);
+    return () => {
+      window.clearTimeout(timer);
+      restoreFocus(previousActiveRef.current);
+    };
+  }, [shouldRender]);
+  useEffect(() => {
+    if (!shouldRender) return;
+    const handler = (event) => {
+      const action = resolveLightboxKeyAction(event.key, {
+        canNavigate: showNav && resolvedRef.current.length > 1,
+        zoomable,
+        rotatable,
+        rtl: config.direction === "rtl"
+      });
+      if (!action) return;
+      event.preventDefault();
+      switch (action) {
+        case "prev":
+          handlePrev();
+          break;
+        case "next":
+          handleNext();
+          break;
+        case "zoomIn":
+          handleZoomIn();
+          break;
+        case "zoomOut":
+          handleZoomOut();
+          break;
+        case "rotateLeft":
+          handleRotateLeft();
+          break;
+        case "rotateRight":
+          handleRotateRight();
+          break;
+        case "reset":
+          handleReset();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [
+    config.direction,
+    handleNext,
+    handlePrev,
+    handleReset,
+    handleRotateLeft,
+    handleRotateRight,
+    handleZoomIn,
+    handleZoomOut,
+    rotatable,
+    shouldRender,
+    showNav,
+    zoomable
+  ]);
+  useEffect(() => {
+    if (!shouldRender) return;
+    const root = rootRef.current;
+    if (!root) return;
+    const handler = (event) => {
+      if (!zoomable) return;
+      event.preventDefault();
+      const next = applyWheelZoom(transformRef.current.scale, event.deltaY, scaleRange);
+      setScale(next);
+    };
+    root.addEventListener("wheel", handler, { passive: false });
+    return () => root.removeEventListener("wheel", handler);
+  }, [scaleRange, setScale, shouldRender, zoomable]);
+  useEffect(() => {
+    if (!shouldRender) {
+      gestureRef.current?.dispose();
+      gestureRef.current = null;
+      return;
+    }
+    const session = createLightboxGestureSession({
+      getScale: () => transformRef.current.scale,
+      getTranslate: () => ({
+        x: transformRef.current.translateX,
+        y: transformRef.current.translateY
+      }),
+      minScale: scaleRange.minScale,
+      maxScale: scaleRange.maxScale,
+      zoomable,
+      swipeable: touchSwipeable,
+      swipeThreshold: touchSwipeThreshold,
+      imageCount: resolved.length,
+      onTransform: (next) => {
+        setTransform((current2) => ({ ...current2, ...next }));
+        if (next.scale != null) onScaleChangeRef.current?.(next.scale);
+      },
+      onSwipe: (direction) => {
+        if (direction === "prev") handlePrev();
+        else handleNext();
+      },
+      onDraggingChange: setDragging
+    });
+    gestureRef.current = session;
+    return () => {
+      session.dispose();
+      if (gestureRef.current === session) gestureRef.current = null;
+    };
+  }, [
+    handleNext,
+    handlePrev,
+    resolved.length,
+    scaleRange.maxScale,
+    scaleRange.minScale,
+    shouldRender,
+    touchSwipeThreshold,
+    touchSwipeable,
+    zoomable
+  ]);
+  const displayIndex = clampLightboxIndex(index, resolved.length);
+  const navState = getLightboxNavState(displayIndex, resolved.length);
+  const current = resolved[displayIndex];
+  const currentAlt = formatLightboxImageAlt(
+    current,
+    displayIndex,
+    resolved.length,
+    labels.previewImageAriaLabel
+  );
+  const canZoomOut = transform.scale <= scaleRange.minScale + 1e-6;
+  const canZoomIn = transform.scale >= scaleRange.maxScale - 1e-6;
+  const showNavigation = showNav && resolved.length > 1;
+  const showCount = showCounter && resolved.length > 1;
+  const handleMaskClick = useCallback(() => {
+    if (maskClosable) handleClose();
+  }, [handleClose, maskClosable]);
+  const handlePointerDown = useCallback((event) => {
+    gestureRef.current?.pointerDown(event.nativeEvent);
+  }, []);
+  if (!shouldRender || !current) return null;
+  const rootStyle = zIndex != null && zIndex !== OVERLAY_Z_INDEX.modal ? { ...style, zIndex } : style;
+  return renderBodyPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: rootRef,
+        className: classNames(imagePreviewWrapperClasses, className),
+        style: rootStyle,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": labels.previewDialogAriaLabel,
+        tabIndex: -1,
+        "data-tiger-overlay-host": "",
+        "data-tiger-image-preview": "",
+        onKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: imagePreviewMaskClasses, "aria-hidden": "true", onClick: handleMaskClick }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: current.src,
+              className: classNames(imagePreviewImgClasses, !dragging && imagePreviewImgMotionClasses),
+              style: { transform: getImageTransformStyle(transform) },
+              alt: currentAlt,
+              draggable: false,
+              onPointerDown: handlePointerDown
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: closeButtonRef,
+              className: imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": labels.closePreviewAriaLabel,
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: previewCloseIconPath })
+            }
+          ),
+          showNavigation && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: imagePreviewNavPrevClasses,
+              onClick: handlePrev,
+              disabled: !navState.hasPrev,
+              "aria-label": labels.previousImageAriaLabel,
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: prevIconPath })
+            }
+          ),
+          showNavigation && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: imagePreviewNavNextClasses,
+              onClick: handleNext,
+              disabled: !navState.hasNext,
+              "aria-label": labels.nextImageAriaLabel,
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: nextIconPath })
+            }
+          ),
+          (zoomable || rotatable || showCount) && /* @__PURE__ */ jsxs("div", { className: imagePreviewToolbarClasses, children: [
+            zoomable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: imagePreviewToolbarBtnClasses,
+                  onClick: handleZoomOut,
+                  disabled: canZoomOut,
+                  "aria-label": labels.zoomOutAriaLabel,
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomOutIconPath })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: imagePreviewToolbarBtnClasses,
+                  onClick: handleReset,
+                  "aria-label": labels.resetAriaLabel,
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(SvgIcon, { d: resetIconPath })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: imagePreviewToolbarBtnClasses,
+                  onClick: handleZoomIn,
+                  disabled: canZoomIn,
+                  "aria-label": labels.zoomInAriaLabel,
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomInIconPath })
+                }
+              )
+            ] }),
+            rotatable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: imagePreviewToolbarBtnClasses,
+                  onClick: handleRotateLeft,
+                  "aria-label": labels.rotateLeftAriaLabel,
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateLeft })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: imagePreviewToolbarBtnClasses,
+                  onClick: handleRotateRight,
+                  "aria-label": labels.rotateRightAriaLabel,
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(SvgIcon, { d: imageViewerIcons.rotateRight })
+                }
+              )
+            ] }),
+            showCount && navState.counter ? /* @__PURE__ */ jsx("span", { className: imagePreviewCounterClasses, "aria-live": "polite", children: navState.counter }) : null
+          ] })
+        ]
+      }
+    )
+  );
+};
+
+export {
+  ImagePreview
+};