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

package/dist/drawer/index.d.mts

@@ -1,39 +1,39 @@
-import { Dialog } from '@base-ui-components/react/dialog';
-import { ComponentProps, ReactElement, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
+import { Dialog } from 'radix-ui';
+import { 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 extends Omit<ComponentProps<typeof Dialog.Root>, 'onOpenChange' | 'render'> {
+interface DrawerProps {
+    /**
+     * Children of the component.
+     */
+    children?: Dialog.DialogProps['children'];
     /**
      * Specifies if the dialog is open or not.
      */
-    open?: boolean;
+    open?: Dialog.DialogProps['open'];
     /**
      * Default open state.
      */
-    defaultOpen?: boolean;
+    defaultOpen?: Dialog.DialogProps['defaultOpen'];
     /**
      * Handler executed on every dialog open state change.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: Dialog.DialogProps['onOpenChange'];
     /**
      * Specifies if the dialog is a modal.
      */
-    modal?: boolean;
+    modal?: Dialog.DialogProps['modal'];
     /**
      * 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: {
-    ({ onOpenChange, withFade, ...props }: DrawerProps): ReactElement;
+    ({ children, withFade, ...rest }: DrawerProps): ReactElement;
     displayName: string;
 };
 
@@ -52,13 +52,9 @@ declare const DrawerBody: {
     displayName: string;
 };
 
-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;
+type DrawerCloseProps = Dialog.DialogCloseProps & {
     ref?: Ref<HTMLButtonElement>;
-}
+};
 
 type DrawerCloseButtonProps = DrawerCloseProps & Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>;
 declare const DrawerCloseButton: {
@@ -72,21 +68,17 @@ declare const drawerContentStyles: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>;
 
-interface DrawerContentProps extends Omit<ComponentProps<typeof Dialog.Popup>, 'render' | 'onInteractOutside'>, DrawerContentStylesProps {
+type DrawerContentProps = Dialog.DialogContentProps & 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;
 };
 
-interface DrawerDescriptionProps extends Omit<ComponentProps<typeof Dialog.Description>, 'render'> {
+type DrawerDescriptionProps = Dialog.DialogDescriptionProps & {
     ref?: Ref<HTMLParagraphElement>;
-}
+};
 declare const DrawerDescription: {
     (props: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -110,37 +102,37 @@ declare const DrawerHeader: {
     displayName: string;
 };
 
-interface DrawerOverlayProps extends Omit<ComponentProps<typeof Dialog.Backdrop>, 'render'> {
+type DrawerOverlayProps = Dialog.DialogOverlayProps & {
     ref?: Ref<HTMLDivElement>;
-}
+};
 declare const DrawerOverlay: {
-    ({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
+    ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement;
     displayName: string;
 };
 
-type DrawerPortalProps = ComponentProps<typeof Dialog.Portal>;
+type DrawerPortalProps = Dialog.DialogPortalProps;
 declare const DrawerPortal: {
-    (props: DrawerPortalProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...rest }: DrawerPortalProps): ReactElement;
     displayName: string;
 };
 
-interface DrawerTitleProps extends Omit<ComponentProps<typeof Dialog.Title>, 'render'> {
+type DrawerTitleProps = Dialog.DialogTitleProps & {
     ref?: Ref<HTMLHeadingElement>;
-}
+};
 declare const DrawerTitle: {
-    ({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
+    ({ className, ref, ...others }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface DrawerTriggerProps extends Omit<ComponentProps<typeof Dialog.Trigger>, 'render'> {
+interface DrawerTriggerProps extends Dialog.DialogTriggerProps {
     /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * 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.
      */
     asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 declare const DrawerTrigger: {
-    ({ asChild, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+    (props: DrawerTriggerProps): ReactElement;
     displayName: string;
 };
 

package/dist/drawer/index.d.ts

@@ -1,39 +1,39 @@
-import { Dialog } from '@base-ui-components/react/dialog';
-import { ComponentProps, ReactElement, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
+import { Dialog } from 'radix-ui';
+import { 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 extends Omit<ComponentProps<typeof Dialog.Root>, 'onOpenChange' | 'render'> {
+interface DrawerProps {
+    /**
+     * Children of the component.
+     */
+    children?: Dialog.DialogProps['children'];
     /**
      * Specifies if the dialog is open or not.
      */
-    open?: boolean;
+    open?: Dialog.DialogProps['open'];
     /**
      * Default open state.
      */
-    defaultOpen?: boolean;
+    defaultOpen?: Dialog.DialogProps['defaultOpen'];
     /**
      * Handler executed on every dialog open state change.
      */
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: Dialog.DialogProps['onOpenChange'];
     /**
      * Specifies if the dialog is a modal.
      */
-    modal?: boolean;
+    modal?: Dialog.DialogProps['modal'];
     /**
      * 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: {
-    ({ onOpenChange, withFade, ...props }: DrawerProps): ReactElement;
+    ({ children, withFade, ...rest }: DrawerProps): ReactElement;
     displayName: string;
 };
 
@@ -52,13 +52,9 @@ declare const DrawerBody: {
     displayName: string;
 };
 
-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;
+type DrawerCloseProps = Dialog.DialogCloseProps & {
     ref?: Ref<HTMLButtonElement>;
-}
+};
 
 type DrawerCloseButtonProps = DrawerCloseProps & Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>;
 declare const DrawerCloseButton: {
@@ -72,21 +68,17 @@ declare const drawerContentStyles: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>;
 
-interface DrawerContentProps extends Omit<ComponentProps<typeof Dialog.Popup>, 'render' | 'onInteractOutside'>, DrawerContentStylesProps {
+type DrawerContentProps = Dialog.DialogContentProps & 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;
 };
 
-interface DrawerDescriptionProps extends Omit<ComponentProps<typeof Dialog.Description>, 'render'> {
+type DrawerDescriptionProps = Dialog.DialogDescriptionProps & {
     ref?: Ref<HTMLParagraphElement>;
-}
+};
 declare const DrawerDescription: {
     (props: DrawerDescriptionProps): react_jsx_runtime.JSX.Element;
     displayName: string;
@@ -110,37 +102,37 @@ declare const DrawerHeader: {
     displayName: string;
 };
 
-interface DrawerOverlayProps extends Omit<ComponentProps<typeof Dialog.Backdrop>, 'render'> {
+type DrawerOverlayProps = Dialog.DialogOverlayProps & {
     ref?: Ref<HTMLDivElement>;
-}
+};
 declare const DrawerOverlay: {
-    ({ className, ...props }: DrawerOverlayProps): react_jsx_runtime.JSX.Element;
+    ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement;
     displayName: string;
 };
 
-type DrawerPortalProps = ComponentProps<typeof Dialog.Portal>;
+type DrawerPortalProps = Dialog.DialogPortalProps;
 declare const DrawerPortal: {
-    (props: DrawerPortalProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...rest }: DrawerPortalProps): ReactElement;
     displayName: string;
 };
 
-interface DrawerTitleProps extends Omit<ComponentProps<typeof Dialog.Title>, 'render'> {
+type DrawerTitleProps = Dialog.DialogTitleProps & {
     ref?: Ref<HTMLHeadingElement>;
-}
+};
 declare const DrawerTitle: {
-    ({ className, ...props }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
+    ({ className, ref, ...others }: DrawerTitleProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface DrawerTriggerProps extends Omit<ComponentProps<typeof Dialog.Trigger>, 'render'> {
+interface DrawerTriggerProps extends Dialog.DialogTriggerProps {
     /**
-     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * 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.
      */
     asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 declare const DrawerTrigger: {
-    ({ asChild, ...props }: DrawerTriggerProps): react_jsx_runtime.JSX.Element;
+    (props: DrawerTriggerProps): ReactElement;
     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_dialog = require("@base-ui-components/react/dialog");
+var import_radix_ui = require("radix-ui");
 
 // src/drawer/DrawerContext.tsx
 var import_react = require("react");
@@ -55,12 +55,7 @@ var useDrawer = () => {
 
 // src/drawer/Drawer.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-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 }) });
-};
+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 }) });
 Drawer.displayName = "Drawer.Root";
 
 // src/drawer/DrawerBody.tsx
@@ -126,12 +121,12 @@ var import_class_variance_authority7 = require("class-variance-authority");
 var import_react4 = require("react");
 
 // src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
+var import_radix_ui2 = require("radix-ui");
 var import_react3 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
+var Slottable = import_radix_ui2.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Slot.Root, { ref, ...props });
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
@@ -1133,35 +1128,23 @@ var IconButton = ({
 IconButton.displayName = "IconButton";
 
 // src/drawer/DrawerClose.tsx
-var import_dialog2 = require("@base-ui-components/react/dialog");
-
-// src/drawer/useRenderSlot.tsx
+var import_radix_ui3 = require("radix-ui");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-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 });
-};
+var DrawerClose = (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_radix_ui3.Dialog.Close, { "data-spark-component": "drawer-close", ...props });
 DrawerClose.displayName = "Drawer.Close";
 
 // src/drawer/DrawerCloseButton.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DrawerCloseButton = ({
   "aria-label": ariaLabel,
   className,
   size = "md",
   intent = "neutral",
   design = "ghost",
-  children = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Close.Close, {}),
+  children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}),
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
   DrawerClose,
   {
     "data-spark-component": "drawer-close-button",
@@ -1169,22 +1152,20 @@ var DrawerCloseButton = ({
     className: (0, import_class_variance_authority7.cx)(["absolute", "top-sm", "right-xl"], className),
     asChild: true,
     ...rest,
-    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { children }) })
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children }) })
   }
 );
 DrawerCloseButton.displayName = "Drawer.CloseButton";
 
 // src/drawer/DrawerContent.tsx
