@johly/vaul-svelte 1.0.0-next.8

package/dist/components/drawer/types.d.ts

@@ -0,0 +1,126 @@
+import type { BitsPrimitiveDivAttributes, DialogContentPropsWithoutHTML, DialogOverlayPropsWithoutHTML, Dialog as DrawerPrimitive, WithChild, WithoutChildrenOrChild } from "bits-ui";
+import type { WithChildren, Without } from "svelte-toolbelt";
+export type WithFadeFromProps = {
+    /**
+     * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
+     * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
+     * You can also use px values, which doesn't take screen height into account.
+     */
+    snapPoints: (number | string)[];
+    /**
+     * Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
+     */
+    fadeFromIndex: number;
+};
+export type WithoutFadeFromProps = {
+    /**
+     * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
+     * Should go from least visible. Example `[0.2, 0.5, 0.8]`.
+     * You can also use px values, which doesn't take screen height into account.
+     */
+    snapPoints?: (number | string)[];
+    fadeFromIndex?: never;
+};
+export type BaseDrawerRootPropsWithoutHTML = WithChildren<{
+    activeSnapPoint?: number | string | null;
+    onActiveSnapPointChange?: (snapPoint: number | string | null) => void;
+    open?: boolean;
+    /**
+     * Number between 0 and 1 that determines when the drawer should be closed.
+     * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
+     * @default 0.25
+     */
+    closeThreshold?: number;
+    /**
+     * When `true` the `body` doesn't get any styles assigned from Vaul
+     */
+    noBodyStyles?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    shouldScaleBackground?: boolean;
+    /**
+     * When `false` we don't change body's background color when the drawer is open.
+     * @default true
+     */
+    setBackgroundColorOnScale?: boolean;
+    /**
+     * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
+     * @default 500ms
+     */
+    scrollLockTimeout?: number;
+    /**
+     * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
+     */
+    fixed?: boolean;
+    /**
+     * When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
+     * @default false
+     */
+    handleOnly?: boolean;
+    /**
+     * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
+     * Use this in combination with the `open` prop, otherwise you won't be able to open/close the drawer.
+     * @default true
+     */
+    dismissible?: boolean;
+    onDrag?: (event: PointerEvent, percentageDragged: number) => void;
+    onRelease?: (event: PointerEvent, open: boolean) => void;
+    /**
+     * When `false` it allows to interact with elements outside of the drawer without closing it.
+     * @default true
+     */
+    modal?: boolean;
+    nested?: boolean;
+    onClose?: () => void;
+    /**
+     * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
+     * @default 'bottom'
+     */
+    direction?: "top" | "bottom" | "left" | "right";
+    /**
+     * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
+     * @default false
+     */
+    disablePreventScroll?: boolean;
+    /**
+     * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
+     * Setting it to `false` will fall back to the default browser behavior.
+     * @default true when {@link snapPoints} is defined
+     */
+    repositionInputs?: boolean;
+    /**
+     * Disabled velocity based swiping for snap points.
+     * This means that a snap point won't be skipped even if the velocity is high enough.
+     * Useful if each snap point in a drawer is equally important.
+     * @default false
+     */
+    snapToSequentialPoint?: boolean;
+    container?: HTMLElement | null;
+    /**
+     * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
+     * Useful to revert any state changes for example.
+     */
+    onAnimationEnd?: (open: boolean) => void;
+    preventScrollRestoration?: boolean;
+    autoFocus?: boolean;
+}> & (WithFadeFromProps | WithoutFadeFromProps);
+export type DrawerRootPropsWithoutHTML = BaseDrawerRootPropsWithoutHTML & Without<DrawerPrimitive.RootProps, BaseDrawerRootPropsWithoutHTML>;
+export type DrawerRootProps = DrawerRootPropsWithoutHTML;
+export type DrawerHandlePropsWithoutHTML = Omit<WithChild<{
+    /**
+     * Whether to prevent cycling the snap points when the handle is pressed.
+     *
+     * @default false
+     */
+    preventCycle?: boolean;
+}>, "child">;
+export type DrawerHandleProps = DrawerHandlePropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DrawerHandlePropsWithoutHTML>;
+export type DrawerContentPropsWithoutHTML = WithChildren<WithoutChildrenOrChild<Omit<DialogContentPropsWithoutHTML, "preventScroll">>>;
+export type DrawerContentProps = DrawerContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DrawerContentPropsWithoutHTML>;
+export type DrawerOverlayPropsWithoutHTML = WithChildren<WithoutChildrenOrChild<DialogOverlayPropsWithoutHTML>>;
+export type DrawerOverlayProps = DrawerOverlayPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DrawerOverlayPropsWithoutHTML>;
+export type { DialogPortalPropsWithoutHTML as DrawerPortalPropsWithoutHTML, DialogPortalProps as DrawerPortalProps, DialogTriggerProps as DrawerTriggerProps, DialogTitleProps as DrawerTitleProps, DialogDescriptionProps as DrawerDescriptionProps, DialogCloseProps as DrawerCloseProps, } from "bits-ui";

