@spark-ui/components 10.0.0

package/dist/chunk-K7VP7DH3.mjs

@@ -0,0 +1,66 @@
+import {
+  Slot
+} from "./chunk-4F5DOL57.mjs";
+
+// src/text-link/TextLink.tsx
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var textLinkStyles = cva(["inline-flex items-center focus-visible:u-outline"], {
+  variants: {
+    intent: {
+      current: "text-current hover:opacity-dim-1",
+      main: "text-main hover:text-main-hovered",
+      support: "text-support hover:text-support-hovered",
+      accent: "text-accent hover:text-accent-hovered",
+      basic: "text-basic hover:text-basic-hovered",
+      success: "text-success hover:text-success-hovered",
+      alert: "text-alert hover:text-alert-hovered",
+      danger: "text-error hover:text-error-hovered",
+      info: "text-info hover:text-info-hovered",
+      neutral: "text-neutral hover:text-neutral-hovered"
+    },
+    /** By default, TextLink inherits the current font weight. Use `bold` to highlight it. */
+    bold: {
+      true: "font-bold"
+    },
+    /**
+     * Underline is enabled by default.
+     * You can remove it, but be careful about a11y, as you should make obvious to users what is a link or not.
+     */
+    underline: {
+      true: "underline",
+      false: "hover:underline focus:underline"
+    }
+  },
+  defaultVariants: {
+    intent: "current",
+    bold: false,
+    underline: true
+  }
+});
+var TextLink = ({
+  asChild = false,
+  bold = false,
+  children,
+  className,
+  intent = "current",
+  underline = true,
+  ref,
+  ...props
+}) => {
+  const Component = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: textLinkStyles({ className, bold, intent, underline }),
+      ...props,
+      children
+    }
+  );
+};
+
+export {
+  TextLink
+};
+//# sourceMappingURL=chunk-K7VP7DH3.mjs.map

