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

package/dist/dialog/DialogTrigger.d.ts

@@ -1,17 +1,13 @@
-import { Dialog as RadixDialog } from 'radix-ui';
-import { ReactElement, ReactNode, Ref } from 'react';
-export interface TriggerProps {
-    /**
-     * Children of the component.
-     */
-    children?: ReactNode;
+import { Dialog as BaseDialog } from '@base-ui/react/dialog';
+import { ComponentProps, Ref } from 'react';
+export interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {
     /**
      * Change the component to the HTML tag or custom component of the only child.
      */
-    asChild?: RadixDialog.DialogTriggerProps['asChild'];
+    asChild?: boolean;
     ref?: Ref<HTMLButtonElement>;
 }
 export declare const Trigger: {
-    (props: TriggerProps): ReactElement;
+    ({ asChild, ...props }: TriggerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/dialog/index.d.mts

@@ -0,0 +1,37 @@
+import { Dialog as Root } from './Dialog';
+import { Body } from './DialogBody';
+import { Close } from './DialogClose';
+import { CloseButton } from './DialogCloseButton';
+import { Content } from './DialogContent';
+import { Description } from './DialogDescription';
+import { Footer } from './DialogFooter';
+import { Header } from './DialogHeader';
+import { Overlay } from './DialogOverlay';
+import { Portal } from './DialogPortal';
+import { Title } from './DialogTitle';
+import { Trigger } from './DialogTrigger';
+export declare const Dialog: typeof Root & {
+    Trigger: typeof Trigger;
+    Portal: typeof Portal;
+    Overlay: typeof Overlay;
+    Content: typeof Content;
+    Header: typeof Header;
+    Body: typeof Body;
+    Footer: typeof Footer;
+    Close: typeof Close;
+    CloseButton: typeof CloseButton;
+    Title: typeof Title;
+    Description: typeof Description;
+};
+export { type DialogProps } from './Dialog';
+export { type ContentProps as DialogContentProps } from './DialogContent';
+export { type HeaderProps as DialogHeaderProps } from './DialogHeader';
+export { type BodyProps as DialogBodyProps } from './DialogBody';
+export { type FooterProps as DialogFooterProps } from './DialogFooter';
+export { type TriggerProps as DialogTriggerProps } from './DialogTrigger';
+export { type OverlayProps as DialogOverlayProps } from './DialogOverlay';
+export { type PortalProps as DialogPortalProps } from './DialogPortal';
+export { type TitleProps as DialogTitleProps } from './DialogTitle';
+export { type DescriptionProps as DialogDescriptionProps } from './DialogDescription';
+export { type CloseProps as DialogCloseProps } from './DialogClose';
+export { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton';

package/dist/dialog/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),d=require("react"),r=require("../index-C-J_tHdS.js"),S=require("@spark-ui/hooks/use-merge-refs"),q=require("@spark-ui/hooks/use-scroll-overflow"),g=require("../index-DnaHaH_0.js"),E=require("@spark-ui/icons/Close"),O=require("../Icon-Bf0XrmiR.js"),w=require("../IconButton-Bf-EDzpI.js"),B=require("../DialogContent.styles-BrhKaHc_.js"),T=d.createContext(null),I=({children:e,withFade:o=!1})=>{const[t,a]=d.useState(!1);return s.jsx(T.Provider,{value:{isFullScreen:t,setIsFullScreen:a,withFade:o},children:e})},p=()=>{const e=d.useContext(T);if(!e)throw Error("useDialog must be used within a Dialog provider");return e},k=({children:e,withFade:o=!1,...t})=>{const a=t.open,l=d.useRef(null);function n(){a&&document.activeElement&&(l.current=document.activeElement),a||setTimeout(()=>{l.current instanceof HTMLElement&&l.current.focus()},0)}return d.useEffect(n,[a]),s.jsx(I,{withFade:o,children:s.jsx(r.Root,{...t,children:e})})};k.displayName="Dialog.Root";const m=({children:e,className:o,inset:t=!1,ref:a,...l})=>{const n=d.useRef(null),u=S.useMergeRefs(a,n),{withFade:i}=p(),{overflow:c}=q.useScrollOverflow(n);return s.jsx("div",{"data-spark-component":"dialog-body",ref:u,className:g.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!t},o),style:{...i&&{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% + ${c.top?"0px":"44px"} + ${c.bottom?"0px":"44px"})`,maskPosition:`0 ${c.top?"0px":"-44px"}`}},...l,children:e})};m.displayName="Dialog.Body";const x=e=>s.jsx(r.Close,{...e});x.displayName="Dialog.Close";const F=({"aria-label":e,className:o,size:t="md",intent:a="neutral",design:l="ghost",children:n=s.jsx(E.Close,{}),ref:u,...i})=>s.jsx(x,{"data-spark-component":"dialog-close-button","data-part":"close",ref:u,className:g.cx(["absolute","top-md","right-xl"],o),asChild:!0,...i,children:s.jsx(w.IconButton,{intent:a,size:t,design:l,"aria-label":e,children:s.jsx(O.Icon,{children:n})})}),R=Object.assign(F,{id:"CloseButton"});F.displayName="Dialog.CloseButton";const y=({children:e,className:o,isNarrow:t=!1,size:a="md",onInteractOutside:l,ref:n,...u})=>{const{setIsFullScreen:i}=p();return d.useEffect(()=>(a==="fullscreen"&&i(!0),()=>i(!1)),[i,a]),s.jsx(r.Content,{"data-spark-component":"dialog-content",ref:n,className:B.dialogContentStyles({className:o,isNarrow:t,size:a}),onInteractOutside:c=>{c.target.closest(".z-toast, .z-popover")&&c.preventDefault(),l?.(c)},...u,children:e})};y.displayName="Dialog.Content";const f=e=>s.jsx(r.Description,{"data-spark-component":"dialog-description",...e});f.displayName="Dialog.Description";const D=({children:e,className:o,ref:t,...a})=>s.jsx("footer",{"data-spark-component":"dialog-footer",ref:t,className:g.cx(o,["px-xl","py-lg"]),...a,children:e});D.displayName="Dialog.Footer";const N=({children:e,className:o,ref:t,...a})=>s.jsx("header",{"data-spark-component":"dialog-header",ref:t,className:g.cx(o,["px-xl","py-lg"]),...a,children:e});N.displayName="Dialog.Header";const v=({className:e,ref:o,...t})=>{const{isFullScreen:a}=p();return s.jsx(r.Overlay,{"data-spark-component":"dialog-overlay",ref:o,className:g.cx(a?"hidden":"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),...t})};v.displayName="Dialog.Overlay";const j=({children:e,...o})=>s.jsx(r.Portal,{...o,children:e});j.displayName="Dialog.Portal";const h=({className:e,ref:o,...t})=>s.jsx(r.Title,{"data-spark-component":"dialog-title",ref:o,className:g.cx("text-headline-1 text-on-surface","group-has-data-[part=close]:pr-3xl",e),...t});h.displayName="Dialog.Title";const C=e=>s.jsx(r.Trigger,{"data-spark-component":"dialog-trigger",...e});C.displayName="Dialog.Trigger";const b=Object.assign(k,{Trigger:C,Portal:j,Overlay:v,Content:y,Header:N,Body:m,Footer:D,Close:x,CloseButton:R,Title:h,Description:f});b.displayName="Dialog";b.Trigger.displayName="Dialog.Trigger";C.displayName="Dialog.Trigger";j.displayName="Dialog.Portal";v.displayName="Dialog.Overlay";y.displayName="Dialog.Content";N.displayName="Dialog.Header";m.displayName="Dialog.Body";D.displayName="Dialog.Footer";R.displayName="Dialog.CloseButton";h.displayName="Dialog.Title";f.displayName="Dialog.Description";exports.Dialog=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),r=require("@base-ui/react/dialog"),d=require("react"),w=require("@spark-ui/hooks/use-merge-refs"),B=require("@spark-ui/hooks/use-scroll-overflow"),n=require("class-variance-authority"),p=require("../useRenderSlot-DATwjgpo.js"),O=require("@spark-ui/icons/Close"),P=require("../Icon-CF0W0LKr.js"),I=require("../IconButton-D3g86WpZ.js"),T=require("../DialogContent.styles-bBs6l8Cy.js"),x=d.createContext(null),F=({children:e,withFade:o=!1})=>{const[t,s]=d.useState(!1);return a.jsx(x.Provider,{value:{isFullScreen:t,setIsFullScreen:s,withFade:o},children:e})},m=()=>{const e=d.useContext(x);if(!e)throw Error("useDialog must be used within a Dialog provider");return e},f=({withFade:e=!1,onOpenChange:o,...t})=>{const s=o?(i,l)=>{o(i)}:void 0;return a.jsx(F,{withFade:e,children:a.jsx(r.Dialog.Root,{"data-spark-component":"dialog",onOpenChange:s,...t})})};f.displayName="Dialog.Root";const y=({children:e,className:o,inset:t=!1,ref:s,...i})=>{const l=d.useRef(null),c=w.useMergeRefs(s,l),{withFade:g}=m(),{overflow:u}=B.useScrollOverflow(l);return a.jsx("div",{"data-spark-component":"dialog-body",ref:c,className:n.cx("focus-visible:u-outline relative grow overflow-y-auto outline-hidden","transition-all duration-300",{"px-xl py-lg":!t},o),style:{...g&&{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% + ${u.top?"0px":"44px"} + ${u.bottom?"0px":"44px"})`,maskPosition:`0 ${u.top?"0px":"-44px"}`}},...i,children:e})};y.displayName="Dialog.Body";const D=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Close,{"data-spark-component":"dialog-close",render:t,...o})},b=({"aria-label":e,className:o,size:t="md",intent:s="neutral",design:i="ghost",children:l=a.jsx(O.Close,{}),ref:c,...g})=>a.jsx(D,{"data-spark-component":"dialog-close-button","data-part":"close",ref:c,className:n.cx(["absolute","top-md","right-xl"],o),asChild:!0,...g,children:a.jsx(I.IconButton,{intent:s,size:t,design:i,"aria-label":e,children:a.jsx(P.Icon,{children:l})})}),$=Object.assign(b,{id:"CloseButton"});b.displayName="Dialog.CloseButton";const j=({className:e,isNarrow:o=!1,size:t="md",ref:s,...i})=>{const{setIsFullScreen:l}=m();return d.useEffect(()=>(t==="fullscreen"&&l(!0),()=>l(!1)),[l,t]),a.jsx(r.Dialog.Popup,{ref:s,"data-spark-component":"dialog-content",role:"dialog",className:c=>n.cx(T.dialogContentStyles({isNarrow:o,size:t,className:typeof e=="function"?e(c):e})),...i})};j.displayName="Dialog.Content";const h=e=>a.jsx(r.Dialog.Description,{"data-spark-component":"dialog-description",...e});h.displayName="Dialog.Description";const v=({children:e,className:o,ref:t,...s})=>a.jsx("footer",{"data-spark-component":"dialog-footer",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});v.displayName="Dialog.Footer";const N=({children:e,className:o,ref:t,...s})=>a.jsx("header",{"data-spark-component":"dialog-header",ref:t,className:n.cx(o,["px-xl","py-lg"]),...s,children:e});N.displayName="Dialog.Header";const k=({className:e,...o})=>a.jsx(r.Dialog.Backdrop,{"data-spark-component":"dialog-overlay",className:t=>n.cx("z-overlay size-screen fixed inset-0","bg-overlay/dim-1","data-starting-style:animate-fade-in","data-ending-style:animate-fade-out",typeof e=="function"?e(t):e),...o});k.displayName="Dialog.Overlay";const C=({className:e,...o})=>a.jsx(r.Dialog.Portal,{"data-spark-component":"dialog-portal",className:n.cx(e,"z-modal absolute"),...o});C.displayName="Dialog.Portal";const S=({className:e,ref:o,...t})=>a.jsx(r.Dialog.Title,{"data-spark-component":"dialog-title",ref:o,className:n.cx("text-headline-1 text-on-surface","group-has-data-[part=close]:pr-3xl",e),...t});S.displayName="Dialog.Title";const R=({asChild:e=!1,...o})=>{const t=p.useRenderSlot(e,"button");return a.jsx(r.Dialog.Trigger,{"data-spark-component":"dialog-trigger",render:t,...o})};R.displayName="Dialog.Trigger";const q=Object.assign(f,{Trigger:R,Portal:C,Overlay:k,Content:j,Header:N,Body:y,Footer:v,Close:D,CloseButton:$,Title:S,Description:h});q.displayName="Dialog";exports.Dialog=q;
 //# sourceMappingURL=index.js.map

