@base-ui/react 1.1.0 → 1.2.0

package/dialog/root/DialogRoot.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogRoot = DialogRoot;
 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");
@@ -36,15 +37,27 @@ function DialogRoot(props) {
   const nested = Boolean(parentDialogRootContext);
   const store = (0, _useRefWithInit.useRefWithInit)(() => {
     return handle?.store ?? new _DialogStore.DialogStore({
-      open: openProp ?? defaultOpen,
-      activeTriggerId: triggerIdProp !== undefined ? triggerIdProp : defaultTriggerIdProp,
+      open: defaultOpen,
+      openProp,
+      activeTriggerId: defaultTriggerIdProp,
+      triggerIdProp,
       modal,
       disablePointerDismissal,
       nested
     });
   }).current;
-  store.useControlledProp('open', openProp, defaultOpen);
-  store.useControlledProp('activeTriggerId', triggerIdProp, defaultTriggerIdProp);
+
+  // Support initially open state when uncontrolled
+  (0, _useOnFirstRender.useOnFirstRender)(() => {
+    if (openProp === undefined && store.state.open === false && defaultOpen === true) {
+      store.update({
+        open: true,
+        activeTriggerId: defaultTriggerIdProp
+      });
+    }
+  });
+  store.useControlledProp('openProp', openProp);
+  store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useSyncedValues({
     disablePointerDismissal,
     nested,

package/dialog/root/useDialogRoot.d.ts

@@ -4,10 +4,10 @@ export declare function useDialogRoot(params: useDialogRoot.Parameters): useDial
 export interface UseDialogRootSharedParameters {}
 export interface UseDialogRootParameters {
   store: DialogStore<any>;
-  actionsRef?: DialogRoot.Props['actionsRef'];
-  parentContext?: DialogStore<unknown>['context'];
+  actionsRef?: DialogRoot.Props['actionsRef'] | undefined;
+  parentContext?: DialogStore<unknown>['context'] | undefined;
   onOpenChange: DialogRoot.Props['onOpenChange'];
-  triggerIdProp?: string | null;
+  triggerIdProp?: (string | null) | undefined;
 }
 export type UseDialogRootReturnValue = void;
 export declare namespace useDialogRoot {

package/dialog/root/useDialogRoot.js

@@ -72,6 +72,10 @@ function useDialogRoot(params) {
       };
     },
     outsidePress(event) {
+      if (!store.context.outsidePressEnabledRef.current) {
+        return false;
+      }
+
       // For mouse events, only accept left button (button 0)
       // For touch events, a single touch is equivalent to left button
       if ('button' in event && event.button !== 0) {

package/dialog/store/DialogStore.d.ts

@@ -18,8 +18,9 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
   readonly popupRef: React.RefObject<HTMLElement | null>;
   readonly backdropRef: React.RefObject<HTMLDivElement | null>;
   readonly internalBackdropRef: React.RefObject<HTMLDivElement | null>;
-  readonly onNestedDialogOpen?: (ownChildrenCount: number) => void;
-  readonly onNestedDialogClose?: () => void;
+  readonly outsidePressEnabledRef: React.MutableRefObject<boolean>;
+  readonly onNestedDialogOpen?: ((ownChildrenCount: number) => void) | undefined;
+  readonly onNestedDialogClose?: (() => void) | undefined;
 };
 declare const selectors: {
   modal: (state: State<unknown>) => boolean | "trap-focus";
@@ -31,21 +32,261 @@ declare const selectors: {
   titleElementId: (state: State<unknown>) => string | undefined;
   viewportElement: (state: State<unknown>) => HTMLElement | null;
   role: (state: State<unknown>) => "dialog" | "alertdialog";
-  open: (state: PopupStoreState<unknown>) => boolean;
-  mounted: (state: PopupStoreState<unknown>) => boolean;
-  transitionStatus: (state: PopupStoreState<unknown>) => import("../../utils/useTransitionStatus.js").TransitionStatus;
-  floatingRootContext: (state: PopupStoreState<unknown>) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
-  preventUnmountingOnClose: (state: PopupStoreState<unknown>) => boolean;
-  payload: (state: PopupStoreState<unknown>) => unknown;
-  activeTriggerId: (state: PopupStoreState<unknown>) => string | null;
-  activeTriggerElement: (state: PopupStoreState<unknown>) => Element | null;
-  isTriggerActive: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  isOpenedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  isMountedByTrigger: (state: PopupStoreState<unknown>, triggerId: string | undefined) => boolean;
-  triggerProps: (state: PopupStoreState<unknown>, isActive: boolean) => import("../../index.js").HTMLProps;
-  popupProps: (state: PopupStoreState<unknown>) => import("../../index.js").HTMLProps;
-  popupElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
-  positionerElement: (state: PopupStoreState<unknown>) => HTMLElement | null;
+  open: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => boolean;
+  mounted: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => boolean;
+  transitionStatus: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => import("../../utils/useTransitionStatus.js").TransitionStatus;
+  floatingRootContext: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  preventUnmountingOnClose: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => boolean;
+  payload: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => unknown;
+  activeTriggerId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => string | null;
+  activeTriggerElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => Element | null;
+  isTriggerActive: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => boolean;
+  isOpenedByTrigger: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => boolean;
+  isMountedByTrigger: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => boolean;
+  triggerProps: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, isActive: boolean) => import("../../index.js").HTMLProps;
+  popupProps: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => import("../../index.js").HTMLProps;
+  popupElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => HTMLElement | null;
+  positionerElement: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../utils/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => HTMLElement | null;
 };
 export declare class DialogStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
   constructor(initialState?: Partial<State<Payload>>);

package/dialog/store/DialogStore.js

@@ -26,6 +26,9 @@ class DialogStore extends _store.ReactStore {
       popupRef: /*#__PURE__*/React.createRef(),
       backdropRef: /*#__PURE__*/React.createRef(),
       internalBackdropRef: /*#__PURE__*/React.createRef(),
+      outsidePressEnabledRef: {
+        current: true
+      },
       triggerElements: new _popups.PopupTriggerMap(),
       onOpenChange: undefined,
       onOpenChangeComplete: undefined

package/dialog/trigger/DialogTrigger.d.ts

@@ -16,16 +16,16 @@ export interface DialogTriggerProps<Payload = unknown> extends NativeButtonProps
    * A handle to associate the trigger with a dialog.
    * Can be created with the Dialog.createHandle() method.
    */
-  handle?: DialogHandle<Payload>;
+  handle?: DialogHandle<Payload> | undefined;
   /**
    * A payload to pass to the dialog when it is opened.
    */
-  payload?: Payload;
+  payload?: Payload | undefined;
   /**
    * ID of the trigger. In addition to being forwarded to the rendered element,
    * it is also used to specify the active trigger for the dialogs in controlled mode (with the DialogRoot `triggerId` prop).
    */
-  id?: string;
+  id?: string | undefined;
 }
 export interface DialogTriggerState {
   /**

package/dialog/trigger/DialogTrigger.js

@@ -37,7 +37,7 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
   const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
   const store = handle?.store ?? dialogRootContext?.store;
   if (!store) {
-    throw /* FIXME (minify-errors-in-prod): Unminifyable error in production! */new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : (0, _formatErrorMessage2.default)(79));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : (0, _formatErrorMessage2.default)(79));
   }
   const thisTriggerId = (0, _useBaseUiId.useBaseUiId)(idProp);
   const floatingContext = store.useState('floatingRootContext');
@@ -60,10 +60,10 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
     enabled: floatingContext != null
   });
   const localInteractionProps = (0, _floatingUiReact.useInteractions)([click]);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     open: isOpenedByThisTrigger
