@aurora-ds/components 0.22.3 → 0.22.5

package/dist/esm/components/foundation/icon/Icon.d.ts

@@ -5,7 +5,7 @@ import { IconProps } from '@components/foundation/icon/Icon.props.ts';
  *
  * **Features:**
  * - Theme-aware sizing via font sizes
- * - Color and fill support from theme
+ * - Color (stroke) and fill support from theme
  * - Optional background with padding and border radius
  * - Transition animation on color changes
  *
@@ -13,9 +13,15 @@ import { IconProps } from '@components/foundation/icon/Icon.props.ts';
  * ```tsx
  * import { SomeIcon } from 'some-icon-library'
  *
+ * // Stroke color only
  * <Icon size="md" color="primary">
  *   <SomeIcon />
  * </Icon>
+ *
+ * // With fill color
+ * <Icon size="md" color="primary" fill="secondary">
+ *   <SomeIcon />
+ * </Icon>
  * ```
  *
  * **With background:**
@@ -23,6 +29,7 @@ import { IconProps } from '@components/foundation/icon/Icon.props.ts';
  * <Icon
  *   size="lg"
  *   color="onPrimary"
+ *   fill="onPrimary"
  *   backgroundColor="primary"
  *   padding="sm"
  *   borderRadius="full"

package/dist/esm/components/foundation/icon/Icon.props.d.ts

@@ -5,6 +5,8 @@ export type IconProps = PropsWithChildren<{
     size?: keyof ThemeContract['fontSize'];
     /** Icon stroke/line color from theme */
     color?: keyof ThemeContract['colors'];
+    /** Icon fill color from theme (for filled icons) */
+    fill?: keyof ThemeContract['colors'];
     /** Background color from theme */
     backgroundColor?: keyof ThemeContract['colors'];
     /** Padding from theme spacing */

package/dist/esm/components/foundation/icon/Icon.styles.d.ts

@@ -1,3 +1,3 @@
 export declare const ICON_STYLES: {
-    root: (size?: keyof import("@/interfaces").ThemeFontSizeContract | undefined, color?: keyof import("@/interfaces").ThemeColorContract | undefined, backgroundColor?: keyof import("@/interfaces").ThemeColorContract | undefined, padding?: keyof import("@/interfaces").ThemeSpacingContract | undefined, borderRadius?: keyof import("@/interfaces").ThemeRadiusContract | undefined) => string;
+    root: (size?: keyof import("@/interfaces").ThemeFontSizeContract | undefined, color?: keyof import("@/interfaces").ThemeColorContract | undefined, fill?: keyof import("@/interfaces").ThemeColorContract | undefined, backgroundColor?: keyof import("@/interfaces").ThemeColorContract | undefined, padding?: keyof import("@/interfaces").ThemeSpacingContract | undefined, borderRadius?: keyof import("@/interfaces").ThemeRadiusContract | undefined) => string;
 };

package/dist/esm/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/esm/index.js

@@ -4,13 +4,13 @@ import { createStyles, useTheme, keyframes, colors } from '@aurora-ds/theme';
 import { createPortal } from 'react-dom';
 
 const ICON_STYLES = createStyles((theme) => ({
-    root: (size, color, backgroundColor, padding, borderRadius) => ({
+    root: (size, color, fill, backgroundColor, padding, borderRadius) => ({
         boxSizing: 'content-box',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-        transition: 'color 150ms ease-in-out',
+        transition: 'color 150ms ease-in-out, fill 150ms ease-in-out',
         flexShrink: 0,
         lineHeight: 0,
         height: theme.fontSize[size ?? 'md'],
@@ -18,9 +18,13 @@ const ICON_STYLES = createStyles((theme) => ({
         minWidth: theme.fontSize[size ?? 'md'],
         minHeight: theme.fontSize[size ?? 'md'],
         color: color ? theme.colors[color] : 'inherit',
+        fill: fill ? theme.colors[fill] : undefined,
         backgroundColor: backgroundColor ? theme.colors[backgroundColor] : undefined,
         padding: padding ? theme.spacing[padding] : 0,
         borderRadius: theme.radius[borderRadius ?? 'md'],
+        '& svg': {
+            fill: fill ? theme.colors[fill] : undefined,
+        },
     }),
 }));
 
@@ -29,7 +33,7 @@ const ICON_STYLES = createStyles((theme) => ({
  *
  * **Features:**
  * - Theme-aware sizing via font sizes
- * - Color and fill support from theme
+ * - Color (stroke) and fill support from theme
  * - Optional background with padding and border radius
  * - Transition animation on color changes
  *
@@ -37,9 +41,15 @@ const ICON_STYLES = createStyles((theme) => ({
  * ```tsx
  * import { SomeIcon } from 'some-icon-library'
  *
+ * // Stroke color only
  * <Icon size="md" color="primary">
  *   <SomeIcon />
  * </Icon>
+ *
+ * // With fill color
+ * <Icon size="md" color="primary" fill="secondary">
+ *   <SomeIcon />
+ * </Icon>
  * ```
  *
  * **With background:**
@@ -47,6 +57,7 @@ const ICON_STYLES = createStyles((theme) => ({
  * <Icon
  *   size="lg"
  *   color="onPrimary"
+ *   fill="onPrimary"
  *   backgroundColor="primary"
  *   padding="sm"
  *   borderRadius="full"
@@ -55,7 +66,7 @@ const ICON_STYLES = createStyles((theme) => ({
  * </Icon>
  * ```
  */
-const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
+const Icon = ({ children, size, color, fill, backgroundColor, padding, borderRadius, ariaLabel, ariaLabelledBy, ariaDescribedBy, role, tabIndex, }) => {
     // Clone child element to apply width and height
     const child = Children.only(children);
     const styledChild = isValidElement(child)
@@ -64,7 +75,7 @@ const Icon = ({ children, size, color, backgroundColor, padding, borderRadius, a
             height: '100%',
         })
         : child;
-    return (jsx("div", { className: ICON_STYLES.root(size, color, backgroundColor, padding, borderRadius), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: styledChild }));
+    return (jsx("div", { className: ICON_STYLES.root(size, color, fill, backgroundColor, padding, borderRadius), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, role: role, tabIndex: tabIndex, children: styledChild }));
 };
 Icon.displayName = 'Icon';
 
@@ -2037,12 +2048,13 @@ Box.displayName = 'Box';
  * Card styles using createStyles from @aurora-ds/theme
  */
 const CARD_STYLES = 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],
@@ -2066,12 +2078,13 @@ const CARD_STYLES = 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 (jsx("div", { className: CARD_STYLES.root({
             direction,
             padding,
             width,
             height,
+            maxHeight,
             gap,
             radius,
             shadow,