@idealyst/components 1.0.82 → 1.0.84

package/src/ActivityIndicator/ActivityIndicator.styles.tsx

@@ -1,113 +1,87 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
 
-export const activityIndicatorStyles = StyleSheet.create((theme) => ({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    
-    variants: {
-      size: {
-        small: {
-          width: 20,
-          height: 20,
-        },
-        medium: {
-          width: 36,
-          height: 36,
-        },
-        large: {
-          width: 48,
-          height: 48,
-        },
-      },
-      intent: {
-        primary: {},
-        success: {},
-        error: {},
-        warning: {},
-        neutral: {},
-      },
-      animating: {
-        true: {
-          opacity: 1,
-        },
-        false: {
-          opacity: 0,
-        },
-      },
-    },
-  },
-  
-  spinner: {
-    borderRadius: 9999,
-    borderStyle: 'solid',
-    
-    // Web-specific animation styles
-    _web: {
-      borderColor: 'transparent',
-      animation: 'spin 1s linear infinite',
-      boxSizing: 'border-box',
-    },
-    
-    variants: {
-      size: {
-        small: {
-          width: 20,
-          height: 20,
-          borderWidth: 2,
-        },
-        medium: {
-          width: 36,
-          height: 36,
-          borderWidth: 3,
-        },
-        large: {
-          width: 48,
-          height: 48,
-          borderWidth: 4,
-        },
-      },
-      intent: {
-        primary: {
-          color: theme.intents?.primary?.main || '#3b82f6',
-          _web: {
-            borderTopColor: theme.intents?.primary?.main || '#3b82f6',
-            borderRightColor: theme.intents?.primary?.main || '#3b82f6',
-          },
-        },
-        success: {
-          color: theme.intents?.success?.main || '#22c55e',
-          _web: {
-            borderTopColor: theme.intents?.success?.main || '#22c55e',
-            borderRightColor: theme.intents?.success?.main || '#22c55e',
-          },
-        },
-        error: {
-          color: theme.intents?.error?.main || '#ef4444',
-          _web: {
-            borderTopColor: theme.intents?.error?.main || '#ef4444',
-            borderRightColor: theme.intents?.error?.main || '#ef4444',
-          },
-        },
-        warning: {
-          color: theme.intents?.warning?.main || '#f59e0b',
-          _web: {
-            borderTopColor: theme.intents?.warning?.main || '#f59e0b',
-            borderRightColor: theme.intents?.warning?.main || '#f59e0b',
-          },
-        },
-        neutral: {
-          color: theme.intents?.neutral?.main || '#6b7280',
-          _web: {
-            borderTopColor: theme.intents?.neutral?.main || '#6b7280',
-            borderRightColor: theme.intents?.neutral?.main || '#6b7280',
-          },
+type ActivityIndicatorSize = Size;
+type ActivityIndicatorIntent = Intent;
+
+type ActivityIndicatorVariants = {
+    size: ActivityIndicatorSize;
+    intent: ActivityIndicatorIntent;
+    animating: boolean;
+}
+
+export type ExpandedActivityIndicatorStyles = StylesheetStyles<keyof ActivityIndicatorVariants>;
+
+export type ActivityIndicatorStylesheet = {
+    container: ExpandedActivityIndicatorStyles;
+    spinner: ExpandedActivityIndicatorStyles;
+}
+
+function createContainerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
+        width: size.size,
+        height: size.size,
+    }));
+}
+
+function createSpinnerSizeVariants(theme: Theme) {
+    return buildSizeVariants(theme, 'activityIndicator', (size) => ({
+        width: size.size,
+        height: size.size,
+        borderWidth: size.borderWidth,
+    }));
+}
+
+function getSpinnerColor(theme: Theme, intent: ActivityIndicatorIntent) {
+    return theme.intents[intent].primary;
+}
+
+function createSpinnerStyles(theme: Theme) {
+    return ({ intent }: Partial<ActivityIndicatorVariants>) => {
+        const color = getSpinnerColor(theme, intent);
+        return {
+            borderRadius: 9999,
+            borderStyle: 'solid',
+            color,
+            variants: {
+                size: createSpinnerSizeVariants(theme),
+                animating: {
+                    true: {},
+                    false: {},
+                },
+            },
+            _web: {
+                borderColor: 'transparent',
+                borderTopColor: color,
+                borderRightColor: color,
+                animation: 'spin 1s linear infinite',
+                boxSizing: 'border-box',
+            },
+        } 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.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const activityIndicatorStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        variants: {
+            size: createContainerSizeVariants(theme),
+            animating: {
+                true: {
+                    opacity: 1,
+                },
+                false: {
+                    opacity: 0,
+                },
+            },
         },
-      },
-      animating: {
-        true: {},
-        false: {},
-      },
     },
-  },
-}));
+    spinner: createSpinnerStyles(theme),
+  };
+});

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ActivityIndicatorProps } from './types';
 import { activityIndicatorStyles } from './ActivityIndicator.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
