@spark-ui/components 15.0.0 → 15.1.0

package/dist/dialog/Dialog.d.ts

@@ -28,5 +28,6 @@ export interface DialogProps extends Omit<ComponentProps<typeof BaseDialog.Root>
 }
 export declare const Dialog: {
     ({ withFade, onOpenChange, ...props }: DialogProps): ReactElement;
+    createHandle: typeof BaseDialog.createHandle;
     displayName: string;
 };

package/dist/dialog/index.js

@@ -1,2 +1,2 @@
-"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-CziMQtYr.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;
+"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"),x=require("../useRenderSlot-DATwjgpo.js"),O=require("@spark-ui/icons/Close"),P=require("../Icon-CF0W0LKr.js"),I=require("../IconButton-D3g86WpZ.js"),T=require("../DialogContent.styles-CziMQtYr.js"),m=d.createContext(null),F=({children:e,withFade:o=!1})=>{const[t,l]=d.useState(!1);return a.jsx(m.Provider,{value:{isFullScreen:t,setIsFullScreen:l,withFade:o},children:e})},f=()=>{const e=d.useContext(m);if(!e)throw Error("useDialog must be used within a Dialog provider");return e},p=({withFade:e=!1,onOpenChange:o,...t})=>{const l=o?(i,s)=>{o(i)}:void 0;return a.jsx(F,{withFade:e,children:a.jsx(r.Dialog.Root,{"data-spark-component":"dialog",onOpenChange:l,...t})})};p.createHandle=r.Dialog.createHandle;p.displayName="Dialog.Root";const y=({children:e,className:o,inset:t=!1,ref:l,...i})=>{const s=d.useRef(null),c=w.useMergeRefs(l,s),{withFade:g}=f(),{overflow:u}=B.useScrollOverflow(s);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=x.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:l="neutral",design:i="ghost",children:s=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:l,size:t,design:i,"aria-label":e,children:a.jsx(P.Icon,{children:s})})}),$=Object.assign(b,{id:"CloseButton"});b.displayName="Dialog.CloseButton";const j=({className:e,isNarrow:o=!1,size:t="md",ref:l,...i})=>{const{setIsFullScreen:s}=f();return d.useEffect(()=>(t==="fullscreen"&&s(!0),()=>s(!1)),[s,t]),a.jsx(r.Dialog.Popup,{ref:l,"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,...l})=>a.jsx("footer",{"data-spark-component":"dialog-footer",ref:t,className:n.cx(o,["px-xl","py-lg"]),...l,children:e});v.displayName="Dialog.Footer";const N=({children:e,className:o,ref:t,...l})=>a.jsx("header",{"data-spark-component":"dialog-header",ref:t,className:n.cx(o,["px-xl","py-lg"]),...l,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=x.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(p,{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 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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"}
+{"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.createHandle = BaseDialog.createHandle\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":"ofAQMA,EAAgBC,EAAAA,cAAyC,IAAI,EAEtDC,EAAiB,CAAC,CAC7B,SAAUC,EACV,SAAAC,EAAW,EACb,IAGM,CACJ,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAAA,SAAS,EAAK,EAEtD,OACEC,EAAAA,IAACR,EAAc,SAAd,CACC,MAAO,CACL,aAAAK,EACA,gBAAAC,EACA,SAAAF,CAAA,EAGD,SAAAD,CAAA,CAAA,CAGP,EAEaM,EAAY,IAAM,CAC7B,MAAMC,EAAUC,EAAAA,WAAWX,CAAa,EAExC,GAAI,CAACU,EACH,MAAM,MAAM,iDAAiD,EAG/D,OAAOA,CACT,ECPaE,EAAS,CAAC,CAAE,SAAAR,EAAW,GAAO,aAAAS,EAAc,GAAGC,KAAuC,CACjG,MAAMC,EAAmBF,EACrB,CAACG,EAAeC,IAA2B,CACzCJ,EAAaG,CAAI,CACnB,EACA,OAEJ,OACER,EAAAA,IAACN,EAAA,CAAe,SAAAE,EACd,SAAAI,EAAAA,IAACU,SAAW,KAAX,CAAgB,uBAAqB,SAAS,aAAcH,EAAmB,GAAGD,EAAO,EAC5F,CAEJ,EAEAF,EAAO,aAAeM,EAAAA,OAAW,aACjCN,EAAO,YAAc,cCjCd,MAAMO,EAAO,CAAC,CACnB,SAAAC,EACA,UAAAC,EACA,MAAAC,EAAQ,GACR,IAAKC,EACL,GAAGC,CACL,IAA+B,CAC7B,MAAMC,EAAgBC,EAAAA,OAAuB,IAAI,EAC3CC,EAAMC,EAAAA,aAAaL,EAAcE,CAAa,EAE9C,CAAE,SAAArB,CAAA,EAAaK,EAAA,EAEf,CAAE,SAAAoB,CAAA,EAAaC,EAAAA,kBAAkBL,CAAa,EAEpD,OACEjB,EAAAA,IAAC,MAAA,CACC,uBAAqB,cACrB,IAAAmB,EACA,UAAWI,EAAAA,GACT,uEACA,8BACA,CACG,cAAgB,CAACT,CAAA,EAEpBD,CAAA,EAEF,MAAO,CACL,GAAIjB,GAAY,CACd,UACE,4HACF,SAAU,oBAAoByB,EAAS,IAAM,MAAQ,MAAM,MAAMA,EAAS,OAAS,MAAQ,MAAM,IACjG,aAAc,KAAKA,EAAS,IAAM,MAAQ,OAAO,EAAA,CACnD,EAED,GAAGL,EAEH,SAAAJ,CAAA,CAAA,CAGP,EAEAD,EAAK,YAAc,cC3CZ,MAAMa,EAAQ,CAAC,CAAE,QAAAC,EAAU,GAAO,GAAGnB,KAAwB,CAClE,MAAMoB,EAAaC,EAAAA,cAAcF,EAAS,QAAQ,EAElD,OAAOzB,EAAAA,IAACU,SAAW,MAAX,CAAiB,uBAAqB,eAAe,OAAQgB,EAAa,GAAGpB,EAAO,CAC9F,ECPMsB,EAAO,CAAC,CACZ,aAAcC,EACd,UAAAhB,EACA,KAAAiB,EAAO,KACP,OAAAC,EAAS,UACT,OAAAC,EAAS,QACT,SAAApB,QAAYqB,EAAAA,MAAA,EAAS,EACrB,IAAAd,EACA,GAAGH,CACL,IAEIhB,EAAAA,IAACwB,EAAA,CACC,uBAAqB,sBACrB,YAAU,QACV,IAAAL,EACA,UAAWI,EAAAA,GAAG,CAAC,WAAY,SAAU,UAAU,EAAGV,CAAS,EAC3D,QAAO,GACN,GAAGG,EAEJ,SAAAhB,EAAAA,IAACkC,EAAAA,WAAA,CAAW,OAAAH,EAAgB,KAAAD,EAAY,OAAAE,EAAgB,aAAYH,EAClE,SAAA7B,EAAAA,IAACmC,EAAAA,KAAA,CAAM,SAAAvB,CAAA,CAAS,CAAA,CAClB,CAAA,CAAA,EAKOwB,EAAc,OAAO,OAAOR,EAAM,CAC7C,GAAI,aACN,CAAC,EAEDA,EAAK,YAAc,qBCvBZ,MAAMS,EAAU,CAAC,CACtB,UAAAxB,EACA,SAAAyB,EAAW,GACX,KAAAR,EAAO,KACP,IAAAX,EACA,GAAGH,CACL,IAAoB,CAClB,KAAM,CAAE,gBAAAlB,CAAA,EAAoBG,EAAA,EAE5BsC,OAAAA,EAAAA,UAAU,KACJT,IAAS,cAAchC,EAAgB,EAAI,EAExC,IAAMA,EAAgB,EAAK,GACjC,CAACA,EAAiBgC,CAAI,CAAC,EAGxB9B,EAAAA,IAACU,EAAAA,OAAW,MAAX,CACC,IAAAS,EACA,uBAAqB,iBACrB,KAAK,SACL,UAAWqB,GACTjB,EAAAA,GACEkB,sBAAoB,CAClB,SAAAH,EACA,KAAAR,EACA,UAAW,OAAOjB,GAAc,WAAaA,EAAU2B,CAAK,EAAI3B,CAAA,CACjE,CAAA,EAGJ,GAAGG,CAAA,CAAA,CAGV,EAEAqB,EAAQ,YAAc,iBC5Cf,MAAMK,EAAepC,GAC1BN,EAAAA,IAACU,EAAAA,OAAW,YAAX,CAAuB,uBAAqB,qBAAsB,GAAGJ,EAAO,EAG/EoC,EAAY,YAAc,qBCFnB,MAAMC,EAAS,CAAC,CAAE,SAAA/B,EAAU,UAAAC,EAAW,IAAAM,EAAK,GAAGH,KACpDhB,EAAAA,IAAC,SAAA,CACC,uBAAqB,gBACrB,IAAAmB,EACA,UAAWI,EAAAA,GAAGV,EAAW,CAAC,QAAS,OAAO,CAAC,EAC1C,GAAGG,EAEH,SAAAJ,CAAA,CACH,EAGF+B,EAAO,YAAc,gBCXd,MAAMC,EAAS,CAAC,CAAE,SAAAhC,EAAU,UAAAC,EAAW,IAAAM,EAAK,GAAGH,KACpDhB,EAAAA,IAAC,SAAA,CACC,uBAAqB,gBACrB,IAAAmB,EACA,UAAWI,EAAAA,GAAGV,EAAW,CAAC,QAAS,OAAO,CAAC,EAC1C,GAAGG,EAEH,SAAAJ,CAAA,CACH,EAGFgC,EAAO,YAAc,gBCZd,MAAMC,EAAU,CAAC,CAAE,UAAAhC,EAAW,GAAGP,KAEpCN,EAAAA,IAACU,EAAAA,OAAW,SAAX,CACC,uBAAqB,iBACrB,UAAW8B,GACTjB,EAAAA,GACE,sCACA,mBACA,sCACA,qCACA,OAAOV,GAAc,WAAaA,EAAU2B,CAAK,EAAI3B,CAAA,EAGxD,GAAGP,CAAA,CAAA,EAKVuC,EAAQ,YAAc,iBCpBf,MAAMC,EAAS,CAAC,CAAE,UAAAjC,EAAW,GAAGP,KAEnCN,EAAAA,IAACU,EAAAA,OAAW,OAAX,CACC,uBAAqB,gBACrB,UAAWa,EAAAA,GAAGV,EAAW,kBAAkB,EAC1C,GAAGP,CAAA,CAAA,EAKVwC,EAAO,YAAc,gBCRd,MAAMC,EAAQ,CAAC,CAAE,UAAAlC,EAAW,IAAAM,EAAK,GAAG6B,KAEvChD,EAAAA,IAACU,EAAAA,OAAW,MAAX,CACC,uBAAqB,eACrB,IAAAS,EACA,UAAWI,EAAAA,GACT,kCACA,qCACAV,CAAA,EAED,GAAGmC,CAAA,CAAA,EAKVD,EAAM,YAAc,eCVb,MAAME,EAAU,CAAC,CAAE,QAAAxB,EAAU,GAAO,GAAGnB,KAA0B,CACtE,MAAMoB,EAAaC,EAAAA,cAAcF,EAAS,QAAQ,EAElD,OAAOzB,EAAAA,IAACU,SAAW,QAAX,CAAmB,uBAAqB,iBAAiB,OAAQgB,EAAa,GAAGpB,EAAO,CAClG,EAEA2C,EAAQ,YAAc,iBCNf,MAAM7C,EAYT,OAAO,OAAOwB,EAAM,CACtB,QAAAqB,EACA,OAAAH,EACA,QAAAD,EACA,QAAAR,EACA,OAAAO,EACA,KAAAjC,EACA,OAAAgC,EACA,MAAAnB,EACA,YAAAY,EACA,MAAAW,EACA,YAAAL,CACF,CAAC,EAEDtC,EAAO,YAAc"}

package/dist/dialog/index.mjs

@@ -4,18 +4,18 @@ import { createContext as B, useState as I, useContext as P, useRef as R, useEff
 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 { u as g } 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-Du7_Dkde.mjs";
-const g = B(null), H = ({
+import { I as H } from "../Icon-Ck-dhfLd.mjs";
+import { I as j } from "../IconButton-C62-axzv.mjs";
+import { d as z } from "../DialogContent.styles-Du7_Dkde.mjs";
+const u = B(null), E = ({
   children: o,
   withFade: e = !1
 }) => {
   const [a, r] = I(!1);
   return /* @__PURE__ */ t(
-    g.Provider,
+    u.Provider,
     {
       value: {
         isFullScreen: a,
@@ -25,18 +25,19 @@ const g = B(null), H = ({
       children: o
     }
   );
-}, u = () => {
-  const o = P(g);
+}, f = () => {
+  const o = P(u);
   if (!o)
     throw Error("useDialog must be used within a Dialog provider");
   return o;
-}, f = ({ withFade: o = !1, onOpenChange: e, ...a }) => {
+}, m = ({ 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 }) });
+  return /* @__PURE__ */ t(E, { withFade: o, children: /* @__PURE__ */ t(n.Root, { "data-spark-component": "dialog", onOpenChange: r, ...a }) });
 };
-f.displayName = "Dialog.Root";
+m.createHandle = n.createHandle;
+m.displayName = "Dialog.Root";
 const y = ({
   children: o,
   className: e,
@@ -44,7 +45,7 @@ const y = ({
   ref: r,
   ...i
 }) => {
-  const l = R(null), d = O(r, l), { withFade: c } = u(), { overflow: p } = T(l);
+  const l = R(null), d = O(r, l), { withFade: c } = f(), { overflow: p } = T(l);
   return /* @__PURE__ */ t(
     "div",
     {
@@ -72,7 +73,7 @@ const y = ({
 };
 y.displayName = "Dialog.Body";
 const x = ({ asChild: o = !1, ...e }) => {
-  const a = m(o, "button");
+  const a = g(o, "button");
   return /* @__PURE__ */ t(n.Close, { "data-spark-component": "dialog-close", render: a, ...e });
 }, D = ({
   "aria-label": o,
@@ -92,7 +93,7 @@ const x = ({ asChild: o = !1, ...e }) => {
     className: s(["absolute", "top-md", "right-xl"], e),
     asChild: !0,
     ...c,
-    children: /* @__PURE__ */ t(z, { intent: r, size: a, design: i, "aria-label": o, children: /* @__PURE__ */ t(j, { children: l }) })
+    children: /* @__PURE__ */ t(j, { intent: r, size: a, design: i, "aria-label": o, children: /* @__PURE__ */ t(H, { children: l }) })
   }
 ), A = Object.assign(D, {
   id: "CloseButton"
@@ -105,7 +106,7 @@ const b = ({
   ref: r,
   ...i
 }) => {
-  const { setIsFullScreen: l } = u();
+  const { setIsFullScreen: l } = f();
   return F(() => (a === "fullscreen" && l(!0), () => l(!1)), [l, a]), /* @__PURE__ */ t(
     n.Popup,
     {
@@ -113,7 +114,7 @@ const b = ({
       "data-spark-component": "dialog-content",
       role: "dialog",
       className: (d) => s(
-        E({
+        z({
           isNarrow: e,
           size: a,
           className: typeof o == "function" ? o(d) : o
@@ -187,11 +188,11 @@ const S = ({ className: o, ref: e, ...a }) => /* @__PURE__ */ t(
 );
 S.displayName = "Dialog.Title";
 const w = ({ asChild: o = !1, ...e }) => {
-  const a = m(o, "button");
+  const a = g(o, "button");
   return /* @__PURE__ */ t(n.Trigger, { "data-spark-component": "dialog-trigger", render: a, ...e });
 };
 w.displayName = "Dialog.Trigger";
-const M = Object.assign(f, {
+const M = Object.assign(m, {
   Trigger: w,
   Portal: C,
   Overlay: k,

package/dist/dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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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"}
+{"version":3,"file":"index.mjs","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.createHandle = BaseDialog.createHandle\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "15.0.0",
+  "version": "15.1.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -54,9 +54,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^15.0.0",
-    "@spark-ui/icons": "^15.0.0",
-    "@spark-ui/internal-utils": "^15.0.0",
+    "@spark-ui/hooks": "^15.1.0",
+    "@spark-ui/icons": "^15.1.0",
+    "@spark-ui/internal-utils": "^15.1.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",