@spark-ui/components 17.16.0 → 18.0.1

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

@@ -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

@@ -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

@@ -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

@@ -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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"}
+{"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

@@ -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

@@ -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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"}
+{"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":"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"}

package/dist/switch/SwitchInput.d.ts

@@ -48,6 +48,6 @@ export interface SwitchInputProps extends StylesProps, Omit<ComponentPropsWithRe
     asChild?: boolean;
 }
 export declare const SwitchInput: {
-    ({ checked, checkedIcon, defaultChecked, intent: intentProp, uncheckedIcon, size, onCheckedChange, className, required, ref, asChild, ...rest }: SwitchInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ checked, checkedIcon, defaultChecked, uncheckedIcon, size, onCheckedChange, className, required, ref, asChild, ...rest }: SwitchInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/switch/SwitchInput.styles.d.ts

@@ -1,7 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const styles: (props?: ({
     size?: "sm" | "md" | null | undefined;
-    intent?: "main" | "alert" | "support" | "error" | "accent" | "success" | "info" | "neutral" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type StylesProps = VariantProps<typeof styles>;
 export declare const thumbWrapperStyles: (props?: ({

package/dist/switch/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../label-DO48yda7.js"),n=require("../useRenderSlot-DHV0CegV.js");let r=require("class-variance-authority"),i=require("react"),a=require("react/jsx-runtime"),o=require("@spark-ui/internal-utils"),s=require("@spark-ui/components/form-field"),c=require("@spark-ui/icons/Check"),l=require("@spark-ui/hooks/use-combined-state"),u=require("@spark-ui/icons/Close"),d=require("@base-ui/react/switch");var f=(0,r.cva)((0,o.tw)([`relative shrink-0 self-baseline`,`cursor-pointer`,`rounded-full border-transparent`,`hover:ring-4`,`transition-colors duration-200 ease-in-out`,`disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3`,`focus-visible:u-outline`,`data-unchecked:bg-on-surface/dim-3`,`u-shadow-border-transition`,`overflow-x-hidden`]),{variants:{size:(0,o.makeVariants)({sm:(0,o.tw)([`h-sz-24`,`w-sz-40`,`border-md`]),md:(0,o.tw)([`h-sz-32`,`w-sz-56`,`border-[4px]`])}),intent:(0,o.makeVariants)({main:[`[&[data-checked]]:bg-main`,`hover:ring-main-container`,`text-main`],support:[`[&[data-checked]]:bg-support`,`hover:ring-support-container`,`text-support`],accent:[`[&[data-checked]]:bg-accent`,`hover:ring-accent-container`,`text-accent`],success:[`[&[data-checked]]:bg-success`,`hover:ring-success-container`,`text-success`],alert:[`[&[data-checked]]:bg-alert`,`hover:ring-alert-container`,`text-alert`],error:[`[&[data-checked]]:bg-error`,`hover:ring-error-container`,`text-error`],info:[`[&[data-checked]]:bg-info`,`hover:ring-info-container`,`text-info`],neutral:[`[&[data-checked]]:bg-neutral`,`hover:ring-neutral-container`,`text-neutral`]})},defaultVariants:{intent:`support`,size:`sm`}}),p=(0,r.cva)([`pointer-events-none absolute inset-0 flex items-center`,`transition-all duration-200 ease-in-out`],{variants:{checked:{true:`translate-x-full`,false:`translate-x-0`}}}),m=(0,r.cva)([`absolute left-0 top-0 flex items-center justify-center`,`bg-surface`,`rounded-full`,`ring-0`,`transition-all duration-200 ease-in-out`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-20`,`w-sz-20`],md:[`h-sz-24`,`w-sz-24`]}),checked:{true:`-translate-x-full`,false:`translate-x-0 text-on-surface/dim-2`}},defaultVariants:{size:`sm`,checked:!1}}),h=(0,r.cva)([`transition-opacity duration-200`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-10 w-sz-10`],md:[`h-sz-12 w-sz-12`]})},defaultVariants:{size:`sm`}}),g=({checked:t,checkedIcon:r=(0,a.jsx)(c.Check,{}),defaultChecked:i,intent:o,uncheckedIcon:g=(0,a.jsx)(u.Close,{}),size:_=`md`,onCheckedChange:v,className:y,required:b,ref:x,asChild:S=!1,...C})=>{let[w,T]=(0,l.useCombinedState)(t,i),{name:E,description:D,state:O,isRequired:k,isInvalid:A}=(0,s.useFormFieldControl)(),j=O??o,M=n.t(S,`span`),N=!!(b||k),P=e=>{T(e),v?.(e)};return(0,a.jsx)(d.Switch.Root,{"data-spark-component":`switch-input`,ref:x,render:M,className:f({intent:j,size:_,className:y}),checked:t,defaultChecked:i,onCheckedChange:e=>P(e),name:E,required:N,"aria-required":N?!0:void 0,"aria-invalid":A,"aria-describedby":D,...C,children:(0,a.jsx)(`span`,{className:p({checked:w}),children:(0,a.jsxs)(d.Switch.Thumb,{className:m({size:_,checked:w}),children:[w&&r&&(0,a.jsx)(e.Slot,{className:h({size:_}),children:r}),!w&&g&&(0,a.jsx)(e.Slot,{className:h({size:_}),children:g})]})})})};g.displayName=`SwitchInput`;var _=(0,r.cva)(`default:text-on-surface`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),v=({className:e,disabled:n,...r})=>(0,a.jsx)(t.t,{"data-spark-component":`switch-label`,className:_({disabled:n,className:e}),...r}),y=`:switch`,b=({size:e=`md`,children:t,className:n,id:o,disabled:c,reverse:l=!1,ref:u,...d})=>{let f=(0,s.useFormFieldControl)(),p=`${y}-label-${(0,i.useId)()}`,m=`${y}-input-${(0,i.useId)()}`,h=f.id||o||m,_=t&&(0,a.jsx)(v,{disabled:c,htmlFor:h,id:p,children:t}),b=(0,a.jsx)(g,{ref:u,size:e,id:h,disabled:c,"aria-labelledby":t?p:f.labelId,...d}),x=l?(0,a.jsxs)(a.Fragment,{children:[_,b]}):(0,a.jsxs)(a.Fragment,{children:[b,_]});return(0,a.jsx)(`div`,{"data-spark-component":`switch`,className:(0,r.cx)(`gap-md text-body-1 flex items-center`,n),children:x})};b.displayName=`Switch`,exports.Switch=b;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../label-DO48yda7.js"),n=require("../useRenderSlot-DHV0CegV.js");let r=require("class-variance-authority"),i=require("react"),a=require("react/jsx-runtime"),o=require("@spark-ui/internal-utils"),s=require("@spark-ui/components/form-field"),c=require("@spark-ui/icons/Check"),l=require("@spark-ui/hooks/use-combined-state"),u=require("@spark-ui/icons/Close"),d=require("@base-ui/react/switch");var f=(0,r.cva)((0,o.tw)([`relative shrink-0 self-baseline`,`cursor-pointer aria-disabled:cursor-not-allowed`,`rounded-full border-transparent`,`hover:ring-4`,`transition-colors duration-200 ease-in-out`,`aria-disabled:opacity-dim-3`,`focus-visible:u-outline`,`text-support bg-support data-unchecked:bg-neutral/dim-3`,`u-shadow-border-transition`,`overflow-x-hidden`,`hover:ring-support-container aria-disabled:hover:ring-transparent `]),{variants:{size:(0,o.makeVariants)({sm:(0,o.tw)([`h-sz-24`,`w-sz-40`,`border-md`]),md:(0,o.tw)([`h-sz-32`,`w-sz-56`,`border-[4px]`])})},defaultVariants:{size:`sm`}}),p=(0,r.cva)([`pointer-events-none absolute inset-0 flex items-center`,`transition-all duration-200 ease-in-out`],{variants:{checked:{true:`translate-x-full`,false:`translate-x-0`}}}),m=(0,r.cva)([`absolute left-0 top-0 flex items-center justify-center`,`bg-surface`,`rounded-full`,`ring-0`,`transition-all duration-200 ease-in-out`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-20`,`w-sz-20`],md:[`h-sz-24`,`w-sz-24`]}),checked:{true:`-translate-x-full`,false:`translate-x-0 text-on-surface/dim-2`}},defaultVariants:{size:`sm`,checked:!1}}),h=(0,r.cva)([`transition-opacity duration-200`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-10 w-sz-10`],md:[`h-sz-12 w-sz-12`]})},defaultVariants:{size:`sm`}}),g=({checked:t,checkedIcon:r=(0,a.jsx)(c.Check,{}),defaultChecked:i,uncheckedIcon:o=(0,a.jsx)(u.Close,{}),size:g=`md`,onCheckedChange:_,className:v,required:y,ref:b,asChild:x=!1,...S})=>{let[C,w]=(0,l.useCombinedState)(t,i),{name:T,description:E,isRequired:D,isInvalid:O}=(0,s.useFormFieldControl)(),k=n.t(x,`span`),A=!!(y||D),j=e=>{w(e),_?.(e)};return(0,a.jsx)(d.Switch.Root,{"data-spark-component":`switch-input`,ref:b,render:k,className:f({size:g,className:v}),checked:t,defaultChecked:i,onCheckedChange:e=>j(e),name:T,required:A,"aria-required":A?!0:void 0,"aria-invalid":O,"aria-describedby":E,...S,children:(0,a.jsx)(`span`,{className:p({checked:C}),children:(0,a.jsxs)(d.Switch.Thumb,{className:m({size:g,checked:C}),children:[C&&r&&(0,a.jsx)(e.Slot,{className:h({size:g}),children:r}),!C&&o&&(0,a.jsx)(e.Slot,{className:h({size:g}),children:o})]})})})};g.displayName=`SwitchInput`;var _=(0,r.cva)(`default:text-on-surface`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),v=({className:e,disabled:n,...r})=>(0,a.jsx)(t.t,{"data-spark-component":`switch-label`,className:_({disabled:n,className:e}),...r}),y=`:switch`,b=({size:e=`md`,children:t,className:n,id:o,disabled:c,reverse:l=!1,ref:u,...d})=>{let f=(0,s.useFormFieldControl)(),p=`${y}-label-${(0,i.useId)()}`,m=`${y}-input-${(0,i.useId)()}`,h=f.id||o||m,_=t&&(0,a.jsx)(v,{disabled:c,htmlFor:h,id:p,children:t}),b=(0,a.jsx)(g,{ref:u,size:e,id:h,disabled:c,"aria-labelledby":t?p:f.labelId,...d}),x=l?(0,a.jsxs)(a.Fragment,{children:[_,b]}):(0,a.jsxs)(a.Fragment,{children:[b,_]});return(0,a.jsx)(`div`,{"data-spark-component":`switch`,className:(0,r.cx)(`gap-md text-body-1 flex items-center`,n),children:x})};b.displayName=`Switch`,exports.Switch=b;
 //# sourceMappingURL=index.js.map

package/dist/switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'data-unchecked:bg-on-surface/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n      /**\n       * Color scheme of the switch input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['[&[data-checked]]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: ['[&[data-checked]]:bg-support', 'hover:ring-support-container', 'text-support'],\n        accent: ['[&[data-checked]]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        success: ['[&[data-checked]]:bg-success', 'hover:ring-success-container', 'text-success'],\n        alert: ['[&[data-checked]]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['[&[data-checked]]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['[&[data-checked]]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: ['[&[data-checked]]:bg-neutral', 'hover:ring-neutral-container', 'text-neutral'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, state, isRequired, isInvalid } = useFormFieldControl()\n  const intent = state ?? intentProp\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ intent, size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer aria-disabled:cursor-not-allowed',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'aria-disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'text-support bg-support data-unchecked:bg-neutral/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n    'hover:ring-support-container aria-disabled:hover:ring-transparent ',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, isRequired, isInvalid } = useFormFieldControl()\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}

package/dist/switch/index.mjs

@@ -13,76 +13,30 @@ import { Switch as h } from "@base-ui/react/switch";
 //#region src/switch/SwitchInput.styles.ts
 var g = r(u([
 	"relative shrink-0 self-baseline",
-	"cursor-pointer",
+	"cursor-pointer aria-disabled:cursor-not-allowed",
 	"rounded-full border-transparent",
 	"hover:ring-4",
 	"transition-colors duration-200 ease-in-out",
-	"disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3",
+	"aria-disabled:opacity-dim-3",
 	"focus-visible:u-outline",
-	"data-unchecked:bg-on-surface/dim-3",
+	"text-support bg-support data-unchecked:bg-neutral/dim-3",
 	"u-shadow-border-transition",
-	"overflow-x-hidden"
+	"overflow-x-hidden",
+	"hover:ring-support-container aria-disabled:hover:ring-transparent "
 ]), {
-	variants: {
-		size: l({
-			sm: u([
-				"h-sz-24",
-				"w-sz-40",
-				"border-md"
-			]),
-			md: u([
-				"h-sz-32",
-				"w-sz-56",
-				"border-[4px]"
-			])
-		}),
-		intent: l({
-			main: [
-				"[&[data-checked]]:bg-main",
-				"hover:ring-main-container",
-				"text-main"
-			],
-			support: [
-				"[&[data-checked]]:bg-support",
-				"hover:ring-support-container",
-				"text-support"
-			],
-			accent: [
-				"[&[data-checked]]:bg-accent",
-				"hover:ring-accent-container",
-				"text-accent"
-			],
-			success: [
-				"[&[data-checked]]:bg-success",
-				"hover:ring-success-container",
-				"text-success"
-			],
-			alert: [
-				"[&[data-checked]]:bg-alert",
-				"hover:ring-alert-container",
-				"text-alert"
-			],
-			error: [
-				"[&[data-checked]]:bg-error",
-				"hover:ring-error-container",
-				"text-error"
-			],
-			info: [
-				"[&[data-checked]]:bg-info",
-				"hover:ring-info-container",
-				"text-info"
-			],
-			neutral: [
-				"[&[data-checked]]:bg-neutral",
-				"hover:ring-neutral-container",
-				"text-neutral"
-			]
-		})
-	},
-	defaultVariants: {
-		intent: "support",
-		size: "sm"
-	}
+	variants: { size: l({
+		sm: u([
+			"h-sz-24",
+			"w-sz-40",
+			"border-md"
+		]),
+		md: u([
+			"h-sz-32",
+			"w-sz-56",
+			"border-[4px]"
+		])
+	}) },
+	defaultVariants: { size: "sm" }
 }), _ = r(["pointer-events-none absolute inset-0 flex items-center", "transition-all duration-200 ease-in-out"], { variants: { checked: {
 	true: "translate-x-full",
 	false: "translate-x-0"
@@ -113,41 +67,40 @@ var g = r(u([
 		md: ["h-sz-12 w-sz-12"]
 	}) },
 	defaultVariants: { size: "sm" }
-}), b = ({ checked: t, checkedIcon: r = /* @__PURE__ */ s(f, {}), defaultChecked: i, intent: a, uncheckedIcon: o = /* @__PURE__ */ s(m, {}), size: l = "md", onCheckedChange: u, className: b, required: x, ref: S, asChild: C = !1, ...w }) => {
-	let [T, E] = p(t, i), { name: D, description: O, state: k, isRequired: A, isInvalid: j } = d(), M = k ?? a, N = n(C, "span"), P = !!(x || A), F = (e) => {
-		E(e), u?.(e);
+}), b = ({ checked: t, checkedIcon: r = /* @__PURE__ */ s(f, {}), defaultChecked: i, uncheckedIcon: a = /* @__PURE__ */ s(m, {}), size: o = "md", onCheckedChange: l, className: u, required: b, ref: x, asChild: S = !1, ...C }) => {
+	let [w, T] = p(t, i), { name: E, description: D, isRequired: O, isInvalid: k } = d(), A = n(S, "span"), j = !!(b || O), M = (e) => {
+		T(e), l?.(e);
 	};
 	return /* @__PURE__ */ s(h.Root, {
 		"data-spark-component": "switch-input",
-		ref: S,
-		render: N,
+		ref: x,
+		render: A,
 		className: g({
-			intent: M,
-			size: l,
-			className: b
+			size: o,
+			className: u
 		}),
 		checked: t,
 		defaultChecked: i,
-		onCheckedChange: (e) => F(e),
-		name: D,
-		required: P,
-		"aria-required": P ? !0 : void 0,
-		"aria-invalid": j,
-		"aria-describedby": O,
-		...w,
+		onCheckedChange: (e) => M(e),
+		name: E,
+		required: j,
+		"aria-required": j ? !0 : void 0,
+		"aria-invalid": k,
+		"aria-describedby": D,
+		...C,
 		children: /* @__PURE__ */ s("span", {
-			className: _({ checked: T }),
+			className: _({ checked: w }),
 			children: /* @__PURE__ */ c(h.Thumb, {
 				className: v({
-					size: l,
-					checked: T
+					size: o,
+					checked: w
 				}),
-				children: [T && r && /* @__PURE__ */ s(e, {
-					className: y({ size: l }),
+				children: [w && r && /* @__PURE__ */ s(e, {
+					className: y({ size: o }),
 					children: r
-				}), !T && o && /* @__PURE__ */ s(e, {
-					className: y({ size: l }),
-					children: o
+				}), !w && a && /* @__PURE__ */ s(e, {
+					className: y({ size: o }),
+					children: a
 				})]
 			})
 		})

package/dist/switch/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'data-unchecked:bg-on-surface/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n      /**\n       * Color scheme of the switch input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['[&[data-checked]]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: ['[&[data-checked]]:bg-support', 'hover:ring-support-container', 'text-support'],\n        accent: ['[&[data-checked]]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        success: ['[&[data-checked]]:bg-success', 'hover:ring-success-container', 'text-success'],\n        alert: ['[&[data-checked]]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['[&[data-checked]]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['[&[data-checked]]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: ['[&[data-checked]]:bg-neutral', 'hover:ring-neutral-container', 'text-neutral'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, state, isRequired, isInvalid } = useFormFieldControl()\n  const intent = state ?? intentProp\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ intent, size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer aria-disabled:cursor-not-allowed',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'aria-disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'text-support bg-support data-unchecked:bg-neutral/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n    'hover:ring-support-container aria-disabled:hover:ring-transparent ',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, isRequired, isInvalid } = useFormFieldControl()\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.16.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": "17.16.0",
-    "@spark-ui/icons": "17.16.0",
-    "@spark-ui/internal-utils": "17.16.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": "17.16.0",
+    "@spark-ui/theme-utils": "18.0.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"