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

package/dist/chunk-PBIH2F2Q.js

@@ -0,0 +1,344 @@
+import { injectComponentCSS } from './chunk-CAWE42LH.js';
+import { clsx } from 'clsx';
+import { createContext, useInsertionEffect, useMemo, useState, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var VideoInfoContext = createContext(void 0);
+function useVideoInfoContext() {
+  const context = useContext(VideoInfoContext);
+  if (context === void 0) {
+    throw new Error("useVideoInfoContext must be used within a VideoInfoHeadless component");
+  }
+  return context;
+}
+function useOptionalVideoInfoContext() {
+  return useContext(VideoInfoContext);
+}
+function DefaultVerifiedIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", width: "10", height: "10", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z" }) });
+}
+function VideoAuthorName({
+  name,
+  showAtPrefix = true,
+  showVerified = true,
+  isVerified,
+  verifiedIcon,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const authorName = name ?? context?.state.authorName;
+  const verified = isVerified ?? context?.state.isVerified ?? false;
+  const handleClick = onClick ?? context?.actions.openProfile;
+  if (!authorName) {
+    return null;
+  }
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info__author", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View ${authorName}'s profile` : void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("span", { className: "sv-video-info__author-name", children: [
+          showAtPrefix && /* @__PURE__ */ jsx("span", { className: "sv-video-info__author-prefix", children: "@" }),
+          authorName
+        ] }),
+        showVerified && verified && /* @__PURE__ */ jsx("span", { className: "sv-video-info__verified-badge", "aria-label": "Verified", children: verifiedIcon ?? /* @__PURE__ */ jsx(DefaultVerifiedIcon, {}) })
+      ] })
+    }
+  );
+}
+function VideoCaption({
+  caption,
+  maxLines = 2,
+  expandable = false,
+  moreText = "more",
+  lessText = "less",
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const captionText = caption ?? context?.state.caption;
+  if (!captionText) {
+    return null;
+  }
+  const lineClampClass = isExpanded ? "sv-video-info__caption--expanded" : `sv-video-info__caption--lines-${maxLines}`;
+  const handleToggleExpand = (e) => {
+    e.stopPropagation();
+    setIsExpanded(!isExpanded);
+  };
+  const handleClick = (e) => {
+    e.stopPropagation();
+    onClick?.();
+  };
+  const isClickable = onClick && !expandable;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "sv-video-info__caption",
+        lineClampClass,
+        isClickable && "sv-video-info__caption--clickable",
+        className
+      ),
+      onClick: isClickable ? handleClick : void 0,
+      onKeyDown: isClickable ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.stopPropagation();
+          onClick?.();
+        }
+      } : void 0,
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        captionText,
+        expandable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "sv-video-info__caption-more",
+            onClick: handleToggleExpand,
+            children: isExpanded ? lessText : moreText
+          }
+        )
+      ] })
+    }
+  );
+}
+function VideoHashtags({
+  hashtags,
+  clickable = true,
+  onHashtagClick,
+  display = "block",
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const hashtagsArray = hashtags ?? context?.state.hashtags ?? [];
+  const handleClick = onHashtagClick ?? context?.actions.onHashtagClick;
+  if (hashtagsArray.length === 0) {
+    return null;
+  }
+  const handleHashtagClick = (tag) => (e) => {
+    e.stopPropagation();
+    if (clickable && handleClick) {
+      handleClick(tag);
+    }
+  };
+  const handleKeyDown = (tag) => (e) => {
+    if ((e.key === "Enter" || e.key === " ") && clickable && handleClick) {
+      e.preventDefault();
+      handleClick(tag);
+    }
+  };
+  const formatTag = (tag) => tag.startsWith("#") ? tag : `#${tag}`;
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(
+        "sv-video-info__hashtags",
+        display === "inline" && "sv-video-info__hashtags--inline",
+        className
+      ),
+      children: hashtagsArray.map((tag) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: clsx(
+            "sv-video-info__hashtag",
+            !clickable && "sv-video-info__hashtag--not-clickable"
+          ),
+          onClick: handleHashtagClick(tag),
+          onKeyDown: handleKeyDown(tag),
+          tabIndex: clickable ? 0 : -1,
+          "aria-label": clickable ? `View hashtag ${tag}` : void 0,
+          children: formatTag(tag)
+        },
+        tag
+      ))
+    }
+  );
+}
+
+// src/components/VideoInfo/VideoInfo.css.ts
+var VIDEO_INFO_CSS = `.sv-video-info{display:flex;flex-direction:column;gap:var(--sv-video-info-gap,6px);color:var(--sv-video-info-color,#fff);font-family:var(--sv-font-family,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif);text-shadow:var(--sv-video-info-text-shadow,0 1px 2px rgba(0,0,0,.5));max-width:100%;overflow:hidden}.sv-video-info--overlay{pointer-events:none}.sv-video-info--overlay>*{pointer-events:auto}.sv-video-info__author{display:flex;align-items:center;gap:var(--sv-video-info-author-gap,6px);cursor:pointer;transition:opacity .15s ease}.sv-video-info__author:hover{opacity:.85}.sv-video-info__author:active{opacity:.7}.sv-video-info__author-name{font-size:var(--sv-video-info-author-font-size,16px);font-weight:var(--sv-video-info-author-font-weight,700);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.sv-video-info__author-prefix{opacity:.95}.sv-video-info__verified-badge{display:inline-flex;align-items:center;justify-content:center;width:var(--sv-video-info-verified-size,14px);height:var(--sv-video-info-verified-size,14px);background:var(--sv-video-info-verified-bg,#20d5ec);border-radius:50%;flex-shrink:0}.sv-video-info__verified-badge svg,.sv-video-info__verified-badge span{font-size:10px;color:#fff;font-weight:bold}.sv-video-info__caption{font-size:var(--sv-video-info-caption-font-size,14px);line-height:var(--sv-video-info-caption-line-height,1.4);color:var(--sv-video-info-caption-color,#fff);display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}.sv-video-info__caption--lines-1{-webkit-line-clamp:1}.sv-video-info__caption--lines-2{-webkit-line-clamp:2}.sv-video-info__caption--lines-3{-webkit-line-clamp:3}.sv-video-info__caption--expanded{-webkit-line-clamp:unset}.sv-video-info__caption--clickable{cursor:pointer;transition:opacity .15s ease}.sv-video-info__caption--clickable:hover{opacity:.85}.sv-video-info__caption--clickable:active{opacity:.7}.sv-video-info__caption-more{background:0 0;border:0;color:var(--sv-video-info-caption-more-color,rgba(255,255,255,.7));font-size:var(--sv-video-info-caption-font-size,14px);padding:0;margin-left:4px;cursor:pointer}.sv-video-info__caption-more:hover{color:var(--sv-video-info-caption-color,#fff)}.sv-video-info__hashtags{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--sv-video-info-hashtag-gap,6px);font-size:var(--sv-video-info-hashtag-font-size,14px)}.sv-video-info__hashtags--inline{gap:var(--sv-video-info-hashtag-gap-inline,4px)}.sv-video-info__hashtag{display:inline-flex;color:var(--sv-video-info-hashtag-color,#fff);font-weight:var(--sv-video-info-hashtag-font-weight,500);background:0 0;border:0;padding:0;cursor:pointer;transition:opacity .15s ease;white-space:nowrap}.sv-video-info__hashtag:hover{opacity:.8;text-decoration:underline}.sv-video-info__hashtag--not-clickable{cursor:default}.sv-video-info__hashtag--not-clickable:hover{opacity:1;text-decoration:none}.sv-video-info__caption .sv-video-info__hashtag{display:inline}.sv-video-info__location{display:flex;align-items:center;gap:var(--sv-video-info-location-gap,4px);font-size:var(--sv-video-info-location-font-size,13px);color:var(--sv-video-info-location-color,rgba(255,255,255,.9));cursor:pointer;transition:opacity .15s ease}.sv-video-info__location:hover{opacity:.8}.sv-video-info__location-icon{font-size:14px;flex-shrink:0}.sv-video-info__location-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-video-info__music{display:flex;align-items:center;gap:var(--sv-video-info-music-gap,8px);font-size:var(--sv-video-info-music-font-size,13px);color:var(--sv-video-info-music-color,#fff);cursor:pointer;transition:opacity .15s ease;overflow:hidden}.sv-video-info__music:hover{opacity:.8}.sv-video-info__music-icon{font-size:14px;flex-shrink:0}.sv-video-info__music-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sv-video-info__music-text--marquee{animation:sv-video-info-marquee 8s linear infinite}@keyframes sv-video-info-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}`;
+function DefaultLocationIcon() {
+  return /* @__PURE__ */ jsx("span", { className: "sv-video-info__location-icon", children: "\u{1F4CD}" });
+}
+function VideoLocation({
+  location,
+  icon,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const locationText = location ?? context?.state.location;
+  const handleClick = onClick ?? context?.actions.onLocationClick;
+  if (!locationText) {
+    return null;
+  }
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info__location", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View location: ${locationText}` : void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon ?? /* @__PURE__ */ jsx(DefaultLocationIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "sv-video-info__location-text", children: locationText })
+      ] })
+    }
+  );
+}
+function DefaultMusicIcon() {
+  return /* @__PURE__ */ jsx("span", { className: "sv-video-info__music-icon", children: "\u{1F3B5}" });
+}
+function VideoMusic({
+  title,
+  artist,
+  icon,
+  marquee = false,
+  onClick,
+  className,
+  children
+}) {
+  const context = useOptionalVideoInfoContext();
+  const musicTitle = title ?? context?.state.music?.title;
+  const musicArtist = artist ?? context?.state.music?.artist;
+  const handleClick = onClick ?? context?.actions.onMusicClick;
+  if (!musicTitle && !musicArtist) {
+    return null;
+  }
+  const displayText = musicArtist ? `${musicTitle} - ${musicArtist}` : musicTitle;
+  const handleKeyDown = (e) => {
+    if ((e.key === "Enter" || e.key === " ") && handleClick) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleClick();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info__music", className),
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick?.();
+      },
+      onKeyDown: handleKeyDown,
+      role: handleClick ? "button" : void 0,
+      tabIndex: handleClick ? 0 : void 0,
+      "aria-label": handleClick ? `View sound: ${displayText}` : void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon ?? /* @__PURE__ */ jsx(DefaultMusicIcon, {}),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(
+              "sv-video-info__music-text",
+              marquee && "sv-video-info__music-text--marquee"
+            ),
+            children: displayText
+          }
+        )
+      ] })
+    }
+  );
+}
+function VideoInfoHeadlessRoot({
+  videoInfoState,
+  videoInfoActions,
+  overlay = false,
+  className,
+  children,
+  testId
+}) {
+  useInsertionEffect(() => {
+    return injectComponentCSS("video-info", VIDEO_INFO_CSS);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      state: videoInfoState,
+      actions: videoInfoActions
+    }),
+    [videoInfoState, videoInfoActions]
+  );
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsx(VideoInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx("sv-video-info", overlay && "sv-video-info--overlay", className),
+      onClick: stopPropagation,
+      onKeyDown: stopPropagation,
+      onPointerDown: stopPropagation,
+      onPointerUp: stopPropagation,
+      onTouchStart: stopPropagation,
+      onTouchEnd: stopPropagation,
+      "data-testid": testId,
+      children: children ?? // Default layout
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(VideoAuthorName, { showAtPrefix: true, showVerified: true }),
+        /* @__PURE__ */ jsx(VideoCaption, { maxLines: 2 }),
+        /* @__PURE__ */ jsx(VideoHashtags, { clickable: true })
+      ] })
+    }
+  ) });
+}
+function VideoInfoContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: clsx("sv-video-info__content", className), children });
+}
+var VideoInfoHeadless = Object.assign(VideoInfoHeadlessRoot, {
+  /** Author name with @ prefix and verified badge */
+  AuthorName: VideoAuthorName,
+  /** Video caption/title with line clamping */
+  Caption: VideoCaption,
+  /** Hashtags (inline or block) */
+  Hashtags: VideoHashtags,
+  /** Location info */
+  Location: VideoLocation,
+  /** Music/sound info */
+  Music: VideoMusic,
+  /** Content wrapper */
+  Content: VideoInfoContent
+});
+
+export { VIDEO_INFO_CSS, VideoAuthorName, VideoCaption, VideoHashtags, VideoInfoContext, VideoInfoHeadless, VideoLocation, VideoMusic, useOptionalVideoInfoContext, useVideoInfoContext };

