@base-ui/react 1.2.0 → 1.4.0

package/dialog/root/DialogRoot.d.ts

@@ -3,13 +3,15 @@ import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDeta
 import { REASONS } from "../../utils/reasons.js";
 import { DialogHandle } from "../store/DialogHandle.js";
 import { type PayloadChildRenderFunction } from "../../utils/popups/index.js";
+export declare const IsDrawerContext: React.Context<boolean>;
 /**
  * Groups all parts of the dialog.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare function DialogRoot<Payload>(props: DialogRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export interface DialogRootState {}
 export interface DialogRootProps<Payload = unknown> {
   /**
    * Whether the dialog is currently open.
@@ -27,9 +29,12 @@ export interface DialogRootProps<Payload = unknown> {
    * - `true`: user interaction is limited to just the dialog: focus is trapped, document page scroll is locked, and pointer interactions on outside elements are disabled.
    * - `false`: user interaction with the rest of the document is allowed.
    * - `'trap-focus'`: focus is trapped inside the dialog, but document page scroll is not locked and pointer interactions outside of it remain enabled.
+   *
+   * When `modal` is `true` or `'trap-focus'`, render `<Dialog.Close>` inside `<Dialog.Popup>` so
+   * touch screen readers can escape the popup.
    * @default true
    */
-  modal?: (boolean | 'trap-focus') | undefined;
+  modal?: boolean | 'trap-focus' | undefined;
   /**
    * Event handler called when the dialog is opened or closed.
    */
