@fpkit/acss 0.5.11 → 0.5.13

package/libs/components/buttons/button.min.css

@@ -1,3 +1,3 @@
-button{--btn-xs: 0.7rem;--btn-sm: 0.8rem;--btn-md: 0.95rem;--btn-lg: 1.3125rem;--btn-pill: 100rem;--btn-height: 1.8rem;--fs: 0.95rem;--btn-fs: 0.9375rem;--btn-bg: lightgray;--btn-width: max-content;--btn-calc-height: var(--btn-height, calc(36rem / 16));font-size:var(--btn-fs);font-weight:var(--btn-fw, 500);height:var(--btn-height, 1.55rem);max-height:var(--btn-calc-height);min-height:.8rem;place-items:var(--btn-place, center);padding-inline:var(--btn-px, calc(var(--btn-fs) + 1.1%));padding-block:var(--btn-py, calc(var(--btn-fs) + 0.75%));border:var(--btn-bdr, none);border-radius:var(--btn-rds, 0.375rem);-webkit-text-decoration:var(--btn-deco, none);text-decoration:var(--btn-deco, none);color:var(--btn-cl, currentColor);display:var(--btn-dsp, inline-flex);gap:var(--btn-gap, 0.2rem);white-space:var(--btn-wspc, inherit);margin:var(--btn-spc, 0);transition:var(--tran-all);background-color:var(--btn-bg, var(--btn));outline:none;width:var(--btn-width);display:inline-flex;align-items:center;line-height:0cap}button[type]{background-color:var(--btn-bg, var(--neutral-300));--btn-bdr: solid var(--btn-sg)}button[type=submit],button[style*=submit]{--btn-bg: var(--primary-500, royal-blue);--btn-color: white}button[disabled],button[aria-disabled=true]{cursor:var(--btn-cursor, not-allowed)}button[disabled]:is(:hover,:focus),button[aria-disabled=true]:is(:hover,:focus){transform:none}button:is(:hover,:focus){background-color:var(--btn-bg, var(--btn, lightgray));filter:invert(1) hue-rotate 180deg;transform:scale(0.95) var(--line-style, solid);outline-offset:var(--line-offset, 1px)}button:is(:hover,:focus)[aria-disabled=true]{transform:none;opacity:var(--btn-opacity, 0.5)}button[type=reset]{--btn-bg: transparent;--btn-color: gray;--btn-bdr: gray thin solid}button[type=submit]{--btn-bg: var(--primary-700, blue);--btn-cl: #fff;--btn-color: rgb(231, 231, 231);--btn-border: none}button[data-fp-btn~=pill],button[data-btn~=pill],button[data-style~=pill]{border-radius:var(--btn-pill, 100rem)}button[data-btn~=xs]{padding-inline:var(--btn-xs);--btn-fs: var(--btn-xs);--btn-height: 0.5rem;text-transform:uppercase}button[data-btn~=sm]{--btn-fs: var(--btn-sm);--btn-height: 0.8rem}button[data-btn~=md]{--btn-fs: var(--btn-md);--btn-height: 1.3rem}button[data-btn~=lg]{--btn-fs: var(--btn-lg);--btn-height: 1.8rem}button[data-btn~=icon]{padding:unset;height:unset;--btn-bg: transparent;min-width:1.5rem;min-height:1.5rem;text-align:center;display:inline-flex;align-items:center;justify-content:center}button[data-btn~=text]{--btn-bg: transparent;--btn-cl: currentColor;--btn-bdr: none;--btn-height: unset;--btn-width: unset;--btn-py: 0.75rem;--btn-px: 0.75rem}button[data-btn~=text]:is(:hover,:focus){background-color:rgba(0,0,0,0);outline:.07rem solid var(--btn-cl);outline-offset:0}
+button{--btn-xs: 0.6875rem;--btn-sm: 0.8125rem;--btn-md: 0.9375rem;--btn-lg: 1.125rem;--btn-pill: 100rem;--btn-fs: var(--btn-md);--btn-height: calc(var(--btn-fs) * 2.25);--btn-bg: lightgray;--btn-width: max-content;font-size:var(--btn-fs);font-weight:var(--btn-fw, 500);height:var(--btn-height);place-items:var(--btn-place, center);padding-inline:var(--btn-px, calc(var(--btn-fs) * 1.5));padding-block:var(--btn-py, calc(var(--btn-fs) * 0.5));border:var(--btn-bdr, none);border-radius:var(--btn-rds, 0.375rem);-webkit-text-decoration:var(--btn-deco, none);text-decoration:var(--btn-deco, none);color:var(--btn-cl, currentColor);display:var(--btn-dsp, inline-flex);gap:var(--btn-gap, 0.2rem);white-space:var(--btn-wspc, inherit);margin:var(--btn-spc, 0);transition:var(--btn-transition, var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1)));background-color:var(--btn-bg, var(--btn));outline:none;width:var(--btn-width);display:inline-flex;align-items:center;line-height:0cap}button[type]{background-color:var(--btn-bg, var(--neutral-300));--btn-bdr: solid var(--btn-sg)}button[type=submit],button[style*=submit]{--btn-bg: var(--primary-500, royal-blue);--btn-color: white}button[disabled],button[aria-disabled=true]{cursor:var(--btn-cursor, not-allowed)}button[disabled]:is(:hover,:focus),button[aria-disabled=true]:is(:hover,:focus){transform:none}button:is(:hover,:focus){filter:var(--btn-hover-filter, brightness(0.85));transform:var(--btn-hover-transform, scale(1.03));outline:var(--btn-hover-outline, thin);outline-offset:var(--line-offset, 1px)}button:is(:hover,:focus)[aria-disabled=true]{transform:none;opacity:var(--btn-opacity, 0.5);filter:none}button[type=reset]{--btn-bg: transparent;--btn-color: gray;--btn-bdr: gray thin solid}button[type=submit]{--btn-bg: var(--primary-700, blue);--btn-cl: #fff;--btn-color: rgb(231, 231, 231);--btn-border: none}button[data-fp-btn~=pill],button[data-btn~=pill],button[data-style~=pill]{border-radius:var(--btn-pill, 100rem)}button[data-btn~=xs],button .btn-xs{--btn-fs: var(--btn-xs);text-transform:uppercase}button[data-btn~=sm],button .btn-sm{--btn-fs: var(--btn-sm)}button[data-btn~=md],button .btn-md{--btn-fs: var(--btn-md)}button[data-btn~=lg],button .btn-lg{--btn-fs: var(--btn-lg)}button[data-btn~=icon],button .btn-icon{padding:unset;height:unset;--btn-bg: transparent;min-width:1.5rem;min-height:1.5rem;text-align:center;display:inline-flex;align-items:center;justify-content:center}button[data-btn~=text],button .btn-text{--btn-bg: transparent;--btn-cl: currentColor;--btn-bdr: none;--btn-height: unset;--btn-width: unset;--btn-py: 0.75rem;--btn-px: 0.75rem}button[data-btn~=text]:is(:hover,:focus),button .btn-text:is(:hover,:focus){background-color:color-mix(in srgb, var(--btn-cl) 10%, transparent);outline:.025rem solid var(--btn-cl);outline-offset:0;filter:none}
 
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbnMvYnV0dG9uLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FDRSxnQkFBQSxDQUNBLGdCQUFBLENBQ0EsaUJBQUEsQ0FDQSxtQkFBQSxDQUNBLGtCQUFBLENBQ0Esb0JBQUEsQ0FDQSxhQUFBLENBQ0EsbUJBQUEsQ0FDQSxtQkFBQSxDQUNBLHdCQUFBLENBQ0Esc0RBQUEsQ0FFQSx1QkFBQSxDQUNBLDhCQUFBLENBQ0EsaUNBQUEsQ0FDQSxpQ0FBQSxDQUNBLGdCQUFBLENBQ0Esb0NBQUEsQ0FDQSx3REFBQSxDQUNBLHdEQUFBLENBQ0EsMkJBQUEsQ0FDQSxzQ0FBQSxDQUNBLDZDQUFBLENBQUEscUNBQUEsQ0FDQSxpQ0FBQSxDQUNBLG1DQUFBLENBQ0EsMEJBQUEsQ0FDQSxvQ0FBQSxDQUNBLHdCQUFBLENBQ0EsMEJBQUEsQ0FDQSwwQ0FBQSxDQUNBLFlBQUEsQ0FDQSxzQkFBQSxDQUNBLG1CQUFBLENBQ0Esa0JBQUEsQ0FDQSxnQkFBQSxDQUVBLGFBQ0Usa0RBQUEsQ0FDQSw4QkFBQSxDQUdGLDBDQUVFLHdDQUFBLENBQ0Esa0JBQUEsQ0FHRiw0Q0FFRSxxQ0FBQSxDQUdBLGdGQUNFLGNBQUEsQ0FPSix5QkFFRSxxREFBQSxDQUNBLGtDQUFBLENBQ0EsOENBQUEsQ0FDQSxzQ0FBQSxDQUVBLDZDQUNFLGNBQUEsQ0FDQSwrQkFBQSxDQUlKLG1CQUNFLHFCQUFBLENBQ0EsaUJBQUEsQ0FDQSwwQkFBQSxDQUdGLG9CQUNFLGtDQUFBLENBQ0EsY0FBQSxDQUNBLCtCQUFBLENBQ0Esa0JBQUEsQ0FHRiwwRUFHRSxxQ0FBQSxDQUdGLHFCQUNFLDRCQUFBLENBQ0EsdUJBQUEsQ0FDQSxvQkFBQSxDQUNBLHdCQUFBLENBR0YscUJBQ0UsdUJBQUEsQ0FDQSxvQkFBQSxDQUdGLHFCQUNFLHVCQUFBLENBQ0Esb0JBQUEsQ0FHRixxQkFDRSx1QkFBQSxDQUNBLG9CQUFBLENBR0YsdUJBQ0UsYUFBQSxDQUNBLFlBQUEsQ0FDQSxxQkFBQSxDQUNBLGdCQUFBLENBQ0EsaUJBQUEsQ0FDQSxpQkFBQSxDQUNBLG1CQUFBLENBQ0Esa0JBQUEsQ0FDQSxzQkFBQSxDQUdGLHVCQUNFLHFCQUFBLENBQ0Esc0JBQUEsQ0FDQSxlQUFBLENBQ0EsbUJBQUEsQ0FDQSxrQkFBQSxDQUNBLGlCQUFBLENBQ0EsaUJBQUEsQ0FDQSx5Q0FDRSw4QkFBQSxDQUNBLGtDQUFBLENBQ0EsZ0JBQUEiLCJmaWxlIjoiYnV0dG9uLm1pbi5jc3MifQ== */
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbnMvYnV0dG9uLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FDRSxtQkFBQSxDQUNBLG1CQUFBLENBQ0EsbUJBQUEsQ0FDQSxrQkFBQSxDQUNBLGtCQUFBLENBQ0EsdUJBQUEsQ0FDQSx3Q0FBQSxDQUNBLG1CQUFBLENBQ0Esd0JBQUEsQ0FFQSx1QkFBQSxDQUNBLDhCQUFBLENBQ0Esd0JBQUEsQ0FDQSxvQ0FBQSxDQUNBLHVEQUFBLENBQ0Esc0RBQUEsQ0FDQSwyQkFBQSxDQUNBLHNDQUFBLENBQ0EsNkNBQUEsQ0FBQSxxQ0FBQSxDQUNBLGlDQUFBLENBQ0EsbUNBQUEsQ0FDQSwwQkFBQSxDQUNBLG9DQUFBLENBQ0Esd0JBQUEsQ0FDQSx3RkFBQSxDQUlBLDBDQUFBLENBQ0EsWUFBQSxDQUNBLHNCQUFBLENBQ0EsbUJBQUEsQ0FDQSxrQkFBQSxDQUNBLGdCQUFBLENBRUEsYUFDRSxrREFBQSxDQUNBLDhCQUFBLENBR0YsMENBRUUsd0NBQUEsQ0FDQSxrQkFBQSxDQUdGLDRDQUVFLHFDQUFBLENBR0EsZ0ZBQ0UsY0FBQSxDQU9KLHlCQUVFLGdEQUFBLENBQ0EsaURBQUEsQ0FDQSxzQ0FBQSxDQUNBLHNDQUFBLENBR0EsNkNBQ0UsY0FBQSxDQUNBLCtCQUFBLENBQ0EsV0FBQSxDQUlKLG1CQUNFLHFCQUFBLENBQ0EsaUJBQUEsQ0FDQSwwQkFBQSxDQUdGLG9CQUNFLGtDQUFBLENBQ0EsY0FBQSxDQUNBLCtCQUFBLENBQ0Esa0JBQUEsQ0FHRiwwRUFHRSxxQ0FBQSxDQUdGLG9DQUVFLHVCQUFBLENBQ0Esd0JBQUEsQ0FHRixvQ0FFRSx1QkFBQSxDQUdGLG9DQUVFLHVCQUFBLENBR0Ysb0NBRUUsdUJBQUEsQ0FHRix3Q0FFRSxhQUFBLENBQ0EsWUFBQSxDQUNBLHFCQUFBLENBQ0EsZ0JBQUEsQ0FDQSxpQkFBQSxDQUNBLGlCQUFBLENBQ0EsbUJBQUEsQ0FDQSxrQkFBQSxDQUNBLHNCQUFBLENBR0Ysd0NBRUUscUJBQUEsQ0FDQSxzQkFBQSxDQUNBLGVBQUEsQ0FDQSxtQkFBQSxDQUNBLGtCQUFBLENBQ0EsaUJBQUEsQ0FDQSxpQkFBQSxDQUNBLDRFQUNFLG1FQUFBLENBQ0EsbUNBQUEsQ0FDQSxnQkFBQSxDQUNBLFdBQUEiLCJmaWxlIjoiYnV0dG9uLm1pbi5jc3MifQ== */

package/libs/components/card.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var chunkP2DC76ZZ_cjs = require('../chunk-P2DC76ZZ.cjs');
+require('../chunk-L75OQKEI.cjs');
+
+
+
+Object.defineProperty(exports, 'Card', {
+	enumerable: true,
+	get: function () { return chunkP2DC76ZZ_cjs.d; }
+});
+Object.defineProperty(exports, 'Content', {
+	enumerable: true,
+	get: function () { return chunkP2DC76ZZ_cjs.b; }
+});
+Object.defineProperty(exports, 'Footer', {
+	enumerable: true,
+	get: function () { return chunkP2DC76ZZ_cjs.c; }
+});
+Object.defineProperty(exports, 'Title', {
+	enumerable: true,
+	get: function () { return chunkP2DC76ZZ_cjs.a; }
+});
+Object.defineProperty(exports, 'default', {
+	enumerable: true,
+	get: function () { return chunkP2DC76ZZ_cjs.e; }
+});
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=card.cjs.map

package/libs/components/card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/libs/components/card.d.cts

@@ -0,0 +1,302 @@
+import React__default from 'react';
+import { U as UI } from '../ui-645f95b5.js';
+
+/**
+ * Base props shared across all Card sub-components.
+ *
+ * This interface provides common styling and structural props
+ * that all Card sub-components support.
+ */
+interface CardSubComponentProps {
+    /** CSS class names to apply */
+    className?: string;
+    /** Inline styles to apply */
+    style?: React__default.CSSProperties;
+    /** Child elements to render */
+    children?: React__default.ReactNode;
+}
+/**
+ * Props for the Card.Title sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardTitleProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'h3'
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * HTML id attribute for the title.
+     * Useful for aria-labelledby references.
+     */
+    id?: string;
+}
+/**
+ * Props for the Card.Content sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardContentProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * Use 'article' for standalone content, 'div' for generic containers.
+     * @default 'article'
+     */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * Props for the Card.Footer sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardFooterProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'div'
+     */
+    as?: 'div' | 'footer';
+}
+/**
+ * Props for the main Card component.
+ *
+ * Extends all props from the UI component while adding Card-specific functionality.
+ * Supports polymorphic rendering via the `as` prop.
+ *
+ * @extends React.ComponentProps<typeof UI>
+ */
+interface CardProps extends React__default.ComponentProps<typeof UI> {
+    /**
+     * HTML element to render the Card as.
+     * Inherits from UI component's polymorphic `as` prop.
+     * @default 'div'
+     */
+    as?: React__default.ElementType;
+    /**
+     * ARIA role for the card.
+     * Use 'article' for standalone content, 'region' with aria-label for landmarks.
+     * @example
+     * ```tsx
+     * <Card role="article">...</Card>
+     * <Card role="region" aria-label="User profile">...</Card>
+     * ```
+     */
+    role?: string;
+    /**
+     * Accessible label for the card.
+     * Required when using interactive cards or role="region".
+     * @example
+     * ```tsx
+     * <Card role="region" aria-label="Featured products">...</Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this card.
+     * @example
+     * ```tsx
+     * <Card aria-labelledby="card-title-1">
+     *   <Card.Title id="card-title-1">Title</Card.Title>
+     * </Card>
+     * ```
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element that describes this card.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Makes the card interactive with keyboard support.
+     * Adds tabIndex, role="button", and keyboard event handlers.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Click handler for interactive cards.
+     * When provided without `interactive`, a warning will be logged in development.
+     */
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation.
+     * Automatically set to 0 when `interactive` is true.
+     */
+    tabIndex?: number;
+}
+
+/**
+ * Card.Title - Title sub-component for Card
+ *
+ * Renders a heading element for the card title. Defaults to h3 for proper
+ * document outline, but can be customized via the `as` prop.
+ *
+ * ## Accessibility
+ * - Use appropriate heading level based on document structure
+ * - Combine with `aria-labelledby` on parent Card for accessible names
+ *
+ * @example
+ * ```tsx
+ * <Card aria-labelledby="card-title-1">
+ *   <Card.Title id="card-title-1">Featured Product</Card.Title>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom heading level
+ * <Card.Title as="h2">Section Title</Card.Title>
+ * ```
+ */
+declare const Title: {
+    ({ children, className, style, as, ...props }: CardTitleProps): React__default.JSX.Element;
+    displayName: string;
+};
+/**
+ * Card.Content - Content sub-component for Card
+ *
+ * Renders the main content area of the card. Defaults to `<article>` for
+ * standalone content, but can be changed to `div` or `section` via the `as` prop.
+ *
+ * ## Semantic HTML Guidelines
+ * - Use `article` (default) for self-contained, syndicate-able content
+ * - Use `div` for generic content containers
+ * - Use `section` for thematic groupings with a heading
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Article Title</Card.Title>
+ *   <Card.Content>
+ *     <p>This is standalone content...</p>
+ *   </Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Generic container (not standalone content)
+ * <Card.Content as="div">
+ *   <p>Generic content...</p>
+ * </Card.Content>
+ * ```
+ */
+declare const Content: {
+    ({ children, className, style, as, ...props }: CardContentProps): React__default.JSX.Element;
+    displayName: string;
+};
+/**
+ * Card.Footer - Footer sub-component for Card
+ *
+ * Renders a footer section for the card. Use for actions, metadata, or
+ * supplementary information.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product</Card.Title>
+ *   <Card.Content>Description...</Card.Content>
+ *   <Card.Footer>
+ *     <button>Add to Cart</button>
+ *     <span>$29.99</span>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Semantic footer element
+ * <Card.Footer as="footer">
+ *   <p>Last updated: 2024-01-15</p>
+ * </Card.Footer>
+ * ```
+ */
+declare const Footer: {
+    ({ children, className, style, as, ...props }: CardFooterProps): React__default.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__default.JSX.Element;
+    displayName: string;
+    Title: {
+        ({ children, className, style, as, ...props }: CardTitleProps): React__default.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, className, style, as, ...props }: CardContentProps): React__default.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, style, as, ...props }: CardFooterProps): React__default.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { Card, CardProps, Content, Footer, Title, Card as default };