package/dist/chunk-PJ4NMVMY.js

@@ -0,0 +1,326 @@
+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/BottomSheetHeadless.tsx
+
+// 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:var(--sv-sheet-z-index);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:calc(var(--sv-sheet-z-index)+1);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
+}) {
+  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 handleSheetClick = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  useEffect(() => {
+    if (!isOpen) return;
+    scrollYRef.current = window.scrollY;
+    document.body.classList.add("sv-bottom-sheet-open");
+    document.body.style.top = `-${scrollYRef.current}px`;
+    const blockTouchMove = (e) => {
+      const target = e.target;
+      const isInsideSheet = target.closest(".sv-bottom-sheet");
+      if (!isInsideSheet) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener("touchmove", blockTouchMove, { passive: false, capture: true });
+    return () => {
+      document.body.classList.remove("sv-bottom-sheet-open");
+      document.body.style.top = "";
+      window.scrollTo(0, scrollYRef.current);
+      document.removeEventListener("touchmove", blockTouchMove, { capture: true });
+    };
+  }, [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) => {
+        e.stopPropagation();
+        const source = getDragSource(e.target);
+        if (!source) return;
+        dragSourceRef.current = source;
+        isDragging.current = true;
+        dragStartY.current = e.touches[0]?.clientY ?? 0;
+        currentTranslateY.current = 0;
+        sheet.style.animation = "none";
+        sheet.style.transition = "none";
+        void sheet.offsetHeight;
+      };
+      const onTouchMove = (e) => {
+        e.stopPropagation();
+        const clientY = e.touches[0]?.clientY ?? 0;
+        const deltaY = clientY - dragStartY.current;
+        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 = (e) => {
+        e.stopPropagation();
+        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: (e) => e.stopPropagation(),
+          onPointerUp: (e) => e.stopPropagation(),
+          onTouchStart: (e) => e.stopPropagation(),
+          onTouchEnd: (e) => e.stopPropagation(),
+          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: (e) => e.stopPropagation(),
+          onPointerUp: (e) => e.stopPropagation(),
+          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 };