@buoy-gg/bottom-sheet 7.0.15 → 7.0.17

package/lib/module/components/bottomSheetGeometry.js

@@ -0,0 +1,79 @@
+"use strict";
+
+/**
+ * Platform-free geometry for the BottomSheet.
+ *
+ * Extracted verbatim from the native implementation so the web port
+ * (BottomSheet.web.tsx) shares the exact clamping behavior:
+ * - corner-resize math: BottomSheet.tsx createResizeHandler (lines ~767-869)
+ * - close heuristic: BottomSheet.tsx onPanResponderRelease (lines ~706-708)
+ * The native file still carries its own inline copy; if you change one,
+ * change both (candidate for a later native refactor to import this).
+ */
+
+export const MIN_HEIGHT = 100;
+export const DEFAULT_HEIGHT = 400;
+export const FLOATING_WIDTH = 380;
+export const FLOATING_HEIGHT = 500;
+export const FLOATING_MIN_HEIGHT = 80;
+
+/** Native: FLOATING_MIN_WIDTH = SCREEN.width * 0.25 */
+export function floatingMinWidth(screenWidth) {
+  return screenWidth * 0.25;
+}
+/**
+ * 4-corner resize with safe-area-clamped bounds and min sizes.
+ * Mirrors the switch in the native createResizeHandler exactly.
+ */
+export function resizeCorner(corner, start, dx, dy, container, insets, minWidth, minHeight = FLOATING_MIN_HEIGHT) {
+  const minLeft = Math.max(0, insets.left || 0);
+  const maxRight = container.width - Math.max(0, insets.right || 0);
+  const minTop = Math.max(0, insets.top || 0);
+  const maxBottom = container.height - Math.max(0, insets.bottom || 0);
+  const startRight = start.left + start.width;
+  const startBottom = start.top + start.height;
+  let left = start.left;
+  let top = start.top;
+  let right = startRight;
+  let bottom = startBottom;
+  switch (corner) {
+    case 'topLeft':
+      {
+        left = Math.max(minLeft, Math.min(start.left + dx, startRight - minWidth));
+        top = Math.max(minTop, Math.min(start.top + dy, startBottom - minHeight));
+        break;
+      }
+    case 'topRight':
+      {
+        right = Math.min(maxRight, Math.max(startRight + dx, start.left + minWidth));
+        top = Math.max(minTop, Math.min(start.top + dy, startBottom - minHeight));
+        break;
+      }
+    case 'bottomLeft':
+      {
+        left = Math.max(minLeft, Math.min(start.left + dx, startRight - minWidth));
+        bottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + minHeight));
+        break;
+      }
+    case 'bottomRight':
+      {
+        right = Math.min(maxRight, Math.max(startRight + dx, start.left + minWidth));
+        bottom = Math.min(maxBottom, Math.max(startBottom + dy, start.top + minHeight));
+        break;
+      }
+  }
+  return {
+    left,
+    top,
+    width: Math.max(minWidth, right - left),
+    height: Math.max(minHeight, bottom - top)
+  };
+}
+
+/**
+ * Drag-to-dismiss heuristic. Native units: vy in px/ms (RN gestureState.vy),
+ * dy total drag in px.
+ */
+export function shouldCloseOnRelease(vy, dy, finalHeight, minHeight) {
+  return vy > 0.8 && dy > 50 || dy > 150 && finalHeight <= minHeight;
+}

package/lib/module/components/useMultiTap.js

@@ -0,0 +1,47 @@
+"use strict";
+
+/**
+ * Platform-free tap-count recognizer shared by the BottomSheet header and
+ * floating window: 2 taps toggles mode, 3+ closes. Mirrors the native
+ * implementation (BottomSheet.tsx ModalHeader.handleHeaderTap /
+ * handleFloatingTap): 500ms reset window, 300ms settle timer.
+ */
+import { useEffect, useRef } from 'react';
+export function useMultiTap(onDouble, onTriple) {
+  const lastTapRef = useRef(0);
+  const tapCountRef = useRef(0);
+  const timeoutRef = useRef(null);
+  // Latest-ref pattern so the returned handler stays stable without
+  // re-arming timers when callbacks change identity.
+  const handlersRef = useRef({
+    onDouble,
+    onTriple
+  });
+  handlersRef.current = {
+    onDouble,
+    onTriple
+  };
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, []);
+  const tapHandlerRef = useRef(() => {
+    const now = Date.now();
+    if (now - lastTapRef.current > 500) {
+      tapCountRef.current = 0;
+    }
+    tapCountRef.current++;
+    lastTapRef.current = now;
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      if (tapCountRef.current === 2) {
+        handlersRef.current.onDouble();
+      } else if (tapCountRef.current >= 3) {
+        handlersRef.current.onTriple();
+      }
+      tapCountRef.current = 0;
+    }, 300);
+  });
+  return tapHandlerRef.current;
+}

