@spark-ui/components 17.6.2-beta.0 → 17.8.0

package/dist/card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n  [\n    'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n    'h-sz-16',\n    'default:rounded-t-lg',\n    'bg-[length:200%_100%] bg-position-[0%_0%]',\n  ],\n  {\n    variants: {\n      animation: {\n        none: '',\n        pulse: 'animate-standalone-backdrop-pulse',\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n        support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n        accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n        success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n        alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n        danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n        info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n        neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n        surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n        surfaceInverse: [\n          'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'main',\n      animation: 'none',\n    },\n  }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n  className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n  return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n  [\n    'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n    'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      design: {\n        filled: [],\n        outlined: ['border-sm'],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['pt-md'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n      { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n      { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n      { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n      { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n      { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n      { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n      { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n      { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n    },\n  }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n  design: CardStylesProps['design']\n  intent: CardStylesProps['intent']\n  hasBackdrop: boolean\n  inset: boolean\n  isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext)\n  if (!context) {\n    throw new Error('useCardContext must be used within a Card component')\n  }\n\n  return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseMove',\n  'onMouseOver',\n  'onMouseOut',\n  'onDoubleClick',\n  'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n  let backdropFound = false\n\n  const searchForBackdrop = (node: ReactNode): void => {\n    if (backdropFound) return\n\n    Children.forEach(node, child => {\n      if (backdropFound) return\n\n      if (isValidElement(child)) {\n        const isBackdropComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n        if (isBackdropComponent) {\n          backdropFound = true\n\n          return\n        }\n\n        const hasChildren =\n          child.props && typeof child.props === 'object' && 'children' in child.props\n\n        if (hasChildren) {\n          const childChildren = (child.props as { children: ReactNode }).children\n          if (childChildren !== undefined && childChildren !== null) {\n            searchForBackdrop(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForBackdrop(children)\n\n  return backdropFound\n}\n\nexport const isInteractive = (\n  children: ReactNode,\n  asChild: boolean | undefined,\n  props: Record<string, any>\n): boolean => {\n  const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n  if (hasMouseEventHandlers) {\n    return true\n  }\n\n  if (!asChild) {\n    return false\n  }\n\n  const child = Children.only(children)\n\n  if (!isValidElement(child)) {\n    return false\n  }\n\n  const interactiveElements = ['a', 'button']\n  const isInteractiveElement =\n    typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n  if (isInteractiveElement) {\n    return true\n  }\n\n  const childProps = child.props as Record<string, any>\n  const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n  return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Card = ({\n  children,\n  design = 'filled',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const backdropDetected = hasBackdrop(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasBackdrop: backdropDetected,\n        inset,\n        isInteractive: interactiveDetected,\n      }}\n    >\n      <Component\n        data-spark-component=\"card\"\n        data-interactive={interactiveDetected}\n        ref={ref}\n        className={cardStyles({\n          className,\n          design,\n          intent,\n          hasBackdrop: backdropDetected,\n        })}\n        {...props}\n      >\n        {children}\n      </Component>\n    </CardContext.Provider>\n  )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n  [\n    'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n    'default:transition-colors default:duration-200 ease-linear',\n  ],\n  {\n    variants: {\n      inset: {\n        false: ['default:p-lg'],\n      },\n      design: {\n        filled: [],\n        outlined: [\n          'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['rounded-t-[16px_8px] '],\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // FILLED\n      {\n        intent: 'main',\n        design: 'filled',\n        class: tw([\n          'bg-main text-on-main group-focus:bg-main-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'filled',\n        class: tw([\n          'bg-support text-on-support group-focus:bg-support-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'filled',\n        class: tw([\n          'bg-accent text-on-accent group-focus:bg-accent-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'filled',\n        class: tw([\n          'bg-success text-on-success group-focus:bg-success-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'filled',\n        class: tw([\n          'bg-alert text-on-alert group-focus:bg-alert-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-error group-focus:bg-error-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-info group-focus:bg-info-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'filled',\n        class: tw([\n          'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'filled',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n      // OUTLINED\n      /**\n       * Outlined styles are handled by the Card component (parent)\n       */\n      // TINTED\n      {\n        intent: 'main',\n        design: 'tinted',\n        class: tw([\n          'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'tinted',\n        class: tw([\n          'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'tinted',\n        class: tw([\n          'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'tinted',\n        class: tw([\n          'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'tinted',\n        class: tw([\n          'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'tinted',\n        class: tw([\n          'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'tinted',\n        class: tw([\n          'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'tinted',\n        class: tw([\n          'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'tinted',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n      inset: false,\n      hasBackdrop: true,\n    },\n  }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n  const Component = asChild ? Slot : 'div'\n  const { design, intent, hasBackdrop } = useCardContext()\n\n  return (\n    <Component\n      data-spark-component=\"card-content\"\n      ref={ref}\n      className={contentStyles({\n        className,\n        design,\n        intent,\n        inset,\n        hasBackdrop,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n  Content,\n  Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"mappings":"yQAGA,IAAa,GAAA,EAAA,EAAA,KACX,CACE,uEACA,UACA,uBACA,4CACD,CACD,CACE,SAAU,CACR,UAAW,CACT,KAAM,GACN,MAAO,oCACR,CACD,QAAA,EAAA,EAAA,cAcE,CACA,KAAM,CAAC,uEAAuE,CAC9E,QAAS,CAAC,gFAAgF,CAC1F,OAAQ,CAAC,6EAA6E,CACtF,QAAS,CAAC,gFAAgF,CAC1F,MAAO,CAAC,0EAA0E,CAClF,OAAQ,CAAC,0EAA0E,CACnF,KAAM,CAAC,uEAAuE,CAC9E,QAAS,CAAC,gFAAgF,CAC1F,QAAS,CAAC,gFAAgF,CAC1F,eAAgB,CACd,gFACD,CACF,CAAC,CACH,CACD,gBAAiB,CACf,OAAQ,OACR,UAAW,OACZ,CACF,CACF,CAQY,GAAY,CAAE,SAAS,OAAQ,YAAY,OAAQ,GAAG,MAC1D,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAe,CAAE,SAAQ,YAAW,CAAC,CAAE,GAAI,EAAS,CAAA,CAG7E,EAAS,YAAc,gBC3DvB,IAAa,GAAA,EAAA,EAAA,KACX,CACE,4EACA,qDACD,CACD,CACE,SAAU,CACR,OAAQ,CACN,OAAQ,EAAE,CACV,SAAU,CAAC,YAAY,CACvB,OAAQ,EAAE,CACX,CACD,YAAa,CACX,KAAM,CAAC,QAAQ,CAChB,CAID,QAAA,EAAA,EAAA,cAcE,CACA,KAAM,EAAE,CACR,QAAS,EAAE,CACX,OAAQ,EAAE,CACV,QAAS,EAAE,CACX,MAAO,EAAE,CACT,OAAQ,EAAE,CACV,KAAM,EAAE,CACR,QAAS,EAAE,CACX,QAAS,EAAE,CACX,eAAgB,EAAE,CACnB,CAAC,CACH,CACD,iBAAkB,CAEhB,CAAE,OAAQ,OAAQ,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,cAAc,CAAC,CAAE,CAClE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACxE,CAAE,OAAQ,SAAU,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,gBAAgB,CAAC,CAAE,CACtE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACxE,CAAE,OAAQ,QAAS,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,eAAe,CAAC,CAAE,CACpE,CAAE,OAAQ,SAAU,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,eAAe,CAAC,CAAE,CACrE,CAAE,OAAQ,OAAQ,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,cAAc,CAAC,CAAE,CAClE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACxE,CAAE,OAAQ,UAAW,OAAQ,WAAY,OAAA,EAAA,EAAA,IAAU,CAAC,iBAAiB,CAAC,CAAE,CACzE,CACD,gBAAiB,CACf,OAAQ,SACR,OAAQ,UACT,CACF,CACF,CCrDK,GAAA,EAAA,EAAA,eAA0D,IAAA,GAAU,CAE7D,MAAuB,CAClC,IAAM,GAAA,EAAA,EAAA,YAAqB,EAAY,CACvC,GAAI,CAAC,EACH,MAAU,MAAM,sDAAsD,CAGxE,OAAO,GClBH,EAAe,CACnB,UACA,cACA,YACA,eACA,eACA,cACA,cACA,aACA,gBACA,gBACD,CAEY,EAAe,GAAiC,CAC3D,IAAI,EAAgB,GAEd,EAAqB,GAA0B,CAC/C,GAEJ,EAAA,SAAS,QAAQ,EAAM,GAAS,CAC1B,QAEJ,EAAA,EAAA,gBAAmB,EAAM,CAAE,CAKzB,GAHE,OAAO,EAAM,MAAS,YACrB,EAAM,KAAkC,cAAgB,gBAElC,CACvB,EAAgB,GAEhB,OAMF,GAFE,EAAM,OAAS,OAAO,EAAM,OAAU,UAAY,aAAc,EAAM,MAEvD,CACf,IAAM,EAAiB,EAAM,MAAkC,SAC3D,GAAiD,MACnD,EAAkB,EAAc,IAItC,EAKJ,OAFA,EAAkB,EAAS,CAEpB,GAGI,GACX,EACA,EACA,IACY,CAGZ,GAF8B,EAAa,KAAK,GAAS,KAAS,EAAM,CAGtE,MAAO,GAGT,GAAI,CAAC,EACH,MAAO,GAGT,IAAM,EAAQ,EAAA,SAAS,KAAK,EAAS,CAErC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CACxB,MAAO,GAOT,GAFE,OAAO,EAAM,MAAS,UAFI,CAAC,IAAK,SAAS,CAEa,SAAS,EAAM,KAAK,CAG1E,MAAO,GAGT,IAAM,EAAa,EAAM,MAGzB,OAF8B,EAAa,KAAK,GAAS,KAAS,EAAW,ECjElE,GAAQ,CACnB,WACA,SAAS,SACT,SAAS,UACT,QAAQ,GACR,UACA,YACA,MACA,GAAG,KACY,CACf,IAAM,EAAY,EAAU,EAAA,KAAO,MAC7B,EAAmB,EAAY,EAAS,CACxC,EAAsB,EAAc,EAAU,EAAS,EAAM,CAEnE,OACE,EAAA,EAAA,KAAC,EAAY,SAAb,CACE,MAAO,CACL,SACA,SACA,YAAa,EACb,QACA,cAAe,EAChB,WAED,EAAA,EAAA,KAAC,EAAD,CACE,uBAAqB,OACrB,mBAAkB,EACb,MACL,UAAW,EAAW,CACpB,YACA,SACA,SACA,YAAa,EACd,CAAC,CACF,GAAI,EAEH,WACS,CAAA,CACS,CAAA,EAI3B,EAAK,YAAc,OCzDnB,IAAa,GAAA,EAAA,EAAA,KACX,CACE,oEACA,6DACD,CACD,CACE,SAAU,CACR,MAAO,CACL,MAAO,CAAC,eAAe,CACxB,CACD,OAAQ,CACN,OAAQ,EAAE,CACV,SAAU,CACR,oIACD,CACD,OAAQ,EAAE,CACX,CACD,YAAa,CACX,KAAM,CAAC,wBAAwB,CAChC,CACD,QAAA,EAAA,EAAA,cAcE,CACA,KAAM,EAAE,CACR,QAAS,EAAE,CACX,OAAQ,EAAE,CACV,QAAS,EAAE,CACX,MAAO,EAAE,CACT,OAAQ,EAAE,CACV,KAAM,EAAE,CACR,QAAS,EAAE,CACX,QAAS,EAAE,CACX,eAAgB,EAAE,CACnB,CAAC,CACH,CACD,iBAAkB,CAEhB,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,mDACA,+EACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,yDACA,iFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sDACA,gFACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,sDACA,gFACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oDACA,+EACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CAMD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iFACA,yFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,0FACA,4FACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,uFACA,2FACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,0FACA,4FACD,CAAC,CACH,CACD,CACE,OAAQ,QACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oFACA,0FACD,CAAC,CACH,CACD,CACE,OAAQ,SACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,oFACA,0FACD,CAAC,CACH,CACD,CACE,OAAQ,OACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,iFACA,yFACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,0FACA,4FACD,CAAC,CACH,CACD,CACE,OAAQ,UACR,OAAQ,SACR,OAAA,EAAA,EAAA,IAAU,CACR,4DACA,kFACD,CAAC,CACH,CACF,CACD,gBAAiB,CACf,OAAQ,SACR,OAAQ,UACR,MAAO,GACP,YAAa,GACd,CACF,CACF,CChMY,GAAW,CAAE,WAAU,QAAO,UAAS,YAAW,MAAK,GAAG,KAA0B,CAC/F,IAAM,EAAY,EAAU,EAAA,KAAO,MAC7B,CAAE,SAAQ,SAAQ,eAAgB,GAAgB,CAExD,OACE,EAAA,EAAA,KAAC,EAAD,CACE,uBAAqB,eAChB,MACL,UAAW,EAAc,CACvB,YACA,SACA,SACA,QACA,cACD,CAAC,CACF,GAAI,EAEH,WACS,CAAA,EAIhB,EAAQ,YAAc,UChCtB,IAAa,EAGT,OAAO,OAAO,EAAM,CACtB,UACA,WACD,CAAC,CAEF,EAAK,YAAc,OACnB,EAAQ,YAAc,eACtB,EAAS,YAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/Type.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n  [\n    'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n    'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      design: {\n        outlined: ['border-sm'],\n        tinted: [],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n      { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n      { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n      { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n      { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n      { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n      { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n      { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n      { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n    ],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'surface',\n    },\n  }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n  design: CardStylesProps['design']\n  intent: CardStylesProps['intent']\n  hasType: boolean\n  inset: boolean\n  isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext)\n  if (!context) {\n    throw new Error('useCardContext must be used within a Card component')\n  }\n\n  return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseMove',\n  'onMouseOver',\n  'onMouseOut',\n  'onDoubleClick',\n  'onContextMenu',\n] as const\n\nexport const hasType = (children: ReactNode): boolean => {\n  let typeFound = false\n\n  const searchForType = (node: ReactNode): void => {\n    if (typeFound) return\n\n    Children.forEach(node, child => {\n      if (typeFound) return\n\n      if (isValidElement(child)) {\n        const isTypeComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n        if (isTypeComponent) {\n          typeFound = true\n\n          return\n        }\n\n        const hasChildren =\n          child.props && typeof child.props === 'object' && 'children' in child.props\n\n        if (hasChildren) {\n          const childChildren = (child.props as { children: ReactNode }).children\n          if (childChildren !== undefined && childChildren !== null) {\n            searchForType(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForType(children)\n\n  return typeFound\n}\n\nexport const isInteractive = (\n  children: ReactNode,\n  asChild: boolean | undefined,\n  props: Record<string, any>\n): boolean => {\n  const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n  if (hasMouseEventHandlers) {\n    return true\n  }\n\n  if (!asChild) {\n    return false\n  }\n\n  const child = Children.only(children)\n\n  if (!isValidElement(child)) {\n    return false\n  }\n\n  const interactiveElements = ['a', 'button']\n  const isInteractiveElement =\n    typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n  if (isInteractiveElement) {\n    return true\n  }\n\n  const childProps = child.props as Record<string, any>\n  const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n  return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasType, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Card = ({\n  children,\n  design = 'outlined',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const typeDetected = hasType(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasType: typeDetected,\n        inset,\n        isInteractive: interactiveDetected,\n      }}\n    >\n      <Component\n        data-spark-component=\"card\"\n        data-interactive={interactiveDetected}\n        ref={ref}\n        className={cardStyles({\n          className,\n          design,\n          intent,\n        })}\n        {...props}\n      >\n        {children}\n      </Component>\n    </CardContext.Provider>\n  )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n  [\n    'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n    'default:transition-colors default:duration-200 ease-linear',\n  ],\n  {\n    variants: {\n      inset: {\n        false: ['default:p-lg'],\n      },\n      design: {\n        outlined: [\n          'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ],\n        tinted: [],\n      },\n      hasType: {\n        true: ['rounded-t-0'],\n      },\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      /**\n       * Outlined styles are handled by the Card component (parent)\n       */\n      // TINTED\n      {\n        intent: 'main',\n        design: 'tinted',\n        class: tw([\n          'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'tinted',\n        class: tw([\n          'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'tinted',\n        class: tw([\n          'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'tinted',\n        class: tw([\n          'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'tinted',\n        class: tw([\n          'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'tinted',\n        class: tw([\n          'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'tinted',\n        class: tw([\n          'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'tinted',\n        class: tw([\n          'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'tinted',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n    ],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'surface',\n      inset: false,\n      hasType: true,\n    },\n  }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n  const Component = asChild ? Slot : 'div'\n  const { design, intent, hasType } = useCardContext()\n\n  return (\n    <Component\n      data-spark-component=\"card-content\"\n      ref={ref}\n      className={contentStyles({\n        className,\n        design,\n        intent,\n        inset,\n        hasType,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n  [\n    // Base structure\n    'rounded-t-lg default:text-body-2 default:font-bold',\n    'default:text-center',\n\n    // Height and layout\n    'min-h-sz-32', // Minimum height same as Backdrop\n    'px-md', // Horizontal padding for text\n    'py-xs', // Vertical padding for text (allows height to grow)\n\n    // Layout\n    'flex items-center justify-center', // Vertical centering of text\n    'whitespace-normal break-words', // Allow text wrapping\n\n    // Fix border-radius visual gap by overlapping parent border\n    '-mx-px -mt-px',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main text-on-main'],\n        support: ['bg-support text-on-support'],\n        accent: ['bg-accent text-on-accent'],\n        success: ['bg-success text-on-success'],\n        alert: ['bg-alert text-on-alert'],\n        danger: ['bg-error text-on-error'],\n        info: ['bg-info text-on-info'],\n        neutral: ['bg-neutral text-on-neutral'],\n        surface: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n    },\n    defaultVariants: {\n      intent: 'main',\n    },\n  }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n  /**\n   * The type or category to display (e.g., \"Best seller\", \"New product\")\n   */\n  children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n  const cardContext = useCardContext()\n\n  // Use intent from props if provided, otherwise inherit from parent Card context\n  const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n  // Don't render if no children provided (for backward compatibility with Backdrop)\n  if (!children) {\n    return null\n  }\n\n  return (\n    <header className={typeStyles({ intent: resolvedIntent })} {...props}>\n      {children}\n    </header>\n  )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Type: typeof Type\n} = Object.assign(Root, {\n  Content,\n  Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"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"}

package/dist/card/index.mjs

@@ -3,53 +3,13 @@ import { cva as t } from "class-variance-authority";
 import { Children as n, createContext as r, isValidElement as i, useContext as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 import { makeVariants as s, tw as c } from "@spark-ui/internal-utils";
-//#region src/card/Backdrop.tsx
-var l = t([
-	"default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0",
-	"h-sz-16",
-	"default:rounded-t-lg",
-	"bg-[length:200%_100%] bg-position-[0%_0%]"
-], {
-	variants: {
-		animation: {
-			none: "",
-			pulse: "animate-standalone-backdrop-pulse"
-		},
-		intent: s({
-			main: ["default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4"],
-			support: ["default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4"],
-			accent: ["default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4"],
-			success: ["default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4"],
-			alert: ["default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4"],
-			danger: ["default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4"],
-			info: ["default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4"],
-			neutral: ["default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4"],
-			surface: ["default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4"],
-			surfaceInverse: ["default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4"]
-		})
-	},
-	defaultVariants: {
-		intent: "main",
-		animation: "none"
-	}
-}), u = ({ intent: e = "main", animation: t = "none", ...n }) => /* @__PURE__ */ o("div", {
-	className: l({
-		intent: e,
-		animation: t
-	}),
-	...n
-});
-u.displayName = "Card.Backdrop";
-//#endregion
 //#region src/card/Card.styles.tsx
-var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-outline", "disabled:opacity-dim-3 disabled:cursor-not-allowed"], {
+var l = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-outline", "disabled:opacity-dim-3 disabled:cursor-not-allowed"], {
 	variants: {
 		design: {
-			filled: [],
 			outlined: ["border-sm"],
 			tinted: []
 		},
-		hasBackdrop: { true: ["pt-md"] },
 		intent: s({
 			main: [],
 			support: [],
@@ -59,8 +19,7 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 			danger: [],
 			info: [],
 			neutral: [],
-			surface: [],
-			surfaceInverse: []
+			surface: []
 		})
 	},
 	compoundVariants: [
@@ -111,14 +70,14 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 		}
 	],
 	defaultVariants: {
-		design: "filled",
+		design: "outlined",
 		intent: "surface"
 	}
-}), f = r(void 0), p = () => {
-	let e = a(f);
+}), u = r(void 0), d = () => {
+	let e = a(u);
 	if (!e) throw Error("useCardContext must be used within a Card component");
 	return e;
-}, m = [
+}, f = [
 	"onClick",
 	"onMouseDown",
 	"onMouseUp",
@@ -129,11 +88,11 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 	"onMouseOut",
 	"onDoubleClick",
 	"onContextMenu"
-], h = (e) => {
+], p = (e) => {
 	let t = !1, r = (e) => {
 		t || n.forEach(e, (e) => {
 			if (!t && i(e)) {
-				if (typeof e.type == "function" && e.type.displayName === "Card.Backdrop") {
+				if (typeof e.type == "function" && e.type.displayName === "Card.Type") {
 					t = !0;
 					return;
 				}
@@ -145,51 +104,49 @@ var d = t(["group relative bg-clip-padding default:rounded-lg focus-visible:u-ou
 		});
 	};
 	return r(e), t;
-}, g = (e, t, r) => {
-	if (m.some((e) => e in r)) return !0;
+}, m = (e, t, r) => {
+	if (f.some((e) => e in r)) return !0;
 	if (!t) return !1;
 	let a = n.only(e);
 	if (!i(a)) return !1;
 	if (typeof a.type == "string" && ["a", "button"].includes(a.type)) return !0;
 	let o = a.props;
-	return m.some((e) => e in o);
-}, _ = ({ children: t, design: n = "filled", intent: r = "surface", inset: i = !1, asChild: a, className: s, ref: c, ...l }) => {
-	let u = a ? e : "div", p = h(t), m = g(t, a, l);
-	return /* @__PURE__ */ o(f.Provider, {
+	return f.some((e) => e in o);
+}, h = ({ children: t, design: n = "outlined", intent: r = "surface", inset: i = !1, asChild: a, className: s, ref: c, ...d }) => {
+	let f = a ? e : "div", h = p(t), g = m(t, a, d);
+	return /* @__PURE__ */ o(u.Provider, {
 		value: {
 			design: n,
 			intent: r,
-			hasBackdrop: p,
+			hasType: h,
 			inset: i,
-			isInteractive: m
+			isInteractive: g
 		},
-		children: /* @__PURE__ */ o(u, {
+		children: /* @__PURE__ */ o(f, {
 			"data-spark-component": "card",
-			"data-interactive": m,
+			"data-interactive": g,
 			ref: c,
-			className: d({
+			className: l({
 				className: s,
 				design: n,
-				intent: r,
-				hasBackdrop: p
+				intent: r
 			}),
-			...l,
+			...d,
 			children: t
 		})
 	});
 };
-_.displayName = "Card";
+h.displayName = "Card";
 //#endregion
 //#region src/card/Content.styles.tsx
-var v = t(["relative h-full default:rounded-lg w-full focus-visible:u-outline", "default:transition-colors default:duration-200 ease-linear"], {
+var g = t(["relative h-full default:rounded-lg w-full focus-visible:u-outline", "default:transition-colors default:duration-200 ease-linear"], {
 	variants: {
 		inset: { false: ["default:p-lg"] },
 		design: {
-			filled: [],
 			outlined: ["default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"],
 			tinted: []
 		},
-		hasBackdrop: { true: ["rounded-t-[16px_8px] "] },
+		hasType: { true: ["rounded-t-0"] },
 		intent: s({
 			main: [],
 			support: [],
@@ -199,56 +156,10 @@ var v = t(["relative h-full default:rounded-lg w-full focus-visible:u-outline",
 			danger: [],
 			info: [],
 			neutral: [],
-			surface: [],
-			surfaceInverse: []
+			surface: []
 		})
 	},
 	compoundVariants: [
-		{
-			intent: "main",
-			design: "filled",
-			class: c(["bg-main text-on-main group-focus:bg-main-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered"])
-		},
-		{
-			intent: "support",
-			design: "filled",
-			class: c(["bg-support text-on-support group-focus:bg-support-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered"])
-		},
-		{
-			intent: "accent",
-			design: "filled",
-			class: c(["bg-accent text-on-accent group-focus:bg-accent-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered"])
-		},
-		{
-			intent: "success",
-			design: "filled",
-			class: c(["bg-success text-on-success group-focus:bg-success-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered"])
-		},
-		{
-			intent: "alert",
-			design: "filled",
-			class: c(["bg-alert text-on-alert group-focus:bg-alert-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered"])
-		},
-		{
-			intent: "danger",
-			design: "filled",
-			class: c(["text-on-error bg-error group-focus:bg-error-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered"])
-		},
-		{
-			intent: "info",
-			design: "filled",
-			class: c(["text-on-error bg-info group-focus:bg-info-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered"])
-		},
-		{
-			intent: "neutral",
-			design: "filled",
-			class: c(["bg-neutral text-on-neutral group-focus:bg-neutral-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered"])
-		},
-		{
-			intent: "surface",
-			design: "filled",
-			class: c(["bg-surface text-on-surface group-focus:bg-surface-hovered", "group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered"])
-		},
 		{
 			intent: "main",
 			design: "tinted",
@@ -296,35 +207,68 @@ var v = t(["relative h-full default:rounded-lg w-full focus-visible:u-outline",
 		}
 	],
 	defaultVariants: {
-		design: "filled",
+		design: "outlined",
 		intent: "surface",
 		inset: !1,
-		hasBackdrop: !0
+		hasType: !0
 	}
-}), y = ({ children: t, inset: n, asChild: r, className: i, ref: a, ...s }) => {
-	let c = r ? e : "div", { design: l, intent: u, hasBackdrop: d } = p();
+}), _ = ({ children: t, inset: n, asChild: r, className: i, ref: a, ...s }) => {
+	let c = r ? e : "div", { design: l, intent: u, hasType: f } = d();
 	return /* @__PURE__ */ o(c, {
 		"data-spark-component": "card-content",
 		ref: a,
-		className: v({
+		className: g({
 			className: i,
 			design: l,
 			intent: u,
 			inset: n,
-			hasBackdrop: d
+			hasType: f
 		}),
 		...s,
 		children: t
 	});
 };
-y.displayName = "Content";
+_.displayName = "Content";
+//#endregion
+//#region src/card/Type.tsx
+var v = t([
+	"rounded-t-lg default:text-body-2 default:font-bold",
+	"default:text-center",
+	"min-h-sz-32",
+	"px-md",
+	"py-xs",
+	"flex items-center justify-center",
+	"whitespace-normal break-words",
+	"-mx-px -mt-px"
+], {
+	variants: { intent: {
+		main: ["bg-main text-on-main"],
+		support: ["bg-support text-on-support"],
+		accent: ["bg-accent text-on-accent"],
+		success: ["bg-success text-on-success"],
+		alert: ["bg-alert text-on-alert"],
+		danger: ["bg-error text-on-error"],
+		info: ["bg-info text-on-info"],
+		neutral: ["bg-neutral text-on-neutral"],
+		surface: ["bg-surface-inverse text-on-surface-inverse"]
+	} },
+	defaultVariants: { intent: "main" }
+}), y = ({ intent: e, children: t, ...n }) => {
+	let r = d(), i = e ?? r.intent ?? "main";
+	return t ? /* @__PURE__ */ o("header", {
+		className: v({ intent: i }),
+		...n,
+		children: t
+	}) : null;
+};
+y.displayName = "Card.Type";
 //#endregion
 //#region src/card/index.ts
-var b = Object.assign(_, {
-	Content: y,
-	Backdrop: u
+var b = Object.assign(h, {
+	Content: _,
+	Type: y
 });
-b.displayName = "Card", y.displayName = "Card.Content", u.displayName = "Card.Backdrop";
+b.displayName = "Card", _.displayName = "Card.Content", y.displayName = "Card.Type";
 //#endregion
 export { b as Card };
 

package/dist/card/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/card/Backdrop.tsx","../../src/card/Card.styles.tsx","../../src/card/context.tsx","../../src/card/utils.ts","../../src/card/Card.tsx","../../src/card/Content.styles.tsx","../../src/card/Content.tsx","../../src/card/index.ts"],"sourcesContent":["import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const backdropStyles = cva(\n  [\n    'default:bg-surface default:bg-gradient-to-r absolute inset-x-0 top-0',\n    'h-sz-16',\n    'default:rounded-t-lg',\n    'bg-[length:200%_100%] bg-position-[0%_0%]',\n  ],\n  {\n    variants: {\n      animation: {\n        none: '',\n        pulse: 'animate-standalone-backdrop-pulse',\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: ['default:from-main/dim-4 default:via-main/dim-2 default:to-main/dim-4'],\n        support: ['default:from-support/dim-4 default:via-support/dim-2 default:to-support/dim-4'],\n        accent: ['default:from-accent/dim-4 default:via-accent/dim-2 default:to-accent/dim-4'],\n        success: ['default:from-success/dim-4 default:via-success/dim-2 default:to-success/dim-4'],\n        alert: ['default:from-alert/dim-4 default:via-alert/dim-2 default:to-alert/dim-4'],\n        danger: ['default:from-error/dim-4 default:via-error/dim-2 default:to-error/dim-4'],\n        info: ['default:from-info/dim-4 default:via-info/dim-2 default:to-info/dim-4'],\n        neutral: ['default:from-neutral/dim-4 default:via-neutral/dim-2 default:to-neutral/dim-4'],\n        surface: ['default:from-outline/dim-4 default:via-outline/dim-2 default:to-outline/dim-4'],\n        surfaceInverse: [\n          'default:from-surface/dim-4 default:via-surface/dim-2 default:to-surface/dim-4',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'main',\n      animation: 'none',\n    },\n  }\n)\n\nexport type BackdropStylesProps = VariantProps<typeof backdropStyles>\n\ninterface BackdropProps extends BackdropStylesProps {\n  className?: string\n}\n\nexport const Backdrop = ({ intent = 'main', animation = 'none', ...props }: BackdropProps) => {\n  return <div className={backdropStyles({ intent, animation })} {...props} />\n}\n\nBackdrop.displayName = 'Card.Backdrop'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const cardStyles = cva(\n  [\n    'group relative bg-clip-padding default:rounded-lg focus-visible:u-outline',\n    'disabled:opacity-dim-3 disabled:cursor-not-allowed',\n  ],\n  {\n    variants: {\n      design: {\n        filled: [],\n        outlined: ['border-sm'],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['pt-md'],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n      { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n      { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n      { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n      { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n      { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n      { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n      { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n      { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n    },\n  }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n  design: CardStylesProps['design']\n  intent: CardStylesProps['intent']\n  hasBackdrop: boolean\n  inset: boolean\n  isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext)\n  if (!context) {\n    throw new Error('useCardContext must be used within a Card component')\n  }\n\n  return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseMove',\n  'onMouseOver',\n  'onMouseOut',\n  'onDoubleClick',\n  'onContextMenu',\n] as const\n\nexport const hasBackdrop = (children: ReactNode): boolean => {\n  let backdropFound = false\n\n  const searchForBackdrop = (node: ReactNode): void => {\n    if (backdropFound) return\n\n    Children.forEach(node, child => {\n      if (backdropFound) return\n\n      if (isValidElement(child)) {\n        const isBackdropComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Backdrop'\n\n        if (isBackdropComponent) {\n          backdropFound = true\n\n          return\n        }\n\n        const hasChildren =\n          child.props && typeof child.props === 'object' && 'children' in child.props\n\n        if (hasChildren) {\n          const childChildren = (child.props as { children: ReactNode }).children\n          if (childChildren !== undefined && childChildren !== null) {\n            searchForBackdrop(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForBackdrop(children)\n\n  return backdropFound\n}\n\nexport const isInteractive = (\n  children: ReactNode,\n  asChild: boolean | undefined,\n  props: Record<string, any>\n): boolean => {\n  const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n  if (hasMouseEventHandlers) {\n    return true\n  }\n\n  if (!asChild) {\n    return false\n  }\n\n  const child = Children.only(children)\n\n  if (!isValidElement(child)) {\n    return false\n  }\n\n  const interactiveElements = ['a', 'button']\n  const isInteractiveElement =\n    typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n  if (isInteractiveElement) {\n    return true\n  }\n\n  const childProps = child.props as Record<string, any>\n  const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n  return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasBackdrop, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Card = ({\n  children,\n  design = 'filled',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const backdropDetected = hasBackdrop(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasBackdrop: backdropDetected,\n        inset,\n        isInteractive: interactiveDetected,\n      }}\n    >\n      <Component\n        data-spark-component=\"card\"\n        data-interactive={interactiveDetected}\n        ref={ref}\n        className={cardStyles({\n          className,\n          design,\n          intent,\n          hasBackdrop: backdropDetected,\n        })}\n        {...props}\n      >\n        {children}\n      </Component>\n    </CardContext.Provider>\n  )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n  [\n    'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n    'default:transition-colors default:duration-200 ease-linear',\n  ],\n  {\n    variants: {\n      inset: {\n        false: ['default:p-lg'],\n      },\n      design: {\n        filled: [],\n        outlined: [\n          'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ],\n        tinted: [],\n      },\n      hasBackdrop: {\n        true: ['rounded-t-[16px_8px] '],\n      },\n      intent: makeVariants<\n        'intent',\n        [\n          'main',\n          'support',\n          'accent',\n          'success',\n          'alert',\n          'danger',\n          'info',\n          'neutral',\n          'surface',\n          'surfaceInverse',\n        ]\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n        surfaceInverse: [],\n      }),\n    },\n    compoundVariants: [\n      // FILLED\n      {\n        intent: 'main',\n        design: 'filled',\n        class: tw([\n          'bg-main text-on-main group-focus:bg-main-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'filled',\n        class: tw([\n          'bg-support text-on-support group-focus:bg-support-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'filled',\n        class: tw([\n          'bg-accent text-on-accent group-focus:bg-accent-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'filled',\n        class: tw([\n          'bg-success text-on-success group-focus:bg-success-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'filled',\n        class: tw([\n          'bg-alert text-on-alert group-focus:bg-alert-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-error group-focus:bg-error-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'filled',\n        class: tw([\n          'text-on-error bg-info group-focus:bg-info-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'filled',\n        class: tw([\n          'bg-neutral text-on-neutral group-focus:bg-neutral-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'filled',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n      // OUTLINED\n      /**\n       * Outlined styles are handled by the Card component (parent)\n       */\n      // TINTED\n      {\n        intent: 'main',\n        design: 'tinted',\n        class: tw([\n          'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'tinted',\n        class: tw([\n          'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'tinted',\n        class: tw([\n          'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'tinted',\n        class: tw([\n          'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'tinted',\n        class: tw([\n          'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'tinted',\n        class: tw([\n          'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'tinted',\n        class: tw([\n          'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'tinted',\n        class: tw([\n          'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'tinted',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n    ],\n    defaultVariants: {\n      design: 'filled',\n      intent: 'surface',\n      inset: false,\n      hasBackdrop: true,\n    },\n  }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n  const Component = asChild ? Slot : 'div'\n  const { design, intent, hasBackdrop } = useCardContext()\n\n  return (\n    <Component\n      data-spark-component=\"card-content\"\n      ref={ref}\n      className={contentStyles({\n        className,\n        design,\n        intent,\n        inset,\n        hasBackdrop,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n","import { Backdrop } from './Backdrop'\nimport { Card as Root } from './Card'\nimport { Content } from './Content'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Backdrop: typeof Backdrop\n} = Object.assign(Root, {\n  Content,\n  Backdrop,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nBackdrop.displayName = 'Card.Backdrop'\n\nexport { type CardProps } from './Card'\n"],"mappings":"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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: ['border-sm'],\n        tinted: [],\n      },\n      /**\n       * Color scheme of the button.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      { intent: 'main', design: 'outlined', class: tw(['border-main']) },\n      { intent: 'support', design: 'outlined', class: tw(['border-support']) },\n      { intent: 'accent', design: 'outlined', class: tw(['border-accent']) },\n      { intent: 'success', design: 'outlined', class: tw(['border-success']) },\n      { intent: 'alert', design: 'outlined', class: tw(['border-alert']) },\n      { intent: 'danger', design: 'outlined', class: tw(['border-error']) },\n      { intent: 'info', design: 'outlined', class: tw(['border-info']) },\n      { intent: 'neutral', design: 'outlined', class: tw(['border-neutral']) },\n      { intent: 'surface', design: 'outlined', class: tw(['border-outline']) },\n    ],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'surface',\n    },\n  }\n)\n\nexport type CardStylesProps = VariantProps<typeof cardStyles>\n","import { createContext, useContext } from 'react'\n\nimport type { CardStylesProps } from './Card.styles'\n\nexport interface CardContextValue {\n  design: CardStylesProps['design']\n  intent: CardStylesProps['intent']\n  hasType: boolean\n  inset: boolean\n  isInteractive: boolean\n}\n\nconst CardContext = createContext<CardContextValue | undefined>(undefined)\n\nexport const useCardContext = () => {\n  const context = useContext(CardContext)\n  if (!context) {\n    throw new Error('useCardContext must be used within a Card component')\n  }\n\n  return context\n}\n\nexport { CardContext }\n","import { Children, isValidElement, ReactNode } from 'react'\n\nconst MOUSE_EVENTS = [\n  'onClick',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseMove',\n  'onMouseOver',\n  'onMouseOut',\n  'onDoubleClick',\n  'onContextMenu',\n] as const\n\nexport const hasType = (children: ReactNode): boolean => {\n  let typeFound = false\n\n  const searchForType = (node: ReactNode): void => {\n    if (typeFound) return\n\n    Children.forEach(node, child => {\n      if (typeFound) return\n\n      if (isValidElement(child)) {\n        const isTypeComponent =\n          typeof child.type === 'function' &&\n          (child.type as { displayName?: string }).displayName === 'Card.Type'\n\n        if (isTypeComponent) {\n          typeFound = true\n\n          return\n        }\n\n        const hasChildren =\n          child.props && typeof child.props === 'object' && 'children' in child.props\n\n        if (hasChildren) {\n          const childChildren = (child.props as { children: ReactNode }).children\n          if (childChildren !== undefined && childChildren !== null) {\n            searchForType(childChildren)\n          }\n        }\n      }\n    })\n  }\n\n  searchForType(children)\n\n  return typeFound\n}\n\nexport const isInteractive = (\n  children: ReactNode,\n  asChild: boolean | undefined,\n  props: Record<string, any>\n): boolean => {\n  const hasMouseEventHandlers = MOUSE_EVENTS.some(event => event in props)\n\n  if (hasMouseEventHandlers) {\n    return true\n  }\n\n  if (!asChild) {\n    return false\n  }\n\n  const child = Children.only(children)\n\n  if (!isValidElement(child)) {\n    return false\n  }\n\n  const interactiveElements = ['a', 'button']\n  const isInteractiveElement =\n    typeof child.type === 'string' && interactiveElements.includes(child.type)\n\n  if (isInteractiveElement) {\n    return true\n  }\n\n  const childProps = child.props as Record<string, any>\n  const hasChildEventHandlers = MOUSE_EVENTS.some(event => event in childProps)\n\n  return hasChildEventHandlers\n}\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { cardStyles, type CardStylesProps } from './Card.styles'\nimport { CardContext } from './context'\nimport { hasType, isInteractive } from './utils'\n\nexport interface CardProps extends ComponentProps<'div'>, CardStylesProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Card = ({\n  children,\n  design = 'outlined',\n  intent = 'surface',\n  inset = false,\n  asChild,\n  className,\n  ref,\n  ...props\n}: CardProps) => {\n  const Component = asChild ? Slot : 'div'\n  const typeDetected = hasType(children)\n  const interactiveDetected = isInteractive(children, asChild, props)\n\n  return (\n    <CardContext.Provider\n      value={{\n        design,\n        intent,\n        hasType: typeDetected,\n        inset,\n        isInteractive: interactiveDetected,\n      }}\n    >\n      <Component\n        data-spark-component=\"card\"\n        data-interactive={interactiveDetected}\n        ref={ref}\n        className={cardStyles({\n          className,\n          design,\n          intent,\n        })}\n        {...props}\n      >\n        {children}\n      </Component>\n    </CardContext.Provider>\n  )\n}\n\nCard.displayName = 'Card'\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const contentStyles = cva(\n  [\n    'relative h-full default:rounded-lg w-full focus-visible:u-outline',\n    'default:transition-colors default:duration-200 ease-linear',\n  ],\n  {\n    variants: {\n      inset: {\n        false: ['default:p-lg'],\n      },\n      design: {\n        outlined: [\n          'default:bg-surface group-focus:bg-surface-hovered group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ],\n        tinted: [],\n      },\n      hasType: {\n        true: ['rounded-t-0'],\n      },\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'danger', 'info', 'neutral', 'surface']\n      >({\n        main: [],\n        support: [],\n        accent: [],\n        success: [],\n        alert: [],\n        danger: [],\n        info: [],\n        neutral: [],\n        surface: [],\n      }),\n    },\n    compoundVariants: [\n      // OUTLINED\n      /**\n       * Outlined styles are handled by the Card component (parent)\n       */\n      // TINTED\n      {\n        intent: 'main',\n        design: 'tinted',\n        class: tw([\n          'bg-main-container text-on-main-container group-focus:bg-main-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-main-container-hovered',\n        ]),\n      },\n      {\n        intent: 'support',\n        design: 'tinted',\n        class: tw([\n          'bg-support-container text-on-support-container group-focus:bg-support-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-support-container-hovered',\n        ]),\n      },\n      {\n        intent: 'accent',\n        design: 'tinted',\n        class: tw([\n          'bg-accent-container text-on-accent-container group-focus:bg-accent-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-accent-container-hovered',\n        ]),\n      },\n      {\n        intent: 'success',\n        design: 'tinted',\n        class: tw([\n          'bg-success-container text-on-success-container group-focus:bg-success-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-success-container-hovered',\n        ]),\n      },\n      {\n        intent: 'alert',\n        design: 'tinted',\n        class: tw([\n          'bg-alert-container text-on-alert-container group-focus:bg-alert-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-alert-container-hovered',\n        ]),\n      },\n      {\n        intent: 'danger',\n        design: 'tinted',\n        class: tw([\n          'bg-error-container text-on-error-container group-focus:bg-error-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-error-container-hovered',\n        ]),\n      },\n      {\n        intent: 'info',\n        design: 'tinted',\n        class: tw([\n          'bg-info-container text-on-info-container group-focus:bg-info-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-info-container-hovered',\n        ]),\n      },\n      {\n        intent: 'neutral',\n        design: 'tinted',\n        class: tw([\n          'bg-neutral-container text-on-neutral-container group-focus:bg-neutral-container-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-neutral-container-hovered',\n        ]),\n      },\n      {\n        intent: 'surface',\n        design: 'tinted',\n        class: tw([\n          'bg-surface text-on-surface group-focus:bg-surface-hovered',\n          'group-not-disabled:group-data-[interactive=true]:group-hover:bg-surface-hovered',\n        ]),\n      },\n    ],\n    defaultVariants: {\n      design: 'outlined',\n      intent: 'surface',\n      inset: false,\n      hasType: true,\n    },\n  }\n)\n\nexport type ContentStylesProps = VariantProps<typeof contentStyles>\n","import { ComponentProps } from 'react'\n\nimport { Slot } from '../slot'\nimport { contentStyles } from './Content.styles'\nimport { useCardContext } from './context'\n\nexport interface ContentProps extends ComponentProps<'div'> {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * Whether the card should have an inset padding.\n   */\n  inset?: boolean\n}\n\nexport const Content = ({ children, inset, asChild, className, ref, ...props }: ContentProps) => {\n  const Component = asChild ? Slot : 'div'\n  const { design, intent, hasType } = useCardContext()\n\n  return (\n    <Component\n      data-spark-component=\"card-content\"\n      ref={ref}\n      className={contentStyles({\n        className,\n        design,\n        intent,\n        inset,\n        hasType,\n      })}\n      {...props}\n    >\n      {children}\n    </Component>\n  )\n}\n\nContent.displayName = 'Content'\n","import { cva, type VariantProps } from 'class-variance-authority'\nimport { type ComponentProps, type ReactNode } from 'react'\n\nimport { useCardContext } from './context'\n\nexport const typeStyles = cva(\n  [\n    // Base structure\n    'rounded-t-lg default:text-body-2 default:font-bold',\n    'default:text-center',\n\n    // Height and layout\n    'min-h-sz-32', // Minimum height same as Backdrop\n    'px-md', // Horizontal padding for text\n    'py-xs', // Vertical padding for text (allows height to grow)\n\n    // Layout\n    'flex items-center justify-center', // Vertical centering of text\n    'whitespace-normal break-words', // Allow text wrapping\n\n    // Fix border-radius visual gap by overlapping parent border\n    '-mx-px -mt-px',\n  ],\n  {\n    variants: {\n      intent: {\n        main: ['bg-main text-on-main'],\n        support: ['bg-support text-on-support'],\n        accent: ['bg-accent text-on-accent'],\n        success: ['bg-success text-on-success'],\n        alert: ['bg-alert text-on-alert'],\n        danger: ['bg-error text-on-error'],\n        info: ['bg-info text-on-info'],\n        neutral: ['bg-neutral text-on-neutral'],\n        surface: ['bg-surface-inverse text-on-surface-inverse'],\n      },\n    },\n    defaultVariants: {\n      intent: 'main',\n    },\n  }\n)\n\ntype TypeStylesProps = VariantProps<typeof typeStyles>\n\nexport interface TypeProps extends ComponentProps<'header'>, TypeStylesProps {\n  /**\n   * The type or category to display (e.g., \"Best seller\", \"New product\")\n   */\n  children?: ReactNode\n}\n\nexport const Type = ({ intent, children, ...props }: TypeProps) => {\n  const cardContext = useCardContext()\n\n  // Use intent from props if provided, otherwise inherit from parent Card context\n  const resolvedIntent = intent ?? cardContext.intent ?? 'main'\n\n  // Don't render if no children provided (for backward compatibility with Backdrop)\n  if (!children) {\n    return null\n  }\n\n  return (\n    <header className={typeStyles({ intent: resolvedIntent })} {...props}>\n      {children}\n    </header>\n  )\n}\n\nType.displayName = 'Card.Type'\n","import { Card as Root } from './Card'\nimport { Content } from './Content'\nimport { Type } from './Type'\n\n/**\n * A container component that groups related content and actions in a single, styled surface.\n */\nexport const Card: typeof Root & {\n  Content: typeof Content\n  Type: typeof Type\n} = Object.assign(Root, {\n  Content,\n  Type,\n})\n\nCard.displayName = 'Card'\nContent.displayName = 'Card.Content'\nType.displayName = 'Card.Type'\n\nexport { type CardProps } from './Card'\nexport { type TypeProps } from './Type'\n"],"mappings":"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"}

package/dist/card/utils.d.ts

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

package/dist/carousel/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-sImAgVeP.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`),o=require(`@spark-ui/icons/ArrowVerticalLeft`);function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--slide-spacing":`${t}px`,"--slide-item-size":`calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))`}}),getControlProps:()=>({"data-scope":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x.Provider,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.cx)(`border-outline group relative flex justify-center border-0 hover:cursor-pointer`,`m-sm rounded-sm transition-all duration-[200ms] ease-linear`,`w-sz-8 h-sz-8`,`data-[state=active]:w-sz-32 data-[state=active]:h-sz-8`,`data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4`,`data-[state=hidden]:m-0 data-[state=hidden]:size-0`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.cx)(`flex-wrap items-center justify-center`,`default:min-h-sz-16 flex`,r.pagePickerInset&&`bottom-sz-12 absolute inset-x-0`,t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-C91j1N6u.js`);const e=require(`../icon-CRPcdgYp.js`),t=require(`../icon-button-CYz_Fitz.js`);let n=require(`class-variance-authority`),r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@spark-ui/icons/ArrowVerticalRight`),o=require(`@spark-ui/icons/ArrowVerticalLeft`);function s(e){let t=(0,r.useRef)(new Map),n=(0,r.useRef)(null),i=(0,r.useRef)(new Map),a=(0,r.useCallback)(()=>e=>{e.forEach(e=>{let n=e.isIntersecting,r=e.target;t.current.set(r,n);let a=i.current.get(r);a&&a(n)})},[]),o=(0,r.useCallback)(()=>{if(n.current)return n.current;let t=e.current;if(!t)return null;let r=new IntersectionObserver(a(),{root:t,threshold:.2});return n.current=r,r},[e,a]);(0,r.useEffect)(()=>{let e=o(),r=t.current,a=i.current;return()=>{e&&(e.disconnect(),r.clear(),a.clear(),n.current=null)}},[o]);let s=(0,r.useCallback)((e,n)=>{if(!e)return;let r=o();if(!r){setTimeout(()=>s(e,n),0);return}let a=t.current.get(e)??!0;t.current.set(e,a),i.current.set(e,n),r.observe(e),n(a)},[o]);return{registerSlide:s,unregisterSlide:(0,r.useCallback)(e=>{if(!e)return;let r=n.current;r&&r.unobserve(e),t.current.delete(e),i.current.delete(e)},[]),isSlideVisible:(0,r.useCallback)(e=>e?t.current.get(e)??!0:!0,[])}}function c(e){let t=(0,r.useRef)(()=>{throw Error(`Cannot call an event handler while rendering.`)});return(0,r.useLayoutEffect)(()=>{t.current=e}),(0,r.useCallback)((...e)=>t.current?.(...e),[])}var l=()=>{let e=(0,r.useRef)(!1);return(0,r.useEffect)(()=>(e.current=!0,()=>{e.current=!1}),[]),e};function u(e,t){let n=(0,r.useRef)(0),i=(0,r.useRef)(null);(0,r.useEffect)(()=>{let r=e.current;if(!r)return;let a=`onscrollend`in window,o=()=>{t()},s=()=>{i.current&&clearTimeout(i.current),e.current&&(n.current=e.current.scrollLeft,i.current=setTimeout(()=>{e.current&&o()},150))};return a?r.addEventListener(`scrollend`,o):r.addEventListener(`scroll`,s),()=>{i.current&&clearTimeout(i.current),a?r.removeEventListener(`scrollend`,o):r.removeEventListener(`scroll`,s)}},[t,e])}function d(e,t){(0,r.useLayoutEffect)(()=>{let n=e.current;if(!n)return;let r=new ResizeObserver(e=>{for(let n of e)t(n.contentRect.width)});return r.observe(n),()=>r.disconnect()},[e,t])}function f({totalSlides:e,slidesPerMove:t,slidesPerPage:n}){let r=t===`auto`?n:t,i=[],a=Math.floor((e-n)/r)*r;for(let e=0;e<=a;e+=r)i.push(e);return i[i.length-1]!==e-n&&i.push(e-n),i}function p(e){return e?Array.from(e.querySelectorAll(`[data-part="item"]`)):[]}function m(e,{container:t,slidesPerMove:n,slidesPerPage:r}){return f({totalSlides:p(t).length,slidesPerPage:r,slidesPerMove:n}).includes(e)}function h({container:e,slidesPerMove:t,slidesPerPage:n}){return e?p(e).filter((r,i)=>m(i,{slidesPerMove:t,slidesPerPage:n,container:e})).map(e=>e.offsetLeft):[]}function g({dotIndex:e,pageState:t,totalPages:n,maxDots:r=5}){if(n<=r)return e===t?`active`:`idle`;if(t<=Math.floor(r/2))return e>r-1?`hidden`:e===t?`active`:e===r-1?`edge`:`idle`;if(t>=n-Math.ceil(r/2)){let i=n-r;return e<i?`hidden`:e===t?`active`:e===i?`edge`:`idle`}let i=t-Math.floor(r/2),a=t+Math.floor(r/2);return e<i||e>a?`hidden`:e===t?`active`:e===i||e===a?`edge`:`idle`}function _(e=[],{carouselRef:t,slidesPerMove:n,slidesPerPage:i}){let[a,o]=(0,r.useState)(e),s=(0,r.useMemo)(()=>a,[a]);return d(t,()=>{let e=h({slidesPerMove:n,slidesPerPage:i,container:t.current});JSON.stringify(a)!==JSON.stringify(e)&&o(e)}),[s,o]}var v=`carousel`,y=`ltr`,b=({defaultPage:e,gap:t=16,snapType:n=`mandatory`,snapStop:i=`always`,scrollPadding:a=0,slidesPerPage:o=1,slidesPerMove:d=`auto`,scrollBehavior:f=`smooth`,loop:p=!1,pagePickerInset:b=!1,maxDots:x=5,page:S,onPageChange:C})=>{let w=(0,r.useId)(),[T,E]=(0,r.useState)(e||S||0),D=(0,r.useRef)(null),O=(0,r.useRef)([]),k=l().current,A=c(C),{registerSlide:j,unregisterSlide:M,isSlideVisible:N}=s(D),[P]=_([],{carouselRef:D,slidesPerMove:d,slidesPerPage:o}),F=(0,r.useRef)(p||T>0),I=(0,r.useRef)(p||T<P.length-1);F.current=p||T>0,I.current=p||T<P.length-1;let L=(0,r.useCallback)(e=>{e!==T&&(E(e),A?.(e))},[A,T]),R=(0,r.useCallback)((e,t)=>{D.current&&(D.current.scrollTo({left:P[e],behavior:t===`instant`?`auto`:`smooth`}),L(e))},[L,P]),z=(0,r.useCallback)(e=>{if(F){let t=p&&T===0?P.length-1:Math.max(T-1,0);R(t,f),e?.(t)}},[p,P,T,f,R]),B=(0,r.useCallback)(e=>{if(I){let t=p&&T===P.length-1?0:Math.min(T+1,P.length-1);R(t,f),e?.(t)}},[p,P,T,f,R]);return(0,r.useEffect)(()=>{S!=null&&R(S,f)},[S,f,R]),(0,r.useLayoutEffect)(()=>{if(e!=null&&!k&&D.current){let t=h({container:D.current,slidesPerMove:d,slidesPerPage:o});D.current.scrollTo({left:t[e],behavior:`instant`})}},[e,k,d,o]),u(D,(0,r.useCallback)(()=>{if(!D.current||P.length===0)return;let{scrollLeft:e}=D.current,t=P.map(t=>Math.abs(e-t)),n=t.indexOf(Math.min(...t));n!==-1&&L(n)},[P,L])),{ref:D,pageIndicatorsRefs:O,gap:t,snapType:n,snapStop:i,scrollPadding:a,slidesPerPage:o,slidesPerMove:d,scrollBehavior:f,loop:p,pagePickerInset:b,maxDots:x,page:T,pageSnapPoints:P,canScrollNext:I.current,canScrollPrev:F.current,scrollTo:R,scrollPrev:z,scrollNext:B,registerSlide:j,unregisterSlide:M,isSlideVisible:N,getRootProps:()=>({id:`carousel::${w}:`,role:`region`,"aria-roledescription":`carousel`,"data-scope":v,"data-part":`root`,"data-orientation":`horizontal`,dir:y,style:{"--slides-per-page":o,"--slide-spacing":`${t}px`,"--slide-item-size":`calc(100% / var(--slides-per-page) - var(--slide-spacing) * (var(--slides-per-page) - 1) / var(--slides-per-page))`}}),getControlProps:()=>({"data-scope":v,"data-part":`control`,"data-orientation":`horizontal`}),getPrevTriggerProps:()=>({id:`carousel::${w}::prev-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`prev-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!F.current,onClick:()=>z()}),getNextTriggerProps:()=>({id:`carousel::${w}::next-trigger`,"aria-controls":`carousel::${w}::item-group`,"data-scope":v,"data-part":`next-trigger`,"data-orientation":`horizontal`,type:`button`,dir:y,disabled:!I.current,onClick:()=>B()}),getSlidesContainerProps:()=>({id:`carousel::${w}::item-group`,"aria-live":o>1?`off`:`polite`,"data-scope":v,"data-part":`item-group`,"data-orientation":`horizontal`,dir:y,tabIndex:0,style:{display:`grid`,gap:`var(--slide-spacing)`,scrollSnapType:`x ${n}`,gridAutoFlow:`column`,scrollbarWidth:`none`,gridAutoColumns:`var(--slide-item-size)`,overflowX:`auto`},ref:D}),getSlideProps:({index:e})=>{let t=m(e,{container:D.current,slidesPerMove:d,slidesPerPage:o});return{id:`carousel::${w}::item:${e}`,role:`group`,"aria-roledescription":`slide`,"data-scope":v,"data-part":`item`,"data-index":e,"data-orientation":`horizontal`,dir:y,style:{...t&&{scrollSnapAlign:`start`,scrollSnapStop:i}}}},getIndicatorGroupProps:()=>({role:`radiogroup`,id:`carousel::${w}::indicator-group`,"data-scope":v,"data-part":`indicator-group`,"data-orientation":`horizontal`,dir:y}),getIndicatorProps:({index:e})=>{let t=g({dotIndex:e,pageState:T,totalPages:P.length,maxDots:x});return{role:`radio`,id:`carousel::${w}::indicator:${e}`,"aria-checked":e===T,"data-scope":v,"data-part":`indicator`,"data-orientation":`horizontal`,"data-index":e,"data-state":t,tabIndex:e===T?0:-1,onClick:()=>{R(e,f)},onKeyDown:e=>{let t=e=>{O.current[e]?.focus()};e.key===`ArrowRight`&&I?B(t):e.key===`ArrowLeft`&&F&&z(t)}}}}},x=(0,r.createContext)(null),S=({className:e,snapType:t=`mandatory`,snapStop:r=`always`,scrollBehavior:a=`smooth`,slidesPerMove:o=`auto`,pagePickerInset:s=!1,slidesPerPage:c=1,loop:l=!1,children:u,gap:d=16,defaultPage:f,page:p,onPageChange:m,maxDots:h=5,...g})=>{let _=b({defaultPage:f,slidesPerPage:c,slidesPerMove:o,loop:l,gap:d,scrollBehavior:a,snapStop:r,snapType:t,page:p,pagePickerInset:s,onPageChange:m,maxDots:h});return(0,i.jsx)(x.Provider,{value:{..._,scrollBehavior:a},children:(0,i.jsx)(`div`,{"data-spark-component":`carousel`,className:(0,n.cx)(`gap-lg relative box-border flex flex-col`,e),..._.getRootProps(),...g,children:u})})};S.displayName=`Carousel`;var C=()=>{let e=(0,r.useContext)(x);if(!e)throw Error(`useCarouselContext must be used within a Carousel provider`);return e},w=({children:e,className:t,...r})=>{let a=C();return(0,i.jsx)(`div`,{"data-spark-component":`carousel-controls`,className:(0,n.cx)(`default:px-lg pointer-events-none absolute inset-0 flex flex-row items-center justify-between`,t),...a.getControlProps(),...r,children:e})};w.displayName=`Carousel.Controls`;var T=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-next-button`,...C().getNextTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(a.ArrowVerticalRight,{})})});T.displayName=`Carousel.NextButton`;var E=({children:e,unstyled:t=!1,index:a,"aria-label":o,className:s,intent:c=`support`})=>{let l=C(),u=(0,r.useRef)(null);return(0,r.useEffect)(()=>{l.pageIndicatorsRefs.current&&(l.pageIndicatorsRefs.current[a]=u.current)}),(0,i.jsx)(`button`,{"data-spark-component":`carousel-page-indicator`,ref:u,...l.getIndicatorProps({index:a}),"aria-label":o,className:(0,n.cx)({[(0,n.cx)(`border-outline group relative flex justify-center border-0 hover:cursor-pointer`,`m-sm rounded-sm transition-all duration-[200ms] ease-linear`,`w-sz-8 h-sz-8`,`data-[state=active]:w-sz-32 data-[state=active]:h-sz-8`,`data-[state=edge]:w-sz-4 data-[state=edge]:h-sz-4`,`data-[state=hidden]:m-0 data-[state=hidden]:size-0`,c===`surface`?`data-[state=active]:bg-surface bg-surface/dim-2`:`data-[state=active]:bg-support bg-on-surface/dim-2`)]:!t},s),children:e},a)};E.displayName=`Carousel.PageIndicator`;var D=({children:e,className:t})=>{let r=C();return(0,i.jsx)(i.Fragment,{children:(0,i.jsx)(`div`,{"data-spark-component":`carousel-page-picker`,...r.getIndicatorGroupProps(),className:(0,n.cx)(`flex-wrap items-center justify-center`,`default:min-h-sz-16 flex`,r.pagePickerInset&&`bottom-sz-12 absolute inset-x-0`,t),children:r.pageSnapPoints.length<=1?null:e({...r,pages:Array.from({length:r.pageSnapPoints.length},(e,t)=>t)})})})};D.displayName=`Carousel.PagePicker`;var O=({"aria-label":n,...r})=>(0,i.jsx)(t.t,{"data-spark-component":`carousel-prev-button`,...C().getPrevTriggerProps(),intent:`surface`,design:`filled`,className:`pointer-events-auto cursor-pointer shadow-sm disabled:invisible`,"aria-label":n,...r,children:(0,i.jsx)(e.t,{children:(0,i.jsx)(o.ArrowVerticalLeft,{})})});O.displayName=`Carousel.PrevButton`;function k(e,t){let[n,i]=(0,r.useState)(!0),a=C();return(0,r.useEffect)(()=>{let t=e.current;if(!t)return;let{registerSlide:n,unregisterSlide:r}=a;return n(t,i),()=>{r(t)}},[e]),n}var A=({children:e,index:t=0,totalSlides:a,className:o=``,...s})=>{let c=(0,r.useRef)(null),l=C(),u=k(c,l.ref);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slide`,ref:c,...l.getSlideProps({index:t,totalSlides:a}),className:(0,n.cx)(`default:bg-surface relative overflow-hidden`,o),"aria-hidden":!u,inert:!u,...s,children:e})};A.displayName=`Carousel.Slide`;var j=({children:e,className:t=``})=>{let a=C(),o=r.Children.toArray(e);return(0,i.jsx)(`div`,{"data-spark-component":`carousel-slides`,...a.getSlidesContainerProps(),className:(0,n.cx)(`focus-visible:u-outline relative w-full`,`[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden`,t),children:o.map((e,t)=>(0,r.isValidElement)(e)?(0,r.cloneElement)(e,{index:t,totalSlides:o.length}):e)})};j.displayName=`Carousel.Slides`;var M=({children:e})=>(0,i.jsx)(`div`,{className:`relative flex items-center justify-around p-0`,children:e});M.displayName=`Carousel.Viewport`;var N=Object.assign(S,{Controls:w,NextButton:T,PrevButton:O,Slide:A,Slides:j,Viewport:M,PagePicker:D,PageIndicator:E});N.displayName=`Carousel`,exports.Carousel=N;
 //# sourceMappingURL=index.js.map

package/dist/carousel/index.mjs

@@ -1,5 +1,5 @@
 import { t as e } from "../icon-D05Uqh8_.mjs";
-import { t } from "../icon-button-DeG1iEYq.mjs";
+import { t } from "../icon-button-DpucUC_L.mjs";
 import { cx as n } from "class-variance-authority";
 import { Children as r, cloneElement as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useMemo as f, useRef as p, useState as m } from "react";
 import { Fragment as h, jsx as g } from "react/jsx-runtime";