@idealyst/components 1.0.68 → 1.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -41,7 +41,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.0.68",
+    "@idealyst/theme": "^1.0.69",
     "@mdi/js": "^7.4.47",
     "@mdi/react": "^1.6.1",
     "@react-native-vector-icons/common": "^12.0.1",

package/src/ActivityIndicator/ActivityIndicator.native.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ActivityIndicator as RNActivityIndicator, View } from 'react-native';
+import { ActivityIndicatorProps } from './types';
+import { activityIndicatorStyles } from './ActivityIndicator.styles';
+
+const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
+  animating = true,
+  size = 'medium',
+  intent = 'primary',
+  color,
+  style,
+  testID,
+  hidesWhenStopped = true,
+}) => {
+  // Handle numeric size
+  const sizeVariant = typeof size === 'number' ? 'medium' : size;
+  const customSize = typeof size === 'number' ? size : undefined;
+  
+  // Map our size variants to React Native's size prop
+  const rnSize = sizeVariant === 'small' ? 'small' : 'large';
+  
+  activityIndicatorStyles.useVariants({
+    size: sizeVariant,
+    intent,
+    animating,
+  });
+
+  // Get the color from styles or use custom color
+  const indicatorColor = color || activityIndicatorStyles.spinner.color;
+
+  return (
+    <View 
+      style={[
+        activityIndicatorStyles.container,
+        customSize && {
+          width: customSize,
+          height: customSize,
+        },
+        style
+      ]}
+      testID={testID}
+    >
+      <RNActivityIndicator
+        animating={animating}
+        size={customSize || rnSize}
+        color={indicatorColor}
+        hidesWhenStopped={hidesWhenStopped}
+      />
+    </View>
+  );
+};
+
+export default ActivityIndicator;

package/src/ActivityIndicator/ActivityIndicator.styles.tsx

@@ -0,0 +1,113 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+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',
+          },
+        },
+      },
+      animating: {
+        true: {},
+        false: {},
+      },
+    },
+  },
+}));

package/src/ActivityIndicator/ActivityIndicator.web.css

@@ -0,0 +1,8 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/ActivityIndicator/ActivityIndicator.web.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { ActivityIndicatorProps } from './types';
+import { activityIndicatorStyles } from './ActivityIndicator.styles';
+import './ActivityIndicator.web.css';
+
+const ActivityIndicator: React.FC<ActivityIndicatorProps> = ({
+  animating = true,
+  size = 'medium',
+  intent = 'primary',
+  color,
+  style,
+  testID,
+  hidesWhenStopped = true,
+}) => {
+  // Handle numeric size
+  const sizeVariant = typeof size === 'number' ? 'medium' : 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,
+  });
+
+  // Don't render if not animating and hidesWhenStopped is true
+  if (!animating && hidesWhenStopped) {
+    return null;
+  }
+
+  // Create the style array following the official documentation pattern
+  const containerStyleArray = [
+    activityIndicatorStyles.container,
+    customSize && {
+      width: customSize,
+      height: customSize,
+    },
+    style,
+  ];
+
+  const spinnerStyleArray = [
+    activityIndicatorStyles.spinner,
+    customSize && {
+      width: customSize,
+      height: customSize,
+      borderWidth: Math.max(2, customSize / 10),
+    },
+    color && { borderTopColor: color, borderRightColor: color },
+  ];
+
+  // Use getWebProps to generate className and ref for web
+  const containerProps = getWebProps(containerStyleArray);
+  const spinnerProps = getWebProps(spinnerStyleArray);
+
+  return (
+    <div {...containerProps} data-testid={testID}>
+      <div {...spinnerProps} />
+    </div>
+  );
+};
+
+export default ActivityIndicator;

package/src/ActivityIndicator/README.md

