@idealyst/components 1.0.82 → 1.0.84

package/src/Alert/Alert.styles.tsx

@@ -0,0 +1,304 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme, Intent, CompoundVariants} from '@idealyst/theme';
+
+type AlertType = 'filled' | 'outlined' | 'soft';
+type AlertIntent = Intent | 'info'; // Alert includes 'info' which maps to primary
+
+export type AlertVariants = {
+    type: AlertType;
+    intent: AlertIntent;
+}
+
+
+/**
+ * Create type variants (structure only, colors handled by compound variants)
+ */
+const TypeVariants = {
+    filled: {
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+    },
+    outlined: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+    },
+    soft: {
+        borderWidth: 1,
+        borderStyle: 'solid' as const,
+    }
+} as const;
+
+/**
+ * Create compound variants for container (type + intent combinations)
+ */
+function createContainerCompoundVariants(theme: Theme) {
+    const compoundVariants: CompoundVariants<keyof AlertVariants> = [];
+
+    // Process standard intents from theme
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        // Filled + intent
+        compoundVariants.push({
+            intent,
+            type: 'filled',
+            styles: {
+                backgroundColor: intentValue.primary,
+                borderColor: intentValue.primary,
+            },
+        });
+
+        // Outlined + intent
+        compoundVariants.push({
+            intent,
+            type: 'outlined',
+            styles: {
+                borderColor: intentValue.primary,
+            },
+        });
+
+        // Soft + intent
+        compoundVariants.push({
+            intent,
+            type: 'soft',
+            styles: {
+                backgroundColor: intentValue.light,
+                borderColor: intentValue.light,
+            },
+        });
+    }
+
+    // Add 'info' intent (maps to primary)
+    const primaryIntent = theme.intents.primary;
+    compoundVariants.push({
+        intent: 'info',
+        type: 'filled',
+        styles: {
+            backgroundColor: primaryIntent.primary,
+            borderColor: primaryIntent.primary,
+        },
+    });
+    compoundVariants.push({
+        intent: 'info',
+        type: 'outlined',
+        styles: {
+            borderColor: primaryIntent.primary,
+        },
+    });
+    compoundVariants.push({
+        intent: 'info',
+        type: 'soft',
+        styles: {
+            backgroundColor: primaryIntent.light,
+            borderColor: primaryIntent.light,
+        },
+    });
+
+    return compoundVariants;
+}
+
+/**
+ * Create compound variants for icon/title colors (type + intent combinations)
+ */
+function createIconTitleCompoundVariants(theme: Theme) {
+    const compoundVariants: CompoundVariants<keyof AlertVariants> = [];
+
+    // Process standard intents from theme
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        // Filled type: use contrast color
+        compoundVariants.push({
+            intent,
+            type: 'filled',
+            styles: {
+                color: intentValue.contrast,
+            },
+        });
+
+        // Outlined type: use primary color
+        compoundVariants.push({
+            intent,
+            type: 'outlined',
+            styles: {
+                color: intentValue.primary,
+            },
+        });
+
+        // Soft type: use primary color
+        compoundVariants.push({
+            intent,
+            type: 'soft',
+            styles: {
+                color: intentValue.primary,
+            },
+        });
+    }
+
+    // Add 'info' intent (maps to primary)
+    const primaryIntent = theme.intents.primary;
+    compoundVariants.push({
+        intent: 'info',
+        type: 'filled',
+        styles: {
+            color: primaryIntent.contrast,
+        },
+    });
+    compoundVariants.push({
+        intent: 'info',
+        type: 'outlined',
+        styles: {
+            color: primaryIntent.primary,
+        },
+    });
+    compoundVariants.push({
+        intent: 'info',
+        type: 'soft',
+        styles: {
+            color: primaryIntent.primary,
+        },
+    });
+
+    return compoundVariants;
+}
+
+/**
+ * Create compound variants for message colors (type + intent combinations)
+ */
+function createMessageCompoundVariants(theme: Theme): CompoundVariants<keyof AlertVariants> {
+    const compoundVariants: CompoundVariants<keyof AlertVariants> = [];
+
+    // Process standard intents from theme
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        // Filled type: use contrast color
+        compoundVariants.push({
+            intent,
+            type: 'filled',
+            styles: {
+                color: intentValue.contrast,
+            },
+        });
+
+        // Outlined type: use primary text color
+        compoundVariants.push({
+            intent,
+            type: 'outlined',
+            styles: {
+                color: theme.colors.text.primary,
+            },
+        });
+
+        // Soft type: use primary text color
+        compoundVariants.push({
+            intent,
+            type: 'soft',
+            styles: {
+                color: theme.colors.text.primary,
+            },
+        });
+    }
+
+    // Add 'info' intent (maps to primary)
+    const primaryIntent = theme.intents.primary;
+    compoundVariants.push({
+        intent: 'info',
+        type: 'filled',
+        styles: {
+            color: primaryIntent.contrast,
+        },
+    });
+    compoundVariants.push({
+        intent: 'info',
+        type: 'outlined',
+        styles: {
+            color: theme.colors.text.primary,
+        },
+    });
+    compoundVariants.push({
+        intent: 'info',
+        type: 'soft',
+        styles: {
+            color: theme.colors.text.primary,
+        },
+    });
+
+    return compoundVariants;
+}
+
+export const alertStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-start',
+            gap: 8,
+            padding: 16,
+            borderRadius: 8,
+            borderWidth: 1,
+            borderStyle: 'solid' as const,
+            variants: {
+                type: TypeVariants,
+            } as const,
+            compoundVariants: createContainerCompoundVariants(theme),
+        } as const,
+        iconContainer: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            width: 24,
+            height: 24,
+            compoundVariants: createIconTitleCompoundVariants(theme),
+        } as const,
+        content: {
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+        },
+        title: {
+            fontSize: 16,
+            lineHeight: 24,
+            fontWeight: '600',
+            compoundVariants: createIconTitleCompoundVariants(theme),
+        },
+        message: {
+            fontSize: 14,
+            lineHeight: 20,
+            compoundVariants: createMessageCompoundVariants(theme),
+        },
+        actions: {
+            marginTop: 4,
+            display: 'flex',
+            flexDirection: 'row',
+            gap: 8,
+        },
+        closeButton: {
+            padding: 4,
+            backgroundColor: 'transparent',
+            borderRadius: 4,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            _web: {
+                border: 'none',
+                cursor: 'pointer',
+                outline: 'none',
+                _hover: {
+                    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                },
+            },
+        },
+        closeIcon: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: 16,
+            height: 16,
+        },
+    } as const;
+});