package/dist/chunk-K7VP7DH3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/text-link/TextLink.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentPropsWithRef } from 'react'\n\nimport { Slot } from '../slot'\n\nconst textLinkStyles = cva(['inline-flex items-center focus-visible:u-outline'], {\n  variants: {\n    intent: {\n      current: 'text-current hover:opacity-dim-1',\n      main: 'text-main hover:text-main-hovered',\n      support: 'text-support hover:text-support-hovered',\n      accent: 'text-accent hover:text-accent-hovered',\n      basic: 'text-basic hover:text-basic-hovered',\n      success: 'text-success hover:text-success-hovered',\n      alert: 'text-alert hover:text-alert-hovered',\n      danger: 'text-error hover:text-error-hovered',\n      info: 'text-info hover:text-info-hovered',\n      neutral: 'text-neutral hover:text-neutral-hovered',\n    },\n    /** By default, TextLink inherits the current font weight. Use `bold` to highlight it. */\n    bold: {\n      true: 'font-bold',\n    },\n    /**\n     * Underline is enabled by default.\n     * You can remove it, but be careful about a11y, as you should make obvious to users what is a link or not.\n     */\n    underline: {\n      true: 'underline',\n      false: 'hover:underline focus:underline',\n    },\n  },\n  defaultVariants: {\n    intent: 'current',\n    bold: false,\n    underline: true,\n  },\n})\n\nexport type StylesProps = VariantProps<typeof textLinkStyles>\n\nexport type TextLinkProps = ComponentPropsWithRef<'a'> &\n  StylesProps & {\n    /**\n     * Change the component to the HTML tag or custom component of the only child.\n     */\n    asChild?: boolean\n  }\n\nexport const TextLink = ({\n  asChild = false,\n  bold = false,\n  children,\n  className,\n  intent = 'current',\n  underline = true,\n  ref,\n  ...props\n}: TextLinkProps) => {\n  const Component = asChild ? Slot : 'a'\n\n  return (\n    <Component\n      ref={ref}\n      className={textLinkStyles({ className, bold, intent, underline })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,WAA8B;AA8DnC;AAzDJ,IAAM,iBAAiB,IAAI,CAAC,kDAAkD,GAAG;AAAA,EAC/E,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,SAAS;AAAA,MACT,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA,IAEA,MAAM;AAAA,MACJ,MAAM;AAAA,IACR;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EACb;AACF,CAAC;AAYM,IAAM,WAAW,CAAC;AAAA,EACvB,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAqB;AACnB,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,eAAe,EAAE,WAAW,MAAM,QAAQ,UAAU,CAAC;AAAA,MAC/D,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-MUNDKRAE.mjs

@@ -0,0 +1,80 @@
+import {
+  VisuallyHidden
+} from "./chunk-NBZKMCHF.mjs";
+
+// src/spinner/Spinner.styles.tsx
+import { makeVariants } from "@spark-ui/internal-utils";
+import { cva } from "class-variance-authority";
+var defaultVariants = {
+  intent: "current",
+  size: "current",
+  isBackgroundVisible: false
+};
+var spinnerStyles = cva(
+  ["inline-block", "border-solid", "rounded-full", "border-md", "animate-spin"],
+  {
+    variants: {
+      /**
+       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.
+       */
+      size: {
+        current: ["u-current-font-size"],
+        sm: ["w-sz-20", "h-sz-20"],
+        md: ["w-sz-28", "h-sz-28"],
+        full: ["w-full", "h-full"]
+      },
+      /**
+       * Color scheme of the spinner.
+       */
+      intent: makeVariants({
+        current: ["border-current"],
+        main: ["border-main"],
+        support: ["border-support"],
+        accent: ["border-accent"],
+        basic: ["border-basic"],
+        success: ["border-success"],
+        alert: ["border-alert"],
+        error: ["border-error"],
+        info: ["border-info"],
+        neutral: ["border-neutral"]
+      }),
+      /**
+       * Size of the button.
+       */
+      isBackgroundVisible: {
+        true: ["border-b-neutral-container", "border-l-neutral-container"],
+        false: ["border-b-transparent", "border-l-transparent"]
+      }
+    },
+    defaultVariants
+  }
+);
+
+// src/spinner/Spinner.tsx
+import { jsx } from "react/jsx-runtime";
+var Spinner = ({
+  className,
+  size = "current",
+  intent = "current",
+  label,
+  isBackgroundVisible,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "data-spark-component": "spinner",
+      ref,
+      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
+      ...others,
+      children: label && /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
+    }
+  );
+};
+
+export {
+  Spinner
+};
+//# sourceMappingURL=chunk-MUNDKRAE.mjs.map

package/dist/chunk-MUNDKRAE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/Spinner.styles.tsx","../src/spinner/Spinner.tsx"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nconst defaultVariants = {\n  intent: 'current',\n  size: 'current',\n  isBackgroundVisible: false,\n} as const\n\nexport const spinnerStyles = cva(\n  ['inline-block', 'border-solid', 'rounded-full', 'border-md', 'animate-spin'],\n  {\n    variants: {\n      /**\n       * Use `size` prop to set the size of the spinner. If you want to set the full size for the spinner, don't forget to add a wrapping container with its own size.\n       */\n      size: {\n        current: ['u-current-font-size'],\n        sm: ['w-sz-20', 'h-sz-20'],\n        md: ['w-sz-28', 'h-sz-28'],\n        full: ['w-full', 'h-full'],\n      },\n      /**\n       * Color scheme of the spinner.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'current',\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'error',\n          'info',\n          'neutral',\n        ]\n      >({\n        current: ['border-current'],\n        main: ['border-main'],\n        support: ['border-support'],\n        accent: ['border-accent'],\n        basic: ['border-basic'],\n        success: ['border-success'],\n        alert: ['border-alert'],\n        error: ['border-error'],\n        info: ['border-info'],\n        neutral: ['border-neutral'],\n      }),\n      /**\n       * Size of the button.\n       */\n      isBackgroundVisible: {\n        true: ['border-b-neutral-container', 'border-l-neutral-container'],\n        false: ['border-b-transparent', 'border-l-transparent'],\n      },\n    },\n    defaultVariants,\n  }\n)\n\nexport type SpinnerStylesProps = VariantProps<typeof spinnerStyles>\n","import { ComponentPropsWithRef, PropsWithChildren } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { spinnerStyles, SpinnerStylesProps } from './Spinner.styles'\n\nexport interface SpinnerProps extends ComponentPropsWithRef<'div'>, SpinnerStylesProps {\n  /**\n   * Use `label` prop for accessibility, it is important to add a fallback loading text. This text will be visible to screen readers.\n   */\n  label?: string\n}\n\nexport const Spinner = ({\n  className,\n  size = 'current',\n  intent = 'current',\n  label,\n  isBackgroundVisible,\n  ref,\n  ...others\n}: PropsWithChildren<SpinnerProps>) => {\n  return (\n    <span\n      role=\"status\"\n      data-spark-component=\"spinner\"\n      ref={ref}\n      className={spinnerStyles({ className, size, intent, isBackgroundVisible })}\n      {...others}\n    >\n      {label && <VisuallyHidden>{label}</VisuallyHidden>}\n    </span>\n  )\n}\n"],"mappings":";;;;;AAAA,SAAS,oBAAoB;AAC7B,SAAS,WAAyB;AAElC,IAAM,kBAAkB;AAAA,EACtB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,qBAAqB;AACvB;AAEO,IAAM,gBAAgB;AAAA,EAC3B,CAAC,gBAAgB,gBAAgB,gBAAgB,aAAa,cAAc;AAAA,EAC5E;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA,MAIR,MAAM;AAAA,QACJ,SAAS,CAAC,qBAAqB;AAAA,QAC/B,IAAI,CAAC,WAAW,SAAS;AAAA,QACzB,IAAI,CAAC,WAAW,SAAS;AAAA,QACzB,MAAM,CAAC,UAAU,QAAQ;AAAA,MAC3B;AAAA;AAAA;AAAA;AAAA,MAIA,QAAQ,aAcN;AAAA,QACA,SAAS,CAAC,gBAAgB;AAAA,QAC1B,MAAM,CAAC,aAAa;AAAA,QACpB,SAAS,CAAC,gBAAgB;AAAA,QAC1B,QAAQ,CAAC,eAAe;AAAA,QACxB,OAAO,CAAC,cAAc;AAAA,QACtB,SAAS,CAAC,gBAAgB;AAAA,QAC1B,OAAO,CAAC,cAAc;AAAA,QACtB,OAAO,CAAC,cAAc;AAAA,QACtB,MAAM,CAAC,aAAa;AAAA,QACpB,SAAS,CAAC,gBAAgB;AAAA,MAC5B,CAAC;AAAA;AAAA;AAAA;AAAA,MAID,qBAAqB;AAAA,QACnB,MAAM,CAAC,8BAA8B,4BAA4B;AAAA,QACjE,OAAO,CAAC,wBAAwB,sBAAsB;AAAA,MACxD;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;;AChCgB;AAjBT,IAAM,UAAU,CAAC;AAAA,EACtB;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuC;AACrC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,wBAAqB;AAAA,MACrB;AAAA,MACA,WAAW,cAAc,EAAE,WAAW,MAAM,QAAQ,oBAAoB,CAAC;AAAA,MACxE,GAAG;AAAA,MAEH,mBAAS,oBAAC,kBAAgB,iBAAM;AAAA;AAAA,EACnC;AAEJ;","names":[]}

