import { jsx as l } from "react/jsx-runtime";
import { makeVariants as g, tw as e } from "@spark-ui/internal-utils";
import { c as p } from "../index-BmAFn37q.mjs";
import { a as h } from "../Slot-C98rL4yy.mjs";
import { createContext as B, useContext as E, Children as x, isValidElement as C } from "react";
const M = p(
  [
    "default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0",
    "h-sz-16",
    "default:rounded-t-lg",
    "bg-[length:200%_100%] bg-position-[0%_0%]"
  ],
  {
    variants: {
      animation: {
        none: "",
        pulse: "animate-standalone-backdrop-pulse"
      },
      intent: g({
        main: ["default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4"],
        support: ["default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4"],
        accent: ["default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4"],
        basic: ["default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4"],
        success: ["default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4"],
        alert: ["default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4"],
        danger: ["default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4"],
        info: ["default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4"],
        neutral: ["default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4"],
        surface: ["default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4"],
        surfaceInverse: [
          "default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4"
        ]
      })
    },
    defaultVariants: {
      intent: "main",
      animation: "none"
    }
  }
), f = ({ intent: r = "main", animation: n = "none", ...o }) => /* @__PURE__ */ l("div", { className: M({ intent: r, animation: n }), ...o });
f.displayName = "Card.Backdrop";
const N = p(
  [
    "group relative bg-clip-padding default:rounded-lg focus-visible:u-outline",
    "disabled:opacity-dim-3 disabled:cursor-not-allowed"
  ],
  {
    variants: {
      design: {
        filled: [],
        outlined: ["border-sm"],
        tinted: []
      },
      hasBackdrop: {
        true: ["pt-md"]
      },
      /**
       * Color scheme of the button.
       */
      intent: g({
        main: [],
        support: [],
        accent: [],
        basic: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: [],
        surfaceInverse: []
      })
    },
    compoundVariants: [
      // OUTLINED
      { intent: "main", design: "outlined", class: e(["border-main"]) },
      { intent: "support", design: "outlined", class: e(["border-support"]) },
      { intent: "accent", design: "outlined", class: e(["border-accent"]) },
      { intent: "basic", design: "outlined", class: e(["border-basic"]) },
      { intent: "success", design: "outlined", class: e(["border-success"]) },
      { intent: "alert", design: "outlined", class: e(["border-alert"]) },
      { intent: "danger", design: "outlined", class: e(["border-error"]) },
      { intent: "info", design: "outlined", class: e(["border-info"]) },
      { intent: "neutral", design: "outlined", class: e(["border-neutral"]) },
      { intent: "surface", design: "outlined", class: e(["border-outline"]) }
    ],
    defaultVariants: {
      design: "filled",
      intent: "surface"
    }
  }
), k = B(void 0), V = () => {
  const r = E(k);
  if (!r)
    throw new Error("useCardContext must be used within a Card component");
  return r;
}, m = [
  "onClick",
  "onMouseDown",
  "onMouseUp",
  "onMouseEnter",
  "onMouseLeave",
  "onMouseMove",
  "onMouseOver",
  "onMouseOut",
  "onDoubleClick",
  "onContextMenu"
], w = (r) => {
  let n = !1;
  const o = (s) => {
    n || x.forEach(s, (t) => {
      if (!n && C(t)) {
        if (typeof t.type == "function" && t.type.displayName === "Card.Backdrop") {
          n = !0;
          return;
        }
        if (t.props && typeof t.props == "object" && "children" in t.props) {
          const a = t.props.children;
          a != null && o(a);
        }
      }
    });
  };
  return o(r), n;
}, I = (r, n, o) => {
  if (m.some((i) => i in o))
    return !0;
  if (!n)
    return !1;
  const t = x.only(r);
  if (!C(t))
    return !1;
  const d = ["a", "button"];
  if (typeof t.type == "string" && d.includes(t.type))
    return !0;
  const a = t.props;
  return m.some((i) => i in a);
}, y = ({
  children: r,
  design: n = "filled",
  intent: o = "surface",
  inset: s = !1,
  asChild: t,
  className: d,
  ref: u,
  ...a
}) => {
  const c = t ? h : "div", i = w(r), v = I(r, t, a);
  return /* @__PURE__ */ l(
    k.Provider,
    {
      value: {
        design: n,
        intent: o,
        hasBackdrop: i,
        inset: s,
        isInteractive: v
      },
      children: /* @__PURE__ */ l(
        c,
        {
          "data-spark-component": "card",
          "data-interactive": v,
          ref: u,
          className: N({
            className: d,
            design: n,
            intent: o,
            hasBackdrop: i
          }),
          ...a,
          children: r
        }
      )
    }
  );
};
y.displayName = "Card";
const S = p(
  [
    "relative h-full default:rounded-lg w-full focus-visible:u-outline",
    "default:transition-colors default:duration-200 ease-linear"
  ],
  {
    variants: {
      inset: {
        false: ["default:p-lg"]
      },
      design: {
        filled: [],
        outlined: [
          "default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"
        ],
        tinted: []
      },
      hasBackdrop: {
        true: ["rounded-t-[16px_8px] "]
      },
      intent: g({
        main: [],
        support: [],
        accent: [],
        basic: [],
        success: [],
        alert: [],
        danger: [],
        info: [],
        neutral: [],
        surface: [],
        surfaceInverse: []
      })
    },
    compoundVariants: [
      // FILLED
      {
        intent: "main",
        design: "filled",
        class: e([
          "bg-main text-on-main group-focus:bg-main-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered"
        ])
      },
      {
        intent: "support",
        design: "filled",
        class: e([
          "bg-support text-on-support group-focus:bg-support-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered"
        ])
      },
      {
        intent: "accent",
        design: "filled",
        class: e([
          "bg-accent text-on-accent group-focus:bg-accent-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered"
        ])
      },
      {
        intent: "basic",
        design: "filled",
        class: e([
          "bg-basic text-on-basic group-focus:bg-basic-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered"
        ])
      },
      {
        intent: "success",
        design: "filled",
        class: e([
          "bg-success text-on-success group-focus:bg-success-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered"
        ])
      },
      {
        intent: "alert",
        design: "filled",
        class: e([
          "bg-alert text-on-alert group-focus:bg-alert-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered"
        ])
      },
      {
        intent: "danger",
        design: "filled",
        class: e([
          "text-on-error bg-error group-focus:bg-error-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered"
        ])
      },
      {
        intent: "info",
        design: "filled",
        class: e([
          "text-on-error bg-info group-focus:bg-info-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered"
        ])
      },
      {
        intent: "neutral",
        design: "filled",
        class: e([
          "bg-neutral text-on-neutral group-focus:bg-neutral-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered"
        ])
      },
      {
        intent: "surface",
        design: "filled",
        class: e([
          "bg-surface text-on-surface group-focus:bg-surface-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"
        ])
      },
      // OUTLINED
      /**
       * Outlined styles are handled by the Card component (parent)
       */
      // TINTED
      {
        intent: "main",
        design: "tinted",
        class: e([
          "bg-main-container text-on-main-container group-focus:bg-main-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered"
        ])
      },
      {
        intent: "support",
        design: "tinted",
        class: e([
          "bg-support-container text-on-support-container group-focus:bg-support-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered"
        ])
      },
      {
        intent: "accent",
        design: "tinted",
        class: e([
          "bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered"
        ])
      },
      {
        intent: "basic",
        design: "tinted",
        class: e([
          "bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered"
        ])
      },
      {
        intent: "success",
        design: "tinted",
        class: e([
          "bg-success-container text-on-success-container group-focus:bg-success-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered"
        ])
      },
      {
        intent: "alert",
        design: "tinted",
        class: e([
          "bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered"
        ])
      },
      {
        intent: "danger",
        design: "tinted",
        class: e([
          "bg-error-container text-on-error-container group-focus:bg-error-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered"
        ])
      },
      {
        intent: "info",
        design: "tinted",
        class: e([
          "bg-info-container text-on-info-container group-focus:bg-info-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered"
        ])
      },
      {
        intent: "neutral",
        design: "tinted",
        class: e([
          "bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered"
        ])
      },
      {
        intent: "surface",
        design: "tinted",
        class: e([
          "bg-surface text-on-surface group-focus:bg-surface-hovered",
          "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"
        ])
      }
    ],
    defaultVariants: {
      design: "filled",
      intent: "surface",
      inset: !1,
      hasBackdrop: !0
    }
  }
), b = ({ children: r, inset: n, asChild: o, className: s, ref: t, ...d }) => {
  const u = o ? h : "div", { design: a, intent: c, hasBackdrop: i } = V();
  return /* @__PURE__ */ l(
    u,
    {
      "data-spark-component": "card-content",
      ref: t,
      className: S({
        className: s,
        design: a,
        intent: c,
        inset: n,
        hasBackdrop: i
      }),
      ...d,
      children: r
    }
  );
};
b.displayName = "Content";
const D = Object.assign(y, {
  Content: b,
  Backdrop: f
});
D.displayName = "Card";
b.displayName = "Card.Content";
f.displayName = "Card.Backdrop";
export {
  D as Card
};
//# sourceMappingURL=index.mjs.map