package/dist/components/drawer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export * as Drawer from "./drawer/index.js";

package/dist/components/index.js

@@ -0,0 +1 @@
+export * as Drawer from "./drawer/index.js";

package/dist/components/utils/mounted.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	let { onMounted }: { onMounted: (bool: boolean) => void } = $props();
+
+	onMount(() => {
+		onMounted(true);
+		return () => {
+			onMounted(false);
+		};
+	});
+</script>

package/dist/components/utils/mounted.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    onMounted: (bool: boolean) => void;
+};
+declare const Mounted: import("svelte").Component<$$ComponentProps, {}, "">;
+type Mounted = ReturnType<typeof Mounted>;
+export default Mounted;

package/dist/context.d.ts

@@ -0,0 +1,42 @@
+import { Context } from "runed";
+import type { DrawerDirection } from "./types.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
+interface DrawerContextValue extends ReadableBoxedValues<{
+    dismissible: boolean;
+    snapPoints: (number | string)[] | null | undefined;
+    modal: boolean;
+    onOpenChange: (o: boolean) => void;
+    direction: DrawerDirection;
+    shouldScaleBackground: boolean;
+    setBackgroundColorOnScale: boolean;
+    noBodyStyles: boolean;
+    handleOnly: boolean;
+    container: HTMLElement | null;
+    autoFocus: boolean;
+}>, WritableBoxedValues<{
+    keyboardIsOpen: boolean;
+    activeSnapPoint: number | string | null;
+    open: boolean;
+}> {
+    drawerNode: HTMLElement | null;
+    setDrawerNode: (node: HTMLElement | null) => void;
+    overlayNode: HTMLElement | null;
+    setOverlayNode: (node: HTMLElement | null) => void;
+    onPress: (event: PointerEvent) => void;
+    onRelease: (event: PointerEvent | null) => void;
+    onDrag: (event: PointerEvent) => void;
+    onNestedDrag: (event: PointerEvent, percentageDragged: number) => void;
+    onNestedOpenChange: (o: boolean) => void;
+    onNestedRelease: (event: PointerEvent, open: boolean) => void;
+    closeDrawer: () => void;
+    restorePositionSetting: () => void;
+    onDialogOpenChange: (open: boolean) => void;
+    handleOpenChange: (open: boolean) => void;
+    readonly isDragging: boolean;
+    readonly snapPointsOffset: number[] | null;
+    readonly activeSnapPointIndex?: number | null;
+    readonly shouldAnimate: boolean;
+    readonly shouldFade: boolean;
+}
+export declare const DrawerContext: Context<DrawerContextValue>;
+export {};

package/dist/context.js

@@ -0,0 +1,2 @@
+import { Context } from "runed";
+export const DrawerContext = new Context("Drawer.Root");

package/dist/helpers.d.ts

@@ -0,0 +1,16 @@
+import type { AnyFunction, DrawerDirection } from "./types.js";
+interface Style {
+    [key: string]: string;
+}
+export declare function isInView(el: HTMLElement): boolean;
+export declare function set(el: Element | HTMLElement | null | undefined, styles: Style, ignoreCache?: boolean): void;
+export declare function reset(el: Element | HTMLElement | null, prop?: string): void;
+export declare const isVertical: (direction: DrawerDirection) => boolean;
+export declare function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null;
+export declare function dampenValue(v: number): number;
+export declare function assignStyle(element: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>): () => void;
+/**
+ * Receives functions as arguments and returns a new function that calls all.
+ */
+export declare function chain<T>(...fns: T[]): (...args: T extends AnyFunction ? Parameters<T> : never) => void;
+export {};

package/dist/helpers.js

