@spark-ui/components 17.2.3 → 17.2.4-beta.0

package/dist/card/index.mjs

@@ -1,398 +1,331 @@
-import { jsx as l } from "react/jsx-runtime";
-import { makeVariants as g, tw as e } from "@spark-ui/internal-utils";
-import { cva as p } from "class-variance-authority";
-import { S as h } from "../Slot-DLY1rJrG.mjs";
-import { createContext as B, useContext as E, Children as C, isValidElement as x } 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"],
-        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: [],
-        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: "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;
+import { Slot as e } from "../slot/index.mjs";
+import { cva as t } from "class-variance-authority";
+import { Children as n, createContext as r, isValidElement as i, useContext as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { makeVariants as s, tw as c } from "@spark-ui/internal-utils";
+//#region src/card/Backdrop.tsx
+var l = t([
+	"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: s({
+			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"],
+			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"
+	}
+}), u = ({ intent: e = "main", animation: t = "none", ...n }) => /* @__PURE__ */ o("div", {
+	className: l({
+		intent: e,
+		animation: t
+	}),
+	...n
+});
+u.displayName = "Card.Backdrop";
+//#endregion
+//#region src/card/Card.styles.tsx
+var d = t(["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"] },
+		intent: s({
+			main: [],
+			support: [],
+			accent: [],
+			success: [],
+			alert: [],
+			danger: [],
+			info: [],
+			neutral: [],
+			surface: [],
+			surfaceInverse: []
+		})
+	},
+	compoundVariants: [
+		{
+			intent: "main",
+			design: "outlined",
+			class: c(["border-main"])
+		},
+		{
+			intent: "support",
+			design: "outlined",
+			class: c(["border-support"])
+		},
+		{
+			intent: "accent",
+			design: "outlined",
+			class: c(["border-accent"])
+		},
+		{
+			intent: "success",
+			design: "outlined",
+			class: c(["border-success"])
+		},
+		{
+			intent: "alert",
+			design: "outlined",
+			class: c(["border-alert"])
+		},
+		{
+			intent: "danger",
+			design: "outlined",
+			class: c(["border-error"])
+		},
+		{
+			intent: "info",
+			design: "outlined",
+			class: c(["border-info"])
+		},
+		{
+			intent: "neutral",
+			design: "outlined",
+			class: c(["border-neutral"])
+		},
+		{
+			intent: "surface",
+			design: "outlined",
+			class: c(["border-outline"])
+		}
+	],
+	defaultVariants: {
+		design: "filled",
+		intent: "surface"
+	}
+}), f = r(void 0), p = () => {
+	let e = a(f);
+	if (!e) throw Error("useCardContext must be used within a Card component");
+	return e;
 }, m = [
-  "onClick",
-  "onMouseDown",
-  "onMouseUp",
-  "onMouseEnter",
-  "onMouseLeave",
-  "onMouseMove",
-  "onMouseOver",
-  "onMouseOut",
-  "onDoubleClick",
-  "onContextMenu"
-], w = (r) => {
-  let n = !1;
-  const o = (s) => {
-    n || C.forEach(s, (t) => {
-      if (!n && x(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 = C.only(r);
-  if (!x(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), b = I(r, t, a);
-  return /* @__PURE__ */ l(
-    k.Provider,
-    {
-      value: {
-        design: n,
-        intent: o,
-        hasBackdrop: i,
-        inset: s,
-        isInteractive: b
-      },
-      children: /* @__PURE__ */ l(
-        c,
-        {
-          "data-spark-component": "card",
-          "data-interactive": b,
-          ref: u,
-          className: N({
-            className: d,
-            design: n,
-            intent: o,
-            hasBackdrop: i
-          }),
-          ...a,
-          children: r
-        }
-      )
-    }
-  );
+	"onClick",
+	"onMouseDown",
+	"onMouseUp",
+	"onMouseEnter",
+	"onMouseLeave",
+	"onMouseMove",
+	"onMouseOver",
+	"onMouseOut",
+	"onDoubleClick",
+	"onContextMenu"
+], h = (e) => {
+	let t = !1, r = (e) => {
+		t || n.forEach(e, (e) => {
+			if (!t && i(e)) {
+				if (typeof e.type == "function" && e.type.displayName === "Card.Backdrop") {
+					t = !0;
+					return;
+				}
+				if (e.props && typeof e.props == "object" && "children" in e.props) {
+					let t = e.props.children;
+					t != null && r(t);
+				}
+			}
+		});
+	};
+	return r(e), t;
+}, g = (e, t, r) => {
+	if (m.some((e) => e in r)) return !0;
+	if (!t) return !1;
+	let a = n.only(e);
+	if (!i(a)) return !1;
+	if (typeof a.type == "string" && ["a", "button"].includes(a.type)) return !0;
+	let o = a.props;
+	return m.some((e) => e in o);
+}, _ = ({ children: t, design: n = "filled", intent: r = "surface", inset: i = !1, asChild: a, className: s, ref: c, ...l }) => {
+	let u = a ? e : "div", p = h(t), m = g(t, a, l);
+	return /* @__PURE__ */ o(f.Provider, {
+		value: {
+			design: n,
+			intent: r,
+			hasBackdrop: p,
+			inset: i,
+			isInteractive: m
+		},
+		children: /* @__PURE__ */ o(u, {
+			"data-spark-component": "card",
+			"data-interactive": m,
+			ref: c,
+			className: d({
+				className: s,
+				design: n,
+				intent: r,
+				hasBackdrop: p
+			}),
+			...l,
+			children: t
+		})
+	});
 };
-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: [],
-        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: "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: "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
-    }
-  }
-), v = ({ 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
-    }
-  );
+_.displayName = "Card";
+//#endregion
+//#region src/card/Content.styles.tsx
+var v = t(["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: s({
+			main: [],
+			support: [],
+			accent: [],
+			success: [],
+			alert: [],
+			danger: [],
+			info: [],
+			neutral: [],
+			surface: [],
+			surfaceInverse: []
+		})
+	},
+	compoundVariants: [
+		{
+			intent: "main",
+			design: "filled",
+			class: c(["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: c(["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: c(["bg-accent text-on-accent group-focus:bg-accent-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered"])
+		},
+		{
+			intent: "success",
+			design: "filled",
+			class: c(["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: c(["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: c(["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: c(["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: c(["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: c(["bg-surface text-on-surface group-focus:bg-surface-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"])
+		},
+		{
+			intent: "main",
+			design: "tinted",
+			class: c(["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: c(["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: c(["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: "success",
+			design: "tinted",
+			class: c(["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: c(["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: c(["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: c(["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: c(["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: c(["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
+	}
+}), y = ({ children: t, inset: n, asChild: r, className: i, ref: a, ...s }) => {
+	let c = r ? e : "div", { design: l, intent: u, hasBackdrop: d } = p();
+	return /* @__PURE__ */ o(c, {
+		"data-spark-component": "card-content",
+		ref: a,
+		className: v({
+			className: i,
+			design: l,
+			intent: u,
+			inset: n,
+			hasBackdrop: d
+		}),
+		...s,
+		children: t
+	});
 };
-v.displayName = "Content";
-const D = Object.assign(y, {
-  Content: v,
-  Backdrop: f
+y.displayName = "Content";
+//#endregion
+//#region src/card/index.ts
+var b = Object.assign(_, {
+	Content: y,
+	Backdrop: u
 });
-D.displayName = "Card";
-v.displayName = "Card.Content";
-f.displayName = "Card.Backdrop";
-export {
-  D as Card
-};
-//# sourceMappingURL=index.mjs.map
+b.displayName = "Card", y.displayName = "Card.Content", u.displayName = "Card.Backdrop";
+//#endregion
+export { b as Card };
+
+//# sourceMappingURL=index.mjs.map