@fpkit/acss 3.2.1 → 3.3.0

package/libs/chunk-KAR3HDXK.js

@@ -0,0 +1,8 @@
+import { a } from './chunk-DDSXKOUB.js';
+import p from 'react';
+
+function i(...e){return e.filter(Boolean).join(" ")}var C={CARD:"card",TITLE:"card-title",CONTENT:"card-content",FOOTER:"card-footer"};function y(e,r){r&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r(e));}var f=({children:e,className:r,style:o,as:t="h3",...a$1})=>p.createElement(a,{as:t,classes:i(C.TITLE,r),styles:o,...a$1},e);f.displayName="Card.Title";var b=({children:e,className:r,style:o,as:t="article",...a$1})=>p.createElement(a,{as:t,classes:i(C.CONTENT,r),styles:o,...a$1},e);b.displayName="Card.Content";var m=({children:e,className:r,style:o,as:t="div",...a$1})=>p.createElement(a,{as:t,classes:i(C.FOOTER,r),styles:o,...a$1},e);m.displayName="Card.Footer";var I=({as:e="div",styles:r,children:o,classes:t="shadow-sm",id:a$1,interactive:n=!1,onClick:s,tabIndex:u,role:c,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,...v})=>(p.useEffect(()=>{},[s,n]),p.createElement(a,{as:e,id:a$1,styles:r,classes:t,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,"data-card":n?"interactive":!0,...n?{role:c||"button",tabIndex:u??0,onClick:s,onKeyDown:x=>{(n||s)&&y(x,s);}}:{role:c,onClick:s},...v},o)),l=I;l.displayName="Card";l.Title=f;l.Content=b;l.Footer=m;var h=l;
+
+export { f as a, b, m as c, l as d, h as e };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-KAR3HDXK.js.map

package/libs/chunk-KAR3HDXK.js.map

@@ -0,0 +1 @@
+{"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":"wCAAA,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"]}

package/libs/chunk-M5JARVJD.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var chunkEJ6KYBFE_cjs = require('./chunk-EJ6KYBFE.cjs');
+var p = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var p__default = /*#__PURE__*/_interopDefault(p);
+
+function i(...e){return e.filter(Boolean).join(" ")}var C={CARD:"card",TITLE:"card-title",CONTENT:"card-content",FOOTER:"card-footer"};function y(e,r){r&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r(e));}var f=({children:e,className:r,style:o,as:t="h3",...a})=>p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:t,classes:i(C.TITLE,r),styles:o,...a},e);f.displayName="Card.Title";var b=({children:e,className:r,style:o,as:t="article",...a})=>p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:t,classes:i(C.CONTENT,r),styles:o,...a},e);b.displayName="Card.Content";var m=({children:e,className:r,style:o,as:t="div",...a})=>p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:t,classes:i(C.FOOTER,r),styles:o,...a},e);m.displayName="Card.Footer";var I=({as:e="div",styles:r,children:o,classes:t="shadow-sm",id:a,interactive:n=!1,onClick:s,tabIndex:u,role:c,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,...v})=>(p__default.default.useEffect(()=>{},[s,n]),p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:e,id:a,styles:r,classes:t,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,"data-card":n?"interactive":!0,...n?{role:c||"button",tabIndex:u??0,onClick:s,onKeyDown:x=>{(n||s)&&y(x,s);}}:{role:c,onClick:s},...v},o)),l=I;l.displayName="Card";l.Title=f;l.Content=b;l.Footer=m;var h=l;
+
+exports.a = f;
+exports.b = b;
+exports.c = m;
+exports.d = l;
+exports.e = h;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-M5JARVJD.cjs.map

package/libs/chunk-M5JARVJD.cjs.map

@@ -0,0 +1 @@
+{"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"]}

package/libs/components/card.cjs

