@fpkit/acss 3.2.0 → 3.3.0

package/package.json

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

package/src/components/cards/card.scss

@@ -27,6 +27,7 @@
   flex-direction: column;
   gap: var(--card-gap);
   border-radius: var(--card-radius);
+  border: var(--card-border, 0.0625rem solid rgba(0, 0, 0, 0.08));
   background-color: var(--card-bg);
   text-align: var(--card-align, left);
 

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

@@ -10,26 +10,28 @@ const meta: Meta<typeof Card> = {
   component: Card,
   args: {
     children: <p>{content}</p>,
+    classes: "shadow-sm rounded-lg",
   },
   argTypes: {
     as: {
-      control: 'select',
-      options: ['div', 'article', 'section', 'aside'],
-      description: 'HTML element to render',
+      control: "select",
+      options: ["div", "article", "section", "aside"],
+      description: "HTML element to render",
     },
     interactive: {
-      control: 'boolean',
-      description: 'Enable keyboard navigation and button semantics',
+      control: "boolean",
+      description: "Enable keyboard navigation and button semantics",
     },
     role: {
-      control: 'text',
-      description: 'ARIA role attribute',
+      control: "text",
+      description: "ARIA role attribute",
     },
   },
   parameters: {
     docs: {
       description: {
-        component: 'A flexible, accessible card component with compound component pattern. Supports polymorphic rendering, interactive variants, and WCAG 2.1 AA compliance.',
+        component:
+          "A flexible, accessible card component with compound component pattern. Supports polymorphic rendering, interactive variants, and WCAG 2.1 AA compliance.",
       },
     },
   },
@@ -171,13 +173,13 @@ export const FlexibleContent: Story = {
 export const InteractiveCard: Story = {
   args: {
     interactive: true,
-    'aria-label': 'View product details',
+    "aria-label": "View product details",
   },
   render: (args) => (
     <Card
       {...args}
-      onClick={() => alert('Card clicked!')}
-      style={{ cursor: 'pointer' }}
+      onClick={() => alert("Card clicked!")}
+      style={{ cursor: "pointer" }}
     >
       <Card.Title>Interactive Product Card</Card.Title>
       <Card.Content>
@@ -185,12 +187,12 @@ export const InteractiveCard: Story = {
           This card is fully interactive! Click anywhere or use your keyboard
           (Tab to focus, Enter or Space to activate) to trigger the action.
         </p>
-        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+        <p style={{ fontSize: "0.875rem", color: "#666", marginTop: "0.5rem" }}>
           Try it: Tab to focus this card, then press Enter or Space.
         </p>
       </Card.Content>
       <Card.Footer>
-        <span style={{ color: '#007bff', fontWeight: 'bold' }}>
+        <span style={{ color: "#007bff", fontWeight: "bold" }}>
           Click to learn more →
         </span>
       </Card.Footer>
@@ -199,7 +201,8 @@ export const InteractiveCard: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Interactive cards support full keyboard navigation (Enter/Space keys) and automatically receive proper ARIA attributes for accessibility.',
+        story:
+          "Interactive cards support full keyboard navigation (Enter/Space keys) and automatically receive proper ARIA attributes for accessibility.",
       },
     },
   },
@@ -217,7 +220,7 @@ export const AccessibleCard: Story = {
           This card uses <code>aria-labelledby</code> to connect the title with
           the card container, providing an accessible name for screen readers.
         </p>
-        <p style={{ fontSize: '0.875rem', color: '#666', marginTop: '0.5rem' }}>
+        <p style={{ fontSize: "0.875rem", color: "#666", marginTop: "0.5rem" }}>
           Screen readers will announce: "Featured Product, article"
         </p>
       </Card.Content>
@@ -229,7 +232,8 @@ export const AccessibleCard: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Demonstrates best practices for accessible cards using aria-labelledby to provide context to assistive technologies.',
+        story:
+          "Demonstrates best practices for accessible cards using aria-labelledby to provide context to assistive technologies.",
       },
     },
   },
@@ -240,7 +244,7 @@ export const AccessibleCard: Story = {
  */
 export const PolymorphicElements: Story = {
   render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
       <Card as="article">
         <Card.Title as="h2">Article Card</Card.Title>
         <Card.Content>
@@ -266,7 +270,8 @@ export const PolymorphicElements: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'The Card component supports polymorphic rendering via the `as` prop, allowing you to use semantic HTML elements while maintaining consistent styling.',
+        story:
+          "The Card component supports polymorphic rendering via the `as` prop, allowing you to use semantic HTML elements while maintaining consistent styling.",
       },
     },
   },
