@spark-ui/components 12.2.0 → 13.0.1

package/dist/dialog/index.d.mts

@@ -1,13 +1,62 @@
-import { C as CloseProps, D as Dialog$1, T as Trigger, P as Portal, O as Overlay, a as Content, H as Header, B as Body, F as Footer, b as Close, c as Title, d as Description } from '../DialogTrigger-woU7vsJi.mjs';
-export { h as DialogBodyProps, f as DialogContentProps, n as DialogDescriptionProps, i as DialogFooterProps, g as DialogHeaderProps, k as DialogOverlayProps, l as DialogPortalProps, e as DialogProps, m as DialogTitleProps, j as DialogTriggerProps } from '../DialogTrigger-woU7vsJi.mjs';
+import { Dialog as Dialog$2 } from 'radix-ui';
+import { ReactElement, ReactNode, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconButtonProps } from '../icon-button/index.mjs';
-import 'radix-ui';
-import 'react';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 import '../button/index.mjs';
 
+interface DialogProps {
+    /**
+     * Children of the component.
+     */
+    children?: Dialog$2.DialogProps['children'];
+    /**
+     * Specifies if the dialog is open or not.
+     */
+    open?: Dialog$2.DialogProps['open'];
+    /**
+     * Default open state.
+     */
+    defaultOpen?: Dialog$2.DialogProps['defaultOpen'];
+    /**
+     * Handler executen on every dialog open state change.
+     */
+    onOpenChange?: Dialog$2.DialogProps['onOpenChange'];
+    /**
+     * Specifies if the dialog is a modal.
+     */
+    modal?: Dialog$2.DialogProps['modal'];
+    /**
+     * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).
+     */
+    withFade?: boolean;
+}
+declare const Dialog$1: {
+    ({ children, withFade, ...rest }: DialogProps): ReactElement;
+    displayName: string;
+};
+
+interface BodyProps {
+    children: ReactNode;
+    className?: string;
+    tabIndex?: number;
+    ref?: Ref<HTMLDivElement>;
+    inset?: boolean;
+}
+declare const Body: {
+    ({ children, className, inset, ref: forwardedRef, ...rest }: BodyProps): ReactElement;
+    displayName: string;
+};
+
+type CloseProps = Dialog$2.DialogCloseProps & {
+    ref?: Ref<HTMLButtonElement>;
+};
+declare const Close: {
+    (props: CloseProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type CloseButtonProps = CloseProps & Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>;
 declare const CloseButton: {
     ({ "aria-label": ariaLabel, className, size, intent, design, children, ref, ...rest }: CloseButtonProps): react_jsx_runtime.JSX.Element;
@@ -16,6 +65,90 @@ declare const CloseButton: {
     id: string;
 };
 
+declare const dialogContentStyles: (props?: ({
+    size?: "fullscreen" | "sm" | "md" | "lg" | null | undefined;
+    isNarrow?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
+
+interface ContentProps extends Dialog$2.DialogContentProps, DialogContentStylesProps {
+    /**
+     * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.
+     */
+    isNarrow?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Content: {
+    ({ children, className, isNarrow, size, onInteractOutside, ref, ...rest }: ContentProps): ReactElement;
+    displayName: string;
+};
+
+type DescriptionProps = Dialog$2.DialogDescriptionProps & {
+    ref?: Ref<HTMLParagraphElement>;
+};
+declare const Description: {
+    (props: DescriptionProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FooterProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Footer: {
+    ({ children, className, ref, ...rest }: FooterProps): ReactElement;
+    displayName: string;
+};
+
+interface HeaderProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Header: {
+    ({ children, className, ref, ...rest }: HeaderProps): ReactElement;
+    displayName: string;
+};
+
+type OverlayProps = Dialog$2.DialogOverlayProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+declare const Overlay: {
+    ({ className, ref, ...rest }: OverlayProps): ReactElement | null;
+    displayName: string;
+};
+
+type PortalProps = Dialog$2.DialogPortalProps;
+declare const Portal: {
+    ({ children, ...rest }: PortalProps): ReactElement;
+    displayName: string;
+};
+
+type TitleProps = Dialog$2.DialogTitleProps & {
+    ref?: Ref<HTMLHeadingElement>;
+};
+declare const Title: {
+    ({ className, ref, ...others }: TitleProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TriggerProps {
+    /**
+     * Children of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: Dialog$2.DialogTriggerProps['asChild'];
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const Trigger: {
+    (props: TriggerProps): ReactElement;
+    displayName: string;
+};
+
 declare const Dialog: typeof Dialog$1 & {
     Trigger: typeof Trigger;
     Portal: typeof Portal;
@@ -30,4 +163,4 @@ declare const Dialog: typeof Dialog$1 & {
     Description: typeof Description;
 };
 
-export { Dialog, type CloseButtonProps as DialogCloseButtonProps, CloseProps as DialogCloseProps };
+export { Dialog, type BodyProps as DialogBodyProps, type CloseButtonProps as DialogCloseButtonProps, type CloseProps as DialogCloseProps, type ContentProps as DialogContentProps, type DescriptionProps as DialogDescriptionProps, type FooterProps as DialogFooterProps, type HeaderProps as DialogHeaderProps, type OverlayProps as DialogOverlayProps, type PortalProps as DialogPortalProps, type DialogProps, type TitleProps as DialogTitleProps, type TriggerProps as DialogTriggerProps };

package/dist/dialog/index.d.ts

@@ -1,13 +1,62 @@
-import { C as CloseProps, D as Dialog$1, T as Trigger, P as Portal, O as Overlay, a as Content, H as Header, B as Body, F as Footer, b as Close, c as Title, d as Description } from '../DialogTrigger-woU7vsJi.js';
-export { h as DialogBodyProps, f as DialogContentProps, n as DialogDescriptionProps, i as DialogFooterProps, g as DialogHeaderProps, k as DialogOverlayProps, l as DialogPortalProps, e as DialogProps, m as DialogTitleProps, j as DialogTriggerProps } from '../DialogTrigger-woU7vsJi.js';
+import { Dialog as Dialog$2 } from 'radix-ui';
+import { ReactElement, ReactNode, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { IconButtonProps } from '../icon-button/index.js';
-import 'radix-ui';
-import 'react';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 import '../button/index.js';
 
+interface DialogProps {
+    /**
+     * Children of the component.
+     */
+    children?: Dialog$2.DialogProps['children'];
+    /**
+     * Specifies if the dialog is open or not.
+     */
+    open?: Dialog$2.DialogProps['open'];
+    /**
+     * Default open state.
+     */
+    defaultOpen?: Dialog$2.DialogProps['defaultOpen'];
+    /**
+     * Handler executen on every dialog open state change.
+     */
+    onOpenChange?: Dialog$2.DialogProps['onOpenChange'];
+    /**
+     * Specifies if the dialog is a modal.
+     */
+    modal?: Dialog$2.DialogProps['modal'];
+    /**
+     * Specifies if the dialog should have a fade animation on its body (in case it is scrollable).
+     */
+    withFade?: boolean;
+}
+declare const Dialog$1: {
+    ({ children, withFade, ...rest }: DialogProps): ReactElement;
+    displayName: string;
+};
+
+interface BodyProps {
+    children: ReactNode;
+    className?: string;
+    tabIndex?: number;
+    ref?: Ref<HTMLDivElement>;
+    inset?: boolean;
+}
+declare const Body: {
+    ({ children, className, inset, ref: forwardedRef, ...rest }: BodyProps): ReactElement;
+    displayName: string;
+};
+
+type CloseProps = Dialog$2.DialogCloseProps & {
+    ref?: Ref<HTMLButtonElement>;
+};
+declare const Close: {
+    (props: CloseProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 type CloseButtonProps = CloseProps & Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>;
 declare const CloseButton: {
     ({ "aria-label": ariaLabel, className, size, intent, design, children, ref, ...rest }: CloseButtonProps): react_jsx_runtime.JSX.Element;
@@ -16,6 +65,90 @@ declare const CloseButton: {
     id: string;
 };
 
+declare const dialogContentStyles: (props?: ({
+    size?: "fullscreen" | "sm" | "md" | "lg" | null | undefined;
+    isNarrow?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>;
+
+interface ContentProps extends Dialog$2.DialogContentProps, DialogContentStylesProps {
+    /**
+     * When set to true, the content will adjust its width to fit the content rather than taking up the full available width.
+     */
+    isNarrow?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Content: {
+    ({ children, className, isNarrow, size, onInteractOutside, ref, ...rest }: ContentProps): ReactElement;
+    displayName: string;
+};
+
+type DescriptionProps = Dialog$2.DialogDescriptionProps & {
+    ref?: Ref<HTMLParagraphElement>;
+};
+declare const Description: {
+    (props: DescriptionProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface FooterProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Footer: {
+    ({ children, className, ref, ...rest }: FooterProps): ReactElement;
+    displayName: string;
+};
+
+interface HeaderProps {
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Header: {
+    ({ children, className, ref, ...rest }: HeaderProps): ReactElement;
+    displayName: string;
+};
+
+type OverlayProps = Dialog$2.DialogOverlayProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+declare const Overlay: {
+    ({ className, ref, ...rest }: OverlayProps): ReactElement | null;
+    displayName: string;
+};
+
+type PortalProps = Dialog$2.DialogPortalProps;
+declare const Portal: {
+    ({ children, ...rest }: PortalProps): ReactElement;
+    displayName: string;
+};
+
+type TitleProps = Dialog$2.DialogTitleProps & {
+    ref?: Ref<HTMLHeadingElement>;
+};
+declare const Title: {
+    ({ className, ref, ...others }: TitleProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TriggerProps {
+    /**
+     * Children of the component.
+     */
+    children?: ReactNode;
+    /**
+     * Change the component to the HTML tag or custom component of the only child.
+     */
+    asChild?: Dialog$2.DialogTriggerProps['asChild'];
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const Trigger: {
+    (props: TriggerProps): ReactElement;
+    displayName: string;
+};
+
 declare const Dialog: typeof Dialog$1 & {
     Trigger: typeof Trigger;
     Portal: typeof Portal;
@@ -30,4 +163,4 @@ declare const Dialog: typeof Dialog$1 & {
     Description: typeof Description;
 };
 
-export { Dialog, type CloseButtonProps as DialogCloseButtonProps, CloseProps as DialogCloseProps };
+export { Dialog, type BodyProps as DialogBodyProps, type CloseButtonProps as DialogCloseButtonProps, type CloseProps as DialogCloseProps, type ContentProps as DialogContentProps, type DescriptionProps as DialogDescriptionProps, type FooterProps as DialogFooterProps, type HeaderProps as DialogHeaderProps, type OverlayProps as DialogOverlayProps, type PortalProps as DialogPortalProps, type DialogProps, type TitleProps as DialogTitleProps, type TriggerProps as DialogTriggerProps };

package/dist/dialog/index.mjs

@@ -1,13 +1,316 @@
 import {
-  Dialog
-} from "../chunk-WLI4EPS6.mjs";
-import "../chunk-DCXWGQVZ.mjs";
-import "../chunk-UMUMFMFB.mjs";
+  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
+}) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    DialogContext.Provider,
+    {
+      value: {
+        isFullScreen,
+        setIsFullScreen,
+        withFade
+      },
+      children: childrenProp
+    }
+  );
+};
+var useDialog = () => {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw Error("useDialog must be used within a Dialog provider");
+  }
+  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 }) });
+};
+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
+}) => {
+  const scrollAreaRef = useRef2(null);
+  const ref = useMergeRefs(forwardedRef, scrollAreaRef);
+  const { withFade } = useDialog();
+  const { overflow } = useScrollOverflow(scrollAreaRef);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-spark-component": "dialog-body",
+      ref,
+      className: cx(
+        "focus-visible:u-outline relative grow overflow-y-auto outline-hidden",
+        "transition-all duration-300",
+        {
+          ["px-xl py-lg"]: !inset
+        },
+        className
+      ),
+      style: {
+        ...withFade && {
+          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"}`
+        }
+      },
+      ...rest,
+      children
+    }
+  );
+};
+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, {
+  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
+}) => {
+  const { setIsFullScreen } = useDialog();
+  useEffect2(() => {
+    if (size === "fullscreen") setIsFullScreen(true);
+    return () => setIsFullScreen(false);
+  }, [setIsFullScreen, size]);
+  return /* @__PURE__ */ jsx6(
+    RadixDialog3.Content,
+    {
+      "data-spark-component": "dialog-content",
+      ref,
+      className: dialogContentStyles({
+        className,
+        isNarrow,
+        size
+      }),
+      onInteractOutside: (e) => {
+        const isForegroundElement = e.target.closest(".z-toast, .z-popover");
+        if (isForegroundElement) {
+          e.preventDefault();
+        }
+        onInteractOutside?.(e);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+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(
+  "footer",
+  {
+    "data-spark-component": "dialog-footer",
+    ref,
+    className: cx3(className, ["px-xl", "py-lg"]),
+    ...rest,
+    children
+  }
+);
+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(
+  "header",
+  {
+    "data-spark-component": "dialog-header",
+    ref,
+    className: cx4(className, ["px-xl", "py-lg"]),
+    ...rest,
+    children
+  }
+);
+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,
+    {
+      "data-spark-component": "dialog-overlay",
+      ref,
+      className: cx5(
+        isFullScreen ? "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
+      ),
+      ...others
+    }
+  );
+};
+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
+});
+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";
 export {
-  Dialog
+  Dialog2 as Dialog
 };
 //# sourceMappingURL=index.mjs.map