@expcat/tigercat-react 0.3.0 → 0.3.70

package/dist/{chunk-IY4LEJYF.js → chunk-4PPTEEDI.js}

@@ -4,25 +4,24 @@ var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/Skeleton.tsx
-var Skeleton = (props) => {
-  const {
-    variant = "text",
-    animation = "pulse",
-    width,
-    height,
-    shape = "circle",
-    rows = 1,
-    paragraph = false,
-    className,
-    style,
-    ["aria-label"]: ariaLabelProp,
-    ["aria-labelledby"]: ariaLabelledByProp,
-    ["aria-hidden"]: ariaHiddenProp,
-    ...divProps
-  } = props;
-  const skeletonClasses = tigercatCore.classNames(tigercatCore.getSkeletonClasses(variant, animation, shape), className);
+var Skeleton = ({
+  variant = "text",
+  animation = "pulse",
+  width,
+  height,
+  shape = "circle",
+  rows = 1,
+  paragraph = false,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-hidden": ariaHidden,
+  ...divProps
+}) => {
+  const visualClasses = tigercatCore.getSkeletonClasses(variant, animation, shape);
   const dimensions = tigercatCore.getSkeletonDimensions(variant, width, height);
-  const computedAriaHidden = ariaHiddenProp ?? (ariaLabelProp || ariaLabelledByProp ? void 0 : true);
+  const computedAriaHidden = ariaHidden ?? (ariaLabel || ariaLabelledBy ? void 0 : true);
   if (variant === "text" && rows > 1) {
     const rowElements = [];
     for (let i = 0; i < rows; i++) {
@@ -38,9 +37,8 @@ var Skeleton = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: tigercatCore.classNames(skeletonClasses, i < rows - 1 && "mb-2"),
-            style: rowStyle,
-            "aria-hidden": computedAriaHidden
+            className: tigercatCore.classNames(visualClasses, i < rows - 1 && "mb-2"),
+            style: rowStyle
           },
           i
         )
@@ -52,24 +50,25 @@ var Skeleton = (props) => {
         ...divProps,
         className: tigercatCore.classNames("flex flex-col", className),
         style,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
         "aria-hidden": computedAriaHidden,
         children: rowElements
       }
     );
   }
-  const skeletonStyle = {
-    ...style,
-    ...dimensions.width ? { width: dimensions.width } : null,
-    height: dimensions.height
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...divProps,
-      className: skeletonClasses,
-      style: skeletonStyle,
-      "aria-label": ariaLabelProp,
-      "aria-labelledby": ariaLabelledByProp,
+      className: tigercatCore.classNames(visualClasses, className),
+      style: {
+        ...style,
+        ...dimensions.width ? { width: dimensions.width } : void 0,
+        height: dimensions.height
+      },
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
       "aria-hidden": computedAriaHidden
     }
   );

package/dist/{chunk-Z4Z3I74Q.mjs → chunk-4Y7YH32A.mjs}

