base-vaul 0.0.2 → 1.0.0

package/{style.css → dist/index.css}

@@ -6,98 +6,98 @@
   animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-open] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-open] {
   animation-name: slideFromBottom;
 }
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='bottom'][data-closed] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-closed] {
   animation-name: slideToBottom;
 }
 
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-open] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-open] {
   animation-name: slideFromTop;
 }
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='top'][data-closed] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-closed] {
   animation-name: slideToTop;
 }
 
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-open] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-open] {
   animation-name: slideFromLeft;
 }
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='left'][data-closed] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-closed] {
   animation-name: slideToLeft;
 }
 
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-open] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-open] {
   animation-name: slideFromRight;
 }
-[data-vaul-drawer][data-vaul-snap-points='false'][data-vaul-drawer-direction='right'][data-closed] {
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-closed] {
   animation-name: slideToRight;
 }
 
-[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='bottom'] {
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="bottom"] {
   transform: translate3d(0, var(--initial-transform, 100%), 0);
 }
 
-[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='top'] {
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="top"] {
   transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
 }
 
-[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='left'] {
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="left"] {
   transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
 }
 
-[data-vaul-drawer][data-vaul-snap-points='true'][data-vaul-drawer-direction='right'] {
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="right"] {
   transform: translate3d(var(--initial-transform, 100%), 0, 0);
 }
 
-[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='top'] {
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="top"] {
   transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
 
-[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='bottom'] {
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="bottom"] {
   transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
 
-[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='left'] {
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="left"] {
   transform: translate3d(var(--snap-point-height, 0), 0, 0);
 }
 
-[data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='right'] {
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="right"] {
   transform: translate3d(var(--snap-point-height, 0), 0, 0);
 }
 
-[data-vaul-overlay][data-vaul-snap-points='false'] {
+[data-vaul-overlay][data-vaul-snap-points="false"] {
   animation-duration: 0.5s;
   animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
 }
-[data-vaul-overlay][data-vaul-snap-points='false'][data-open] {
+[data-vaul-overlay][data-vaul-snap-points="false"][data-open] {
   animation-name: fadeIn;
 }
 [data-vaul-overlay][data-closed] {
   animation-name: fadeOut;
 }
 
-[data-vaul-animate='false'] {
+[data-vaul-animate="false"] {
   animation: none !important;
 }
 
-[data-vaul-overlay][data-vaul-snap-points='true'] {
+[data-vaul-overlay][data-vaul-snap-points="true"] {
   opacity: 0;
   transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-[data-vaul-overlay][data-vaul-snap-points='true'] {
+[data-vaul-overlay][data-vaul-snap-points="true"] {
   opacity: 1;
 }
 
-[data-vaul-drawer]:not([data-vaul-custom-container='true'])::after {
-  content: '';
+[data-vaul-drawer]:not([data-vaul-custom-container="true"])::after {
+  content: "";
   position: absolute;
   background: inherit;
   background-color: inherit;
 }
 
-[data-vaul-drawer][data-vaul-drawer-direction='top']::after {
+[data-vaul-drawer][data-vaul-drawer-direction="top"]::after {
   top: initial;
   bottom: 100%;
   left: 0;
@@ -105,7 +105,7 @@
   height: 200%;
 }
 
-[data-vaul-drawer][data-vaul-drawer-direction='bottom']::after {
+[data-vaul-drawer][data-vaul-drawer-direction="bottom"]::after {
   top: 100%;
   bottom: initial;
   left: 0;
@@ -113,7 +113,7 @@
   height: 200%;
 }
 
-[data-vaul-drawer][data-vaul-drawer-direction='left']::after {
+[data-vaul-drawer][data-vaul-drawer-direction="left"]::after {
   left: initial;
   right: 100%;
   top: 0;
@@ -121,7 +121,7 @@
   width: 200%;
 }
 
-[data-vaul-drawer][data-vaul-drawer-direction='right']::after {
+[data-vaul-drawer][data-vaul-drawer-direction="right"]::after {
   left: 100%;
   right: initial;
   top: 0;
@@ -129,11 +129,13 @@
   width: 200%;
 }
 
-[data-vaul-overlay][data-vaul-snap-points='true']:not([data-vaul-snap-points-overlay='true']):not([data-closed]) {
+[data-vaul-overlay][data-vaul-snap-points="true"]:not(
+    [data-vaul-snap-points-overlay="true"]
+  ):not([data-closed]) {
   opacity: 0;
 }
 
-[data-vaul-overlay][data-vaul-snap-points-overlay='true'] {
+[data-vaul-overlay][data-vaul-snap-points-overlay="true"] {
   opacity: 1;
 }
 
@@ -172,7 +174,7 @@
 }
 
 @media (pointer: fine) {
-  [data-vaul-handle-hitarea]: {
+  [data-vaul-handle-hitarea] {
     width: 100%;
     height: 100%;
   }

package/dist/index.d.mts

@@ -1,148 +1,185 @@
-import * as _base_ui_react from '@base-ui/react';
-import { Dialog } from '@base-ui/react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import * as _base_ui_react0 from "@base-ui/react";
+import { Dialog } from "@base-ui/react";
+import React from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/context.d.ts
 type BaseUIMouseEvent = React.MouseEvent<HTMLDivElement> & {
-    preventBaseUIHandler: () => void;
-    readonly baseUIHandlerPrevented?: boolean | undefined;
+  preventBaseUIHandler: () => void;
+  readonly baseUIHandlerPrevented?: boolean | undefined;
 };
-
+//#endregion
+//#region src/index.d.ts
 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;
+  /**
+   * 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;
+  /**
+   * 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;
+  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_runtime.JSX.Element;
-declare const Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+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_runtime0.JSX.Element;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react0.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>>;
+declare const Content: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type HandleProps = React.ComponentPropsWithoutRef<"div"> & {
-    preventCycle?: boolean;
+  preventCycle?: boolean;
 };
 declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    preventCycle?: boolean;
+  preventCycle?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
-declare function NestedRoot({ onDrag, onOpenChange, open: nestedIsOpen, ...rest }: DialogProps): react_jsx_runtime.JSX.Element;
+declare function NestedRoot({
+  onDrag,
+  onOpenChange,
+  open: nestedIsOpen,
+  ...rest
+}: DialogProps): react_jsx_runtime0.JSX.Element;
 type PortalProps = React.ComponentPropsWithoutRef<typeof Dialog.Portal>;
-declare function Portal(props: PortalProps): react_jsx_runtime.JSX.Element;
+declare function Portal(props: PortalProps): react_jsx_runtime0.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;
-    } & 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>>;
+  Root: typeof Root;
+  NestedRoot: typeof NestedRoot;
+  Content: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react0.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;
+  } & React.RefAttributes<HTMLDivElement>>;
+  Close: React.ForwardRefExoticComponent<_base_ui_react0.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+  Title: React.ForwardRefExoticComponent<_base_ui_react0.DialogTitleProps & React.RefAttributes<HTMLParagraphElement>>;
+  Description: React.ForwardRefExoticComponent<_base_ui_react0.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
 };
-
-export { Content, type ContentProps, type DialogProps, Drawer, Handle, type HandleProps, NestedRoot, Overlay, Portal, Root, type WithFadeFromProps, type WithoutFadeFromProps };
+//#endregion
+export { Content, ContentProps, DialogProps, Drawer, Handle, HandleProps, NestedRoot, Overlay, Portal, Root, WithFadeFromProps, WithoutFadeFromProps };