import { jsx as a, jsxs as V, Fragment as I } from "react/jsx-runtime";
import { c as M, a as S } from "./index-BmAFn37q.mjs";
import { useMemo as k } from "react";
import { a as N, w as E } from "./Slot-C98rL4yy.mjs";
import { S as j } from "./Spinner-CYL5kyzM.mjs";
import { tw as e, makeVariants as s } from "@spark-ui/internal-utils";
const B = [
  // Main
  {
    intent: "main",
    design: "filled",
    class: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "bg-surface",
      "text-on-surface",
      "hover:bg-surface-hovered",
      "enabled:active:bg-surface-hovered",
      "focus-visible:bg-surface-hovered"
    ])
  },
  {
    intent: "surfaceInverse",
    design: "filled",
    class: e([
      "bg-surface-inverse",
      "text-on-surface-inverse",
      "hover:bg-surface-inverse-hovered",
      "enabled:active:bg-surface-inverse-hovered",
      "focus-visible:bg-surface-inverse-hovered"
    ])
  }
], K = [
  {
    intent: "main",
    design: "ghost",
    class: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "text-surface",
      "hover:bg-surface/dim-5",
      "enabled:active:bg-surface/dim-5",
      "focus-visible:bg-surface/dim-5"
    ])
  },
  {
    intent: "surfaceInverse",
    design: "ghost",
    class: e([
      "text-surface-inverse",
      "hover:bg-surface-inverse/dim-5",
      "enabled:active:bg-surface-inverse/dim-5",
      "focus-visible:bg-surface-inverse/dim-5"
    ])
  }
], P = [
  {
    intent: "main",
    design: "outlined",
    class: e([
      "hover:bg-main/dim-5",
      "enabled:active:bg-main/dim-5",
      "focus-visible:bg-main/dim-5",
      "text-main"
    ])
  },
  {
    intent: "support",
    design: "outlined",
    class: e([
      "hover:bg-support/dim-5",
      "enabled:active:bg-support/dim-5",
      "focus-visible:bg-support/dim-5",
      "text-support"
    ])
  },
  {
    intent: "accent",
    design: "outlined",
    class: e([
      "hover:bg-accent/dim-5",
      "enabled:active:bg-accent/dim-5",
      "focus-visible:bg-accent/dim-5",
      "text-accent"
    ])
  },
  {
    intent: "basic",
    design: "outlined",
    class: e([
      "hover:bg-basic/dim-5",
      "enabled:active:bg-basic/dim-5",
      "focus-visible:bg-basic/dim-5",
      "text-basic"
    ])
  },
  {
    intent: "success",
    design: "outlined",
    class: e([
      "hover:bg-success/dim-5",
      "enabled:active:bg-success/dim-5",
      "focus-visible:bg-success/dim-5",
      "text-success"
    ])
  },
  {
    intent: "alert",
    design: "outlined",
    class: e([
      "hover:bg-alert/dim-5",
      "enabled:active:bg-alert/dim-5",
      "focus-visible:bg-alert/dim-5",
      "text-alert"
    ])
  },
  {
    intent: "danger",
    design: "outlined",
    class: e([
      "hover:bg-error/dim-5",
      "enabled:active:bg-error/dim-5",
      "focus-visible:bg-error/dim-5",
      "text-error"
    ])
  },
  {
    intent: "info",
    design: "outlined",
    class: e([
      "hover:bg-info/dim-5",
      "enabled:active:bg-info/dim-5",
      "focus-visible:bg-info/dim-5",
      "text-info"
    ])
  },
  {
    intent: "neutral",
    design: "outlined",
    class: e([
      "hover:bg-neutral/dim-5",
      "enabled:active:bg-neutral/dim-5",
      "focus-visible:bg-neutral/dim-5",
      "text-neutral"
    ])
  },
  {
    intent: "surface",
    design: "outlined",
    class: e([
      "hover:bg-surface/dim-5",
      "enabled:active:bg-surface/dim-5",
      "focus-visible:bg-surface/dim-5",
      "text-surface"
    ])
  },
  {
    intent: "surfaceInverse",
    design: "outlined",
    class: e([
      "hover:bg-surface-inverse/dim-5",
      "enabled:active:bg-surface-inverse/dim-5",
      "focus-visible:bg-surface-inverse/dim-5",
      "text-surface-inverse"
    ])
  }
], D = [
  {
    intent: "main",
    design: "tinted",
    class: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "bg-surface",
      "text-on-surface",
      "hover:bg-surface-hovered",
      "enabled:active:bg-surface-hovered",
      "focus-visible:bg-surface-hovered"
    ])
  },
  {
    intent: "surfaceInverse",
    design: "tinted",
    class: e([
      "bg-surface-inverse",
      "text-on-surface-inverse",
      "hover:bg-surface-inverse-hovered",
      "enabled:active:bg-surface-inverse-hovered",
      "focus-visible:bg-surface-inverse-hovered"
    ])
  }
], H = [
  {
    intent: "main",
    design: "contrast",
    class: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "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: e([
      "text-on-surface bg-surface",
      "hover:bg-surface-hovered",
      "enabled:active:bg-surface-hovered",
      "focus-visible:bg-surface-hovered"
    ])
  },
  {
    intent: "surfaceInverse",
    design: "contrast",
    class: e([
      "text-on-surface-inverse bg-surface-inverse",
      "hover:bg-surface-inverse-hovered",
      "enabled:active:bg-surface-inverse-hovered",
      "focus-visible:bg-surface-inverse-hovered"
    ])
  }
], O = M(
  [
    "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: s({
        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: s({
        main: [],
        support: [],
        accent: [],
        basic: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: [],
        surfaceInverse: []
      }),
      /**
       * Size of the button.
       */
      size: s({
        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: s({
        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: [
      ...B,
      ...P,
      ...D,
      ...K,
      ...H
    ],
    defaultVariants: {
      design: "filled",
      intent: "main",
      size: "md",
      shape: "rounded"
    }
  }
), U = [
  "onClick",
  "onMouseDown",
  "onMouseUp",
  "onMouseEnter",
  "onMouseLeave",
  "onMouseOver",
  "onMouseOut",
  "onKeyDown",
  "onKeyPress",
  "onKeyUp",
  "onSubmit"
], q = ({
  children: l,
  design: v = "filled",
  disabled: o = !1,
  intent: g = "main",
  isLoading: t = !1,
  loadingLabel: c,
  loadingText: i,
  shape: u = "rounded",
  size: f = "md",
  asChild: d,
  className: h,
  underline: m = !1,
  ref: p,
  ...x
}) => {
  const b = d ? N : "button", r = !!o || t, w = k(() => {
    const n = {};
    return r && U.forEach((z) => n[z] = void 0), n;
  }, [r]), y = {
    size: "current",
    className: i ? "inline-block" : "absolute",
    ...c && { "aria-label": c }
  };
  return /* @__PURE__ */ a(
    b,
    {
      "data-spark-component": "button",
      ...b === "button" && { type: "button" },
      ref: p,
      className: O({
        className: h,
        design: v,
        disabled: r,
        intent: g,
        shape: u,
        size: f,
        underline: m
      }),
      disabled: !!o,
      "aria-busy": t,
      "aria-live": t ? "assertive" : "off",
      ...x,
      ...w,
      children: E(
        d,
        l,
        (n) => t ? /* @__PURE__ */ V(I, { children: [
          /* @__PURE__ */ a(j, { ...y }),
          i && i,
          /* @__PURE__ */ a(
            "div",
            {
              "aria-hidden": !0,
              className: S("gap-md", i ? "hidden" : "inline-flex opacity-0"),
              children: n
            }
          )
        ] }) : n
      )
    }
  );
};
q.displayName = "Button";
export {
  q as B,
  O as b
};
//# sourceMappingURL=Button-D32Avk2j.mjs.map