@@ -1,4 +1,4 @@
-import { clampPercentage, getStatusVariant, formatProgressText, classNames, progressLineBaseClasses, progressTrackBgClasses, progressLineSizeClasses, progressLineInnerClasses, getProgressVariantClasses, progressStripedClasses, progressStripedAnimationClasses, progressTextBaseClasses, progressTextSizeClasses, getProgressTextColorClasses, getCircleSize, calculateCirclePath, progressCircleTrackStrokeClasses, progressCircleTextClasses, progressCircleBaseClasses } from '@expcat/tigercat-core';
+import { clampPercentage, getStatusVariant, formatProgressText, classNames, progressLineInnerClasses, getProgressVariantClasses, progressStripedClasses, progressStripedAnimationClasses, progressLineBaseClasses, progressTrackBgClasses, progressLineSizeClasses, progressTextBaseClasses, progressTextSizeClasses, getProgressTextColorClasses, getCircleSize, calculateCirclePath, progressCircleTrackStrokeClasses, progressCircleTextClasses, progressCircleBaseClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/components/Progress.tsx
@@ -28,69 +28,66 @@ var Progress = ({
   const shouldShowText = showText ?? type === "line";
   const displayText = shouldShowText ? formatProgressText(clampedPercentage, text, format) : "";
   const resolvedAriaLabel = ariaLabel ?? (ariaLabelledby ? void 0 : `Progress: ${clampedPercentage}%`);
-  const lineTrackClasses = classNames(
-    progressLineBaseClasses,
-    progressTrackBgClasses,
-    !height && progressLineSizeClasses[size]
-  );
-  const lineBarClasses = classNames(
-    progressLineInnerClasses,
-    getProgressVariantClasses(effectiveVariant),
-    striped && progressStripedClasses,
-    striped && stripedAnimation && progressStripedAnimationClasses
-  );
-  const textClasses = classNames(
-    progressTextBaseClasses,
-    progressTextSizeClasses[size],
-    getProgressTextColorClasses(effectiveVariant)
-  );
+  const ariaAttrs = {
+    role: "progressbar",
+    "aria-label": resolvedAriaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
+    "aria-valuenow": clampedPercentage,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100
+  };
   const renderLineProgress = () => {
     const containerStyle = width !== "auto" ? { width: typeof width === "number" ? `${width}px` : width } : {};
-    const mergedStyle = {
-      ...style ?? {},
-      ...containerStyle
-    };
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ...props,
         className: classNames("flex items-center w-full", className),
-        style: mergedStyle,
+        style: { ...style ?? {}, ...containerStyle },
         children: [
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: lineTrackClasses,
+              className: classNames(
+                progressLineBaseClasses,
+                progressTrackBgClasses,
+                !height && progressLineSizeClasses[size]
+              ),
               style: { flex: 1, ...height ? { height: `${height}px` } : {} },
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: lineBarClasses,
+                  className: classNames(
+                    progressLineInnerClasses,
+                    getProgressVariantClasses(effectiveVariant),
+                    striped && progressStripedClasses,
+                    striped && stripedAnimation && progressStripedAnimationClasses
+                  ),
                   style: { width: `${clampedPercentage}%` },
-                  role: "progressbar",
-                  "aria-label": resolvedAriaLabel,
-                  "aria-labelledby": ariaLabelledby,
-                  "aria-describedby": ariaDescribedby,
-                  "aria-valuenow": clampedPercentage,
-                  "aria-valuemin": 0,
-                  "aria-valuemax": 100
+                  ...ariaAttrs
                 }
               )
             }
           ),
-          shouldShowText && /* @__PURE__ */ jsx("span", { className: textClasses, children: displayText })
+          shouldShowText && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames(
+                progressTextBaseClasses,
+                progressTextSizeClasses[size],
+                getProgressTextColorClasses(effectiveVariant)
+              ),
+              children: displayText
+            }
+          )
         ]
       }
     );
   };
   const renderCircleProgress = () => {
     const { width: svgWidth, height: svgHeight, radius, cx, cy } = getCircleSize(size, strokeWidth);
-    const { strokeDasharray, strokeDashoffset } = calculateCirclePath(
-      radius,
-      strokeWidth,
-      clampedPercentage
-    );
-    const strokeColor = getProgressVariantClasses(effectiveVariant).replace("bg-", "text-");
+    const { strokeDasharray, strokeDashoffset } = calculateCirclePath(radius, clampedPercentage);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -123,7 +120,7 @@ var Progress = ({
                 r: radius,
                 fill: "none",
                 stroke: "currentColor",
-                className: strokeColor,
+                className: getProgressVariantClasses(effectiveVariant).replace("bg-", "text-"),
                 strokeWidth,
                 strokeLinecap: "round",
                 strokeDasharray,
@@ -133,13 +130,7 @@ var Progress = ({
                   transform: "rotate(-90deg)",
                   transformOrigin: "center"
                 },
-                role: "progressbar",
-                "aria-label": resolvedAriaLabel,
-                "aria-labelledby": ariaLabelledby,
-                "aria-describedby": ariaDescribedby,
-                "aria-valuenow": clampedPercentage,
-                "aria-valuemin": 0,
-                "aria-valuemax": 100
+                ...ariaAttrs
               }
             )
           ] }),

package/dist/chunk-56KTCMRE.mjs

