@spark-ui/components 13.0.1 → 13.0.3-beta.0

package/dist/drawer/index.d.mts

@@ -1,39 +1,39 @@
-import { Dialog } from 'radix-ui';
-import { ReactElement, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { ComponentProps, ReactElement, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { IconButtonProps } from '../icon-button/index.mjs';
 import '../button/index.mjs';
 
-interface DrawerProps {
-    /**
-     * Children of the component.
-     */
-    children?: Dialog.DialogProps['children'];
+interface DrawerProps extends Omit<ComponentProps<typeof Dialog.Root>, 'onOpenChange' | 'render'> {
     /**
      * Specifies if the dialog is open or not.
      */
-    open?: Dialog.DialogProps['open'];
+    open?: boolean;
     /**
      * Default open state.
      */
-    defaultOpen?: Dialog.DialogProps['defaultOpen'];
+    defaultOpen?: boolean;
     /**
      * Handler executed on every dialog open state change.
      */
-    onOpenChange?: Dialog.DialogProps['onOpenChange'];
+    onOpenChange?: (open: boolean) => void;
     /**
      * Specifies if the dialog is a modal.
      */
-    modal?: Dialog.DialogProps['modal'];
+    modal?: boolean;
     /**
      * Specifies if the drawer should have a fade animation on its body (in case it is scrollable).
      */
     withFade?: boolean;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
 }
 declare const Drawer$1: {
-    ({ children, withFade, ...rest }: DrawerProps): ReactElement;
+    ({ onOpenChange, withFade, ...props }: DrawerProps): ReactElement;
     displayName: string;
 };
 
@@ -52,9 +52,13 @@ declare const DrawerBody: {
     displayName: string;
 };
 
-type DrawerCloseProps = Dialog.DialogCloseProps & {
+interface DrawerCloseProps extends Omit<ComponentProps<typeof Dialog.Close>, 'render'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
-};
+}
 
 type DrawerCloseButtonProps = DrawerCloseProps & Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>;
 declare const DrawerCloseButton: {
@@ -68,17 +72,21 @@ declare const drawerContentStyles: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>;
 
-type DrawerContentProps = Dialog.DialogContentProps & DrawerContentStylesProps & {
+interface DrawerContentProps extends Omit<ComponentProps<typeof Dialog.Popup>, 'render' | 'onInteractOutside'>, DrawerContentStylesProps {
     ref?: Ref<HTMLDivElement>;
-};
+    /**
+     * Handler called when the user clicks outside the drawer.
+     */
+    onInteractOutside?: (event: PointerEvent) => void;
+}
 declare const DrawerContent: {
     ({ className, size, side, onInteractOutside, ref, ...rest }: DrawerContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type DrawerDescriptionProps = Dialog.DialogDescriptionProps & {
+interface DrawerDescriptionProps extends Omit<ComponentProps<typeof Dialog.Description>, 'render'> {
     ref?: Ref<HTMLParagraphElement>;
-};
+}
 declare const DrawerDescription: {
     (props: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -102,37 +110,37 @@ declare const DrawerHeader: {
     displayName: string;
 };
 
-type DrawerOverlayProps = Dialog.DialogOverlayProps & {
+interface DrawerOverlayProps extends Omit<ComponentProps<typeof Dialog.Backdrop>, 'render'> {
     ref?: Ref<HTMLDivElement>;
-};
+}
 declare const DrawerOverlay: {
-    ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement;
+    ({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type DrawerPortalProps = Dialog.DialogPortalProps;
+type DrawerPortalProps = ComponentProps<typeof Dialog.Portal>;
 declare const DrawerPortal: {
-    ({ children, ...rest }: DrawerPortalProps): ReactElement;
+    (props: DrawerPortalProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type DrawerTitleProps = Dialog.DialogTitleProps & {
+interface DrawerTitleProps extends Omit<ComponentProps<typeof Dialog.Title>, 'render'> {
     ref?: Ref<HTMLHeadingElement>;
-};
+}
 declare const DrawerTitle: {
-    ({ className, ref, ...others }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface DrawerTriggerProps extends Dialog.DialogTriggerProps {
+interface DrawerTriggerProps extends Omit<ComponentProps<typeof Dialog.Trigger>, 'render'> {
     /**
-     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
      */
     asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 declare const DrawerTrigger: {
-    (props: DrawerTriggerProps): ReactElement;
+    ({ asChild, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/drawer/index.d.ts

@@ -1,39 +1,39 @@
-import { Dialog } from 'radix-ui';
-import { ReactElement, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { ComponentProps, ReactElement, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { IconButtonProps } from '../icon-button/index.js';
 import '../button/index.js';
 
-interface DrawerProps {
-    /**
-     * Children of the component.
-     */
-    children?: Dialog.DialogProps['children'];
+interface DrawerProps extends Omit<ComponentProps<typeof Dialog.Root>, 'onOpenChange' | 'render'> {
     /**
      * Specifies if the dialog is open or not.
      */
-    open?: Dialog.DialogProps['open'];
+    open?: boolean;
     /**
      * Default open state.
      */
-    defaultOpen?: Dialog.DialogProps['defaultOpen'];
+    defaultOpen?: boolean;
     /**
      * Handler executed on every dialog open state change.
      */
-    onOpenChange?: Dialog.DialogProps['onOpenChange'];
+    onOpenChange?: (open: boolean) => void;
     /**
      * Specifies if the dialog is a modal.
      */
-    modal?: Dialog.DialogProps['modal'];
+    modal?: boolean;
     /**
      * Specifies if the drawer should have a fade animation on its body (in case it is scrollable).
      */
     withFade?: boolean;
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
 }
 declare const Drawer$1: {
-    ({ children, withFade, ...rest }: DrawerProps): ReactElement;
+    ({ onOpenChange, withFade, ...props }: DrawerProps): ReactElement;
     displayName: string;
 };
 
@@ -52,9 +52,13 @@ declare const DrawerBody: {
     displayName: string;
 };
 
-type DrawerCloseProps = Dialog.DialogCloseProps & {
+interface DrawerCloseProps extends Omit<ComponentProps<typeof Dialog.Close>, 'render'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
-};
+}
 
 type DrawerCloseButtonProps = DrawerCloseProps & Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>;
 declare const DrawerCloseButton: {
@@ -68,17 +72,21 @@ declare const drawerContentStyles: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>;
 
-type DrawerContentProps = Dialog.DialogContentProps & DrawerContentStylesProps & {
+interface DrawerContentProps extends Omit<ComponentProps<typeof Dialog.Popup>, 'render' | 'onInteractOutside'>, DrawerContentStylesProps {
     ref?: Ref<HTMLDivElement>;
-};
+    /**
+     * Handler called when the user clicks outside the drawer.
+     */
+    onInteractOutside?: (event: PointerEvent) => void;
+}
 declare const DrawerContent: {
     ({ className, size, side, onInteractOutside, ref, ...rest }: DrawerContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type DrawerDescriptionProps = Dialog.DialogDescriptionProps & {
+interface DrawerDescriptionProps extends Omit<ComponentProps<typeof Dialog.Description>, 'render'> {
     ref?: Ref<HTMLParagraphElement>;
-};
+}
 declare const DrawerDescription: {
     (props: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -102,37 +110,37 @@ declare const DrawerHeader: {
     displayName: string;
 };
 
-type DrawerOverlayProps = Dialog.DialogOverlayProps & {
+interface DrawerOverlayProps extends Omit<ComponentProps<typeof Dialog.Backdrop>, 'render'> {
     ref?: Ref<HTMLDivElement>;
-};
+}
 declare const DrawerOverlay: {
-    ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement;
+    ({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type DrawerPortalProps = Dialog.DialogPortalProps;
+type DrawerPortalProps = ComponentProps<typeof Dialog.Portal>;
 declare const DrawerPortal: {
-    ({ children, ...rest }: DrawerPortalProps): ReactElement;
+    (props: DrawerPortalProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-type DrawerTitleProps = Dialog.DialogTitleProps & {
+interface DrawerTitleProps extends Omit<ComponentProps<typeof Dialog.Title>, 'render'> {
     ref?: Ref<HTMLHeadingElement>;
-};
+}
 declare const DrawerTitle: {
-    ({ className, ref, ...others }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
+    ({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface DrawerTriggerProps extends Dialog.DialogTriggerProps {
+interface DrawerTriggerProps extends Omit<ComponentProps<typeof Dialog.Trigger>, 'render'> {
     /**
-     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
      */
     asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 declare const DrawerTrigger: {
-    (props: DrawerTriggerProps): ReactElement;
+    ({ asChild, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/drawer/index.js

@@ -25,7 +25,7 @@ __export(drawer_exports, {
 module.exports = __toCommonJS(drawer_exports);
 
 // src/drawer/Drawer.tsx
-var import_radix_ui = require("radix-ui");
+var import_dialog = require("@base-ui-components/react/dialog");
 
 // src/drawer/DrawerContext.tsx
 var import_react = require("react");
@@ -55,7 +55,12 @@ var useDrawer = () => {
 
 // src/drawer/Drawer.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var Drawer = ({ children, withFade = false, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DrawerProvider, { withFade, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
+var Drawer = ({ onOpenChange, withFade = false, ...props }) => {
+  const handleOpenChange = onOpenChange ? (open, _eventDetails) => {
+    onOpenChange(open);
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DrawerProvider, { withFade, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_dialog.Dialog.Root, { "data-spark-component": "drawer", onOpenChange: handleOpenChange, ...props }) });
+};
 Drawer.displayName = "Drawer.Root";
 
 // src/drawer/DrawerBody.tsx
@@ -121,12 +126,12 @@ var import_class_variance_authority7 = require("class-variance-authority");
 var import_react4 = require("react");
 
 // src/slot/Slot.tsx
-var import_radix_ui2 = require("radix-ui");
+var import_radix_ui = require("radix-ui");
 var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Slottable = import_radix_ui2.Slot.Slottable;
+var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Slot.Root, { ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
@@ -1128,23 +1133,35 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/drawer/DrawerClose.tsx
-var import_radix_ui3 = require("radix-ui");
+var import_dialog2 = require("@base-ui-components/react/dialog");
+
+// src/drawer/useRenderSlot.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var DrawerClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui3.Dialog.Close, { "data-spark-component": "drawer-close", ...props });
+function useRenderSlot(asChild, defaultTag) {
+  const Component = asChild ? Slot : defaultTag;
+  return asChild ? ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Component, { ...props }) : void 0;
+}
+
+// src/drawer/DrawerClose.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var DrawerClose = ({ asChild = false, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_dialog2.Dialog.Close, { "data-spark-component": "drawer-close", render: renderSlot, ...props });
+};
 DrawerClose.displayName = "Drawer.Close";
 
 // src/drawer/DrawerCloseButton.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DrawerCloseButton = ({
   "aria-label": ariaLabel,
   className,
   size = "md",
   intent = "neutral",
   design = "ghost",
-  children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}),
+  children = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Close.Close, {}),
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   DrawerClose,
   {
     "data-spark-component": "drawer-close-button",
@@ -1152,20 +1169,22 @@ var DrawerCloseButton = ({
     className: (0, import_class_variance_authority7.cx)(["absolute", "top-sm", "right-xl"], className),
     asChild: true,
     ...rest,
-    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { children }) })
   }
 );
 DrawerCloseButton.displayName = "Drawer.CloseButton";
 
 // src/drawer/DrawerContent.tsx
-var import_radix_ui4 = require("radix-ui");
+var import_dialog3 = require("@base-ui-components/react/dialog");
+var import_class_variance_authority9 = require("class-variance-authority");
 
 // src/drawer/DrawerContent.styles.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
 var drawerContentStyles = (0, import_class_variance_authority8.cva)(
   [
     "fixed z-modal flex flex-col bg-surface shadow-md",
-    "data-[state=open]:animation-duration-400 data-[state=closed]:animation-duration-200"
+    // Base UI uses data-open and data-closed for transitions
+    "data-open:animation-duration-400 data-closed:animation-duration-200"
   ],
   {
     variants: {
@@ -1179,25 +1198,25 @@ var drawerContentStyles = (0, import_class_variance_authority8.cva)(
       side: {
         right: [
           "inset-y-0 right-0",
-          "data-[state=open]:animate-slide-in-right ",
-          "data-[state=closed]:animate-slide-out-right"
+          "data-open:animate-slide-in-right ",
+          "data-closed:animate-slide-out-right"
         ],
         left: [
           "inset-y-0 left-0",
-          "data-[state=open]:animate-slide-in-left",
-          "data-[state=closed]:animate-slide-out-left"
+          "data-open:animate-slide-in-left",
+          "data-closed:animate-slide-out-left"
         ],
         top: [
           "top-0 left-0",
           "w-screen",
-          "data-[state=open]:animate-slide-in-top",
-          "data-[state=closed]:animate-slide-out-top"
+          "data-open:animate-slide-in-top",
+          "data-closed:animate-slide-out-top"
         ],
         bottom: [
           "bottom-0 left-0",
           "w-screen",
-          "data-[state=open]:animate-slide-in-bottom",
-          "data-[state=closed]:animate-slide-out-bottom"
+          "data-open:animate-slide-in-bottom",
+          "data-closed:animate-slide-out-bottom"
         ]
       }
     },
@@ -1251,7 +1270,7 @@ var drawerContentStyles = (0, import_class_variance_authority8.cva)(
 );
 
 // src/drawer/DrawerContent.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var DrawerContent = ({
   className,
   size = "md",
@@ -1259,62 +1278,71 @@ var DrawerContent = ({
   onInteractOutside,
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-  import_radix_ui4.Dialog.Content,
-  {
-    "data-spark-component": "drawer-content",
-    ref,
-    className: drawerContentStyles({
-      size,
-      side,
-      className
-    }),
-    onInteractOutside: (e) => {
-      const isForegroundElement = e.target.closest(".z-toast, .z-popover");
-      if (isForegroundElement) {
-        e.preventDefault();
-      }
-      onInteractOutside?.(e);
-    },
-    ...rest
-  }
-);
+}) => {
+  const handleInteractOutside = onInteractOutside ? (event) => {
+    const e = event;
+    const isForegroundElement = e.target?.closest(".z-toast, .z-popover");
+    if (isForegroundElement) {
+      e.preventDefault();
+    }
+    onInteractOutside?.(e);
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_dialog3.Dialog.Popup,
+    {
+      ref,
+      "data-spark-component": "drawer-content",
+      role: "dialog",
+      className: (state) => (0, import_class_variance_authority9.cx)(
+        drawerContentStyles({
+          size,
+          side,
+          className: typeof className === "function" ? className(state) : className
+        })
+      ),
+      ...handleInteractOutside && { onInteractOutside: handleInteractOutside },
+      ...rest
+    }
+  );
+};
 DrawerContent.displayName = "Drawer.Content";
 
 // src/drawer/DrawerDescription.tsx
-var import_radix_ui5 = require("radix-ui");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var DrawerDescription = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Description, { "data-spark-component": "drawer-description", ...props });
+var import_dialog4 = require("@base-ui-components/react/dialog");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DrawerDescription = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_dialog4.Dialog.Description, { "data-spark-component": "drawer-description", ...props });
+};
 DrawerDescription.displayName = "Drawer.Description";
 
 // src/drawer/DrawerFooter.tsx
-var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "footer",
   {
     "data-spark-component": "drawer-footer",
     ref,
-    className: (0, import_class_variance_authority9.cx)(["px-xl", "py-lg"], className),
+    className: (0, import_class_variance_authority10.cx)(["px-xl", "py-lg"], className),
     ...rest
   }
 );
 DrawerFooter.displayName = "Drawer.Footer";
 
 // src/drawer/DrawerHeader.tsx
-var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var DrawerHeader = ({
   children,
   className,
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "header",
   {
     "data-spark-component": "drawer-header",
     ref,
-    className: (0, import_class_variance_authority10.cx)(["px-xl", "py-lg"], className),
+    className: (0, import_class_variance_authority11.cx)(["px-xl", "py-lg"], className),
     ...rest,
     children
   }
@@ -1322,51 +1350,59 @@ var DrawerHeader = ({
 DrawerHeader.displayName = "Dialog.Header";
 
 // src/drawer/DrawerOverlay.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_radix_ui6 = require("radix-ui");
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var DrawerOverlay = ({ className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-  import_radix_ui6.Dialog.Overlay,
-  {
-    "data-spark-component": "drawer-overlay",
-    ref,
-    className: (0, import_class_variance_authority11.cx)(
-      ["fixed", "top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
-      ["bg-overlay/dim-1"],
-      ["data-[state=open]:animate-fade-in"],
-      ["data-[state=closed]:animate-fade-out"],
-      className
-    ),
-    ...rest
-  }
-);
+var import_dialog5 = require("@base-ui-components/react/dialog");
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DrawerOverlay = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_dialog5.Dialog.Backdrop,
+    {
+      "data-spark-component": "drawer-overlay",
+      className: (state) => (0, import_class_variance_authority12.cx)(
+        "z-overlay fixed top-0 left-0 h-screen w-screen",
+        "bg-overlay/dim-1",
+        // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes
+        "data-[starting-style]:animate-fade-in",
+        "data-[ending-style]:animate-fade-out",
+        typeof className === "function" ? className(state) : className
+      ),
+      ...props
+    }
+  );
+};
 DrawerOverlay.displayName = "Drawer.Overlay";
 
 // src/drawer/DrawerPortal.tsx
-var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var DrawerPortal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui7.Dialog.Portal, { ...rest, children });
+var import_dialog6 = require("@base-ui-components/react/dialog");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var DrawerPortal = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_dialog6.Dialog.Portal, { "data-spark-component": "drawer-portal", ...props });
+};
 DrawerPortal.displayName = "Drawer.Portal";
 
 // src/drawer/DrawerTitle.tsx
-var import_class_variance_authority12 = require("class-variance-authority");
-var import_radix_ui8 = require("radix-ui");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var DrawerTitle = ({ className, ref, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-  import_radix_ui8.Dialog.Title,
-  {
-    "data-spark-component": "drawer-title",
-    ref,
-    className: (0, import_class_variance_authority12.cx)("text-headline-2 text-on-surface", className),
-    ...others
-  }
-);
+var import_dialog7 = require("@base-ui-components/react/dialog");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var DrawerTitle = ({ className, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    import_dialog7.Dialog.Title,
+    {
+      "data-spark-component": "drawer-title",
+      className: (0, import_class_variance_authority13.cx)("text-headline-2 text-on-surface", className),
+      ...props
+    }
+  );
+};
 DrawerTitle.displayName = "Drawer.Title";
 
 // src/drawer/DrawerTrigger.tsx
-var import_radix_ui9 = require("radix-ui");
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var DrawerTrigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui9.Dialog.Trigger, { "data-spark-component": "drawer-trigger", ...props });
+var import_dialog8 = require("@base-ui-components/react/dialog");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var DrawerTrigger = ({ asChild = false, ...props }) => {
+  const renderSlot = useRenderSlot(asChild, "button");
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_dialog8.Dialog.Trigger, { "data-spark-component": "drawer-trigger", render: renderSlot, ...props });
+};
 DrawerTrigger.displayName = "Drawer.Trigger";
 
 // src/drawer/index.ts