@@ -0,0 +1,132 @@
+# ActivityIndicator
+
+A cross-platform loading indicator component that displays a spinning animation to indicate loading or processing state.
+
+## Features
+
+- **Cross-platform**: Works seamlessly on both React and React Native
+- **Intent-based colors**: Uses semantic color system (primary, neutral, success, error, warning)
+- **Multiple sizes**: Supports small, medium, large, or custom numeric sizes
+- **Customizable**: Override colors and styles as needed
+- **Animation control**: Start/stop animation with `animating` prop
+- **Auto-hide**: Optionally hide when not animating
+
+## Usage
+
+```tsx
+import { ActivityIndicator } from '@idealyst/components';
+
+// Basic usage
+<ActivityIndicator />
+
+// With different sizes
+<ActivityIndicator size="small" />
+<ActivityIndicator size="medium" />
+<ActivityIndicator size="large" />
+<ActivityIndicator size={64} /> // Custom size in pixels
+
+// With different intents
+<ActivityIndicator intent="primary" />
+<ActivityIndicator intent="success" />
+<ActivityIndicator intent="error" />
+<ActivityIndicator intent="warning" />
+<ActivityIndicator intent="neutral" />
+
+// Custom color
+<ActivityIndicator color="#FF5733" />
+
+// Control animation
+<ActivityIndicator animating={isLoading} />
+
+// Don't hide when stopped
+<ActivityIndicator animating={false} hidesWhenStopped={false} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `animating` | `boolean` | `true` | Whether the indicator is animating (visible) |
+| `size` | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | The size of the indicator |
+| `intent` | `'primary' \| 'neutral' \| 'success' \| 'error' \| 'warning'` | `'primary'` | The color intent of the indicator |
+| `color` | `string` | - | Custom color to override intent |
+| `style` | `ViewStyle` | - | Additional styles to apply to the container |
+| `testID` | `string` | - | Test identifier for testing |
+| `hidesWhenStopped` | `boolean` | `true` | Whether to hide the indicator when not animating |
+
+## Examples
+
+### Loading State
+```tsx
+const LoadingScreen = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <ActivityIndicator 
+        animating={isLoading}
+        size="large"
+        intent="primary"
+      />
+      {isLoading && <Text>Loading data...</Text>}
+    </View>
+  );
+};
+```
+
+### Button with Loading
+```tsx
+const SubmitButton = ({ onSubmit }) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    await onSubmit();
+    setIsSubmitting(false);
+  };
+  
+  return (
+    <Button onPress={handleSubmit} disabled={isSubmitting}>
+      {isSubmitting ? (
+        <ActivityIndicator size="small" color="white" />
+      ) : (
+        'Submit'
+      )}
+    </Button>
+  );
+};
+```
+
+### Custom Styled Indicator
+```tsx
+<ActivityIndicator
+  size={50}
+  color="#8B5CF6"
+  style={{
+    backgroundColor: 'rgba(139, 92, 246, 0.1)',
+    padding: 20,
+    borderRadius: 10,
+  }}
+/>
+```
+
+## Platform Differences
+
+- **Web**: Uses CSS animations with a custom spinner implementation
+- **Native**: Uses React Native's built-in `ActivityIndicator` component
+- Both platforms support all the same props for consistency
+
+## Accessibility
+
+The ActivityIndicator component includes:
+- Proper ARIA roles for screen readers on web
+- Visual indication of loading state
+- Support for test IDs for testing
+
+## Best Practices
+
+1. **Always provide context**: Pair with text to explain what's loading
+2. **Use appropriate sizes**: Small for inline, large for full-screen loading
+3. **Match intent to context**: Use error intent for retry states, success for completion
+4. **Consider animation performance**: Avoid too many simultaneous indicators
+5. **Provide alternative content**: Show skeleton screens or placeholders when appropriate

package/src/ActivityIndicator/index.ts

@@ -0,0 +1,2 @@
+export { default as ActivityIndicator } from './ActivityIndicator.native';
+export type { ActivityIndicatorProps } from './types';

package/src/ActivityIndicator/index.web.ts

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

package/src/ActivityIndicator/types.ts

@@ -0,0 +1,42 @@
+import { ViewStyle } from 'react-native';
+
+export interface ActivityIndicatorProps {
+  /**
+   * Whether the indicator is animating (visible)
+   * @default true
+   */
+  animating?: boolean;
+  
+  /**
+   * The size of the indicator
+   * @default "medium"
+   */
+  size?: 'small' | 'medium' | 'large' | number;
+  
+  /**
+   * The color/intent of the indicator
+   * @default "primary"
+   */
+  intent?: 'primary' | 'neutral' | 'success' | 'error' | 'warning';
+  
+  /**
+   * Custom color to override intent
+   */
+  color?: string;
+  
+  /**
+   * Additional styles to apply to the container
+   */
+  style?: ViewStyle;
+  
+  /**
+   * Test identifier for testing
+   */
+  testID?: string;
+  
+  /**
+   * Whether to hide the indicator when not animating
+   * @default true
+   */
+  hidesWhenStopped?: boolean;
+}

package/src/index.ts

@@ -44,6 +44,9 @@ export * from './Dialog/types';
 export { default as Popover } from './Popover';
 export * from './Popover/types';
 
+export { default as ActivityIndicator } from './ActivityIndicator';
+export * from './ActivityIndicator/types';
+
 export type { ButtonProps } from './Button/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
@@ -58,6 +61,7 @@ export type { IconProps } from './Icon/types';
 export type { SVGImageProps } from './SVGImage/types';
 export type { DialogProps } from './Dialog/types';
 export type { PopoverProps } from './Popover/types';
+export type { ActivityIndicatorProps } from './ActivityIndicator/types';
 
 export { breakpoints } from '@idealyst/theme';
 export type { AppTheme } from '@idealyst/theme';