package/src/Alert/Alert.web.tsx

@@ -0,0 +1,123 @@
+import React, { isValidElement, forwardRef } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { alertStyles } from './Alert.styles';
+import type { AlertProps } from './types';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import { resolveIconPath, isIconName } from '../Icon/icon-resolver';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+// Default icons for each intent
+const defaultIcons = {
+  primary: 'information',
+  success: 'check-circle',
+  error: 'alert-circle',
+  warning: 'alert',
+  info: 'information',
+  neutral: 'record-circle',
+};
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(({
+  title,
+  message,
+  children,
+  intent = 'neutral',
+  type = 'soft',
+  icon,
+  showIcon = true,
+  dismissible = false,
+  onDismiss,
+  actions,
+  style,
+  testID,
+}, ref) => {
+  // Apply variants to stylesheet
+  alertStyles.useVariants({
+    type,
+    intent,
+  });
+
+  const containerProps = getWebProps([alertStyles.container, style as any]);
+  const iconContainerProps = getWebProps([alertStyles.iconContainer]);
+  const contentProps = getWebProps([alertStyles.content]);
+  const titleProps = getWebProps([alertStyles.title]);
+  const messageProps = getWebProps([alertStyles.message]);
+  const actionsProps = getWebProps([alertStyles.actions]);
+  const closeButtonProps = getWebProps([alertStyles.closeButton]);
+  const closeIconProps = getWebProps([alertStyles.closeIcon]);
+
+  const displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
+
+  // Helper to render icon
+  const renderIcon = (iconProp: typeof displayIcon) => {
+    if (!iconProp) return null;
+
+    if (isIconName(iconProp)) {
+      const iconPath = resolveIconPath(iconProp);
+      return (
+        <IconSvg
+          path={iconPath}
+          {...iconContainerProps}
+          aria-label={iconProp}
+        />
+      );
+    } else if (isValidElement(iconProp)) {
+      return iconProp;
+    }
+
+    return null;
+  };
+
+  const mergedRef = useMergeRefs(ref, containerProps.ref);
+
+  return (
+    <div
+      {...containerProps}
+      ref={mergedRef}
+      data-testid={testID}
+      role="alert"
+    >
+      {displayIcon && renderIcon(displayIcon)}
+
+      <div {...contentProps}>
+        {title && (
+          <div {...titleProps}>
+            {title}
+          </div>
+        )}
+
+        {message && (
+          <div {...messageProps}>
+            {message}
+          </div>
+        )}
+
+        {children}
+
+        {actions && (
+          <div {...actionsProps}>
+            {actions}
+          </div>
+        )}
+      </div>
+
+      {dismissible && onDismiss && (
+        <button
+          {...closeButtonProps}
+          onClick={onDismiss}
+          aria-label="Dismiss alert"
+          type="button"
+        >
+          <IconSvg
+            path={resolveIconPath('close')}
+            {...closeIconProps}
+            aria-label="close"
+          />
+        </button>
+      )}
+    </div>
+  );
+});
+
+Alert.displayName = 'Alert';
+
+export default Alert;

