{"version":3,"file":"Card.mjs","names":[],"sources":["../../../../package/common/card/Card.tsx"],"sourcesContent":["import cx from 'classnames';\nimport React, { useRef } from 'react';\n\nimport { CardStyleType, type CardProps } from './card.types';\nimport styles from './card.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport Ripple from '../ripple';\nimport type { RippleHandle } from '../ripple';\nimport { useComponentDefaults } from '../configProvider';\nimport { isSelfActivation } from '../utils/activationKey';\nimport { ThemeColor } from '../themeProvider/color.types';\nimport { toneProps, useToneCheck } from '../styles/tone';\n\nconst CLASS_BY_STYLE: Record<CardStyleType, string> = {\n  elevated: styles.cardStyleElevated,\n  outlined: styles.cardStyleOutlined,\n  light: styles.cardStyleLight,\n};\n\nfunction Card(props: CardProps) {\n  const {\n    className = undefined,\n    children = null,\n    styleType = CardStyleType.Elevated,\n    color = ThemeColor.Neutral,\n    onClick = undefined,\n    tabIndex = null,\n    hoverEffect = undefined,\n    style = undefined,\n    autoGap = true,\n    clip = false,\n    onKeyDown: onKeyDownProp,\n    classNames,\n    styles: slotStyles,\n    ...rest\n  } = useComponentDefaults('Card', props);\n  const isInteractable = !!onClick;\n  const tone = toneProps(color);\n  useToneCheck('Card', [color]);\n\n  const rippleRef = useRef<RippleHandle>(null);\n\n  // Keyboard activation calls onClick directly without dispatching a DOM click, so Ripple's own\n  // listener never sees it.\n  function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {\n    if (isInteractable && isSelfActivation(event)) rippleRef.current?.addRipple();\n    onKeyDownProp?.(event);\n  }\n\n  return (\n    <InteractableDiv\n      {...rest}\n      className={cx(\n        styles.card,\n        tone.className,\n        color === ThemeColor.Neutral && styles.cardNeutral,\n        CLASS_BY_STYLE[styleType],\n        clip && styles.cardClip,\n        isInteractable && styles.cardInteractable,\n        ((isInteractable && hoverEffect !== false) || hoverEffect) && styles.cardHover,\n        className,\n        classNames?.root,\n      )}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={tabIndex ?? (isInteractable ? 0 : null)}\n      style={{ ...tone.style, ...style, ...slotStyles?.root }}\n    >\n      <Ripple\n        ref={rippleRef}\n        disabled={!isInteractable}\n        className={cx(styles.cardPadding, autoGap && styles.cardGaps, classNames?.content)}\n        style={{ borderRadius: 'inherit', ...slotStyles?.content }}\n      >\n        {children}\n      </Ripple>\n    </InteractableDiv>\n  );\n}\n\nexport default Card;\n"],"mappings":"+hBAaA,IAAM,EAAgD,CACpD,SAAU,EAAO,kBACjB,SAAU,EAAO,kBACjB,MAAO,EAAO,cAChB,EAEA,SAAS,EAAK,EAAkB,CAC9B,GAAM,CACJ,YAAY,IAAA,GACZ,WAAW,KACX,YAAY,EAAc,SAC1B,QAAQ,EAAW,QACnB,UAAU,IAAA,GACV,WAAW,KACX,cAAc,IAAA,GACd,QAAQ,IAAA,GACR,UAAU,GACV,OAAO,GACP,UAAW,EACX,aACA,OAAQ,EACR,GAAG,GACD,EAAqB,OAAQ,CAAK,EAChC,EAAiB,CAAC,CAAC,EACnB,EAAO,EAAU,CAAK,EAC5B,EAAa,OAAQ,CAAC,CAAK,CAAC,EAE5B,IAAM,EAAY,EAAqB,IAAI,EAI3C,SAAS,EAAc,EAA4C,CAC7D,GAAkB,EAAiB,CAAK,GAAG,EAAU,SAAS,UAAU,EAC5E,IAAgB,CAAK,CACvB,CAEA,OACE,EAAC,EAAD,CACE,GAAI,EACJ,UAAW,EACT,EAAO,KACP,EAAK,UACL,IAAU,EAAW,SAAW,EAAO,YACvC,EAAe,GACf,GAAQ,EAAO,SACf,GAAkB,EAAO,kBACvB,GAAkB,IAAgB,IAAU,IAAgB,EAAO,UACrE,EACA,GAAY,IACd,EACS,UACT,UAAW,EACX,SAAU,IAAa,EAAiB,EAAI,MAC5C,MAAO,CAAE,GAAG,EAAK,MAAO,GAAG,EAAO,GAAG,GAAY,IAAK,EAEtD,SAAA,EAAC,EAAD,CACE,IAAK,EACL,SAAU,CAAC,EACX,UAAW,EAAG,EAAO,YAAa,GAAW,EAAO,SAAU,GAAY,OAAO,EACjF,MAAO,CAAE,aAAc,UAAW,GAAG,GAAY,OAAQ,EAExD,UACK,CAAA,CACO,CAAA,CAErB"}