@@ -0,0 +1,77 @@
+import { usePopup } from './chunk-3PV2MDST.mjs';
+import { useRef, useMemo } from 'react';
+import { createFloatingIdFactory, classNames, getPopoverContainerClasses, getPopoverTriggerClasses, getPopoverContentClasses, POPOVER_TITLE_CLASSES, POPOVER_TEXT_CLASSES } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var createPopoverId = createFloatingIdFactory("popover");
+var Popover = ({
+  visible,
+  defaultVisible = false,
+  title,
+  content,
+  trigger = "click",
+  placement = "top",
+  disabled = false,
+  width,
+  offset = 8,
+  className,
+  style,
+  children,
+  titleContent,
+  contentContent,
+  onVisibleChange,
+  ...divProps
+}) => {
+  const popoverIdRef = useRef(null);
+  if (!popoverIdRef.current) popoverIdRef.current = createPopoverId();
+  const popoverId = popoverIdRef.current;
+  const titleId = `${popoverId}-title`;
+  const contentId = `${popoverId}-content`;
+  const {
+    currentVisible,
+    containerRef,
+    triggerRef,
+    floatingRef,
+    floatingStyles,
+    triggerHandlers
+  } = usePopup({ visible, defaultVisible, disabled, trigger, placement, offset, onVisibleChange });
+  const containerClasses = useMemo(
+    () => classNames(getPopoverContainerClasses(), className),
+    [className]
+  );
+  const triggerClasses = useMemo(() => getPopoverTriggerClasses(disabled), [disabled]);
+  const contentClasses = useMemo(() => getPopoverContentClasses(width), [width]);
+  if (!children) return null;
+  const hasTitle = Boolean(title || titleContent);
+  const hasContent = Boolean(content || contentContent);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style, ...divProps, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: triggerRef,
+        className: triggerClasses,
+        "aria-haspopup": "dialog",
+        "aria-disabled": disabled ? "true" : void 0,
+        ...triggerHandlers,
+        children
+      }
+    ),
+    currentVisible && /* @__PURE__ */ jsx("div", { ref: floatingRef, style: floatingStyles, "aria-hidden": false, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: popoverId,
+        role: "dialog",
+        "aria-modal": "false",
+        "aria-labelledby": hasTitle ? titleId : void 0,
+        "aria-describedby": hasContent ? contentId : void 0,
+        className: contentClasses,
+        children: [
+          hasTitle && /* @__PURE__ */ jsx("div", { id: titleId, className: POPOVER_TITLE_CLASSES, children: titleContent || title }),
+          hasContent && /* @__PURE__ */ jsx("div", { id: contentId, className: POPOVER_TEXT_CLASSES, children: contentContent || content })
+        ]
+      }
+    ) })
+  ] });
+};
+
+export { Popover };

package/dist/chunk-5CLXOFRZ.mjs