@@ -277,7 +282,7 @@ export const PolymorphicElements: Story = {
  */
 export const CustomHeadingLevels: Story = {
   render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
       <Card>
         <Card.Title as="h1">Level 1 Heading</Card.Title>
         <Card.Content>Main page title level</Card.Content>
@@ -290,7 +295,9 @@ export const CustomHeadingLevels: Story = {
 
       <Card>
         <Card.Title as="h3">Level 3 Heading (Default)</Card.Title>
-        <Card.Content>Subsection title level - this is the default</Card.Content>
+        <Card.Content>
+          Subsection title level - this is the default
+        </Card.Content>
       </Card>
 
       <Card>
@@ -302,7 +309,8 @@ export const CustomHeadingLevels: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Card.Title supports all heading levels (h1-h6) to maintain proper document outline and heading hierarchy.',
+        story:
+          "Card.Title supports all heading levels (h1-h6) to maintain proper document outline and heading hierarchy.",
       },
     },
   },
@@ -321,18 +329,23 @@ export const CustomHeadingLevels: Story = {
  */
 export const Customization: Story = {
   render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
       {/* Custom padding and spacing */}
       <div>
         <h4>Custom Padding & Spacing</h4>
-        <Card styles={{
-          "--card-padding": "3rem",
-          "--card-radius": "1rem",
-          "--card-gap": "1.5rem",
-        }}>
+        <Card
+          styles={{
+            "--card-padding": "3rem",
+            "--card-radius": "1rem",
+            "--card-gap": "1.5rem",
+          }}
+        >
           <Card.Title>Spacious Card</Card.Title>
           <Card.Content>
-            <p>This card uses custom padding (3rem) and larger border radius (1rem).</p>
+            <p>
+              This card uses custom padding (3rem) and larger border radius
+              (1rem).
+            </p>
           </Card.Content>
         </Card>
       </div>
@@ -340,14 +353,19 @@ export const Customization: Story = {
       {/* Compact card */}
       <div>
         <h4>Compact Card</h4>
-        <Card styles={{
-          "--card-padding": "1rem",
-          "--card-radius": "0.25rem",
-          "--card-gap": "0.5rem",
-        }}>
+        <Card
+          styles={{
+            "--card-padding": "1rem",
+            "--card-radius": "0.25rem",
+            "--card-gap": "0.5rem",
+          }}
+        >
           <Card.Title>Compact Card</Card.Title>
           <Card.Content>
-            <p>This card uses minimal padding and smaller gaps for a compact layout.</p>
+            <p>
+              This card uses minimal padding and smaller gaps for a compact
+              layout.
+            </p>
           </Card.Content>
         </Card>
       </div>
@@ -355,41 +373,53 @@ export const Customization: Story = {
       {/* Custom header/footer styling */}
       <div>
         <h4>Element-Specific Customization (Header, Body, Footer)</h4>
-        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
-          <Card styles={{
-            "--card-header-padding": "1.5rem 2rem",
-            "--card-header-bg": "#0066cc",
-            "--card-header-border-bottom": "none",
-            "--card-body-padding": "2rem",
-            "--card-footer-padding": "1rem 2rem",
-            "--card-footer-bg": "#f0f0f0",
-            "--card-footer-border-top": "2px solid #ddd",
-          }}>
-            <header data-card-header style={{ color: 'white' }}>
+        <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+          <Card
+            styles={{
+              "--card-header-padding": "1.5rem 2rem",
+              "--card-header-bg": "#0066cc",
+              "--card-header-border-bottom": "none",
+              "--card-body-padding": "2rem",
+              "--card-footer-padding": "1rem 2rem",
+              "--card-footer-bg": "#f0f0f0",
+              "--card-footer-border-top": "2px solid #ddd",
+            }}
+          >
+            <header data-card-header style={{ color: "white" }}>
               <h3 style={{ margin: 0 }}>Custom Header</h3>
             </header>
             <div data-card-body>
-              <p>This card demonstrates element-specific customization using the new scoped variables.</p>
-              <p>Header has custom blue background, body has custom padding, footer has custom gray background.</p>
+              <p>
+                This card demonstrates element-specific customization using the
+                new scoped variables.
+              </p>
+              <p>
+                Header has custom blue background, body has custom padding,
+                footer has custom gray background.
+              </p>
             </div>
             <footer data-card-footer>
               <small>Custom Footer Content</small>
             </footer>
           </Card>
 
-          <Card styles={{
-            "--card-header-padding": "0.75rem 1.25rem",
-            "--card-header-bg": "#28a745",
-            "--card-header-border-bottom": "3px solid #1e7e34",
-            "--card-body-padding": "1.25rem",
-            "--card-footer-padding": "0.75rem 1.25rem",
-            "--card-footer-bg": "#e7f5ea",
-          }}>
-            <header data-card-header style={{ color: 'white' }}>
+          <Card
+            styles={{
+              "--card-header-padding": "0.75rem 1.25rem",
+              "--card-header-bg": "#28a745",
+              "--card-header-border-bottom": "3px solid #1e7e34",
+              "--card-body-padding": "1.25rem",
+              "--card-footer-padding": "0.75rem 1.25rem",
+              "--card-footer-bg": "#e7f5ea",
+            }}
+          >
+            <header data-card-header style={{ color: "white" }}>
               <h3 style={{ margin: 0 }}>Green Theme</h3>
             </header>
             <div data-card-body>
-              <p>Another example with green theme and custom element spacing.</p>
+              <p>
+                Another example with green theme and custom element spacing.
+              </p>
             </div>
             <footer data-card-footer>
               <small>Footer with light green background</small>
@@ -407,22 +437,27 @@ export const Customization: Story = {
         }}
       >
         <h4 style={{ color: "white", marginTop: 0 }}>Dark Theme Example</h4>
-        <Card styles={{
-          "--card-bg": "#2a2a2a",
-          "--card-padding": "2rem",
-          "--card-radius": "0.75rem",
-          "--card-header-bg": "#3a3a3a",
-          "--card-header-border-bottom": "1px solid #4a4a4a",
-          "--card-footer-bg": "#3a3a3a",
-          "--card-footer-border-top": "1px solid #4a4a4a",
-        }}>
+        <Card
+          styles={{
+            "--card-bg": "#2a2a2a",
+            "--card-padding": "2rem",
+            "--card-radius": "0.75rem",
+            "--card-header-bg": "#3a3a3a",
+            "--card-header-border-bottom": "1px solid #4a4a4a",
+            "--card-footer-bg": "#3a3a3a",
+            "--card-footer-border-top": "1px solid #4a4a4a",
+          }}
+        >
           <header data-card-header>
-            <h3 style={{ margin: 0, color: 'white' }}>Dark Mode Card</h3>
+            <h3 style={{ margin: 0, color: "white" }}>Dark Mode Card</h3>
           </header>
-          <div data-card-body style={{ color: '#e5e7eb' }}>
-            <p>This card demonstrates dark theme customization with all element-specific variables.</p>
+          <div data-card-body style={{ color: "#e5e7eb" }}>
+            <p>
+              This card demonstrates dark theme customization with all
+              element-specific variables.
+            </p>
           </div>
-          <footer data-card-footer style={{ color: '#9ca3af' }}>
+          <footer data-card-footer style={{ color: "#9ca3af" }}>
             <small>Styled with CSS custom properties</small>
           </footer>
         </Card>
@@ -431,19 +466,24 @@ export const Customization: Story = {
       {/* Brand card */}
       <div>
         <h4>Brand Card (No Radius, Custom Colors)</h4>
-        <Card styles={{
-          "--card-bg": "#fff5e6",
-          "--card-radius": "0",
-          "--card-padding": "2.5rem",
-          "--card-gap": "2rem",
-          "--card-header-bg": "#ff9800",
-          "--card-header-border-bottom": "4px solid #f57c00",
-        }}>
+        <Card
+          styles={{
+            "--card-bg": "#fff5e6",
+            "--card-radius": "0",
+            "--card-padding": "2.5rem",
+            "--card-gap": "2rem",
+            "--card-header-bg": "#ff9800",
+            "--card-header-border-bottom": "4px solid #f57c00",
+          }}
+        >
           <header data-card-header>
-            <h3 style={{ margin: 0, color: 'white' }}>Brand Card</h3>
+            <h3 style={{ margin: 0, color: "white" }}>Brand Card</h3>
           </header>
           <div data-card-body>
-            <p>This card uses brand colors and no border radius for a distinct look.</p>
+            <p>
+              This card uses brand colors and no border radius for a distinct
+              look.
+            </p>
           </div>
         </Card>
       </div>

package/src/components/cards/card.tsx

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

package/src/index.scss

@@ -27,4 +27,5 @@
 @use "./components/alert/alert.scss";
 @use "./components/text-to-speech/text-to-speech.scss";
 @use "./components/flexbox/flex.scss";
-@use "./sass/styles";
+@use "./sass/styles/shadows";
+@use "./sass/styles/colors";

package/src/sass/_styles.scss

@@ -1,2 +1,2 @@
-@use "./styles/shadows";
-@use "./styles/colors";
+@forward "./styles/shadows";
+@forward "./styles/colors";

package/src/styles/cards/card.css

@@ -22,6 +22,7 @@
   flex-direction: column;
   gap: var(--card-gap);
   border-radius: var(--card-radius);
+  border: var(--card-border, 0.0625rem solid rgba(0, 0, 0, 0.08));
   background-color: var(--card-bg);
   text-align: var(--card-align, left);
 }

package/src/styles/cards/card.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/cards/card.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEF;AAAA;EACE;;AAEF;AAAA;EAGE;;AAIF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA,YACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE","file":"card.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/cards/card.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEF;AAAA;EACE;;AAEF;AAAA;EAGE;;AAIF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EAEA;EACA,YACE;;AAGF;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE","file":"card.css"}

package/src/styles/index.css

@@ -828,6 +828,7 @@ figure:has(img[alt]) > figcaption {
   flex-direction: column;
   gap: var(--card-gap);
   border-radius: var(--card-radius);
+  border: var(--card-border, 0.0625rem solid rgba(0, 0, 0, 0.08));
   background-color: var(--card-bg);
   text-align: var(--card-align, left);
 }