@spark-ui/components 13.1.2 → 13.1.4

package/dist/card/index.js

@@ -1,2 +1,502 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),e=require("@spark-ui/internal-utils"),p=require("../index-DnaHaH_0.js"),h=require("../Slot-ghrohQLA.js"),u=require("react"),k=p.cva(["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:e.makeVariants({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:n="main",animation:r="none",...o})=>g.jsx("div",{className:k({intent:n,animation:r}),...o});f.displayName="Card.Backdrop";const y=p.cva(["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:e.makeVariants({main:[],support:[],accent:[],basic:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]})},compoundVariants:[{intent:"main",design:"outlined",class:e.tw(["border-main"])},{intent:"support",design:"outlined",class:e.tw(["border-support"])},{intent:"accent",design:"outlined",class:e.tw(["border-accent"])},{intent:"basic",design:"outlined",class:e.tw(["border-basic"])},{intent:"success",design:"outlined",class:e.tw(["border-success"])},{intent:"alert",design:"outlined",class:e.tw(["border-alert"])},{intent:"danger",design:"outlined",class:e.tw(["border-error"])},{intent:"info",design:"outlined",class:e.tw(["border-info"])},{intent:"neutral",design:"outlined",class:e.tw(["border-neutral"])},{intent:"surface",design:"outlined",class:e.tw(["border-outline"])}],defaultVariants:{design:"filled",intent:"surface"}}),w=u.createContext(void 0),E=()=>{const n=u.useContext(w);if(!n)throw new Error("useCardContext must be used within a Card component");return n},m=["onClick","onMouseDown","onMouseUp","onMouseEnter","onMouseLeave","onMouseMove","onMouseOver","onMouseOut","onDoubleClick","onContextMenu"],B=n=>{let r=!1;const o=s=>{r||u.Children.forEach(s,t=>{if(!r&&u.isValidElement(t)){if(typeof t.type=="function"&&t.type.displayName==="Card.Backdrop"){r=!0;return}if(t.props&&typeof t.props=="object"&&"children"in t.props){const a=t.props.children;a!=null&&o(a)}}})};return o(n),r},M=(n,r,o)=>{if(m.some(i=>i in o))return!0;if(!r)return!1;const t=u.Children.only(n);if(!u.isValidElement(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)},x=({children:n,design:r="filled",intent:o="surface",inset:s=!1,asChild:t,className:d,ref:c,...a})=>{const l=t?h.Slot:"div",i=B(n),v=M(n,t,a);return g.jsx(w.Provider,{value:{design:r,intent:o,hasBackdrop:i,inset:s,isInteractive:v},children:g.jsx(l,{"data-spark-component":"card","data-interactive":v,ref:c,className:y({className:d,design:r,intent:o,hasBackdrop:i}),...a,children:n})})};x.displayName="Card";const N=p.cva(["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:e.makeVariants({main:[],support:[],accent:[],basic:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]})},compoundVariants:[{intent:"main",design:"filled",class:e.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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:e.tw(["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.tw(["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.tw(["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.tw(["bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered"])},{intent:"success",design:"tinted",class:e.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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.tw(["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:n,inset:r,asChild:o,className:s,ref:t,...d})=>{const c=o?h.Slot:"div",{design:a,intent:l,hasBackdrop:i}=E();return g.jsx(c,{"data-spark-component":"card-content",ref:t,className:N({className:s,design:a,intent:l,inset:r,hasBackdrop:i}),...d,children:n})};b.displayName="Content";const C=Object.assign(x,{Content:b,Backdrop:f});C.displayName="Card";b.displayName="Card.Content";f.displayName="Card.Backdrop";exports.Card=C;
-//# sourceMappingURL=index.js.map
+"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/card/index.ts
+var card_exports = {};
+__export(card_exports, {
+  Card: () => Card2
+});
+module.exports = __toCommonJS(card_exports);
+
+// src/card/Backdrop.tsx
+var import_internal_utils = require("@spark-ui/internal-utils");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime = require("react/jsx-runtime");
+var backdropStyles = (0, import_class_variance_authority.cva)(
+  [
+    "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: (0, import_internal_utils.makeVariants)({
+        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"
+    }
+  }
+);
+var Backdrop = ({ intent = "main", animation = "none", ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: backdropStyles({ intent, animation }), ...props });
+};
+Backdrop.displayName = "Card.Backdrop";
+
+// src/slot/Slot.tsx
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Slottable = import_radix_ui.Slot.Slottable;
+var Slot = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
+};
+
+// src/card/Card.styles.tsx
+var import_internal_utils2 = require("@spark-ui/internal-utils");
+var import_class_variance_authority2 = require("class-variance-authority");
+var cardStyles = (0, import_class_variance_authority2.cva)(
+  [
+    "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: (0, import_internal_utils2.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: [],
+        surfaceInverse: []
+      })
+    },
+    compoundVariants: [
+      // OUTLINED
+      { intent: "main", design: "outlined", class: (0, import_internal_utils2.tw)(["border-main"]) },
+      { intent: "support", design: "outlined", class: (0, import_internal_utils2.tw)(["border-support"]) },
+      { intent: "accent", design: "outlined", class: (0, import_internal_utils2.tw)(["border-accent"]) },
+      { intent: "basic", design: "outlined", class: (0, import_internal_utils2.tw)(["border-basic"]) },
+      { intent: "success", design: "outlined", class: (0, import_internal_utils2.tw)(["border-success"]) },
+      { intent: "alert", design: "outlined", class: (0, import_internal_utils2.tw)(["border-alert"]) },
+      { intent: "danger", design: "outlined", class: (0, import_internal_utils2.tw)(["border-error"]) },
+      { intent: "info", design: "outlined", class: (0, import_internal_utils2.tw)(["border-info"]) },
+      { intent: "neutral", design: "outlined", class: (0, import_internal_utils2.tw)(["border-neutral"]) },
+      { intent: "surface", design: "outlined", class: (0, import_internal_utils2.tw)(["border-outline"]) }
+    ],
+    defaultVariants: {
+      design: "filled",
+      intent: "surface"
+    }
+  }
+);
+
+// src/card/context.tsx
+var import_react2 = require("react");
+var CardContext = (0, import_react2.createContext)(void 0);
+var useCardContext = () => {
+  const context = (0, import_react2.useContext)(CardContext);
+  if (!context) {
+    throw new Error("useCardContext must be used within a Card component");
+  }
+  return context;
+};
+
+// src/card/utils.ts
+var import_react3 = require("react");
+var MOUSE_EVENTS = [
+  "onClick",
+  "onMouseDown",
+  "onMouseUp",
+  "onMouseEnter",
+  "onMouseLeave",
+  "onMouseMove",
+  "onMouseOver",
+  "onMouseOut",
+  "onDoubleClick",
+  "onContextMenu"
+];
+var hasBackdrop = (children) => {
+  let backdropFound = false;
+  const searchForBackdrop = (node) => {
+    if (backdropFound) return;
+    import_react3.Children.forEach(node, (child) => {
+      if (backdropFound) return;
+      if ((0, import_react3.isValidElement)(child)) {
+        const isBackdropComponent = typeof child.type === "function" && child.type.displayName === "Card.Backdrop";
+        if (isBackdropComponent) {
+          backdropFound = true;
+          return;
+        }
+        const hasChildren = child.props && typeof child.props === "object" && "children" in child.props;
+        if (hasChildren) {
+          const childChildren = child.props.children;
+          if (childChildren !== void 0 && childChildren !== null) {
+            searchForBackdrop(childChildren);
+          }
+        }
+      }
+    });
+  };
+  searchForBackdrop(children);
+  return backdropFound;
+};
+var isInteractive = (children, asChild, props) => {
+  const hasMouseEventHandlers = MOUSE_EVENTS.some((event) => event in props);
+  if (hasMouseEventHandlers) {
+    return true;
+  }
+  if (!asChild) {
+    return false;
+  }
+  const child = import_react3.Children.only(children);
+  if (!(0, import_react3.isValidElement)(child)) {
+    return false;
+  }
+  const interactiveElements = ["a", "button"];
+  const isInteractiveElement = typeof child.type === "string" && interactiveElements.includes(child.type);
+  if (isInteractiveElement) {
+    return true;
+  }
+  const childProps = child.props;
+  const hasChildEventHandlers = MOUSE_EVENTS.some((event) => event in childProps);
+  return hasChildEventHandlers;
+};
+
+// src/card/Card.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Card = ({
+  children,
+  design = "filled",
+  intent = "surface",
+  inset = false,
+  asChild,
+  className,
+  ref,
+  ...props
+}) => {
+  const Component = asChild ? Slot : "div";
+  const backdropDetected = hasBackdrop(children);
+  const interactiveDetected = isInteractive(children, asChild, props);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    CardContext.Provider,
+    {
+      value: {
+        design,
+        intent,
+        hasBackdrop: backdropDetected,
+        inset,
+        isInteractive: interactiveDetected
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Component,
+        {
+          "data-spark-component": "card",
+          "data-interactive": interactiveDetected,
+          ref,
+          className: cardStyles({
+            className,
+            design,
+            intent,
+            hasBackdrop: backdropDetected
+          }),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
+Card.displayName = "Card";
+
+// src/card/Content.styles.tsx
+var import_internal_utils3 = require("@spark-ui/internal-utils");
+var import_class_variance_authority3 = require("class-variance-authority");
+var contentStyles = (0, import_class_variance_authority3.cva)(
+  [
+    "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: (0, import_internal_utils3.makeVariants)({
+        main: [],
+        support: [],
+        accent: [],
+        basic: [],
+        success: [],
+        alert: [],
+        danger: [],
+        info: [],
+        neutral: [],
+        surface: [],
+        surfaceInverse: []
+      })
+    },
+    compoundVariants: [
+      // FILLED
+      {
+        intent: "main",
+        design: "filled",
+        class: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered"
+        ])
+      },
+      {
+        intent: "success",
+        design: "tinted",
+        class: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: (0, import_internal_utils3.tw)([
+          "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: false,
+      hasBackdrop: true
+    }
+  }
+);
+
+// src/card/Content.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Content = ({ children, inset, asChild, className, ref, ...props }) => {
+  const Component = asChild ? Slot : "div";
+  const { design, intent, hasBackdrop: hasBackdrop2 } = useCardContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Component,
+    {
+      "data-spark-component": "card-content",
+      ref,
+      className: contentStyles({
+        className,
+        design,
+        intent,
+        inset,
+        hasBackdrop: hasBackdrop2
+      }),
+      ...props,
+      children
+    }
+  );
+};
+Content.displayName = "Content";
+
+// src/card/index.ts
+var Card2 = Object.assign(Card, {
+  Content,
+  Backdrop
+});
+Card2.displayName = "Card";
+Content.displayName = "Card.Content";
+Backdrop.displayName = "Card.Backdrop";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card
+});
+//# sourceMappingURL=index.js.map