package/dist/chunk-NBZKMCHF.mjs

@@ -0,0 +1,36 @@
+import {
+  Slot
+} from "./chunk-4F5DOL57.mjs";
+
+// src/visually-hidden/VisuallyHidden.tsx
+import { jsx } from "react/jsx-runtime";
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ...props,
+      ref,
+      style: {
+        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
+        position: "absolute",
+        border: 0,
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        wordWrap: "normal",
+        ...props.style
+      }
+    }
+  );
+};
+VisuallyHidden.displayName = "VisuallyHidden";
+
+export {
+  VisuallyHidden
+};
+//# sourceMappingURL=chunk-NBZKMCHF.mjs.map

package/dist/chunk-NBZKMCHF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/visually-hidden/VisuallyHidden.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n  ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n  const Component = asChild ? Slot : 'span'\n\n  return (\n    <Component\n      {...props}\n      ref={ref}\n      style={{\n        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n        position: 'absolute',\n        border: 0,\n        width: 1,\n        height: 1,\n        padding: 0,\n        margin: -1,\n        overflow: 'hidden',\n        clip: 'rect(0, 0, 0, 0)',\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n        ...props.style,\n      }}\n    />\n  )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n"],"mappings":";;;;;AAgBI;AAJG,IAAM,iBAAiB,CAAC,EAAE,UAAU,OAAO,KAAK,GAAG,MAAM,MAA2B;AACzF,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,OAAO;AAAA;AAAA,QAEL,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,GAAG,MAAM;AAAA,MACX;AAAA;AAAA,EACF;AAEJ;AAEA,eAAe,cAAc;","names":[]}

package/dist/chunk-PZWESKAR.mjs

