@spark-ui/components 17.6.1 → 17.7.0

package/dist/card/Card.styles.d.ts

@@ -1,7 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const cardStyles: (props?: ({
-    design?: "filled" | "outlined" | "tinted" | null | undefined;
-    hasBackdrop?: boolean | null | undefined;
-    intent?: "main" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surface" | "surfaceInverse" | null | undefined;
+    design?: "outlined" | "tinted" | null | undefined;
+    intent?: "main" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CardStylesProps = VariantProps<typeof cardStyles>;

package/dist/card/Content.styles.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const contentStyles: (props?: ({
     inset?: boolean | null | undefined;
-    design?: "filled" | "outlined" | "tinted" | null | undefined;
-    hasBackdrop?: boolean | null | undefined;
-    intent?: "main" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surface" | "surfaceInverse" | null | undefined;
+    design?: "outlined" | "tinted" | null | undefined;
+    hasType?: boolean | null | undefined;
+    intent?: "main" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ContentStylesProps = VariantProps<typeof contentStyles>;

package/dist/card/Type.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
+export declare const typeStyles: (props?: ({
+    intent?: "main" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surface" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TypeStylesProps = VariantProps<typeof typeStyles>;
+export interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {
+    /**
+     * The type or category to display (e.g., "Best seller", "New product")
+     */
+    children?: ReactNode;
+}
+export declare const Type: {
+    ({ intent, children, ...props }: TypeProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/card/context.d.ts

@@ -2,7 +2,7 @@ import { CardStylesProps } from './Card.styles';
 export interface CardContextValue {
     design: CardStylesProps['design'];
     intent: CardStylesProps['intent'];
-    hasBackdrop: boolean;
+    hasType: boolean;
     inset: boolean;
     isInteractive: boolean;
 }

package/dist/card/index.d.mts

@@ -1,11 +1,12 @@
-import { Backdrop } from './Backdrop';
 import { Card as Root } from './Card';
 import { Content } from './Content';
+import { Type } from './Type';
 /**
  * A container component that groups related content and actions in a single, styled surface.
  */
 export declare const Card: typeof Root & {
     Content: typeof Content;
-    Backdrop: typeof Backdrop;
+    Type: typeof Type;
 };
 export { type CardProps } from './Card';
+export { type TypeProps } from './Type';

package/dist/card/index.d.ts

@@ -1,11 +1,12 @@
-import { Backdrop } from './Backdrop';
 import { Card as Root } from './Card';
 import { Content } from './Content';
+import { Type } from './Type';
 /**
  * A container component that groups related content and actions in a single, styled surface.
  */
 export declare const Card: typeof Root & {
     Content: typeof Content;
-    Backdrop: typeof Backdrop;
+    Type: typeof Type;
 };
 export { type CardProps } from './Card';
+export { type TypeProps } from './Type';

package/dist/card/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`);let t=require(`class-variance-authority`),n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/internal-utils`);var a=(0,t.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,i.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`],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`}}),o=({intent:e=`main`,animation:t=`none`,...n})=>(0,r.jsx)(`div`,{className:a({intent:e,animation:t}),...n});o.displayName=`Card.Backdrop`;var s=(0,t.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:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]})},compoundVariants:[{intent:`main`,design:`outlined`,class:(0,i.tw)([`border-main`])},{intent:`support`,design:`outlined`,class:(0,i.tw)([`border-support`])},{intent:`accent`,design:`outlined`,class:(0,i.tw)([`border-accent`])},{intent:`success`,design:`outlined`,class:(0,i.tw)([`border-success`])},{intent:`alert`,design:`outlined`,class:(0,i.tw)([`border-alert`])},{intent:`danger`,design:`outlined`,class:(0,i.tw)([`border-error`])},{intent:`info`,design:`outlined`,class:(0,i.tw)([`border-info`])},{intent:`neutral`,design:`outlined`,class:(0,i.tw)([`border-neutral`])},{intent:`surface`,design:`outlined`,class:(0,i.tw)([`border-outline`])}],defaultVariants:{design:`filled`,intent:`surface`}}),c=(0,n.createContext)(void 0),l=()=>{let e=(0,n.useContext)(c);if(!e)throw Error(`useCardContext must be used within a Card component`);return e},u=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseMove`,`onMouseOver`,`onMouseOut`,`onDoubleClick`,`onContextMenu`],d=e=>{let t=!1,r=e=>{t||n.Children.forEach(e,e=>{if(!t&&(0,n.isValidElement)(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},f=(e,t,r)=>{if(u.some(e=>e in r))return!0;if(!t)return!1;let i=n.Children.only(e);if(!(0,n.isValidElement)(i))return!1;if(typeof i.type==`string`&&[`a`,`button`].includes(i.type))return!0;let a=i.props;return u.some(e=>e in a)},p=({children:t,design:n=`filled`,intent:i=`surface`,inset:a=!1,asChild:o,className:l,ref:u,...p})=>{let m=o?e.Slot:`div`,h=d(t),g=f(t,o,p);return(0,r.jsx)(c.Provider,{value:{design:n,intent:i,hasBackdrop:h,inset:a,isInteractive:g},children:(0,r.jsx)(m,{"data-spark-component":`card`,"data-interactive":g,ref:u,className:s({className:l,design:n,intent:i,hasBackdrop:h}),...p,children:t})})};p.displayName=`Card`;var m=(0,t.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,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[],surfaceInverse:[]})},compoundVariants:[{intent:`main`,design:`filled`,class:(0,i.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,i.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,i.tw)([`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:(0,i.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,i.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,i.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,i.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,i.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,i.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:(0,i.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,i.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,i.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:`success`,design:`tinted`,class:(0,i.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,i.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,i.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,i.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,i.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,i.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}}),h=({children:t,inset:n,asChild:i,className:a,ref:o,...s})=>{let c=i?e.Slot:`div`,{design:u,intent:d,hasBackdrop:f}=l();return(0,r.jsx)(c,{"data-spark-component":`card-content`,ref:o,className:m({className:a,design:u,intent:d,inset:n,hasBackdrop:f}),...s,children:t})};h.displayName=`Content`;var g=Object.assign(p,{Content:h,Backdrop:o});g.displayName=`Card`,h.displayName=`Card.Content`,o.displayName=`Card.Backdrop`,exports.Card=g;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../slot/index.js`);let t=require(`class-variance-authority`),n=require(`react`),r=require(`react/jsx-runtime`),i=require(`@spark-ui/internal-utils`);var a=(0,t.cva)([`group relative bg-clip-padding default:rounded-lg focus-visible:u-outline`,`disabled:opacity-dim-3 disabled:cursor-not-allowed`],{variants:{design:{outlined:[`border-sm`],tinted:[]},intent:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[{intent:`main`,design:`outlined`,class:(0,i.tw)([`border-main`])},{intent:`support`,design:`outlined`,class:(0,i.tw)([`border-support`])},{intent:`accent`,design:`outlined`,class:(0,i.tw)([`border-accent`])},{intent:`success`,design:`outlined`,class:(0,i.tw)([`border-success`])},{intent:`alert`,design:`outlined`,class:(0,i.tw)([`border-alert`])},{intent:`danger`,design:`outlined`,class:(0,i.tw)([`border-error`])},{intent:`info`,design:`outlined`,class:(0,i.tw)([`border-info`])},{intent:`neutral`,design:`outlined`,class:(0,i.tw)([`border-neutral`])},{intent:`surface`,design:`outlined`,class:(0,i.tw)([`border-outline`])}],defaultVariants:{design:`outlined`,intent:`surface`}}),o=(0,n.createContext)(void 0),s=()=>{let e=(0,n.useContext)(o);if(!e)throw Error(`useCardContext must be used within a Card component`);return e},c=[`onClick`,`onMouseDown`,`onMouseUp`,`onMouseEnter`,`onMouseLeave`,`onMouseMove`,`onMouseOver`,`onMouseOut`,`onDoubleClick`,`onContextMenu`],l=e=>{let t=!1,r=e=>{t||n.Children.forEach(e,e=>{if(!t&&(0,n.isValidElement)(e)){if(typeof e.type==`function`&&e.type.displayName===`Card.Type`){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},u=(e,t,r)=>{if(c.some(e=>e in r))return!0;if(!t)return!1;let i=n.Children.only(e);if(!(0,n.isValidElement)(i))return!1;if(typeof i.type==`string`&&[`a`,`button`].includes(i.type))return!0;let a=i.props;return c.some(e=>e in a)},d=({children:t,design:n=`outlined`,intent:i=`surface`,inset:s=!1,asChild:c,className:d,ref:f,...p})=>{let m=c?e.Slot:`div`,h=l(t),g=u(t,c,p);return(0,r.jsx)(o.Provider,{value:{design:n,intent:i,hasType:h,inset:s,isInteractive:g},children:(0,r.jsx)(m,{"data-spark-component":`card`,"data-interactive":g,ref:f,className:a({className:d,design:n,intent:i}),...p,children:t})})};d.displayName=`Card`;var f=(0,t.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:{outlined:[`default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered`],tinted:[]},hasType:{true:[`rounded-t-0`]},intent:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]})},compoundVariants:[{intent:`main`,design:`tinted`,class:(0,i.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,i.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,i.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:`success`,design:`tinted`,class:(0,i.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,i.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,i.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,i.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,i.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,i.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:`outlined`,intent:`surface`,inset:!1,hasType:!0}}),p=({children:t,inset:n,asChild:i,className:a,ref:o,...c})=>{let l=i?e.Slot:`div`,{design:u,intent:d,hasType:p}=s();return(0,r.jsx)(l,{"data-spark-component":`card-content`,ref:o,className:f({className:a,design:u,intent:d,inset:n,hasType:p}),...c,children:t})};p.displayName=`Content`;var m=(0,t.cva)([`rounded-t-lg default:text-body-2 default:font-bold`,`default:text-center`,`min-h-sz-32`,`px-md`,`py-xs`,`flex items-center justify-center`,`whitespace-normal break-words`,`-mx-px -mt-px`],{variants:{intent:{main:[`bg-main text-on-main`],support:[`bg-support text-on-support`],accent:[`bg-accent text-on-accent`],success:[`bg-success text-on-success`],alert:[`bg-alert text-on-alert`],danger:[`bg-error text-on-error`],info:[`bg-info text-on-info`],neutral:[`bg-neutral text-on-neutral`],surface:[`bg-surface-inverse text-on-surface-inverse`]}},defaultVariants:{intent:`main`}}),h=({intent:e,children:t,...n})=>{let i=s(),a=e??i.intent??`main`;return t?(0,r.jsx)(`header`,{className:m({intent:a}),...n,children:t}):null};h.displayName=`Card.Type`;var g=Object.assign(d,{Content:p,Type:h});g.displayName=`Card`,p.displayName=`Card.Content`,h.displayName=`Card.Type`,exports.Card=g;
 //# sourceMappingURL=index.js.map

package/dist/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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          '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        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          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\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: '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          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\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: '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: '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\n/**\n * A container component that groups related content and actions in a single, styled surface.\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"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../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/Type.tsx","../../src/card/index.ts"],"sourcesContent":["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        outlined: ['border-sm'],\n        tinted: [],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\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: '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: 'outlined',\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  hasType: 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 hasType = (children: ReactNode): boolean => {\n  let typeFound = false\n\n  const searchForType = (node: ReactNode): void => {\n    if (typeFound) return\n\n    Children.forEach(node, child => {\n      if (typeFound) return\n\n      if (isValidElement(child)) {\n        const isTypeComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n        if (isTypeComponent) {\n          typeFound = 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            searchForType(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForType(children)\n\n  return typeFound\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 { hasType, 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 = 'outlined',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const typeDetected = hasType(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasType: typeDetected,\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        })}\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        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      hasType: {\n        true: ['rounded-t-0'],\n      },\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [\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: '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: 'outlined',\n      intent: 'surface',\n      inset: false,\n      hasType: 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, hasType } = 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        hasType,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n  [\n    // Base structure\n    'rounded-t-lg default:text-body-2 default:font-bold',\n    'default:text-center',\n\n    // Height and layout\n    'min-h-sz-32', // Minimum height same as Backdrop\n    'px-md', // Horizontal padding for text\n    'py-xs', // Vertical padding for text (allows height to grow)\n\n    // Layout\n    'flex items-center justify-center', // Vertical centering of text\n    'whitespace-normal break-words', // Allow text wrapping\n\n    // Fix border-radius visual gap by overlapping parent border\n    '-mx-px -mt-px',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main text-on-main'],\n        support: ['bg-support text-on-support'],\n        accent: ['bg-accent text-on-accent'],\n        success: ['bg-success text-on-success'],\n        alert: ['bg-alert text-on-alert'],\n        danger: ['bg-error text-on-error'],\n        info: ['bg-info text-on-info'],\n        neutral: ['bg-neutral text-on-neutral'],\n        surface: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n    },\n    defaultVariants: {\n      intent: 'main',\n    },\n  }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n  /**\n   * The type or category to display (e.g., \"Best seller\", \"New product\")\n   */\n  children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n  const cardContext = useCardContext()\n\n  // Use intent from props if provided, otherwise inherit from parent Card context\n  const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n  // Don't render if no children provided (for backward compatibility with Backdrop)\n  if (!children) {\n    return null\n  }\n\n  return (\n    <header className={typeStyles({ intent: resolvedIntent })} {...props}>\n      {children}\n    </header>\n  )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Type: typeof Type\n} = Object.assign(Root, {\n  Content,\n  Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"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"}

package/dist/card/index.mjs

@@ -3,53 +3,13 @@ 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"], {
+var l = 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: [],
@@ -59,8 +19,7 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 			danger: [],
 			info: [],
 			neutral: [],
-			surface: [],
-			surfaceInverse: []
+			surface: []
 		})
 	},
 	compoundVariants: [
@@ -111,14 +70,14 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 		}
 	],
 	defaultVariants: {
-		design: "filled",
+		design: "outlined",
 		intent: "surface"
 	}
-}), f = r(void 0), p = () => {
-	let e = a(f);
+}), u = r(void 0), d = () => {
+	let e = a(u);
 	if (!e) throw Error("useCardContext must be used within a Card component");
 	return e;
-}, m = [
+}, f = [
 	"onClick",
 	"onMouseDown",
 	"onMouseUp",
@@ -129,11 +88,11 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 	"onMouseOut",
 	"onDoubleClick",
 	"onContextMenu"
-], h = (e) => {
+], p = (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") {
+				if (typeof e.type == "function" && e.type.displayName === "Card.Type") {
 					t = !0;
 					return;
 				}
@@ -145,51 +104,49 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 		});
 	};
 	return r(e), t;
-}, g = (e, t, r) => {
-	if (m.some((e) => e in r)) return !0;
+}, m = (e, t, r) => {
+	if (f.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, {
+	return f.some((e) => e in o);
+}, h = ({ children: t, design: n = "outlined", intent: r = "surface", inset: i = !1, asChild: a, className: s, ref: c, ...d }) => {
+	let f = a ? e : "div", h = p(t), g = m(t, a, d);
+	return /* @__PURE__ */ o(u.Provider, {
 		value: {
 			design: n,
 			intent: r,
-			hasBackdrop: p,
+			hasType: h,
 			inset: i,
-			isInteractive: m
+			isInteractive: g
 		},
-		children: /* @__PURE__ */ o(u, {
+		children: /* @__PURE__ */ o(f, {
 			"data-spark-component": "card",
-			"data-interactive": m,
+			"data-interactive": g,
 			ref: c,
-			className: d({
+			className: l({
 				className: s,
 				design: n,
-				intent: r,
-				hasBackdrop: p
+				intent: r
 			}),
-			...l,
+			...d,
 			children: t
 		})
 	});
 };
-_.displayName = "Card";
+h.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"], {
+var g = 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] "] },
+		hasType: { true: ["rounded-t-0"] },
 		intent: s({
 			main: [],
 			support: [],
@@ -199,56 +156,10 @@ var v = t(["relative h-full default:rounded-lg w-full focus-visible:u-outline",
 			danger: [],
 			info: [],
 			neutral: [],
-			surface: [],
-			surfaceInverse: []
+			surface: []
 		})
 	},
 	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",
@@ -296,35 +207,68 @@ var v = t(["relative h-full default:rounded-lg w-full focus-visible:u-outline",
 		}
 	],
 	defaultVariants: {
-		design: "filled",
+		design: "outlined",
 		intent: "surface",
 		inset: !1,
-		hasBackdrop: !0
+		hasType: !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();
+}), _ = ({ children: t, inset: n, asChild: r, className: i, ref: a, ...s }) => {
+	let c = r ? e : "div", { design: l, intent: u, hasType: f } = d();
 	return /* @__PURE__ */ o(c, {
 		"data-spark-component": "card-content",
 		ref: a,
-		className: v({
+		className: g({
 			className: i,
 			design: l,
 			intent: u,
 			inset: n,
-			hasBackdrop: d
+			hasType: f
 		}),
 		...s,
 		children: t
 	});
 };
-y.displayName = "Content";
+_.displayName = "Content";
+//#endregion
+//#region src/card/Type.tsx
+var v = t([
+	"rounded-t-lg default:text-body-2 default:font-bold",
+	"default:text-center",
+	"min-h-sz-32",
+	"px-md",
+	"py-xs",
+	"flex items-center justify-center",
+	"whitespace-normal break-words",
+	"-mx-px -mt-px"
+], {
+	variants: { intent: {
+		main: ["bg-main text-on-main"],
+		support: ["bg-support text-on-support"],
+		accent: ["bg-accent text-on-accent"],
+		success: ["bg-success text-on-success"],
+		alert: ["bg-alert text-on-alert"],
+		danger: ["bg-error text-on-error"],
+		info: ["bg-info text-on-info"],
+		neutral: ["bg-neutral text-on-neutral"],
+		surface: ["bg-surface-inverse text-on-surface-inverse"]
+	} },
+	defaultVariants: { intent: "main" }
+}), y = ({ intent: e, children: t, ...n }) => {
+	let r = d(), i = e ?? r.intent ?? "main";
+	return t ? /* @__PURE__ */ o("header", {
+		className: v({ intent: i }),
+		...n,
+		children: t
+	}) : null;
+};
+y.displayName = "Card.Type";
 //#endregion
 //#region src/card/index.ts
-var b = Object.assign(_, {
-	Content: y,
-	Backdrop: u
+var b = Object.assign(h, {
+	Content: _,
+	Type: y
 });
-b.displayName = "Card", y.displayName = "Card.Content", u.displayName = "Card.Backdrop";
+b.displayName = "Card", _.displayName = "Card.Content", y.displayName = "Card.Type";
 //#endregion
 export { b as Card };
 

package/dist/card/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"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          '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        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          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\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: '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          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\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: '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: '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\n/**\n * A container component that groups related content and actions in a single, styled surface.\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"],"mappings":";;;;;;AAGA,IAAa,IAAiB,EAC5B;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,WAAW;GACT,MAAM;GACN,OAAO;GACR;EACD,QAAQ,EAcN;GACA,MAAM,CAAC,uEAAuE;GAC9E,SAAS,CAAC,gFAAgF;GAC1F,QAAQ,CAAC,6EAA6E;GACtF,SAAS,CAAC,gFAAgF;GAC1F,OAAO,CAAC,0EAA0E;GAClF,QAAQ,CAAC,0EAA0E;GACnF,MAAM,CAAC,uEAAuE;GAC9E,SAAS,CAAC,gFAAgF;GAC1F,SAAS,CAAC,gFAAgF;GAC1F,gBAAgB,CACd,gFACD;GACF,CAAC;EACH;CACD,iBAAiB;EACf,QAAQ;EACR,WAAW;EACZ;CACF,CACF,EAQY,KAAY,EAAE,YAAS,QAAQ,eAAY,QAAQ,GAAG,QAC1D,kBAAC,OAAD;CAAK,WAAW,EAAe;EAAE;EAAQ;EAAW,CAAC;CAAE,GAAI;CAAS,CAAA;AAG7E,EAAS,cAAc;;;AC3DvB,IAAa,IAAa,EACxB,CACE,6EACA,qDACD,EACD;CACE,UAAU;EACR,QAAQ;GACN,QAAQ,EAAE;GACV,UAAU,CAAC,YAAY;GACvB,QAAQ,EAAE;GACX;EACD,aAAa,EACX,MAAM,CAAC,QAAQ,EAChB;EAID,QAAQ,EAcN;GACA,MAAM,EAAE;GACR,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,OAAO,EAAE;GACT,QAAQ,EAAE;GACV,MAAM,EAAE;GACR,SAAS,EAAE;GACX,SAAS,EAAE;GACX,gBAAgB,EAAE;GACnB,CAAC;EACH;CACD,kBAAkB;EAEhB;GAAE,QAAQ;GAAQ,QAAQ;GAAY,OAAO,EAAG,CAAC,cAAc,CAAC;GAAE;EAClE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,iBAAiB,CAAC;GAAE;EACxE;GAAE,QAAQ;GAAU,QAAQ;GAAY,OAAO,EAAG,CAAC,gBAAgB,CAAC;GAAE;EACtE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,iBAAiB,CAAC;GAAE;EACxE;GAAE,QAAQ;GAAS,QAAQ;GAAY,OAAO,EAAG,CAAC,eAAe,CAAC;GAAE;EACpE;GAAE,QAAQ;GAAU,QAAQ;GAAY,OAAO,EAAG,CAAC,eAAe,CAAC;GAAE;EACrE;GAAE,QAAQ;GAAQ,QAAQ;GAAY,OAAO,EAAG,CAAC,cAAc,CAAC;GAAE;EAClE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,iBAAiB,CAAC;GAAE;EACxE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,iBAAiB,CAAC;GAAE;EACzE;CACD,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACT;CACF,CACF,ECrDK,IAAc,EAA4C,KAAA,EAAU,EAE7D,UAAuB;CAClC,IAAM,IAAU,EAAW,EAAY;AACvC,KAAI,CAAC,EACH,OAAU,MAAM,sDAAsD;AAGxE,QAAO;GClBH,IAAe;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EAEY,KAAe,MAAiC;CAC3D,IAAI,IAAgB,IAEd,KAAqB,MAA0B;AAC/C,OAEJ,EAAS,QAAQ,IAAM,MAAS;AAC1B,aAEA,EAAe,EAAM,EAAE;AAKzB,QAHE,OAAO,EAAM,QAAS,cACrB,EAAM,KAAkC,gBAAgB,iBAElC;AACvB,SAAgB;AAEhB;;AAMF,QAFE,EAAM,SAAS,OAAO,EAAM,SAAU,YAAY,cAAc,EAAM,OAEvD;KACf,IAAM,IAAiB,EAAM,MAAkC;AAC/D,KAAI,KAAiD,QACnD,EAAkB,EAAc;;;IAItC;;AAKJ,QAFA,EAAkB,EAAS,EAEpB;GAGI,KACX,GACA,GACA,MACY;AAGZ,KAF8B,EAAa,MAAK,MAAS,KAAS,EAAM,CAGtE,QAAO;AAGT,KAAI,CAAC,EACH,QAAO;CAGT,IAAM,IAAQ,EAAS,KAAK,EAAS;AAErC,KAAI,CAAC,EAAe,EAAM,CACxB,QAAO;AAOT,KAFE,OAAO,EAAM,QAAS,YAFI,CAAC,KAAK,SAAS,CAEa,SAAS,EAAM,KAAK,CAG1E,QAAO;CAGT,IAAM,IAAa,EAAM;AAGzB,QAF8B,EAAa,MAAK,MAAS,KAAS,EAAW;GCjElE,KAAQ,EACnB,aACA,YAAS,UACT,YAAS,WACT,WAAQ,IACR,YACA,cACA,QACA,GAAG,QACY;CACf,IAAM,IAAY,IAAU,IAAO,OAC7B,IAAmB,EAAY,EAAS,EACxC,IAAsB,EAAc,GAAU,GAAS,EAAM;AAEnE,QACE,kBAAC,EAAY,UAAb;EACE,OAAO;GACL;GACA;GACA,aAAa;GACb;GACA,eAAe;GAChB;YAED,kBAAC,GAAD;GACE,wBAAqB;GACrB,oBAAkB;GACb;GACL,WAAW,EAAW;IACpB;IACA;IACA;IACA,aAAa;IACd,CAAC;GACF,GAAI;GAEH;GACS,CAAA;EACS,CAAA;;AAI3B,EAAK,cAAc;;;ACzDnB,IAAa,IAAgB,EAC3B,CACE,qEACA,6DACD,EACD;CACE,UAAU;EACR,OAAO,EACL,OAAO,CAAC,eAAe,EACxB;EACD,QAAQ;GACN,QAAQ,EAAE;GACV,UAAU,CACR,oIACD;GACD,QAAQ,EAAE;GACX;EACD,aAAa,EACX,MAAM,CAAC,wBAAwB,EAChC;EACD,QAAQ,EAcN;GACA,MAAM,EAAE;GACR,SAAS,EAAE;GACX,QAAQ,EAAE;GACV,SAAS,EAAE;GACX,OAAO,EAAE;GACT,QAAQ,EAAE;GACV,MAAM,EAAE;GACR,SAAS,EAAE;GACX,SAAS,EAAE;GACX,gBAAgB,EAAE;GACnB,CAAC;EACH;CACD,kBAAkB;EAEhB;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,oDACA,+EACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,6DACA,kFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,0DACA,iFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,6DACA,kFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,uDACA,gFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,uDACA,gFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,qDACA,+EACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,6DACA,kFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,6DACA,kFACD,CAAC;GACH;EAMD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,kFACA,yFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,2FACA,4FACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,wFACA,2FACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,2FACA,4FACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,qFACA,0FACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,qFACA,0FACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,kFACA,yFACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,2FACA,4FACD,CAAC;GACH;EACD;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,6DACA,kFACD,CAAC;GACH;EACF;CACD,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,aAAa;EACd;CACF,CACF,EChMY,KAAW,EAAE,aAAU,UAAO,YAAS,cAAW,QAAK,GAAG,QAA0B;CAC/F,IAAM,IAAY,IAAU,IAAO,OAC7B,EAAE,WAAQ,WAAQ,mBAAgB,GAAgB;AAExD,QACE,kBAAC,GAAD;EACE,wBAAqB;EAChB;EACL,WAAW,EAAc;GACvB;GACA;GACA;GACA;GACA;GACD,CAAC;EACF,GAAI;EAEH;EACS,CAAA;;AAIhB,EAAQ,cAAc;;;AChCtB,IAAa,IAGT,OAAO,OAAO,GAAM;CACtB;CACA;CACD,CAAC;AAEF,EAAK,cAAc,QACnB,EAAQ,cAAc,gBACtB,EAAS,cAAc"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../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/Type.tsx","../../src/card/index.ts"],"sourcesContent":["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        outlined: ['border-sm'],\n        tinted: [],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\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: '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: 'outlined',\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  hasType: 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 hasType = (children: ReactNode): boolean => {\n  let typeFound = false\n\n  const searchForType = (node: ReactNode): void => {\n    if (typeFound) return\n\n    Children.forEach(node, child => {\n      if (typeFound) return\n\n      if (isValidElement(child)) {\n        const isTypeComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n        if (isTypeComponent) {\n          typeFound = 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            searchForType(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForType(children)\n\n  return typeFound\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 { hasType, 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 = 'outlined',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const typeDetected = hasType(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasType: typeDetected,\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        })}\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        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      hasType: {\n        true: ['rounded-t-0'],\n      },\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [\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: '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: 'outlined',\n      intent: 'surface',\n      inset: false,\n      hasType: 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, hasType } = 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        hasType,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n  [\n    // Base structure\n    'rounded-t-lg default:text-body-2 default:font-bold',\n    'default:text-center',\n\n    // Height and layout\n    'min-h-sz-32', // Minimum height same as Backdrop\n    'px-md', // Horizontal padding for text\n    'py-xs', // Vertical padding for text (allows height to grow)\n\n    // Layout\n    'flex items-center justify-center', // Vertical centering of text\n    'whitespace-normal break-words', // Allow text wrapping\n\n    // Fix border-radius visual gap by overlapping parent border\n    '-mx-px -mt-px',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main text-on-main'],\n        support: ['bg-support text-on-support'],\n        accent: ['bg-accent text-on-accent'],\n        success: ['bg-success text-on-success'],\n        alert: ['bg-alert text-on-alert'],\n        danger: ['bg-error text-on-error'],\n        info: ['bg-info text-on-info'],\n        neutral: ['bg-neutral text-on-neutral'],\n        surface: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n    },\n    defaultVariants: {\n      intent: 'main',\n    },\n  }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n  /**\n   * The type or category to display (e.g., \"Best seller\", \"New product\")\n   */\n  children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n  const cardContext = useCardContext()\n\n  // Use intent from props if provided, otherwise inherit from parent Card context\n  const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n  // Don't render if no children provided (for backward compatibility with Backdrop)\n  if (!children) {\n    return null\n  }\n\n  return (\n    <header className={typeStyles({ intent: resolvedIntent })} {...props}>\n      {children}\n    </header>\n  )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Type: typeof Type\n} = Object.assign(Root, {\n  Content,\n  Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"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"}

package/dist/card/utils.d.ts

@@ -1,3 +1,3 @@
 import { ReactNode } from 'react';
-export declare const hasBackdrop: (children: ReactNode) => boolean;
+export declare const hasType: (children: ReactNode) => boolean;
 export declare const isInteractive: (children: ReactNode, asChild: boolean | undefined, props: Record<string, any>) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.6.1",
+  "version": "17.7.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "1.0.0",
-    "@spark-ui/hooks": "17.6.1",
-    "@spark-ui/icons": "17.6.1",
-    "@spark-ui/internal-utils": "17.6.1",
+    "@spark-ui/hooks": "17.7.0",
+    "@spark-ui/icons": "17.7.0",
+    "@spark-ui/internal-utils": "17.7.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.6.1",
+    "@spark-ui/theme-utils": "17.7.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"

package/dist/card/Backdrop.d.ts

@@ -1,14 +0,0 @@
-import { VariantProps } from 'class-variance-authority';
-export declare const backdropStyles: (props?: ({
-    animation?: "none" | "pulse" | null | undefined;
-    intent?: "main" | "alert" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | "surface" | "surfaceInverse" | null | undefined;
-} & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type BackdropStylesProps = VariantProps<typeof backdropStyles>;
-interface BackdropProps extends BackdropStylesProps {
-    className?: string;
-}
-export declare const Backdrop: {
-    ({ intent, animation, ...props }: BackdropProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};