npm - @spark-ui/components - Versions diffs - 18.0.0 → 18.0.1 - Mend

@spark-ui/components 18.0.0 → 18.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/card/Card.styles.d.ts +1 -0
package/dist/card/Type.d.ts +1 -0
package/dist/card/index.js +1 -1
package/dist/card/index.js.map +1 -1
package/dist/card/index.mjs +37 -7
package/dist/card/index.mjs.map +1 -1
package/package.json +5 -5

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

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

package/dist/card/Type.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { ComponentProps, ReactNode } from 'react';
 export declare const typeStyles: (props?: ({
     intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
     design?: "outlined" | "tinted" | null | undefined;
+    hasMediumBorder?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TypeStylesProps = VariantProps<typeof typeStyles>;
 export interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {

package/dist/card/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});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,{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 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-highlight`,`default:text-center`,`min-h-sz-32`,`px-md`,`py-xs`,`flex items-center justify-center`,`whitespace-normal break-words`],{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`]},design:{outlined:[`-mx-px -mt-px`],tinted:[]}},defaultVariants:{intent:`main`,design:`outlined`}}),h=({intent:e,children:t,...n})=>{let i=s(),a=e??i.intent??`main`;return t?(0,r.jsx)(`header`,{className:m({intent:a,design:i.design}),...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;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});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:[],tinted:[]},intent:(0,i.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),hasType:{true:[],false:[]}},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`])},{design:`outlined`,hasType:!0,class:(0,i.tw)([`border-md`])},{design:`outlined`,hasType:!1,class:(0,i.tw)([`border-sm`])}],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,{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,hasType:h}),...p,children:t})})};d.displayName=`Card`;var f=(0,t.cva)([`relative 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-highlight`,`default:text-center`,`min-h-sz-32`,`px-md`,`py-xs`,`flex items-center justify-center`,`whitespace-normal break-words`],{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`]},design:{outlined:[],tinted:[]},hasMediumBorder:{true:[],false:[]}},compoundVariants:[{design:`outlined`,hasMediumBorder:!1,class:`-mx-px -mt-px`},{design:`outlined`,hasMediumBorder:!0,class:`-mx-(--border-width-md) -mt-(--border-width-md)`}],defaultVariants:{intent:`main`,design:`outlined`,hasMediumBorder:!1}}),h=({intent:e,children:t,...n})=>{let i=s(),a=e??i.intent??`main`,o=i.design===`outlined`&&i.hasType;return t?(0,r.jsx)(`header`,{className:m({intent:a,design:i.design,hasMediumBorder:o}),...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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"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\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>\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 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\n/\n The main content area of the card. Renders a <div> element.\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-highlight',\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 {\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 design: {\n outlined: ['-mx-px -mt-px'], // Fix border-radius visual gap by overlapping parent border\n tinted: [],\n },\n },\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\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\n className={typeStyles({ intent: resolvedIntent, design: cardContext.design })}\n {...props}\n >\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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"}
1	+ {"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: [],\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 hasType: {\n true: [],\n false: [],\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 // OUTLINED + TYPE\n { design: 'outlined', hasType: true, class: tw(['border-md']) },\n // OUTLINED + NO TYPE\n { design: 'outlined', hasType: false, class: tw(['border-sm']) },\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\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 hasType: typeDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext>\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 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\n/\n The main content area of the card. Renders a <div> element.\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-highlight',\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 {\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 design: {\n outlined: [], // Margins handled via compoundVariants to account for border width\n tinted: [],\n },\n hasMediumBorder: {\n true: [],\n false: [],\n },\n },\n compoundVariants: [\n { design: 'outlined', hasMediumBorder: false, class: '-mx-px -mt-px' },\n {\n design: 'outlined',\n hasMediumBorder: true,\n class: '-mx-(--border-width-md) -mt-(--border-width-md)',\n },\n ],\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\n hasMediumBorder: false,\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 // Card with outlined design and hasType=true uses border-md (2px), so Type needs -2px margins\n const hasMediumBorder = cardContext.design === 'outlined' && cardContext.hasType\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\n className={typeStyles({\n intent: resolvedIntent,\n design: cardContext.design,\n hasMediumBorder,\n })}\n {...props}\n >\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 CHANGED Viewed

@@ -7,7 +7,7 @@ import { makeVariants as s, tw as c } from "@spark-ui/internal-utils";
 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: {
-			outlined: ["border-sm"],
+			outlined: [],
 			tinted: []
 		},
 		intent: s({
@@ -20,7 +20,11 @@ var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 			info: [],
 			neutral: [],
 			surface: []
-		})
+		}),
+		hasType: {
+			true: [],
+			false: []
+		}
 	},
 	compoundVariants: [
 		{
@@ -67,6 +71,16 @@ var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 			intent: "surface",
 			design: "outlined",
 			class: c(["border-outline"])
+		},
+		{
+			design: "outlined",
+			hasType: !0,
+			class: c(["border-md"])
+		},
+		{
+			design: "outlined",
+			hasType: !1,
+			class: c(["border-sm"])
 		}
 	],
 	defaultVariants: {
@@ -129,7 +143,8 @@ var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 			className: l({
 				className: s,
 				design: n,
-				intent: r
+				intent: r,
+				hasType: h
 			}),
 			...d,
 			children: t
@@ -253,20 +268,35 @@ var v = t([
 			surface: ["bg-surface-inverse text-on-surface-inverse"]
 		},
 		design: {
-			outlined: ["-mx-px -mt-px"],
+			outlined: [],
 			tinted: []
+		},
+		hasMediumBorder: {
+			true: [],
+			false: []
 		}
 	},
+	compoundVariants: [{
+		design: "outlined",
+		hasMediumBorder: !1,
+		class: "-mx-px -mt-px"
+	}, {
+		design: "outlined",
+		hasMediumBorder: !0,
+		class: "-mx-(--border-width-md) -mt-(--border-width-md)"
+	}],
 	defaultVariants: {
 		intent: "main",
-		design: "outlined"
+		design: "outlined",
+		hasMediumBorder: !1
 	}
 }), y = ({ intent: e, children: t, ...n }) => {
-	let r = d(), i = e ?? r.intent ?? "main";
+	let r = d(), i = e ?? r.intent ?? "main", a = r.design === "outlined" && r.hasType;
 	return t ? /* @__PURE__ */ o("header", {
 		className: v({
 			intent: i,
-			design: r.design
+			design: r.design,
+			hasMediumBorder: a
 		}),
 		...n,
 		children: t

package/dist/card/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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\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>\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 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\n/\n The main content area of the card. Renders a <div> element.\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-highlight',\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 {\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 design: {\n outlined: ['-mx-px -mt-px'], // Fix border-radius visual gap by overlapping parent border\n tinted: [],\n },\n },\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\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\n className={typeStyles({ intent: resolvedIntent, design: cardContext.design })}\n {...props}\n >\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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"}
1	+ {"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: [],\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 hasType: {\n true: [],\n false: [],\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 // OUTLINED + TYPE\n { design: 'outlined', hasType: true, class: tw(['border-md']) },\n // OUTLINED + NO TYPE\n { design: 'outlined', hasType: false, class: tw(['border-sm']) },\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\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 hasType: typeDetected,\n })}\n {...props}\n >\n {children}\n </Component>\n </CardContext>\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 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\n/\n The main content area of the card. Renders a <div> element.\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-highlight',\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 {\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 design: {\n outlined: [], // Margins handled via compoundVariants to account for border width\n tinted: [],\n },\n hasMediumBorder: {\n true: [],\n false: [],\n },\n },\n compoundVariants: [\n { design: 'outlined', hasMediumBorder: false, class: '-mx-px -mt-px' },\n {\n design: 'outlined',\n hasMediumBorder: true,\n class: '-mx-(--border-width-md) -mt-(--border-width-md)',\n },\n ],\n defaultVariants: {\n intent: 'main',\n design: 'outlined',\n hasMediumBorder: false,\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 // Card with outlined design and hasType=true uses border-md (2px), so Type needs -2px margins\n const hasMediumBorder = cardContext.design === 'outlined' && cardContext.hasType\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\n className={typeStyles({\n intent: resolvedIntent,\n design: cardContext.design,\n hasMediumBorder,\n })}\n {...props}\n >\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":";;;;;;AAGA,IAAa,IAAa,EACxB,CACE,6EACA,oDACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,UAAU,CAAC;GACX,QAAQ,CAAC;EACX;EAIA,QAAQ,EAGN;GACA,MAAM,CAAC;GACP,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,OAAO,CAAC;GACR,QAAQ,CAAC;GACT,MAAM,CAAC;GACP,SAAS,CAAC;GACV,SAAS,CAAC;EACZ,CAAC;EACD,SAAS;GACP,MAAM,CAAC;GACP,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;EAEhB;GAAE,QAAQ;GAAQ,QAAQ;GAAY,OAAO,EAAG,CAAC,aAAa,CAAC;EAAE;EACjE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,gBAAgB,CAAC;EAAE;EACvE;GAAE,QAAQ;GAAU,QAAQ;GAAY,OAAO,EAAG,CAAC,eAAe,CAAC;EAAE;EACrE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,gBAAgB,CAAC;EAAE;EACvE;GAAE,QAAQ;GAAS,QAAQ;GAAY,OAAO,EAAG,CAAC,cAAc,CAAC;EAAE;EACnE;GAAE,QAAQ;GAAU,QAAQ;GAAY,OAAO,EAAG,CAAC,cAAc,CAAC;EAAE;EACpE;GAAE,QAAQ;GAAQ,QAAQ;GAAY,OAAO,EAAG,CAAC,aAAa,CAAC;EAAE;EACjE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,gBAAgB,CAAC;EAAE;EACvE;GAAE,QAAQ;GAAW,QAAQ;GAAY,OAAO,EAAG,CAAC,gBAAgB,CAAC;EAAE;EAEvE;GAAE,QAAQ;GAAY,SAAS;GAAM,OAAO,EAAG,CAAC,WAAW,CAAC;EAAE;EAE9D;GAAE,QAAQ;GAAY,SAAS;GAAO,OAAO,EAAG,CAAC,WAAW,CAAC;EAAE;CACjE;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;CACV;AACF,CACF,GC7CM,IAAc,EAA4C,KAAA,CAAS,GAE5D,UAAuB;CAClC,IAAM,IAAU,EAAW,CAAW;CACtC,IAAI,CAAC,GACH,MAAU,MAAM,qDAAqD;CAGvE,OAAO;AACT,GCnBM,IAAe;CACnB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GAEa,KAAW,MAAiC;CACvD,IAAI,IAAY,IAEV,KAAiB,MAA0B;EAC3C,KAEJ,EAAS,QAAQ,IAAM,MAAS;GAC1B,UAEA,EAAe,CAAK,GAAG;IAKzB,IAHE,OAAO,EAAM,QAAS,cACrB,EAAM,KAAkC,gBAAgB,aAEtC;KACnB,IAAY;KAEZ;IACF;IAKA,IAFE,EAAM,SAAS,OAAO,EAAM,SAAU,YAAY,cAAc,EAAM,OAEvD;KACf,IAAM,IAAiB,EAAM,MAAkC;KAC/D,AAAI,KAAiD,QACnD,EAAc,CAAa;IAE/B;GACF;EACF,CAAC;CACH;CAIA,OAFA,EAAc,CAAQ,GAEf;AACT,GAEa,KACX,GACA,GACA,MACY;CAGZ,IAF8B,EAAa,MAAK,MAAS,KAAS,CAE9D,GACF,OAAO;CAGT,IAAI,CAAC,GACH,OAAO;CAGT,IAAM,IAAQ,EAAS,KAAK,CAAQ;CAEpC,IAAI,CAAC,EAAe,CAAK,GACvB,OAAO;CAOT,IAFE,OAAO,EAAM,QAAS,YAAY,CAFP,KAAK,QAEE,CAAA,CAAoB,SAAS,EAAM,IAAI,GAGzE,OAAO;CAGT,IAAM,IAAa,EAAM;CAGzB,OAF8B,EAAa,MAAK,MAAS,KAAS,CAE3D;AACT,GCpEa,KAAQ,EACnB,aACA,YAAS,YACT,YAAS,WACT,WAAQ,IACR,YACA,cACA,QACA,GAAG,QACY;CACf,IAAM,IAAY,IAAU,IAAO,OAC7B,IAAe,EAAQ,CAAQ,GAC/B,IAAsB,EAAc,GAAU,GAAS,CAAK;CAElE,OACE,kBAAC,GAAD;EACE,OAAO;GACL;GACA;GACA,SAAS;GACT;GACA,eAAe;EACjB;YAEA,kBAAC,GAAD;GACE,wBAAqB;GACrB,oBAAkB;GACb;GACL,WAAW,EAAW;IACpB;IACA;IACA;IACA,SAAS;GACX,CAAC;GACD,GAAI;GAEH;EACQ,CAAA;CACA,CAAA;AAEjB;AAEA,EAAK,cAAc;;;ACzDnB,IAAa,IAAgB,EAC3B,CACE,8DACA,4DACF,GACA;CACE,UAAU;EACR,OAAO,EACL,OAAO,CAAC,cAAc,EACxB;EACA,QAAQ;GACN,UAAU,CACR,mIACF;GACA,QAAQ,CAAC;EACX;EACA,SAAS,EACP,MAAM,CAAC,aAAa,EACtB;EACA,QAAQ,EAGN;GACA,MAAM,CAAC;GACP,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,OAAO,CAAC;GACR,QAAQ,CAAC;GACT,MAAM,CAAC;GACP,SAAS,CAAC;GACV,SAAS,CAAC;EACZ,CAAC;CACH;CACA,kBAAkB;EAMhB;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,kFACA,wFACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,2FACA,2FACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,wFACA,0FACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,2FACA,2FACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,qFACA,yFACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,qFACA,yFACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,kFACA,wFACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,2FACA,2FACF,CAAC;EACH;EACA;GACE,QAAQ;GACR,QAAQ;GACR,OAAO,EAAG,CACR,6DACA,iFACF,CAAC;EACH;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,SAAS;CACX;AACF,CACF,GCvGa,KAAW,EAAE,aAAU,UAAO,YAAS,cAAW,QAAK,GAAG,QAA0B;CAC/F,IAAM,IAAY,IAAU,IAAO,OAC7B,EAAE,WAAQ,WAAQ,eAAY,EAAe;CAEnD,OACE,kBAAC,GAAD;EACE,wBAAqB;EAChB;EACL,WAAW,EAAc;GACvB;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACQ,CAAA;AAEf;AAEA,EAAQ,cAAc;;;ACrCtB,IAAa,IAAa,EACxB;CAEE;CACA;CAGA;CACA;CACA;CAGA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM,CAAC,sBAAsB;GAC7B,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,0BAA0B;GACnC,SAAS,CAAC,4BAA4B;GACtC,OAAO,CAAC,wBAAwB;GAChC,QAAQ,CAAC,wBAAwB;GACjC,MAAM,CAAC,sBAAsB;GAC7B,SAAS,CAAC,4BAA4B;GACtC,SAAS,CAAC,4CAA4C;EACxD;EACA,QAAQ;GACN,UAAU,CAAC;GACX,QAAQ,CAAC;EACX;EACA,iBAAiB;GACf,MAAM,CAAC;GACP,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EAAE,QAAQ;EAAY,iBAAiB;EAAO,OAAO;CAAgB,GACrE;EACE,QAAQ;EACR,iBAAiB;EACjB,OAAO;CACT,CACF;CACA,iBAAiB;EACf,QAAQ;EACR,QAAQ;EACR,iBAAiB;CACnB;AACF,CACF,GAWa,KAAQ,EAAE,WAAQ,aAAU,GAAG,QAAuB;CACjE,IAAM,IAAc,EAAe,GAG7B,IAAiB,KAAU,EAAY,UAAU,QAGjD,IAAkB,EAAY,WAAW,cAAc,EAAY;CAOzE,OAJK,IAKH,kBAAC,UAAD;EACE,WAAW,EAAW;GACpB,QAAQ;GACR,QAAQ,EAAY;GACpB;EACF,CAAC;EACD,GAAI;EAEH;CACK,CAAA,IAbD;AAeX;AAEA,EAAK,cAAc;;;ACxFnB,IAAa,IAGT,OAAO,OAAO,GAAM;CACtB;CACA;AACF,CAAC;AAED,EAAK,cAAc,QACnB,EAAQ,cAAc,gBACtB,EAAK,cAAc"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "18.0.0",
+  "version": "18.0.1",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
-    "@spark-ui/hooks": "18.0.0",
-    "@spark-ui/icons": "18.0.0",
-    "@spark-ui/internal-utils": "18.0.0",
+    "@spark-ui/hooks": "18.0.1",
+    "@spark-ui/icons": "18.0.1",
+    "@spark-ui/internal-utils": "18.0.1",
     "@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": "18.0.0",
+    "@spark-ui/theme-utils": "18.0.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"