-  }), [disabled, isOpenedByThisTrigger]);
+  };
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
   return (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,

package/dialog/viewport/DialogViewport.js

@@ -51,12 +51,12 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
   const nestedOpenDialogCount = store.useState('nestedOpenDialogCount');
   const mounted = store.useState('mounted');
   const nestedDialogOpen = nestedOpenDialogCount > 0;
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     nested,
     transitionStatus,
     nestedDialogOpen
-  }), [open, nested, transitionStatus, nestedDialogOpen]);
+  };
   const shouldRender = keepMounted || mounted;
   return (0, _useRenderElement.useRenderElement)('div', componentProps, {
     enabled: shouldRender,
@@ -66,6 +66,9 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
     props: [{
       role: 'presentation',
       hidden: !mounted,
+      style: {
+        pointerEvents: !open ? 'none' : undefined
+      },
       children
     }, elementProps]
   });

package/direction-provider/DirectionProvider.d.ts

@@ -12,7 +12,7 @@ export interface DirectionProviderProps {
    * The reading direction of the text
    * @default 'ltr'
    */
-  direction?: TextDirection;
+  direction?: TextDirection | undefined;
 }
 export declare namespace DirectionProvider {
   type Props = DirectionProviderProps;

package/drawer/backdrop/DrawerBackdrop.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type TransitionStatus } from "../../utils/useTransitionStatus.js";
+import { type BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * 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> {
+  /**
+   * Whether the backdrop is forced to render even when nested.
+   * @default false
+   */
+  forceRender?: boolean | undefined;
+}
+export interface DrawerBackdropState {
+  /**
+   * Whether the drawer is currently open.
+   */
+  open: boolean;
+  transitionStatus: TransitionStatus;
+}
+export declare namespace DrawerBackdrop {
+  type Props = DrawerBackdropProps;
+  type State = DrawerBackdropState;
+}

package/drawer/backdrop/DrawerBackdrop.js

@@ -0,0 +1,63 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerBackdrop = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _DialogRootContext = require("../../dialog/root/DialogRootContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+var _DrawerPopupCssVars = require("../popup/DrawerPopupCssVars");
+var _DrawerBackdropCssVars = require("./DrawerBackdropCssVars");
+const stateAttributesMapping = {
+  ..._popupStateMapping.popupStateMapping,
+  ..._stateAttributesMapping.transitionStatusMapping
+};
+
+/**
+ * An overlay displayed beneath the popup.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerBackdrop = exports.DrawerBackdrop = /*#__PURE__*/React.forwardRef(function DrawerBackdrop(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    forceRender = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    store
+  } = (0, _DialogRootContext.useDialogRootContext)();
+  const open = store.useState('open');
+  const nested = store.useState('nested');
+  const mounted = store.useState('mounted');
+  const transitionStatus = store.useState('transitionStatus');
+  const state = {
+    open,
+    transitionStatus
+  };
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: [store.context.backdropRef, forwardedRef],
+    stateAttributesMapping,
+    props: [{
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        pointerEvents: !open ? 'none' : undefined,
+        userSelect: 'none',
+        WebkitUserSelect: 'none',
+        [_DrawerBackdropCssVars.DrawerBackdropCssVars.swipeProgress]: '0',
+        [_DrawerPopupCssVars.DrawerPopupCssVars.swipeStrength]: '1'
+      }
+    }, elementProps],
+    enabled: forceRender || !nested
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerBackdrop.displayName = "DrawerBackdrop";

package/drawer/backdrop/DrawerBackdropCssVars.d.ts

@@ -0,0 +1,7 @@
+export declare enum DrawerBackdropCssVars {
+  /**
+   * The swipe progress of the drawer gesture.
+   * @type {number}
+   */
+  swipeProgress = "--drawer-swipe-progress",
+}

package/drawer/backdrop/DrawerBackdropCssVars.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerBackdropCssVars = void 0;
+let DrawerBackdropCssVars = exports.DrawerBackdropCssVars = /*#__PURE__*/function (DrawerBackdropCssVars) {
+  /**
+   * The swipe progress of the drawer gesture.
+   * @type {number}
+   */
+  DrawerBackdropCssVars["swipeProgress"] = "--drawer-swipe-progress";
+  return DrawerBackdropCssVars;
+}({});

package/drawer/close/DrawerClose.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+/**
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * 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 DrawerCloseState {
+  /**
+   * Whether the button is currently disabled.
+   */
+  disabled: boolean;
+}
+export interface DrawerClose {
+  (componentProps: DrawerCloseProps): React.JSX.Element;
+}
+export declare namespace DrawerClose {
+  type Props = DrawerCloseProps;
+  type State = DrawerCloseState;
+}

package/drawer/close/DrawerClose.js

@@ -0,0 +1,15 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerClose = void 0;
+var _DialogClose = require("../../dialog/close/DialogClose");
+/**
+ * A button that closes the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerClose = exports.DrawerClose = _DialogClose.DialogClose;

package/drawer/content/DrawerContent.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * 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 DrawerContentState {}
+export declare namespace DrawerContent {
+  type Props = DrawerContentProps;
+  type State = DrawerContentState;
+}

package/drawer/content/DrawerContent.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerContent = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _DialogRootContext = require("../../dialog/root/DialogRootContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+/**
+ * A container for the drawer contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerContent = exports.DrawerContent = /*#__PURE__*/React.forwardRef(function DrawerContent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  (0, _DialogRootContext.useDialogRootContext)();
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    ref: forwardedRef,
+    props: [{
+      ['data-swipe-ignore']: ''
+    }, elementProps]
+  });
+});
+if (process.env.NODE_ENV !== "production") DrawerContent.displayName = "DrawerContent";