@spark-ui/components 11.1.0 → 11.1.2

package/dist/dialog/index.js

@@ -0,0 +1,1389 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/dialog/index.ts
+var dialog_exports = {};
+__export(dialog_exports, {
+  Dialog: () => Dialog2
+});
+module.exports = __toCommonJS(dialog_exports);
+
+// src/dialog/Dialog.tsx
+var import_radix_ui = require("radix-ui");
+var import_react2 = require("react");
+
+// src/dialog/DialogContext.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DialogContext = (0, import_react.createContext)(null);
+var DialogProvider = ({
+  children: childrenProp,
+  withFade = false
+}) => {
+  const [isFullScreen, setIsFullScreen] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DialogContext.Provider,
+    {
+      value: {
+        isFullScreen,
+        setIsFullScreen,
+        withFade
+      },
+      children: childrenProp
+    }
+  );
+};
+var useDialog = () => {
+  const context = (0, import_react.useContext)(DialogContext);
+  if (!context) {
+    throw Error("useDialog must be used within a Dialog provider");
+  }
+  return context;
+};
+
+// src/dialog/Dialog.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Dialog = ({ children, withFade = false, ...rest }) => {
+  const open = rest.open;
+  const activeElementRef = (0, import_react2.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);
+    }
+  }
+  (0, import_react2.useEffect)(handleActiveElementFocus, [open]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DialogProvider, { withFade, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Dialog.Root, { ...rest, children }) });
+};
+Dialog.displayName = "Dialog.Root";
+
+// src/dialog/DialogBody.tsx
+var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
+var import_use_scroll_overflow = require("@spark-ui/hooks/use-scroll-overflow");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Body = ({
+  children,
+  className,
+  inset = false,
+  ref: forwardedRef,
+  ...rest
+}) => {
+  const scrollAreaRef = (0, import_react3.useRef)(null);
+  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, scrollAreaRef);
+  const { withFade } = useDialog();
+  const overflow = (0, import_use_scroll_overflow.useScrollOverflow)(scrollAreaRef);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      "data-spark-component": "dialog-body",
+      ref,
+      className: (0, import_class_variance_authority.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
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Close = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui2.Dialog.Close, { ...props });
+Close.displayName = "Dialog.Close";
+
+// src/dialog/DialogCloseButton.tsx
+var import_Close = require("@spark-ui/icons/Close");
+var import_class_variance_authority7 = require("class-variance-authority");
+
+// src/icon/Icon.tsx
+var import_react5 = require("react");
+
+// src/slot/Slot.tsx
+var import_radix_ui3 = require("radix-ui");
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Slottable = import_radix_ui3.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui3.Slot.Root, { ref, ...props });
+};
+var wrapPolymorphicSlot = (asChild, children, callback) => {
+  if (!asChild) return callback(children);
+  return (0, import_react4.isValidElement)(children) ? (0, import_react4.cloneElement)(
+    children,
+    void 0,
+    callback(children.props.children)
+  ) : null;
+};
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.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";
+
+// src/icon/Icon.styles.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority2 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority2.cva)(["fill-current shrink-0"], {
+  variants: {
+    /**
+     * Color scheme of the icon.
+     */
+    intent: (0, import_internal_utils.makeVariants)({
+      current: ["text-current"],
+      main: ["text-main"],
+      support: ["text-support"],
+      accent: ["text-accent"],
+      basic: ["text-basic"],
+      success: ["text-success"],
+      alert: ["text-alert"],
+      error: ["text-error"],
+      info: ["text-info"],
+      neutral: ["text-neutral"]
+    }),
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils.makeVariants)({
+      current: ["u-current-font-size"],
+      sm: ["w-sz-16", "h-sz-16"],
+      md: ["w-sz-24", "h-sz-24"],
+      lg: ["w-sz-32", "h-sz-32"],
+      xl: ["w-sz-40", "h-sz-40"]
+    })
+  }
+});
+
+// src/icon/Icon.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react5.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    (0, import_react5.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/button/Button.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_react6 = require("react");
+
+// src/spinner/Spinner.styles.tsx
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var import_class_variance_authority3 = require("class-variance-authority");
+var defaultVariants = {
+  intent: "current",
+  size: "current",
+  isBackgroundVisible: false
+};
+var spinnerStyles = (0, import_class_variance_authority3.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: (0, import_internal_utils2.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
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Spinner = ({
+  className,
+  size = "current",
+  intent = "current",
+  label,
+  isBackgroundVisible,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "span",
+    {
+      role: "status",
+      "data-spark-component": "spinner",
+      ref,
+      className: spinnerStyles({ className, size, intent, isBackgroundVisible }),
+      ...others,
+      children: label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
+    }
+  );
+};
+
+// src/button/Button.styles.tsx
+var import_internal_utils8 = require("@spark-ui/internal-utils");
+var import_class_variance_authority4 = require("class-variance-authority");
+
+// src/button/variants/filled.ts
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var filledVariants = [
+  // Main
+  {
+    intent: "main",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-main",
+      "text-on-main",
+      "hover:bg-main-hovered",
+      "enabled:active:bg-main-hovered",
+      "focus-visible:bg-main-hovered"
+    ])
+  },
+  // Support
+  {
+    intent: "support",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-support",
+      "text-on-support",
+      "hover:bg-support-hovered",
+      "enabled:active:bg-support-hovered",
+      "focus-visible:bg-support-hovered"
+    ])
+  },
+  // Accent
+  {
+    intent: "accent",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-accent",
+      "text-on-accent",
+      "hover:bg-accent-hovered",
+      "enabled:active:bg-accent-hovered",
+      "focus-visible:bg-accent-hovered"
+    ])
+  },
+  // Basic
+  {
+    intent: "basic",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-basic",
+      "text-on-basic",
+      "hover:bg-basic-hovered",
+      "enabled:active:bg-basic-hovered",
+      "focus-visible:bg-basic-hovered"
+    ])
+  },
+  // Success
+  {
+    intent: "success",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-success",
+      "text-on-success",
+      "hover:bg-success-hovered",
+      "enabled:active:bg-success-hovered",
+      "focus-visible:bg-success-hovered"
+    ])
+  },
+  // Alert
+  {
+    intent: "alert",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-alert",
+      "text-on-alert",
+      "hover:bg-alert-hovered",
+      "enabled:active:bg-alert-hovered",
+      "focus-visible:bg-alert-hovered"
+    ])
+  },
+  // Danger
+  {
+    intent: "danger",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-error",
+      "hover:bg-error-hovered enabled:active:bg-error-hovered",
+      "focus-visible:bg-error-hovered"
+    ])
+  },
+  // Info
+  {
+    intent: "info",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "text-on-error bg-info",
+      "hover:bg-info-hovered enabled:active:bg-info-hovered",
+      "focus-visible:bg-info-hovered"
+    ])
+  },
+  // Neutral
+  {
+    intent: "neutral",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-neutral",
+      "text-on-neutral",
+      "hover:bg-neutral-hovered",
+      "enabled:active:bg-neutral-hovered",
+      "focus-visible:bg-neutral-hovered"
+    ])
+  },
+  // Surface
+  {
+    intent: "surface",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "filled",
+    class: (0, import_internal_utils3.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/variants/ghost.ts
+var import_internal_utils4 = require("@spark-ui/internal-utils");
+var ghostVariants = [
+  {
+    intent: "main",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-main-container",
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5"
+    ])
+  },
+  {
+    intent: "support",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-support-container",
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-accent-container",
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-basic-container",
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5"
+    ])
+  },
+  {
+    intent: "success",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-success-container",
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-alert-container",
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-error-container",
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5"
+    ])
+  },
+  {
+    intent: "info",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-info-container",
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-on-neutral-container",
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-surface",
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "ghost",
+    class: (0, import_internal_utils4.tw)([
+      "text-surface-inverse",
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5"
+    ])
+  }
+];
+
+// src/button/variants/outlined.ts
+var import_internal_utils5 = require("@spark-ui/internal-utils");
+var outlinedVariants = [
+  {
+    intent: "main",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-main/dim-5",
+      "enabled:active:bg-main/dim-5",
+      "focus-visible:bg-main/dim-5",
+      "text-main"
+    ])
+  },
+  {
+    intent: "support",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-support/dim-5",
+      "enabled:active:bg-support/dim-5",
+      "focus-visible:bg-support/dim-5",
+      "text-support"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-accent/dim-5",
+      "enabled:active:bg-accent/dim-5",
+      "focus-visible:bg-accent/dim-5",
+      "text-accent"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-basic/dim-5",
+      "enabled:active:bg-basic/dim-5",
+      "focus-visible:bg-basic/dim-5",
+      "text-basic"
+    ])
+  },
+  {
+    intent: "success",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-success/dim-5",
+      "enabled:active:bg-success/dim-5",
+      "focus-visible:bg-success/dim-5",
+      "text-success"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-alert/dim-5",
+      "enabled:active:bg-alert/dim-5",
+      "focus-visible:bg-alert/dim-5",
+      "text-alert"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-error/dim-5",
+      "enabled:active:bg-error/dim-5",
+      "focus-visible:bg-error/dim-5",
+      "text-error"
+    ])
+  },
+  {
+    intent: "info",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-info/dim-5",
+      "enabled:active:bg-info/dim-5",
+      "focus-visible:bg-info/dim-5",
+      "text-info"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-neutral/dim-5",
+      "enabled:active:bg-neutral/dim-5",
+      "focus-visible:bg-neutral/dim-5",
+      "text-neutral"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-surface/dim-5",
+      "enabled:active:bg-surface/dim-5",
+      "focus-visible:bg-surface/dim-5",
+      "text-surface"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "outlined",
+    class: (0, import_internal_utils5.tw)([
+      "hover:bg-surface-inverse/dim-5",
+      "enabled:active:bg-surface-inverse/dim-5",
+      "focus-visible:bg-surface-inverse/dim-5",
+      "text-surface-inverse"
+    ])
+  }
+];
+
+// src/button/variants/tinted.ts
+var import_internal_utils6 = require("@spark-ui/internal-utils");
+var tintedVariants = [
+  {
+    intent: "main",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-main-container",
+      "text-on-main-container",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-support-container",
+      "text-on-support-container",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-accent-container",
+      "text-on-accent-container",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-basic-container",
+      "text-on-basic-container",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-success-container",
+      "text-on-success-container",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-alert-container",
+      "text-on-alert-container",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-error-container",
+      "text-on-error-container",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-info-container",
+      "text-on-info-container",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-neutral-container",
+      "text-on-neutral-container",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-surface",
+      "text-on-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "tinted",
+    class: (0, import_internal_utils6.tw)([
+      "bg-surface-inverse",
+      "text-on-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/variants/contrast.ts
+var import_internal_utils7 = require("@spark-ui/internal-utils");
+var contrastVariants = [
+  {
+    intent: "main",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-main-contaier bg-surface",
+      "hover:bg-main-container-hovered",
+      "enabled:active:bg-main-container-hovered",
+      "focus-visible:bg-main-container-hovered"
+    ])
+  },
+  {
+    intent: "support",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-support-container bg-surface",
+      "hover:bg-support-container-hovered",
+      "enabled:active:bg-support-container-hovered",
+      "focus-visible:bg-support-container-hovered"
+    ])
+  },
+  {
+    intent: "accent",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-accent-container bg-surface",
+      "hover:bg-accent-container-hovered",
+      "enabled:active:bg-accent-container-hovered",
+      "focus-visible:bg-accent-container-hovered"
+    ])
+  },
+  {
+    intent: "basic",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-basic-container bg-surface",
+      "hover:bg-basic-container-hovered",
+      "enabled:active:bg-basic-container-hovered",
+      "focus-visible:bg-basic-container-hovered"
+    ])
+  },
+  {
+    intent: "success",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-success-container bg-surface",
+      "hover:bg-success-container-hovered",
+      "enabled:active:bg-success-container-hovered",
+      "focus-visible:bg-success-container-hovered"
+    ])
+  },
+  {
+    intent: "alert",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-alert-container bg-surface",
+      "hover:bg-alert-container-hovered",
+      "enabled:active:bg-alert-container-hovered",
+      "focus-visible:bg-alert-container-hovered"
+    ])
+  },
+  {
+    intent: "danger",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-error-container bg-surface",
+      "hover:bg-error-container-hovered",
+      "enabled:active:bg-error-container-hovered",
+      "focus-visible:bg-error-container-hovered"
+    ])
+  },
+  {
+    intent: "info",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-info-container bg-surface",
+      "hover:bg-info-container-hovered",
+      "enabled:active:bg-info-container-hovered",
+      "focus-visible:bg-info-container-hovered"
+    ])
+  },
+  {
+    intent: "neutral",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-neutral-container bg-surface",
+      "hover:bg-neutral-container-hovered",
+      "enabled:active:bg-neutral-container-hovered",
+      "focus-visible:bg-neutral-container-hovered"
+    ])
+  },
+  {
+    intent: "surface",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-surface bg-surface",
+      "hover:bg-surface-hovered",
+      "enabled:active:bg-surface-hovered",
+      "focus-visible:bg-surface-hovered"
+    ])
+  },
+  {
+    intent: "surfaceInverse",
+    design: "contrast",
+    class: (0, import_internal_utils7.tw)([
+      "text-on-surface-inverse bg-surface-inverse",
+      "hover:bg-surface-inverse-hovered",
+      "enabled:active:bg-surface-inverse-hovered",
+      "focus-visible:bg-surface-inverse-hovered"
+    ])
+  }
+];
+
+// src/button/Button.styles.tsx
+var buttonStyles = (0, import_class_variance_authority4.cva)(
+  [
+    "u-shadow-border-transition",
+    "box-border inline-flex items-center justify-center gap-md whitespace-nowrap",
+    "default:px-lg",
+    "text-body-1 font-bold",
+    "focus-visible:u-outline"
+  ],
+  {
+    variants: {
+      /**
+       * Main style of the button.
+       *
+       * - `filled`: Button will be plain.
+       *
+       * - `outlined`: Button will be transparent with an outline.
+       *
+       * - `tinted`: Button will be filled but using a lighter color scheme.
+       *
+       * - `ghost`: Button will look like a link. No borders, plain text.
+       *
+       * - `contrast`: Button will be surface filled. No borders, plain text.
+       *
+       */
+      design: (0, import_internal_utils8.makeVariants)({
+        filled: [],
+        outlined: ["bg-transparent", "border-sm", "border-current"],
+        tinted: [],
+        ghost: ["default:-mx-md px-md hover:bg-main/dim-5"],
+        contrast: []
+      }),
+      underline: {
+        true: ["underline"]
+      },
+      /**
+       * Color scheme of the button.
+       */
+      intent: (0, import_internal_utils8.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: [],
+        surfaceInverse: []
+      }),
+      /**
+       * Size of the button.
+       */
+      size: (0, import_internal_utils8.makeVariants)({
+        sm: ["min-w-sz-32", "h-sz-32"],
+        md: ["min-w-sz-44", "h-sz-44"],
+        lg: ["min-w-sz-56", "h-sz-56"]
+      }),
+      /**
+       * Shape of the button.
+       */
+      shape: (0, import_internal_utils8.makeVariants)({
+        rounded: ["rounded-lg"],
+        square: ["rounded-0"],
+        pill: ["rounded-full"]
+      }),
+      /**
+       * Disable the button, preventing user interaction and adding opacity.
+       */
+      disabled: {
+        true: ["cursor-not-allowed", "opacity-dim-3"],
+        false: ["cursor-pointer"]
+      }
+    },
+    compoundVariants: [
+      ...filledVariants,
+      ...outlinedVariants,
+      ...tintedVariants,
+      ...ghostVariants,
+      ...contrastVariants
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "main",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+);
+
+// src/button/Button.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var blockedEventHandlers = [
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseOver",
+  "onMouseOut",
+  "onKeyDown",
+  "onKeyPress",
+  "onKeyUp",
+  "onSubmit"
+];
+var Button = ({
+  children,
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  isLoading = false,
+  loadingLabel,
+  loadingText,
+  shape = "rounded",
+  size = "md",
+  asChild,
+  className,
+  underline = false,
+  ref,
+  ...others
+}) => {
+  const Component = asChild ? Slot : "button";
+  const shouldNotInteract = !!disabled || isLoading;
+  const disabledEventHandlers = (0, import_react6.useMemo)(() => {
+    const result = {};
+    if (shouldNotInteract) {
+      blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
+    }
+    return result;
+  }, [shouldNotInteract]);
+  const spinnerProps = {
+    size: "current",
+    className: loadingText ? "inline-block" : "absolute",
+    ...loadingLabel && { "aria-label": loadingLabel }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    Component,
+    {
+      "data-spark-component": "button",
+      ...Component === "button" && { type: "button" },
+      ref,
+      className: buttonStyles({
+        className,
+        design,
+        disabled: shouldNotInteract,
+        intent,
+        shape,
+        size,
+        underline
+      }),
+      disabled: !!disabled,
+      "aria-busy": isLoading,
+      "aria-live": isLoading ? "assertive" : "off",
+      ...others,
+      ...disabledEventHandlers,
+      children: wrapPolymorphicSlot(
+        asChild,
+        children,
+        (slotted) => isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { ...spinnerProps }),
+          loadingText && loadingText,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "div",
+            {
+              "aria-hidden": true,
+              className: (0, import_class_variance_authority5.cx)("gap-md", loadingText ? "hidden" : "inline-flex opacity-0"),
+              children: slotted
+            }
+          )
+        ] }) : slotted
+      )
+    }
+  );
+};
+Button.displayName = "Button";
+
+// src/icon-button/IconButton.styles.tsx
+var import_internal_utils9 = require("@spark-ui/internal-utils");
+var import_class_variance_authority6 = require("class-variance-authority");
+var iconButtonStyles = (0, import_class_variance_authority6.cva)(["pl-0 pr-0"], {
+  variants: {
+    /**
+     * Sets the size of the icon.
+     */
+    size: (0, import_internal_utils9.makeVariants)({
+      sm: ["text-body-1"],
+      md: ["text-body-1"],
+      lg: ["text-display-3"]
+    })
+  }
+});
+
+// src/icon-button/IconButton.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var IconButton = ({
+  design = "filled",
+  disabled = false,
+  intent = "main",
+  shape = "rounded",
+  size = "md",
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Button,
+    {
+      "data-spark-component": "icon-button",
+      ref,
+      className: iconButtonStyles({ size, className }),
+      design,
+      disabled,
+      intent,
+      shape,
+      size,
+      ...others
+    }
+  );
+};
+IconButton.displayName = "IconButton";
+
+// src/dialog/DialogCloseButton.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Root = ({
+  "aria-label": ariaLabel,
+  className,
+  size = "md",
+  intent = "neutral",
+  design = "ghost",
+  children = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Close.Close, {}),
+  ref,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Close,
+    {
+      "data-spark-component": "dialog-close-button",
+      "data-part": "close",
+      ref,
+      className: (0, import_class_variance_authority7.cx)(["absolute", "top-md", "right-xl"], className),
+      asChild: true,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { children }) })
+    }
+  );
+};
+var CloseButton = Object.assign(Root, {
+  id: "CloseButton"
+});
+Root.displayName = "Dialog.CloseButton";
+
+// src/dialog/DialogContent.tsx
+var import_radix_ui4 = require("radix-ui");
+var import_react7 = require("react");
+
+// src/dialog/DialogContent.styles.tsx
+var import_class_variance_authority8 = require("class-variance-authority");
+var dialogContentStyles = (0, import_class_variance_authority8.cva)(
+  [
+    "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
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Content = ({
+  children,
+  className,
+  isNarrow = false,
+  size = "md",
+  onInteractOutside,
+  ref,
+  ...rest
+}) => {
+  const { setIsFullScreen } = useDialog();
+  (0, import_react7.useEffect)(() => {
+    if (size === "fullscreen") setIsFullScreen(true);
+    return () => setIsFullScreen(false);
+  }, [setIsFullScreen, size]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    import_radix_ui4.Dialog.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
+var import_radix_ui5 = require("radix-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Description = (props) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Description, { "data-spark-component": "dialog-description", ...props });
+Description.displayName = "Dialog.Description";
+
+// src/dialog/DialogFooter.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Footer = ({ children, className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  "footer",
+  {
+    "data-spark-component": "dialog-footer",
+    ref,
+    className: (0, import_class_variance_authority9.cx)(className, ["px-xl", "py-lg"]),
+    ...rest,
+    children
+  }
+);
+Footer.displayName = "Dialog.Footer";
+
+// src/dialog/DialogHeader.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Header = ({ children, className, ref, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  "header",
+  {
+    "data-spark-component": "dialog-header",
+    ref,
+    className: (0, import_class_variance_authority10.cx)(className, ["px-xl", "py-lg"]),
+    ...rest,
+    children
+  }
+);
+Header.displayName = "Dialog.Header";
+
+// src/dialog/DialogOverlay.tsx
+var import_class_variance_authority11 = require("class-variance-authority");
+var import_radix_ui6 = require("radix-ui");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Overlay = ({ className, ref, ...rest }) => {
+  const { isFullScreen } = useDialog();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_radix_ui6.Dialog.Overlay,
+    {
+      "data-spark-component": "dialog-overlay",
+      ref,
+      className: (0, import_class_variance_authority11.cx)(
+        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
+var import_radix_ui7 = require("radix-ui");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var Portal = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_radix_ui7.Dialog.Portal, { ...rest, children });
+Portal.displayName = "Dialog.Portal";
+
+// src/dialog/DialogTitle.tsx
+var import_class_variance_authority12 = require("class-variance-authority");
+var import_radix_ui8 = require("radix-ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var Title = ({ className, ref, ...others }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_radix_ui8.Dialog.Title,
+    {
+      "data-spark-component": "dialog-title",
+      ref,
+      className: (0, import_class_variance_authority12.cx)(
+        "text-headline-1 text-on-surface",
+        "group-has-data-[part=close]:pr-3xl",
+        className
+      ),
+      ...others
+    }
+  );
+};
+Title.displayName = "Dialog.Title";
+
+// src/dialog/DialogTrigger.tsx
+var import_radix_ui9 = require("radix-ui");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var Trigger = (props) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui9.Dialog.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";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog
+});
+//# sourceMappingURL=index.js.map