package/lib/module/index.web.js

@@ -0,0 +1,6 @@
+"use strict";
+
+// Web entry — reached via bundler alias (same pattern as
+// @buoy-gg/core → devtools-floating-menu/src/index.web.tsx; the package
+// exports map has no browser condition, so consumers alias this file).
+export { BottomSheet } from './components/BottomSheet.web';

package/lib/typescript/components/BottomSheet.web.d.ts

@@ -0,0 +1,75 @@
+/**
+ * BottomSheet — Web renderer (React DOM).
+ *
+ * Same public API and behavior as the native BottomSheet.tsx:
+ * - two modes: "bottomSheet" (full-width, continuous drag-resize via header,
+ *   fling-down to close) and "floating" (draggable window, 4-corner resize,
+ *   tap topRight corner = close, tap topLeft = onBack)
+ * - double-tap header toggles mode, triple-tap closes
+ * - no backdrop; bottom-sheet container lets taps pass through beside it
+ *
+ * Web adaptations (each annotated inline with the native token it mirrors):
+ * - Pointer Events + setPointerCapture replace PanResponder (one code path
+ *   for mouse and touch; capture gives "never release the responder"
+ *   semantics). touch-action:none on gesture surfaces or WKWebView/Safari
+ *   steals drags for page scroll.
+ * - During gestures we write styles directly to the DOM node (native rule:
+ *   "direct setValue, no state updates") and commit to React state on release.
+ * - Native spring tension:180/friction:22 ≈ cubic-bezier(0.16,1,0.3,1) 320ms;
+ *   the 200ms opacity fade is copied as-is.
+ * - Safe areas come from env(safe-area-inset-*) via a probe element (the
+ *   native iPhone-dimension table is deleted). Requires viewport-fit=cover
+ *   in the host page's <meta name="viewport"> to be non-zero on iOS.
+ * - Web-only additive props: `disableScrollWrapper` (tools with virtualized
+ *   bodies need it — JsModal has it natively) and `zIndex` (AppHost stacking).
+ *
+ * Intentionally NOT ported: the visibility close animation on prop change —
+ * native returns null immediately when visible=false (only the gesture-close
+ * animates out), and we mirror that.
+ */
+import { type CSSProperties, type ReactNode, type FC } from 'react';
+declare const defaultTheme: {
+    background: string;
+    panel: string;
+    border: string;
+    primary: string;
+    secondary: string;
+    muted: string;
+    success: string;
+    error: string;
+    info: string;
+};
+export type BottomSheetMode = 'bottomSheet' | 'floating';
+export interface BottomSheetHeaderConfig {
+    title?: string;
+    subtitle?: string;
+    customContent?: ReactNode;
+    hideCloseButton?: boolean;
+}
+interface CustomStyles {
+    container?: CSSProperties;
+    content?: CSSProperties;
+}
+export interface BottomSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    header?: BottomSheetHeaderConfig;
+    styles?: CustomStyles;
+    minHeight?: number;
+    maxHeight?: number;
+    initialHeight?: number;
+    initialMode?: BottomSheetMode;
+    onModeChange?: (mode: BottomSheetMode) => void;
+    footer?: ReactNode;
+    footerHeight?: number;
+    onBack?: () => void;
+    theme?: Partial<typeof defaultTheme>;
+    /** Web-only: render children without the scrolling wrapper (virtualized bodies). */
+    disableScrollWrapper?: boolean;
+    /** Web-only: stacking context for hosts (native hardcodes 1000). */
+    zIndex?: number;
+}
+export declare const BottomSheet: FC<BottomSheetProps>;
+export {};
+//# sourceMappingURL=BottomSheet.web.d.ts.map

