@xhub-short/ui 0.1.0-beta.9 → 1.0.0-beta.18

package/dist/chunk-UYBQTE4M.js

@@ -0,0 +1,337 @@
+import { clsx } from 'clsx';
+import { createContext, memo, useState, useRef, useEffect, useCallback, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/BottomSheet/BottomSheet.css.ts
+var BOTTOM_SHEET_CSS = `:root{--sv-sheet-bg:#fff;--sv-sheet-backdrop-bg:rgba(0,0,0,.5);--sv-sheet-handle-bg:rgba(0,0,0,.2);--sv-sheet-border-radius:24px;--sv-sheet-z-index:1000;--sv-sheet-animation-duration:300ms;--sv-sheet-animation-easing:cubic-bezier(.32,.72,0,1)}.sv-bottom-sheet-backdrop{position:fixed;inset:0;background:var(--sv-sheet-backdrop-bg);z-index:50;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--sv-sheet-animation-duration)ease,visibility 0s linear var(--sv-sheet-animation-duration)}.sv-bottom-sheet-backdrop[data-state="open"]{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--sv-sheet-animation-duration)ease,visibility 0s linear 0s}@keyframes sv-sheet-slide-up{from{transform:translateY(100vh)}to{transform:translateY(0)}}@keyframes sv-sheet-slide-down{from{transform:translateY(0)}to{transform:translateY(100vh)}}.sv-bottom-sheet{position:fixed;left:0;right:0;bottom:0;background:var(--sv-sheet-bg);border-radius:var(--sv-sheet-border-radius)var(--sv-sheet-border-radius)0 0;z-index:51;display:flex;flex-direction:column;max-height:var(--sv-sheet-max-height,80vh);transform:translateY(100vh);overflow:hidden;touch-action:pan-y;isolation:isolate;pointer-events:none;will-change:transform;outline:none}.sv-bottom-sheet[data-state="open"]{transform:translateY(0);pointer-events:auto;animation:sv-sheet-slide-up var(--sv-sheet-animation-duration)var(--sv-sheet-animation-easing)forwards}.sv-bottom-sheet[data-state="closing"]{pointer-events:none;animation:sv-sheet-slide-down var(--sv-sheet-animation-duration)var(--sv-sheet-animation-easing)forwards !important}.sv-bottom-sheet__handle{display:flex;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;flex-shrink:0}.sv-bottom-sheet__handle:active{cursor:grabbing}.sv-bottom-sheet__handle-bar{width:36px;height:4px;background:var(--sv-sheet-handle-bg);border-radius:2px}.sv-bottom-sheet__content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}body.sv-bottom-sheet-open{overflow:hidden !important;position:fixed !important;width:100% !important}body.sv-bottom-sheet-open .sv-slider,body.sv-bottom-sheet-open .sv-video-feed{pointer-events:none !important;touch-action:none !important}body.sv-bottom-sheet-open .sv-bottom-sheet,body.sv-bottom-sheet-open .sv-bottom-sheet-backdrop{touch-action:auto !important}`;
+function injectBottomSheetCSS() {
+  if (typeof document === "undefined") return;
+  const styleId = "sv-bottom-sheet-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = BOTTOM_SHEET_CSS;
+    document.head.appendChild(style);
+  }
+}
+if (typeof document !== "undefined") {
+  injectBottomSheetCSS();
+}
+injectBottomSheetCSS();
+var BottomSheetContext = createContext(null);
+function useBottomSheetContext() {
+  const ctx = useContext(BottomSheetContext);
+  if (!ctx) {
+    throw new Error("useBottomSheetContext must be used within BottomSheetHeadless");
+  }
+  return ctx;
+}
+var DEFAULT_ANIMATION_DURATION = 300;
+function BottomSheetHeadlessComponent({
+  isOpen,
+  onClose,
+  children,
+  height = "80vh",
+  className,
+  backdropClassName,
+  contentClassName,
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  showDragHandle = false,
+  enableDragToDismiss = true,
+  dragCloseThreshold = 150,
+  ariaLabel = "Bottom sheet",
+  zIndex,
+  animationDuration = DEFAULT_ANIMATION_DURATION,
+  dragHandleSelector = ".sv-bottom-sheet__handle",
+  scrollContainerSelector = ".sv-bottom-sheet__content",
+  dragExcludeSelector,
+  onGestureLock
+}) {
+  const [isClosing, setIsClosing] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const sheetRef = useRef(null);
+  const dragStartY = useRef(0);
+  const currentTranslateY = useRef(0);
+  const isDragging = useRef(false);
+  const isDragClosing = useRef(false);
+  const closeTimeoutRef = useRef(null);
+  const openedAtRef = useRef(0);
+  const scrollYRef = useRef(0);
+  const dragSourceRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+      openedAtRef.current = Date.now();
+      setIsClosing(false);
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = null;
+      }
+    }
+  }, [isOpen]);
+  const handleClose = useCallback(() => {
+    if (isClosing) return;
+    const timeSinceOpen = Date.now() - openedAtRef.current;
+    if (timeSinceOpen < 100) return;
+    setIsClosing(true);
+    closeTimeoutRef.current = setTimeout(() => {
+      setIsClosing(false);
+      setIsVisible(false);
+      onClose();
+    }, animationDuration);
+  }, [isClosing, onClose, animationDuration]);
+  useEffect(() => {
+    return () => {
+      if (closeTimeoutRef.current) {
+        clearTimeout(closeTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (isOpen && sheetRef.current) {
+      requestAnimationFrame(() => {
+        sheetRef.current?.focus();
+      });
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        handleClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, closeOnEscape, handleClose]);
+  const handleBackdropClick = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (closeOnBackdropClick && e.target === e.currentTarget) {
+        handleClose();
+      }
+    },
+    [closeOnBackdropClick, handleClose]
+  );
+  const handleEventBlocker = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const handleSheetClick = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  const onGestureLockRef = useRef(onGestureLock);
+  useEffect(() => {
+    onGestureLockRef.current = onGestureLock;
+  }, [onGestureLock]);
+  useEffect(() => {
+    if (!isOpen) return;
+    scrollYRef.current = window.scrollY;
+    document.body.classList.add("sv-bottom-sheet-open");
+    document.body.style.top = `-${scrollYRef.current}px`;
+    onGestureLockRef.current?.(true);
+    return () => {
+      document.body.classList.remove("sv-bottom-sheet-open");
+      document.body.style.top = "";
+      if (typeof window !== "undefined") {
+        window.scrollTo(0, scrollYRef.current);
+      }
+      onGestureLockRef.current?.(false);
+    };
+  }, [isOpen]);
+  const isScrollContainerAtTop = useCallback(() => {
+    const container = sheetRef.current?.querySelector(scrollContainerSelector);
+    if (!container) return true;
+    return container.scrollTop <= 0;
+  }, [scrollContainerSelector]);
+  const getDragSource = useCallback(
+    (target) => {
+      if (dragExcludeSelector && target.closest(dragExcludeSelector)) {
+        return null;
+      }
+      const isHandle = target.closest(dragHandleSelector);
+      if (isHandle) return "handle";
+      const isInScrollContainer = target.closest(scrollContainerSelector);
+      if (isInScrollContainer && isScrollContainerAtTop()) return "overscroll";
+      return null;
+    },
+    [dragHandleSelector, scrollContainerSelector, dragExcludeSelector, isScrollContainerAtTop]
+  );
+  useEffect(() => {
+    if (!isOpen || !sheetRef.current) return;
+    sheetRef.current.style.transform = "";
+    sheetRef.current.style.transition = "";
+    sheetRef.current.style.animation = "";
+    currentTranslateY.current = 0;
+    isDragging.current = false;
+    dragSourceRef.current = null;
+    isDragClosing.current = false;
+  }, [isOpen]);
+  const animateClose = useCallback(
+    (sheet) => {
+      isDragClosing.current = true;
+      sheet.style.transition = `transform ${animationDuration}ms cubic-bezier(0.32, 0.72, 0, 1)`;
+      sheet.style.transform = "translateY(100vh)";
+      closeTimeoutRef.current = setTimeout(() => {
+        isDragClosing.current = false;
+        setIsVisible(false);
+        onClose();
+      }, animationDuration);
+    },
+    [onClose, animationDuration]
+  );
+  const animateSnapBack = useCallback(
+    (sheet) => {
+      sheet.style.transition = `transform ${animationDuration}ms cubic-bezier(0.32, 0.72, 0, 1)`;
+      sheet.style.transform = "translateY(0)";
+      setTimeout(() => {
+        sheet.style.transition = "";
+        sheet.style.transform = "";
+      }, animationDuration);
+    },
+    [animationDuration]
+  );
+  useEffect(() => {
+    if (!isVisible || !enableDragToDismiss) return;
+    let mounted = true;
+    const handlersRef = {
+      onTouchStart: null,
+      onTouchMove: null,
+      onTouchEnd: null
+    };
+    requestAnimationFrame(() => {
+      if (!mounted) return;
+      const sheet = sheetRef.current;
+      if (!sheet) return;
+      const onTouchStart = (e) => {
+        dragStartY.current = e.touches[0]?.clientY ?? 0;
+        const source = getDragSource(e.target);
+        if (!source) return;
+        dragSourceRef.current = source;
+        isDragging.current = true;
+        currentTranslateY.current = 0;
+        sheet.style.animation = "none";
+        sheet.style.transition = "none";
+        void sheet.offsetHeight;
+      };
+      const onTouchMove = (e) => {
+        const clientY = e.touches[0]?.clientY ?? 0;
+        const deltaY = clientY - dragStartY.current;
+        if (!isDragging.current && deltaY > 0 && isScrollContainerAtTop()) {
+          const source = getDragSource(e.target);
+          if (source) {
+            isDragging.current = true;
+            dragSourceRef.current = source;
+            dragStartY.current = clientY;
+            sheet.style.animation = "none";
+            sheet.style.transition = "none";
+            void sheet.offsetHeight;
+            return;
+          }
+        }
+        if (dragSourceRef.current === "overscroll" && (deltaY <= 0 || !isScrollContainerAtTop())) {
+          isDragging.current = false;
+          return;
+        }
+        if (!isDragging.current) return;
+        currentTranslateY.current = Math.max(0, deltaY);
+        if (currentTranslateY.current > 0) {
+          e.preventDefault();
+        }
+        sheet.style.transform = `translateY(${currentTranslateY.current}px)`;
+      };
+      const onTouchEnd = () => {
+        dragSourceRef.current = null;
+        if (!isDragging.current) return;
+        isDragging.current = false;
+        const dragDistance = currentTranslateY.current;
+        currentTranslateY.current = 0;
+        if (dragDistance > dragCloseThreshold) {
+          animateClose(sheet);
+        } else if (dragDistance > 0) {
+          animateSnapBack(sheet);
+        }
+      };
+      handlersRef.onTouchStart = onTouchStart;
+      handlersRef.onTouchMove = onTouchMove;
+      handlersRef.onTouchEnd = onTouchEnd;
+      sheet.addEventListener("touchstart", onTouchStart, { passive: false });
+      sheet.addEventListener("touchmove", onTouchMove, { passive: false });
+      sheet.addEventListener("touchend", onTouchEnd, { passive: false });
+    });
+    return () => {
+      mounted = false;
+      const sheet = sheetRef.current;
+      if (sheet && handlersRef.onTouchStart && handlersRef.onTouchMove && handlersRef.onTouchEnd) {
+        sheet.removeEventListener("touchstart", handlersRef.onTouchStart);
+        sheet.removeEventListener("touchmove", handlersRef.onTouchMove);
+        sheet.removeEventListener("touchend", handlersRef.onTouchEnd);
+      }
+    };
+  }, [
+    isVisible,
+    enableDragToDismiss,
+    dragCloseThreshold,
+    isScrollContainerAtTop,
+    getDragSource,
+    animateClose,
+    animateSnapBack
+  ]);
+  if (!isVisible || typeof document === "undefined") return null;
+  const backdropState = isClosing || isDragClosing.current ? "closing" : isOpen ? "open" : "closed";
+  const sheetState = isClosing && !isDragClosing.current ? "closing" : isOpen ? "open" : "closed";
+  const sheetStyle = {
+    "--sv-sheet-max-height": height,
+    ...zIndex !== void 0 && { "--sv-sheet-z-index": zIndex },
+    ...animationDuration !== DEFAULT_ANIMATION_DURATION && {
+      "--sv-sheet-animation-duration": `${animationDuration}ms`
+    }
+  };
+  const backdropStyle = zIndex !== void 0 ? { "--sv-sheet-z-index": zIndex } : {};
+  return createPortal(
+    /* @__PURE__ */ jsxs(BottomSheetContext.Provider, { value: { isOpen, onClose: handleClose }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx("sv-bottom-sheet-backdrop", backdropClassName),
+          "data-state": backdropState,
+          onClick: handleBackdropClick,
+          onPointerDown: handleEventBlocker,
+          onPointerUp: handleEventBlocker,
+          onTouchStart: handleEventBlocker,
+          onTouchEnd: handleEventBlocker,
+          style: backdropStyle,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: sheetRef,
+          className: clsx("sv-bottom-sheet", className),
+          "data-state": sheetState,
+          style: sheetStyle,
+          "aria-modal": "true",
+          "aria-label": ariaLabel,
+          tabIndex: -1,
+          onClick: handleSheetClick,
+          onPointerDown: handleEventBlocker,
+          onPointerUp: handleEventBlocker,
+          onTouchStart: handleEventBlocker,
+          onTouchEnd: handleEventBlocker,
+          children: [
+            showDragHandle && /* @__PURE__ */ jsx("div", { className: "sv-bottom-sheet__handle", children: /* @__PURE__ */ jsx("div", { className: "sv-bottom-sheet__handle-bar" }) }),
+            /* @__PURE__ */ jsx("div", { className: clsx("sv-bottom-sheet__content", contentClassName), children })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+var BottomSheetHeadless = memo(BottomSheetHeadlessComponent);
+BottomSheetHeadless.displayName = "BottomSheetHeadless";
+
+export { BOTTOM_SHEET_CSS, BottomSheetHeadless, injectBottomSheetCSS, useBottomSheetContext };