@fpkit/acss 3.1.1 → 3.2.1

package/libs/chunk-OU52NIKA.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,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-43TK2ICH.js → chunk-PMWL5XZ4.js}

@@ -1,9 +1,9 @@
-import { a as a$1 } from './chunk-KVKQLRJG.js';
-import { a } from './chunk-HHLNOC5T.js';
+import { a as a$1 } from './chunk-TF3GQKOY.js';
+import { a } from './chunk-DDSXKOUB.js';
 import e from 'react';
 
 var l=({id:n,children:a$1,classes:r,modalRef:d,openOnMount:i,...t})=>e.createElement(a,{as:"dialog",id:n,classes:r,ref:d,open:i,onClick:o=>{o.currentTarget===o.target&&o.currentTarget.close();},...t},a$1);e.memo(l);l.displayName="Dialog";var u=({openChild:n,closeChild:a,modalHeader:r,modalFooter:d,children:i,showOpen:t=!1,...p})=>{let o=e.useRef(null),f=()=>{o.current&&(t?o.current.show():o.current.showModal());},M=()=>{o.current&&o.current.close();};return e.createElement(e.Fragment,null,e.createElement(l,{modalRef:o,openOnMount:t,...p},e.createElement("section",null,r,i,d??e.createElement("div",null,e.createElement(a$1,{type:"button",pointerDown:()=>{M();}},a||"Close")," "))),!t&&e.createElement(a$1,{type:"button",pointerDown:f},n||"Open Modal"))};u.displayName="Modal";
 
 export { u as a };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-43TK2ICH.js.map
+//# sourceMappingURL=chunk-PMWL5XZ4.js.map

package/libs/{chunk-KVKQLRJG.js → chunk-TF3GQKOY.js}

@@ -1,10 +1,10 @@
 import { a } from './chunk-BFK62VX5.js';
 import { a as a$1 } from './chunk-75QHTLFO.js';
-import { a as a$2 } from './chunk-HHLNOC5T.js';
+import { a as a$2 } from './chunk-DDSXKOUB.js';
 import D from 'react';
 
 var r=({type:a$3="button",children:n,styles:p,disabled:i,isDisabled:l,classes:m,onPointerDown:u,onPointerOver:d,onPointerLeave:b,onClick:P,onKeyDown:c,...y})=>{let B=a(i,l),{disabledProps:t,handlers:f}=a$1(B,{handlers:{onClick:P,onPointerDown:u,onKeyDown:c},className:m});return D.createElement(a$2,{as:"button",type:a$3,"aria-disabled":t["aria-disabled"],onPointerOver:d,onPointerLeave:b,style:p,className:t.className,...f,...y},n)};var h=r;r.displayName="Button";
 
 export { r as a, h as b };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-KVKQLRJG.js.map
+//# sourceMappingURL=chunk-TF3GQKOY.js.map

package/libs/{chunk-IEB64SWY.js → chunk-U5VA34SU.js}

@@ -1,8 +1,8 @@
-import { a as a$1 } from './chunk-HHLNOC5T.js';
+import { a as a$1 } from './chunk-DDSXKOUB.js';
 import t from 'react';
 
 var n=t.forwardRef(({type:e="li",id:s,styles:i,children:r,classes:o,...L},m)=>t.createElement(a$1,{id:s,as:e,className:o,style:i,ref:m,...L},r));n.displayName="ListItem";var a=t.forwardRef(({children:e,classes:s,type:i="ul",variant:r,styles:o,role:L,...m},l)=>t.createElement(a$1,{as:i,"data-variant":r,className:s,style:o,role:L,ref:l,...m},e));a.displayName="List";var f=Object.assign(a,{ListItem:n}),d=f;
 
 export { n as a, a as b, d as c };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-IEB64SWY.js.map
+//# sourceMappingURL=chunk-U5VA34SU.js.map

package/libs/{chunk-EE3ZWSBY.cjs → chunk-URBGDUFN.cjs}

@@ -1,18 +1,18 @@
 'use strict';
 
-var chunk2NRIP6RB_cjs = require('./chunk-2NRIP6RB.cjs');
-var chunkL6PRDL6F_cjs = require('./chunk-L6PRDL6F.cjs');
-var chunkE4OSROCA_cjs = require('./chunk-E4OSROCA.cjs');
-var chunkENTCUJ3A_cjs = require('./chunk-ENTCUJ3A.cjs');
+var chunk2C3YLBWP_cjs = require('./chunk-2C3YLBWP.cjs');
+var chunk5CJPTDK3_cjs = require('./chunk-5CJPTDK3.cjs');
+var chunk5QSNJQVH_cjs = require('./chunk-5QSNJQVH.cjs');
+var chunkEJ6KYBFE_cjs = require('./chunk-EJ6KYBFE.cjs');
 var s = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var s__default = /*#__PURE__*/_interopDefault(s);
 
