@ringcentral/spring-ui 1.7.0

package/SwipeableDrawer.js

@@ -0,0 +1,742 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useCallback, useEffect, useLayoutEffect, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
+import { useWindowContext, useEventCallback, useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import clsx from 'clsx';
+import { D as Drawer } from './chunks/Drawer.js';
+import { D as DragHandle } from './chunks/DragHandle.js';
+import { useMotionValue, animate, useTransform } from 'framer-motion';
+import { rubberbandIfOutOfBounds, useDrag } from '@use-gesture/react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getSlideIn.js';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/getFade.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+
+var SwipeableDrawer$1 = {"sui-swipeable-drawer-header-drag":"sui-swipeable-drawer-header-drag"};
+
+// Keeps track of whether everything is good to go or not, in the most efficient way possible
+function useReady() {
+    const [ready, setReady] = useState(false);
+    const [readyMap, updateReadyMap] = useState({});
+    const registerReady = useCallback((key) => {
+        // Register the check we're gonna wait for until it's ready
+        updateReadyMap((ready) => ({ ...ready, [key]: false }));
+        return () => {
+            // Set it to ready
+            updateReadyMap((ready) => ({ ...ready, [key]: true }));
+        };
+    }, []);
+    useEffect(() => {
+        const states = Object.values(readyMap);
+        if (states.length === 0) {
+            return;
+        }
+        const isReady = states.every(Boolean);
+        if (isReady) {
+            setReady(true);
+        }
+        else {
+            setReady(false);
+        }
+    }, [readyMap]);
+    return { ready, registerReady };
+}
+
+// Hook for determining the size of an element using the Resize Observer API
+const observerOptions = {
+    // Respond to changes to padding, happens often on iOS when using env(safe-area-inset-bottom)
+    // And the user hides or shows the Safari browser toolbar
+    box: 'border-box',
+};
+/**
+ * Hook for determining the size of an element using the Resize Observer API.
+ *
+ * @param ref - A React ref to an element
+ */
+function useElementSizeObserver(ref, { enabled, resizeSourceRef, }) {
+    const [size, setSize] = useState(0);
+    const handleResize = useCallback((entries) => {
+        // we only observe one element, so accessing the first entry here is fine
+        const entry = entries?.[0];
+        if (!entry) {
+            // Early return if no entry - can happen during observer disconnect
+            return;
+        }
+        const el = entry.target;
+        if (!el) {
+            // Early return if no target element
+            return;
+        }
+        // Prefer intrinsic content size to visible height so drag doesn’t change the measured height
+        // @juggle/resize-observer provides consistent borderBoxSize access across browsers
+        const roBlock = entry?.borderBoxSize?.[0]?.blockSize ?? 0;
+        const contentRectH = entry?.contentRect?.height ?? 0;
+        const scrollH = el?.scrollHeight ?? 0;
+        const offsetH = el?.offsetHeight ?? 0;
+        const newSize = Math.max(scrollH, roBlock, contentRectH, offsetH);
+        setSize(newSize);
+        // Update resize source if provided
+        if (resizeSourceRef) {
+            resizeSourceRef.current = 'element';
+        }
+    }, [resizeSourceRef]);
+    useLayoutEffect(() => {
+        if (!enabled) {
+            return;
+        }
+        let resizeObserver = null;
+        let rafId = 0;
+        let initialMeasurementRafId = 0;
+        const startObserving = () => {
+            const el = ref.current;
+            if (!el || !el.isConnected)
+                return;
+            // @juggle/resize-observer provides cross-browser compatibility and polyfills
+            resizeObserver = new ResizeObserver(handleResize);
+            resizeObserver.observe(el, observerOptions);
+            // Seed an initial measurement in case RO hasn't fired yet
+            initialMeasurementRafId = requestAnimationFrame(() => {
+                const initial = Math.max(el.scrollHeight, el.offsetHeight, el.getBoundingClientRect().height);
+                if (initial > 0) {
+                    setSize(initial);
+                }
+                // else keep waiting for RO to update on next ticks
+            });
+        };
+        // If the element is not yet mounted (e.g. Modal shouldRender=false), keep
+        // polling via rAF until it's available, then attach the observer.
+        const waitForElement = () => {
+            if (ref.current) {
+                startObserving();
+            }
+            else {
+                rafId = requestAnimationFrame(waitForElement);
+            }
+        };
+        if (ref.current) {
+            startObserving();
+        }
+        else {
+            rafId = requestAnimationFrame(waitForElement);
+        }
+        return () => {
+            if (rafId)
+                cancelAnimationFrame(rafId);
+            if (initialMeasurementRafId)
+                cancelAnimationFrame(initialMeasurementRafId);
+            if (resizeObserver) {
+                resizeObserver.disconnect();
+            }
+        };
+    }, [ref, handleResize, enabled]);
+    return enabled ? size : 0;
+}
+
+// Hook for measuring drawer dimensions
+// Hook for tracking viewport height
+function useMaxHeight(registerReady) {
+    const { globalThis } = useWindowContext();
+    const setReady = useMemo(() => {
+        return registerReady ? registerReady('maxHeight') : undefined;
+    }, [registerReady]);
+    const [maxHeight, setMaxHeight] = useState(() => globalThis.innerHeight ?? 0);
+    const raf = useRef(0);
+    const maxReadyCalledRef = useRef(false);
+    // Reset the ready flag when setReady changes (drawer reset)
+    useLayoutEffect(() => {
+        maxReadyCalledRef.current = false;
+    }, [setReady]);
+    useLayoutEffect(() => {
+        const handleResize = () => {
+            if (raf.current) {
+                // bail to throttle the amount of resize changes
+                return;
+            }
+            // throttle state changes using rAF
+            raf.current = requestAnimationFrame(() => {
+                // Check if cleanup already ran (raf.current would be 0)
+                if (raf.current !== 0) {
+                    setMaxHeight(globalThis.innerHeight); // ✅ Safe to update
+                    raf.current = 0;
+                }
+            });
+        };
+        globalThis.addEventListener('resize', handleResize);
+        setMaxHeight(globalThis.innerHeight);
+        // Call setReady exactly once for window height readiness
+        if (setReady && !maxReadyCalledRef.current) {
+            maxReadyCalledRef.current = true;
+            setReady();
+        }
+        return () => {
+            globalThis.removeEventListener('resize', handleResize);
+            cancelAnimationFrame(raf.current);
+        };
+    }, [setReady, globalThis]);
+    return maxHeight;
+}
+/**
+ * Custom hook to preserve last non-zero height values
+ */
+function usePreservedHeight(currentHeight) {
+    const lastHeightRef = useRef(0);
+    useLayoutEffect(() => {
+        if (currentHeight > 0) {
+            lastHeightRef.current = currentHeight;
+        }
+    }, [currentHeight]);
+    return currentHeight > 0 ? currentHeight : lastHeightRef.current;
+}
+function useDimensions({ contentRef, footerEnabled, footerRef, headerEnabled, headerRef, registerReady, resizeSourceRef, open, }) {
+    const setReady = useMemo(() => registerReady('contentHeight'), [registerReady]);
+    // Do not re-register contentHeight readiness on disconnect; register once above and let
+    // the ResizeObserver drive readiness when size > 0. This avoids readiness loops.
+    // (Intentionally removed disconnection re-register logic)
+    const maxHeight = useMaxHeight(registerReady);
+    // Measure all elements - only when drawer is open
+    const headerHeight = useElementSizeObserver(headerRef, {
+        enabled: open && headerEnabled,
+        resizeSourceRef,
+    });
+    const contentHeight = useElementSizeObserver(contentRef, {
+        enabled: open,
+        resizeSourceRef,
+    });
+    const footerHeight = useElementSizeObserver(footerRef, {
+        enabled: open && footerEnabled,
+        resizeSourceRef,
+    });
+    // Preserve last non-zero heights to avoid collapsing to 0 when the
+    // modal/portal temporarily unmounts or RO reports 0 during transitions
+    const effectiveContentHeight = usePreservedHeight(contentHeight);
+    const effectiveHeaderHeight = usePreservedHeight(headerHeight);
+    const effectiveFooterHeight = usePreservedHeight(footerHeight);
+    // When content is measured (>0), mark ready for contentHeight
+    useLayoutEffect(() => {
+        if (!setReady)
+            return;
+        const ok = contentHeight > 0;
+        if (ok) {
+            setReady();
+        }
+    }, [contentHeight, contentRef, setReady]);
+    // Calculate available space for content, ensuring it's never negative
+    const availableContentSpace = Math.max(0, maxHeight - effectiveHeaderHeight - effectiveFooterHeight);
+    const minHeight = Math.min(availableContentSpace, effectiveContentHeight) +
+        effectiveHeaderHeight +
+        effectiveFooterHeight;
+    return {
+        maxHeight,
+        minHeight,
+        headerHeight,
+        footerHeight: effectiveFooterHeight,
+    };
+}
+
+// Hook for calculating snap points
+function roundAndCheckForNaN(value) {
+    const rounded = Math.round(value);
+    if (Number.isNaN(rounded)) {
+        throw new TypeError(`Found a NaN! Check your snapPoints / snapTo`);
+    }
+    return rounded;
+}
+// Clamp function with clear NaN handling
+function clamp(number, lower, upper) {
+    number = +number;
+    lower = +lower;
+    upper = +upper;
+    // Handle NaN values with sensible defaults
+    const safeLower = Number.isNaN(lower) ? 0 : lower;
+    const safeUpper = Number.isNaN(upper) ? Number.POSITIVE_INFINITY : upper;
+    // Ensure lower <= upper to avoid invalid ranges
+    const finalLower = Math.min(safeLower, safeUpper);
+    const finalUpper = Math.max(safeLower, safeUpper);
+    if (Number.isNaN(number)) {
+        return finalLower;
+    }
+    return Math.min(Math.max(number, finalLower), finalUpper);
+}
+function processSnapPoints(snapPoints, maxHeight) {
+    // Validate maxHeight input
+    if (!Number.isFinite(maxHeight) || maxHeight <= 0) {
+        throw new Error(`Invalid maxHeight: ${maxHeight}. Must be a positive finite number.`);
+    }
+    // Match React Spring Bottom Sheet implementation exactly
+    const safeSnaps = []
+        .concat(snapPoints)
+        .map(roundAndCheckForNaN);
+    const snapPointsDedupedSet = safeSnaps.reduce((acc, snapPoint) => {
+        acc.add(clamp(snapPoint, 0, maxHeight));
+        return acc;
+    }, new Set());
+    const processedPoints = Array.from(snapPointsDedupedSet);
+    // Handle empty snap points array
+    if (processedPoints.length === 0) {
+        throw new Error('No valid snap points available. The snapPoints function must return at least one valid number.\n' +
+            'Example: snapPoints: ({ minHeight, maxHeight }) => [minHeight, maxHeight]');
+    }
+    const minSnap = Math.min(...processedPoints);
+    if (Number.isNaN(minSnap)) {
+        throw new TypeError('minSnap is NaN');
+    }
+    const maxSnap = Math.max(...processedPoints);
+    if (Number.isNaN(maxSnap)) {
+        throw new TypeError('maxSnap is NaN');
+    }
+    return {
+        snapPoints: processedPoints,
+        minSnap,
+        maxSnap,
+    };
+}
+function useSnapPoints({ contentRef, footerEnabled, footerRef, getSnapPoints, headerEnabled, headerRef, heightRef, lastSnapRef, ready, registerReady, resizeSourceRef, open, }) {
+    const { maxHeight, minHeight, headerHeight, footerHeight } = useDimensions({
+        contentRef,
+        footerEnabled,
+        footerRef,
+        headerEnabled,
+        headerRef,
+        registerReady,
+        resizeSourceRef,
+        open,
+    });
+    const { snapPoints, minSnap, maxSnap } = processSnapPoints(ready
+        ? getSnapPoints({
+            height: heightRef.current ?? 0,
+            footerHeight,
+            headerHeight,
+            minHeight,
+            maxHeight,
+        })
+        : [0], maxHeight);
+    function findSnap(numberOrCallback) {
+        // Defensive check: should never happen due to processSnapPoints validation
+        if (snapPoints.length === 0) {
+            throw new Error('Cannot find snap point: no snap points available');
+        }
+        let unsafeSearch;
+        if (typeof numberOrCallback === 'function') {
+            try {
+                unsafeSearch = numberOrCallback({
+                    footerHeight,
+                    headerHeight,
+                    height: heightRef.current ?? 0,
+                    minHeight,
+                    maxHeight,
+                    snapPoints,
+                    lastSnap: lastSnapRef.current,
+                });
+            }
+            catch (error) {
+                // If callback throws, fall back to current position or minSnap
+                unsafeSearch = heightRef.current ?? minSnap;
+            }
+        }
+        else {
+            unsafeSearch = numberOrCallback;
+        }
+        let querySnap;
+        try {
+            querySnap = roundAndCheckForNaN(unsafeSearch);
+        }
+        catch (error) {
+            // If number is invalid (NaN, etc), fall back to current position or minSnap
+            querySnap = heightRef.current ?? minSnap;
+        }
+        // Support index-based selection: if querySnap is a small integer and within bounds, treat as index
+        const isValidIndex = querySnap >= 0 &&
+            querySnap < snapPoints.length &&
+            Number.isInteger(querySnap);
+        if (isValidIndex) {
+            return snapPoints[querySnap];
+        }
+        // Otherwise, find closest snap point by value
+        return snapPoints.reduce((prev, curr) => Math.abs(curr - querySnap) < Math.abs(prev - querySnap) ? curr : prev, minSnap);
+    }
+    return { minSnap, maxSnap, findSnap, maxHeight, snapPoints };
+}
+
+//implementation for Drawer gestures
+// Standardized spring configuration
+const SPRING_CONFIG = {
+    type: 'spring',
+    stiffness: 600,
+    damping: 50,
+    mass: 1,
+};
+// Rubberband effect constants
+const RUBBERBAND_RESISTANCE = 0.8;
+const SINGLE_SNAP_STRETCH_FACTOR = 1.2;
+const MULTI_SNAP_STRETCH_FACTOR = 1.8;
+// Gesture behavior constants
+const DISMISS_THRESHOLD = 50; // Minimum movement in pixels to trigger dismiss
+const VELOCITY_THRESHOLD = 0.1; // Minimum velocity to apply to spring animation
+const PREDICTION_MULTIPLIER = 2; // Multiplier for velocity-based position prediction
+const DISMISS_POSITION_FACTOR = 2; // Divisor for calculating dismiss threshold (minSnap / 2)
+// Default functions
+function defaultSnapPoints({ minHeight }) {
+    // When no snap points are specified, just use content height
+    // This means the drawer shows content at natural size and can only dismiss
+    return [minHeight];
+}
+function defaultInitialSnap({ snapPoints, lastSnap: _lastSnap, }) {
+    // Default behavior: choose the smallest snap point (usually content height)
+    // Users can override this in their initialSnap function if they want lastSnap behavior
+    return Math.min(...snapPoints);
+}
+function useDrawerGestures(options) {
+    const { anchor, open, onClose, snapPoints: getSnapPoints = defaultSnapPoints, initialSnap: getInitialSnap = defaultInitialSnap, contentRef, headerRef, footerRef, headerEnabled, footerEnabled, } = options;
+    const { ready, registerReady } = useReady();
+    // Height tracking refs
+    const heightRef = useRef(0);
+    const lastSnapRef = useRef(null);
+    const resizeSourceRef = useRef('window');
+    // Animation cleanup ref to prevent memory leaks
+    const animationRef = useRef(null);
+    // Cleanup animations on unmount to prevent memory leaks
+    useLayoutEffect(() => {
+        return () => {
+            animationRef.current?.stop();
+        };
+    }, []);
+    // Motion values
+    const heightMotionValue = useMotionValue(0);
+    // We animate with spring only on release; during drag we set the value directly for immediate follow
+    // Ensure motion value starts with correct value when drawer opens
+    useLayoutEffect(() => {
+        if (open &&
+            ready &&
+            heightRef.current > 0 &&
+            heightMotionValue.get() === 0) {
+            heightMotionValue.set(heightRef.current);
+        }
+    }, [open, ready, heightMotionValue]);
+    // Snap points calculation
+    const { minSnap, maxSnap, findSnap, maxHeight } = useSnapPoints({
+        contentRef: contentRef,
+        footerEnabled,
+        footerRef: footerRef,
+        getSnapPoints,
+        headerEnabled,
+        headerRef: headerRef,
+        heightRef,
+        lastSnapRef,
+        ready,
+        registerReady,
+        resizeSourceRef,
+        open,
+    });
+    // Calculate initial snap
+    const defaultSnap = useMemo(() => {
+        if (!ready)
+            return 0;
+        // If initial snap is a function, it receives state via findSnap
+        return findSnap(getInitialSnap);
+    }, [ready, getInitialSnap, findSnap]);
+    // Only set the initial height once per open cycle when content is present
+    const didInitRef = useRef(false);
+    const isContentPresent = !!contentRef?.current && contentRef.current.isConnected;
+    useLayoutEffect(() => {
+        if (!open || !ready)
+            return;
+        if (didInitRef.current)
+            return;
+        // Use the calculated defaultSnap (which may or may not include lastSnap based on user's initialSnap function)
+        const safeInitial = defaultSnap > 0 ? defaultSnap : minSnap;
+        // If we don't have content present and no valid fallback height, wait
+        if (!isContentPresent && safeInitial <= 0)
+            return;
+        // 1. Set to 0 immediately
+        heightMotionValue.set(0);
+        // 2. Update heightRef
+        heightRef.current = safeInitial;
+        // 3. Animate to target position
+        animationRef.current = animate(heightMotionValue, safeInitial, SPRING_CONFIG);
+        didInitRef.current = true;
+    }, [
+        open,
+        ready,
+        isContentPresent,
+        defaultSnap,
+        minSnap,
+        heightMotionValue,
+        lastSnapRef.current,
+    ]);
+    // Content resize:
+    useLayoutEffect(() => {
+        if (!open || !ready || !isContentPresent)
+            return;
+        if (!didInitRef.current)
+            return; // Only after initial setup is complete
+        // Find closest snap point to current height (preserves user positioning)
+        const currentHeight = heightRef.current ?? 0;
+        if (currentHeight > 0) {
+            const closestSnap = findSnap(currentHeight);
+            animationRef.current = animate(heightMotionValue, closestSnap, SPRING_CONFIG);
+            heightRef.current = closestSnap;
+            lastSnapRef.current = closestSnap;
+        }
+    }, [minSnap, maxSnap]); // Triggers when snap points change (content resize)
+    // Reset init flag when closing so next open can initialize again
+    useLayoutEffect(() => {
+        if (!open) {
+            didInitRef.current = false;
+            // Preserve the current height as lastSnap for next open
+            if (heightRef.current > 0) {
+                lastSnapRef.current = heightRef.current;
+            }
+            // Animate motion value to 0 on close
+            animationRef.current = animate(heightMotionValue, 0, SPRING_CONFIG);
+        }
+    }, [open, heightMotionValue]);
+    // Drag handler
+    const handleDrag = useEventCallback(({ args: [{ closeOnTap = false } = {}] = [], cancel, down, last, memo = heightMotionValue.get(), movement: [_mx, _my], tap, velocity: [_, velocityY], event, }) => {
+        if (!ready) {
+            cancel();
+            return memo;
+        }
+        // Handle close on tap (backdrop tap)
+        if (closeOnTap && tap) {
+            cancel();
+            // Use timeout to avoid tap events on backdrop triggering click events underneath
+            onClose(event, 'gestureSwipe');
+            return memo;
+        }
+        // Filter out taps
+        if (tap) {
+            return memo;
+        }
+        // dismissal logic for all anchors
+        const getDismissInfo = () => {
+            switch (anchor) {
+                case 'bottom':
+                    return {
+                        isDismissDirection: _my > 0,
+                        movement: _my,
+                        threshold: DISMISS_THRESHOLD,
+                    };
+                case 'top':
+                    return {
+                        isDismissDirection: _my < 0,
+                        movement: Math.abs(_my),
+                        threshold: DISMISS_THRESHOLD,
+                    };
+                case 'left':
+                    return {
+                        isDismissDirection: _mx < 0,
+                        movement: Math.abs(_mx),
+                        threshold: DISMISS_THRESHOLD,
+                    };
+                case 'right':
+                    return {
+                        isDismissDirection: _mx > 0,
+                        movement: Math.abs(_mx),
+                        threshold: DISMISS_THRESHOLD,
+                    };
+                default:
+                    return {
+                        isDismissDirection: false,
+                        movement: 0,
+                        threshold: DISMISS_THRESHOLD,
+                    };
+            }
+        };
+        const { isDismissDirection, movement, threshold } = getDismissInfo();
+        // For horizontal drawers, only handle dismiss (no snap points)
+        const isVertical = anchor === 'top' || anchor === 'bottom';
+        if (!isVertical) {
+            // Check for dismiss condition (horizontal drawers only)
+            if (!down && isDismissDirection && movement > threshold) {
+                cancel();
+                onClose(event, 'gestureSwipe');
+                return memo;
+            }
+            return memo;
+        }
+        const my = anchor === 'bottom' ? _my * -1 : _my;
+        const rawY = memo + my;
+        const predictedDistance = my * velocityY;
+        const predictedY = Math.max(minSnap, Math.min(maxHeight, rawY + predictedDistance * PREDICTION_MULTIPLIER));
+        // Check for vertical dismissal - only when trying to go below minimum snap point
+        if (!down && isDismissDirection) {
+            const dismissThreshold = minSnap / DISMISS_POSITION_FACTOR;
+            const currentPosition = rawY + predictedDistance;
+            if (currentPosition < dismissThreshold) {
+                cancel();
+                onClose(event, 'gestureSwipe');
+                return memo;
+            }
+        }
+        let newY;
+        if (down) {
+            if (minSnap === maxSnap) {
+                // Special case when min and max snap are the same (only one snap point)
+                if (rawY < minSnap) {
+                    newY = rawY; // Allow smooth dragging down (toward dismiss) with no resistance
+                }
+                else {
+                    // Strong resistance when dragging up beyond content
+                    newY = rubberbandIfOutOfBounds(rawY, minSnap, maxSnap * SINGLE_SNAP_STRETCH_FACTOR, RUBBERBAND_RESISTANCE);
+                }
+            }
+            else {
+                // Multiple snap points: allow stretching beyond maxSnap for rubberband effect
+                newY = rubberbandIfOutOfBounds(rawY, 0, maxSnap * MULTI_SNAP_STRETCH_FACTOR, RUBBERBAND_RESISTANCE);
+            }
+        }
+        else {
+            // On release: use predicted position
+            newY = predictedY;
+        }
+        if (last) {
+            // End of gesture: find closest snap point and animate to it
+            const targetSnap = findSnap(newY);
+            // Animate to target snap point using spring
+            animationRef.current = animate(heightMotionValue, targetSnap, {
+                ...SPRING_CONFIG,
+                velocity: Math.abs(velocityY) > VELOCITY_THRESHOLD ? velocityY : 0,
+            });
+            heightRef.current = targetSnap;
+            lastSnapRef.current = targetSnap;
+            return memo;
+        }
+        // During drag: directly set height to follow finger with rubberband
+        heightMotionValue.set(newY);
+        return memo;
+    });
+    // Gesture binding
+    const isVertical = anchor === 'top' || anchor === 'bottom';
+    const bind = useDrag(handleDrag, {
+        filterTaps: true,
+    });
+    //  animate height for vertical drawers only
+    const heightStyle = useTransform(heightMotionValue, (y) => {
+        // Ensure drawer never exceeds viewport bounds
+        const clamped = Math.max(0, Math.min(y, maxHeight));
+        return `${Math.round(clamped)}px`;
+    });
+    // Imperative snapTo function
+    const snapTo = useCallback((numberOrCallback) => {
+        if (!ready)
+            return;
+        const targetSnap = findSnap(numberOrCallback);
+        // Animate to target snap point
+        animationRef.current = animate(heightMotionValue, targetSnap, SPRING_CONFIG);
+        // Update refs
+        heightRef.current = targetSnap;
+        lastSnapRef.current = targetSnap;
+    }, [ready, findSnap, heightMotionValue, heightRef, lastSnapRef]);
+    return {
+        bind,
+        motionProps: {
+            style: ready && isVertical
+                ? {
+                    height: heightStyle,
+                }
+                : {},
+        },
+        isGestureEnabled: ready,
+        contentRef,
+        headerRef,
+        footerRef,
+        snapTo,
+    };
+}
+
+/**
+ * SwipeableDrawer Component - Gesture-enhanced drawer with swipe support
+ *
+ * Wraps the base Drawer component and adds touch/mouse gesture support for resizing and closing.
+ * Perfect for mobile bottom sheets and interactive panels.
+ *
+ * @example
+ * ```tsx
+ * bottom sheet with gestures
+ * <SwipeableDrawer
+ *   open={open}
+ *   onClose={onClose}
+ *   anchor="bottom"
+ *   gestureControlsProps={{
+ *     snapPoints: ({ minHeight, maxHeight }) => [
+ *       minHeight,        // Content height
+ *       maxHeight * 0.6,  // 60% of screen
+ *       maxHeight         // Full screen
+ *     ],
+ *     initialSnap: 0      // Start at content height
+ *   }}
+ * >
+ *   <Content />
+ * </SwipeableDrawer>
+ * ```
+ */
+const SwipeableDrawer = forwardRef((inProps, ref) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: 'SwipeableDrawer',
+    });
+    const { anchor = 'bottom', bodyProps, classes, className, children, header, footer, open, onClose, variant = 'temporary', blocking = true, gestureControlsProps, ...rest } = props;
+    // Refs for gesture system
+    const contentRef = useRef(null);
+    const headerRef = useRef(null);
+    const footerRef = useRef(null);
+    const isVertical = anchor === 'top' || anchor === 'bottom';
+    // Stabilize header/footer enabled state to prevent measurement fluctuations
+    // Header is enabled if there's a header prop OR if there's a drag handle (for vertical drawers)
+    const headerEnabled = useMemo(() => !!header || isVertical, [header, isVertical]);
+    const footerEnabled = useMemo(() => !!footer, [footer]);
+    const cls = useClasses('swipeable-drawer', classes, className);
+    const { action, ...gestureProps } = gestureControlsProps || {};
+    const gestureControls = useDrawerGestures({
+        anchor,
+        open,
+        onClose: (event, reason) => {
+            onClose?.(event, reason);
+        },
+        contentRef,
+        headerRef,
+        footerRef,
+        headerEnabled,
+        footerEnabled,
+        ...gestureProps,
+    });
+    // Expose snapTo function through action ref
+    useImperativeHandle(action, () => ({
+        snapTo: gestureControls.snapTo,
+    }), [gestureControls.snapTo]);
+    const gestureBindProps = gestureControls.bind();
+    // Enhanced body props that include gesture motion
+    const enhancedBodyProps = {
+        ...bodyProps,
+        // Apply gesture bindings for horizontal drawers (left/right)
+        // Vertical drawers (top/bottom) use motion values instead
+        ...(!isVertical ? gestureBindProps : {}),
+        style: {
+            ...bodyProps?.style,
+            // Apply motion styles for vertical drawers (top/bottom)
+            ...(isVertical && {
+                ...gestureControls.motionProps.style,
+            }),
+        },
+    };
+    // Consolidate measurement refs (refs only)
+    const measurementRefs = {
+        header: headerRef,
+        footer: footerRef,
+        content: contentRef,
+    };
+    // Gesture props for header
+    const headerGestureProps = {
+        className: clsx(isVertical && cls('header-drag')),
+        ...(isVertical && gestureBindProps),
+    };
+    return (jsx(Drawer, { ref: ref, anchor: anchor, open: open, onClose: onClose, variant: variant, blocking: blocking, bodyProps: enhancedBodyProps, classes: classes, className: className, measurementRefs: measurementRefs, headerProps: headerGestureProps, header: isVertical ? (jsxs(Fragment, { children: [jsx(DragHandle, { anchor: anchor }), header] })) : (header), footer: footer, ...rest, children: children }));
+});
+SwipeableDrawer.displayName = 'SuiSwipeableDrawer';
+
+export { SwipeableDrawer, SwipeableDrawer$1 as swipeableDrawerStyles };