@@ -0,0 +1,248 @@
+import { useEscapeKey } from './chunk-WLIFEALE.mjs';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { getPreviewNavState, clampScale, calculateTransform, imagePreviewWrapperClasses, imagePreviewMaskClasses, imagePreviewImgClasses, imagePreviewCloseBtnClasses, previewCloseIconPath, classNames, prevIconPath, imagePreviewNavBtnClasses, nextIconPath, imagePreviewToolbarClasses, imagePreviewToolbarBtnClasses, zoomOutIconPath, resetIconPath, zoomInIconPath, imagePreviewCounterClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } 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",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d })
+  }
+);
+var ImagePreview = ({
+  visible,
+  images,
+  currentIndex = 0,
+  zIndex = 1050,
+  maskClosable = true,
+  scaleStep = 0.5,
+  minScale = 0.25,
+  maxScale = 5,
+  onVisibleChange,
+  onCurrentIndexChange,
+  onScaleChange
+}) => {
+  const [scale, setScale] = useState(1);
+  const [offsetX, setOffsetX] = useState(0);
+  const [offsetY, setOffsetY] = useState(0);
+  const [index, setIndex] = useState(currentIndex);
+  const draggingRef = useRef(false);
+  const dragStartRef = useRef({ x: 0, y: 0, ox: 0, oy: 0 });
+  const resetTransform = useCallback(() => {
+    setScale(1);
+    setOffsetX(0);
+    setOffsetY(0);
+  }, []);
+  useEffect(() => {
+    setIndex(currentIndex);
+    resetTransform();
+  }, [currentIndex, resetTransform]);
+  useEffect(() => {
+    if (visible) {
+      resetTransform();
+      setIndex(currentIndex);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [visible, currentIndex, resetTransform]);
+  const handleClose = useCallback(() => {
+    onVisibleChange?.(false);
+  }, [onVisibleChange]);
+  useEscapeKey({ enabled: !!visible, onEscape: handleClose });
+  const navState = useMemo(() => getPreviewNavState(index, images.length), [index, images.length]);
+  const handleZoomIn = useCallback(() => {
+    setScale((s) => {
+      const next = clampScale(s + scaleStep, minScale, maxScale);
+      onScaleChange?.(next);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleZoomOut = useCallback(() => {
+    setScale((s) => {
+      const next = clampScale(s - scaleStep, minScale, maxScale);
+      onScaleChange?.(next);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleReset = useCallback(() => {
+    resetTransform();
+    onScaleChange?.(1);
+  }, [resetTransform, onScaleChange]);
+  const handlePrev = useCallback(() => {
+    if (index > 0) {
+      const next = index - 1;
+      setIndex(next);
+      resetTransform();
+      onCurrentIndexChange?.(next);
+    }
+  }, [index, resetTransform, onCurrentIndexChange]);
+  const handleNext = useCallback(() => {
+    if (index < images.length - 1) {
+      const next = index + 1;
+      setIndex(next);
+      resetTransform();
+      onCurrentIndexChange?.(next);
+    }
+  }, [index, images.length, resetTransform, onCurrentIndexChange]);
+  useEffect(() => {
+    if (!visible) return;
+    const handler = (e) => {
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "ArrowRight") handleNext();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [visible, handlePrev, handleNext]);
+  const handleWheel = useCallback(
+    (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -scaleStep : scaleStep;
+      setScale((s) => {
+        const next = clampScale(s + delta, minScale, maxScale);
+        onScaleChange?.(next);
+        return next;
+      });
+    },
+    [scaleStep, minScale, maxScale, onScaleChange]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (e.button !== 0) return;
+      e.preventDefault();
+      draggingRef.current = true;
+      dragStartRef.current = { x: e.clientX, y: e.clientY, ox: offsetX, oy: offsetY };
+    },
+    [offsetX, offsetY]
+  );
+  const handleMouseMove = useCallback((e) => {
+    if (!draggingRef.current) return;
+    setOffsetX(dragStartRef.current.ox + (e.clientX - dragStartRef.current.x));
+    setOffsetY(dragStartRef.current.oy + (e.clientY - dragStartRef.current.y));
+  }, []);
+  const handleMouseUp = useCallback(() => {
+    draggingRef.current = false;
+  }, []);
+  const handleMaskClick = useCallback(
+    (e) => {
+      if (maskClosable && e.target === e.currentTarget) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  const transform = useMemo(
+    () => calculateTransform(scale, offsetX, offsetY),
+    [scale, offsetX, offsetY]
+  );
+  if (!visible || !images.length) return null;
+  const currentSrc = images[index] || images[0];
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: imagePreviewWrapperClasses,
+        style: { zIndex },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Image preview",
+        onClick: handleMaskClick,
+        onWheel: handleWheel,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: imagePreviewMaskClasses, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: currentSrc,
+              className: imagePreviewImgClasses,
+              style: { transform },
+              alt: `Preview image ${index + 1}`,
+              draggable: false,
+              onMouseDown: handleMouseDown,
+              onMouseMove: handleMouseMove,
+              onMouseUp: handleMouseUp,
+              onMouseLeave: handleMouseUp
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": "Close preview",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: previewCloseIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(imagePreviewNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              disabled: !navState.hasPrev,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: prevIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: classNames(imagePreviewNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              disabled: !navState.hasNext,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ jsx(SvgIcon, { d: nextIconPath })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: imagePreviewToolbarClasses, children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomOutIconPath })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleReset,
+                "aria-label": "Reset",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: resetIconPath })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: imagePreviewToolbarBtnClasses,
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ jsx(SvgIcon, { d: zoomInIconPath })
+              }
+            ),
+            navState.counter && /* @__PURE__ */ jsx("span", { className: imagePreviewCounterClasses, children: navState.counter })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+};
+
+export { ImagePreview };

package/dist/chunk-5P5M656V.mjs

@@ -0,0 +1,75 @@
+import { getSkeletonClasses, getSkeletonDimensions, getParagraphRowWidth, classNames } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Skeleton.tsx
+var Skeleton = ({
+  variant = "text",
+  animation = "pulse",
+  width,
+  height,
+  shape = "circle",
+  rows = 1,
+  paragraph = false,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-hidden": ariaHidden,
+  ...divProps
+}) => {
+  const visualClasses = getSkeletonClasses(variant, animation, shape);
+  const dimensions = getSkeletonDimensions(variant, width, height);
+  const computedAriaHidden = ariaHidden ?? (ariaLabel || ariaLabelledBy ? void 0 : true);
+  if (variant === "text" && rows > 1) {
+    const rowElements = [];
+    for (let i = 0; i < rows; i++) {
+      const rowStyle = {
+        height: dimensions.height
+      };
+      if (paragraph) {
+        rowStyle.width = getParagraphRowWidth(i, rows);
+      } else if (dimensions.width) {
+        rowStyle.width = dimensions.width;
+      }
+      rowElements.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames(visualClasses, i < rows - 1 && "mb-2"),
+            style: rowStyle
+          },
+          i
+        )
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...divProps,
+        className: classNames("flex flex-col", className),
+        style,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-hidden": computedAriaHidden,
+        children: rowElements
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...divProps,
+      className: classNames(visualClasses, className),
+      style: {
+        ...style,
+        ...dimensions.width ? { width: dimensions.width } : void 0,
+        height: dimensions.height
+      },
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-hidden": computedAriaHidden
+    }
+  );
+};
+
+export { Skeleton };