@spark-ui/components 13.1.4 → 13.2.0

package/dist/dialog/index.mjs

@@ -1,316 +1,221 @@
-import {
-  dialogContentStyles
-} from "../chunk-XZ47F6TP.mjs";
-import {
-  IconButton
-} from "../chunk-DCXWGQVZ.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-2YM6GKWW.mjs";
-import "../chunk-GAK4SC2F.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/dialog/Dialog.tsx
-import { Dialog as RadixDialog } from "radix-ui";
-import { useEffect, useRef } from "react";
-
-// src/dialog/DialogContext.tsx
-import { createContext, useContext, useState } from "react";
-import { jsx } from "react/jsx-runtime";
-var DialogContext = createContext(null);
-var DialogProvider = ({
-  children: childrenProp,
-  withFade = false
+import { jsx as l } from "react/jsx-runtime";
+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: o = !1
 }) => {
-  const [isFullScreen, setIsFullScreen] = useState(false);
-  return /* @__PURE__ */ jsx(
-    DialogContext.Provider,
+  const [t, a] = O(!1);
+  return /* @__PURE__ */ l(
+    T.Provider,
     {
       value: {
-        isFullScreen,
-        setIsFullScreen,
-        withFade
+        isFullScreen: t,
+        setIsFullScreen: a,
+        withFade: o
       },
-      children: childrenProp
+      children: e
     }
   );
-};
-var useDialog = () => {
-  const context = useContext(DialogContext);
-  if (!context) {
+}, m = () => {
+  const e = S(T);
+  if (!e)
     throw Error("useDialog must be used within a Dialog provider");
+  return e;
+}, 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 context;
-};
-
-// src/dialog/Dialog.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Dialog = ({ children, withFade = false, ...rest }) => {
-  const open = rest.open;
-  const activeElementRef = useRef(null);
-  function handleActiveElementFocus() {
-    if (open && document.activeElement) {
-      activeElementRef.current = document.activeElement;
-    }
-    if (!open) {
-      setTimeout(() => {
-        if (!(activeElementRef.current instanceof HTMLElement)) return;
-        activeElementRef.current.focus();
-      }, 0);
-    }
-  }
-  useEffect(handleActiveElementFocus, [open]);
-  return /* @__PURE__ */ jsx2(DialogProvider, { withFade, children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
+  return k(i, [a]), /* @__PURE__ */ l(A, { withFade: o, children: /* @__PURE__ */ l(s.Root, { ...t, children: e }) });
 };
-Dialog.displayName = "Dialog.Root";
-
-// src/dialog/DialogBody.tsx
-import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
-import { useScrollOverflow } from "@spark-ui/hooks/use-scroll-overflow";
-import { cx } from "class-variance-authority";
-import { useRef as useRef2 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Body = ({
-  children,
-  className,
-  inset = false,
-  ref: forwardedRef,
-  ...rest
+F.displayName = "Dialog.Root";
+const g = ({
+  children: e,
+  className: o,
+  inset: t = !1,
+  ref: a,
+  ...r
 }) => {
-  const scrollAreaRef = useRef2(null);
-  const ref = useMergeRefs(forwardedRef, scrollAreaRef);
-  const { withFade } = useDialog();
-  const { overflow } = useScrollOverflow(scrollAreaRef);
-  return /* @__PURE__ */ jsx3(
+  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,
-      className: cx(
+      ref: p,
+      className: d(
         "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
         "transition-all duration-300",
         {
-          ["px-xl py-lg"]: !inset
+          "px-xl py-lg": !t
         },
-        className
+        o
       ),
       style: {
-        ...withFade && {
+        ...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% + ${overflow.top ? "0px" : "44px"} + ${overflow.bottom ? "0px" : "44px"})`,
-          maskPosition: `0 ${overflow.top ? "0px" : "-44px"}`
+          maskSize: `100% calc(100% + ${c.top ? "0px" : "44px"} + ${c.bottom ? "0px" : "44px"})`,
+          maskPosition: `0 ${c.top ? "0px" : "-44px"}`
         }
       },
-      ...rest,
-      children
+      ...r,
+      children: e
     }
   );
 };
-Body.displayName = "Dialog.Body";
-
-// src/dialog/DialogClose.tsx
-import { Dialog as RadixDialog2 } from "radix-ui";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Close = (props) => /* @__PURE__ */ jsx4(RadixDialog2.Close, { ...props });
-Close.displayName = "Dialog.Close";
-
-// src/dialog/DialogCloseButton.tsx
-import { Close as CloseSVG } from "@spark-ui/icons/Close";
-import { cx as cx2 } from "class-variance-authority";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var Root = ({
-  "aria-label": ariaLabel,
-  className,
-  size = "md",
-  intent = "neutral",
-  design = "ghost",
-  children = /* @__PURE__ */ jsx5(CloseSVG, {}),
-  ref,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsx5(
-    Close,
-    {
-      "data-spark-component": "dialog-close-button",
-      "data-part": "close",
-      ref,
-      className: cx2(["absolute", "top-md", "right-xl"], className),
-      asChild: true,
-      ...rest,
-      children: /* @__PURE__ */ jsx5(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children }) })
-    }
-  );
-};
-var CloseButton = Object.assign(Root, {
+g.displayName = "Dialog.Body";
+const u = (e) => /* @__PURE__ */ l(s.Close, { ...e });
+u.displayName = "Dialog.Close";
+const E = ({
+  "aria-label": e,
+  className: o,
+  size: t = "md",
+  intent: a = "neutral",
+  design: r = "ghost",
+  children: i = /* @__PURE__ */ l($, {}),
+  ref: p,
+  ...n
+}) => /* @__PURE__ */ l(
+  u,
+  {
+    "data-spark-component": "dialog-close-button",
+    "data-part": "close",
+    ref: p,
+    className: d(["absolute", "top-md", "right-xl"], o),
+    asChild: !0,
+    ...n,
+    children: /* @__PURE__ */ l(j, { intent: a, size: t, design: r, "aria-label": e, children: /* @__PURE__ */ l(H, { children: i }) })
+  }
+), w = Object.assign(E, {
   id: "CloseButton"
 });
-Root.displayName = "Dialog.CloseButton";
-
-// src/dialog/DialogContent.tsx
-import { Dialog as RadixDialog3 } from "radix-ui";
-import { useEffect as useEffect2 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var Content = ({
-  children,
-  className,
-  isNarrow = false,
-  size = "md",
-  onInteractOutside,
-  ref,
-  ...rest
+E.displayName = "Dialog.CloseButton";
+const f = ({
+  children: e,
+  className: o,
+  isNarrow: t = !1,
+  size: a = "md",
+  onInteractOutside: r,
+  ref: i,
+  ...p
 }) => {
-  const { setIsFullScreen } = useDialog();
-  useEffect2(() => {
-    if (size === "fullscreen") setIsFullScreen(true);
-    return () => setIsFullScreen(false);
-  }, [setIsFullScreen, size]);
-  return /* @__PURE__ */ jsx6(
-    RadixDialog3.Content,
+  const { setIsFullScreen: n } = m();
+  return k(() => (a === "fullscreen" && n(!0), () => n(!1)), [n, a]), /* @__PURE__ */ l(
+    s.Content,
     {
       "data-spark-component": "dialog-content",
-      ref,
-      className: dialogContentStyles({
-        className,
-        isNarrow,
-        size
+      ref: i,
+      className: z({
+        className: o,
+        isNarrow: t,
+        size: a
       }),
-      onInteractOutside: (e) => {
-        const isForegroundElement = e.target.closest(".z-toast, .z-popover");
-        if (isForegroundElement) {
-          e.preventDefault();
-        }
-        onInteractOutside?.(e);
+      onInteractOutside: (c) => {
+        c.target.closest(".z-toast, .z-popover") && c.preventDefault(), r?.(c);
       },
-      ...rest,
-      children
+      ...p,
+      children: e
     }
   );
 };
-Content.displayName = "Dialog.Content";
-
-// src/dialog/DialogDescription.tsx
-import { Dialog as RadixDialog4 } from "radix-ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Description = (props) => /* @__PURE__ */ jsx7(RadixDialog4.Description, { "data-spark-component": "dialog-description", ...props });
-Description.displayName = "Dialog.Description";
-
-// src/dialog/DialogFooter.tsx
-import { cx as cx3 } from "class-variance-authority";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8(
+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,
-    className: cx3(className, ["px-xl", "py-lg"]),
-    ...rest,
-    children
+    ref: t,
+    className: d(o, ["px-xl", "py-lg"]),
+    ...a,
+    children: e
   }
 );
-Footer.displayName = "Dialog.Footer";
-
-// src/dialog/DialogHeader.tsx
-import { cx as cx4 } from "class-variance-authority";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9(
+D.displayName = "Dialog.Footer";
+const N = ({ children: e, className: o, ref: t, ...a }) => /* @__PURE__ */ l(
   "header",
   {
     "data-spark-component": "dialog-header",
-    ref,
-    className: cx4(className, ["px-xl", "py-lg"]),
-    ...rest,
-    children
+    ref: t,
+    className: d(o, ["px-xl", "py-lg"]),
+    ...a,
+    children: e
   }
 );
-Header.displayName = "Dialog.Header";
-
-// src/dialog/DialogOverlay.tsx
-import { cx as cx5 } from "class-variance-authority";
-import { Dialog as RadixDialog5 } from "radix-ui";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Overlay = ({ className, ref, ...rest }) => {
-  const { isFullScreen } = useDialog();
-  return /* @__PURE__ */ jsx10(
-    RadixDialog5.Overlay,
+N.displayName = "Dialog.Header";
+const x = ({ className: e, ref: o, ...t }) => {
+  const { isFullScreen: a } = m();
+  return /* @__PURE__ */ l(
+    s.Overlay,
     {
       "data-spark-component": "dialog-overlay",
-      ref,
-      className: cx5(
-        isFullScreen ? "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"],
         ["data-[state=closed]:animate-fade-out"],
-        className
-      ),
-      ...rest
-    }
-  );
-};
-Overlay.displayName = "Dialog.Overlay";
-
-// src/dialog/DialogPortal.tsx
-import { Dialog as RadixDialog6 } from "radix-ui";
-import { jsx as jsx11 } from "react/jsx-runtime";
-var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx11(RadixDialog6.Portal, { ...rest, children });
-Portal.displayName = "Dialog.Portal";
-
-// src/dialog/DialogTitle.tsx
-import { cx as cx6 } from "class-variance-authority";
-import { Dialog as RadixDialog7 } from "radix-ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Title = ({ className, ref, ...others }) => {
-  return /* @__PURE__ */ jsx12(
-    RadixDialog7.Title,
-    {
-      "data-spark-component": "dialog-title",
-      ref,
-      className: cx6(
-        "text-headline-1 text-on-surface",
-        "group-has-data-[part=close]:pr-3xl",
-        className
+        e
       ),
-      ...others
+      ...t
     }
   );
 };
-Title.displayName = "Dialog.Title";
-
-// src/dialog/DialogTrigger.tsx
-import { Dialog as RadixDialog8 } from "radix-ui";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var Trigger = (props) => /* @__PURE__ */ jsx13(RadixDialog8.Trigger, { "data-spark-component": "dialog-trigger", ...props });
-Trigger.displayName = "Dialog.Trigger";
-
-// src/dialog/index.ts
-var Dialog2 = Object.assign(Dialog, {
-  Trigger,
-  Portal,
-  Overlay,
-  Content,
-  Header,
-  Body,
-  Footer,
-  Close,
-  CloseButton,
-  Title,
-  Description
+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: o,
+    className: d(
+      "text-headline-1 text-on-surface",
+      "group-has-data-[part=close]:pr-3xl",
+      e
+    ),
+    ...t
+  }
+);
+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
 });
-Dialog2.displayName = "Dialog";
-Dialog2.Trigger.displayName = "Dialog.Trigger";
-Trigger.displayName = "Dialog.Trigger";
-Portal.displayName = "Dialog.Portal";
-Overlay.displayName = "Dialog.Overlay";
-Content.displayName = "Dialog.Content";
-Header.displayName = "Dialog.Header";
-Body.displayName = "Dialog.Body";
-Footer.displayName = "Dialog.Footer";
-CloseButton.displayName = "Dialog.CloseButton";
-Title.displayName = "Dialog.Title";
-Description.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 {
-  Dialog2 as Dialog
+  B as Dialog
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/dialog/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/dialog/Dialog.tsx","../../src/dialog/DialogContext.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 { 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 { 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 { 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"],"mappings":"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","names":["jsx","useRef","jsx","useRef","RadixDialog","jsx","cx","jsx","cx","RadixDialog","useEffect","jsx","useEffect","RadixDialog","RadixDialog","jsx","cx","jsx","cx","jsx","cx","RadixDialog","jsx","RadixDialog","cx","RadixDialog","jsx","cx","RadixDialog","jsx","RadixDialog","jsx","Dialog"]}
+{"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":"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"}

package/dist/divider/Divider.d.ts

@@ -0,0 +1,30 @@
+import { HTMLAttributes, ReactElement, Ref } from 'react';
+import { DividerStylesProps } from './Divider.styles';
+export interface DividerProps extends HTMLAttributes<HTMLDivElement>, Omit<DividerStylesProps, 'isEmpty'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    children?: ReactElement;
+    /**
+     * The orientation of the inner content.
+     */
+    alignment?: 'start' | 'end' | 'center';
+    /**
+     * The orientation of the separator.
+     */
+    orientation?: 'vertical' | 'horizontal';
+    /**
+     * When true, signifies that it is purely visual, carries no semantic meaning, and ensures it is not present in the accessibility tree.
+     */
+    isDecorative?: boolean;
+    /**
+     * Color scheme of the divider.
+     */
+    intent?: 'outline' | 'current';
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const Divider: {
+    ({ asChild, className, isDecorative, children, orientation, writingMode, alignment, intent, ref, ...props }: DividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/divider/Divider.styles.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const dividerStyles: (props?: ({
+    isEmpty?: boolean | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    writingMode?: "horizontal-tb" | "vertical-lr" | null | undefined;
+    alignment?: "center" | "end" | "start" | null | undefined;
+    intent?: "current" | "outline" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type DividerStylesProps = VariantProps<typeof dividerStyles>;

package/dist/divider/DividerContent.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+export interface DividerContentProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: boolean;
+    children?: ReactNode;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const DividerContent: {
+    ({ children, ref, className, ...props }: DividerContentProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};