+const ActivityIndicator = forwardRef<HTMLDivElement, ActivityIndicatorProps>(({
   animating = true,
-  size = 'medium',
+  size = 'md',
   intent = 'primary',
   color,
   style,
   testID,
   hidesWhenStopped = true,
-}) => {
+}, ref) => {
   // Handle numeric size
-  const sizeVariant = typeof size === 'number' ? 'medium' : size;
+  const sizeVariant = typeof size === 'number' ? 'md' : size;
   const customSize = typeof size === 'number' ? size : undefined;
-  
+
   // Apply variants using the correct Unistyles 3.0 pattern
   activityIndicatorStyles.useVariants({
-    size: sizeVariant as 'small' | 'medium' | 'large',
-    intent: intent as 'primary' | 'success' | 'error' | 'warning' | 'neutral',
-    animating: animating as boolean,
+    size: sizeVariant,
+    animating,
   });
 
   // Don't render if not animating and hidesWhenStopped is true
@@ -39,16 +39,18 @@ const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
   ];
 
   const spinnerStyleArray = [
-    activityIndicatorStyles.spinner,
-    customSize && {
+    activityIndicatorStyles.spinner({
+      intent,
+    }),
+    customSize ? {
       width: customSize,
       height: customSize,
       borderWidth: Math.max(2, customSize / 10),
-    },
-    color && { borderTopColor: color, borderRightColor: color },
+    } : {},
+    color ? { borderTopColor: color, borderRightColor: color } : {},
     // Add inline CSS animation
-    animating && {
-      animation: 'spin 1s linear infinite',
+    {
+      animation: animating ? 'spin 1s linear infinite' : undefined,
     },
   ];
 
@@ -56,6 +58,8 @@ const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
   const containerProps = getWebProps(containerStyleArray);
   const spinnerProps = getWebProps(spinnerStyleArray);
 
+  const mergedRef = useMergeRefs(ref, containerProps.ref);
+
   return (
     <>
       {/* Inject keyframes animation into the document head */}
@@ -67,11 +71,13 @@ const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
           }
         `}
       </style>
-      <div {...containerProps} data-testid={testID}>
+      <div {...containerProps} ref={mergedRef} data-testid={testID}>
         <div {...spinnerProps} />
       </div>
     </>
   );
-};
+});
+
+ActivityIndicator.displayName = 'ActivityIndicator';
 
 export default ActivityIndicator;

package/src/ActivityIndicator/index.ts

@@ -1,2 +1,5 @@
-export { default } from './ActivityIndicator.web';
-export type { ActivityIndicatorProps } from './types';
+import ActivityIndicatorComponent from './ActivityIndicator.web';
+
+export default ActivityIndicatorComponent;
+export { ActivityIndicatorComponent as ActivityIndicator };
+export * from './types';

package/src/ActivityIndicator/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './ActivityIndicator.web';
-export type { ActivityIndicatorProps } from './types';
+import ActivityIndicatorComponent from './ActivityIndicator.web';
+
+export default ActivityIndicatorComponent;
+export { ActivityIndicatorComponent as ActivityIndicator };
+export * from './types';

package/src/ActivityIndicator/types.ts

@@ -1,4 +1,9 @@
-import { ViewStyle } from 'react-native';
+import { Intent, Size } from '@idealyst/theme';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+// Component-specific type aliases for future extensibility
+export type ActivityIndicatorIntentVariant = Intent;
+export type ActivityIndicatorSizeVariant = Size;
 
 export interface ActivityIndicatorProps {
   /**
@@ -6,34 +11,34 @@ export interface ActivityIndicatorProps {
    * @default true
    */
   animating?: boolean;
-  
+
   /**
    * The size of the indicator
    * @default "medium"
    */
-  size?: 'small' | 'medium' | 'large' | number;
-  
+  size?: ActivityIndicatorSizeVariant;
+
   /**
    * The color/intent of the indicator
    * @default "primary"
    */
-  intent?: 'primary' | 'neutral' | 'success' | 'error' | 'warning';
-  
+  intent?: ActivityIndicatorIntentVariant;
+
   /**
    * Custom color to override intent
    */
   color?: string;
-  
+
   /**
    * Additional styles to apply to the container
    */
-  style?: ViewStyle;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test identifier for testing
    */
   testID?: string;
-  
+
   /**
    * Whether to hide the indicator when not animating
    * @default true

package/src/Alert/Alert.native.tsx

@@ -0,0 +1,113 @@
+import React, { isValidElement, forwardRef, ComponentRef } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { alertStyles } from './Alert.styles';
+import { isIconName } from '../Icon/icon-resolver';
+import type { AlertProps } from './types';
+
+// Default icon names for each intent
+const defaultIcons = {
+  primary: 'information',
+  success: 'check-circle',
+  error: 'alert-circle',
+  warning: 'alert',
+  info: 'information',
+  neutral: 'circle',
+};
+
+const Alert = forwardRef<ComponentRef<typeof View>, 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 displayIcon = icon !== undefined ? icon : (showIcon ? defaultIcons[intent] : null);
+
+  // Helper to render icon
+  const renderIcon = () => {
+    if (!displayIcon) return null;
+
+    if (typeof displayIcon === 'string' && isIconName(displayIcon)) {
+      return (
+        <MaterialCommunityIcons
+          name={displayIcon}
+          size={20}
+          style={alertStyles.iconContainer}
+        />
+      );
+    } else if (isValidElement(displayIcon)) {
+      return displayIcon;
+    }
+    return null;
+  };
+
+  return (
+    <View
+      ref={ref}
+      style={[alertStyles.container, style]}
+      testID={testID}
+      accessibilityRole="alert"
+    >
+      {displayIcon && (
+        <View style={alertStyles.iconContainer}>
+          {renderIcon()}
+        </View>
+      )}
+
+      <View style={alertStyles.content}>
+        {title && (
+          <Text style={alertStyles.title}>
+            {title}
+          </Text>
+        )}
+
+        {message && (
+          <Text style={alertStyles.message}>
+            {message}
+          </Text>
+        )}
+
+        {children}
+
+        {actions && (
+          <View style={alertStyles.actions}>
+            {actions}
+          </View>
+        )}
+      </View>
+
+      {dismissible && onDismiss && (
+        <TouchableOpacity
+          style={alertStyles.closeButton}
+          onPress={onDismiss}
+          accessibilityLabel="Dismiss alert"
+          accessibilityRole="button"
+        >
+          <MaterialCommunityIcons
+            name="close"
+            size={16}
+            style={alertStyles.closeIcon}
+          />
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+});
+
+Alert.displayName = 'Alert';
+
+export default Alert;