@aurora-ds/components 1.1.3 → 1.1.5

package/dist/esm/index.js

@@ -2272,13 +2272,13 @@ const CARD_VARIANTS = createVariants((theme) => ({
     defaultVariants: { variant: 'elevated' },
 }), { id: 'card' });
 
-const CardHeader = ({ label, icon, actions }) => {
-    return (jsxs(Stack, { alignItems: 'center', justifyContent: 'space-between', gap: 'sm', py: 'sm', px: 'md', children: [jsxs(Stack, { alignItems: 'center', gap: 'sm', flex: 1, minWidth: '0', children: [icon !== undefined && (jsx(Icon, { icon: icon, size: 'md', strokeColor: 'textSecondary' })), jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: 'semibold', color: 'textPrimary', children: label })] }), actions !== undefined && (jsx(Stack, { alignItems: 'center', gap: 'xs', flexShrink: 0, children: actions }))] }));
+const CardHeader = ({ label, icon, actions, flexDirection = 'row', gap = 'sm', alignItems = 'center', justifyContent = 'space-between', py = 'sm', px = 'md', ...rest }) => {
+    return (jsxs(Stack, { flexDirection: flexDirection, alignItems: alignItems, justifyContent: justifyContent, gap: gap, py: py, px: px, ...rest, children: [jsxs(Stack, { alignItems: 'center', gap: 'sm', flex: 1, minWidth: '0', children: [icon !== undefined && (jsx(Icon, { icon: icon, size: 'md', strokeColor: 'textSecondary' })), jsx(Text, { variant: 'span', fontSize: 'sm', fontWeight: 'semibold', color: 'textPrimary', children: label })] }), actions !== undefined && (jsx(Stack, { alignItems: 'center', gap: 'xs', flexShrink: 0, children: actions }))] }));
 };
 CardHeader.displayName = 'Card.Header';
 
-const CardBody = ({ children, py = 'md', px = 'md', }) => {
-    return (jsx(Box, { py: py, px: px, children: children }));
+const CardBody = ({ children, py = 'md', px = 'md', flexDirection = 'column', gap = 'sm', ...rest }) => {
+    return (jsx(Stack, { flexDirection: flexDirection, gap: gap, py: py, px: px, ...rest, children: children }));
 };
 CardBody.displayName = 'Card.Body';
 
@@ -2346,14 +2346,23 @@ const VARIANT_ICONS = {
     warning: AlertWarningIcon,
     info: AlertInfoIcon,
 };
+/** Returns true if value is a React component type (function/class), false if it is a rendered node. */
+const isSvgComponent = (value) => typeof value === 'function';
 /**
  * Alert title row: renders the variant icon alongside the title text.
  * Must be used inside an `<Alert>` component.
  */
-const AlertTitle = ({ children }) => {
+const AlertTitle = ({ children, icon }) => {
     const { variant, accentColor } = useAlertContext();
-    const IconComponent = VARIANT_ICONS[variant];
-    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [IconComponent && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: jsx(IconComponent, { width: 20, height: 20 }) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
+    // Resolve which icon to render:
+    // - custom icon prop always takes precedence over the built-in variant icon
+    // - for "default" variant there is no built-in icon; custom icon adds one
+    const builtInIcon = VARIANT_ICONS[variant];
+    // Must be capitalised for JSX to treat it as a component (not an HTML tag)
+    const ResolvedIcon = icon && isSvgComponent(icon) ? icon : (icon === undefined ? (builtInIcon ?? null) : null);
+    const customNode = icon && !isSvgComponent(icon) ? icon : null;
+    const hasIcon = ResolvedIcon !== null || customNode !== null;
+    return (jsxs(Stack, { flexDirection: 'row', alignItems: 'center', gap: 'sm', children: [hasIcon && (jsx(Stack, { flexShrink: 0, alignItems: 'center', color: accentColor, width: '1.25rem', height: '1.25rem', "aria-hidden": true, children: ResolvedIcon ? (jsx(ResolvedIcon, { width: 20, height: 20 })) : (customNode) })), jsx(Text, { fontWeight: 'semibold', fontSize: 'sm', color: accentColor, children: children })] }));
 };
 AlertTitle.displayName = 'Alert.Title';
 
@@ -2387,9 +2396,9 @@ const VARIANT_ARIA_LIVE = {
  *   <Alert.Body>Your changes have been saved successfully.</Alert.Body>
  * </Alert>
  */
-const AlertBase = ({ variant = 'default', children, width = '100%' }) => {
+const AlertBase = ({ variant = 'default', children, width = '100%', outline = false, shadow = 'none', }) => {
     const { backgroundColor, borderColor, accentColor } = VARIANT_TOKENS[variant];
-    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: 'alert', "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: borderColor, borderWidth: '1px', borderStyle: 'solid', width: width, children: children }) }));
+    return (jsx(AlertContext.Provider, { value: { variant, accentColor }, children: jsx(Stack, { role: 'alert', "aria-live": VARIANT_ARIA_LIVE[variant], flexDirection: 'column', gap: 'xs', padding: 'md', borderRadius: 'lg', backgroundColor: backgroundColor, borderColor: outline ? borderColor : undefined, borderWidth: outline ? '1px' : undefined, borderStyle: outline ? 'solid' : undefined, boxShadow: shadow, width: width, children: children }) }));
 };
 AlertBase.displayName = 'Alert';
 const Alert = AlertBase;