@fpkit/acss 3.1.1 → 3.2.0

package/src/components/cards/card.scss

@@ -1,34 +1,35 @@
 :root {
   // Base card properties
-  --card-padding: 2rem;
-  --card-bg: #fff;
+  --card-padding: 1.5rem;
+  --card-bg: var(--color-surface, #ffffff);
   --card-radius: calc(var(--card-padding) / 4);
-  --card-position: relative;
-  --card-display: flex;
-  --card-direction: column;
   --card-gap: 1rem;
 
   // Element-specific variables (NEW - for complex card layouts)
   --card-header-padding: 1rem 1.5rem;
-  --card-header-bg: #f8f9fa;
-  --card-header-border-bottom: 1px solid #dee2e6;
+  --card-header-bg: var(--color-surface-secondary, #f8f9fa);
+  --card-header-border-bottom-width: 0.0625rem;
+  --card-header-border-bottom-style: solid;
+  --card-header-border-bottom-color: var(--color-border, #dee2e6);
 
   --card-body-padding: 1.5rem;
 
   --card-footer-padding: 1rem 1.5rem;
-  --card-footer-bg: #f8f9fa;
-  --card-footer-border-top: 1px solid #dee2e6;
+  --card-footer-bg: var(--color-surface-secondary, #f8f9fa);
+  --card-footer-border-top-width: 0.0625rem;
+  --card-footer-border-top-style: solid;
+  --card-footer-border-top-color: var(--color-border, #dee2e6);
 }
 
 [data-card],
-[data-component~='card'] {
-  display: var(--card-display);
-  flex-direction: var(--card-direction);
+[data-component~="card"] {
+  display: flex;
+  flex-direction: column;
   gap: var(--card-gap);
   border-radius: var(--card-radius);
   background-color: var(--card-bg);
   text-align: var(--card-align, left);
-  
+
   h3,
   h2 {
     margin-block-end: 0;
@@ -47,10 +48,11 @@
     padding-inline: var(--card-padding);
   }
   > *:last-child:not(img) {
-    // margin-block-end: 0;
     padding-block-end: var(--card-padding);
   }
   > *:first-child:not(img) {
+    // Reduced top padding to account for heading's inherent spacing
+    // Prevents excessive whitespace above titles
     padding-block-start: calc(var(--card-padding) - 0.5rem);
   }
 
@@ -59,7 +61,7 @@
   > [data-card-header] {
     padding: var(--card-header-padding);
     background-color: var(--card-header-bg);
-    border-bottom: var(--card-header-border-bottom);
+    border-bottom: var(--card-header-border-bottom-width) var(--card-header-border-bottom-style) var(--card-header-border-bottom-color);
     border-radius: var(--card-radius) var(--card-radius) 0 0;
   }
 
@@ -72,24 +74,31 @@
   > [data-card-footer] {
     padding: var(--card-footer-padding);
     background-color: var(--card-footer-bg);
-    border-top: var(--card-footer-border-top);
+    border-top: var(--card-footer-border-top-width) var(--card-footer-border-top-style) var(--card-footer-border-top-color);
     border-radius: 0 0 var(--card-radius) var(--card-radius);
   }
 }
 
 // Interactive card styles - WCAG 2.4.7 compliant focus indicators
 [data-card="interactive"] {
+  --card-transition-duration: 0.2s;
+  --card-transition-timing: ease;
+  --card-hover-lift: -0.125rem;
+  --card-hover-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+
   cursor: pointer;
-  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    box-shadow var(--card-transition-duration) var(--card-transition-timing),
+    transform var(--card-transition-duration) var(--card-transition-timing);
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+    transform: translateY(var(--card-hover-lift));
+    box-shadow: var(--card-hover-shadow);
   }
 
   // Visible focus indicator with 3:1 minimum contrast (WCAG 2.4.7)
   &:focus-visible {
-    outline: 0.125rem solid var(--focus-color, #0066CC);
+    outline: 0.125rem solid var(--color-focus, #0066cc);
     outline-offset: 0.125rem;
   }
 
@@ -98,4 +107,3 @@
     outline: none;
   }
 }
-

package/src/components/cards/card.tsx

@@ -5,6 +5,7 @@ import type {
   CardTitleProps,
   CardContentProps,
   CardFooterProps,
+  CardComponent,
 } from './card.types'
 import { cn, CARD_CLASSES, handleCardKeyDown, warnInteractiveUsage } from './card.utils'
 
@@ -218,7 +219,7 @@ Footer.displayName = 'Card.Footer'
  * </Card>
  * ```
  */
-export const Card = ({
+const CardRoot = ({
   as = 'div',
   styles,
   children,
@@ -275,11 +276,20 @@ export const Card = ({
   )
 }
 
-export default Card
+// 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 default Card
+
 // Export types for external consumption
-export type { CardProps, CardTitleProps, CardContentProps, CardFooterProps } from './card.types'
+export type {
+  CardProps,
+  CardTitleProps,
+  CardContentProps,
+  CardFooterProps,
+  CardComponent,
+} from './card.types'

package/src/components/cards/card.types.ts

@@ -61,6 +61,19 @@ export 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.
+ */
+export 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.
  *