base-vaul 0.0.1

package/README.md

@@ -0,0 +1,77 @@
+> **Note**
+> This repository is a port of the original **[Vaul](https://github.com/emilkowalski/vaul)** library by [Emil Kowalski](https://emilkowal.ski), migrated from `radix-ui` to `base-ui`.
+
+## Purpose
+
+The primary goal of this repository is to provide a `base-ui` equivalent of Vaul while preserving the original API and behavior as closely as possible.
+
+This port intentionally minimizes changes in order to:
+
+- Reduce migration friction for existing Vaul users
+- Keep parity with the upstream project
+- Establish a stable baseline before introducing enhancements or divergence
+
+## Quick start
+
+### Installation
+
+```bash
+npm install base-vaul
+# or
+pnpm add base-vaul
+# or
+yarn add base-vaul
+```
+
+### Basic usage
+
+```tsx
+import { Drawer } from 'base-vaul';
+
+export function Example() {
+  return (
+    <Drawer.Root>
+      <Drawer.Trigger>Open drawer</Drawer.Trigger>
+
+      <Drawer.Portal>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Title>Drawer title</Drawer.Title>
+          <Drawer.Description>Drawer description</Drawer.Description>
+        </Drawer.Content>
+      </Drawer.Portal>
+    </Drawer.Root>
+  );
+}
+```
+
+The API mirrors the original Vaul implementation as closely as possible, with the main differences coming from the underlying `base-ui` primitives.
+
+## Differences from the original Vaul
+
+### `render` instead of `asChild`
+
+Since `base-ui` does not support `asChild`, components that relied on this pattern in `radix-ui` now expose a `render` prop instead.
+
+**Original (Radix / Vaul):**
+
+```tsx
+<Drawer.Trigger asChild>
+  <button>Open drawer</button>
+</Drawer.Trigger>
+```
+
+**This port (Base UI):**
+
+```tsx
+<Drawer.Trigger render={<button {...props}>Open drawer</button>} />
+```
+
+## Roadmap
+
+Planned next steps include:
+
+- Writing proper documentation (usage, API, and migration notes)
+- Solidifying the project structure with a well-defined monorepo setup
+- Upgrading development dependencies and expanding test coverage
+- Ongoing maintenance, bug fixes, and alignment with upstream changes where relevant

package/dist/index.d.mts

@@ -0,0 +1,147 @@
+import * as _base_ui_react from '@base-ui/react';
+import { Dialog } from '@base-ui/react';
+import React from 'react';
+
+type BaseUIMouseEvent = React.MouseEvent<HTMLDivElement> & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean | undefined;
+};
+
+interface 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;
+}
+interface 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;
+}
+type DialogProps = {
+    activeSnapPoint?: number | string | null;
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    children?: React.ReactNode;
+    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 comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+     * @default true
+     */
+    dismissible?: boolean;
+    onDrag?: (event: BaseUIMouseEvent, percentageDragged: number) => void;
+    onRelease?: (event: BaseUIMouseEvent, 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);
+declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): React.JSX.Element;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Popup>;
+declare const Content: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
+    preventCycle?: boolean;
+};
+declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    preventCycle?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps): React.JSX.Element;
+type PortalProps = React.ComponentPropsWithoutRef<typeof Dialog.Portal>;
+declare function Portal(props: PortalProps): React.JSX.Element;
+declare const Drawer: {
+    Root: typeof Root;
+    NestedRoot: typeof NestedRoot;
+    Content: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: Dialog.Trigger;
+    Portal: typeof Portal;
+    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        preventCycle?: boolean | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<_base_ui_react.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<_base_ui_react.DialogTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+    Description: React.ForwardRefExoticComponent<_base_ui_react.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+};
+
+export { Content, type ContentProps, type DialogProps, Drawer, Handle, type HandleProps, NestedRoot, Overlay, Portal, Root, type WithFadeFromProps, type WithoutFadeFromProps };

package/dist/index.d.ts

@@ -0,0 +1,147 @@
+import * as _base_ui_react from '@base-ui/react';
+import { Dialog } from '@base-ui/react';
+import React from 'react';
+
+type BaseUIMouseEvent = React.MouseEvent<HTMLDivElement> & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean | undefined;
+};
+
+interface 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;
+}
+interface 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;
+}
+type DialogProps = {
+    activeSnapPoint?: number | string | null;
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    children?: React.ReactNode;
+    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 comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+     * @default true
+     */
+    dismissible?: boolean;
+    onDrag?: (event: BaseUIMouseEvent, percentageDragged: number) => void;
+    onRelease?: (event: BaseUIMouseEvent, 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);
+declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, nested, noBodyStyles, direction, defaultOpen, disablePreventScroll, snapToSequentialPoint, preventScrollRestoration, repositionInputs, onAnimationEnd, container, autoFocus, }: DialogProps): React.JSX.Element;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Popup>;
+declare const Content: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
+    preventCycle?: boolean;
+};
+declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    preventCycle?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+declare function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps): React.JSX.Element;
+type PortalProps = React.ComponentPropsWithoutRef<typeof Dialog.Portal>;
+declare function Portal(props: PortalProps): React.JSX.Element;
+declare const Drawer: {
+    Root: typeof Root;
+    NestedRoot: typeof NestedRoot;
+    Content: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Trigger: Dialog.Trigger;
+    Portal: typeof Portal;
+    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        preventCycle?: boolean | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<_base_ui_react.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Title: React.ForwardRefExoticComponent<_base_ui_react.DialogTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+    Description: React.ForwardRefExoticComponent<_base_ui_react.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+};
+
+export { Content, type ContentProps, type DialogProps, Drawer, Handle, type HandleProps, NestedRoot, Overlay, Portal, Root, type WithFadeFromProps, type WithoutFadeFromProps };