-var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a=s.useCallback(()=>{o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"div",classes:"dialog-header"},s__default.default.createElement(chunk2NRIP6RB_cjs.b,{type:e,className:"dialog-title",id:l},t||"Dialog"),s__default.default.createElement(chunkE4OSROCA_cjs.b,{type:"button",onClick:a,className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},s__default.default.createElement(chunkL6PRDL6F_cjs.b,null,s__default.default.createElement(chunkL6PRDL6F_cjs.b.Remove,{size:16}))))},D=s__default.default.memo(y);y.displayName="DialogHeader";var H=({onClose:t,onConfirm:o,confirmLabel:l,cancelLabel:e})=>{let a=s.useCallback(()=>{t();},[t]),m=s.useCallback(()=>{o&&o();},[o]);return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",className:"dialog-footer"},e&&s__default.default.createElement(chunkE4OSROCA_cjs.b,{type:"button",onClick:a,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s__default.default.createElement(chunkE4OSROCA_cjs.b,{type:"button",onClick:m,className:"dialog-button button-primary","data-btn":"sm"},l))};H.displayName="DialogFooter";var I=s__default.default.memo(H);var h=(t,o)=>s.useCallback(e=>{let a=t.current?.getBoundingClientRect();a&&(e.clientY<a.top||e.clientY>a.bottom||e.clientX<a.left||e.clientX>a.right)&&o();},[t,o]);var F=({isOpen:t,onOpenChange:o,isAlertDialog:l=!1,onClose:e,dialogTitle:a,dialogLabel:m,children:P,onConfirm:U,confirmLabel:B="Confirm",cancelLabel:E="Cancel",className:M="",hideFooter:v=!1,styles:x})=>{let f=s.useRef(null),u=s.useId();s.useEffect(()=>{let r=f.current;r&&(t?l?r.show():r.showModal():r.close());},[t,l]);let c=s.useCallback(()=>{o(!1),e&&e();},[o,e]),L=h(f,c),b=s.useId();return s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"dialog",role:l?"alertdialog":"dialog",ref:f,onClose:c,onClick:L,"aria-modal":t&&!l?"true":void 0,"aria-labelledby":u,"aria-describedby":b,"aria-label":m,className:`dialog-modal ${M}`.trim(),style:x},s__default.default.createElement(D,{dialogTitle:a,onClick:c,id:u}),s__default.default.createElement(chunkENTCUJ3A_cjs.a,{as:"section",id:b,className:"dialog-content",onClick:r=>r.stopPropagation()},P,!v&&s__default.default.createElement(I,{onClose:c,onConfirm:U,confirmLabel:B,cancelLabel:E})))};F.displayName="Dialog";var ao=s__default.default.memo(F);
+var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a=s.useCallback(()=>{o();},[o]);return s__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:"div",classes:"dialog-header"},s__default.default.createElement(chunk2C3YLBWP_cjs.b,{type:e,className:"dialog-title",id:l},t||"Dialog"),s__default.default.createElement(chunk5QSNJQVH_cjs.b,{type:"button",onClick:a,className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},s__default.default.createElement(chunk5CJPTDK3_cjs.b,null,s__default.default.createElement(chunk5CJPTDK3_cjs.b.Remove,{size:16}))))},D=s__default.default.memo(y);y.displayName="DialogHeader";var H=({onClose:t,onConfirm:o,confirmLabel:l,cancelLabel:e})=>{let a=s.useCallback(()=>{t();},[t]),m=s.useCallback(()=>{o&&o();},[o]);return s__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:"section",className:"dialog-footer"},e&&s__default.default.createElement(chunk5QSNJQVH_cjs.b,{type:"button",onClick:a,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s__default.default.createElement(chunk5QSNJQVH_cjs.b,{type:"button",onClick:m,className:"dialog-button button-primary","data-btn":"sm"},l))};H.displayName="DialogFooter";var I=s__default.default.memo(H);var h=(t,o)=>s.useCallback(e=>{let a=t.current?.getBoundingClientRect();a&&(e.clientY<a.top||e.clientY>a.bottom||e.clientX<a.left||e.clientX>a.right)&&o();},[t,o]);var F=({isOpen:t,onOpenChange:o,isAlertDialog:l=!1,onClose:e,dialogTitle:a,dialogLabel:m,children:P,onConfirm:U,confirmLabel:B="Confirm",cancelLabel:E="Cancel",className:M="",hideFooter:v=!1,styles:x})=>{let f=s.useRef(null),u=s.useId();s.useEffect(()=>{let r=f.current;r&&(t?l?r.show():r.showModal():r.close());},[t,l]);let c=s.useCallback(()=>{o(!1),e&&e();},[o,e]),L=h(f,c),b=s.useId();return s__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:"dialog",role:l?"alertdialog":"dialog",ref:f,onClose:c,onClick:L,"aria-modal":t&&!l?"true":void 0,"aria-labelledby":u,"aria-describedby":b,"aria-label":m,className:`dialog-modal ${M}`.trim(),style:x},s__default.default.createElement(D,{dialogTitle:a,onClick:c,id:u}),s__default.default.createElement(chunkEJ6KYBFE_cjs.a,{as:"section",id:b,className:"dialog-content",onClick:r=>r.stopPropagation()},P,!v&&s__default.default.createElement(I,{onClose:c,onConfirm:U,confirmLabel:B,cancelLabel:E})))};F.displayName="Dialog";var ao=s__default.default.memo(F);
 
 exports.a = F;
 exports.b = ao;
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-EE3ZWSBY.cjs.map
+//# sourceMappingURL=chunk-URBGDUFN.cjs.map

