@idealyst/components 1.0.24 → 1.0.26

package/src/Avatar/Avatar.styles.tsx

@@ -1,67 +1,67 @@
-import { StyleSheet } from 'react-native-unistyles';
-
-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: {
-        circle: {
-          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,
-        },
-        large: {
-          fontSize: 18,
-        },
-        xlarge: {
-          fontSize: 24,
-        },
-      },
-    },
-  },
+import { StyleSheet } from 'react-native-unistyles';
+
+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: {
+        circle: {
+          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,
+        },
+        large: {
+          fontSize: 18,
+        },
+        xlarge: {
+          fontSize: 24,
+        },
+      },
+    },
+  },
 })); 

package/src/Avatar/Avatar.web.tsx

@@ -1,51 +1,51 @@
-import React, { useState } from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { AvatarProps } from './types';
-import { avatarStyles } from './Avatar.styles';
-
-const Avatar: React.FC<AvatarProps> = ({
-  src,
-  alt,
-  fallback,
-  size = 'medium',
-  shape = 'circle',
-  style,
-  testID,
-}) => {
-  const [hasError, setHasError] = useState(false);
-
-  avatarStyles.useVariants({
-    size,
-    shape,
-  });
-
-  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);
-
-  const handleImageError = () => {
-    setHasError(true);
-  };
-
-  return (
-    <div {...avatarProps} data-testid={testID}>
-      {src && !hasError ? (
-        <img
-          src={src}
-          alt={alt}
-          onError={handleImageError}
-          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-        />
-      ) : (
-        <span {...fallbackProps}>
-          {fallback}
-        </span>
-      )}
-    </div>
-  );
-};
-
+import React, { useState } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { AvatarProps } from './types';
+import { avatarStyles } from './Avatar.styles';
+
+const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  fallback,
+  size = 'medium',
+  shape = 'circle',
+  style,
+  testID,
+}) => {
+  const [hasError, setHasError] = useState(false);
+
+  avatarStyles.useVariants({
+    size,
+    shape,
+  });
+
+  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);
+
+  const handleImageError = () => {
+    setHasError(true);
+  };
+
+  return (
+    <div {...avatarProps} data-testid={testID}>
+      {src && !hasError ? (
+        <img
+          src={src}
+          alt={alt}
+          onError={handleImageError}
+          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        />
+      ) : (
+        <span {...fallbackProps}>
+          {fallback}
+        </span>
+      )}
+    </div>
+  );
+};
+
 export default Avatar; 

package/src/Avatar/index.native.ts

@@ -1,2 +1,2 @@
-export { default } from './Avatar.native';
+export { default } from './Avatar.native';
 export * from './types'; 

package/src/Avatar/index.ts

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

package/src/Avatar/index.web.ts

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

package/src/Avatar/types.ts

@@ -1,43 +1,43 @@
-import type { ColorVariant } from '../theme/variants';
-
-export interface AvatarProps {
-  /**
-   * Image source (URL or require())
-   */
-  src?: string | any;
-  
-  /**
-   * Alt text for the image
-   */
-  alt?: string;
-  
-  /**
-   * Fallback text (usually initials)
-   */
-  fallback?: string;
-  
-  /**
-   * Size of the avatar
-   */
-  size?: 'small' | 'medium' | 'large' | 'xlarge';
-  
-  /**
-   * Shape of the avatar
-   */
-  shape?: 'circle' | 'square';
-  
-  /**
-   * The color scheme of the avatar (for background when no image)
-   */
-  color?: ColorVariant;
-  
-  /**
-   * Additional styles
-   */
-  style?: any;
-  
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
+import type { ColorVariant } from '../theme/variants';
+
+export interface AvatarProps {
+  /**
+   * Image source (URL or require())
+   */
+  src?: string | any;
+  
+  /**
+   * Alt text for the image
+   */
+  alt?: string;
+  
+  /**
+   * Fallback text (usually initials)
+   */
+  fallback?: string;
+  
+  /**
+   * Size of the avatar
+   */
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  
+  /**
+   * Shape of the avatar
+   */
+  shape?: 'circle' | 'square';
+  
+  /**
+   * The color scheme of the avatar (for background when no image)
+   */
+  color?: ColorVariant;
+  
+  /**
+   * Additional styles
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
 } 

package/src/Badge/Badge.native.tsx

@@ -1,43 +1,43 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import { BadgeProps } from './types';
-import { badgeStyles } from './Badge.styles';
-
-const Badge: React.FC<BadgeProps> = ({
-  children,
-  size = 'medium',
-  variant = 'filled',
-  color = 'blue',
-  style,
-  testID,
-}) => {
-  badgeStyles.useVariants({
-    size,
-    variant: variant as any,
-    color,
-  });
-
-  if (variant === 'dot') {
-    return (
-      <View
-        style={[badgeStyles.badge, style]}
-        testID={testID}
-        accessibilityLabel="status indicator"
-      />
-    );
-  }
-
-  return (
-    <View
-      style={[badgeStyles.badge, style]}
-      testID={testID}
-      accessibilityLabel="badge"
-    >
-      <Text style={badgeStyles.text}>
-        {children}
-      </Text>
-    </View>
-  );
-};
-
+import React from 'react';
+import { View, Text } from 'react-native';
+import { BadgeProps } from './types';
+import { badgeStyles } from './Badge.styles';
+
+const Badge: React.FC<BadgeProps> = ({
+  children,
+  size = 'medium',
+  variant = 'filled',
+  color = 'blue',
+  style,
+  testID,
+}) => {
+  badgeStyles.useVariants({
+    size,
+    variant: variant as any,
+    color,
+  });
+
+  if (variant === 'dot') {
+    return (
+      <View
+        style={[badgeStyles.badge, style]}
+        testID={testID}
+        accessibilityLabel="status indicator"
+      />
+    );
+  }
+
+  return (
+    <View
+      style={[badgeStyles.badge, style]}
+      testID={testID}
+      accessibilityLabel="badge"
+    >
+      <Text style={badgeStyles.text}>
+        {children}
+      </Text>
+    </View>
+  );
+};
+
 export default Badge;