@@ -0,0 +1,314 @@
+import {
+  IconButton
+} from "./chunk-2KPFQEAA.mjs";
+import {
+  Icon
+} from "./chunk-AESXFMCC.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 }) => {
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    DialogContext.Provider,
+    {
+      value: {
+        isFullScreen,
+        setIsFullScreen
+      },
+      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, ...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, { children: /* @__PURE__ */ jsx2(RadixDialog.Root, { ...rest, children }) });
+};
+Dialog.displayName = "Dialog.Root";
+
+// src/dialog/DialogBody.styles.ts
+import { cva } from "class-variance-authority";
+var dialogBodyStyles = cva(
+  ["grow", "overflow-y-auto", "outline-hidden", "focus-visible:u-outline"],
+  {
+    variants: {
+      inset: {
+        true: "",
+        false: "px-xl py-lg"
+      }
+    }
+  }
+);
+
+// src/dialog/DialogBody.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Body = ({
+  children,
+  className,
+  inset = false,
+  ref,
+  ...rest
+}) => /* @__PURE__ */ jsx3("div", { ref, className: dialogBodyStyles({ inset, className }), ...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 } 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-part": "close",
+      ref,
+      className: cx(["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";
+
+// src/dialog/DialogContent.styles.tsx
+import { cva as cva2 } from "class-variance-authority";
+var dialogContentStyles = cva2(
+  [
+    "z-modal flex flex-col bg-surface group",
+    "focus-visible:outline-hidden focus-visible:u-outline",
+    "[&:not(:has(footer))]:pb-lg",
+    "[&:not(:has(header))]:pt-lg"
+  ],
+  {
+    variants: {
+      size: {
+        fullscreen: "fixed size-full top-0 left-0",
+        sm: "max-w-sz-480",
+        md: "max-w-sz-672",
+        lg: "max-w-sz-864"
+      },
+      isNarrow: {
+        true: [],
+        false: []
+      }
+    },
+    compoundVariants: [
+      {
+        size: ["sm", "md", "lg"],
+        class: [
+          "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+          "max-h-[80%]",
+          "shadow-md rounded-lg",
+          "data-[state=open]:animate-fade-in",
+          "data-[state=closed]:animate-fade-out"
+        ]
+      },
+      {
+        size: ["sm", "md", "lg"],
+        isNarrow: false,
+        class: ["w-full"]
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      isNarrow: false
+    }
+  }
+);
+
+// src/dialog/DialogContent.tsx
+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, { ...props });
+Description.displayName = "Dialog.Description";
+
+// src/dialog/DialogFooter.tsx
+import { cx as cx2 } from "class-variance-authority";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx8("footer", { ref, className: cx2(className, ["px-xl", "py-lg"]), ...rest, children });
+Footer.displayName = "Dialog.Footer";
+
+// src/dialog/DialogHeader.tsx
+import { cx as cx3 } from "class-variance-authority";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ jsx9("header", { ref, className: cx3(className, ["px-xl", "py-lg"]), ...rest, children });
+Header.displayName = "Dialog.Header";
+
+// src/dialog/DialogOverlay.tsx
+import { cx as cx4 } 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,
+    {
+      ref,
+      className: cx4(
+        isFullScreen ? "hidden" : "fixed",
+        ["top-0", "left-0", "w-screen", "h-screen", "z-overlay"],
+        ["bg-overlay/dim-3"],
+        ["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 cx5 } 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,
+    {
+      ref,
+      className: cx5(
+        "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, { ...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 {
+  Dialog2 as Dialog
+};
+//# sourceMappingURL=chunk-PZWESKAR.mjs.map

package/dist/chunk-PZWESKAR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog/Dialog.tsx","../src/dialog/DialogContext.tsx","../src/dialog/DialogBody.styles.ts","../src/dialog/DialogBody.tsx","../src/dialog/DialogClose.tsx","../src/dialog/DialogCloseButton.tsx","../src/dialog/DialogContent.tsx","../src/dialog/DialogContent.styles.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\nexport const Dialog = ({ children, ...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>\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}\n\nconst DialogContext = createContext<DialogContextState | null>(null)\n\nexport const DialogProvider = ({ children: childrenProp }: { children: ReactNode }) => {\n  const [isFullScreen, setIsFullScreen] = useState(false)\n\n  return (\n    <DialogContext.Provider\n      value={{\n        isFullScreen,\n        setIsFullScreen,\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 { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogBodyStyles = cva(\n  ['grow', 'overflow-y-auto', 'outline-hidden', 'focus-visible:u-outline'],\n  {\n    variants: {\n      inset: {\n        true: '',\n        false: 'px-xl py-lg',\n      },\n    },\n  }\n)\n\nexport type DialogBodyStylesProps = VariantProps<typeof dialogBodyStyles>\n","import { type ReactElement, type ReactNode, Ref } from 'react'\n\nimport { dialogBodyStyles, type DialogBodyStylesProps } from './DialogBody.styles'\nexport interface BodyProps extends DialogBodyStylesProps {\n  children: ReactNode\n  className?: string\n  tabIndex?: number\n  ref?: Ref<HTMLDivElement>\n}\n\nexport const Body = ({\n  children,\n  className,\n  inset = false,\n  ref,\n  ...rest\n}: BodyProps): ReactElement => (\n  <div ref={ref} className={dialogBodyStyles({ inset, className })} {...rest}>\n    {children}\n  </div>\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-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 { cva, VariantProps } from 'class-variance-authority'\n\nexport const dialogContentStyles = cva(\n  [\n    'z-modal flex flex-col bg-surface group',\n    'focus-visible:outline-hidden focus-visible:u-outline',\n    '[&:not(:has(footer))]:pb-lg',\n    '[&:not(:has(header))]:pt-lg',\n  ],\n  {\n    variants: {\n      size: {\n        fullscreen: 'fixed size-full top-0 left-0',\n        sm: 'max-w-sz-480',\n        md: 'max-w-sz-672',\n        lg: 'max-w-sz-864',\n      },\n      isNarrow: {\n        true: [],\n        false: [],\n      },\n    },\n    compoundVariants: [\n      {\n        size: ['sm', 'md', 'lg'],\n        class: [\n          'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',\n          'max-h-[80%]',\n          'shadow-md rounded-lg',\n          'data-[state=open]:animate-fade-in',\n          'data-[state=closed]:animate-fade-out',\n        ],\n      },\n      {\n        size: ['sm', 'md', 'lg'],\n        isNarrow: false,\n        class: ['w-full'],\n      },\n    ],\n    defaultVariants: {\n      size: 'md',\n      isNarrow: false,\n    },\n  }\n)\n\nexport type DialogContentStylesProps = VariantProps<typeof dialogContentStyles>\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) => <RadixDialog.Description {...props} />\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 ref={ref} className={cx(className, ['px-xl', 'py-lg'])} {...rest}>\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 ref={ref} className={cx(className, ['px-xl', 'py-lg'])} {...rest}>\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      ref={ref}\n      className={cx(\n        isFullScreen ? 'hidden' : 'fixed',\n        ['top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n        ['bg-overlay/dim-3'],\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      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 => <RadixDialog.Trigger {...props} />\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","jsx","RadixDialog","jsx","jsx","RadixDialog","useEffect","cva","jsx","useEffect","RadixDialog","RadixDialog","jsx","cx","jsx","cx","jsx","cx","RadixDialog","jsx","RadixDialog","cx","RadixDialog","jsx","cx","RadixDialog","jsx","RadixDialog","jsx","Dialog"]}

package/dist/collapsible/index.d.mts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as collapsible from '@zag-js/collapsible';
+import { ComponentProps, Ref, ComponentPropsWithoutRef } from 'react';
+
+interface CollapsibleProps extends ComponentProps<'div'> {
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     */
+    asChild?: boolean;
+    /**
+     * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * When `true`, prevents the user from interacting with the collapsible.
+     */
+    disabled?: boolean;
+    /**
+     * Event handler called when the open state of the collapsible changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.
+     */
+    open?: boolean;
+    /**
+     * The ids of the elements in the collapsible. Useful for composition
+     */
+    ids?: collapsible.Props['ids'];
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Collapsible$1: {
+    ({ asChild, children, defaultOpen, disabled, onOpenChange, open, ids, ref, ...props }: CollapsibleProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {
+    asChild?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+declare const Content: {
+    ({ asChild, className, children, ref, ...props }: CollapsibleContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    asChild?: boolean;
+    ref?: Ref<HTMLButtonElement>;
+}
+declare const Trigger: {
+    ({ asChild, children, ref, ...props }: CollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const Collapsible: typeof Collapsible$1 & {
+    Trigger: typeof Trigger;
+    Content: typeof Content;
+};
+
+export { Collapsible, type CollapsibleContentProps, type CollapsibleProps, type CollapsibleTriggerProps };