@@ -0,0 +1,95 @@
+const cache = new WeakMap();
+export function isInView(el) {
+    const rect = el.getBoundingClientRect();
+    if (!window.visualViewport)
+        return false;
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        // Need + 40 for safari detection
+        rect.bottom <= window.visualViewport.height - 40 &&
+        rect.right <= window.visualViewport.width);
+}
+export function set(el, styles, ignoreCache = false) {
+    if (!el || !(el instanceof HTMLElement))
+        return;
+    let originalStyles = {};
+    Object.entries(styles).forEach(([key, value]) => {
+        if (key.startsWith("--")) {
+            el.style.setProperty(key, value);
+            return;
+        }
+        originalStyles[key] = el.style[key];
+        el.style[key] = value;
+    });
+    if (ignoreCache)
+        return;
+    cache.set(el, originalStyles);
+}
+export function reset(el, prop) {
+    if (!el || !(el instanceof HTMLElement))
+        return;
+    let originalStyles = cache.get(el);
+    if (!originalStyles)
+        return;
+    if (prop) {
+        el.style[prop] = originalStyles[prop];
+    }
+    else {
+        Object.entries(originalStyles).forEach(([key, value]) => {
+            el.style[key] = value;
+        });
+    }
+}
+export const isVertical = (direction) => {
+    switch (direction) {
+        case "top":
+        case "bottom":
+            return true;
+        case "left":
+        case "right":
+            return false;
+        default:
+            return direction;
+    }
+};
+export function getTranslate(element, direction) {
+    if (!element) {
+        return null;
+    }
+    const style = window.getComputedStyle(element);
+    const transform = 
+    // @ts-expect-error - shh
+    style.transform || style.webkitTransform || style.mozTransform;
+    let mat = transform.match(/^matrix3d\((.+)\)$/);
+    if (mat) {
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
+        return parseFloat(mat[1].split(", ")[isVertical(direction) ? 13 : 12]);
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix
+    mat = transform.match(/^matrix\((.+)\)$/);
+    return mat ? parseFloat(mat[1].split(", ")[isVertical(direction) ? 5 : 4]) : null;
+}
+export function dampenValue(v) {
+    return 8 * (Math.log(v + 1) - 2);
+}
+export function assignStyle(element, style) {
+    if (!element)
+        return () => { };
+    const prevStyle = element.style.cssText;
+    Object.assign(element.style, style);
+    return () => {
+        element.style.cssText = prevStyle;
+    };
+}
+/**
+ * Receives functions as arguments and returns a new function that calls all.
+ */
+export function chain(...fns) {
+    return (...args) => {
+        for (const fn of fns) {
+            if (typeof fn === "function") {
+                fn(...args);
+            }
+        }
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/index.js";
+export * from "./types.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from "./components/index.js";
+export * from "./types.js";

package/dist/internal/browser.d.ts

@@ -0,0 +1,8 @@
+export declare const isBrowser: boolean;
+export declare function isMobileFirefox(): boolean | undefined;
+export declare function isMac(): boolean | undefined;
+export declare function isIPhone(): boolean | undefined;
+export declare function isSafari(): boolean | undefined;
+export declare function isIPad(): boolean | undefined;
+export declare function isIOS(): boolean | undefined;
+export declare function testPlatform(re: RegExp): boolean | undefined;

package/dist/internal/browser.js

@@ -0,0 +1,30 @@
+export const isBrowser = typeof document !== "undefined";
+export function isMobileFirefox() {
+    const userAgent = navigator.userAgent;
+    return (typeof window !== "undefined" &&
+        ((/Firefox/.test(userAgent) && /Mobile/.test(userAgent)) || // Android Firefox
+            /FxiOS/.test(userAgent)) // iOS Firefox
+    );
+}
+export function isMac() {
+    return testPlatform(/^Mac/);
+}
+export function isIPhone() {
+    return testPlatform(/^iPhone/);
+}
+export function isSafari() {
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+}
+export function isIPad() {
+    return (testPlatform(/^iPad/) ||
+        // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+        (isMac() && navigator.maxTouchPoints > 1));
+}
+export function isIOS() {
+    return isIPhone() || isIPad();
+}
+export function testPlatform(re) {
+    return typeof window !== "undefined" && window.navigator != null
+        ? re.test(window.navigator.platform)
+        : undefined;
+}

package/dist/internal/constants.d.ts

@@ -0,0 +1,11 @@
+export declare const TRANSITIONS: {
+    DURATION: number;
+    EASE: number[];
+};
+export declare const VELOCITY_THRESHOLD = 0.4;
+export declare const CLOSE_THRESHOLD = 0.25;
+export declare const SCROLL_LOCK_TIMEOUT = 100;
+export declare const BORDER_RADIUS = 8;
+export declare const NESTED_DISPLACEMENT = 16;
+export declare const WINDOW_TOP_OFFSET = 26;
+export declare const DRAG_CLASS = "vaul-dragging";

package/dist/internal/constants.js

@@ -0,0 +1,11 @@
+export const TRANSITIONS = {
+    DURATION: 0.5,
+    EASE: [0.32, 0.72, 0, 1],
+};
+export const VELOCITY_THRESHOLD = 0.4;
+export const CLOSE_THRESHOLD = 0.25;
+export const SCROLL_LOCK_TIMEOUT = 100;
+export const BORDER_RADIUS = 8;
+export const NESTED_DISPLACEMENT = 16;
+export const WINDOW_TOP_OFFSET = 26;
+export const DRAG_CLASS = "vaul-dragging";

package/dist/internal/noop.d.ts

@@ -0,0 +1 @@
+export declare function noop(): void;

package/dist/internal/noop.js

@@ -0,0 +1,3 @@
+export function noop() {
+    // do nothing;
+}

package/dist/internal/use-id.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Generates a unique ID based on a global counter.
+ */
+export declare function useId(prefix?: string): string;

package/dist/internal/use-id.js

@@ -0,0 +1,8 @@
+globalThis.vaulIdCounter ??= { current: 0 };
+/**
+ * Generates a unique ID based on a global counter.
+ */
+export function useId(prefix = "vaul-svelte") {
+    globalThis.vaulIdCounter.current++;
+    return `${prefix}-${globalThis.vaulIdCounter.current}`;
+}

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+export type * from "./components/drawer/types.js";
+export type DrawerDirection = "left" | "right" | "top" | "bottom";
+export type OnChangeFn<T> = (value: T) => void;
+export type OnDrag = (event: PointerEvent | MouseEvent, percentageDragged: number) => void;
+export type OnRelease = (event: PointerEvent | MouseEvent, open: boolean) => void;
+export type AnyFunction = (...args: any) => any;
+export type Getters<T> = {
+    [K in keyof T]: () => T[K];
+};
+export type VaulPointerEvent<T extends Element = HTMLElement> = PointerEvent & {
+    currentTarget: T;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/use-drawer-content.svelte.js

@@ -0,0 +1,187 @@
+import {} from "svelte";
+import { useRefById } from "svelte-toolbelt";
+import { Dialog as DrawerPrimitive } from "bits-ui";
+import { DrawerContext } from "./context.js";
+import { watch } from "runed";
+import { useScaleBackground } from "./use-scale-background.svelte.js";
+export function useDrawerContent(opts) {
+    const ctx = DrawerContext.get();
+    let mounted = $state(false);
+    useRefById({
+        id: opts.id,
+        ref: opts.ref,
+        deps: () => [mounted, ctx.open.current],
+        onRefChange: (node) => {
+            if (!mounted) {
+                ctx.setDrawerNode(null);
+            }
+            else {
+                ctx.setDrawerNode(node);
+            }
+        },
+    });
+    let delayedSnapPoints = $state(false);
+    let pointerStart = null;
+    let lastKnownPointerEvent = null;
+    let wasBeyondThePoint = false;
+    const hasSnapPoints = $derived(ctx.snapPoints.current && ctx.snapPoints.current.length > 0);
+    useScaleBackground();
+    function isDeltaInDirection(delta, direction, threshold = 0) {
+        if (wasBeyondThePoint)
+            return true;
+        const deltaY = Math.abs(delta.y);
+        const deltaX = Math.abs(delta.x);
+        const isDeltaX = deltaX > deltaY;
+        const dFactor = ["bottom", "right"].includes(direction) ? 1 : -1;
+        if (direction === "left" || direction === "right") {
+            const isReverseDirection = delta.x * dFactor < 0;
+            if (!isReverseDirection && deltaX >= 0 && deltaX <= threshold) {
+                return isDeltaX;
+            }
+        }
+        else {
+            const isReverseDirection = delta.y * dFactor < 0;
+            if (!isReverseDirection && deltaY >= 0 && deltaY <= threshold) {
+                return !isDeltaX;
+            }
+        }
+        wasBeyondThePoint = true;
+        return true;
+    }
+    watch([() => hasSnapPoints, () => ctx.open.current], () => {
+        if (hasSnapPoints && ctx.open.current) {
+            window.requestAnimationFrame(() => {
+                delayedSnapPoints = true;
+            });
+        }
+        else {
+            delayedSnapPoints = false;
+        }
+    });
+    function handleOnPointerUp(e) {
+        pointerStart = null;
+        wasBeyondThePoint = false;
+        ctx.onRelease(e);
+    }
+    function onpointerdown(e) {
+        if (ctx.handleOnly.current)
+            return;
+        opts.onpointerdown.current?.(e);
+        pointerStart = { x: e.pageX, y: e.pageY };
+        ctx.onPress(e);
+    }
+    function onOpenAutoFocus(e) {
+        opts.onOpenAutoFocus.current?.(e);
+        if (!ctx.autoFocus.current) {
+            e.preventDefault();
+        }
+    }
+    function onInteractOutside(e) {
+        opts.onInteractOutside.current?.(e);
+        if (!ctx.modal.current || e.defaultPrevented) {
+            e.preventDefault();
+            return;
+        }
+        if (ctx.keyboardIsOpen.current) {
+            ctx.keyboardIsOpen.current = false;
+        }
+    }
+    function onFocusOutside(e) {
+        if (!ctx.modal.current) {
+            e.preventDefault();
+            return;
+        }
+    }
+    function onpointermove(e) {
+        lastKnownPointerEvent = e;
+        if (ctx.handleOnly.current)
+            return;
+        opts.onpointermove.current?.(e);
+        if (!pointerStart)
+            return;
+        const yPosition = e.pageY - pointerStart.y;
+        const xPosition = e.pageX - pointerStart.x;
+        const swipeStartThreshold = e.pointerType === "touch" ? 10 : 2;
+        const delta = { x: xPosition, y: yPosition };
+        const isAllowedToSwipe = isDeltaInDirection(delta, ctx.direction.current, swipeStartThreshold);
+        if (isAllowedToSwipe) {
+            ctx.onDrag(e);
+        }
+        else if (Math.abs(xPosition) > swipeStartThreshold ||
+            Math.abs(yPosition) > swipeStartThreshold) {
+            pointerStart = null;
+        }
+    }
+    function onpointerup(e) {
+        opts.onpointerup.current?.(e);
+        pointerStart = null;
+        wasBeyondThePoint = false;
+        ctx.onRelease(e);
+    }
+    function onpointerout(e) {
+        opts.onpointerout.current?.(e);
+        if (e.pointerType === "touch")
+            return;
+        handleOnPointerUp(lastKnownPointerEvent);
+    }
+    function oncontextmenu(e) {
+        opts.oncontextmenu.current?.(e);
+        if (lastKnownPointerEvent) {
+            handleOnPointerUp(lastKnownPointerEvent);
+        }
+    }
+    function ontouchmove(e) {
+        if (!pointerStart || e.touches.length !== 1)
+            return;
+        const touch = e.touches[0];
+        const yPosition = touch.pageY - pointerStart.y;
+        const xPosition = touch.pageX - pointerStart.x;
+        const syntheticEvent = {
+            pageX: touch.pageX,
+            pageY: touch.pageY,
+            pointerType: "touch",
+            target: e.target,
+        };
+        lastKnownPointerEvent = syntheticEvent;
+        const swipeStartThreshold = 10;
+        const delta = { x: xPosition, y: yPosition };
+        const isAllowedToSwipe = isDeltaInDirection(delta, ctx.direction.current, swipeStartThreshold);
+        if (isAllowedToSwipe) {
+            ctx.onDrag(syntheticEvent);
+        }
+    }
+    function ontouchend(_e) {
+        if (lastKnownPointerEvent) {
+            handleOnPointerUp(lastKnownPointerEvent);
+        }
+    }
+    const props = $derived({
+        id: opts.id.current,
+        "data-vaul-drawer-direction": ctx.direction.current,
+        "data-vaul-drawer": "",
+        "data-vaul-delayed-snap-points": delayedSnapPoints ? "true" : "false",
+        "data-vaul-snap-points": ctx.open.current && hasSnapPoints ? "true" : "false",
+        "data-vaul-custom-container": ctx.container.current ? "true" : "false",
+        "data-vaul-animate": ctx.shouldAnimate ? "true" : "false",
+        onpointerdown,
+        onOpenAutoFocus,
+        onInteractOutside,
+        onFocusOutside,
+        onpointerup,
+        onpointermove,
+        onpointerout,
+        oncontextmenu,
+        ontouchmove,
+        ontouchend,
+        preventScroll: ctx.modal.current,
+    });
+    return {
+        get props() {
+            return props;
+        },
+        ctx,
+        setMounted: (value) => {
+            mounted = value;
+        },
+    };
+}

package/dist/use-drawer-handle.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type ReadableBoxedValues, type WithRefProps } from "svelte-toolbelt";
+interface UseDrawerHandleOpts extends WithRefProps, ReadableBoxedValues<{
+    preventCycle: boolean;
+}> {
+}
+export declare function useDrawerHandle(opts: UseDrawerHandleOpts): {
+    readonly props: {
+        id: string;
+        "data-vaul-drawer-visible": string;
+        "data-vaul-handle": string;
+        "aria-hidden": string;
+        onclick: () => void;
+        onpointercancel: () => void;
+        onpointerdown: (e: PointerEvent) => void;
+        onpointermove: (e: PointerEvent) => void;
+    };
+};
+export {};