package/lib/typescript/components/BottomSheet.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.web.d.ts","sourceRoot":"","sources":["../../../src/components/BottomSheet.web.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAIL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,EAAE,EAER,MAAM,OAAO,CAAC;AAoBf,QAAA,MAAM,YAAY;;;;;;;;;;CAUjB,CAAC;AAKF,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,uBAAuB;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,YAAY,CAAC,CAAC;IACrC,oFAAoF;IACpF,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA6tBD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA+D5C,CAAC"}

package/lib/typescript/components/bottomSheetGeometry.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Platform-free geometry for the BottomSheet.
+ *
+ * Extracted verbatim from the native implementation so the web port
+ * (BottomSheet.web.tsx) shares the exact clamping behavior:
+ * - corner-resize math: BottomSheet.tsx createResizeHandler (lines ~767-869)
+ * - close heuristic: BottomSheet.tsx onPanResponderRelease (lines ~706-708)
+ * The native file still carries its own inline copy; if you change one,
+ * change both (candidate for a later native refactor to import this).
+ */
+export declare const MIN_HEIGHT = 100;
+export declare const DEFAULT_HEIGHT = 400;
+export declare const FLOATING_WIDTH = 380;
+export declare const FLOATING_HEIGHT = 500;
+export declare const FLOATING_MIN_HEIGHT = 80;
+/** Native: FLOATING_MIN_WIDTH = SCREEN.width * 0.25 */
+export declare function floatingMinWidth(screenWidth: number): number;
+export type Corner = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export interface Rect {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+export interface Insets {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+/**
+ * 4-corner resize with safe-area-clamped bounds and min sizes.
+ * Mirrors the switch in the native createResizeHandler exactly.
+ */
+export declare function resizeCorner(corner: Corner, start: Rect, dx: number, dy: number, container: {
+    width: number;
+    height: number;
+}, insets: Insets, minWidth: number, minHeight?: number): Rect;
+/**
+ * Drag-to-dismiss heuristic. Native units: vy in px/ms (RN gestureState.vy),
+ * dy total drag in px.
+ */
+export declare function shouldCloseOnRelease(vy: number, dy: number, finalHeight: number, minHeight: number): boolean;
+//# sourceMappingURL=bottomSheetGeometry.d.ts.map

package/lib/typescript/components/bottomSheetGeometry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottomSheetGeometry.d.ts","sourceRoot":"","sources":["../../../src/components/bottomSheetGeometry.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,cAAc,MAAM,CAAC;AAClC,eAAO,MAAM,eAAe,MAAM,CAAC;AACnC,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAEtC,uDAAuD;AACvD,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAE5D;AAED,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,aAAa,CAAC;AAE3E,MAAM,WAAW,IAAI;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,MAAM;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,IAAI,EACX,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,SAAS,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAC5C,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,MAAM,EAChB,SAAS,GAAE,MAA4B,GACtC,IAAI,CA2CN;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,EAAE,EAAE,MAAM,EACV,EAAE,EAAE,MAAM,EACV,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,MAAM,GAChB,OAAO,CAET"}

package/lib/typescript/components/useMultiTap.d.ts

@@ -0,0 +1,2 @@
+export declare function useMultiTap(onDouble: () => void, onTriple: () => void): () => void;
+//# sourceMappingURL=useMultiTap.d.ts.map

package/lib/typescript/components/useMultiTap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMultiTap.d.ts","sourceRoot":"","sources":["../../../src/components/useMultiTap.ts"],"names":[],"mappings":"AAQA,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,QAAQ,EAAE,MAAM,IAAI,cAmCrE"}

package/lib/typescript/index.web.d.ts

@@ -0,0 +1,3 @@
+export { BottomSheet } from './components/BottomSheet.web';
+export type { BottomSheetProps, BottomSheetMode, BottomSheetHeaderConfig, } from './components/BottomSheet.web';
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../src/index.web.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,uBAAuB,GACxB,MAAM,8BAA8B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/bottom-sheet",
-  "version": "7.0.15",
+  "version": "7.0.17",
   "description": "High-performance bottom sheet & floating window component for React Native — 60 FPS native-driver animations, fully customizable.",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,7 +26,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.15"
+    "@buoy-gg/shared-ui": "^7.0.17"
   },
   "peerDependencies": {
     "react": "*",