@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/drawer/DrawerTitle.d.ts

@@ -1,9 +1,9 @@
-import { Dialog as RadixDrawer } from 'radix-ui';
-import { Ref } from 'react';
-export type DrawerTitleProps = RadixDrawer.DialogTitleProps & {
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { ComponentProps, Ref } from 'react';
+export interface DrawerTitleProps extends Omit<ComponentProps<typeof BaseDialog.Title>, 'render'> {
     ref?: Ref<HTMLHeadingElement>;
-};
+}
 export declare const DrawerTitle: {
-    ({ className, ref, ...others }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, ...props }: DrawerTitleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/drawer/DrawerTrigger.d.ts

@@ -1,13 +1,13 @@
-import { Dialog as RadixDrawer } from 'radix-ui';
-import { ReactElement, Ref } from 'react';
-export interface DrawerTriggerProps extends RadixDrawer.DialogTriggerProps {
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { ComponentProps, Ref } from 'react';
+export interface DrawerTriggerProps extends Omit<ComponentProps<typeof BaseDialog.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>;
 }
 export declare const DrawerTrigger: {
-    (props: DrawerTriggerProps): ReactElement;
+    ({ asChild, ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/drawer/index.d.mts

@@ -0,0 +1,37 @@
+import { Drawer as Root } from './Drawer';
+import { DrawerBody } from './DrawerBody';
+import { DrawerClose } from './DrawerClose';
+import { DrawerCloseButton } from './DrawerCloseButton';
+import { DrawerContent } from './DrawerContent';
+import { DrawerDescription } from './DrawerDescription';
+import { DrawerFooter } from './DrawerFooter';
+import { DrawerHeader } from './DrawerHeader';
+import { DrawerOverlay } from './DrawerOverlay';
+import { DrawerPortal } from './DrawerPortal';
+import { DrawerTitle } from './DrawerTitle';
+import { DrawerTrigger } from './DrawerTrigger';
+export declare const Drawer: typeof Root & {
+    Trigger: typeof DrawerTrigger;
+    Portal: typeof DrawerPortal;
+    Overlay: typeof DrawerOverlay;
+    Content: typeof DrawerContent;
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+    Close: typeof DrawerClose;
+    CloseButton: typeof DrawerCloseButton;
+    Title: typeof DrawerTitle;
+    Description: typeof DrawerDescription;
+};
+export { type DrawerProps } from './Drawer';
+export { type DrawerContentProps } from './DrawerContent';
+export { type DrawerHeaderProps } from './DrawerHeader';
+export { type DrawerBodyProps } from './DrawerBody';
+export { type DrawerFooterProps } from './DrawerFooter';
+export { type DrawerTriggerProps } from './DrawerTrigger';
+export { type DrawerOverlayProps } from './DrawerOverlay';
+export { type DrawerPortalProps } from './DrawerPortal';
+export { type DrawerTitleProps } from './DrawerTitle';
+export { type DrawerDescriptionProps } from './DrawerDescription';
+export { type DrawerCloseProps } from './DrawerClose';
+export { type DrawerCloseButtonProps } from './DrawerCloseButton';

package/dist/drawer/index.d.ts

@@ -1,5 +1,6 @@
 import { Drawer as Root } from './Drawer';
 import { DrawerBody } from './DrawerBody';
+import { DrawerClose } from './DrawerClose';
 import { DrawerCloseButton } from './DrawerCloseButton';
 import { DrawerContent } from './DrawerContent';
 import { DrawerDescription } from './DrawerDescription';
@@ -17,6 +18,7 @@ export declare const Drawer: typeof Root & {
     Header: typeof DrawerHeader;
     Body: typeof DrawerBody;
     Footer: typeof DrawerFooter;
+    Close: typeof DrawerClose;
     CloseButton: typeof DrawerCloseButton;
     Title: typeof DrawerTitle;
     Description: typeof DrawerDescription;

package/dist/drawer/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),s=require("../index-C-J_tHdS.js"),k=require("@spark-ui/hooks/use-merge-refs"),B=require("@spark-ui/hooks/use-scroll-overflow"),i=require("../index-DnaHaH_0.js"),T=require("@spark-ui/icons/Close"),O=require("../Icon-Bf0XrmiR.js"),q=require("../IconButton-Bf-EDzpI.js"),v=p.createContext(null),P=({children:e,withFade:a=!1})=>t.jsx(v.Provider,{value:{withFade:a},children:e}),R=()=>{const e=p.useContext(v);if(!e)throw Error("useDrawer must be used within a Drawer provider");return e},z=({children:e,withFade:a=!1,...r})=>t.jsx(P,{withFade:a,children:t.jsx(s.Root,{...r,children:e})});z.displayName="Drawer.Root";const F=i.cva(["grow","overflow-y-auto","outline-hidden","focus-visible:u-outline"],{variants:{inset:{true:"",false:"px-xl py-lg"}},defaultVariants:{inset:!1}}),u=({children:e,inset:a=!1,className:r,ref:o,...d})=>{const n=p.useRef(null),l=k.useMergeRefs(o,n),{withFade:c}=R(),{overflow:m}=B.useScrollOverflow(n);return t.jsx("div",{"data-spark-component":"drawer-body",ref:l,className:F({inset:a,className:r}),style:{...c&&{maskImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`100% calc(100% + ${m.top?"0px":"44px"} + ${m.bottom?"0px":"44px"})`,maskPosition:`0 ${m.top?"0px":"-44px"}`}},...d,children:e})};u.displayName="Drawer.Body";const j=e=>t.jsx(s.Close,{"data-spark-component":"drawer-close",...e});j.displayName="Drawer.Close";const w=({"aria-label":e,className:a,size:r="md",intent:o="neutral",design:d="ghost",children:n=t.jsx(T.Close,{}),ref:l,...c})=>t.jsx(j,{"data-spark-component":"drawer-close-button",ref:l,className:i.cx(["absolute","top-sm","right-xl"],a),asChild:!0,...c,children:t.jsx(q.IconButton,{intent:o,size:r,design:d,"aria-label":e,children:t.jsx(O.Icon,{children:n})})});w.displayName="Drawer.CloseButton";const S=i.cva(["fixed z-modal flex flex-col bg-surface shadow-md","data-[state=open]:animation-duration-400 data-[state=closed]:animation-duration-200"],{variants:{size:{sm:"",md:"",lg:"",fluid:"",fullscreen:"h-screen w-screen"},side:{right:["inset-y-0 right-0","data-[state=open]:animate-slide-in-right ","data-[state=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"],top:["top-0 left-0","w-screen","data-[state=open]:animate-slide-in-top","data-[state=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"]}},compoundVariants:[{side:["right","left"],size:"sm",class:["w-sz-480","max-w-full"]},{side:["right","left"],size:"md",class:["w-sz-672","max-w-full"]},{side:["right","left"],size:"lg",class:["w-sz-864","max-w-full"]},{side:["left","right"],size:"fluid",class:["w-auto","max-w-full"]},{side:["top","bottom"],size:"sm",class:["h-sz-480","max-h-full"]},{side:["top","bottom"],size:"md",class:["h-sz-672","max-h-full"]},{side:["top","bottom"],size:"lg",class:["h-sz-864","max-h-full"]},{side:["top","bottom"],size:"fluid",class:["h-auto","max-h-full"]}],defaultVariants:{side:"right",size:"md"}}),x=({className:e,size:a="md",side:r="right",onInteractOutside:o,ref:d,...n})=>t.jsx(s.Content,{"data-spark-component":"drawer-content",ref:d,className:S({size:a,side:r,className:e}),onInteractOutside:l=>{l.target.closest(".z-toast, .z-popover")&&l.preventDefault(),o?.(l)},...n});x.displayName="Drawer.Content";const f=e=>t.jsx(s.Description,{"data-spark-component":"drawer-description",...e});f.displayName="Drawer.Description";const g=({className:e,ref:a,...r})=>t.jsx("footer",{"data-spark-component":"drawer-footer",ref:a,className:i.cx(["px-xl","py-lg"],e),...r});g.displayName="Drawer.Footer";const y=({children:e,className:a,ref:r,...o})=>t.jsx("header",{"data-spark-component":"drawer-header",ref:r,className:i.cx(["px-xl","py-lg"],a),...o,children:e});y.displayName="Dialog.Header";const D=({className:e,ref:a,...r})=>t.jsx(s.Overlay,{"data-spark-component":"drawer-overlay",ref:a,className:i.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"],e),...r});D.displayName="Drawer.Overlay";const h=({children:e,...a})=>t.jsx(s.Portal,{...a,children:e});h.displayName="Drawer.Portal";const N=({className:e,ref:a,...r})=>t.jsx(s.Title,{"data-spark-component":"drawer-title",ref:a,className:i.cx("text-headline-2 text-on-surface",e),...r});N.displayName="Drawer.Title";const b=e=>t.jsx(s.Trigger,{"data-spark-component":"drawer-trigger",...e});b.displayName="Drawer.Trigger";const C=Object.assign(z,{Trigger:b,Portal:h,Overlay:D,Content:x,Header:y,Body:u,Footer:g,CloseButton:w,Title:N,Description:f});C.displayName="Drawer";b.displayName="Drawer.Trigger";h.displayName="Drawer.Portal";D.displayName="Drawer.Overlay";x.displayName="Drawer.Content";y.displayName="Drawer.Header";u.displayName="Drawer.Body";g.displayName="Drawer.Footer";w.displayName="Drawer.CloseButton";N.displayName="Drawer.Title";f.displayName="Drawer.Description";exports.Drawer=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("@base-ui/react/dialog"),u=require("react"),B=require("@spark-ui/hooks/use-merge-refs"),S=require("@spark-ui/hooks/use-scroll-overflow"),s=require("class-variance-authority"),C=require("../useRenderSlot-DATwjgpo.js"),R=require("@spark-ui/icons/Close"),T=require("../Icon-CF0W0LKr.js"),q=require("../IconButton-D3g86WpZ.js"),j=u.createContext(null),P=({children:e,withFade:a=!1})=>r.jsx(j.Provider,{value:{withFade:a},children:e}),O=()=>{const e=u.useContext(j);if(!e)throw Error("useDrawer must be used within a Drawer provider");return e},z=({onOpenChange:e,withFade:a=!1,...t})=>{const o=e?(l,i)=>{e(l)}:void 0;return r.jsx(P,{withFade:a,children:r.jsx(n.Dialog.Root,{"data-spark-component":"drawer",onOpenChange:o,...t})})};z.displayName="Drawer.Root";const F=s.cva(["grow","overflow-y-auto","outline-hidden","focus-visible:u-outline"],{variants:{inset:{true:"",false:"px-xl py-lg"}},defaultVariants:{inset:!1}}),w=({children:e,inset:a=!1,className:t,ref:o,...l})=>{const i=u.useRef(null),c=B.useMergeRefs(o,i),{withFade:p}=O(),{overflow:m}=S.useScrollOverflow(i);return r.jsx("div",{"data-spark-component":"drawer-body",ref:c,className:F({inset:a,className:t}),style:{...p&&{maskImage:"linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",maskSize:`100% calc(100% + ${m.top?"0px":"44px"} + ${m.bottom?"0px":"44px"})`,maskPosition:`0 ${m.top?"0px":"-44px"}`}},...l,children:e})};w.displayName="Drawer.Body";const d=({asChild:e=!1,...a})=>{const t=C.useRenderSlot(e,"button");return r.jsx(n.Dialog.Close,{"data-spark-component":"drawer-close",render:t,...a})};d.displayName="Drawer.Close";const f=({"aria-label":e,className:a,size:t="md",intent:o="neutral",design:l="ghost",children:i=r.jsx(R.Close,{}),ref:c,...p})=>r.jsx(d,{"data-spark-component":"drawer-close-button",ref:c,className:s.cx(["absolute","top-sm","right-xl"],a),asChild:!0,...p,children:r.jsx(q.IconButton,{intent:o,size:t,design:l,"aria-label":e,children:r.jsx(T.Icon,{children:i})})});f.displayName="Drawer.CloseButton";const I=s.cva(["fixed z-modal flex flex-col bg-surface shadow-md","data-open:animation-duration-400 data-closed:animation-duration-200","data-nested-dialog-open:after:pointer-events-none","after:bg-transparent","after:transition-all","after:duration-200","data-nested-dialog-open:after:inset-0","data-nested-dialog-open:after:absolute","data-nested-dialog-open:after:rounded-[inherit]","data-nested-dialog-open:after:bg-overlay/dim-3"],{variants:{size:{sm:"",md:"",lg:"",fluid:"",fullscreen:"h-screen w-screen"},side:{right:["inset-y-0 right-0","data-open:animate-slide-in-right ","data-closed:animate-slide-out-right"],left:["inset-y-0 left-0","data-open:animate-slide-in-left","data-closed:animate-slide-out-left"],top:["top-0 left-0","w-screen","data-open:animate-slide-in-top","data-closed:animate-slide-out-top"],bottom:["bottom-0 left-0","w-screen","data-open:animate-slide-in-bottom","data-closed:animate-slide-out-bottom"]}},compoundVariants:[{side:["right","left"],size:"sm",class:["w-sz-480","max-w-full"]},{side:["right","left"],size:"md",class:["w-sz-672","max-w-full"]},{side:["right","left"],size:"lg",class:["w-sz-864","max-w-full"]},{side:["left","right"],size:"fluid",class:["w-auto","max-w-full"]},{side:["top","bottom"],size:"sm",class:["h-sz-480","max-h-full"]},{side:["top","bottom"],size:"md",class:["h-sz-672","max-h-full"]},{side:["top","bottom"],size:"lg",class:["h-sz-864","max-h-full"]},{side:["top","bottom"],size:"fluid",class:["h-auto","max-h-full"]}],defaultVariants:{side:"right",size:"md"}}),g=({className:e,size:a="md",side:t="right",ref:o,...l})=>r.jsx(n.Dialog.Popup,{ref:o,"data-spark-component":"drawer-content",role:"dialog",className:i=>s.cx(I({size:a,side:t,className:typeof e=="function"?e(i):e})),...l});g.displayName="Drawer.Content";const x=e=>r.jsx(n.Dialog.Description,{"data-spark-component":"drawer-description",...e});x.displayName="Drawer.Description";const D=({className:e,ref:a,...t})=>r.jsx("footer",{"data-spark-component":"drawer-footer",ref:a,className:s.cx(["px-xl","py-lg"],e),...t});D.displayName="Drawer.Footer";const y=({children:e,className:a,ref:t,...o})=>r.jsx("header",{"data-spark-component":"drawer-header",ref:t,className:s.cx(["px-xl","py-lg"],a),...o,children:e});y.displayName="Dialog.Header";const h=({className:e,...a})=>r.jsx(n.Dialog.Backdrop,{"data-spark-component":"drawer-overlay",className:t=>s.cx("z-overlay fixed top-0 left-0 h-screen w-screen","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(t):e),...a});h.displayName="Drawer.Overlay";const b=({className:e,...a})=>r.jsx(n.Dialog.Portal,{"data-spark-component":"drawer-portal",className:s.cx(e,"z-modal absolute"),...a});b.displayName="Drawer.Portal";const N=({className:e,...a})=>r.jsx(n.Dialog.Title,{"data-spark-component":"drawer-title",className:s.cx("text-headline-2 text-on-surface",e),...a});N.displayName="Drawer.Title";const v=({asChild:e=!1,...a})=>{const t=C.useRenderSlot(e,"button");return r.jsx(n.Dialog.Trigger,{"data-spark-component":"drawer-trigger",render:t,...a})};v.displayName="Drawer.Trigger";const k=Object.assign(z,{Trigger:v,Portal:b,Overlay:h,Content:g,Header:y,Body:w,Footer:D,Close:d,CloseButton:f,Title:N,Description:x});k.displayName="Drawer";v.displayName="Drawer.Trigger";b.displayName="Drawer.Portal";h.displayName="Drawer.Overlay";g.displayName="Drawer.Content";y.displayName="Drawer.Header";w.displayName="Drawer.Body";D.displayName="Drawer.Footer";d.displayName="Drawer.Close";f.displayName="Drawer.CloseButton";N.displayName="Drawer.Title";x.displayName="Drawer.Description";exports.Drawer=k;
 //# sourceMappingURL=index.js.map

package/dist/drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/drawer/DrawerContext.tsx","../../src/drawer/Drawer.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerContent.tsx","../../src/drawer/DrawerDescription.tsx","../../src/drawer/DrawerFooter.tsx","../../src/drawer/DrawerHeader.tsx","../../src/drawer/DrawerOverlay.tsx","../../src/drawer/DrawerPortal.tsx","../../src/drawer/DrawerTitle.tsx","../../src/drawer/DrawerTrigger.tsx","../../src/drawer/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react'\n\nexport interface DrawerContextState {\n  withFade: boolean\n}\n\nconst DrawerContext = createContext<DrawerContextState | null>(null)\n\nexport const DrawerProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  return (\n    <DrawerContext.Provider\n      value={{\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DrawerContext.Provider>\n  )\n}\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext)\n\n  if (!context) {\n    throw Error('useDrawer must be used within a Drawer provider')\n  }\n\n  return context\n}\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, ReactNode } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps {\n  /**\n   * Children of the component.\n   */\n  children?: RadixDrawer.DialogProps['children']\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: RadixDrawer.DialogProps['open']\n  /**\n   * Default open state.\n   */\n  defaultOpen?: RadixDrawer.DialogProps['defaultOpen']\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: RadixDrawer.DialogProps['onOpenChange']\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: RadixDrawer.DialogProps['modal']\n  /**\n   * Specifies if the drawer should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n}\n\nexport interface DialogProps {\n  children?: ReactNode\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?(open: boolean): void\n  modal?: boolean\n}\n\nexport const Drawer = ({ children, withFade = false, ...rest }: DrawerProps): ReactElement => (\n  <DrawerProvider withFade={withFade}>\n    <RadixDrawer.Root {...rest}>{children}</RadixDrawer.Root>\n  </DrawerProvider>\n)\n\nDrawer.displayName = 'Drawer.Root'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerBodyStyles = cva(\n  ['grow', 'overflow-y-auto', 'outline-hidden', 'focus-visible:u-outline'],\n  {\n    variants: {\n      inset: {\n        true: '',\n        false: 'px-xl py-lg',\n      },\n    },\n    defaultVariants: {\n      inset: false,\n    },\n  }\n)\n\nexport type DrawerBodyStylesProps = VariantProps<typeof drawerBodyStyles>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { type ReactNode, Ref, useRef } from 'react'\n\nimport { drawerBodyStyles, type DrawerBodyStylesProps } from './DrawerBody.styles'\nimport { useDrawer } from './DrawerContext'\n\nexport interface DrawerBodyProps extends DrawerBodyStylesProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerBody = ({\n  children,\n  inset = false,\n  className,\n  ref: forwardedRef,\n  ...rest\n}: DrawerBodyProps) => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDrawer()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"drawer-body\"\n      ref={ref}\n      className={drawerBodyStyles({ inset, className })}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nDrawerBody.displayName = 'Drawer.Body'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerCloseProps = RadixDrawer.DialogCloseProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerClose = (props: DrawerCloseProps) => (\n  <RadixDrawer.Close data-spark-component=\"drawer-close\" {...props} />\n)\n\nDrawerClose.displayName = 'Drawer.Close'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { DrawerClose, type DrawerCloseProps } from './DrawerClose'\n\nexport type DrawerCloseButtonProps = DrawerCloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nexport const DrawerCloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: DrawerCloseButtonProps) => (\n  <DrawerClose\n    data-spark-component=\"drawer-close-button\"\n    ref={ref}\n    className={cx(['absolute', 'top-sm', 'right-xl'], className)}\n    asChild\n    {...rest}\n  >\n    <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n      <Icon>{children}</Icon>\n    </IconButton>\n  </DrawerClose>\n)\n\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    'fixed z-modal flex flex-col bg-surface shadow-md',\n    'data-[state=open]:animation-duration-400 data-[state=closed]:animation-duration-200',\n  ],\n  {\n    variants: {\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n        fluid: '',\n        fullscreen: 'h-screen w-screen',\n      },\n      side: {\n        right: [\n          'inset-y-0 right-0',\n          'data-[state=open]:animate-slide-in-right ',\n          'data-[state=closed]:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-[state=open]:animate-slide-in-left',\n          'data-[state=closed]:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-[state=open]:animate-slide-in-top',\n          'data-[state=closed]:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-[state=open]:animate-slide-in-bottom',\n          'data-[state=closed]:animate-slide-out-bottom',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        side: ['right', 'left'],\n        size: 'sm',\n        class: ['w-sz-480', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'md',\n        class: ['w-sz-672', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'lg',\n        class: ['w-sz-864', 'max-w-full'],\n      },\n      {\n        side: ['left', 'right'],\n        size: 'fluid',\n        class: ['w-auto', 'max-w-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'sm',\n        class: ['h-sz-480', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'md',\n        class: ['h-sz-672', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'lg',\n        class: ['h-sz-864', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'fluid',\n        class: ['h-auto', 'max-h-full'],\n      },\n    ],\n    defaultVariants: {\n      side: 'right',\n      size: 'md',\n    },\n  }\n)\n\nexport type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport type DrawerContentProps = RadixDrawer.DialogContentProps &\n  DrawerContentStylesProps & {\n    ref?: Ref<HTMLDivElement>\n  }\n\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  onInteractOutside,\n  ref,\n  ...rest\n}: DrawerContentProps) => (\n  <RadixDrawer.Content\n    data-spark-component=\"drawer-content\"\n    ref={ref}\n    className={drawerContentStyles({\n      size,\n      side,\n      className,\n    })}\n    onInteractOutside={e => {\n      const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n      /**\n       * The focus trap of the drawer applies `pointer-events-none` on the body of the page in the background, but\n       * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n       *\n       * Clicking on the snackbar will be considered as an \"outside click\" and close the drawer. We want to prevent this.\n       */\n      if (isForegroundElement) {\n        e.preventDefault()\n      }\n\n      onInteractOutside?.(e)\n    }}\n    {...rest}\n  />\n)\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerDescriptionProps = RadixDrawer.DialogDescriptionProps & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const DrawerDescription = (props: DrawerDescriptionProps) => (\n  <RadixDrawer.Description data-spark-component=\"drawer-description\" {...props} />\n)\n\nDrawerDescription.displayName = 'Drawer.Description'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type ReactElement, Ref } from 'react'\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerFooter = ({ className, ref, ...rest }: DrawerFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"drawer-footer\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  />\n)\n\nDrawerFooter.displayName = 'Drawer.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface DrawerHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: DrawerHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"drawer-header\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nDrawerHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport type DrawerOverlayProps = RadixDrawer.DialogOverlayProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerOverlay = ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement => (\n  <RadixDrawer.Overlay\n    data-spark-component=\"drawer-overlay\"\n    ref={ref}\n    className={cx(\n      ['fixed', 'top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n      ['bg-overlay/dim-1'],\n      ['data-[state=open]:animate-fade-in'],\n      ['data-[state=closed]:animate-fade-out'],\n      className\n    )}\n    {...rest}\n  />\n)\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type DrawerPortalProps = RadixDrawer.DialogPortalProps\n\nexport const DrawerPortal = ({ children, ...rest }: DrawerPortalProps): ReactElement => (\n  <RadixDrawer.Portal {...rest}>{children}</RadixDrawer.Portal>\n)\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerTitleProps = RadixDrawer.DialogTitleProps & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const DrawerTitle = ({ className, ref, ...others }: DrawerTitleProps) => (\n  <RadixDrawer.Title\n    data-spark-component=\"drawer-title\"\n    ref={ref}\n    className={cx('text-headline-2 text-on-surface', className)}\n    {...others}\n  />\n)\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport interface DrawerTriggerProps extends RadixDrawer.DialogTriggerProps {\n  /**\n   * 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.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerTrigger = (props: DrawerTriggerProps): ReactElement => (\n  <RadixDrawer.Trigger data-spark-component=\"drawer-trigger\" {...props} />\n)\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerCloseButton } from './DrawerCloseButton'\nimport { DrawerContent } from './DrawerContent'\nimport { DrawerDescription } from './DrawerDescription' // aria-describedby\nimport { DrawerFooter } from './DrawerFooter'\nimport { DrawerHeader } from './DrawerHeader'\nimport { DrawerOverlay } from './DrawerOverlay'\nimport { DrawerPortal } from './DrawerPortal'\nimport { DrawerTitle } from './DrawerTitle'\nimport { DrawerTrigger } from './DrawerTrigger'\n\nexport const Drawer: typeof Root & {\n  Trigger: typeof DrawerTrigger\n  Portal: typeof DrawerPortal\n  Overlay: typeof DrawerOverlay\n  Content: typeof DrawerContent\n  Header: typeof DrawerHeader\n  Body: typeof DrawerBody\n  Footer: typeof DrawerFooter\n  CloseButton: typeof DrawerCloseButton\n  Title: typeof DrawerTitle\n  Description: typeof DrawerDescription\n} = Object.assign(Root, {\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Overlay: DrawerOverlay,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  CloseButton: DrawerCloseButton,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n})\n\nDrawer.displayName = 'Drawer'\nDrawerTrigger.displayName = 'Drawer.Trigger'\nDrawerPortal.displayName = 'Drawer.Portal'\nDrawerOverlay.displayName = 'Drawer.Overlay'\nDrawerContent.displayName = 'Drawer.Content'\nDrawerHeader.displayName = 'Drawer.Header'\nDrawerBody.displayName = 'Drawer.Body'\nDrawerFooter.displayName = 'Drawer.Footer'\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\nDrawerTitle.displayName = 'Drawer.Title'\nDrawerDescription.displayName = 'Drawer.Description'\n\nexport { type DrawerProps } from './Drawer'\nexport { type DrawerContentProps } from './DrawerContent'\nexport { type DrawerHeaderProps } from './DrawerHeader'\nexport { type DrawerBodyProps } from './DrawerBody'\nexport { type DrawerFooterProps } from './DrawerFooter'\nexport { type DrawerTriggerProps } from './DrawerTrigger'\nexport { type DrawerOverlayProps } from './DrawerOverlay'\nexport { type DrawerPortalProps } from './DrawerPortal'\nexport { type DrawerTitleProps } from './DrawerTitle'\nexport { type DrawerDescriptionProps } from './DrawerDescription'\nexport { type DrawerCloseProps } from './DrawerClose'\nexport { type DrawerCloseButtonProps } from './DrawerCloseButton'\n"],"names":["DrawerContext","createContext","DrawerProvider","childrenProp","withFade","jsx","useDrawer","context","useContext","Drawer","children","rest","RadixDrawer.Root","drawerBodyStyles","cva","DrawerBody","inset","className","forwardedRef","scrollAreaRef","useRef","ref","useMergeRefs","overflow","useScrollOverflow","DrawerClose","props","RadixDrawer.Close","DrawerCloseButton","ariaLabel","size","intent","design","CloseSVG","cx","IconButton","Icon","drawerContentStyles","DrawerContent","side","onInteractOutside","RadixDrawer.Content","e","DrawerDescription","RadixDrawer.Description","DrawerFooter","DrawerHeader","DrawerOverlay","RadixDrawer.Overlay","DrawerPortal","RadixDrawer.Portal","DrawerTitle","others","RadixDrawer.Title","DrawerTrigger","RadixDrawer.Trigger","Root"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/drawer/DrawerContext.tsx","../../src/drawer/Drawer.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerContent.tsx","../../src/drawer/DrawerDescription.tsx","../../src/drawer/DrawerFooter.tsx","../../src/drawer/DrawerHeader.tsx","../../src/drawer/DrawerOverlay.tsx","../../src/drawer/DrawerPortal.tsx","../../src/drawer/DrawerTitle.tsx","../../src/drawer/DrawerTrigger.tsx","../../src/drawer/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react'\n\nexport interface DrawerContextState {\n  withFade: boolean\n}\n\nconst DrawerContext = createContext<DrawerContextState | null>(null)\n\nexport const DrawerProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  return (\n    <DrawerContext.Provider\n      value={{\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DrawerContext.Provider>\n  )\n}\n\nexport const useDrawer = () => {\n  const context = useContext(DrawerContext)\n\n  if (!context) {\n    throw Error('useDrawer must be used within a Drawer provider')\n  }\n\n  return context\n}\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps\n  extends Omit<ComponentProps<typeof BaseDialog.Root>, 'onOpenChange' | 'render'> {\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: boolean\n  /**\n   * Default open state.\n   */\n  defaultOpen?: boolean\n  /**\n   * Handler executed on every dialog open state change.\n   */\n  onOpenChange?: (open: boolean) => void\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: boolean\n  /**\n   * Specifies if the drawer should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const Drawer = ({ onOpenChange, withFade = false, ...props }: DrawerProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DrawerProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"drawer\" onOpenChange={handleOpenChange} {...props} />\n    </DrawerProvider>\n  )\n}\n\nDrawer.displayName = 'Drawer.Root'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerBodyStyles = cva(\n  ['grow', 'overflow-y-auto', 'outline-hidden', 'focus-visible:u-outline'],\n  {\n    variants: {\n      inset: {\n        true: '',\n        false: 'px-xl py-lg',\n      },\n    },\n    defaultVariants: {\n      inset: false,\n    },\n  }\n)\n\nexport type DrawerBodyStylesProps = VariantProps<typeof drawerBodyStyles>\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { type ReactNode, Ref, useRef } from 'react'\n\nimport { drawerBodyStyles, type DrawerBodyStylesProps } from './DrawerBody.styles'\nimport { useDrawer } from './DrawerContext'\n\nexport interface DrawerBodyProps extends DrawerBodyStylesProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerBody = ({\n  children,\n  inset = false,\n  className,\n  ref: forwardedRef,\n  ...rest\n}: DrawerBodyProps) => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDrawer()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"drawer-body\"\n      ref={ref}\n      className={drawerBodyStyles({ inset, className })}\n      style={{\n        ...(withFade && {\n          maskImage:\n            'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n          maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n          maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n        }),\n      }}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nDrawerBody.displayName = 'Drawer.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerCloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerClose = ({ asChild = false, ...props }: DrawerCloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"drawer-close\" render={renderSlot} {...props} />\n}\n\nDrawerClose.displayName = 'Drawer.Close'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { DrawerClose, type DrawerCloseProps } from './DrawerClose'\n\nexport type DrawerCloseButtonProps = DrawerCloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nexport const DrawerCloseButton = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: DrawerCloseButtonProps) => (\n  <DrawerClose\n    data-spark-component=\"drawer-close-button\"\n    ref={ref}\n    className={cx(['absolute', 'top-sm', 'right-xl'], className)}\n    asChild\n    {...rest}\n  >\n    <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n      <Icon>{children}</Icon>\n    </IconButton>\n  </DrawerClose>\n)\n\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n  [\n    'fixed z-modal flex flex-col bg-surface shadow-md',\n    // Base UI uses data-open and data-closed for transitions\n    'data-open:animation-duration-400 data-closed:animation-duration-200',\n    // Nested dialog effect\n    'data-nested-dialog-open:after:pointer-events-none',\n    'after:bg-transparent',\n    'after:transition-all',\n    'after:duration-200',\n    'data-nested-dialog-open:after:inset-0',\n    'data-nested-dialog-open:after:absolute',\n    'data-nested-dialog-open:after:rounded-[inherit]',\n    'data-nested-dialog-open:after:bg-overlay/dim-3',\n  ],\n  {\n    variants: {\n      size: {\n        sm: '',\n        md: '',\n        lg: '',\n        fluid: '',\n        fullscreen: 'h-screen w-screen',\n      },\n      side: {\n        right: [\n          'inset-y-0 right-0',\n          'data-open:animate-slide-in-right ',\n          'data-closed:animate-slide-out-right',\n        ],\n        left: [\n          'inset-y-0 left-0',\n          'data-open:animate-slide-in-left',\n          'data-closed:animate-slide-out-left',\n        ],\n        top: [\n          'top-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-top',\n          'data-closed:animate-slide-out-top',\n        ],\n        bottom: [\n          'bottom-0 left-0',\n          'w-screen',\n          'data-open:animate-slide-in-bottom',\n          'data-closed:animate-slide-out-bottom',\n        ],\n      },\n    },\n    compoundVariants: [\n      {\n        side: ['right', 'left'],\n        size: 'sm',\n        class: ['w-sz-480', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'md',\n        class: ['w-sz-672', 'max-w-full'],\n      },\n      {\n        side: ['right', 'left'],\n        size: 'lg',\n        class: ['w-sz-864', 'max-w-full'],\n      },\n      {\n        side: ['left', 'right'],\n        size: 'fluid',\n        class: ['w-auto', 'max-w-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'sm',\n        class: ['h-sz-480', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'md',\n        class: ['h-sz-672', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'lg',\n        class: ['h-sz-864', 'max-h-full'],\n      },\n      {\n        side: ['top', 'bottom'],\n        size: 'fluid',\n        class: ['h-auto', 'max-h-full'],\n      },\n    ],\n    defaultVariants: {\n      side: 'right',\n      size: 'md',\n    },\n  }\n)\n\nexport type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport interface DrawerContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>,\n    DrawerContentStylesProps {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerContent = ({\n  className,\n  size = 'md',\n  side = 'right',\n  ref,\n  ...rest\n}: DrawerContentProps) => {\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"drawer-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          drawerContentStyles({\n            size,\n            side,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerDescriptionProps\n  extends Omit<ComponentProps<typeof BaseDialog.Description>, 'render'> {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const DrawerDescription = (props: DrawerDescriptionProps) => {\n  return <BaseDialog.Description data-spark-component=\"drawer-description\" {...props} />\n}\n\nDrawerDescription.displayName = 'Drawer.Description'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type ReactElement, Ref } from 'react'\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerFooter = ({ className, ref, ...rest }: DrawerFooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"drawer-footer\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  />\n)\n\nDrawerFooter.displayName = 'Drawer.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface DrawerHeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerHeader = ({\n  children,\n  className,\n  ref,\n  ...rest\n}: DrawerHeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"drawer-header\"\n    ref={ref}\n    className={cx(['px-xl', 'py-lg'], className)}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nDrawerHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerOverlayProps\n  extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerOverlay = ({ className, ...props }: DrawerOverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"drawer-overlay\"\n      className={state =>\n        cx(\n          'z-overlay fixed top-0 left-0 h-screen w-screen',\n          'bg-overlay/dim-1',\n          // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n          'data-starting-style:animate-fade-in',\n          'data-ending-style:animate-fade-out',\n          typeof className === 'function' ? className(state) : className\n        )\n      }\n      {...props}\n    />\n  )\n}\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type DrawerPortalProps = ComponentProps<typeof BaseDialog.Portal>\n\nexport const DrawerPortal = ({ className, ...props }: DrawerPortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"drawer-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerTitleProps extends Omit<ComponentProps<typeof BaseDialog.Title>, 'render'> {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"drawer-title\"\n      className={cx('text-headline-2 text-on-surface', className)}\n      {...props}\n    />\n  )\n}\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerTriggerProps\n  extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerTrigger = ({ asChild = false, ...props }: DrawerTriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"drawer-trigger\" render={renderSlot} {...props} />\n}\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerClose } from './DrawerClose'\nimport { DrawerCloseButton } from './DrawerCloseButton'\nimport { DrawerContent } from './DrawerContent'\nimport { DrawerDescription } from './DrawerDescription' // aria-describedby\nimport { DrawerFooter } from './DrawerFooter'\nimport { DrawerHeader } from './DrawerHeader'\nimport { DrawerOverlay } from './DrawerOverlay'\nimport { DrawerPortal } from './DrawerPortal'\nimport { DrawerTitle } from './DrawerTitle'\nimport { DrawerTrigger } from './DrawerTrigger'\n\nexport const Drawer: typeof Root & {\n  Trigger: typeof DrawerTrigger\n  Portal: typeof DrawerPortal\n  Overlay: typeof DrawerOverlay\n  Content: typeof DrawerContent\n  Header: typeof DrawerHeader\n  Body: typeof DrawerBody\n  Footer: typeof DrawerFooter\n  Close: typeof DrawerClose\n  CloseButton: typeof DrawerCloseButton\n  Title: typeof DrawerTitle\n  Description: typeof DrawerDescription\n} = Object.assign(Root, {\n  Trigger: DrawerTrigger,\n  Portal: DrawerPortal,\n  Overlay: DrawerOverlay,\n  Content: DrawerContent,\n  Header: DrawerHeader,\n  Body: DrawerBody,\n  Footer: DrawerFooter,\n  Close: DrawerClose,\n  CloseButton: DrawerCloseButton,\n  Title: DrawerTitle,\n  Description: DrawerDescription,\n})\n\nDrawer.displayName = 'Drawer'\nDrawerTrigger.displayName = 'Drawer.Trigger'\nDrawerPortal.displayName = 'Drawer.Portal'\nDrawerOverlay.displayName = 'Drawer.Overlay'\nDrawerContent.displayName = 'Drawer.Content'\nDrawerHeader.displayName = 'Drawer.Header'\nDrawerBody.displayName = 'Drawer.Body'\nDrawerFooter.displayName = 'Drawer.Footer'\nDrawerClose.displayName = 'Drawer.Close'\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\nDrawerTitle.displayName = 'Drawer.Title'\nDrawerDescription.displayName = 'Drawer.Description'\n\nexport { type DrawerProps } from './Drawer'\nexport { type DrawerContentProps } from './DrawerContent'\nexport { type DrawerHeaderProps } from './DrawerHeader'\nexport { type DrawerBodyProps } from './DrawerBody'\nexport { type DrawerFooterProps } from './DrawerFooter'\nexport { type DrawerTriggerProps } from './DrawerTrigger'\nexport { type DrawerOverlayProps } from './DrawerOverlay'\nexport { type DrawerPortalProps } from './DrawerPortal'\nexport { type DrawerTitleProps } from './DrawerTitle'\nexport { type DrawerDescriptionProps } from './DrawerDescription'\nexport { type DrawerCloseProps } from './DrawerClose'\nexport { type DrawerCloseButtonProps } from './DrawerCloseButton'\n"],"names":["DrawerContext","createContext","DrawerProvider","childrenProp","withFade","jsx","useDrawer","context","useContext","Drawer","onOpenChange","props","handleOpenChange","open","_eventDetails","BaseDialog","drawerBodyStyles","cva","DrawerBody","children","inset","className","forwardedRef","rest","scrollAreaRef","useRef","ref","useMergeRefs","overflow","useScrollOverflow","DrawerClose","asChild","renderSlot","useRenderSlot","DrawerCloseButton","ariaLabel","size","intent","design","CloseSVG","cx","IconButton","Icon","drawerContentStyles","DrawerContent","side","state","DrawerDescription","DrawerFooter","DrawerHeader","DrawerOverlay","DrawerPortal","DrawerTitle","DrawerTrigger","Root"],"mappings":"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"}

package/dist/drawer/index.mjs

@@ -1,31 +1,37 @@
 import { jsx as t } from "react/jsx-runtime";
-import { createContext as C, useContext as k, useRef as T } from "react";
-import { R as B, C as O, a as P, D as F, O as I, P as R, T as $, b as H } from "../index-CYjGhVvU.mjs";
-import { useMergeRefs as S } from "@spark-ui/hooks/use-merge-refs";
-import { useScrollOverflow as E } from "@spark-ui/hooks/use-scroll-overflow";
-import { c as N, a as n } from "../index-BmAFn37q.mjs";
-import { Close as V } from "@spark-ui/icons/Close";
-import { I as j } from "../Icon-D1RueiPY.mjs";
-import { I as A } from "../IconButton-BY3gYXtU.mjs";
-const b = C(null), M = ({
+import { Dialog as s } from "@base-ui/react/dialog";
+import { createContext as B, useContext as T, useRef as P } from "react";
+import { useMergeRefs as O } from "@spark-ui/hooks/use-merge-refs";
+import { useScrollOverflow as S } from "@spark-ui/hooks/use-scroll-overflow";
+import { cva as v, cx as i } from "class-variance-authority";
+import { u as z } from "../useRenderSlot-LwWj8QbC.mjs";
+import { Close as R } from "@spark-ui/icons/Close";
+import { I as F } from "../Icon-Ck-dhfLd.mjs";
+import { I } from "../IconButton-C62-axzv.mjs";
+const C = B(null), H = ({
   children: e,
   withFade: a = !1
 }) => /* @__PURE__ */ t(
-  b.Provider,
+  C.Provider,
   {
     value: {
       withFade: a
     },
     children: e
   }
-), q = () => {
-  const e = k(b);
+), $ = () => {
+  const e = T(C);
   if (!e)
     throw Error("useDrawer must be used within a Drawer provider");
   return e;
-}, v = ({ children: e, withFade: a = !1, ...r }) => /* @__PURE__ */ t(M, { withFade: a, children: /* @__PURE__ */ t(B, { ...r, children: e }) });
-v.displayName = "Drawer.Root";
-const G = N(
+}, k = ({ onOpenChange: e, withFade: a = !1, ...r }) => {
+  const o = e ? (l, n) => {
+    e(l);
+  } : void 0;
+  return /* @__PURE__ */ t(H, { withFade: a, children: /* @__PURE__ */ t(s.Root, { "data-spark-component": "drawer", onOpenChange: o, ...r }) });
+};
+k.displayName = "Drawer.Root";
+const V = v(
   ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
   {
     variants: {
@@ -38,60 +44,73 @@ const G = N(
       inset: !1
     }
   }
-), c = ({
+), w = ({
   children: e,
   inset: a = !1,
   className: r,
-  ref: s,
-  ...i
+  ref: o,
+  ...l
 }) => {
-  const l = T(null), o = S(s, l), { withFade: d } = q(), { overflow: m } = E(l);
+  const n = P(null), m = O(o, n), { withFade: p } = $(), { overflow: c } = S(n);
   return /* @__PURE__ */ t(
     "div",
     {
       "data-spark-component": "drawer-body",
-      ref: o,
-      className: G({ inset: a, className: r }),
+      ref: m,
+      className: V({ inset: a, className: r }),
       style: {
-        ...d && {
+        ...p && {
           maskImage: "linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))",
-          maskSize: `100% calc(100% + ${m.top ? "0px" : "44px"} + ${m.bottom ? "0px" : "44px"})`,
-          maskPosition: `0 ${m.top ? "0px" : "-44px"}`
+          maskSize: `100% calc(100% + ${c.top ? "0px" : "44px"} + ${c.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${c.top ? "0px" : "-44px"}`
         }
       },
-      ...i,
+      ...l,
       children: e
     }
   );
 };
-c.displayName = "Drawer.Body";
-const z = (e) => /* @__PURE__ */ t(O, { "data-spark-component": "drawer-close", ...e });
-z.displayName = "Drawer.Close";
-const p = ({
+w.displayName = "Drawer.Body";
+const d = ({ asChild: e = !1, ...a }) => {
+  const r = z(e, "button");
+  return /* @__PURE__ */ t(s.Close, { "data-spark-component": "drawer-close", render: r, ...a });
+};
+d.displayName = "Drawer.Close";
+const f = ({
   "aria-label": e,
   className: a,
   size: r = "md",
-  intent: s = "neutral",
-  design: i = "ghost",
-  children: l = /* @__PURE__ */ t(V, {}),
-  ref: o,
-  ...d
+  intent: o = "neutral",
+  design: l = "ghost",
+  children: n = /* @__PURE__ */ t(R, {}),
+  ref: m,
+  ...p
 }) => /* @__PURE__ */ t(
-  z,
+  d,
   {
     "data-spark-component": "drawer-close-button",
-    ref: o,
-    className: n(["absolute", "top-sm", "right-xl"], a),
+    ref: m,
+    className: i(["absolute", "top-sm", "right-xl"], a),
     asChild: !0,
-    ...d,
-    children: /* @__PURE__ */ t(A, { intent: s, size: r, design: i, "aria-label": e, children: /* @__PURE__ */ t(j, { children: l }) })
+    ...p,
+    children: /* @__PURE__ */ t(I, { intent: o, size: r, design: l, "aria-label": e, children: /* @__PURE__ */ t(F, { children: n }) })
   }
 );
-p.displayName = "Drawer.CloseButton";
-const J = N(
+f.displayName = "Drawer.CloseButton";
+const j = v(
   [
     "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",
+    // Nested dialog effect
+    "data-nested-dialog-open:after:pointer-events-none",
+    "after:bg-transparent",
+    "after:transition-all",
+    "after:duration-200",
+    "data-nested-dialog-open:after:inset-0",
+    "data-nested-dialog-open:after:absolute",
+    "data-nested-dialog-open:after:rounded-[inherit]",
+    "data-nested-dialog-open:after:bg-overlay/dim-3"
   ],
   {
     variants: {
@@ -105,25 +124,25 @@ const J = N(
       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"
         ]
       }
     },
@@ -174,112 +193,122 @@ const J = N(
       size: "md"
     }
   }
-), w = ({
+), u = ({
   className: e,
   size: a = "md",
   side: r = "right",
-  onInteractOutside: s,
-  ref: i,
+  ref: o,
   ...l
 }) => /* @__PURE__ */ t(
-  P,
+  s.Popup,
   {
+    ref: o,
     "data-spark-component": "drawer-content",
-    ref: i,
-    className: J({
-      size: a,
-      side: r,
-      className: e
-    }),
-    onInteractOutside: (o) => {
-      o.target.closest(".z-toast, .z-popover") && o.preventDefault(), s?.(o);
-    },
+    role: "dialog",
+    className: (n) => i(
+      j({
+        size: a,
+        side: r,
+        className: typeof e == "function" ? e(n) : e
+      })
+    ),
     ...l
   }
 );
-w.displayName = "Drawer.Content";
-const f = (e) => /* @__PURE__ */ t(F, { "data-spark-component": "drawer-description", ...e });
-f.displayName = "Drawer.Description";
-const u = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
+u.displayName = "Drawer.Content";
+const g = (e) => /* @__PURE__ */ t(s.Description, { "data-spark-component": "drawer-description", ...e });
+g.displayName = "Drawer.Description";
+const y = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
   "footer",
   {
     "data-spark-component": "drawer-footer",
     ref: a,
-    className: n(["px-xl", "py-lg"], e),
+    className: i(["px-xl", "py-lg"], e),
     ...r
   }
 );
-u.displayName = "Drawer.Footer";
+y.displayName = "Drawer.Footer";
 const D = ({
   children: e,
   className: a,
   ref: r,
-  ...s
+  ...o
 }) => /* @__PURE__ */ t(
   "header",
   {
     "data-spark-component": "drawer-header",
     ref: r,
-    className: n(["px-xl", "py-lg"], a),
-    ...s,
+    className: i(["px-xl", "py-lg"], a),
+    ...o,
     children: e
   }
 );
 D.displayName = "Dialog.Header";
-const y = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
-  I,
+const h = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  s.Backdrop,
   {
     "data-spark-component": "drawer-overlay",
-    ref: a,
-    className: n(
-      ["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"],
-      e
+    className: (r) => i(
+      "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 e == "function" ? e(r) : e
     ),
-    ...r
+    ...a
   }
 );
-y.displayName = "Drawer.Overlay";
-const g = ({ children: e, ...a }) => /* @__PURE__ */ t(R, { ...a, children: e });
-g.displayName = "Drawer.Portal";
-const h = ({ className: e, ref: a, ...r }) => /* @__PURE__ */ t(
-  $,
+h.displayName = "Drawer.Overlay";
+const x = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  s.Portal,
+  {
+    "data-spark-component": "drawer-portal",
+    className: i(e, "z-modal absolute"),
+    ...a
+  }
+);
+x.displayName = "Drawer.Portal";
+const b = ({ className: e, ...a }) => /* @__PURE__ */ t(
+  s.Title,
   {
     "data-spark-component": "drawer-title",
-    ref: a,
-    className: n("text-headline-2 text-on-surface", e),
-    ...r
+    className: i("text-headline-2 text-on-surface", e),
+    ...a
   }
 );
-h.displayName = "Drawer.Title";
-const x = (e) => /* @__PURE__ */ t(H, { "data-spark-component": "drawer-trigger", ...e });
-x.displayName = "Drawer.Trigger";
-const K = Object.assign(v, {
-  Trigger: x,
-  Portal: g,
-  Overlay: y,
-  Content: w,
+b.displayName = "Drawer.Title";
+const N = ({ asChild: e = !1, ...a }) => {
+  const r = z(e, "button");
+  return /* @__PURE__ */ t(s.Trigger, { "data-spark-component": "drawer-trigger", render: r, ...a });
+};
+N.displayName = "Drawer.Trigger";
+const A = Object.assign(k, {
+  Trigger: N,
+  Portal: x,
+  Overlay: h,
+  Content: u,
   Header: D,
-  Body: c,
-  Footer: u,
-  CloseButton: p,
-  Title: h,
-  Description: f
+  Body: w,
+  Footer: y,
+  Close: d,
+  CloseButton: f,
+  Title: b,
+  Description: g
 });
-K.displayName = "Drawer";
-x.displayName = "Drawer.Trigger";
-g.displayName = "Drawer.Portal";
-y.displayName = "Drawer.Overlay";
-w.displayName = "Drawer.Content";
+A.displayName = "Drawer";
+N.displayName = "Drawer.Trigger";
+x.displayName = "Drawer.Portal";
+h.displayName = "Drawer.Overlay";
+u.displayName = "Drawer.Content";
 D.displayName = "Drawer.Header";
-c.displayName = "Drawer.Body";
-u.displayName = "Drawer.Footer";
-p.displayName = "Drawer.CloseButton";
-h.displayName = "Drawer.Title";
-f.displayName = "Drawer.Description";
+w.displayName = "Drawer.Body";
+y.displayName = "Drawer.Footer";
+d.displayName = "Drawer.Close";
+f.displayName = "Drawer.CloseButton";
+b.displayName = "Drawer.Title";
+g.displayName = "Drawer.Description";
 export {
-  K as Drawer
+  A as Drawer
 };
 //# sourceMappingURL=index.mjs.map