@@ -65,14 +70,14 @@ export interface DialogRootProps<Payload = unknown> {
   /**
    * ID of the trigger that the dialog is associated with.
    * This is useful in conjunction with the `open` prop to create a controlled dialog.
-   * There's no need to specify this prop when the popover is uncontrolled (i.e. when the `open` prop is not set).
+   * There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set).
    */
-  triggerId?: (string | null) | undefined;
+  triggerId?: string | null | undefined;
   /**
    * ID of the trigger that the dialog is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open dialog.
    */
-  defaultTriggerId?: (string | null) | undefined;
+  defaultTriggerId?: string | null | undefined;
 }
 export interface DialogRootActions {
   unmount: () => void;
@@ -83,6 +88,7 @@ export type DialogRootChangeEventDetails = BaseUIChangeEventDetails<DialogRoot.C
   preventUnmountOnClose(): void;
 };
 export declare namespace DialogRoot {
+  type State = DialogRootState;
   type Props<Payload = unknown> = DialogRootProps<Payload>;
   type Actions = DialogRootActions;
   type ChangeEventReason = DialogRootChangeEventReason;

package/dialog/root/DialogRoot.js

@@ -6,19 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogRoot = DialogRoot;
+exports.IsDrawerContext = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _useDialogRoot = require("./useDialogRoot");
 var _DialogRootContext = require("./DialogRootContext");
 var _DialogStore = require("../store/DialogStore");
 var _jsxRuntime = require("react/jsx-runtime");
+const IsDrawerContext = exports.IsDrawerContext = /*#__PURE__*/React.createContext(false);
+
 /**
  * Groups all parts of the dialog.
- * Doesn’t render its own HTML element.
+ * Doesn't render its own HTML element.
  *
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
+if (process.env.NODE_ENV !== "production") IsDrawerContext.displayName = "IsDrawerContext";
 function DialogRoot(props) {
   const {
     children,
@@ -34,18 +37,17 @@ function DialogRoot(props) {
     defaultTriggerId: defaultTriggerIdProp = null
   } = props;
   const parentDialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
+  const isDrawer = React.useContext(IsDrawerContext);
   const nested = Boolean(parentDialogRootContext);
-  const store = (0, _useRefWithInit.useRefWithInit)(() => {
-    return handle?.store ?? new _DialogStore.DialogStore({
-      open: defaultOpen,
-      openProp,
-      activeTriggerId: defaultTriggerIdProp,
-      triggerIdProp,
-      modal,
-      disablePointerDismissal,
-      nested
-    });
-  }).current;
+  const store = _DialogStore.DialogStore.useStore(handle?.store, {
+    open: defaultOpen,
+    openProp,
+    activeTriggerId: defaultTriggerIdProp,
+    triggerIdProp,
+    modal,
+    disablePointerDismissal,
+    nested
+  });
 
   // Support initially open state when uncontrolled
   (0, _useOnFirstRender.useOnFirstRender)(() => {
@@ -70,16 +72,20 @@ function DialogRoot(props) {
     store,
     actionsRef,
     parentContext: parentDialogRootContext?.store.context,
+    isDrawer,
     onOpenChange,
     triggerIdProp
   });
   const contextValue = React.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
-    value: contextValue,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(IsDrawerContext.Provider, {
+    value: false,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogRootContext.DialogRootContext.Provider, {
+      value: contextValue,
+      children: typeof children === 'function' ? children({
+        payload
+      }) : children
+    })
   });
 }

package/dialog/root/useDialogRoot.d.ts

@@ -1,17 +1,14 @@
 import { type DialogRoot } from "./DialogRoot.js";
 import { DialogStore } from "../store/DialogStore.js";
-export declare function useDialogRoot(params: useDialogRoot.Parameters): useDialogRoot.ReturnValue;
+export declare function useDialogRoot(params: UseDialogRootParameters): UseDialogRootReturnValue;
 export interface UseDialogRootSharedParameters {}
 export interface UseDialogRootParameters {
   store: DialogStore<any>;
   actionsRef?: DialogRoot.Props['actionsRef'] | undefined;
   parentContext?: DialogStore<unknown>['context'] | undefined;
   onOpenChange: DialogRoot.Props['onOpenChange'];
-  triggerIdProp?: (string | null) | undefined;
+  isDrawer: boolean;
+  triggerIdProp?: string | null | undefined;
 }
 export type UseDialogRootReturnValue = void;
-export declare namespace useDialogRoot {
-  type SharedParameters = UseDialogRootSharedParameters;
-  type Parameters = UseDialogRootParameters;
-  type ReturnValue = UseDialogRootReturnValue;
-}
+export interface UseDialogRootState {}

package/dialog/root/useDialogRoot.js

@@ -19,7 +19,8 @@ function useDialogRoot(params) {
   const {
     store,
     parentContext,
-    actionsRef
+    actionsRef,
+    isDrawer
   } = params;
   const open = store.useState('open');
   const disablePointerDismissal = store.useState('disablePointerDismissal');
@@ -27,15 +28,12 @@ function useDialogRoot(params) {
   const popupElement = store.useState('popupElement');
   const {
     openMethod,
-    triggerProps,
-    reset: resetOpenInteractionType
+    triggerProps
   } = (0, _useOpenInteractionType.useOpenInteractionType)(open);
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount
-  } = (0, _popups.useOpenStateTransitions)(open, store, () => {
-    resetOpenInteractionType();
-  });
+  } = (0, _popups.useOpenStateTransitions)(open, store);
   const createDialogEventDetails = (0, _useStableCallback.useStableCallback)(reason => {
     const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason);
     details.preventUnmountOnClose = () => {
@@ -53,10 +51,10 @@ function useDialogRoot(params) {
   const floatingRootContext = (0, _floatingUiReact.useSyncedFloatingRootContext)({
     popupStore: store,
     onOpenChange: store.setOpen,
-    treatPopupAsFloatingElement: true,
-    noEmit: true
+    treatPopupAsFloatingElement: true
   });
   const [ownNestedOpenDialogs, setOwnNestedOpenDialogs] = React.useState(0);
+  const [ownNestedOpenDrawers, setOwnNestedOpenDrawers] = React.useState(0);
   const isTopmost = ownNestedOpenDialogs === 0;
   const role = (0, _floatingUiReact.useRole)(floatingRootContext);
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext, {
@@ -106,18 +104,20 @@ function useDialogRoot(params) {
     getTriggerProps
   } = (0, _floatingUiReact.useInteractions)([role, dismiss]);
 
-  // Listen for nested open/close events on this store to maintain the count
-  store.useContextCallback('onNestedDialogOpen', ownChildrenCount => {
-    setOwnNestedOpenDialogs(ownChildrenCount + 1);
+  // Listen for nested open/close events on this store to maintain the counts.
+  store.useContextCallback('onNestedDialogOpen', (dialogCount, drawerCount) => {
+    setOwnNestedOpenDialogs(dialogCount);
+    setOwnNestedOpenDrawers(drawerCount);
   });
   store.useContextCallback('onNestedDialogClose', () => {
     setOwnNestedOpenDialogs(0);
+    setOwnNestedOpenDrawers(0);
   });
 
   // Notify parent of our open/close state using parent callbacks, if any
   React.useEffect(() => {
     if (parentContext?.onNestedDialogOpen && open) {
-      parentContext.onNestedDialogOpen(ownNestedOpenDialogs);
+      parentContext.onNestedDialogOpen(ownNestedOpenDialogs + 1, ownNestedOpenDrawers + (isDrawer ? 1 : 0));
     }
     if (parentContext?.onNestedDialogClose && !open) {
       parentContext.onNestedDialogClose();
@@ -127,7 +127,7 @@ function useDialogRoot(params) {
         parentContext.onNestedDialogClose();
       }
     };
-  }, [open, parentContext, ownNestedOpenDialogs]);
+  }, [isDrawer, open, ownNestedOpenDialogs, ownNestedOpenDrawers, parentContext]);
   const activeTriggerProps = React.useMemo(() => getReferenceProps(triggerProps), [getReferenceProps, triggerProps]);
   const inactiveTriggerProps = React.useMemo(() => getTriggerProps(triggerProps), [getTriggerProps, triggerProps]);
   const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
@@ -137,6 +137,7 @@ function useDialogRoot(params) {
     inactiveTriggerProps,
     popupProps,
     floatingRootContext,
-    nestedOpenDialogCount: ownNestedOpenDialogs
+    nestedOpenDialogCount: ownNestedOpenDialogs,
+    nestedOpenDrawerCount: ownNestedOpenDrawers
   });
 }

package/dialog/store/DialogStore.d.ts

@@ -9,6 +9,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
   openMethod: InteractionType | null;
   nested: boolean;
   nestedOpenDialogCount: number;
+  nestedOpenDrawerCount: number;
   titleElementId: string | undefined;
   descriptionElementId: string | undefined;
   viewportElement: HTMLElement | null;
@@ -19,13 +20,14 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
   readonly backdropRef: React.RefObject<HTMLDivElement | null>;
   readonly internalBackdropRef: React.RefObject<HTMLDivElement | null>;
   readonly outsidePressEnabledRef: React.MutableRefObject<boolean>;
-  readonly onNestedDialogOpen?: ((ownChildrenCount: number) => void) | undefined;
+  readonly onNestedDialogOpen?: ((dialogCount: number, drawerCount: number) => void) | undefined;
   readonly onNestedDialogClose?: (() => void) | undefined;
 };
 declare const selectors: {
   modal: (state: State<unknown>) => boolean | "trap-focus";
   nested: (state: State<unknown>) => boolean;
   nestedOpenDialogCount: (state: State<unknown>) => number;
+  nestedOpenDrawerCount: (state: State<unknown>) => number;
   disablePointerDismissal: (state: State<unknown>) => boolean;
   openMethod: (state: State<unknown>) => InteractionType | null;
   descriptionElementId: (state: State<unknown>) => string | undefined;
@@ -291,5 +293,6 @@ declare const selectors: {
 export declare class DialogStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
   constructor(initialState?: Partial<State<Payload>>);
   setOpen: (nextOpen: boolean, eventDetails: Omit<DialogRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
+  static useStore<Payload>(externalStore: DialogStore<Payload> | undefined, initialState?: Partial<State<Payload>>): DialogStore<Payload>;
 }
 export {};

package/dialog/store/DialogStore.js

@@ -7,12 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogStore = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _popups = require("../../utils/popups");
 const selectors = {
   ..._popups.popupStoreSelectors,
   modal: (0, _store.createSelector)(state => state.modal),
   nested: (0, _store.createSelector)(state => state.nested),
   nestedOpenDialogCount: (0, _store.createSelector)(state => state.nestedOpenDialogCount),
+  nestedOpenDrawerCount: (0, _store.createSelector)(state => state.nestedOpenDrawerCount),
   disablePointerDismissal: (0, _store.createSelector)(state => state.disablePointerDismissal),
   openMethod: (0, _store.createSelector)(state => state.openMethod),
   descriptionElementId: (0, _store.createSelector)(state => state.descriptionElementId),
@@ -47,13 +49,7 @@ class DialogStore extends _store.ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
-    const details = {
-      open: nextOpen,
-      nativeEvent: eventDetails.event,
-      reason: eventDetails.reason,
-      nested: this.state.nested
-    };
-    this.state.floatingRootContext.context.events?.emit('openchange', details);
+    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const updatedState = {
       open: nextOpen
     };
@@ -67,6 +63,13 @@ class DialogStore extends _store.ReactStore {
     }
     this.update(updatedState);
   };
+  static useStore(externalStore, initialState) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
+      return new DialogStore(initialState);
+    }).current;
+    return externalStore ?? internalStore;
+  }
 }
 exports.DialogStore = DialogStore;
 function createInitialState(initialState = {}) {
@@ -81,6 +84,7 @@ function createInitialState(initialState = {}) {
     openMethod: null,
     nested: false,
     nestedOpenDialogCount: 0,
+    nestedOpenDrawerCount: 0,
     role: 'dialog',
     ...initialState
   };

package/dialog/title/DialogTitle.d.ts

@@ -7,7 +7,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
  */
 export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export interface DialogTitleProps extends BaseUIComponentProps<'h2', DialogTitle.State> {}
+export interface DialogTitleProps extends BaseUIComponentProps<'h2', DialogTitleState> {}
 export interface DialogTitleState {}
 export declare namespace DialogTitle {
   type Props = DialogTitleProps;

package/dialog/title/DialogTitle.js

@@ -20,6 +20,7 @@ const DialogTitle = exports.DialogTitle = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     id: idProp,
     ...elementProps
   } = componentProps;

package/dialog/trigger/DialogTrigger.d.ts

@@ -11,7 +11,7 @@ export declare const DialogTrigger: DialogTrigger;
 export interface DialogTrigger {
   <Payload>(componentProps: DialogTriggerProps<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
 }
-export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DialogTrigger.State> {
+export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps, BaseUIComponentProps<'button', DialogTriggerState> {
   /**
    * A handle to associate the trigger with a dialog.
    * Can be created with the Dialog.createHandle() method.

package/dialog/trigger/DialogTrigger.js

@@ -32,6 +32,7 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
     id: idProp,
     payload,
     handle,
+    style,
     ...elementProps
   } = componentProps;
   const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);

package/dialog/viewport/DialogViewport.d.ts

@@ -13,6 +13,9 @@ export interface DialogViewportState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
   /**
    * Whether the dialog is nested within another dialog.

package/dialog/viewport/DialogViewport.js

@@ -39,6 +39,7 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
     className,
     render,
     children,
+    style,
     ...elementProps
   } = componentProps;
   const keepMounted = (0, _DialogPortalContext.useDialogPortalContext)();

package/direction-provider/DirectionProvider.d.ts

@@ -6,6 +6,7 @@ import { type TextDirection } from "./DirectionContext.js";
  * Documentation: [Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider)
  */
 export declare const DirectionProvider: React.FC<DirectionProvider.Props>;
+export interface DirectionProviderState {}
 export interface DirectionProviderProps {
   children?: React.ReactNode;
   /**
@@ -15,5 +16,6 @@ export interface DirectionProviderProps {
   direction?: TextDirection | undefined;
 }
 export declare namespace DirectionProvider {
+  type State = DirectionProviderState;
   type Props = DirectionProviderProps;
 }

package/drawer/backdrop/DrawerBackdrop.d.ts

@@ -8,7 +8,7 @@ import { type BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerBackdrop: React.ForwardRefExoticComponent<Omit<DrawerBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerBackdropProps extends BaseUIComponentProps<'div', DrawerBackdrop.State> {
+export interface DrawerBackdropProps extends BaseUIComponentProps<'div', DrawerBackdropState> {
   /**
    * Whether the backdrop is forced to render even when nested.
    * @default false
@@ -20,6 +20,9 @@ export interface DrawerBackdropState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the component.
+   */
   transitionStatus: TransitionStatus;
 }
 export declare namespace DrawerBackdrop {

package/drawer/backdrop/DrawerBackdrop.js

@@ -28,6 +28,7 @@ const DrawerBackdrop = exports.DrawerBackdrop = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     forceRender = false,
     ...elementProps
   } = componentProps;

package/drawer/backdrop/DrawerBackdropDataAttributes.d.ts

@@ -0,0 +1,18 @@
+export declare enum DrawerBackdropDataAttributes {
+  /**
+   * Present when the drawer is open.
+   */
+  open = "data-open",
+  /**
+   * Present when the drawer is closed.
+   */
+  closed = "data-closed",
+  /**
+   * Present when the drawer is animating in.
+   */
+  startingStyle = "data-starting-style",
+  /**
+   * Present when the drawer is animating out.
+   */
+  endingStyle = "data-ending-style",
+}

package/drawer/backdrop/DrawerBackdropDataAttributes.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerBackdropDataAttributes = void 0;
+var _popupStateMapping = require("../../utils/popupStateMapping");
+let DrawerBackdropDataAttributes = exports.DrawerBackdropDataAttributes = function (DrawerBackdropDataAttributes) {
+  /**
+   * Present when the drawer is open.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["open"] = _popupStateMapping.CommonPopupDataAttributes.open] = "open";
+  /**
+   * Present when the drawer is closed.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
+  /**
+   * Present when the drawer is animating in.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the drawer is animating out.
+   */
+  DrawerBackdropDataAttributes[DrawerBackdropDataAttributes["endingStyle"] = _popupStateMapping.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  return DrawerBackdropDataAttributes;
+}({});

package/drawer/close/DrawerClose.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerClose: DrawerClose;
-export interface DrawerCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DrawerClose.State> {}
+export interface DrawerCloseProps extends NativeButtonProps, BaseUIComponentProps<'button', DrawerCloseState> {}
 export interface DrawerCloseState {
   /**
    * Whether the button is currently disabled.

package/drawer/content/DrawerContent.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<DrawerContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface DrawerContentProps extends BaseUIComponentProps<'div', DrawerContent.State> {}
+export interface DrawerContentProps extends BaseUIComponentProps<'div', DrawerContentState> {}
 export interface DrawerContentState {}
 export declare namespace DrawerContent {
   type Props = DrawerContentProps;

package/drawer/content/DrawerContent.js

@@ -9,6 +9,7 @@ exports.DrawerContent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _DialogRootContext = require("../../dialog/root/DialogRootContext");
 var _useRenderElement = require("../../utils/useRenderElement");
+var _DrawerContentDataAttributes = require("./DrawerContentDataAttributes");
 /**
  * A container for the drawer contents.
  * Renders a `<div>` element.
@@ -19,13 +20,14 @@ const DrawerContent = exports.DrawerContent = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   (0, _DialogRootContext.useDialogRootContext)();
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     ref: forwardedRef,
     props: [{
-      ['data-swipe-ignore']: ''
+      [_DrawerContentDataAttributes.DRAWER_CONTENT_ATTRIBUTE]: ''
     }, elementProps]
   });
 });

package/drawer/content/DrawerContentDataAttributes.d.ts

@@ -0,0 +1 @@
+export declare const DRAWER_CONTENT_ATTRIBUTE = "data-drawer-content";

package/drawer/content/DrawerContentDataAttributes.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAWER_CONTENT_ATTRIBUTE = void 0;
+const DRAWER_CONTENT_ATTRIBUTE = exports.DRAWER_CONTENT_ATTRIBUTE = 'data-drawer-content';

package/drawer/description/DrawerDescription.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerDescription: DrawerDescription;
-export interface DrawerDescriptionProps extends BaseUIComponentProps<'p', DrawerDescription.State> {}
+export interface DrawerDescriptionProps extends BaseUIComponentProps<'p', DrawerDescriptionState> {}
 export interface DrawerDescriptionState {}
 export interface DrawerDescription {
   (componentProps: DrawerDescriptionProps): React.JSX.Element;

package/drawer/indent/DrawerIndent.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * A wrapper element intended to contain your app's main UI.
- * Applies `data-active` when any drawer within the nearest <Drawer.Provider> is open.
+ * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
@@ -13,7 +14,7 @@ export interface DrawerIndentState {
    */
   active: boolean;
 }
-export interface DrawerIndentProps extends BaseUIComponentProps<'div', DrawerIndent.State> {}
+export interface DrawerIndentProps extends BaseUIComponentProps<'div', DrawerIndentState> {}
 export declare namespace DrawerIndent {
   type State = DrawerIndentState;
   type Props = DrawerIndentProps;

package/drawer/indent/DrawerIndent.js

@@ -27,7 +27,8 @@ const stateAttributesMapping = {
 
 /**
  * A wrapper element intended to contain your app's main UI.
- * Applies `data-active` when any drawer within the nearest <Drawer.Provider> is open.
+ * Applies `data-active` when any drawer within the nearest `<Drawer.Provider>` is open.
+ * Renders a `<div>` element.
  *
  * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
@@ -35,6 +36,7 @@ const DrawerIndent = exports.DrawerIndent = /*#__PURE__*/React.forwardRef(functi
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);

package/drawer/indent-background/DrawerIndentBackground.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { BaseUIComponentProps } from "../../utils/types.js";
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * An element placed before `<Drawer.Indent>` to render a background layer that can be styled based on whether any drawer is open.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 export declare const DrawerIndentBackground: React.ForwardRefExoticComponent<Omit<DrawerIndentBackgroundProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface DrawerIndentBackgroundState {
@@ -11,7 +13,7 @@ export interface DrawerIndentBackgroundState {
    */
   active: boolean;
 }
-export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackground.State> {}
+export interface DrawerIndentBackgroundProps extends BaseUIComponentProps<'div', DrawerIndentBackgroundState> {}
 export declare namespace DrawerIndentBackground {
   type State = DrawerIndentBackgroundState;
   type Props = DrawerIndentBackgroundProps;

package/drawer/indent-background/DrawerIndentBackground.js

@@ -23,13 +23,16 @@ const stateAttributesMapping = {
 };
 
 /**
- * An element placed before <Drawer.Indent> to render a background layer
- * that can be styled based on whether any drawer is open.
+ * An element placed before `<Drawer.Indent>` to render a background layer that can be styled based on whether any drawer is open.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
  */
 const DrawerIndentBackground = exports.DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerIndentBackground(componentProps, forwardedRef) {
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const providerContext = (0, _DrawerProviderContext.useDrawerProviderContext)(true);

package/drawer/index.d.ts

@@ -1,4 +1,4 @@
-export * as DrawerPreview from "./index.parts.js";
+export * as Drawer from "./index.parts.js";
 export type * from "./root/DrawerRoot.js";
 export type * from "./provider/DrawerProvider.js";
 export type * from "./indent/DrawerIndent.js";
@@ -6,6 +6,7 @@ export type * from "./indent-background/DrawerIndentBackground.js";
 export type * from "./trigger/DrawerTrigger.js";
 export type * from "./portal/DrawerPortal.js";
 export type * from "./popup/DrawerPopup.js";
+export type * from "./swipe-area/DrawerSwipeArea.js";
 export type * from "./content/DrawerContent.js";
 export type * from "./backdrop/DrawerBackdrop.js";
 export type * from "./viewport/DrawerViewport.js";

package/drawer/index.js

@@ -4,6 +4,6 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DrawerPreview = void 0;
-var _DrawerPreview = _interopRequireWildcard(require("./index.parts"));
-exports.DrawerPreview = _DrawerPreview;
+exports.Drawer = void 0;
+var _Drawer = _interopRequireWildcard(require("./index.parts"));
+exports.Drawer = _Drawer;