@idealyst/components 1.0.83 → 1.0.84

package/src/Avatar/index.ts

@@ -1,2 +1,5 @@
-export { default } from './Avatar.web';
-export * from './types'; 
+import AvatarComponent from './Avatar.web';
+
+export default AvatarComponent;
+export { AvatarComponent as Avatar };
+export * from './types';

package/src/Avatar/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './Avatar.web';
-export * from './types'; 
+import AvatarComponent from './Avatar.web';
+
+export default AvatarComponent;
+export { AvatarComponent as Avatar };
+export * from './types';

package/src/Avatar/types.ts

@@ -1,41 +1,47 @@
-import type { ColorVariant } from '../theme/variants';
+import { Color } from '@idealyst/theme';
+import type { StyleProp, ViewStyle, ImageSourcePropType } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type AvatarColorVariant = Color;
+export type AvatarSizeVariant = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarShapeVariant = 'circle' | 'square';
 
 export interface AvatarProps {
   /**
    * Image source (URL or require())
    */
-  src?: string | any;
-  
+  src?: string | ImageSourcePropType;
+
   /**
    * Alt text for the image
    */
   alt?: string;
-  
+
   /**
    * Fallback text (usually initials)
    */
   fallback?: string;
-  
+
   /**
    * Size of the avatar
    */
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  
+  size?: AvatarSizeVariant;
+
   /**
    * Shape of the avatar
    */
-  shape?: 'circle' | 'square';
-  
+  shape?: AvatarShapeVariant;
+
   /**
    * The color scheme of the avatar (for background when no image)
    */
-  color?: ColorVariant;
-  
+  color?: AvatarColorVariant;
+
   /**
    * Additional styles
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */

package/src/Badge/Badge.native.tsx

@@ -1,43 +1,88 @@
-import React from 'react';
+import React, { isValidElement, forwardRef } from 'react';
 import { View, Text } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { BadgeProps } from './types';
 import { badgeStyles } from './Badge.styles';
+import { isIconName } from '../Icon/icon-resolver';
 
-const Badge: React.FC<BadgeProps> = ({
+const Badge = forwardRef<View, BadgeProps>(({
   children,
-  size = 'medium',
-  variant = 'filled',
+  icon,
+  size = 'md',
+  type = 'filled',
   color = 'blue',
   style,
   testID,
-}) => {
+}, ref) => {
   badgeStyles.useVariants({
     size,
-    variant: variant as any,
-    color,
+    type,
   });
 
-  if (variant === 'dot') {
+  // Call dynamic styles with color variant
+  const badgeStyle = badgeStyles.badge({ color });
+  const textStyle = badgeStyles.text({ color });
+
+  // Map badge size to icon size
+  const iconSize = size === 'sm' ? 12 : size === 'md' ? 14 : 16;
+
+  // Helper to render icon
+  const renderIcon = () => {
+    if (!icon) return null;
+
+    if (typeof icon === 'string' && isIconName(icon)) {
+      return (
+        <MaterialCommunityIcons
+          name={icon}
+          size={iconSize}
+          color={textStyle.color}
+        />
+      );
+    } else if (isValidElement(icon)) {
+      return icon;
+    }
+    return null;
+  };
+
+
+  if (type === 'dot') {
     return (
       <View
-        style={[badgeStyles.badge, style]}
+        style={[badgeStyle, style]}
         testID={testID}
         accessibilityLabel="status indicator"
       />
     );
   }
 
+  const hasIcon = Boolean(icon);
+  const hasChildren = Boolean(children);
+
   return (
     <View
-      style={[badgeStyles.badge, style]}
+      ref={ref}
+      style={[badgeStyle, style]}
       testID={testID}
       accessibilityLabel="badge"
     >
-      <Text style={badgeStyles.text}>
-        {children}
-      </Text>
+      {hasIcon && hasChildren ? (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+          {renderIcon()}
+          <Text style={textStyle}>
+            {children}
+          </Text>
+        </View>
+      ) : hasIcon ? (
+        renderIcon()
+      ) : (
+        <Text style={textStyle}>
+          {children}
+        </Text>
+      )}
     </View>
   );
-};
+});
+
+Badge.displayName = 'Badge';
 
 export default Badge; 

package/src/Badge/Badge.styles.tsx

@@ -1,154 +1,140 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { generateBadgeCompoundVariants } from '../theme/variantHelpers';
+import { Theme, StylesheetStyles, getColorFromString, Size, Color } from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
 
-export const badgeStyles = StyleSheet.create((theme) => ({
-  badge: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 9999,
-    
-    // Web-specific styles for better text centering
-    _web: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      boxSizing: 'border-box',
-      // Text styles for web (since text is rendered directly in the container)
-      fontSize: 12, // Default medium size
-      fontWeight: '600',
-      color: '#ffffff',
-      lineHeight: 1, // Use ratio instead of fixed value for better centering
-    },
-    
-    variants: {
-      size: {
-        small: {
-          minWidth: 16,
-          height: 16,
-          paddingHorizontal: 4,
-        },
-        medium: {
-          minWidth: 20,
-          height: 20,
-          paddingHorizontal: 6,
-        },
-        large: {
-          minWidth: 24,
-          height: 24,
-          paddingHorizontal: 8,
-        },
-      },
-      variant: {
+type BadgeType = 'filled' | 'outlined' | 'dot';
+
+type BadgeVariants = {
+    size: Size;
+    type: BadgeType;
+    color: Color;
+}
+
+export type ExpandedBadgeStyles = StylesheetStyles<keyof BadgeVariants>;
+
+export type BadgeStylesheet = {
+    badge: ExpandedBadgeStyles;
+    content: ExpandedBadgeStyles;
+    icon: ExpandedBadgeStyles;
+    text: ExpandedBadgeStyles;
+}
+
+/**
+ * Create type variants for badge
+ */
+function createBadgeTypeVariants(theme: Theme, color: Color) {
+    const colorValue = getColorFromString(theme, color);
+    return {
         filled: {
-          // Colors handled by compound variants
+            borderWidth: 0,
+            backgroundColor: colorValue,
         },
         outlined: {
-          backgroundColor: 'transparent',
-          borderWidth: 1,
+            backgroundColor: 'transparent',
+            borderWidth: 2,
+            borderStyle: 'solid',
+            borderColor: colorValue,
         },
         dot: {
-          minWidth: 8,
-          width: 8,
-          height: 8,
-          paddingHorizontal: 0, // Override size variant padding
-          paddingVertical: 0,
-        },
-      },
-      // Dynamically generated color variants (placeholder - actual styling in compound variants)
-      color: Object.fromEntries([
-        // All palette colors including shade-specific variants
-        ...(theme.palettes ? Object.entries(theme.palettes).flatMap(([colorKey, palette]) => [
-          // Base color
-          [colorKey, {}],
-          // All shade variants
-          ...Object.keys(palette).map((shade) => [`${colorKey}.${shade}`, {}])
-        ]) : [
-          // Fallback base colors
-          ['blue', {}], ['green', {}], ['red', {}], ['amber', {}], 
-          ['gray', {}], ['purple', {}], ['pink', {}], ['cyan', {}]
-        ]),
-        // Semantic colors
-        ['primary', {}],
-        ['secondary', {}],
-        ['disabled', {}],
-        ['inverse', {}],
-        ['muted', {}],
-      ]),
-    },
-    
-    // Dynamically generated compound variants plus static size variants
-    compoundVariants: [
-      ...generateBadgeCompoundVariants(theme),
-      // Web-specific text size variants
-      {
-        size: 'small',
-        styles: {
-          _web: {
-            fontSize: 10,
-          },
-        },
-      },
-      {
-        size: 'medium',
-        styles: {
-          _web: {
-            fontSize: 12,
-          },
-        },
-      },
-      {
-        size: 'large',
-        styles: {
-          _web: {
-            fontSize: 14,
-          },
-        },
-      },
-    ],
-  },
-  
-  text: {
-    color: '#ffffff',
-    fontWeight: '600',
-    textAlign: 'center',
-    
-    variants: {
-      size: {
-        small: {
-          fontSize: 10,
-          lineHeight: 12, // Tight line height for better vertical centering
-        },
-        medium: {
-          fontSize: 12,
-          lineHeight: 14,
-        },
-        large: {
-          fontSize: 14,
-          lineHeight: 16,
-        },
-      },
-      variant: {
+            minWidth: 8,
+            width: 8,
+            height: 8,
+            paddingHorizontal: 0,
+            paddingVertical: 0,
+            backgroundColor: colorValue,
+        },
+    } as const;
+}
+
+/**
+ * Create type variants for badge text
+ */
+function createTextTypeVariants(theme: Theme, color: Color){
+    const colorValue = getColorFromString(theme, color);
+    return {
         filled: {
-          color: '#ffffff',
+            color: theme.colors.text.inverse,
         },
         outlined: {
-          // Colors handled by compound variants
+            color: colorValue,
         },
         dot: {
-          // No text for dot variant
+            display: 'none',
         },
-      },
+    } as const;
+}
+
+/**
+ * Generate badge container styles
+ */
+function createBadgeStyles(theme: Theme) {
+    return ({ color }: Partial<BadgeVariants>) => {
+        return {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 9999,
+            variants: {
+                size: buildSizeVariants(theme, 'badge', (size) => ({
+                    minWidth: size.minWidth,
+                    height: size.height,
+                    paddingHorizontal: size.paddingHorizontal,
+                })),
+                type: createBadgeTypeVariants(theme, color),
+            },
+            _web: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                fontWeight: '600',
+                lineHeight: 1,
+            },
+        } as const;
+    }
+}
+
+/**
+ * Generate badge text styles
+ */
+function createTextStyles(theme: Theme) {
+    return ({ color }: Partial<BadgeVariants>) => {
+        return {
+            fontWeight: '600',
+            textAlign: 'center',
+            variants: {
+                size: buildSizeVariants(theme, 'badge', (size) => ({
+                    fontSize: size.fontSize,
+                    lineHeight: size.lineHeight,
+                })),
+                type: createTextTypeVariants(theme, color),
+            },
+        } as const;
+    };
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+export const badgeStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    badge: createBadgeStyles(theme),
+    content: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
     },
-    
-    compoundVariants: [
-      // Outlined variant text colors - dynamically generated
-      ...Object.entries(theme.palettes || {}).map(([colorKey, palette]: [string, any]) => ({
-        variant: 'outlined',
-        color: colorKey,
-        styles: {
-          color: palette?.[500] || '#6b7280',
+    icon: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            size: buildSizeVariants(theme, 'badge', (size) => ({
+                width: size.iconSize,
+                height: size.iconSize,
+            })),
         },
-      })),
-    ],
-  },
-})); 
+    },
+    text: createTextStyles(theme),
+  };
+});