package/libs/chunk-WWPLBWCQ.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 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

@@ -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,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-TPIB3RQP.js → chunk-ZF6Y7W57.js}

@@ -1,11 +1,11 @@
-import { b } from './chunk-ZFJ4U45S.js';
-import { b as b$2 } from './chunk-MPTMPBFT.js';
-import { b as b$1 } from './chunk-KVKQLRJG.js';
-import { a } from './chunk-HHLNOC5T.js';
+import { b } from './chunk-KDMX3FAW.js';
+import { b as b$2 } from './chunk-M7JLT62Q.js';
+import { b as b$1 } from './chunk-TF3GQKOY.js';
+import { a } from './chunk-DDSXKOUB.js';
 import s, { useCallback, useRef, useId, useEffect } from 'react';
 
 var y=({dialogTitle:t,onClick:o,id:l,type:e="h3"})=>{let a$1=useCallback(()=>{o();},[o]);return s.createElement(a,{as:"div",classes:"dialog-header"},s.createElement(b,{type:e,className:"dialog-title",id:l},t||"Dialog"),s.createElement(b$1,{type:"button",onClick:a$1,className:"dialog-close","aria-label":"Close dialog","data-btn":"icon"},s.createElement(b$2,null,s.createElement(b$2.Remove,{size:16}))))},D=s.memo(y);y.displayName="DialogHeader";var H=({onClose:t,onConfirm:o,confirmLabel:l,cancelLabel:e})=>{let a$1=useCallback(()=>{t();},[t]),m=useCallback(()=>{o&&o();},[o]);return s.createElement(a,{as:"section",className:"dialog-footer"},e&&s.createElement(b$1,{type:"button",onClick:a$1,className:"dialog-button button-secondary","data-btn":"sm"},e),o&&s.createElement(b$1,{type:"button",onClick:m,className:"dialog-button button-primary","data-btn":"sm"},l))};H.displayName="DialogFooter";var I=s.memo(H);var h=(t,o)=>useCallback(e=>{let a=t.current?.getBoundingClientRect();a&&(e.clientY<a.top||e.clientY>a.bottom||e.clientX<a.left||e.clientX>a.right)&&o();},[t,o]);var F=({isOpen:t,onOpenChange:o,isAlertDialog:l=!1,onClose:e,dialogTitle:a$1,dialogLabel:m,children:P,onConfirm:U,confirmLabel:B="Confirm",cancelLabel:E="Cancel",className:M="",hideFooter:v=!1,styles:x})=>{let f=useRef(null),u=useId();useEffect(()=>{let r=f.current;r&&(t?l?r.show():r.showModal():r.close());},[t,l]);let c=useCallback(()=>{o(!1),e&&e();},[o,e]),L=h(f,c),b=useId();return s.createElement(a,{as:"dialog",role:l?"alertdialog":"dialog",ref:f,onClose:c,onClick:L,"aria-modal":t&&!l?"true":void 0,"aria-labelledby":u,"aria-describedby":b,"aria-label":m,className:`dialog-modal ${M}`.trim(),style:x},s.createElement(D,{dialogTitle:a$1,onClick:c,id:u}),s.createElement(a,{as:"section",id:b,className:"dialog-content",onClick:r=>r.stopPropagation()},P,!v&&s.createElement(I,{onClose:c,onConfirm:U,confirmLabel:B,cancelLabel:E})))};F.displayName="Dialog";var ao=s.memo(F);
 
 export { F as a, ao as b };
 //# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-TPIB3RQP.js.map
+//# sourceMappingURL=chunk-ZF6Y7W57.js.map

package/libs/component-props-50e69975.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode, CSSProperties } from 'react';
+
+/**
+ * Base component props interface for all fpkit components.
+ *
+ * Provides common props for styling, children, and component behavior that can be
+ * safely spread onto DOM elements.
+ *
+ * **Note on Refs:** This interface intentionally does not include a `ref` prop.
+ * Refs should be handled explicitly using `React.forwardRef` rather than being
+ * spread with other props, which ensures proper type safety and follows React best practices.
+ *
+ * @typeParam T - Reserved for future use (currently unused). The generic parameter
+ *                is maintained for backward compatibility with existing component interfaces.
+ *
+ * @example
+ * // Basic usage
+ * interface ModalProps extends ComponentProps {
+ *   openChild?: React.ReactNode;
+ *   onClose?: () => void;
+ * }
+ *
+ * @example
+ * // With forwardRef for proper ref handling
+ * interface ButtonProps extends ComponentProps {
+ *   variant: 'primary' | 'secondary';
+ * }
+ *
+ * const MyButton = forwardRef<HTMLButtonElement, ButtonProps>(
+ *   ({ variant, ...props }, ref) => {
+ *     return <button ref={ref} {...props} />;
+ *   }
+ * );
+ */
+interface ComponentProps<T = HTMLElement> {
+    /**
+     * The default child content/component to render.
+     */
+    children?: ReactNode;
+    /**
+     * Use default component styles
+     */
+    renderStyles?: boolean;
+    /**
+     * Component id attribute
+     */
+    id?: string;
+    /**
+     * Styles object
+     */
+    styles?: CSSProperties;
+    /**
+     * Default styles object
+     */
+    defaultStyles?: CSSProperties;
+    /**
+     * Component class attribute
+     */
+    classes?: string;
+    /**
+     * Style value for [data-style] attribute
+     */
+    dataStyle?: string;
+}
+
+export { ComponentProps as C };

package/libs/components/box/box.css

@@ -0,0 +1 @@
+.box-padding-0{padding:0}.box-padding-xs{padding:var(--spacing-xs)}.box-padding-sm{padding:var(--spacing-sm)}.box-padding-md{padding:var(--spacing-md)}.box-padding-lg{padding:var(--spacing-lg)}.box-padding-xl{padding:var(--spacing-xl)}.box-padding-inline-0{padding-inline:0}.box-padding-inline-xs{padding-inline:var(--spacing-xs)}.box-padding-inline-sm{padding-inline:var(--spacing-sm)}.box-padding-inline-md{padding-inline:var(--spacing-md)}.box-padding-inline-lg{padding-inline:var(--spacing-lg)}.box-padding-inline-xl{padding-inline:var(--spacing-xl)}.box-padding-block-0{padding-block:0}.box-padding-block-xs{padding-block:var(--spacing-xs)}.box-padding-block-sm{padding-block:var(--spacing-sm)}.box-padding-block-md{padding-block:var(--spacing-md)}.box-padding-block-lg{padding-block:var(--spacing-lg)}.box-padding-block-xl{padding-block:var(--spacing-xl)}.box-margin-0{margin:0}.box-margin-xs{margin:var(--spacing-xs)}.box-margin-sm{margin:var(--spacing-sm)}.box-margin-md{margin:var(--spacing-md)}.box-margin-lg{margin:var(--spacing-lg)}.box-margin-xl{margin:var(--spacing-xl)}.box-margin-inline-0{margin-inline:0}.box-margin-inline-xs{margin-inline:var(--spacing-xs)}.box-margin-inline-sm{margin-inline:var(--spacing-sm)}.box-margin-inline-md{margin-inline:var(--spacing-md)}.box-margin-inline-lg{margin-inline:var(--spacing-lg)}.box-margin-inline-xl{margin-inline:var(--spacing-xl)}.box-margin-block-0{margin-block:0}.box-margin-block-xs{margin-block:var(--spacing-xs)}.box-margin-block-sm{margin-block:var(--spacing-sm)}.box-margin-block-md{margin-block:var(--spacing-md)}.box-margin-block-lg{margin-block:var(--spacing-lg)}.box-margin-block-xl{margin-block:var(--spacing-xl)}.box-width-auto{width:auto}.box-width-full{width:100%}.box-width-fit{width:fit-content}.box-width-max{width:max-content}.box-max-width-xs{max-width:var(--box-max-width-xs)}.box-max-width-sm{max-width:var(--box-max-width-sm)}.box-max-width-md{max-width:var(--box-max-width-md)}.box-max-width-lg{max-width:var(--box-max-width-lg)}.box-max-width-xl{max-width:var(--box-max-width-xl)}.box-max-width-container{max-width:var(--box-max-width-container)}.box-radius-0{border-radius:0}.box-radius-xs{border-radius:var(--box-radius-xs)}.box-radius-sm{border-radius:var(--box-radius-sm)}.box-radius-md{border-radius:var(--box-radius-md)}.box-radius-lg{border-radius:var(--box-radius-lg)}.box-radius-xl{border-radius:var(--box-radius-xl)}.box-radius-full{border-radius:var(--box-radius-full)}/*# sourceMappingURL=box.css.map */