package/dist/dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext.Provider\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext.Provider>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog provider')\n  }\n\n  return context\n}\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, useEffect, useRef } from 'react'\n\nimport { DialogProvider } from './DialogContext'\n\nexport interface DialogProps {\n  /**\n   * Children of the component.\n   */\n  children?: RadixDialog.DialogProps['children']\n  /**\n   * Specifies if the dialog is open or not.\n   */\n  open?: RadixDialog.DialogProps['open']\n  /**\n   * Default open state.\n   */\n  defaultOpen?: RadixDialog.DialogProps['defaultOpen']\n  /**\n   * Handler executen on every dialog open state change.\n   */\n  onOpenChange?: RadixDialog.DialogProps['onOpenChange']\n  /**\n   * Specifies if the dialog is a modal.\n   */\n  modal?: RadixDialog.DialogProps['modal']\n  /**\n   * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).\n   */\n  withFade?: boolean\n}\n\nexport const Dialog = ({ children, withFade = false, ...rest }: DialogProps): ReactElement => {\n  const open = rest.open\n  const activeElementRef = useRef<Element>(null)\n\n  /**\n   * This function captures the active element when the Dialog is opened\n   * and sets focus back to it when the Dialog is closed.\n   */\n  function handleActiveElementFocus() {\n    if (open && document.activeElement) {\n      activeElementRef.current = document.activeElement\n    }\n\n    if (!open) {\n      setTimeout(() => {\n        if (!(activeElementRef.current instanceof HTMLElement)) return\n        activeElementRef.current.focus()\n      }, 0)\n    }\n  }\n\n  useEffect(handleActiveElementFocus, [open])\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <RadixDialog.Root {...rest}>{children}</RadixDialog.Root>\n    </DialogProvider>\n  )\n}\n\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\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\nBody.displayName = 'Dialog.Body'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type CloseProps = RadixDialog.DialogCloseProps & {\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Close = (props: CloseProps) => <RadixDialog.Close {...props} />\n\nClose.displayName = 'Dialog.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 { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', '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    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps extends RadixDialog.DialogContentProps, DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n  children,\n  className,\n  isNarrow = false,\n  size = 'md',\n  onInteractOutside,\n  ref,\n  ...rest\n}: ContentProps): ReactElement => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <RadixDialog.Content\n      data-spark-component=\"dialog-content\"\n      ref={ref}\n      className={dialogContentStyles({\n        className,\n        isNarrow,\n        size,\n      })}\n      onInteractOutside={e => {\n        const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n        /**\n         * The focus trap of the dialog 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 dialog. We want to prevent this.\n         */\n        if (isForegroundElement) {\n          e.preventDefault()\n        }\n\n        onInteractOutside?.(e)\n      }}\n      {...rest}\n    >\n      {children}\n    </RadixDialog.Content>\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DescriptionProps = RadixDialog.DialogDescriptionProps & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const Description = (props: DescriptionProps) => (\n  <RadixDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport type OverlayProps = RadixDialog.DialogOverlayProps & {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Overlay = ({ className, ref, ...rest }: OverlayProps): ReactElement | null => {\n  const { isFullScreen } = useDialog()\n\n  return (\n    <RadixDialog.Overlay\n      data-spark-component=\"dialog-overlay\"\n      ref={ref}\n      className={cx(\n        isFullScreen ? 'hidden' : 'fixed',\n        ['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}\n\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type PortalProps = RadixDialog.DialogPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n  <RadixDialog.Portal {...rest}>{children}</RadixDialog.Portal>\n)\n\nPortal.displayName = 'Dialog.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDialog } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TitleProps = RadixDialog.DialogTitleProps & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <RadixDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as RadixDialog } from 'radix-ui'\nimport { type ReactElement, ReactNode, Ref } from 'react'\n\nexport interface TriggerProps {\n  /**\n   * Children of the component.\n   */\n  children?: ReactNode\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: RadixDialog.DialogTriggerProps['asChild']\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = (props: TriggerProps): ReactElement => (\n  <RadixDialog.Trigger data-spark-component=\"dialog-trigger\" {...props} />\n)\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\nDialog.Trigger.displayName = 'Dialog.Trigger'\nTrigger.displayName = 'Dialog.Trigger'\nPortal.displayName = 'Dialog.Portal'\nOverlay.displayName = 'Dialog.Overlay'\nContent.displayName = 'Dialog.Content'\nHeader.displayName = 'Dialog.Header'\nBody.displayName = 'Dialog.Body'\nFooter.displayName = 'Dialog.Footer'\nCloseButton.displayName = 'Dialog.CloseButton'\nTitle.displayName = 'Dialog.Title'\nDescription.displayName = 'Dialog.Description'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"names":["DialogContext","createContext","DialogProvider","childrenProp","withFade","isFullScreen","setIsFullScreen","useState","jsx","useDialog","context","useContext","Dialog","children","rest","open","activeElementRef","useRef","handleActiveElementFocus","useEffect","RadixDialog.Root","Body","className","inset","forwardedRef","scrollAreaRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","props","RadixDialog.Close","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","onInteractOutside","RadixDialog.Content","dialogContentStyles","e","Description","RadixDialog.Description","Footer","Header","Overlay","RadixDialog.Overlay","Portal","RadixDialog.Portal","Title","others","RadixDialog.Title","Trigger","RadixDialog.Trigger"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/dialog/DialogContext.tsx","../../src/dialog/Dialog.tsx","../../src/dialog/DialogBody.tsx","../../src/dialog/DialogClose.tsx","../../src/dialog/DialogCloseButton.tsx","../../src/dialog/DialogContent.tsx","../../src/dialog/DialogDescription.tsx","../../src/dialog/DialogFooter.tsx","../../src/dialog/DialogHeader.tsx","../../src/dialog/DialogOverlay.tsx","../../src/dialog/DialogPortal.tsx","../../src/dialog/DialogTitle.tsx","../../src/dialog/DialogTrigger.tsx","../../src/dialog/index.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext, useState } from 'react'\n\nexport interface DialogContextState {\n  isFullScreen: boolean\n  setIsFullScreen: (value: boolean) => void\n  withFade: boolean\n}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({\n  children: childrenProp,\n  withFade = false,\n}: {\n  children: ReactNode\n  withFade?: boolean\n}) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext.Provider\n      value={{\n        isFullScreen,\n        setIsFullScreen,\n        withFade,\n      }}\n    >\n      {childrenProp}\n    </DialogContext.Provider>\n  )\n}\n\nexport const useDialog = () => {\n  const context = useContext(DialogContext)\n\n  if (!context) {\n    throw Error('useDialog must be used within a Dialog 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 { DialogProvider } from './DialogContext'\n\nexport interface DialogProps\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 dialog 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 Dialog = ({ withFade = false, onOpenChange, ...props }: DialogProps): ReactElement => {\n  const handleOpenChange = onOpenChange\n    ? (open: boolean, _eventDetails: unknown) => {\n        onOpenChange(open)\n      }\n    : undefined\n\n  return (\n    <DialogProvider withFade={withFade}>\n      <BaseDialog.Root data-spark-component=\"dialog\" onOpenChange={handleOpenChange} {...props} />\n    </DialogProvider>\n  )\n}\n\nDialog.displayName = 'Dialog.Root'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref, useRef } from 'react'\n\nimport { useDialog } from './DialogContext'\n\nexport interface BodyProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n  inset?: boolean\n}\n\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref: forwardedRef,\n  ...rest\n}: BodyProps): ReactElement => {\n  const scrollAreaRef = useRef<HTMLDivElement>(null)\n  const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n  const { withFade } = useDialog()\n\n  const { overflow } = useScrollOverflow(scrollAreaRef)\n\n  return (\n    <div\n      data-spark-component=\"dialog-body\"\n      ref={ref}\n      className={cx(\n        'focus-visible:u-outline relative grow overflow-y-auto outline-hidden',\n        'transition-all duration-300',\n        {\n          ['px-xl py-lg']: !inset,\n        },\n        className\n      )}\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\nBody.displayName = 'Dialog.Body'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface CloseProps 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 Close = ({ asChild = false, ...props }: CloseProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Close data-spark-component=\"dialog-close\" render={renderSlot} {...props} />\n}\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 { Close, CloseProps } from './DialogClose'\n\nexport type CloseButtonProps = CloseProps &\n  Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nconst Root = ({\n  'aria-label': ariaLabel,\n  className,\n  size = 'md',\n  intent = 'neutral',\n  design = 'ghost',\n  children = <CloseSVG />,\n  ref,\n  ...rest\n}: CloseButtonProps) => {\n  return (\n    <Close\n      data-spark-component=\"dialog-close-button\"\n      data-part=\"close\"\n      ref={ref}\n      className={cx(['absolute', 'top-md', '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    </Close>\n  )\n}\n\nexport const CloseButton = Object.assign(Root, {\n  id: 'CloseButton',\n})\n\nRoot.displayName = 'Dialog.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref, useEffect } from 'react'\n\nimport { dialogContentStyles, type DialogContentStylesProps } from './DialogContent.styles'\nimport { useDialog } from './DialogContext'\n\nexport interface ContentProps\n  extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render'>,\n    DialogContentStylesProps {\n  /**\n   * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.\n   */\n  isNarrow?: boolean\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n  className,\n  isNarrow = false,\n  size = 'md',\n  ref,\n  ...rest\n}: ContentProps) => {\n  const { setIsFullScreen } = useDialog()\n\n  useEffect(() => {\n    if (size === 'fullscreen') setIsFullScreen(true)\n\n    return () => setIsFullScreen(false)\n  }, [setIsFullScreen, size])\n\n  return (\n    <BaseDialog.Popup\n      ref={ref}\n      data-spark-component=\"dialog-content\"\n      role=\"dialog\"\n      className={state =>\n        cx(\n          dialogContentStyles({\n            isNarrow,\n            size,\n            className: typeof className === 'function' ? className(state) : className,\n          })\n        )\n      }\n      {...rest}\n    />\n  )\n}\n\nContent.displayName = 'Dialog.Content'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport type DescriptionProps = ComponentProps<typeof BaseDialog.Description> & {\n  ref?: Ref<HTMLParagraphElement>\n}\n\nexport const Description = (props: DescriptionProps) => (\n  <BaseDialog.Description data-spark-component=\"dialog-description\" {...props} />\n)\n\nDescription.displayName = 'Dialog.Description'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface FooterProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Footer = ({ children, className, ref, ...rest }: FooterProps): ReactElement => (\n  <footer\n    data-spark-component=\"dialog-footer\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </footer>\n)\n\nFooter.displayName = 'Dialog.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface HeaderProps {\n  children: ReactNode\n  className?: string\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps): ReactElement => (\n  <header\n    data-spark-component=\"dialog-header\"\n    ref={ref}\n    className={cx(className, ['px-xl', 'py-lg'])}\n    {...rest}\n  >\n    {children}\n  </header>\n)\n\nHeader.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 OverlayProps extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Overlay = ({ className, ...props }: OverlayProps) => {\n  return (\n    <BaseDialog.Backdrop\n      data-spark-component=\"dialog-overlay\"\n      className={state =>\n        cx(\n          'z-overlay size-screen fixed inset-0',\n          'bg-overlay/dim-1',\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\nOverlay.displayName = 'Dialog.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps } from 'react'\n\nexport type PortalProps = ComponentProps<typeof BaseDialog.Portal>\n\nexport const Portal = ({ className, ...props }: PortalProps) => {\n  return (\n    <BaseDialog.Portal\n      data-spark-component=\"dialog-portal\"\n      className={cx(className, 'z-modal absolute')}\n      {...props}\n    />\n  )\n}\n\nPortal.displayName = 'Dialog.Portal'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport type TitleProps = ComponentProps<typeof BaseDialog.Title> & {\n  ref?: Ref<HTMLHeadingElement>\n}\n\nexport const Title = ({ className, ref, ...others }: TitleProps) => {\n  return (\n    <BaseDialog.Title\n      data-spark-component=\"dialog-title\"\n      ref={ref}\n      className={cx(\n        'text-headline-1 text-on-surface',\n        'group-has-data-[part=close]:pr-3xl',\n        className\n      )}\n      {...others}\n    />\n  )\n}\n\nTitle.displayName = 'Dialog.Title'\n","import { Dialog as BaseDialog } from '@base-ui/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\n\nexport interface TriggerProps extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, ...props }: TriggerProps) => {\n  const renderSlot = useRenderSlot(asChild, 'button')\n\n  return <BaseDialog.Trigger data-spark-component=\"dialog-trigger\" render={renderSlot} {...props} />\n}\n\nTrigger.displayName = 'Dialog.Trigger'\n","import { Dialog as Root } from './Dialog'\nimport { Body } from './DialogBody'\nimport { Close } from './DialogClose'\nimport { CloseButton } from './DialogCloseButton'\nimport { Content } from './DialogContent'\nimport { Description } from './DialogDescription' // aria-describedby\nimport { Footer } from './DialogFooter'\nimport { Header } from './DialogHeader'\nimport { Overlay } from './DialogOverlay'\nimport { Portal } from './DialogPortal'\nimport { Title } from './DialogTitle' // aria-labelledby\nimport { Trigger } from './DialogTrigger'\n\nexport const Dialog: typeof Root & {\n  Trigger: typeof Trigger\n  Portal: typeof Portal\n  Overlay: typeof Overlay\n  Content: typeof Content\n  Header: typeof Header\n  Body: typeof Body\n  Footer: typeof Footer\n  Close: typeof Close\n  CloseButton: typeof CloseButton\n  Title: typeof Title\n  Description: typeof Description\n} = Object.assign(Root, {\n  Trigger,\n  Portal,\n  Overlay,\n  Content,\n  Header,\n  Body,\n  Footer,\n  Close,\n  CloseButton,\n  Title,\n  Description,\n})\n\nDialog.displayName = 'Dialog'\n\nexport { type DialogProps } from './Dialog'\nexport { type ContentProps as DialogContentProps } from './DialogContent'\nexport { type HeaderProps as DialogHeaderProps } from './DialogHeader'\nexport { type BodyProps as DialogBodyProps } from './DialogBody'\nexport { type FooterProps as DialogFooterProps } from './DialogFooter'\nexport { type TriggerProps as DialogTriggerProps } from './DialogTrigger'\nexport { type OverlayProps as DialogOverlayProps } from './DialogOverlay'\nexport { type PortalProps as DialogPortalProps } from './DialogPortal'\nexport { type TitleProps as DialogTitleProps } from './DialogTitle'\nexport { type DescriptionProps as DialogDescriptionProps } from './DialogDescription'\nexport { type CloseProps as DialogCloseProps } from './DialogClose'\nexport { type CloseButtonProps as DialogCloseButtonProps } from './DialogCloseButton'\n"],"names":["DialogContext","createContext","DialogProvider","childrenProp","withFade","isFullScreen","setIsFullScreen","useState","jsx","useDialog","context","useContext","Dialog","onOpenChange","props","handleOpenChange","open","_eventDetails","BaseDialog","Body","children","className","inset","forwardedRef","rest","scrollAreaRef","useRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","asChild","renderSlot","useRenderSlot","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","useEffect","state","dialogContentStyles","Description","Footer","Header","Overlay","Portal","Title","others","Trigger"],"mappings":"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"}

