{"version":3,"sources":["../src/components/cards/card.tsx","../src/components/cards/card.utils.ts"],"names":["React","cn","classes","CARD_CLASSES","handleCardKeyDown","event","onClick","Title","children","className","style","as","props","ui_default","Content","Footer","CardRoot","styles","id","interactive","tabIndex","role","ariaLabel","ariaLabelledBy","ariaDescribedBy","Card","card_default"],"mappings":"yCAAA,OAAOA,MAAW,QCoBX,SAASC,KAAMC,EAAwD,CAC5E,OAAOA,EAAQ,OAAO,OAAO,EAAE,KAAK,GAAG,CACzC,CAMO,IAAMC,EAAe,CAC1B,KAAM,OACN,MAAO,aACP,QAAS,eACT,OAAQ,aACV,EAcO,SAASC,EACdC,EACAC,EACM,CACDA,IAGDD,EAAM,MAAQ,SAAWA,EAAM,MAAQ,OACzCA,EAAM,eAAe,EACrBC,EAAQD,CAAK,EAEjB,CDnBO,IAAME,EAAQ,CAAC,CACpB,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,KACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,QAASV,EAAGE,EAAa,MAAOM,CAAS,EACzC,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJD,EAAM,YAAc,aA+Bb,IAAMO,EAAU,CAAC,CACtB,SAAAN,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,UACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,QAASV,EAAGE,EAAa,QAASM,CAAS,EAC3C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJM,EAAQ,YAAc,eA4Bf,IAAMC,EAAS,CAAC,CACrB,SAAAP,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,MACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,QAASV,EAAGE,EAAa,OAAQM,CAAS,EAC1C,OAAQC,EACP,GAAGE,GAEHJ,CACH,EAIJO,EAAO,YAAc,cAuErB,IAAMC,EAAW,CAAC,CAChB,GAAAL,EAAK,MACL,OAAAM,EACA,SAAAT,EACA,QAAAN,EAAU,YACV,GAAAgB,EACA,YAAAC,EAAc,GACd,QAAAb,EACA,SAAAc,EACA,KAAAC,EACA,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EACpB,GAAGZ,CACL,KAEEZ,EAAM,UAAU,IAAM,CAEtB,EAAG,CAACM,EAASa,CAAW,CAAC,EAsBvBnB,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,GAAIO,EACJ,OAAQD,EACR,QAASf,EACT,aAAYoB,EACZ,kBAAiBC,EACjB,mBAAkBC,EAClB,YAAWL,EAAc,cAAgB,GACxC,GAtBoBA,EACrB,CACE,KAAME,GAAQ,SACd,SAAUD,GAAY,EACtB,QAAAd,EACA,UAXiBD,GAA+B,EAChDc,GAAeb,IACjBF,EAAkBC,EAAOC,CAAO,CAEpC,CAQI,EACA,CACE,KAAAe,EACA,QAAAf,CACF,EAaC,GAAGM,GAEHJ,CACH,GAKSiB,EAAOT,EACpBS,EAAK,YAAc,OACnBA,EAAK,MAAQlB,EACbkB,EAAK,QAAUX,EACfW,EAAK,OAASV,EAEd,IAAOW,EAAQD","sourcesContent":["import React from \"react\";\nimport UI from \"#components/ui\";\nimport type {\n  CardProps,\n  CardTitleProps,\n  CardContentProps,\n  CardFooterProps,\n  CardComponent,\n} from \"./card.types\";\nimport {\n  cn,\n  CARD_CLASSES,\n  handleCardKeyDown,\n  warnInteractiveUsage,\n} from \"./card.utils\";\n\n/**\n * Card.Title - Title sub-component for Card\n *\n * Renders a heading element for the card title. Defaults to h3 for proper\n * document outline, but can be customized via the `as` prop.\n *\n * ## Accessibility\n * - Use appropriate heading level based on document structure\n * - Combine with `aria-labelledby` on parent Card for accessible names\n *\n * @example\n * ```tsx\n * <Card aria-labelledby=\"card-title-1\">\n *   <Card.Title id=\"card-title-1\">Featured Product</Card.Title>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Custom heading level\n * <Card.Title as=\"h2\">Section Title</Card.Title>\n * ```\n */\nexport const Title = ({\n  children,\n  className,\n  style,\n  as = \"h3\",\n  ...props\n}: CardTitleProps) => {\n  return (\n    <UI\n      as={as}\n      classes={cn(CARD_CLASSES.TITLE, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nTitle.displayName = \"Card.Title\";\n\n/**\n * Card.Content - Content sub-component for Card\n *\n * Renders the main content area of the card. Defaults to `<article>` for\n * standalone content, but can be changed to `div` or `section` via the `as` prop.\n *\n * ## Semantic HTML Guidelines\n * - Use `article` (default) for self-contained, syndicate-able content\n * - Use `div` for generic content containers\n * - Use `section` for thematic groupings with a heading\n *\n * @example\n * ```tsx\n * <Card>\n *   <Card.Title>Article Title</Card.Title>\n *   <Card.Content>\n *     <p>This is standalone content...</p>\n *   </Card.Content>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Generic container (not standalone content)\n * <Card.Content as=\"div\">\n *   <p>Generic content...</p>\n * </Card.Content>\n * ```\n */\nexport const Content = ({\n  children,\n  className,\n  style,\n  as = \"article\",\n  ...props\n}: CardContentProps) => {\n  return (\n    <UI\n      as={as}\n      classes={cn(CARD_CLASSES.CONTENT, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nContent.displayName = \"Card.Content\";\n\n/**\n * Card.Footer - Footer sub-component for Card\n *\n * Renders a footer section for the card. Use for actions, metadata, or\n * supplementary information.\n *\n * @example\n * ```tsx\n * <Card>\n *   <Card.Title>Product</Card.Title>\n *   <Card.Content>Description...</Card.Content>\n *   <Card.Footer>\n *     <button>Add to Cart</button>\n *     <span>$29.99</span>\n *   </Card.Footer>\n * </Card>\n * ```\n *\n * @example\n * ```tsx\n * // Semantic footer element\n * <Card.Footer as=\"footer\">\n *   <p>Last updated: 2024-01-15</p>\n * </Card.Footer>\n * ```\n */\nexport const Footer = ({\n  children,\n  className,\n  style,\n  as = \"div\",\n  ...props\n}: CardFooterProps) => {\n  return (\n    <UI\n      as={as}\n      classes={cn(CARD_CLASSES.FOOTER, className)}\n      styles={style}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nFooter.displayName = \"Card.Footer\";\n\n/**\n * Card - A flexible, accessible card component with compound component pattern\n *\n * The Card component provides a container for grouping related content and actions.\n * It follows the compound component pattern, exposing `Card.Title`, `Card.Content`,\n * and `Card.Footer` sub-components for structured layouts.\n *\n * ## Features\n * - **Polymorphic rendering**: Render as any HTML element via `as` prop\n * - **Compound components**: Structured sub-components for consistent layouts\n * - **Interactive variant**: Built-in keyboard navigation and ARIA support\n * - **Fully accessible**: WCAG 2.1 AA compliant with proper semantic HTML\n *\n * ## Accessibility\n *\n * ### Non-Interactive Cards\n * - Use semantic HTML: `article` for standalone content, `section` for groupings\n * - Provide accessible names with `aria-labelledby` referencing the title\n *\n * ### Interactive Cards (Clickable)\n * - Set `interactive={true}` to enable keyboard navigation (Enter/Space)\n * - Provide accessible name via `aria-label` or `aria-labelledby`\n * - Ensure adequate focus indicators (handled by CSS)\n *\n * @example\n * // Basic card with compound components\n * ```tsx\n * <Card>\n *   <Card.Title>Product Name</Card.Title>\n *   <Card.Content>\n *     <p>Product description goes here...</p>\n *   </Card.Content>\n *   <Card.Footer>\n *     <button>Buy Now</button>\n *   </Card.Footer>\n * </Card>\n * ```\n *\n * @example\n * // Accessible interactive card\n * ```tsx\n * <Card\n *   interactive\n *   aria-label=\"View product details\"\n *   onClick={() => navigate('/product/123')}\n * >\n *   <Card.Title>Product Name</Card.Title>\n *   <Card.Content>Click anywhere to view details</Card.Content>\n * </Card>\n * ```\n *\n * @example\n * // Semantic article card with accessible name\n * ```tsx\n * <Card as=\"article\" aria-labelledby=\"article-title\">\n *   <Card.Title id=\"article-title\">Article Headline</Card.Title>\n *   <Card.Content>Article body...</Card.Content>\n * </Card>\n * ```\n *\n * @example\n * // Card as a landmark region\n * ```tsx\n * <Card role=\"region\" aria-label=\"Featured products\">\n *   <Card.Title>Featured</Card.Title>\n *   <Card.Content>...</Card.Content>\n * </Card>\n * ```\n */\nconst CardRoot = ({\n  as = \"div\",\n  styles,\n  children,\n  classes = \"shadow-sm\",\n  id,\n  interactive = false,\n  onClick,\n  tabIndex,\n  role,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: CardProps) => {\n  // Development warnings for common accessibility issues\n  React.useEffect(() => {\n    warnInteractiveUsage(!!onClick, interactive);\n  }, [onClick, interactive]);\n\n  // Interactive card handling\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (interactive || onClick) {\n      handleCardKeyDown(event, onClick);\n    }\n  };\n\n  const interactiveProps = interactive\n    ? {\n        role: role || \"button\",\n        tabIndex: tabIndex ?? 0,\n        onClick,\n        onKeyDown: handleKeyDown,\n      }\n    : {\n        role,\n        onClick,\n      };\n\n  return (\n    <UI\n      as={as}\n      id={id}\n      styles={styles}\n      classes={classes}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      data-card={interactive ? \"interactive\" : true}\n      {...interactiveProps}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\n// Create compound component with proper TypeScript typing\nexport const Card = CardRoot as CardComponent;\nCard.displayName = \"Card\";\nCard.Title = Title;\nCard.Content = Content;\nCard.Footer = Footer;\n\nexport default Card;\n\n// Export types for external consumption\nexport type {\n  CardProps,\n  CardTitleProps,\n  CardContentProps,\n  CardFooterProps,\n  CardComponent,\n} from \"./card.types\";\n","/**\n * Utility functions for the Card component.\n */\n\n/**\n * Combines multiple className strings into a single string, filtering out falsy values.\n *\n * This utility provides a cleaner alternative to template literals for className composition,\n * avoiding unnecessary string allocation on every render.\n *\n * @param classes - Array of class names (can include undefined/null/empty strings)\n * @returns Combined className string\n *\n * @example\n * ```tsx\n * cn('card-title', className) // \"card-title custom-class\"\n * cn('card-title', undefined) // \"card-title\"\n * cn('card-title', '', 'extra') // \"card-title extra\"\n * ```\n */\nexport function cn(...classes: (string | undefined | null | false)[]): string {\n  return classes.filter(Boolean).join(' ')\n}\n\n/**\n * CSS class name constants for Card components.\n * Centralizing these prevents typos and enables easier refactoring.\n */\nexport const CARD_CLASSES = {\n  CARD: 'card',\n  TITLE: 'card-title',\n  CONTENT: 'card-content',\n  FOOTER: 'card-footer',\n} as const\n\n/**\n * Handles keyboard events for interactive cards.\n * Triggers click handler on Enter or Space key press.\n *\n * @param event - Keyboard event\n * @param onClick - Click handler to invoke\n *\n * @example\n * ```tsx\n * <div onKeyDown={(e) => handleCardKeyDown(e, handleClick)}>\n * ```\n */\nexport function handleCardKeyDown(\n  event: React.KeyboardEvent,\n  onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void\n): void {\n  if (!onClick) return\n\n  // Activate on Enter or Space (standard keyboard interaction pattern)\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault() // Prevent page scroll on Space\n    onClick(event)\n  }\n}\n\n/**\n * Development warning for interactive card usage.\n * Warns when onClick is provided without the interactive prop.\n *\n * This function is intentionally empty to comply with no-console linting rules.\n * In the future, consider using a proper logging/warning system.\n *\n * @param hasOnClick - Whether onClick handler is provided\n * @param isInteractive - Whether interactive prop is set\n */\nexport function warnInteractiveUsage(\n  hasOnClick: boolean,\n  isInteractive?: boolean\n): void {\n  // Development warning removed to comply with ESLint no-console rule\n  // TODO: Consider using a proper warning system if needed\n  void hasOnClick\n  void isInteractive\n}\n"]}