@expcat/tigercat-react 1.1.0 → 1.2.14

package/dist/chunk-4U5HSR2H.js

@@ -0,0 +1,351 @@
+"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 _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
+
+// src/components/ImagePreview.tsx
+var _react = require('react');
+var _reactdom = require('react-dom');
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var SvgIcon = ({ d, cls = "w-5 h-5" }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "svg",
+  {
+    className: cls,
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d })
+  }
+);
+var ImagePreview = ({
+  open,
+  images,
+  currentIndex = 0,
+  zIndex = 1050,
+  maskClosable = true,
+  scaleStep = 0.5,
+  minScale = 0.25,
+  maxScale = 5,
+  onOpenChange,
+  onCurrentIndexChange,
+  onScaleChange
+}) => {
+  const isOpen = _nullishCoalesce(open, () => ( false));
+  const [scale, setScale] = _react.useState.call(void 0, 1);
+  const [rotation, setRotation] = _react.useState.call(void 0, 0);
+  const [offsetX, setOffsetX] = _react.useState.call(void 0, 0);
+  const [offsetY, setOffsetY] = _react.useState.call(void 0, 0);
+  const [index, setIndex] = _react.useState.call(void 0, currentIndex);
+  const draggingRef = _react.useRef.call(void 0, false);
+  const dragStartRef = _react.useRef.call(void 0, { x: 0, y: 0, ox: 0, oy: 0 });
+  const panRef = _react.useRef.call(void 0, _tigercatcore.createPanState.call(void 0, ));
+  const pinchRef = _react.useRef.call(void 0, _tigercatcore.createPinchState.call(void 0, ));
+  const resetTransform = _react.useCallback.call(void 0, () => {
+    setScale(1);
+    setRotation(0);
+    setOffsetX(0);
+    setOffsetY(0);
+    panRef.current = _tigercatcore.createPanState.call(void 0, );
+    pinchRef.current = _tigercatcore.createPinchState.call(void 0, );
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    setIndex(currentIndex);
+    resetTransform();
+  }, [currentIndex, resetTransform]);
+  _react.useEffect.call(void 0, () => {
+    if (isOpen) {
+      resetTransform();
+      setIndex(currentIndex);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, currentIndex, resetTransform]);
+  const handleClose = _react.useCallback.call(void 0, () => {
+    _optionalChain([onOpenChange, 'optionalCall', _ => _(false)]);
+  }, [onOpenChange]);
+  _chunkSTTQ5LXXjs.useEscapeKey.call(void 0, { enabled: !!isOpen, onEscape: handleClose });
+  const navState = _react.useMemo.call(void 0, () => _tigercatcore.getPreviewNavState.call(void 0, index, images.length), [index, images.length]);
+  const handleZoomIn = _react.useCallback.call(void 0, () => {
+    setScale((s) => {
+      const next = _tigercatcore.clampScale.call(void 0, s + scaleStep, minScale, maxScale);
+      _optionalChain([onScaleChange, 'optionalCall', _2 => _2(next)]);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleZoomOut = _react.useCallback.call(void 0, () => {
+    setScale((s) => {
+      const next = _tigercatcore.clampScale.call(void 0, s - scaleStep, minScale, maxScale);
+      _optionalChain([onScaleChange, 'optionalCall', _3 => _3(next)]);
+      return next;
+    });
+  }, [scaleStep, minScale, maxScale, onScaleChange]);
+  const handleReset = _react.useCallback.call(void 0, () => {
+    resetTransform();
+    _optionalChain([onScaleChange, 'optionalCall', _4 => _4(1)]);
+  }, [resetTransform, onScaleChange]);
+  const handleRotateLeft = _react.useCallback.call(void 0, () => {
+    setRotation((value) => _tigercatcore.normalizeRotation.call(void 0, value - 90));
+  }, []);
+  const handleRotateRight = _react.useCallback.call(void 0, () => {
+    setRotation((value) => _tigercatcore.normalizeRotation.call(void 0, value + 90));
+  }, []);
+  const handlePrev = _react.useCallback.call(void 0, () => {
+    if (index > 0) {
+      const next = index - 1;
+      setIndex(next);
+      resetTransform();
+      _optionalChain([onCurrentIndexChange, 'optionalCall', _5 => _5(next)]);
+    }
+  }, [index, resetTransform, onCurrentIndexChange]);
+  const handleNext = _react.useCallback.call(void 0, () => {
+    if (index < images.length - 1) {
+      const next = index + 1;
+      setIndex(next);
+      resetTransform();
+      _optionalChain([onCurrentIndexChange, 'optionalCall', _6 => _6(next)]);
+    }
+  }, [index, images.length, resetTransform, onCurrentIndexChange]);
+  _react.useEffect.call(void 0, () => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (e.key === "ArrowLeft") handlePrev();
+      if (e.key === "ArrowRight") handleNext();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [isOpen, handlePrev, handleNext]);
+  const handleWheel = _react.useCallback.call(void 0, 
+    (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? -scaleStep : scaleStep;
+      setScale((s) => {
+        const next = _tigercatcore.clampScale.call(void 0, s + delta, minScale, maxScale);
+        _optionalChain([onScaleChange, 'optionalCall', _7 => _7(next)]);
+        return next;
+      });
+    },
+    [scaleStep, minScale, maxScale, onScaleChange]
+  );
+  const handleMouseDown = _react.useCallback.call(void 0, 
+    (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 = _react.useCallback.call(void 0, (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 = _react.useCallback.call(void 0, () => {
+    draggingRef.current = false;
+  }, []);
+  const handleTouchStart = _react.useCallback.call(void 0, 
+    (e) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        pinchRef.current = _tigercatcore.startPinch.call(void 0, e.touches[0], e.touches[1], scale);
+        return;
+      }
+      if (e.touches.length === 1) {
+        panRef.current = _tigercatcore.startPan.call(void 0, e.touches[0].clientX, e.touches[0].clientY, offsetX, offsetY);
+      }
+    },
+    [offsetX, offsetY, scale]
+  );
+  const handleTouchMove = _react.useCallback.call(void 0, 
+    (e) => {
+      if (e.touches.length === 2 && pinchRef.current.isPinching) {
+        e.preventDefault();
+        const next = _tigercatcore.movePinch.call(void 0, pinchRef.current, e.touches[0], e.touches[1], minScale, maxScale);
+        setScale(next);
+        _optionalChain([onScaleChange, 'optionalCall', _8 => _8(next)]);
+        return;
+      }
+      if (e.touches.length === 1 && panRef.current.isPanning) {
+        const next = _tigercatcore.movePan.call(void 0, panRef.current, e.touches[0].clientX, e.touches[0].clientY);
+        setOffsetX(next.translateX);
+        setOffsetY(next.translateY);
+      }
+    },
+    [maxScale, minScale, onScaleChange]
+  );
+  const handleTouchEnd = _react.useCallback.call(void 0, () => {
+    panRef.current = _tigercatcore.createPanState.call(void 0, );
+    pinchRef.current = _tigercatcore.createPinchState.call(void 0, );
+  }, []);
+  const handleMaskClick = _react.useCallback.call(void 0, 
+    (e) => {
+      if (maskClosable && e.target === e.currentTarget) {
+        handleClose();
+      }
+    },
+    [maskClosable, handleClose]
+  );
+  const transform = _react.useMemo.call(void 0, 
+    () => `${_tigercatcore.calculateTransform.call(void 0, scale, offsetX, offsetY)} rotate(${rotation}deg)`,
+    [scale, offsetX, offsetY, rotation]
+  );
+  if (!isOpen || !images.length) return null;
+  const currentSrc = images[index] || images[0];
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: _tigercatcore.imagePreviewWrapperClasses,
+        style: { zIndex },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Image preview",
+        onClick: handleMaskClick,
+        onWheel: handleWheel,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.imagePreviewMaskClasses, "aria-hidden": "true" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "img",
+            {
+              src: currentSrc,
+              className: _tigercatcore.imagePreviewImgClasses,
+              style: { transform },
+              alt: `Preview image ${index + 1}`,
+              draggable: false,
+              onMouseDown: handleMouseDown,
+              onMouseMove: handleMouseMove,
+              onMouseUp: handleMouseUp,
+              onMouseLeave: handleMouseUp,
+              onTouchStart: handleTouchStart,
+              onTouchMove: handleTouchMove,
+              onTouchEnd: handleTouchEnd,
+              onTouchCancel: handleTouchEnd
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              className: _tigercatcore.imagePreviewCloseBtnClasses,
+              onClick: handleClose,
+              "aria-label": "Close preview",
+              type: "button",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.previewCloseIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              className: _tigercatcore.classNames.call(void 0, _tigercatcore.imagePreviewNavBtnClasses, "left-4"),
+              onClick: handlePrev,
+              disabled: !navState.hasPrev,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.prevIconPath })
+            }
+          ),
+          images.length > 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              className: _tigercatcore.classNames.call(void 0, _tigercatcore.imagePreviewNavBtnClasses, "right-4"),
+              onClick: handleNext,
+              disabled: !navState.hasNext,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.nextIconPath })
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _tigercatcore.imagePreviewToolbarClasses, children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                className: _tigercatcore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomOut,
+                "aria-label": "Zoom out",
+                type: "button",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.zoomOutIconPath })
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                className: _tigercatcore.imagePreviewToolbarBtnClasses,
+                onClick: handleReset,
+                "aria-label": "Reset",
+                type: "button",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.resetIconPath })
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                className: _tigercatcore.imagePreviewToolbarBtnClasses,
+                onClick: handleZoomIn,
+                "aria-label": "Zoom in",
+                type: "button",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.zoomInIconPath })
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                className: _tigercatcore.imagePreviewToolbarBtnClasses,
+                onClick: handleRotateLeft,
+                "aria-label": "Rotate left",
+                type: "button",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.imageViewerIcons.rotateLeft })
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                className: _tigercatcore.imagePreviewToolbarBtnClasses,
+                onClick: handleRotateRight,
+                "aria-label": "Rotate right",
+                type: "button",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SvgIcon, { d: _tigercatcore.imageViewerIcons.rotateRight })
+              }
+            ),
+            navState.counter && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: _tigercatcore.imagePreviewCounterClasses, children: navState.counter })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+};
+
+
+
+exports.ImagePreview = ImagePreview;