package/src/Alert/index.native.ts

@@ -0,0 +1,5 @@
+import AlertComponent from './Alert.native';
+
+export default AlertComponent;
+export { AlertComponent as Alert };
+export type { AlertProps, AlertIntentVariant, AlertType} from './types';

package/src/Alert/index.ts

@@ -0,0 +1,5 @@
+import AlertComponent from './Alert.web';
+
+export default AlertComponent;
+export { AlertComponent as Alert };
+export type { AlertProps, AlertIntentVariant, AlertType } from './types';

package/src/Alert/index.web.ts

@@ -0,0 +1,5 @@
+import AlertComponent from './Alert.web';
+
+export default AlertComponent;
+export { AlertComponent as Alert };
+export type { AlertProps, AlertIntentVariant, AlertType } from './types';

package/src/Alert/types.ts

@@ -0,0 +1,21 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { Intent } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type AlertIntentVariant = Intent;
+export type AlertType= 'filled' | 'outlined' | 'soft';
+
+export interface AlertProps {
+  title?: string;
+  message?: string;
+  children?: React.ReactNode;
+  intent?: AlertIntentVariant;
+  type?: AlertType;
+  icon?: React.ReactNode;
+  showIcon?: boolean;
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  actions?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/Avatar/Avatar.native.tsx

@@ -1,17 +1,17 @@
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import { View, Text, Image } from 'react-native';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
 
-const Avatar: React.FC<AvatarProps> = ({
+const Avatar = forwardRef<View, AvatarProps>(({
   src,
   alt,
   fallback,
-  size = 'medium',
+  size = 'md',
   shape = 'circle',
   style,
   testID,
-}) => {
+}, ref) => {
   const [hasError, setHasError] = useState(false);
 
   avatarStyles.useVariants({
@@ -24,7 +24,7 @@ const Avatar: React.FC<AvatarProps> = ({
   };
 
   return (
-    <View style={[avatarStyles.avatar, style]} testID={testID}>
+    <View ref={ref} style={[avatarStyles.avatar, style]} testID={testID}>
       {src && !hasError ? (
         <Image
           source={typeof src === 'string' ? { uri: src } : src}
@@ -39,6 +39,8 @@ const Avatar: React.FC<AvatarProps> = ({
       )}
     </View>
   );
-};
+});
+
+Avatar.displayName = 'Avatar';
 
 export default Avatar; 

package/src/Avatar/Avatar.styles.tsx

@@ -1,67 +1,73 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
 
-export const avatarStyles = StyleSheet.create((theme) => ({
-  avatar: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
-    overflow: 'hidden',
-    
-    variants: {
-      size: {
-        small: {
-          width: 32,
-          height: 32,
-        },
-        medium: {
-          width: 40,
-          height: 40,
-        },
-        large: {
-          width: 48,
-          height: 48,
-        },
-        xlarge: {
-          width: 64,
-          height: 64,
-        },
-      },
-      shape: {
+type AvatarSize = Size;
+type AvatarShape = 'circle' | 'square';
+
+type AvatarVariants = {
+    size: AvatarSize;
+    shape: AvatarShape;
+}
+
+export type ExpandedAvatarStyles = StylesheetStyles<keyof AvatarVariants>;
+
+export type AvatarStylesheet = {
+    avatar: ExpandedAvatarStyles;
+    image: ExpandedAvatarStyles;
+    fallback: ExpandedAvatarStyles;
+}
+
+function createAvatarSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'avatar', (size) => ({
+        width: size.width,
+        height: size.height,
+    }));
+}
+
+function createAvatarShapeVariants(theme: Theme) {
+    return {
         circle: {
-          borderRadius: 9999,
+            borderRadius: 9999,
         },
         square: {
-          borderRadius: theme.borderRadius?.md || 8,
-        },
-      },
-    },
-  },
-  
-  image: {
-    width: '100%',
-    height: '100%',
-  },
-  
-  fallback: {
-    color: theme.colors?.text?.primary || '#374151',
-    fontWeight: '600',
-    
-    variants: {
-      size: {
-        small: {
-          fontSize: 14,
-        },
-        medium: {
-          fontSize: 16,
+            borderRadius: 8,
         },
-        large: {
-          fontSize: 18,
+    } as const;
+}
+
+function createFallbackSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'avatar', (size) => ({
+        fontSize: size.fontSize,
+    }));
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const avatarStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    avatar: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: theme.colors.surface.secondary,
+        overflow: 'hidden',
+        variants: {
+            size: createAvatarSizeVariants(theme),
+            shape: createAvatarShapeVariants(theme),
         },
-        xlarge: {
-          fontSize: 24,
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    fallback: {
+        color: theme.colors.text.primary,
+        fontWeight: '600',
+        variants: {
+            size: createFallbackSizeVariants(theme),
         },
-      },
     },
-  },
-})); 
+  };
+});

package/src/Avatar/Avatar.web.tsx

@@ -1,17 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { AvatarProps } from './types';
 import { avatarStyles } from './Avatar.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const Avatar: React.FC<AvatarProps> = ({
+const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({
   src,
   alt,
   fallback,
-  size = 'medium',
+  size = 'md',
   shape = 'circle',
   style,
   testID,
-}) => {
+}, ref) => {
   const [hasError, setHasError] = useState(false);
 
   avatarStyles.useVariants({
@@ -21,7 +22,7 @@ const Avatar: React.FC<AvatarProps> = ({
 
   const avatarStyleArray = [avatarStyles.avatar, style];
   const avatarProps = getWebProps(avatarStyleArray);
-  
+
   // Generate fallback text styles with proper theming and size
   const fallbackStyleArray = [avatarStyles.fallback];
   const fallbackProps = getWebProps(fallbackStyleArray);
@@ -30,11 +31,13 @@ const Avatar: React.FC<AvatarProps> = ({
     setHasError(true);
   };
 
+  const mergedRef = useMergeRefs(ref, avatarProps.ref);
+
   return (
-    <div {...avatarProps} data-testid={testID}>
+    <div {...avatarProps} ref={mergedRef} data-testid={testID}>
       {src && !hasError ? (
         <img
-          src={src}
+          src={src as any}
           alt={alt}
           onError={handleImageError}
           style={{ width: '100%', height: '100%', objectFit: 'cover' }}
@@ -46,6 +49,8 @@ const Avatar: React.FC<AvatarProps> = ({
       )}
     </div>
   );
-};
+});
+
+Avatar.displayName = 'Avatar';
 
 export default Avatar;