@aurora-ds/components 0.22.2 → 0.22.4

package/dist/cjs/components/layout/card/Card.props.d.ts

@@ -11,6 +11,8 @@ export type CardProps = {
     width?: CSSProperties['width'];
     /** Height of the card */
     height?: CSSProperties['height'];
+    /** Maximum height of the card */
+    maxHeight?: CSSProperties['maxHeight'];
     /** Gap between children (theme spacing key) */
     gap?: keyof ThemeContract['spacing'];
     /** Border radius of the card */
@@ -55,6 +57,7 @@ export type CardStyleParams = {
     padding?: keyof ThemeContract['spacing'];
     width?: CSSProperties['width'];
     height?: CSSProperties['height'];
+    maxHeight?: CSSProperties['maxHeight'];
     gap?: keyof ThemeContract['spacing'];
     radius: keyof ThemeContract['radius'];
     shadow: keyof ThemeContract['shadows'];

package/dist/cjs/index.js

@@ -1973,6 +1973,7 @@ const BOX_STYLES = theme.createStyles((theme) => ({
         cursor,
         boxShadow: shadow ? theme.shadows[shadow] : undefined,
         boxSizing: 'border-box',
+        transition: `background-color ${theme.transition.normal}, border-color ${theme.transition.normal}`,
     }),
 }));
 
@@ -2038,12 +2039,13 @@ Box.displayName = 'Box';
  * Card styles using createStyles from @aurora-ds/theme
  */
 const CARD_STYLES = theme.createStyles((theme) => ({
-    root: ({ direction, padding, width, height, gap, radius, shadow, align, justify, backgroundColor, borderColor }) => ({
+    root: ({ direction, padding, width, height, maxHeight, gap, radius, shadow, align, justify, backgroundColor, borderColor }) => ({
         display: 'flex',
         flexDirection: direction,
         padding: padding ? theme.spacing[padding] : undefined,
         width,
         height,
+        maxHeight,
         gap: gap ? theme.spacing[gap] : undefined,
         borderRadius: theme.radius[radius],
         boxShadow: theme.shadows[shadow],
@@ -2052,7 +2054,8 @@ const CARD_STYLES = theme.createStyles((theme) => ({
         alignItems: align,
         justifyContent: justify,
         boxSizing: 'border-box',
-        flexShrink: 0
+        flexShrink: 0,
+        transition: `background-color ${theme.transition.normal}, border-color ${theme.transition.normal}`,
     }),
 }));
 
@@ -2066,12 +2069,13 @@ const CARD_STYLES = theme.createStyles((theme) => ({
  * - `column`: Vertical layout (default)
  * - `row`: Horizontal layout
  */
-const Card = ({ children, direction = 'column', padding = 'md', width, height, gap, radius = 'md', shadow = 'none', align, justify, backgroundColor = 'surface', borderColor = 'border', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, onDragOver, onDragLeave, onDrop, onDragStart, onDragEnd, onDragEnter, draggable, }) => {
+const Card = ({ children, direction = 'column', padding = 'md', width, height, maxHeight, gap, radius = 'md', shadow = 'none', align, justify, backgroundColor = 'surface', borderColor = 'border', ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, onDragOver, onDragLeave, onDrop, onDragStart, onDragEnd, onDragEnter, draggable, }) => {
     return (jsxRuntime.jsx("div", { className: CARD_STYLES.root({
             direction,
             padding,
             width,
             height,
+            maxHeight,
             gap,
             radius,
             shadow,