package/libs/components/box/box.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/components/box/box.scss"],"names":[],"mappings":"AAaA,eACE,UAGF,gBACE,0BAGF,gBACE,0BAGF,gBACE,0BAGF,gBACE,0BAGF,gBACE,0BAIF,sBACE,iBAGF,uBACE,iCAGF,uBACE,iCAGF,uBACE,iCAGF,uBACE,iCAGF,uBACE,iCAIF,qBACE,gBAGF,sBACE,gCAGF,sBACE,gCAGF,sBACE,gCAGF,sBACE,gCAGF,sBACE,gCAQF,cACE,SAGF,eACE,yBAGF,eACE,yBAGF,eACE,yBAGF,eACE,yBAGF,eACE,yBAIF,qBACE,gBAGF,sBACE,gCAGF,sBACE,gCAGF,sBACE,gCAGF,sBACE,gCAGF,sBACE,gCAIF,oBACE,eAGF,qBACE,+BAGF,qBACE,+BAGF,qBACE,+BAGF,qBACE,+BAGF,qBACE,+BAOF,gBACE,WAGF,gBACE,WAGF,eACE,kBAGF,eACE,kBAOF,kBACE,kCAGF,kBACE,kCAGF,kBACE,kCAGF,kBACE,kCAGF,kBACE,kCAGF,yBACE,yCAOF,cACE,gBAGF,eACE,mCAGF,eACE,mCAGF,eACE,mCAGF,eACE,mCAGF,eACE,mCAGF,iBACE","file":"box.css"}

package/libs/components/box/box.min.css