-var import_dialog3 = require("@base-ui-components/react/dialog");
-var import_class_variance_authority9 = require("class-variance-authority");
+var import_radix_ui4 = require("radix-ui");
 
 // 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",
-    // Base UI uses data-open and data-closed for transitions
-    "data-open:animation-duration-400 data-closed:animation-duration-200"
+    "data-[state=open]:animation-duration-400 data-[state=closed]:animation-duration-200"
   ],
   {
     variants: {
@@ -1198,25 +1179,25 @@ var drawerContentStyles = (0, import_class_variance_authority8.cva)(
       side: {
         right: [
           "inset-y-0 right-0",
-          "data-open:animate-slide-in-right ",
-          "data-closed:animate-slide-out-right"
+          "data-[state=open]:animate-slide-in-right ",
+          "data-[state=closed]:animate-slide-out-right"
         ],
         left: [
           "inset-y-0 left-0",
-          "data-open:animate-slide-in-left",
-          "data-closed:animate-slide-out-left"
+          "data-[state=open]:animate-slide-in-left",
+          "data-[state=closed]:animate-slide-out-left"
         ],
         top: [
           "top-0 left-0",
           "w-screen",
-          "data-open:animate-slide-in-top",
-          "data-closed:animate-slide-out-top"
+          "data-[state=open]:animate-slide-in-top",
+          "data-[state=closed]:animate-slide-out-top"
         ],
         bottom: [
           "bottom-0 left-0",
           "w-screen",
-          "data-open:animate-slide-in-bottom",
-          "data-closed:animate-slide-out-bottom"
+          "data-[state=open]:animate-slide-in-bottom",
+          "data-[state=closed]:animate-slide-out-bottom"
         ]
       }
     },
@@ -1270,7 +1251,7 @@ var drawerContentStyles = (0, import_class_variance_authority8.cva)(
 );
 
 // src/drawer/DrawerContent.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DrawerContent = ({
   className,
   size = "md",
@@ -1278,71 +1259,62 @@ var DrawerContent = ({
   onInteractOutside,
   ref,
   ...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
-    }
-  );
-};
+}) => /* @__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
+  }
+);
 DrawerContent.displayName = "Drawer.Content";
 
 // src/drawer/DrawerDescription.tsx
-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 });
-};
+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 });
 DrawerDescription.displayName = "Drawer.Description";
 
 // src/drawer/DrawerFooter.tsx
-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)(
+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)(
   "footer",
   {
     "data-spark-component": "drawer-footer",
     ref,
-    className: (0, import_class_variance_authority10.cx)(["px-xl", "py-lg"], className),
+    className: (0, import_class_variance_authority9.cx)(["px-xl", "py-lg"], className),
     ...rest
   }
 );
 DrawerFooter.displayName = "Drawer.Footer";
 
 // src/drawer/DrawerHeader.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DrawerHeader = ({
   children,
   className,
   ref,
   ...rest
-}) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
   "header",
   {
     "data-spark-component": "drawer-header",
     ref,
-    className: (0, import_class_variance_authority11.cx)(["px-xl", "py-lg"], className),
+    className: (0, import_class_variance_authority10.cx)(["px-xl", "py-lg"], className),
     ...rest,
     children
   }
@@ -1350,59 +1322,51 @@ var DrawerHeader = ({
 DrawerHeader.displayName = "Dialog.Header";
 
 // src/drawer/DrawerOverlay.tsx
-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
-    }
-  );
-};
+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
+  }
+);
 DrawerOverlay.displayName = "Drawer.Overlay";
 
 // src/drawer/DrawerPortal.tsx
-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 });
-};
+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 });
 DrawerPortal.displayName = "Drawer.Portal";
 
 // src/drawer/DrawerTitle.tsx
-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
-    }
-  );
-};
+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
+  }
+);
 DrawerTitle.displayName = "Drawer.Title";
 
 // src/drawer/DrawerTrigger.tsx
-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 });
-};
+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 });
 DrawerTrigger.displayName = "Drawer.Trigger";
 
 // src/drawer/index.ts