package/libs/components/card.d.ts

@@ -0,0 +1,302 @@
+import React__default from 'react';
+import { U as UI } from '../ui-645f95b5.js';
+
+/**
+ * Base props shared across all Card sub-components.
+ *
+ * This interface provides common styling and structural props
+ * that all Card sub-components support.
+ */
+interface CardSubComponentProps {
+    /** CSS class names to apply */
+    className?: string;
+    /** Inline styles to apply */
+    style?: React__default.CSSProperties;
+    /** Child elements to render */
+    children?: React__default.ReactNode;
+}
+/**
+ * Props for the Card.Title sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardTitleProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'h3'
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * HTML id attribute for the title.
+     * Useful for aria-labelledby references.
+     */
+    id?: string;
+}
+/**
+ * Props for the Card.Content sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardContentProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * Use 'article' for standalone content, 'div' for generic containers.
+     * @default 'article'
+     */
+    as?: 'article' | 'div' | 'section';
+}
+/**
+ * Props for the Card.Footer sub-component.
+ *
+ * @extends CardSubComponentProps
+ */
+interface CardFooterProps extends CardSubComponentProps {
+    /**
+     * HTML element to render as.
+     * @default 'div'
+     */
+    as?: 'div' | 'footer';
+}
+/**
+ * Props for the main Card component.
+ *
+ * Extends all props from the UI component while adding Card-specific functionality.
+ * Supports polymorphic rendering via the `as` prop.
+ *
+ * @extends React.ComponentProps<typeof UI>
+ */
+interface CardProps extends React__default.ComponentProps<typeof UI> {
+    /**
+     * HTML element to render the Card as.
+     * Inherits from UI component's polymorphic `as` prop.
+     * @default 'div'
+     */
+    as?: React__default.ElementType;
+    /**
+     * ARIA role for the card.
+     * Use 'article' for standalone content, 'region' with aria-label for landmarks.
+     * @example
+     * ```tsx
+     * <Card role="article">...</Card>
+     * <Card role="region" aria-label="User profile">...</Card>
+     * ```
+     */
+    role?: string;
+    /**
+     * Accessible label for the card.
+     * Required when using interactive cards or role="region".
+     * @example
+     * ```tsx
+     * <Card role="region" aria-label="Featured products">...</Card>
+     * ```
+     */
+    'aria-label'?: string;
+    /**
+     * ID of element that labels this card.
+     * @example
+     * ```tsx
+     * <Card aria-labelledby="card-title-1">
+     *   <Card.Title id="card-title-1">Title</Card.Title>
+     * </Card>
+     * ```
+     */
+    'aria-labelledby'?: string;
+    /**
+     * ID of element that describes this card.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Makes the card interactive with keyboard support.
+     * Adds tabIndex, role="button", and keyboard event handlers.
+     * @default false
+     */
+    interactive?: boolean;
+    /**
+     * Click handler for interactive cards.
+     * When provided without `interactive`, a warning will be logged in development.
+     */
+    onClick?: (event: React__default.MouseEvent | React__default.KeyboardEvent) => void;
+    /**
+     * Tab index for keyboard navigation.
+     * Automatically set to 0 when `interactive` is true.
+     */
+    tabIndex?: number;
+}
+
+/**
+ * Card.Title - Title sub-component for Card
+ *
+ * Renders a heading element for the card title. Defaults to h3 for proper
+ * document outline, but can be customized via the `as` prop.
+ *
+ * ## Accessibility
+ * - Use appropriate heading level based on document structure
+ * - Combine with `aria-labelledby` on parent Card for accessible names
+ *
+ * @example
+ * ```tsx
+ * <Card aria-labelledby="card-title-1">
+ *   <Card.Title id="card-title-1">Featured Product</Card.Title>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom heading level
+ * <Card.Title as="h2">Section Title</Card.Title>
+ * ```
+ */
+declare const Title: {
+    ({ children, className, style, as, ...props }: CardTitleProps): React__default.JSX.Element;
+    displayName: string;
+};
+/**
+ * Card.Content - Content sub-component for Card
+ *
+ * Renders the main content area of the card. Defaults to `<article>` for
+ * standalone content, but can be changed to `div` or `section` via the `as` prop.
+ *
+ * ## Semantic HTML Guidelines
+ * - Use `article` (default) for self-contained, syndicate-able content
+ * - Use `div` for generic content containers
+ * - Use `section` for thematic groupings with a heading
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Article Title</Card.Title>
+ *   <Card.Content>
+ *     <p>This is standalone content...</p>
+ *   </Card.Content>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Generic container (not standalone content)
+ * <Card.Content as="div">
+ *   <p>Generic content...</p>
+ * </Card.Content>
+ * ```
+ */
+declare const Content: {
+    ({ children, className, style, as, ...props }: CardContentProps): React__default.JSX.Element;
+    displayName: string;
+};
+/**
+ * Card.Footer - Footer sub-component for Card
+ *
+ * Renders a footer section for the card. Use for actions, metadata, or
+ * supplementary information.
+ *
+ * @example
+ * ```tsx
+ * <Card>
+ *   <Card.Title>Product</Card.Title>
+ *   <Card.Content>Description...</Card.Content>
+ *   <Card.Footer>
+ *     <button>Add to Cart</button>
+ *     <span>$29.99</span>
+ *   </Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Semantic footer element
+ * <Card.Footer as="footer">
+ *   <p>Last updated: 2024-01-15</p>
+ * </Card.Footer>
+ * ```
+ */
+declare const Footer: {
+    ({ children, className, style, as, ...props }: CardFooterProps): React__default.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__default.JSX.Element;
+    displayName: string;
+    Title: {
+        ({ children, className, style, as, ...props }: CardTitleProps): React__default.JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        ({ children, className, style, as, ...props }: CardContentProps): React__default.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, style, as, ...props }: CardFooterProps): React__default.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { Card, CardProps, Content, Footer, Title, Card as default };