@@ -0,0 +1,3 @@
+.box-padding-0{padding:0}.box-padding-xs{padding:var(--spacing-xs)}.box-padding-sm{padding:var(--spacing-sm)}.box-padding-md{padding:var(--spacing-md)}.box-padding-lg{padding:var(--spacing-lg)}.box-padding-xl{padding:var(--spacing-xl)}.box-padding-inline-0{padding-inline:0}.box-padding-inline-xs{padding-inline:var(--spacing-xs)}.box-padding-inline-sm{padding-inline:var(--spacing-sm)}.box-padding-inline-md{padding-inline:var(--spacing-md)}.box-padding-inline-lg{padding-inline:var(--spacing-lg)}.box-padding-inline-xl{padding-inline:var(--spacing-xl)}.box-padding-block-0{padding-block:0}.box-padding-block-xs{padding-block:var(--spacing-xs)}.box-padding-block-sm{padding-block:var(--spacing-sm)}.box-padding-block-md{padding-block:var(--spacing-md)}.box-padding-block-lg{padding-block:var(--spacing-lg)}.box-padding-block-xl{padding-block:var(--spacing-xl)}.box-margin-0{margin:0}.box-margin-xs{margin:var(--spacing-xs)}.box-margin-sm{margin:var(--spacing-sm)}.box-margin-md{margin:var(--spacing-md)}.box-margin-lg{margin:var(--spacing-lg)}.box-margin-xl{margin:var(--spacing-xl)}.box-margin-inline-0{margin-inline:0}.box-margin-inline-xs{margin-inline:var(--spacing-xs)}.box-margin-inline-sm{margin-inline:var(--spacing-sm)}.box-margin-inline-md{margin-inline:var(--spacing-md)}.box-margin-inline-lg{margin-inline:var(--spacing-lg)}.box-margin-inline-xl{margin-inline:var(--spacing-xl)}.box-margin-block-0{margin-block:0}.box-margin-block-xs{margin-block:var(--spacing-xs)}.box-margin-block-sm{margin-block:var(--spacing-sm)}.box-margin-block-md{margin-block:var(--spacing-md)}.box-margin-block-lg{margin-block:var(--spacing-lg)}.box-margin-block-xl{margin-block:var(--spacing-xl)}.box-width-auto{width:auto}.box-width-full{width:100%}.box-width-fit{width:-moz-fit-content;width:fit-content}.box-width-max{width:-moz-max-content;width:max-content}.box-max-width-xs{max-width:var(--box-max-width-xs)}.box-max-width-sm{max-width:var(--box-max-width-sm)}.box-max-width-md{max-width:var(--box-max-width-md)}.box-max-width-lg{max-width:var(--box-max-width-lg)}.box-max-width-xl{max-width:var(--box-max-width-xl)}.box-max-width-container{max-width:var(--box-max-width-container)}.box-radius-0{border-radius:0}.box-radius-xs{border-radius:var(--box-radius-xs)}.box-radius-sm{border-radius:var(--box-radius-sm)}.box-radius-md{border-radius:var(--box-radius-md)}.box-radius-lg{border-radius:var(--box-radius-lg)}.box-radius-xl{border-radius:var(--box-radius-xl)}.box-radius-full{border-radius:var(--box-radius-full)}
+
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2JveC9ib3guc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhQSxlQUNFLFNBQUEsQ0FHRixnQkFDRSx5QkFBQSxDQUdGLGdCQUNFLHlCQUFBLENBR0YsZ0JBQ0UseUJBQUEsQ0FHRixnQkFDRSx5QkFBQSxDQUdGLGdCQUNFLHlCQUFBLENBSUYsc0JBQ0UsZ0JBQUEsQ0FHRix1QkFDRSxnQ0FBQSxDQUdGLHVCQUNFLGdDQUFBLENBR0YsdUJBQ0UsZ0NBQUEsQ0FHRix1QkFDRSxnQ0FBQSxDQUdGLHVCQUNFLGdDQUFBLENBSUYscUJBQ0UsZUFBQSxDQUdGLHNCQUNFLCtCQUFBLENBR0Ysc0JBQ0UsK0JBQUEsQ0FHRixzQkFDRSwrQkFBQSxDQUdGLHNCQUNFLCtCQUFBLENBR0Ysc0JBQ0UsK0JBQUEsQ0FRRixjQUNFLFFBQUEsQ0FHRixlQUNFLHdCQUFBLENBR0YsZUFDRSx3QkFBQSxDQUdGLGVBQ0Usd0JBQUEsQ0FHRixlQUNFLHdCQUFBLENBR0YsZUFDRSx3QkFBQSxDQUlGLHFCQUNFLGVBQUEsQ0FHRixzQkFDRSwrQkFBQSxDQUdGLHNCQUNFLCtCQUFBLENBR0Ysc0JBQ0UsK0JBQUEsQ0FHRixzQkFDRSwrQkFBQSxDQUdGLHNCQUNFLCtCQUFBLENBSUYsb0JBQ0UsY0FBQSxDQUdGLHFCQUNFLDhCQUFBLENBR0YscUJBQ0UsOEJBQUEsQ0FHRixxQkFDRSw4QkFBQSxDQUdGLHFCQUNFLDhCQUFBLENBR0YscUJBQ0UsOEJBQUEsQ0FPRixnQkFDRSxVQUFBLENBR0YsZ0JBQ0UsVUFBQSxDQUdGLGVBQ0Usc0JBQUEsQ0FBQSxpQkFBQSxDQUdGLGVBQ0Usc0JBQUEsQ0FBQSxpQkFBQSxDQU9GLGtCQUNFLGlDQUFBLENBR0Ysa0JBQ0UsaUNBQUEsQ0FHRixrQkFDRSxpQ0FBQSxDQUdGLGtCQUNFLGlDQUFBLENBR0Ysa0JBQ0UsaUNBQUEsQ0FHRix5QkFDRSx3Q0FBQSxDQU9GLGNBQ0UsZUFBQSxDQUdGLGVBQ0Usa0NBQUEsQ0FHRixlQUNFLGtDQUFBLENBR0YsZUFDRSxrQ0FBQSxDQUdGLGVBQ0Usa0NBQUEsQ0FHRixlQUNFLGtDQUFBLENBR0YsaUJBQ0Usb0NBQUEiLCJmaWxlIjoiYm94Lm1pbi5jc3MifQ== */

package/libs/components/breadcrumbs/breadcrumb.cjs

