@xhub-short/ui 0.1.0-beta.1 → 0.1.0-beta.11

package/dist/chunk-Q6MG7AVG.js

@@ -0,0 +1,531 @@
+import { clsx2 } from './chunk-EDWS2IPH.js';
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { memo, useInsertionEffect, useState, useRef, useCallback, useEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/ImageCarousel/ImageCarousel.css.ts
+var IMAGE_CAROUSEL_CSS = `.sv-image-carousel{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none;background:var(--sv-carousel-bg,#000)}.sv-image-carousel--dragging{-webkit-user-drag:none}.sv-image-carousel--swiping-horizontal{touch-action:none !important;overscroll-behavior:contain}.sv-image-carousel--swiping-vertical{touch-action:pan-y}.sv-image-carousel-track{display:flex;height:100%;will-change:transform;transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.sv-image-carousel-track--dragging{transition:none}.sv-image-carousel-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.sv-image-carousel-image{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:transform .2s ease-out}.sv-image-carousel-image--loading{opacity:0}.sv-image-carousel-image--loaded{opacity:1;transition:opacity .3s ease}.sv-image-carousel-image--zoomed{cursor:grab;pointer-events:auto}.sv-image-carousel-image--zoomed:active{cursor:grabbing}.sv-image-carousel-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--sv-carousel-placeholder-bg,rgba(255,255,255,.1))}.sv-image-carousel-skeleton{width:60%;height:60%;background:linear-gradient(90deg,rgba(255,255,255,.05)25%,rgba(255,255,255,.1)50%,rgba(255,255,255,.05)75%);background-size:200% 100%;animation:sv-carousel-shimmer 1.5s infinite;border-radius:8px}@keyframes sv-carousel-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.sv-image-carousel-indicators{position:absolute;bottom:var(--sv-carousel-indicators-bottom,16px);left:50%;transform:translateX(-50%);display:flex;gap:var(--sv-carousel-indicators-gap,6px);padding:6px 12px;border-radius:20px;z-index:10}.sv-image-carousel-dot{width:var(--sv-carousel-dot-size,6px);height:var(--sv-carousel-dot-size,6px);border-radius:50%;background:var(--sv-carousel-dot-color,rgba(255,255,255,.5));transition:all .2s ease;cursor:pointer;border:0;padding:0}.sv-image-carousel-dot:hover{background:var(--sv-carousel-dot-hover,rgba(255,255,255,.7))}.sv-image-carousel-dot--active{background:var(--sv-carousel-dot-active,#fff);transform:scale(1.2)}.sv-image-carousel-indicators--compact .sv-image-carousel-dot{width:4px;height:4px}.sv-image-carousel-counter{position:absolute;top:var(--sv-carousel-counter-top,16px);right:var(--sv-carousel-counter-right,16px);padding:4px 10px;background:var(--sv-carousel-counter-bg,rgba(0,0,0,.6));border-radius:12px;font-size:var(--sv-carousel-counter-font-size,12px);font-weight:500;color:var(--sv-carousel-counter-color,#fff);z-index:10}.sv-image-carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--sv-carousel-nav-bg,rgba(0,0,0,.4));border:0;border-radius:50%;color:var(--sv-carousel-nav-color,#fff);cursor:pointer;z-index:10;opacity:0;transition:opacity .2s ease}.sv-image-carousel:hover .sv-image-carousel-nav{opacity:1}.sv-image-carousel-nav:hover{background:var(--sv-carousel-nav-hover-bg,rgba(0,0,0,.6))}.sv-image-carousel-nav:disabled{opacity:.3;cursor:not-allowed}.sv-image-carousel-nav--prev{left:12px}.sv-image-carousel-nav--next{right:12px}.sv-image-carousel-nav svg{width:20px;height:20px}.sv-image-carousel-zoom-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.sv-image-carousel:focus-visible{outline:2px solid var(--sv-carousel-focus-color,#4dabff);outline-offset:2px}.sv-image-carousel-dot:focus-visible{outline:2px solid var(--sv-carousel-focus-color,#4dabff);outline-offset:2px}.sv-image-carousel-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}`;
+var cssInjected = false;
+function injectImageCarouselCSS() {
+  if (cssInjected) return void 0;
+  cssInjected = true;
+  return injectComponentCSS("image-carousel", IMAGE_CAROUSEL_CSS);
+}
+var DEFAULT_SWIPE_THRESHOLD = 0.2;
+var COMPACT_DOTS_THRESHOLD = 5;
+function ChevronLeftIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) });
+}
+function ChevronRightIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", children: /* @__PURE__ */ jsx("polyline", { points: "9 6 15 12 9 18" }) });
+}
+function CarouselSlide({
+  url,
+  index,
+  shouldLoad,
+  isActive,
+  isZoomed,
+  zoomScale,
+  zoomTranslate,
+  renderImage,
+  renderPlaceholder
+}) {
+  const [loaded, setLoaded] = useState(false);
+  const imageStyle = isActive && isZoomed ? {
+    transform: `scale(${zoomScale}) translate(${zoomTranslate.x}px, ${zoomTranslate.y}px)`
+  } : void 0;
+  return /* @__PURE__ */ jsx("div", { className: "sv-image-carousel-slide", "aria-hidden": !isActive, children: shouldLoad ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    !loaded && /* @__PURE__ */ jsx("div", { className: "sv-image-carousel-placeholder", children: renderPlaceholder?.(index) ?? /* @__PURE__ */ jsx("div", { className: "sv-image-carousel-skeleton" }) }),
+    renderImage ? renderImage(url, index, loaded) : /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: url,
+        alt: "",
+        className: clsx2(
+          "sv-image-carousel-image",
+          loaded ? "sv-image-carousel-image--loaded" : "sv-image-carousel-image--loading",
+          isActive && isZoomed && "sv-image-carousel-image--zoomed"
+        ),
+        style: imageStyle,
+        onLoad: () => setLoaded(true),
+        draggable: false
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx("div", { className: "sv-image-carousel-placeholder", children: renderPlaceholder?.(index) ?? /* @__PURE__ */ jsx("div", { className: "sv-image-carousel-skeleton" }) }) });
+}
+function ImageCarouselHeadlessBase({
+  images,
+  currentIndex: controlledIndex,
+  onIndexChange,
+  showIndicators = true,
+  indicatorStyle = "dots",
+  showArrows = false,
+  enableZoom = false,
+  maxZoomScale = 3,
+  lazyLoad = true,
+  renderImage,
+  renderPlaceholder,
+  swipeThreshold = DEFAULT_SWIPE_THRESHOLD,
+  onZoomChange,
+  onSwipeDirectionChange,
+  className
+}) {
+  useInsertionEffect(() => {
+    return injectImageCarouselCSS();
+  }, []);
+  const [internalIndex, setInternalIndex] = useState(0);
+  const activeIndex = controlledIndex ?? internalIndex;
+  const [loadedImages, setLoadedImages] = useState(() => /* @__PURE__ */ new Set([0]));
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState(0);
+  const [swipeDirection, setSwipeDirection] = useState(null);
+  const [zoomScale, setZoomScale] = useState(1);
+  const [zoomTranslate, setZoomTranslate] = useState({ x: 0, y: 0 });
+  const isZoomed = zoomScale > 1;
+  const containerRef = useRef(null);
+  const dragStartRef = useRef(null);
+  const touchesRef = useRef(null);
+  const wasHorizontalSwipingRef = useRef(false);
+  const totalImages = images.length;
+  const canGoPrev = activeIndex > 0;
+  const canGoNext = activeIndex < totalImages - 1;
+  const useCompactDots = totalImages > COMPACT_DOTS_THRESHOLD;
+  const goToIndex = useCallback(
+    (index) => {
+      const clampedIndex = Math.max(0, Math.min(totalImages - 1, index));
+      if (clampedIndex !== activeIndex) {
+        setInternalIndex(clampedIndex);
+        onIndexChange?.(clampedIndex);
+        if (isZoomed) {
+          setZoomScale(1);
+          setZoomTranslate({ x: 0, y: 0 });
+          onZoomChange?.(false);
+        }
+      }
+    },
+    [activeIndex, totalImages, onIndexChange, isZoomed, onZoomChange]
+  );
+  const goToPrev = useCallback(() => {
+    if (canGoPrev) goToIndex(activeIndex - 1);
+  }, [canGoPrev, activeIndex, goToIndex]);
+  const goToNext = useCallback(() => {
+    if (canGoNext) goToIndex(activeIndex + 1);
+  }, [canGoNext, activeIndex, goToIndex]);
+  useEffect(() => {
+    if (!lazyLoad) return;
+    const toLoad = /* @__PURE__ */ new Set();
+    toLoad.add(activeIndex);
+    if (activeIndex > 0) toLoad.add(activeIndex - 1);
+    if (activeIndex < totalImages - 1) toLoad.add(activeIndex + 1);
+    setLoadedImages((prev) => {
+      const next = new Set(prev);
+      for (const idx of toLoad) {
+        next.add(idx);
+      }
+      return next;
+    });
+  }, [activeIndex, totalImages, lazyLoad]);
+  useEffect(() => {
+    wasHorizontalSwipingRef.current = swipeDirection === "horizontal";
+    onSwipeDirectionChange?.(swipeDirection);
+  }, [swipeDirection, onSwipeDirectionChange]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const handleNativeTouchMove = (e) => {
+      if (swipeDirection === "horizontal" || wasHorizontalSwipingRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    const handleNativeTouchEnd = (e) => {
+      if (swipeDirection === "horizontal" || wasHorizontalSwipingRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    const handleNativeTouchCancel = (e) => {
+      if (swipeDirection === "horizontal" || wasHorizontalSwipingRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    container.addEventListener("touchmove", handleNativeTouchMove, { passive: false });
+    container.addEventListener("touchend", handleNativeTouchEnd, { passive: false });
+    container.addEventListener("touchcancel", handleNativeTouchCancel, { passive: false });
+    return () => {
+      container.removeEventListener("touchmove", handleNativeTouchMove);
+      container.removeEventListener("touchend", handleNativeTouchEnd);
+      container.removeEventListener("touchcancel", handleNativeTouchCancel);
+    };
+  }, [swipeDirection]);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (isZoomed) return;
+      dragStartRef.current = {
+        x: e.clientX,
+        y: e.clientY,
+        time: Date.now()
+      };
+      setIsDragging(true);
+      setSwipeDirection(null);
+      wasHorizontalSwipingRef.current = false;
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [isZoomed]
+  );
+  const detectSwipeDirection = useCallback(
+    (dx, dy) => {
+      const DIRECTION_THRESHOLD = 5;
+      const totalMovement = Math.abs(dx) + Math.abs(dy);
+      if (totalMovement <= DIRECTION_THRESHOLD) {
+        return "undecided";
+      }
+      return Math.abs(dx) > Math.abs(dy) ? "horizontal" : "vertical";
+    },
+    []
+  );
+  const releasePointer = useCallback((e) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    }
+  }, []);
+  const cancelDragGesture = useCallback(
+    (e) => {
+      releasePointer(e);
+      setIsDragging(false);
+      setDragOffset(0);
+      setSwipeDirection(null);
+      wasHorizontalSwipingRef.current = false;
+      dragStartRef.current = null;
+    },
+    [releasePointer]
+  );
+  const processHorizontalSwipe = useCallback((e, dx) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOffset(dx);
+  }, []);
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!isDragging || !dragStartRef.current) return;
+      const dx = e.clientX - dragStartRef.current.x;
+      const dy = e.clientY - dragStartRef.current.y;
+      if (swipeDirection === "vertical") return;
+      const detectedDirection = detectSwipeDirection(dx, dy);
+      if (detectedDirection === "undecided") {
+        return;
+      }
+      if (detectedDirection === "vertical") {
+        setSwipeDirection("vertical");
+        cancelDragGesture(e);
+        return;
+      }
+      if (detectedDirection === "horizontal") {
+        if (swipeDirection !== "horizontal") {
+          setSwipeDirection("horizontal");
+          wasHorizontalSwipingRef.current = true;
+        }
+        processHorizontalSwipe(e, dx);
+      }
+    },
+    [isDragging, swipeDirection, detectSwipeDirection, cancelDragGesture, processHorizontalSwipe]
+  );
+  const resetDragState = useCallback(() => {
+    setIsDragging(false);
+    setDragOffset(0);
+    setSwipeDirection(null);
+    dragStartRef.current = null;
+  }, []);
+  const executeSwipeNavigation = useCallback(
+    (offset, velocity, threshold) => {
+      const shouldSwipe = Math.abs(offset) > threshold || Math.abs(velocity) > 0.5;
+      if (!shouldSwipe) return;
+      if (offset > 0 && canGoPrev) {
+        goToPrev();
+      } else if (offset < 0 && canGoNext) {
+        goToNext();
+      }
+    },
+    [canGoPrev, canGoNext, goToPrev, goToNext]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      if (!isDragging || !dragStartRef.current) return;
+      if (swipeDirection === "horizontal") {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      releasePointer(e);
+      const container = containerRef.current;
+      if (!container) {
+        resetDragState();
+        return;
+      }
+      const containerWidth = container.offsetWidth;
+      const threshold = containerWidth * swipeThreshold;
+      const velocity = dragOffset / (Date.now() - dragStartRef.current.time);
+      executeSwipeNavigation(dragOffset, velocity, threshold);
+      const wasHorizontal = swipeDirection === "horizontal";
+      setIsDragging(false);
+      setDragOffset(0);
+      dragStartRef.current = null;
+      if (wasHorizontal) {
+        setTimeout(() => {
+          setSwipeDirection(null);
+          wasHorizontalSwipingRef.current = false;
+        }, 300);
+      } else {
+        setSwipeDirection(null);
+      }
+    },
+    [
+      isDragging,
+      dragOffset,
+      swipeThreshold,
+      executeSwipeNavigation,
+      releasePointer,
+      swipeDirection,
+      resetDragState
+    ]
+  );
+  const handlePointerCancel = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      releasePointer(e);
+      resetDragState();
+    },
+    [isDragging, resetDragState, releasePointer]
+  );
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (e.touches.length === 1) {
+        if (isDragging && swipeDirection === "horizontal") {
+          e.preventDefault();
+        }
+        return;
+      }
+      if (!enableZoom) return;
+      if (e.touches.length !== 2) return;
+      const touch1 = e.touches[0];
+      const touch2 = e.touches[1];
+      if (!touch1 || !touch2) return;
+      const distance = Math.hypot(touch2.clientX - touch1.clientX, touch2.clientY - touch1.clientY);
+      const center = {
+        x: (touch1.clientX + touch2.clientX) / 2,
+        y: (touch1.clientY + touch2.clientY) / 2
+      };
+      touchesRef.current = { distance, center };
+      if (isDragging) {
+        resetDragState();
+      }
+    },
+    [enableZoom, isDragging, swipeDirection, resetDragState]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (e.touches.length === 1) {
+        if (swipeDirection === "horizontal") {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        return;
+      }
+      if (!enableZoom) return;
+      if (e.touches.length !== 2 || !touchesRef.current) return;
+      const touch1 = e.touches[0];
+      const touch2 = e.touches[1];
+      if (!touch1 || !touch2) return;
+      e.preventDefault();
+      const newDistance = Math.hypot(
+        touch2.clientX - touch1.clientX,
+        touch2.clientY - touch1.clientY
+      );
+      const scale = newDistance / touchesRef.current.distance;
+      const newScale = Math.max(1, Math.min(maxZoomScale, zoomScale * scale));
+      setZoomScale(newScale);
+      if (newScale > 1) {
+        onZoomChange?.(true);
+      }
+      touchesRef.current.distance = newDistance;
+    },
+    [enableZoom, maxZoomScale, zoomScale, onZoomChange, swipeDirection]
+  );
+  const handleTouchEnd = useCallback(
+    (e) => {
+      if (swipeDirection === "horizontal" || wasHorizontalSwipingRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      touchesRef.current = null;
+      if (zoomScale < 1.1) {
+        setZoomScale(1);
+        setZoomTranslate({ x: 0, y: 0 });
+        onZoomChange?.(false);
+      }
+    },
+    [zoomScale, onZoomChange, swipeDirection]
+  );
+  const handleTouchCancel = useCallback(
+    (e) => {
+      if (swipeDirection === "horizontal" || wasHorizontalSwipingRef.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      touchesRef.current = null;
+    },
+    [swipeDirection]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (isZoomed) {
+        if (e.key === "Escape") {
+          setZoomScale(1);
+          setZoomTranslate({ x: 0, y: 0 });
+          onZoomChange?.(false);
+        }
+        return;
+      }
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          goToPrev();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          goToNext();
+          break;
+        case "Home":
+          e.preventDefault();
+          goToIndex(0);
+          break;
+        case "End":
+          e.preventDefault();
+          goToIndex(totalImages - 1);
+          break;
+      }
+    },
+    [isZoomed, goToPrev, goToNext, goToIndex, totalImages, onZoomChange]
+  );
+  const trackTransform = useMemo(() => {
+    const baseOffset = -activeIndex * 100;
+    const dragPercent = containerRef.current ? dragOffset / containerRef.current.offsetWidth * 100 : 0;
+    return `translateX(${baseOffset + dragPercent}%)`;
+  }, [activeIndex, dragOffset]);
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: clsx2("sv-image-carousel", className) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: clsx2(
+        "sv-image-carousel",
+        isDragging && "sv-image-carousel--dragging",
+        swipeDirection === "horizontal" && "sv-image-carousel--swiping-horizontal",
+        swipeDirection === "vertical" && "sv-image-carousel--swiping-vertical",
+        className
+      ),
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel,
+      onPointerLeave: handlePointerCancel,
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      onTouchCancel: handleTouchCancel,
+      onKeyDown: handleKeyDown,
+      "aria-roledescription": "carousel",
+      "aria-label": `Image carousel, ${activeIndex + 1} of ${totalImages}`,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sv-image-carousel-sr-only", "aria-live": "polite", children: [
+          "Image ",
+          activeIndex + 1,
+          " of ",
+          totalImages
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx2("sv-image-carousel-track", isDragging && "sv-image-carousel-track--dragging"),
+            style: { transform: trackTransform },
+            children: images.map((url, index) => /* @__PURE__ */ jsx(
+              CarouselSlide,
+              {
+                url,
+                index,
+                shouldLoad: !lazyLoad || loadedImages.has(index),
+                isActive: index === activeIndex,
+                isZoomed,
+                zoomScale,
+                zoomTranslate,
+                renderImage,
+                renderPlaceholder
+              },
+              url
+            ))
+          }
+        ),
+        showIndicators && totalImages > 1 && (indicatorStyle === "dots" ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx2(
+              "sv-image-carousel-indicators",
+              useCompactDots && "sv-image-carousel-indicators--compact"
+            ),
+            role: "tablist",
+            "aria-label": "Image pagination",
+            children: images.map((_, index) => /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: clsx2(
+                  "sv-image-carousel-dot",
+                  index === activeIndex && "sv-image-carousel-dot--active"
+                ),
+                onClick: () => goToIndex(index),
+                role: "tab",
+                "aria-selected": index === activeIndex,
+                "aria-label": `Go to image ${index + 1}`
+              },
+              _
+            ))
+          }
+        ) : /* @__PURE__ */ jsxs("div", { className: "sv-image-carousel-counter", children: [
+          activeIndex + 1,
+          "/",
+          totalImages
+        ] })),
+        showArrows && totalImages > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "sv-image-carousel-nav sv-image-carousel-nav--prev",
+              onClick: goToPrev,
+              disabled: !canGoPrev,
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "sv-image-carousel-nav sv-image-carousel-nav--next",
+              onClick: goToNext,
+              disabled: !canGoNext,
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var ImageCarouselHeadless = memo(ImageCarouselHeadlessBase);
+ImageCarouselHeadless.displayName = "ImageCarouselHeadless";
+
+export { IMAGE_CAROUSEL_CSS, ImageCarouselHeadless };