⚠️ Bug Report: React Warning for `aspectRatio` Prop on Card.Image

[JakeLin]

Description

React console warning when using Card.Image with aspectRatio prop:

Warning: React does not recognize the `aspectRatio` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute,
spell it as lowercase `aspectratio` instead.

Environment

• Package Version: @ainativekit/ui@0.1.0
• React Version: 18.x

Current Behavior

The aspectRatio prop is being spread onto the native <img> DOM element, causing React to emit a warning.

Reproduction

import { Card } from '@ainativekit/ui';

<Card.Image
  src="https://example.com/image.jpg"
  alt="Example"
  aspectRatio="3/2"
/>

Console Output:

Warning: React does not recognize the `aspectRatio` prop on a DOM element...

Root Cause

In CardImage.tsx, the aspectRatio prop is included in the spread {...props} passed to <img>:

// Current (incorrect)
export const CardImage = ({ aspectRatio, ...props }: CardImageProps) => {
  return <img {...props} />; // aspectRatio leaks to DOM
};

Solution

// Fixed
export const CardImage = ({ aspectRatio, style, ...props }: CardImageProps) => {
  return (
    <img
      {...props}
      style={{
        ...style,
        aspectRatio: aspectRatio
      }}
    />
  );
};

Files to Fix

• packages/ui/src/components/Card/CardImage.tsx

Testing Checklist

• No console warnings when using aspectRatio prop
• aspectRatio still applies correctly to images
• Other props still work (src, alt, loading, etc.)
• TypeScript types remain correct

Priority

🟡 Medium - Console pollution, but functionality works

Labels

bug, card, react, props

[JakeLin]

Commit: ad37780 - fix: resolve React warning for aspectRatio prop on Card.Image
📋 What Was Fixed
✅ Bug: React console warning when using Card.Image with aspectRatio prop
✅ Solution: CSS Variables pattern (matches ImageCard for consistency)
✅ Tests: 510/510 passing with 2 new aspectRatio tests
✅ Documentation: Storybook examples, props table, JSDoc, and markdown docs updated
✅ Cleanup: Schemas gitignored and README corrected