@@ -2,23 +2,23 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkDYFAUAB7_cjs = require('../../chunk-DYFAUAB7.cjs');
-require('../../chunk-NWJDAHP6.cjs');
-require('../../chunk-ENTCUJ3A.cjs');
+var chunkLXODKKA3_cjs = require('../../chunk-LXODKKA3.cjs');
+require('../../chunk-2GJHKWEK.cjs');
+require('../../chunk-EJ6KYBFE.cjs');
 
 
 
 Object.defineProperty(exports, 'Breadcrumb', {
 	enumerable: true,
-	get: function () { return chunkDYFAUAB7_cjs.b; }
+	get: function () { return chunkLXODKKA3_cjs.b; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkDYFAUAB7_cjs.c; }
+	get: function () { return chunkLXODKKA3_cjs.c; }
 });
 Object.defineProperty(exports, 'useBreadcrumbSegments', {
 	enumerable: true,
-	get: function () { return chunkDYFAUAB7_cjs.a; }
+	get: function () { return chunkLXODKKA3_cjs.a; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=breadcrumb.cjs.map

package/libs/components/breadcrumbs/breadcrumb.js

@@ -1,5 +1,5 @@
-export { b as Breadcrumb, c as default, a as useBreadcrumbSegments } from '../../chunk-CWRNJA4P.js';
-import '../../chunk-5RAWNUVD.js';
-import '../../chunk-HHLNOC5T.js';
+export { b as Breadcrumb, c as default, a as useBreadcrumbSegments } from '../../chunk-DIJBIOFE.js';
+import '../../chunk-IBUTNPTQ.js';
+import '../../chunk-DDSXKOUB.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=breadcrumb.js.map

package/libs/components/button.cjs

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var chunkE4OSROCA_cjs = require('../chunk-E4OSROCA.cjs');
+var chunk5QSNJQVH_cjs = require('../chunk-5QSNJQVH.cjs');
 require('../chunk-PNWIRCG3.cjs');
 require('../chunk-TON2YGMD.cjs');
-require('../chunk-ENTCUJ3A.cjs');
+require('../chunk-EJ6KYBFE.cjs');
 
 
 
 Object.defineProperty(exports, 'Button', {
 	enumerable: true,
-	get: function () { return chunkE4OSROCA_cjs.a; }
+	get: function () { return chunk5QSNJQVH_cjs.a; }
 });
 Object.defineProperty(exports, 'default', {
 	enumerable: true,
-	get: function () { return chunkE4OSROCA_cjs.b; }
+	get: function () { return chunk5QSNJQVH_cjs.b; }
 });
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=button.cjs.map

package/libs/components/button.d.cts

@@ -1,5 +1,12 @@
 import { U as UI } from '../ui-d01b50d4.js';
-import React$1 from 'react';
+import React from 'react';
+
+/**
+ * Import ComponentProps from the canonical definition.
+ * This ensures a single source of truth for the interface.
+ *
+ * @see {@link ./component-props.ts} for the full interface definition with generic type support
+ */
 
 /**
  * Props for disabled state management across components.
@@ -41,7 +48,7 @@ interface DisabledStateProps {
     isDisabled?: boolean;
 }
 
-type ButtonProps = Partial<React$1.ComponentProps<typeof UI>> & DisabledStateProps & {
+type ButtonProps = Partial<React.ComponentProps<typeof UI>> & DisabledStateProps & {
     /**
      * The button type
      * Required - 'button' | 'submit' | 'reset'
@@ -102,7 +109,7 @@ type ButtonProps = Partial<React$1.ComponentProps<typeof UI>> & DisabledStatePro
  * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}
  */
 declare const Button: {
-    ({ type, children, styles, disabled, isDisabled, classes, onPointerDown, onPointerOver, onPointerLeave, onClick, onKeyDown, ...props }: ButtonProps): React$1.JSX.Element;
+    ({ type, children, styles, disabled, isDisabled, classes, onPointerDown, onPointerOver, onPointerLeave, onClick, onKeyDown, ...props }: ButtonProps): React.JSX.Element;
     displayName: string;
 };
 

package/libs/components/button.d.ts

@@ -1,5 +1,12 @@
 import { U as UI } from '../ui-d01b50d4.js';
-import React$1 from 'react';
+import React from 'react';
+
+/**
+ * Import ComponentProps from the canonical definition.
+ * This ensures a single source of truth for the interface.
+ *
+ * @see {@link ./component-props.ts} for the full interface definition with generic type support
+ */
 
 /**
  * Props for disabled state management across components.
@@ -41,7 +48,7 @@ interface DisabledStateProps {
     isDisabled?: boolean;
 }
 
-type ButtonProps = Partial<React$1.ComponentProps<typeof UI>> & DisabledStateProps & {
+type ButtonProps = Partial<React.ComponentProps<typeof UI>> & DisabledStateProps & {
     /**
      * The button type
      * Required - 'button' | 'submit' | 'reset'
@@ -102,7 +109,7 @@ type ButtonProps = Partial<React$1.ComponentProps<typeof UI>> & DisabledStatePro
  * @see {@link file://./../../hooks/useDisabledState.md useDisabledState Hook Documentation}
  */
 declare const Button: {
-    ({ type, children, styles, disabled, isDisabled, classes, onPointerDown, onPointerOver, onPointerLeave, onClick, onKeyDown, ...props }: ButtonProps): React$1.JSX.Element;
+    ({ type, children, styles, disabled, isDisabled, classes, onPointerDown, onPointerOver, onPointerLeave, onClick, onKeyDown, ...props }: ButtonProps): React.JSX.Element;
     displayName: string;
 };
 

package/libs/components/button.js

@@ -1,6 +1,6 @@
-export { a as Button, b as default } from '../chunk-KVKQLRJG.js';
+export { a as Button, b as default } from '../chunk-TF3GQKOY.js';
 import '../chunk-BFK62VX5.js';
 import '../chunk-75QHTLFO.js';
-import '../chunk-HHLNOC5T.js';
+import '../chunk-DDSXKOUB.js';
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=button.js.map

package/libs/components/card.cjs

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

package/libs/components/card.d.cts

@@ -57,6 +57,18 @@ interface CardFooterProps extends CardSubComponentProps {
      */
     as?: 'div' | 'footer';
 }
+/**
+ * Type for Card component with attached sub-components.
+ *
+ * This type ensures TypeScript recognizes Card.Title, Card.Content, and Card.Footer
+ * as valid properties on the Card component.
+ */
+interface CardComponent extends React.FC<CardProps> {
+    Title: React.FC<CardTitleProps>;
+    Content: React.FC<CardContentProps>;
+    Footer: React.FC<CardFooterProps>;
+    displayName: string;
+}
 /**
  * Props for the main Card component.
  *
@@ -213,90 +225,6 @@ declare const Footer: {
     ({ children, className, style, as, ...props }: CardFooterProps): React.JSX.Element;
     displayName: string;
 };
-/**
- * Card - A flexible, accessible card component with compound component pattern
- *
- * The Card component provides a container for grouping related content and actions.
- * It follows the compound component pattern, exposing `Card.Title`, `Card.Content`,
- * and `Card.Footer` sub-components for structured layouts.
- *
- * ## Features
- * - **Polymorphic rendering**: Render as any HTML element via `as` prop
- * - **Compound components**: Structured sub-components for consistent layouts
- * - **Interactive variant**: Built-in keyboard navigation and ARIA support
- * - **Fully accessible**: WCAG 2.1 AA compliant with proper semantic HTML
- *
- * ## Accessibility
- *
- * ### Non-Interactive Cards
- * - Use semantic HTML: `article` for standalone content, `section` for groupings
- * - Provide accessible names with `aria-labelledby` referencing the title
- *
- * ### Interactive Cards (Clickable)
- * - Set `interactive={true}` to enable keyboard navigation (Enter/Space)
- * - Provide accessible name via `aria-label` or `aria-labelledby`
- * - Ensure adequate focus indicators (handled by CSS)
- *
- * @example
- * // Basic card with compound components
- * ```tsx
- * <Card>
- *   <Card.Title>Product Name</Card.Title>
- *   <Card.Content>
- *     <p>Product description goes here...</p>
- *   </Card.Content>
- *   <Card.Footer>
- *     <button>Buy Now</button>
- *   </Card.Footer>
- * </Card>
- * ```
- *
- * @example
- * // Accessible interactive card
- * ```tsx
- * <Card
- *   interactive
- *   aria-label="View product details"
- *   onClick={() => navigate('/product/123')}
- * >
- *   <Card.Title>Product Name</Card.Title>
- *   <Card.Content>Click anywhere to view details</Card.Content>
- * </Card>
- * ```
- *
- * @example
- * // Semantic article card with accessible name
- * ```tsx
- * <Card as="article" aria-labelledby="article-title">
- *   <Card.Title id="article-title">Article Headline</Card.Title>
- *   <Card.Content>Article body...</Card.Content>
- * </Card>
- * ```
- *
- * @example
- * // Card as a landmark region
- * ```tsx
- * <Card role="region" aria-label="Featured products">
- *   <Card.Title>Featured</Card.Title>
- *   <Card.Content>...</Card.Content>
- * </Card>
- * ```
- */
-declare const Card: {
-    ({ as, styles, children, classes, id, interactive, onClick, tabIndex, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: CardProps): React.JSX.Element;
-    displayName: string;
-    Title: {
-        ({ children, className, style, as, ...props }: CardTitleProps): React.JSX.Element;
-        displayName: string;
-    };
-    Content: {
-        ({ children, className, style, as, ...props }: CardContentProps): React.JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ children, className, style, as, ...props }: CardFooterProps): React.JSX.Element;
-        displayName: string;
-    };
-};
+declare const Card: CardComponent;
 
 export { Card, CardProps, Content, Footer, Title, Card as default };