package/dist/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n  [\n    'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n    'h-sz-16',\n    'default:rounded-t-lg',\n    'bg-[length:200%_100%] bg-position-[0%_0%]',\n  ],\n  {\n    variants: {\n      animation: {\n        none: '',\n        pulse: 'animate-standalone-backdrop-pulse',\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n        support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n        accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n        basic: ['default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4'],\n        success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n        alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n        danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n        info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n        neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n        surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n        surfaceInverse: [\n          'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'main',\n      animation: 'none',\n    },\n  }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n  className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n  return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n  [\n    'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n    'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      design: {\n        filled: [],\n        outlined: ['border-sm'],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['pt-md'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n      { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n      { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n      { intent: 'basic', design: 'outlined', class: tw(['border-basic']) },\n      { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n      { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n      { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n      { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n      { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n      { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n    },\n  }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n  design: CardStylesProps['design']\n  intent: CardStylesProps['intent']\n  hasBackdrop: boolean\n  inset: boolean\n  isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext)\n  if (!context) {\n    throw new Error('useCardContext must be used within a Card component')\n  }\n\n  return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseMove',\n  'onMouseOver',\n  'onMouseOut',\n  'onDoubleClick',\n  'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n  let backdropFound = false\n\n  const searchForBackdrop = (node: ReactNode): void => {\n    if (backdropFound) return\n\n    Children.forEach(node, child => {\n      if (backdropFound) return\n\n      if (isValidElement(child)) {\n        const isBackdropComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n        if (isBackdropComponent) {\n          backdropFound = true\n\n          return\n        }\n\n        const hasChildren =\n          child.props && typeof child.props === 'object' && 'children' in child.props\n\n        if (hasChildren) {\n          const childChildren = (child.props as { children: ReactNode }).children\n          if (childChildren !== undefined && childChildren !== null) {\n            searchForBackdrop(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForBackdrop(children)\n\n  return backdropFound\n}\n\nexport const isInteractive = (\n  children: ReactNode,\n  asChild: boolean | undefined,\n  props: Record<string, any>\n): boolean => {\n  const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n  if (hasMouseEventHandlers) {\n    return true\n  }\n\n  if (!asChild) {\n    return false\n  }\n\n  const child = Children.only(children)\n\n  if (!isValidElement(child)) {\n    return false\n  }\n\n  const interactiveElements = ['a', 'button']\n  const isInteractiveElement =\n    typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n  if (isInteractiveElement) {\n    return true\n  }\n\n  const childProps = child.props as Record<string, any>\n  const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n  return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Card = ({\n  children,\n  design = 'filled',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const backdropDetected = hasBackdrop(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasBackdrop: backdropDetected,\n        inset,\n        isInteractive: interactiveDetected,\n      }}\n    >\n      <Component\n        data-spark-component=\"card\"\n        data-interactive={interactiveDetected}\n        ref={ref}\n        className={cardStyles({\n          className,\n          design,\n          intent,\n          hasBackdrop: backdropDetected,\n        })}\n        {...props}\n      >\n        {children}\n      </Component>\n    </CardContext.Provider>\n  )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n  [\n    'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n    'default:transition-colors default:duration-200 ease-linear',\n  ],\n  {\n    variants: {\n      inset: {\n        false: ['default:p-lg'],\n      },\n      design: {\n        filled: [],\n        outlined: [\n          'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['rounded-t-[16px_8px] '],\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // FILLED\n      {\n        intent: 'main',\n        design: 'filled',\n        class: tw([\n          'bg-main text-on-main group-focus:bg-main-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'filled',\n        class: tw([\n          'bg-support text-on-support group-focus:bg-support-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'filled',\n        class: tw([\n          'bg-accent text-on-accent group-focus:bg-accent-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n        ]),\n      },\n      {\n        intent: 'basic',\n        design: 'filled',\n        class: tw([\n          'bg-basic text-on-basic group-focus:bg-basic-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'filled',\n        class: tw([\n          'bg-success text-on-success group-focus:bg-success-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'filled',\n        class: tw([\n          'bg-alert text-on-alert group-focus:bg-alert-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-error group-focus:bg-error-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-info group-focus:bg-info-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'filled',\n        class: tw([\n          'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'filled',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n      // OUTLINED\n      /**\n       * Outlined styles are handled by the Card component (parent)\n       */\n      // TINTED\n      {\n        intent: 'main',\n        design: 'tinted',\n        class: tw([\n          'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'tinted',\n        class: tw([\n          'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'tinted',\n        class: tw([\n          'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n        ]),\n      },\n      {\n        intent: 'basic',\n        design: 'tinted',\n        class: tw([\n          'bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'tinted',\n        class: tw([\n          'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'tinted',\n        class: tw([\n          'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'tinted',\n        class: tw([\n          'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'tinted',\n        class: tw([\n          'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'tinted',\n        class: tw([\n          'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'tinted',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n      inset: false,\n      hasBackdrop: true,\n    },\n  }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n  const Component = asChild ? Slot : 'div'\n  const { design, intent, hasBackdrop } = useCardContext()\n\n  return (\n    <Component\n      data-spark-component=\"card-content\"\n      ref={ref}\n      className={contentStyles({\n        className,\n        design,\n        intent,\n        inset,\n        hasBackdrop,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n  Content,\n  Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"names":["backdropStyles","cva","makeVariants","Backdrop","intent","animation","props","jsx","cardStyles","tw","CardContext","createContext","useCardContext","context","useContext","MOUSE_EVENTS","hasBackdrop","children","backdropFound","searchForBackdrop","node","Children","child","isValidElement","childChildren","isInteractive","asChild","event","interactiveElements","childProps","Card","design","inset","className","ref","Component","Slot","backdropDetected","interactiveDetected","contentStyles","Content","Root"],"mappings":"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"}
+{"version":3,"sources":["../../src/card/index.ts","../../src/card/Backdrop.tsx","../../src/slot/Slot.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx"],"sourcesContent":["import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n  Content,\n  Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n  [\n    'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n    'h-sz-16',\n    'default:rounded-t-lg',\n    'bg-[length:200%_100%] bg-position-[0%_0%]',\n  ],\n  {\n    variants: {\n      animation: {\n        none: '',\n        pulse: 'animate-standalone-backdrop-pulse',\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n        support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n        accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n        basic: ['default:from-basic/dim-4 default:via-basic/dim-2 default:to-basic/dim-4'],\n        success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n        alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n        danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n        info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n        neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n        surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n        surfaceInverse: [\n          'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'main',\n      animation: 'none',\n    },\n  }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n  className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n  return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n  [\n    'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n    'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      design: {\n        filled: [],\n        outlined: ['border-sm'],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['pt-md'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n      { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n      { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n      { intent: 'basic', design: 'outlined', class: tw(['border-basic']) },\n      { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n      { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n      { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n      { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n      { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n      { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n    },\n  }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n  design: CardStylesProps['design']\n  intent: CardStylesProps['intent']\n  hasBackdrop: boolean\n  inset: boolean\n  isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext)\n  if (!context) {\n    throw new Error('useCardContext must be used within a Card component')\n  }\n\n  return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseMove',\n  'onMouseOver',\n  'onMouseOut',\n  'onDoubleClick',\n  'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n  let backdropFound = false\n\n  const searchForBackdrop = (node: ReactNode): void => {\n    if (backdropFound) return\n\n    Children.forEach(node, child => {\n      if (backdropFound) return\n\n      if (isValidElement(child)) {\n        const isBackdropComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n        if (isBackdropComponent) {\n          backdropFound = true\n\n          return\n        }\n\n        const hasChildren =\n          child.props && typeof child.props === 'object' && 'children' in child.props\n\n        if (hasChildren) {\n          const childChildren = (child.props as { children: ReactNode }).children\n          if (childChildren !== undefined && childChildren !== null) {\n            searchForBackdrop(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForBackdrop(children)\n\n  return backdropFound\n}\n\nexport const isInteractive = (\n  children: ReactNode,\n  asChild: boolean | undefined,\n  props: Record<string, any>\n): boolean => {\n  const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n  if (hasMouseEventHandlers) {\n    return true\n  }\n\n  if (!asChild) {\n    return false\n  }\n\n  const child = Children.only(children)\n\n  if (!isValidElement(child)) {\n    return false\n  }\n\n  const interactiveElements = ['a', 'button']\n  const isInteractiveElement =\n    typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n  if (isInteractiveElement) {\n    return true\n  }\n\n  const childProps = child.props as Record<string, any>\n  const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n  return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Card = ({\n  children,\n  design = 'filled',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const backdropDetected = hasBackdrop(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasBackdrop: backdropDetected,\n        inset,\n        isInteractive: interactiveDetected,\n      }}\n    >\n      <Component\n        data-spark-component=\"card\"\n        data-interactive={interactiveDetected}\n        ref={ref}\n        className={cardStyles({\n          className,\n          design,\n          intent,\n          hasBackdrop: backdropDetected,\n        })}\n        {...props}\n      >\n        {children}\n      </Component>\n    </CardContext.Provider>\n  )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n  [\n    'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n    'default:transition-colors default:duration-200 ease-linear',\n  ],\n  {\n    variants: {\n      inset: {\n        false: ['default:p-lg'],\n      },\n      design: {\n        filled: [],\n        outlined: [\n          'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['rounded-t-[16px_8px] '],\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'basic',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        basic: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // FILLED\n      {\n        intent: 'main',\n        design: 'filled',\n        class: tw([\n          'bg-main text-on-main group-focus:bg-main-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'filled',\n        class: tw([\n          'bg-support text-on-support group-focus:bg-support-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'filled',\n        class: tw([\n          'bg-accent text-on-accent group-focus:bg-accent-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n        ]),\n      },\n      {\n        intent: 'basic',\n        design: 'filled',\n        class: tw([\n          'bg-basic text-on-basic group-focus:bg-basic-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-basic-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'filled',\n        class: tw([\n          'bg-success text-on-success group-focus:bg-success-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'filled',\n        class: tw([\n          'bg-alert text-on-alert group-focus:bg-alert-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-error group-focus:bg-error-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-info group-focus:bg-info-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'filled',\n        class: tw([\n          'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'filled',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n      // OUTLINED\n      /**\n       * Outlined styles are handled by the Card component (parent)\n       */\n      // TINTED\n      {\n        intent: 'main',\n        design: 'tinted',\n        class: tw([\n          'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'tinted',\n        class: tw([\n          'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'tinted',\n        class: tw([\n          'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n        ]),\n      },\n      {\n        intent: 'basic',\n        design: 'tinted',\n        class: tw([\n          'bg-basic-container text-on-basic-container group-focus:bg-basic-container-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'tinted',\n        class: tw([\n          'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'tinted',\n        class: tw([\n          'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'tinted',\n        class: tw([\n          'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'tinted',\n        class: tw([\n          'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'tinted',\n        class: tw([\n          'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'tinted',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n      inset: false,\n      hasBackdrop: true,\n    },\n  }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n  const Component = asChild ? Slot : 'div'\n  const { design, intent, hasBackdrop } = useCardContext()\n\n  return (\n    <Component\n      data-spark-component=\"card-content\"\n      ref={ref}\n      className={contentStyles({\n        className,\n        design,\n        intent,\n        inset,\n        hasBackdrop,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n"],"mappings":"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","names":["Card","import_jsx_runtime","RadixSlot","import_internal_utils","import_class_variance_authority","import_react","import_react","import_jsx_runtime","import_internal_utils","import_class_variance_authority","import_jsx_runtime","hasBackdrop","Card"]}