package/dist/dialog/index.mjs

@@ -1,221 +1,211 @@
-import { jsx as l } from "react/jsx-runtime";
-import { createContext as O, useState as w, useContext as B, useRef as C, useEffect as b } from "react";
-import { R as I, C as P, a as R, D as S, O as H, P as j, T as z, b as A } from "../index-CYjGhVvU.mjs";
-import { useMergeRefs as M } from "@spark-ui/hooks/use-merge-refs";
-import { useScrollOverflow as L } from "@spark-ui/hooks/use-scroll-overflow";
-import { a as c } from "../index-BmAFn37q.mjs";
-import { Close as q } from "@spark-ui/icons/Close";
-import { I as G } from "../Icon-D1RueiPY.mjs";
-import { I as J } from "../IconButton-BY3gYXtU.mjs";
-import { d as K } from "../DialogContent.styles-WGWJS9dj.mjs";
-const T = O(null), Q = ({
-  children: e,
-  withFade: a = !1
+import { jsx as t } from "react/jsx-runtime";
+import { Dialog as n } from "@base-ui/react/dialog";
+import { createContext as B, useState as I, useContext as P, useRef as R, useEffect as F } from "react";
+import { useMergeRefs as O } from "@spark-ui/hooks/use-merge-refs";
+import { useScrollOverflow as T } from "@spark-ui/hooks/use-scroll-overflow";
+import { cx as s } from "class-variance-authority";
+import { u as m } from "../useRenderSlot-LwWj8QbC.mjs";
+import { Close as $ } from "@spark-ui/icons/Close";
+import { I as j } from "../Icon-Ck-dhfLd.mjs";
+import { I as z } from "../IconButton-C62-axzv.mjs";
+import { d as E } from "../DialogContent.styles-BSfXHt21.mjs";
+const g = B(null), H = ({
+  children: o,
+  withFade: e = !1
 }) => {
-  const [t, o] = w(!1);
-  return /* @__PURE__ */ l(
-    T.Provider,
+  const [a, r] = I(!1);
+  return /* @__PURE__ */ t(
+    g.Provider,
     {
       value: {
-        isFullScreen: t,
-        setIsFullScreen: o,
-        withFade: a
+        isFullScreen: a,
+        setIsFullScreen: r,
+        withFade: e
       },
-      children: e
+      children: o
     }
   );
-}, p = () => {
-  const e = B(T);
-  if (!e)
+}, u = () => {
+  const o = P(g);
+  if (!o)
     throw Error("useDialog must be used within a Dialog provider");
-  return e;
-}, $ = ({ children: e, withFade: a = !1, ...t }) => {
-  const o = t.open, s = C(null);
-  function r() {
-    o && document.activeElement && (s.current = document.activeElement), o || setTimeout(() => {
-      s.current instanceof HTMLElement && s.current.focus();
-    }, 0);
-  }
-  return b(r, [o]), /* @__PURE__ */ l(Q, { withFade: a, children: /* @__PURE__ */ l(I, { ...t, children: e }) });
+  return o;
+}, f = ({ withFade: o = !1, onOpenChange: e, ...a }) => {
+  const r = e ? (i, l) => {
+    e(i);
+  } : void 0;
+  return /* @__PURE__ */ t(H, { withFade: o, children: /* @__PURE__ */ t(n.Root, { "data-spark-component": "dialog", onOpenChange: r, ...a }) });
 };
-$.displayName = "Dialog.Root";
-const m = ({
-  children: e,
-  className: a,
-  inset: t = !1,
-  ref: o,
-  ...s
+f.displayName = "Dialog.Root";
+const y = ({
+  children: o,
+  className: e,
+  inset: a = !1,
+  ref: r,
+  ...i
 }) => {
-  const r = C(null), d = M(o, r), { withFade: i } = p(), { overflow: n } = L(r);
-  return /* @__PURE__ */ l(
+  const l = R(null), d = O(r, l), { withFade: c } = u(), { overflow: p } = T(l);
+  return /* @__PURE__ */ t(
     "div",
     {
       "data-spark-component": "dialog-body",
       ref: d,
-      className: c(
+      className: s(
         "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
         "transition-all duration-300",
         {
-          "px-xl py-lg": !t
+          "px-xl py-lg": !a
         },
-        a
+        e
       ),
       style: {
-        ...i && {
+        ...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% + ${n.top ? "0px" : "44px"} + ${n.bottom ? "0px" : "44px"})`,
-          maskPosition: `0 ${n.top ? "0px" : "-44px"}`
+          maskSize: `100% calc(100% + ${p.top ? "0px" : "44px"} + ${p.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${p.top ? "0px" : "-44px"}`
         }
       },
-      ...s,
-      children: e
+      ...i,
+      children: o
     }
   );
 };
-m.displayName = "Dialog.Body";
-const g = (e) => /* @__PURE__ */ l(P, { ...e });
-g.displayName = "Dialog.Close";
-const k = ({
-  "aria-label": e,
-  className: a,
-  size: t = "md",
-  intent: o = "neutral",
-  design: s = "ghost",
-  children: r = /* @__PURE__ */ l(q, {}),
+y.displayName = "Dialog.Body";
+const x = ({ asChild: o = !1, ...e }) => {
+  const a = m(o, "button");
+  return /* @__PURE__ */ t(n.Close, { "data-spark-component": "dialog-close", render: a, ...e });
+}, D = ({
+  "aria-label": o,
+  className: e,
+  size: a = "md",
+  intent: r = "neutral",
+  design: i = "ghost",
+  children: l = /* @__PURE__ */ t($, {}),
   ref: d,
-  ...i
-}) => /* @__PURE__ */ l(
-  g,
+  ...c
+}) => /* @__PURE__ */ t(
+  x,
   {
     "data-spark-component": "dialog-close-button",
     "data-part": "close",
     ref: d,
-    className: c(["absolute", "top-md", "right-xl"], a),
+    className: s(["absolute", "top-md", "right-xl"], e),
     asChild: !0,
-    ...i,
-    children: /* @__PURE__ */ l(J, { intent: o, size: t, design: s, "aria-label": e, children: /* @__PURE__ */ l(G, { children: r }) })
+    ...c,
+    children: /* @__PURE__ */ t(z, { intent: r, size: a, design: i, "aria-label": o, children: /* @__PURE__ */ t(j, { children: l }) })
   }
-), F = Object.assign(k, {
+), A = Object.assign(D, {
   id: "CloseButton"
 });
-k.displayName = "Dialog.CloseButton";
-const u = ({
-  children: e,
-  className: a,
-  isNarrow: t = !1,
-  size: o = "md",
-  onInteractOutside: s,
+D.displayName = "Dialog.CloseButton";
+const b = ({
+  className: o,
+  isNarrow: e = !1,
+  size: a = "md",
   ref: r,
-  ...d
+  ...i
 }) => {
-  const { setIsFullScreen: i } = p();
-  return b(() => (o === "fullscreen" && i(!0), () => i(!1)), [i, o]), /* @__PURE__ */ l(
-    R,
+  const { setIsFullScreen: l } = u();
+  return F(() => (a === "fullscreen" && l(!0), () => l(!1)), [l, a]), /* @__PURE__ */ t(
+    n.Popup,
     {
-      "data-spark-component": "dialog-content",
       ref: r,
-      className: K({
-        className: a,
-        isNarrow: t,
-        size: o
-      }),
-      onInteractOutside: (n) => {
-        n.target.closest(".z-toast, .z-popover") && n.preventDefault(), s?.(n);
-      },
-      ...d,
-      children: e
+      "data-spark-component": "dialog-content",
+      role: "dialog",
+      className: (d) => s(
+        E({
+          isNarrow: e,
+          size: a,
+          className: typeof o == "function" ? o(d) : o
+        })
+      ),
+      ...i
     }
   );
 };
-u.displayName = "Dialog.Content";
-const f = (e) => /* @__PURE__ */ l(S, { "data-spark-component": "dialog-description", ...e });
-f.displayName = "Dialog.Description";
-const y = ({ children: e, className: a, ref: t, ...o }) => /* @__PURE__ */ l(
+b.displayName = "Dialog.Content";
+const h = (o) => /* @__PURE__ */ t(n.Description, { "data-spark-component": "dialog-description", ...o });
+h.displayName = "Dialog.Description";
+const v = ({ children: o, className: e, ref: a, ...r }) => /* @__PURE__ */ t(
   "footer",
   {
     "data-spark-component": "dialog-footer",
-    ref: t,
-    className: c(a, ["px-xl", "py-lg"]),
-    ...o,
-    children: e
+    ref: a,
+    className: s(e, ["px-xl", "py-lg"]),
+    ...r,
+    children: o
   }
 );
-y.displayName = "Dialog.Footer";
-const D = ({ children: e, className: a, ref: t, ...o }) => /* @__PURE__ */ l(
+v.displayName = "Dialog.Footer";
+const N = ({ children: o, className: e, ref: a, ...r }) => /* @__PURE__ */ t(
   "header",
   {
     "data-spark-component": "dialog-header",
-    ref: t,
-    className: c(a, ["px-xl", "py-lg"]),
-    ...o,
-    children: e
+    ref: a,
+    className: s(e, ["px-xl", "py-lg"]),
+    ...r,
+    children: o
   }
 );
-D.displayName = "Dialog.Header";
-const N = ({ className: e, ref: a, ...t }) => {
-  const { isFullScreen: o } = p();
-  return /* @__PURE__ */ l(
-    H,
-    {
-      "data-spark-component": "dialog-overlay",
-      ref: a,
-      className: c(
-        o ? "hidden" : "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
-      ),
-      ...t
-    }
-  );
-};
-N.displayName = "Dialog.Overlay";
-const x = ({ children: e, ...a }) => /* @__PURE__ */ l(j, { ...a, children: e });
-x.displayName = "Dialog.Portal";
-const v = ({ className: e, ref: a, ...t }) => /* @__PURE__ */ l(
-  z,
+N.displayName = "Dialog.Header";
+const k = ({ className: o, ...e }) => /* @__PURE__ */ t(
+  n.Backdrop,
+  {
+    "data-spark-component": "dialog-overlay",
+    className: (a) => s(
+      "z-overlay size-screen fixed inset-0",
+      "bg-overlay/dim-1",
+      "data-starting-style:animate-fade-in",
+      "data-ending-style:animate-fade-out",
+      typeof o == "function" ? o(a) : o
+    ),
+    ...e
+  }
+);
+k.displayName = "Dialog.Overlay";
+const C = ({ className: o, ...e }) => /* @__PURE__ */ t(
+  n.Portal,
+  {
+    "data-spark-component": "dialog-portal",
+    className: s(o, "z-modal absolute"),
+    ...e
+  }
+);
+C.displayName = "Dialog.Portal";
+const S = ({ className: o, ref: e, ...a }) => /* @__PURE__ */ t(
+  n.Title,
   {
     "data-spark-component": "dialog-title",
-    ref: a,
-    className: c(
+    ref: e,
+    className: s(
       "text-headline-1 text-on-surface",
       "group-has-data-[part=close]:pr-3xl",
-      e
+      o
     ),
-    ...t
+    ...a
   }
 );
-v.displayName = "Dialog.Title";
-const h = (e) => /* @__PURE__ */ l(A, { "data-spark-component": "dialog-trigger", ...e });
-h.displayName = "Dialog.Trigger";
-const E = Object.assign($, {
-  Trigger: h,
-  Portal: x,
-  Overlay: N,
-  Content: u,
-  Header: D,
-  Body: m,
-  Footer: y,
-  Close: g,
-  CloseButton: F,
-  Title: v,
-  Description: f
+S.displayName = "Dialog.Title";
+const w = ({ asChild: o = !1, ...e }) => {
+  const a = m(o, "button");
+  return /* @__PURE__ */ t(n.Trigger, { "data-spark-component": "dialog-trigger", render: a, ...e });
+};
+w.displayName = "Dialog.Trigger";
+const M = Object.assign(f, {
+  Trigger: w,
+  Portal: C,
+  Overlay: k,
+  Content: b,
+  Header: N,
+  Body: y,
+  Footer: v,
+  Close: x,
+  CloseButton: A,
+  Title: S,
+  Description: h
 });
-E.displayName = "Dialog";
-E.Trigger.displayName = "Dialog.Trigger";
-h.displayName = "Dialog.Trigger";
-x.displayName = "Dialog.Portal";
-N.displayName = "Dialog.Overlay";
-u.displayName = "Dialog.Content";
-D.displayName = "Dialog.Header";
-m.displayName = "Dialog.Body";
-y.displayName = "Dialog.Footer";
-F.displayName = "Dialog.CloseButton";
-v.displayName = "Dialog.Title";
-f.displayName = "Dialog.Description";
+M.displayName = "Dialog";
 export {
-  E as Dialog
+  M as Dialog
 };
 //# sourceMappingURL=index.mjs.map