package/src/Badge/Badge.web.tsx

@@ -1,29 +1,68 @@
-import React from 'react';
+import React, { isValidElement, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { BadgeProps } from './types';
 import { badgeStyles } from './Badge.styles';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+// Extended props to include path props added by Babel plugin
+interface InternalBadgeProps extends BadgeProps {
+  iconPath?: string;
+}
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props: InternalBadgeProps, ref) => {
+  const {
+    children,
+    size = 'md',
+    type = 'filled',
+    color = 'blue',
+    icon,
+    iconPath,
+    style,
+    testID,
+  } = props;
 
-const Badge: React.FC<BadgeProps> = ({
-  children,
-  size = 'medium',
-  variant = 'filled',
-  color = 'blue',
-  style,
-  testID,
-}) => {
   badgeStyles.useVariants({
     size,
-    variant: variant as any,
-    color,
+    type,
   });
+  
+  const badgeStyle = badgeStyles.badge({ color });
+  const contentStyle = badgeStyles.content;
+  const textStyle = badgeStyles.text({ color });
+  
+  const badgeProps = getWebProps(badgeStyle);
+  const contentProps = getWebProps(contentStyle);
+  const textProps = getWebProps(textStyle);
+  const iconProps = getWebProps([badgeStyles.icon, textStyle]);
+
+  // Helper to render icon
+  const renderIcon = (iconProp: typeof icon, path?: string) => {
+    if (typeof iconProp === 'string' && path) {
+      // Render IconSvg directly with the path from Babel plugin
+      // Don't pass size prop - let the style control the dimensions entirely
+      return (
+        <IconSvg
+          path={path}
+          {...iconProps}
+          aria-label={iconProp}
+        />
+      );
+    } else if (isValidElement(iconProp)) {
+      // Render custom component as-is
+      return iconProp;
+    }
+    return null;
+  };
 
-  const badgeStyleArray = [badgeStyles.badge, style];
-  const badgeProps = getWebProps(badgeStyleArray);
+  const mergedRef = useMergeRefs(ref, badgeProps.ref);
 
-  if (variant === 'dot') {
+  if (type === 'dot') {
     return (
       <span
         {...badgeProps}
+        style={style as React.CSSProperties}
+        ref={mergedRef}
         data-testid={testID}
         role="status"
         aria-label="status indicator"
@@ -31,15 +70,32 @@ const Badge: React.FC<BadgeProps> = ({
     );
   }
 
+  const hasIcon = !!icon;
+
   return (
     <span
       {...badgeProps}
+      style={style as React.CSSProperties}
+      ref={mergedRef}
       data-testid={testID}
       role="status"
     >
-      {children}
+      {hasIcon ? (
+        <span {...contentProps}>
+          {renderIcon(icon, iconPath)}
+          <span {...textProps}>
+            {children}
+            </span>
+          </span>
+      ) : (
+        <span {...textProps}>
+          {children}
+        </span>
+      )}
     </span>
   );
-};
+});
+
+Badge.displayName = 'Badge';
 
 export default Badge; 

package/src/Badge/index.ts

@@ -1,2 +1,5 @@
-export { default } from './Badge.web';
-export * from './types'; 
+import BadgeComponent from './Badge.web';
+
+export default BadgeComponent;
+export { BadgeComponent as Badge };
+export * from './types';

package/src/Badge/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './Badge.web';
-export * from './types'; 
+import BadgeComponent from './Badge.web';
+
+export default BadgeComponent;
+export { BadgeComponent as Badge };
+export * from './types';

package/src/Badge/types.ts

@@ -1,32 +1,44 @@
-import { ReactNode } from 'react';
-import type { DisplayColorVariant } from '../theme/variants';
+import type { CSSProperties, ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Color, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type BadgeColorVariant = Color;
+export type BadgeSizeVariant = Size;
+export type BadgeType = 'filled' | 'outlined' | 'dot';
 
 export interface BadgeProps {
   /**
    * The content to display inside the badge
    */
   children?: ReactNode;
-  
+
   /**
    * The size of the badge
    */
-  size?: 'small' | 'medium' | 'large';
-  
+  size?: BadgeSizeVariant;
+
   /**
    * The visual style variant of the badge
    */
-  variant?: 'filled' | 'outlined' | 'dot';
-  
+  type?: BadgeType;
+
   /**
    * The color scheme of the badge
    */
-  color?: DisplayColorVariant;
-  
+  color?: BadgeColorVariant;
+
+  /**
+   * Icon to display. Can be an icon name or custom component (ReactNode)
+   */
+  icon?: IconName | ReactNode;
+
   /**
    * Additional styles
    */
-  style?: any;
-  
+  style?: CSSProperties | StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */