@spark-ui/components 13.1.3 → 13.1.5

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":"qcAQMA,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,ECRaE,EAAS,CAAC,CAAE,SAAAC,EAAU,SAAAT,EAAW,GAAO,GAAGU,KAAsC,CAC5F,MAAMC,EAAOD,EAAK,KACZE,EAAmBC,EAAAA,OAAgB,IAAI,EAM7C,SAASC,GAA2B,CAC9BH,GAAQ,SAAS,gBACnBC,EAAiB,QAAU,SAAS,eAGjCD,GACH,WAAW,IAAM,CACTC,EAAiB,mBAAmB,aAC1CA,EAAiB,QAAQ,MAAA,CAC3B,EAAG,CAAC,CAER,CAEAG,OAAAA,YAAUD,EAA0B,CAACH,CAAI,CAAC,EAGxCP,MAACN,EAAA,CAAe,SAAAE,EACd,SAAAI,EAAAA,IAACY,EAAAA,KAAA,CAAkB,GAAGN,EAAO,SAAAD,CAAA,CAAS,CAAA,CACxC,CAEJ,EAEAD,EAAO,YAAc,cC/Cd,MAAMS,EAAO,CAAC,CACnB,SAAAR,EACA,UAAAS,EACA,MAAAC,EAAQ,GACR,IAAKC,EACL,GAAGV,CACL,IAA+B,CAC7B,MAAMW,EAAgBR,EAAAA,OAAuB,IAAI,EAC3CS,EAAMC,EAAAA,aAAaH,EAAcC,CAAa,EAE9C,CAAE,SAAArB,CAAA,EAAaK,EAAA,EAEf,CAAE,SAAAmB,CAAA,EAAaC,EAAAA,kBAAkBJ,CAAa,EAEpD,OACEjB,EAAAA,IAAC,MAAA,CACC,uBAAqB,cACrB,IAAAkB,EACA,UAAWI,EAAAA,GACT,uEACA,8BACA,CACG,cAAgB,CAACP,CAAA,EAEpBD,CAAA,EAEF,MAAO,CACL,GAAIlB,GAAY,CACd,UACE,4HACF,SAAU,oBAAoBwB,EAAS,IAAM,MAAQ,MAAM,MAAMA,EAAS,OAAS,MAAQ,MAAM,IACjG,aAAc,KAAKA,EAAS,IAAM,MAAQ,OAAO,EAAA,CACnD,EAED,GAAGd,EAEH,SAAAD,CAAA,CAAA,CAGP,EAEAQ,EAAK,YAAc,cCjDZ,MAAMU,EAASC,GAAsBxB,EAAAA,IAACyB,EAAAA,MAAA,CAAmB,GAAGD,EAAO,EAE1ED,EAAM,YAAc,eCCpB,MAAMG,EAAO,CAAC,CACZ,aAAcC,EACd,UAAAb,EACA,KAAAc,EAAO,KACP,OAAAC,EAAS,UACT,OAAAC,EAAS,QACT,SAAAzB,QAAY0B,EAAAA,MAAA,EAAS,EACrB,IAAAb,EACA,GAAGZ,CACL,IAEIN,EAAAA,IAACuB,EAAA,CACC,uBAAqB,sBACrB,YAAU,QACV,IAAAL,EACA,UAAWI,EAAAA,GAAG,CAAC,WAAY,SAAU,UAAU,EAAGR,CAAS,EAC3D,QAAO,GACN,GAAGR,EAEJ,SAAAN,EAAAA,IAACgC,EAAAA,WAAA,CAAW,OAAAH,EAAgB,KAAAD,EAAY,OAAAE,EAAgB,aAAYH,EAClE,SAAA3B,EAAAA,IAACiC,EAAAA,KAAA,CAAM,SAAA5B,CAAA,CAAS,CAAA,CAClB,CAAA,CAAA,EAKO6B,EAAc,OAAO,OAAOR,EAAM,CAC7C,GAAI,aACN,CAAC,EAEDA,EAAK,YAAc,qBC1BZ,MAAMS,EAAU,CAAC,CACtB,SAAA9B,EACA,UAAAS,EACA,SAAAsB,EAAW,GACX,KAAAR,EAAO,KACP,kBAAAS,EACA,IAAAnB,EACA,GAAGZ,CACL,IAAkC,CAChC,KAAM,CAAE,gBAAAR,CAAA,EAAoBG,EAAA,EAE5BU,OAAAA,EAAAA,UAAU,KACJiB,IAAS,cAAc9B,EAAgB,EAAI,EAExC,IAAMA,EAAgB,EAAK,GACjC,CAACA,EAAiB8B,CAAI,CAAC,EAGxB5B,EAAAA,IAACsC,EAAAA,QAAA,CACC,uBAAqB,iBACrB,IAAApB,EACA,UAAWqB,EAAAA,oBAAoB,CAC7B,UAAAzB,EACA,SAAAsB,EACA,KAAAR,CAAA,CACD,EACD,kBAAmBY,GAAK,CACOA,EAAE,OAAuB,QAAQ,sBAAsB,GASlFA,EAAE,eAAA,EAGJH,IAAoBG,CAAC,CACvB,EACC,GAAGlC,EAEH,SAAAD,CAAA,CAAA,CAGP,EAEA8B,EAAQ,YAAc,iBCvDf,MAAMM,EAAejB,GAC1BxB,MAAC0C,EAAAA,YAAA,CAAwB,uBAAqB,qBAAsB,GAAGlB,EAAO,EAGhFiB,EAAY,YAAc,qBCFnB,MAAME,EAAS,CAAC,CAAE,SAAAtC,EAAU,UAAAS,EAAW,IAAAI,EAAK,GAAGZ,KACpDN,EAAAA,IAAC,SAAA,CACC,uBAAqB,gBACrB,IAAAkB,EACA,UAAWI,EAAAA,GAAGR,EAAW,CAAC,QAAS,OAAO,CAAC,EAC1C,GAAGR,EAEH,SAAAD,CAAA,CACH,EAGFsC,EAAO,YAAc,gBCXd,MAAMC,EAAS,CAAC,CAAE,SAAAvC,EAAU,UAAAS,EAAW,IAAAI,EAAK,GAAGZ,KACpDN,EAAAA,IAAC,SAAA,CACC,uBAAqB,gBACrB,IAAAkB,EACA,UAAWI,EAAAA,GAAGR,EAAW,CAAC,QAAS,OAAO,CAAC,EAC1C,GAAGR,EAEH,SAAAD,CAAA,CACH,EAGFuC,EAAO,YAAc,gBCVd,MAAMC,EAAU,CAAC,CAAE,UAAA/B,EAAW,IAAAI,EAAK,GAAGZ,KAA8C,CACzF,KAAM,CAAE,aAAAT,CAAA,EAAiBI,EAAA,EAEzB,OACED,EAAAA,IAAC8C,EAAAA,QAAA,CACC,uBAAqB,iBACrB,IAAA5B,EACA,UAAWI,EAAAA,GACTzB,EAAe,SAAW,QAC1B,CAAC,QAAS,SAAU,WAAY,WAAY,WAAW,EACvD,CAAC,kBAAkB,EACnB,CAAC,mCAAmC,EACpC,CAAC,sCAAsC,EACvCiB,CAAA,EAED,GAAGR,CAAA,CAAA,CAGV,EAEAuC,EAAQ,YAAc,iBCzBf,MAAME,EAAS,CAAC,CAAE,SAAA1C,EAAU,GAAGC,CAAA,IACpCN,MAACgD,EAAAA,OAAA,CAAoB,GAAG1C,EAAO,SAAAD,EAAS,EAG1C0C,EAAO,YAAc,gBCDd,MAAME,EAAQ,CAAC,CAAE,UAAAnC,EAAW,IAAAI,EAAK,GAAGgC,KAEvClD,EAAAA,IAACmD,EAAAA,MAAA,CACC,uBAAqB,eACrB,IAAAjC,EACA,UAAWI,EAAAA,GACT,kCACA,qCACAR,CAAA,EAED,GAAGoC,CAAA,CAAA,EAKVD,EAAM,YAAc,eCRb,MAAMG,EAAW5B,GACtBxB,MAACqD,EAAAA,QAAA,CAAoB,uBAAqB,iBAAkB,GAAG7B,EAAO,EAGxE4B,EAAQ,YAAc,iBCNf,MAAMhD,EAYT,OAAO,OAAOsB,EAAM,CACtB,QAAA0B,EACA,OAAAL,EACA,QAAAF,EACA,QAAAV,EACA,OAAAS,EACA,KAAA/B,EACA,OAAA8B,EACA,MAAApB,EACA,YAAAW,EACA,MAAAe,EACA,YAAAR,CACF,CAAC,EAEDrC,EAAO,YAAc,SACrBA,EAAO,QAAQ,YAAc,iBAC7BgD,EAAQ,YAAc,iBACtBL,EAAO,YAAc,gBACrBF,EAAQ,YAAc,iBACtBV,EAAQ,YAAc,iBACtBS,EAAO,YAAc,gBACrB/B,EAAK,YAAc,cACnB8B,EAAO,YAAc,gBACrBT,EAAY,YAAc,qBAC1Be,EAAM,YAAc,eACpBR,EAAY,YAAc"}
+{"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","Body","className","inset","forwardedRef","scrollAreaRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","props","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","onInteractOutside","dialogContentStyles","e","Description","Footer","Header","Overlay","Portal","Title","others","Trigger"],"mappings":"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"}

package/dist/dialog/index.mjs

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

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 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.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 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","Body","className","inset","forwardedRef","scrollAreaRef","ref","useMergeRefs","overflow","useScrollOverflow","cx","Close","props","Root","ariaLabel","size","intent","design","CloseSVG","IconButton","Icon","CloseButton","Content","isNarrow","onInteractOutside","dialogContentStyles","e","Description","Footer","Header","Overlay","Portal","Title","others","Trigger"],"mappings":";;;;;;;;;;AAQA,MAAMA,IAAgBC,EAAyC,IAAI,GAEtDC,IAAiB,CAAC;AAAA,EAC7B,UAAUC;AAAA,EACV,UAAAC,IAAW;AACb,MAGM;AACJ,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK;AAEtD,SACE,gBAAAC;AAAA,IAACR,EAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL,cAAAK;AAAA,QACA,iBAAAC;AAAA,QACA,UAAAF;AAAA,MAAA;AAAA,MAGD,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP,GAEaM,IAAY,MAAM;AAC7B,QAAMC,IAAUC,EAAWX,CAAa;AAExC,MAAI,CAACU;AACH,UAAM,MAAM,iDAAiD;AAG/D,SAAOA;AACT,GCRaE,IAAS,CAAC,EAAE,UAAAC,GAAU,UAAAT,IAAW,IAAO,GAAGU,QAAsC;AAC5F,QAAMC,IAAOD,EAAK,MACZE,IAAmBC,EAAgB,IAAI;AAM7C,WAASC,IAA2B;AAClC,IAAIH,KAAQ,SAAS,kBACnBC,EAAiB,UAAU,SAAS,gBAGjCD,KACH,WAAW,MAAM;AACf,MAAMC,EAAiB,mBAAmB,eAC1CA,EAAiB,QAAQ,MAAA;AAAA,IAC3B,GAAG,CAAC;AAAA,EAER;AAEA,SAAAG,EAAUD,GAA0B,CAACH,CAAI,CAAC,GAGxC,gBAAAP,EAACN,GAAA,EAAe,UAAAE,GACd,UAAA,gBAAAI,EAACY,EAAY,MAAZ,EAAkB,GAAGN,GAAO,UAAAD,EAAA,CAAS,EAAA,CACxC;AAEJ;AAEAD,EAAO,cAAc;AC/Cd,MAAMS,IAAO,CAAC;AAAA,EACnB,UAAAR;AAAA,EACA,WAAAS;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,KAAKC;AAAA,EACL,GAAGV;AACL,MAA+B;AAC7B,QAAMW,IAAgBR,EAAuB,IAAI,GAC3CS,IAAMC,EAAaH,GAAcC,CAAa,GAE9C,EAAE,UAAArB,EAAA,IAAaK,EAAA,GAEf,EAAE,UAAAmB,EAAA,IAAaC,EAAkBJ,CAAa;AAEpD,SACE,gBAAAjB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,wBAAqB;AAAA,MACrB,KAAAkB;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,UACG,eAAgB,CAACP;AAAA,QAAA;AAAA,QAEpBD;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,GAAIlB,KAAY;AAAA,UACd,WACE;AAAA,UACF,UAAU,oBAAoBwB,EAAS,MAAM,QAAQ,MAAM,MAAMA,EAAS,SAAS,QAAQ,MAAM;AAAA,UACjG,cAAc,KAAKA,EAAS,MAAM,QAAQ,OAAO;AAAA,QAAA;AAAA,MACnD;AAAA,MAED,GAAGd;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAQ,EAAK,cAAc;ACjDZ,MAAMU,IAAQ,CAACC,MAAsB,gBAAAxB,EAACY,EAAY,OAAZ,EAAmB,GAAGY,GAAO;AAE1ED,EAAM,cAAc;ACCpB,MAAME,IAAO,CAAC;AAAA,EACZ,cAAcC;AAAA,EACd,WAAAZ;AAAA,EACA,MAAAa,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,UAAAxB,sBAAYyB,GAAA,EAAS;AAAA,EACrB,KAAAZ;AAAA,EACA,GAAGZ;AACL,MAEI,gBAAAN;AAAA,EAACuB;AAAA,EAAA;AAAA,IACC,wBAAqB;AAAA,IACrB,aAAU;AAAA,IACV,KAAAL;AAAA,IACA,WAAWI,EAAG,CAAC,YAAY,UAAU,UAAU,GAAGR,CAAS;AAAA,IAC3D,SAAO;AAAA,IACN,GAAGR;AAAA,IAEJ,UAAA,gBAAAN,EAAC+B,GAAA,EAAW,QAAAH,GAAgB,MAAAD,GAAY,QAAAE,GAAgB,cAAYH,GAClE,UAAA,gBAAA1B,EAACgC,GAAA,EAAM,UAAA3B,EAAA,CAAS,EAAA,CAClB;AAAA,EAAA;AAAA,GAKO4B,IAAc,OAAO,OAAOR,GAAM;AAAA,EAC7C,IAAI;AACN,CAAC;AAEDA,EAAK,cAAc;AC1BZ,MAAMS,IAAU,CAAC;AAAA,EACtB,UAAA7B;AAAA,EACA,WAAAS;AAAA,EACA,UAAAqB,IAAW;AAAA,EACX,MAAAR,IAAO;AAAA,EACP,mBAAAS;AAAA,EACA,KAAAlB;AAAA,EACA,GAAGZ;AACL,MAAkC;AAChC,QAAM,EAAE,iBAAAR,EAAA,IAAoBG,EAAA;AAE5B,SAAAU,EAAU,OACJgB,MAAS,gBAAc7B,EAAgB,EAAI,GAExC,MAAMA,EAAgB,EAAK,IACjC,CAACA,GAAiB6B,CAAI,CAAC,GAGxB,gBAAA3B;AAAA,IAACY,EAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB,KAAAM;AAAA,MACA,WAAWmB,EAAoB;AAAA,QAC7B,WAAAvB;AAAA,QACA,UAAAqB;AAAA,QACA,MAAAR;AAAA,MAAA,CACD;AAAA,MACD,mBAAmB,CAAAW,MAAK;AAStB,QAR6BA,EAAE,OAAuB,QAAQ,sBAAsB,KASlFA,EAAE,eAAA,GAGJF,IAAoBE,CAAC;AAAA,MACvB;AAAA,MACC,GAAGhC;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA6B,EAAQ,cAAc;ACvDf,MAAMK,IAAc,CAACf,MAC1B,gBAAAxB,EAACY,EAAY,aAAZ,EAAwB,wBAAqB,sBAAsB,GAAGY,GAAO;AAGhFe,EAAY,cAAc;ACFnB,MAAMC,IAAS,CAAC,EAAE,UAAAnC,GAAU,WAAAS,GAAW,KAAAI,GAAK,GAAGZ,QACpD,gBAAAN;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,wBAAqB;AAAA,IACrB,KAAAkB;AAAA,IACA,WAAWI,EAAGR,GAAW,CAAC,SAAS,OAAO,CAAC;AAAA,IAC1C,GAAGR;AAAA,IAEH,UAAAD;AAAA,EAAA;AACH;AAGFmC,EAAO,cAAc;ACXd,MAAMC,IAAS,CAAC,EAAE,UAAApC,GAAU,WAAAS,GAAW,KAAAI,GAAK,GAAGZ,QACpD,gBAAAN;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,wBAAqB;AAAA,IACrB,KAAAkB;AAAA,IACA,WAAWI,EAAGR,GAAW,CAAC,SAAS,OAAO,CAAC;AAAA,IAC1C,GAAGR;AAAA,IAEH,UAAAD;AAAA,EAAA;AACH;AAGFoC,EAAO,cAAc;ACVd,MAAMC,IAAU,CAAC,EAAE,WAAA5B,GAAW,KAAAI,GAAK,GAAGZ,QAA8C;AACzF,QAAM,EAAE,cAAAT,EAAA,IAAiBI,EAAA;AAEzB,SACE,gBAAAD;AAAA,IAACY,EAAY;AAAA,IAAZ;AAAA,MACC,wBAAqB;AAAA,MACrB,KAAAM;AAAA,MACA,WAAWI;AAAA,QACTzB,IAAe,WAAW;AAAA,QAC1B,CAAC,SAAS,UAAU,YAAY,YAAY,WAAW;AAAA,QACvD,CAAC,kBAAkB;AAAA,QACnB,CAAC,mCAAmC;AAAA,QACpC,CAAC,sCAAsC;AAAA,QACvCiB;AAAA,MAAA;AAAA,MAED,GAAGR;AAAA,IAAA;AAAA,EAAA;AAGV;AAEAoC,EAAQ,cAAc;ACzBf,MAAMC,IAAS,CAAC,EAAE,UAAAtC,GAAU,GAAGC,EAAA,MACpC,gBAAAN,EAACY,EAAY,QAAZ,EAAoB,GAAGN,GAAO,UAAAD,EAAA,CAAS;AAG1CsC,EAAO,cAAc;ACDd,MAAMC,IAAQ,CAAC,EAAE,WAAA9B,GAAW,KAAAI,GAAK,GAAG2B,QAEvC,gBAAA7C;AAAA,EAACY,EAAY;AAAA,EAAZ;AAAA,IACC,wBAAqB;AAAA,IACrB,KAAAM;AAAA,IACA,WAAWI;AAAA,MACT;AAAA,MACA;AAAA,MACAR;AAAA,IAAA;AAAA,IAED,GAAG+B;AAAA,EAAA;AAAA;AAKVD,EAAM,cAAc;ACRb,MAAME,IAAU,CAACtB,MACtB,gBAAAxB,EAACY,EAAY,SAAZ,EAAoB,wBAAqB,kBAAkB,GAAGY,GAAO;AAGxEsB,EAAQ,cAAc;ACNf,MAAM1C,IAYT,OAAO,OAAOqB,GAAM;AAAA,EACtB,SAAAqB;AAAA,EACA,QAAAH;AAAA,EACA,SAAAD;AAAA,EACA,SAAAR;AAAA,EACA,QAAAO;AAAA,EACA,MAAA5B;AAAA,EACA,QAAA2B;AAAA,EACA,OAAAjB;AAAA,EACA,aAAAU;AAAA,EACA,OAAAW;AAAA,EACA,aAAAL;AACF,CAAC;AAEDnC,EAAO,cAAc;AACrBA,EAAO,QAAQ,cAAc;AAC7B0C,EAAQ,cAAc;AACtBH,EAAO,cAAc;AACrBD,EAAQ,cAAc;AACtBR,EAAQ,cAAc;AACtBO,EAAO,cAAc;AACrB5B,EAAK,cAAc;AACnB2B,EAAO,cAAc;AACrBP,EAAY,cAAc;AAC1BW,EAAM,cAAc;AACpBL,EAAY,cAAc;"}