package/libs/components/card.js

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

package/libs/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/libs/components/cards/card.css

@@ -1 +1 @@
-:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}/*# sourceMappingURL=card.css.map */
+:root{--card-p: 2rem;--card-bg: #fff;--card-radius: calc(var(--card-p) / 4);--card-position: relative;--card-display: flex;--card-direction: column;--card-gap: 1rem}[data-card],[data-component~=card]{display:var(--card-display);flex-direction:var(--card-direction);gap:var(--card-gap);border-radius:var(--card-radius);background-color:var(--card-bg);text-align:var(--card-align, left)}[data-card] h3,[data-card] h2,[data-component~=card] h3,[data-component~=card] h2{margin-block-end:0;padding-block-end:0}[data-card]+div,[data-component~=card]+div{margin-block-start:0}[data-card]>article,[data-component~=card]>article{display:flex;flex-direction:column;flex:2}[data-card]>*:not(img),[data-component~=card]>*:not(img){padding-inline:var(--card-p)}[data-card]>*:last-child:not(img),[data-component~=card]>*:last-child:not(img){padding-block-end:var(--card-p)}[data-card]>*:first-child:not(img),[data-component~=card]>*:first-child:not(img){padding-block-start:calc(var(--card-p) - .5rem)}[data-card=interactive]{cursor:pointer;transition:box-shadow .2s ease,transform .2s ease}[data-card=interactive]:hover{transform:translateY(-2px);box-shadow:0 .25rem .75rem rgba(0,0,0,.15)}[data-card=interactive]:focus-visible{outline:.125rem solid var(--focus-color, #0066CC);outline-offset:.125rem}[data-card=interactive]:focus:not(:focus-visible){outline:none}/*# sourceMappingURL=card.css.map */

package/libs/components/cards/card.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../src/components/cards/card.scss"],"names":[],"mappings":"AAAA,MACE,eACA,gBACA,uCACA,0BACA,qBACA,yBACA,iBAGF,mCAEE,4BACA,qCACA,oBACA,iCACA,gCACA,mCAEA,kFAEE,mBACA,oBAEF,2CACE,qBAEF,mDACE,aACA,sBACA,OAGF,yDACE,6BAEF,+EAEE,gCAEF,iFACE","file":"card.css"}
+{"version":3,"sourceRoot":"","sources":["../../../src/components/cards/card.scss"],"names":[],"mappings":"AAAA,MACE,eACA,gBACA,uCACA,0BACA,qBACA,yBACA,iBAGF,mCAEE,4BACA,qCACA,oBACA,iCACA,gCACA,mCAEA,kFAEE,mBACA,oBAEF,2CACE,qBAEF,mDACE,aACA,sBACA,OAGF,yDACE,6BAEF,+EAEE,gCAEF,iFACE,gDAKJ,wBACE,eACA,kDAEA,8BACE,2BACA,2CAIF,sCACE,kDACA,uBAIF,kDACE","file":"card.css"}