package/dist/{chunk-WFIQIBLC.mjs → chunk-4XOWNEZA.mjs}

@@ -1,7 +1,15 @@
-import { useFloating, useClickOutside, useEscapeKey } from './chunk-XTSG362L.mjs';
-import { useState, useRef, useCallback, useMemo } from 'react';
-import { getTransformOrigin, buildTriggerHandlerMap } from '@expcat/tigercat-core';
+import {
+  useClickOutside,
+  useEscapeKey,
+  useFloating
+} from "./chunk-SEWNVIHH.mjs";
 
+// src/utils/use-popup.ts
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+  getTransformOrigin,
+  buildTriggerHandlerMap
+} from "@expcat/tigercat-core";
 function usePopup(options) {
   const {
     open,
@@ -92,4 +100,6 @@ function usePopup(options) {
   };
 }
 
-export { usePopup };
+export {
+  usePopup
+};

package/dist/{chunk-FE7PEZTI.mjs → chunk-4ZZ7YRTB.mjs}

@@ -1,10 +1,22 @@
-import { useState, useMemo } from 'react';
-import { getInitials, classNames, avatarBaseClasses, avatarSizeClasses, avatarShapeClasses, avatarDefaultBgColor, avatarDefaultTextColor, avatarImageClasses } from '@expcat/tigercat-core';
-import { jsx } from 'react/jsx-runtime';
+import {
+  AvatarGroupContext
+} from "./chunk-4R5YXNU4.mjs";
 
 // src/components/Avatar.tsx
+import { useState, useMemo, useContext } from "react";
+import {
+  classNames,
+  avatarBaseClasses,
+  avatarSizeClasses,
+  avatarShapeClasses,
+  avatarDefaultBgColor,
+  avatarDefaultTextColor,
+  avatarImageClasses,
+  getInitials
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
 var Avatar = ({
-  size = "md",
+  size,
   shape = "circle",
   src,
   alt = "",
@@ -16,8 +28,10 @@ var Avatar = ({
   ...props
 }) => {
   const [imageError, setImageError] = useState(false);
+  const group = useContext(AvatarGroupContext);
   const hasImage = Boolean(src) && !imageError;
   const displayText = text ? getInitials(text) : "";
+  const resolvedSize = size ?? group?.size ?? "md";
   const ariaLabelProp = props["aria-label"];
   const ariaLabelledbyProp = props["aria-labelledby"];
   const ariaHiddenProp = props["aria-hidden"];
@@ -26,13 +40,14 @@ var Avatar = ({
   const avatarClasses = useMemo(
     () => classNames(
       avatarBaseClasses,
-      avatarSizeClasses[size],
+      avatarSizeClasses[resolvedSize],
       avatarShapeClasses[shape],
+      group?.itemClass,
       !hasImage && bgColor,
       !hasImage && textColor,
       className
     ),
-    [size, shape, hasImage, bgColor, textColor, className]
+    [resolvedSize, shape, group?.itemClass, hasImage, bgColor, textColor, className]
   );
   if (hasImage) {
     return /* @__PURE__ */ jsx("span", { ...props, className: avatarClasses, "aria-hidden": isDecorative ? true : ariaHiddenProp, children: /* @__PURE__ */ jsx(
@@ -60,4 +75,6 @@ var Avatar = ({
   );
 };
 
-export { Avatar };
+export {
+  Avatar
+};

package/dist/chunk-56ZV3VVY.js

@@ -0,0 +1,90 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _chunkYMKA4L3Zjs = require('./chunk-YMKA4L3Z.js');
+
+// src/components/Button.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var createDefaultSpinner = () => {
+  const spinnerSvg = _tigercatcore.getSpinnerSVG.call(void 0, "spinner");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "svg",
+    {
+      className: "animate-spin h-4 w-4",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox,
+      "aria-hidden": "true",
+      focusable: "false",
+      children: spinnerSvg.elements.map(
+        (el, index) => _react2.default.createElement(el.type, { key: index, ...el.attrs })
+      )
+    }
+  );
+};
+var Button = ({
+  variant = "primary",
+  size,
+  disabled = false,
+  loading = false,
+  loadingIcon,
+  icon,
+  block = false,
+  iconPosition = "left",
+  htmlType = "button",
+  danger = false,
+  onClick,
+  children,
+  className,
+  "aria-busy": ariaBusyProp,
+  "aria-disabled": ariaDisabledProp,
+  ...rest
+}) => {
+  const group = _chunkYMKA4L3Zjs.useButtonGroupContext.call(void 0, );
+  const resolvedSize = _nullishCoalesce(_nullishCoalesce(size, () => ( _optionalChain([group, 'optionalAccess', _ => _.size]))), () => ( "md"));
+  const isDisabled = disabled || loading;
+  const ariaBusy = _nullishCoalesce(ariaBusyProp, () => ( (loading ? true : void 0)));
+  const ariaDisabled = _nullishCoalesce(ariaDisabledProp, () => ( (isDisabled ? true : void 0)));
+  const buttonClasses = _react.useMemo.call(void 0, () => {
+    const variantClasses = danger ? _nullishCoalesce(_tigercatcore.buttonDangerClasses[variant], () => ( _tigercatcore.buttonDangerClasses.primary)) : _tigercatcore.getButtonVariantClasses.call(void 0, variant);
+    return _tigercatcore.classNames.call(void 0, 
+      _tigercatcore.buttonBaseClasses,
+      variantClasses,
+      _tigercatcore.buttonSizeClasses[resolvedSize],
+      isDisabled && _tigercatcore.buttonDisabledClasses,
+      block && "w-full",
+      className
+    );
+  }, [variant, resolvedSize, isDisabled, block, danger, className]);
+  const iconIsRight = iconPosition === "right";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      ...rest,
+      className: buttonClasses,
+      "aria-busy": ariaBusy,
+      "aria-disabled": ariaDisabled,
+      disabled: isDisabled,
+      onClick: isDisabled ? void 0 : onClick,
+      type: htmlType,
+      children: [
+        loading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: _nullishCoalesce(loadingIcon, () => ( createDefaultSpinner())) }),
+        !loading && icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: iconIsRight ? "ml-2 order-1" : "mr-2", children: icon }),
+        children
+      ]
+    }
+  );
+};
+
+
+
+exports.Button = Button;