package/dist/divider/index.d.mts

@@ -0,0 +1,6 @@
+import { Divider as Root } from './Divider';
+import { DividerContent } from './DividerContent';
+export { type DividerContentProps } from './DividerContent';
+export declare const Divider: typeof Root & {
+    Content: typeof DividerContent;
+};

package/dist/divider/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("../index-DnaHaH_0.js"),e=require("@spark-ui/internal-utils"),y=require("react"),z=require("../index-ChLwd62c.js");function E(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const r=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(o,i,r.get?r:{enumerable:!0,get:()=>t[i]})}}return o.default=t,Object.freeze(o)}const h=E(y);var x="Separator",m="horizontal",O=["horizontal","vertical"],u=h.forwardRef((t,o)=>{const{decorative:i,orientation:r=m,...a}=t,n=N(r)?r:m,s=i?{role:"none"}:{"aria-orientation":n==="vertical"?n:void 0,role:"separator"};return l.jsx(z.Primitive.div,{"data-orientation":n,...s,...a,ref:o})});u.displayName=x;function N(t){return O.includes(t)}var j=u;const D=[{intent:"current",isEmpty:!0,class:e.tw(["border-current"])},{intent:"current",isEmpty:!1,class:e.tw(["before:border-current after:border-current"])},{intent:"outline",isEmpty:!0,class:e.tw(["border-outline"])},{intent:"outline",isEmpty:!1,class:e.tw(["before:border-outline after:border-outline"])}],S=c.cva(["overflow-hidden group"],{variants:{isEmpty:{true:["border-solid"],false:["inline-flex items-center","after:border-solid before:border-solid"]},orientation:{vertical:["w-fit inline-flex"],horizontal:["w-full"]},writingMode:{"horizontal-tb":[],"vertical-lr":[]},alignment:{start:[],end:[],center:[]},intent:{current:[],outline:[]}},defaultVariants:{orientation:"horizontal",writingMode:"horizontal-tb",alignment:"center",intent:"outline"},compoundVariants:[{isEmpty:!0,orientation:"horizontal",class:e.tw(["my-lg border-t-sm"])},{isEmpty:!0,orientation:"vertical",class:e.tw(["mx-lg min-h-sz-24 border-l-sm"])},{isEmpty:!1,orientation:"horizontal",writingMode:"horizontal-tb",class:e.tw(["flex-row my-sm grow-0","before:border-t-sm","after:border-t-sm","*:px-lg"])},{isEmpty:!1,orientation:"vertical",writingMode:"horizontal-tb",class:e.tw(["flex-col mx-sm","before:border-l-sm","after:border-l-sm","*:py-lg"])},{isEmpty:!1,orientation:"vertical",writingMode:"vertical-lr",class:e.tw(["flex-col mx-sm","before:border-l-sm","after:border-l-sm","*:px-lg"])},{isEmpty:!1,orientation:"horizontal",alignment:"end",class:e.tw(["after:w-sz-40 before:grow after:grow-0"])},{isEmpty:!1,orientation:"horizontal",alignment:"start",class:e.tw(["before:w-sz-40 before:grow-0 after:grow"])},{isEmpty:!1,orientation:"horizontal",alignment:"center",class:e.tw(["justify-center before:grow after:grow"])},{isEmpty:!1,orientation:"vertical",alignment:"end",class:e.tw(["after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40"])},{isEmpty:!1,orientation:"vertical",alignment:"start",class:e.tw(["before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40"])},{isEmpty:!1,orientation:"vertical",alignment:"center",class:e.tw(["justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40"])},...D]}),p=({asChild:t,className:o,isDecorative:i=!1,children:r,orientation:a="horizontal",writingMode:n="horizontal-tb",alignment:f="center",intent:s="outline",ref:g,...w})=>{const v=t?!r?.props?.children:!r;return l.jsx(j,{"data-spark-component":"divider",asChild:t,className:c.cx(S({isEmpty:v,orientation:a,alignment:f,intent:s,writingMode:n}),o),orientation:a,ref:g,decorative:i,...w,"data-writing-mode":n,children:r})};p.displayName="Divider";const b=({children:t,ref:o,className:i,...r})=>t?l.jsx("span",{"data-spark-component":"divider-content",ref:o,...r,className:c.cx("group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]",i),children:t}):null;b.displayName="Divider.Content";const d=Object.assign(p,{Content:b});d.displayName="Divider";d.Content.displayName="Divider.Content";exports.Divider=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),n=require("class-variance-authority"),p=require("radix-ui"),t=require("@spark-ui/internal-utils"),y=[{intent:"current",isEmpty:!0,class:t.tw(["border-current"])},{intent:"current",isEmpty:!1,class:t.tw(["before:border-current after:border-current"])},{intent:"outline",isEmpty:!0,class:t.tw(["border-outline"])},{intent:"outline",isEmpty:!1,class:t.tw(["before:border-outline after:border-outline"])}],v=n.cva(["overflow-hidden group"],{variants:{isEmpty:{true:["border-solid"],false:["inline-flex items-center","after:border-solid before:border-solid"]},orientation:{vertical:["w-fit inline-flex"],horizontal:["w-full"]},writingMode:{"horizontal-tb":[],"vertical-lr":[]},alignment:{start:[],end:[],center:[]},intent:{current:[],outline:[]}},defaultVariants:{orientation:"horizontal",writingMode:"horizontal-tb",alignment:"center",intent:"outline"},compoundVariants:[{isEmpty:!0,orientation:"horizontal",class:t.tw(["my-lg border-t-sm"])},{isEmpty:!0,orientation:"vertical",class:t.tw(["mx-lg min-h-sz-24 border-l-sm"])},{isEmpty:!1,orientation:"horizontal",writingMode:"horizontal-tb",class:t.tw(["flex-row my-sm grow-0","before:border-t-sm","after:border-t-sm","*:px-lg"])},{isEmpty:!1,orientation:"vertical",writingMode:"horizontal-tb",class:t.tw(["flex-col mx-sm","before:border-l-sm","after:border-l-sm","*:py-lg"])},{isEmpty:!1,orientation:"vertical",writingMode:"vertical-lr",class:t.tw(["flex-col mx-sm","before:border-l-sm","after:border-l-sm","*:px-lg"])},{isEmpty:!1,orientation:"horizontal",alignment:"end",class:t.tw(["after:w-sz-40 before:grow after:grow-0"])},{isEmpty:!1,orientation:"horizontal",alignment:"start",class:t.tw(["before:w-sz-40 before:grow-0 after:grow"])},{isEmpty:!1,orientation:"horizontal",alignment:"center",class:t.tw(["justify-center before:grow after:grow"])},{isEmpty:!1,orientation:"vertical",alignment:"end",class:t.tw(["after:h-sz-40 before:grow after:grow-0 before:min-h-sz-40"])},{isEmpty:!1,orientation:"vertical",alignment:"start",class:t.tw(["before:h-sz-40 before:grow-0 after:grow after:min-h-sz-40"])},{isEmpty:!1,orientation:"vertical",alignment:"center",class:t.tw(["justify-center before:grow after:grow before:min-h-sz-40 after:min-h-sz-40"])},...y]}),m=({asChild:e,className:i,isDecorative:o=!1,children:r,orientation:s="horizontal",writingMode:l="horizontal-tb",alignment:f="center",intent:b="outline",ref:w,...g})=>{const u=e?!r?.props?.children:!r;return c.jsx(p.Separator.Root,{"data-spark-component":"divider",asChild:e,className:n.cx(v({isEmpty:u,orientation:s,alignment:f,intent:b,writingMode:l}),i),orientation:s,ref:w,decorative:o,...g,"data-writing-mode":l,children:r})};m.displayName="Divider";const d=({children:e,ref:i,className:o,...r})=>e?c.jsx("span",{"data-spark-component":"divider-content",ref:i,...r,className:n.cx("group-data-[writing-mode=vertical-lr]:[writing-mode:vertical-lr]",o),children:e}):null;d.displayName="Divider.Content";const a=Object.assign(m,{Content:d});a.displayName="Divider";a.Content.displayName="Divider.Content";exports.Divider=a;
 //# sourceMappingURL=index.js.map