@@ -2,30 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkWWPLBWCQ_cjs = require('../chunk-WWPLBWCQ.cjs');
+var chunkM5JARVJD_cjs = require('../chunk-M5JARVJD.cjs');
 require('../chunk-EJ6KYBFE.cjs');
 
 
 
 Object.defineProperty(exports, 'Card', {
 	enumerable: true,
-	get: function () { return chunkWWPLBWCQ_cjs.d; }
+	get: function () { return chunkM5JARVJD_cjs.d; }
 });
 Object.defineProperty(exports, 'Content', {
 	enumerable: true,
-	get: function () { return chunkWWPLBWCQ_cjs.b; }
+	get: function () { return chunkM5JARVJD_cjs.b; }
 });
 Object.defineProperty(exports, 'Footer', {
 	enumerable: true,
-	get: function () { return chunkWWPLBWCQ_cjs.c; }
+	get: function () { return chunkM5JARVJD_cjs.c; }
 });
 Object.defineProperty(exports, 'Title', {
 	enumerable: true,
-	get: function () { return chunkWWPLBWCQ_cjs.a; }
+	get: function () { return chunkM5JARVJD_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkWWPLBWCQ_cjs.e; }
+	get: function () { return chunkM5JARVJD_cjs.e; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=card.cjs.map

package/libs/components/card.js

@@ -1,4 +1,4 @@
-export { d as Card, b as Content, c as Footer, a as Title, e as default } from '../chunk-OU52NIKA.js';
+export { d as Card, b as Content, c as Footer, a as Title, e as default } from '../chunk-KAR3HDXK.js';
 import '../chunk-DDSXKOUB.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=card.js.map

package/libs/index.cjs

@@ -12,7 +12,7 @@ var chunk2C3YLBWP_cjs = require('./chunk-2C3YLBWP.cjs');
 var chunkLXODKKA3_cjs = require('./chunk-LXODKKA3.cjs');
 require('./chunk-PDD4N5P5.cjs');
 var chunk5CJPTDK3_cjs = require('./chunk-5CJPTDK3.cjs');
-var chunkWWPLBWCQ_cjs = require('./chunk-WWPLBWCQ.cjs');
+var chunkM5JARVJD_cjs = require('./chunk-M5JARVJD.cjs');
 var chunkF64GE6RG_cjs = require('./chunk-F64GE6RG.cjs');
 var chunk5QSNJQVH_cjs = require('./chunk-5QSNJQVH.cjs');
 var chunk4BZKFPEC_cjs = require('./chunk-4BZKFPEC.cjs');
@@ -127,19 +127,19 @@ Object.defineProperty(exports, 'Icon', {
 });
 Object.defineProperty(exports, 'Card', {
     enumerable: true,
-    get: function () { return chunkWWPLBWCQ_cjs.d; }
+    get: function () { return chunkM5JARVJD_cjs.d; }
 });
 Object.defineProperty(exports, 'CardContent', {
     enumerable: true,
-    get: function () { return chunkWWPLBWCQ_cjs.b; }
+    get: function () { return chunkM5JARVJD_cjs.b; }
 });
 Object.defineProperty(exports, 'CardFooter', {
     enumerable: true,
-    get: function () { return chunkWWPLBWCQ_cjs.c; }
+    get: function () { return chunkM5JARVJD_cjs.c; }
 });
 Object.defineProperty(exports, 'CardTitle', {
     enumerable: true,
-    get: function () { return chunkWWPLBWCQ_cjs.a; }
+    get: function () { return chunkM5JARVJD_cjs.a; }
 });
 Object.defineProperty(exports, 'Modal', {
     enumerable: true,

package/libs/index.js

@@ -12,7 +12,7 @@ export { b as Breadcrumb, a as useBreadcrumbSegments } from './chunk-DIJBIOFE.js
 import './chunk-GCGKYLDG.js';
 import { b as b$1 } from './chunk-M7JLT62Q.js';
 export { a as Icon } from './chunk-M7JLT62Q.js';
-export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-OU52NIKA.js';
+export { d as Card, b as CardContent, c as CardFooter, a as CardTitle } from './chunk-KAR3HDXK.js';
 export { a as Modal } from './chunk-PMWL5XZ4.js';
 import { b } from './chunk-TF3GQKOY.js';
 export { a as Button } from './chunk-TF3GQKOY.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fpkit/acss",
   "description": "A lightweight React UI library for building modern and accessible components that leverage CSS custom properties for reactive Styles.",
   "private": false,
-  "version": "3.2.1",
+  "version": "3.3.0",
   "engines": {
     "node": ">=22.12.0",
     "npm": ">=8.0.0"
@@ -126,5 +126,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "460bda626ae4e23dbd203806f1d99d5616936172"
+  "gitHead": "1948e0adc68133b7c44f0ba3ffda118d8b0c1391"
 }

package/src/components/cards/card.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof Card> = {
   component: Card,
   args: {
     children: <p>{content}</p>,
-    classes: "shadow-md",
+    classes: "shadow-sm rounded-lg",
   },
   argTypes: {
     as: {

package/src/components/cards/card.tsx

@@ -1,13 +1,18 @@
-import React from 'react'
-import UI from '#components/ui'
+import React from "react";
+import UI from "#components/ui";
 import type {
   CardProps,
   CardTitleProps,
   CardContentProps,
   CardFooterProps,
   CardComponent,
-} from './card.types'
-import { cn, CARD_CLASSES, handleCardKeyDown, warnInteractiveUsage } from './card.utils'
+} from "./card.types";
+import {
+  cn,
+  CARD_CLASSES,
+  handleCardKeyDown,
+  warnInteractiveUsage,
+} from "./card.utils";
 
 /**
  * Card.Title - Title sub-component for Card
@@ -36,22 +41,22 @@ export const Title = ({
   children,
   className,
   style,
-  as = 'h3',
+  as = "h3",
   ...props
 }: CardTitleProps) => {
   return (
     <UI
       as={as}
-      className={cn(CARD_CLASSES.TITLE, className)}
+      classes={cn(CARD_CLASSES.TITLE, className)}
       styles={style}
       {...props}
     >
       {children}
     </UI>
-  )
-}
+  );
+};
 
-Title.displayName = 'Card.Title'
+Title.displayName = "Card.Title";
 
 /**
  * Card.Content - Content sub-component for Card
@@ -86,22 +91,22 @@ export const Content = ({
   children,
   className,
   style,
-  as = 'article',
+  as = "article",
   ...props
 }: CardContentProps) => {
   return (
     <UI
       as={as}
-      className={cn(CARD_CLASSES.CONTENT, className)}
+      classes={cn(CARD_CLASSES.CONTENT, className)}
       styles={style}
       {...props}
     >
       {children}
     </UI>
-  )
-}
+  );
+};
 
-Content.displayName = 'Card.Content'
+Content.displayName = "Card.Content";
 
 /**
  * Card.Footer - Footer sub-component for Card
@@ -133,22 +138,22 @@ export const Footer = ({
   children,
   className,
   style,
-  as = 'div',
+  as = "div",
   ...props
 }: CardFooterProps) => {
   return (
     <UI
       as={as}
-      className={cn(CARD_CLASSES.FOOTER, className)}
+      classes={cn(CARD_CLASSES.FOOTER, className)}
       styles={style}
       {...props}
     >
       {children}
     </UI>
-  )
-}
+  );
+};
 
-Footer.displayName = 'Card.Footer'
+Footer.displayName = "Card.Footer";
 
 /**
  * Card - A flexible, accessible card component with compound component pattern
@@ -220,35 +225,35 @@ Footer.displayName = 'Card.Footer'
  * ```
  */
 const CardRoot = ({
-  as = 'div',
+  as = "div",
   styles,
   children,
-  classes = 'shadow-sm',
+  classes = "shadow-sm",
   id,
   interactive = false,
   onClick,
   tabIndex,
   role,
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  'aria-describedby': ariaDescribedBy,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
   ...props
 }: CardProps) => {
   // Development warnings for common accessibility issues
   React.useEffect(() => {
-    warnInteractiveUsage(!!onClick, interactive)
-  }, [onClick, interactive])
+    warnInteractiveUsage(!!onClick, interactive);
+  }, [onClick, interactive]);
 
   // Interactive card handling
   const handleKeyDown = (event: React.KeyboardEvent) => {
     if (interactive || onClick) {
-      handleCardKeyDown(event, onClick)
+      handleCardKeyDown(event, onClick);
     }
-  }
+  };
 
   const interactiveProps = interactive
     ? {
-        role: role || 'button',
+        role: role || "button",
         tabIndex: tabIndex ?? 0,
         onClick,
         onKeyDown: handleKeyDown,
@@ -256,34 +261,34 @@ const CardRoot = ({
     : {
         role,
         onClick,
-      }
+      };
 
   return (
     <UI
       as={as}
       id={id}
       styles={styles}
-      className={classes}
+      classes={classes}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
-      data-card={interactive ? 'interactive' : true}
+      data-card={interactive ? "interactive" : true}
       {...interactiveProps}
       {...props}
     >
       {children}
     </UI>
-  )
-}
+  );
+};
 
 // Create compound component with proper TypeScript typing
-export const Card = CardRoot as CardComponent
-Card.displayName = 'Card'
-Card.Title = Title
-Card.Content = Content
-Card.Footer = Footer
+export const Card = CardRoot as CardComponent;
+Card.displayName = "Card";
+Card.Title = Title;
+Card.Content = Content;
+Card.Footer = Footer;
 
-export default Card
+export default Card;
 
 // Export types for external consumption
 export type {
@@ -292,4 +297,4 @@ export type {
   CardContentProps,
   CardFooterProps,
   CardComponent,
-} from './card.types'
+} from "./card.types";

package/libs/chunk-OU52NIKA.js

@@ -1,8 +0,0 @@
-import { a } from './chunk-DDSXKOUB.js';
-import p from 'react';
-
-function i(...e){return e.filter(Boolean).join(" ")}var C={CARD:"card",TITLE:"card-title",CONTENT:"card-content",FOOTER:"card-footer"};function y(e,r){r&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r(e));}var m=({children:e,className:r,style:a$1,as:o="h3",...t})=>p.createElement(a,{as:o,className:i(C.TITLE,r),styles:a$1,...t},e);m.displayName="Card.Title";var f=({children:e,className:r,style:a$1,as:o="article",...t})=>p.createElement(a,{as:o,className:i(C.CONTENT,r),styles:a$1,...t},e);f.displayName="Card.Content";var b=({children:e,className:r,style:a$1,as:o="div",...t})=>p.createElement(a,{as:o,className:i(C.FOOTER,r),styles:a$1,...t},e);b.displayName="Card.Footer";var x=({as:e="div",styles:r,children:a$1,classes:o="shadow-sm",id:t,interactive:s=!1,onClick:n,tabIndex:u,role:c,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,...N})=>(p.useEffect(()=>{},[n,s]),p.createElement(a,{as:e,id:t,styles:r,className:o,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,"data-card":s?"interactive":!0,...s?{role:c||"button",tabIndex:u??0,onClick:n,onKeyDown:v=>{(s||n)&&y(v,n);}}:{role:c,onClick:n},...N},a$1)),l=x;l.displayName="Card";l.Title=m;l.Content=f;l.Footer=b;var h=l;
-
-export { m as a, f as b, b as c, l as d, h as e };
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-OU52NIKA.js.map

package/libs/chunk-OU52NIKA.js.map

@@ -1 +0,0 @@
-{"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":"wCAAA,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,CDxBO,IAAME,EAAQ,CAAC,CACpB,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,KACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,MAAOM,CAAS,EAC3C,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,UAAWV,EAAGE,EAAa,QAASM,CAAS,EAC7C,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,UAAWV,EAAGE,EAAa,OAAQM,CAAS,EAC5C,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,UAAWf,EACX,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 { cn, CARD_CLASSES, handleCardKeyDown, warnInteractiveUsage } 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      className={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      className={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      className={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      className={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"]}

package/libs/chunk-WWPLBWCQ.cjs

@@ -1,18 +0,0 @@
-'use strict';
-
-var chunkEJ6KYBFE_cjs = require('./chunk-EJ6KYBFE.cjs');
-var p = require('react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var p__default = /*#__PURE__*/_interopDefault(p);
-
-function i(...e){return e.filter(Boolean).join(" ")}var C={CARD:"card",TITLE:"card-title",CONTENT:"card-content",FOOTER:"card-footer"};function y(e,r){r&&(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),r(e));}var m=({children:e,className:r,style:a,as:o="h3",...t})=>p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:o,className:i(C.TITLE,r),styles:a,...t},e);m.displayName="Card.Title";var f=({children:e,className:r,style:a,as:o="article",...t})=>p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:o,className:i(C.CONTENT,r),styles:a,...t},e);f.displayName="Card.Content";var b=({children:e,className:r,style:a,as:o="div",...t})=>p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:o,className:i(C.FOOTER,r),styles:a,...t},e);b.displayName="Card.Footer";var x=({as:e="div",styles:r,children:a,classes:o="shadow-sm",id:t,interactive:s=!1,onClick:n,tabIndex:u,role:c,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,...N})=>(p__default.default.useEffect(()=>{},[n,s]),p__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:e,id:t,styles:r,className:o,"aria-label":T,"aria-labelledby":E,"aria-describedby":P,"data-card":s?"interactive":!0,...s?{role:c||"button",tabIndex:u??0,onClick:n,onKeyDown:v=>{(s||n)&&y(v,n);}}:{role:c,onClick:n},...N},a)),l=x;l.displayName="Card";l.Title=m;l.Content=f;l.Footer=b;var h=l;
-
-exports.a = m;
-exports.b = f;
-exports.c = b;
-exports.d = l;
-exports.e = h;
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-WWPLBWCQ.cjs.map

package/libs/chunk-WWPLBWCQ.cjs.map

@@ -1 +0,0 @@
-{"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,CDxBO,IAAME,EAAQ,CAAC,CACpB,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,KACL,GAAGC,CACL,IAEIZ,EAAA,cAACa,EAAA,CACC,GAAIF,EACJ,UAAWV,EAAGE,EAAa,MAAOM,CAAS,EAC3C,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,UAAWV,EAAGE,EAAa,QAASM,CAAS,EAC7C,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,UAAWV,EAAGE,EAAa,OAAQM,CAAS,EAC5C,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,UAAWf,EACX,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 { cn, CARD_CLASSES, handleCardKeyDown, warnInteractiveUsage } 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      className={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      className={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      className={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      className={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"]}