@idealyst/components 1.0.24 → 1.0.25

package/src/Badge/Badge.styles.tsx

@@ -1,154 +1,154 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { generateBadgeCompoundVariants } from '../theme/variantHelpers';
-
-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: {
-        filled: {
-          // Colors handled by compound variants
-        },
-        outlined: {
-          backgroundColor: 'transparent',
-          borderWidth: 1,
-        },
-        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: {
-        filled: {
-          color: '#ffffff',
-        },
-        outlined: {
-          // Colors handled by compound variants
-        },
-        dot: {
-          // No text for dot variant
-        },
-      },
-    },
-    
-    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',
-        },
-      })),
-    ],
-  },
+import { StyleSheet } from 'react-native-unistyles';
+import { generateBadgeCompoundVariants } from '../theme/variantHelpers';
+
+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: {
+        filled: {
+          // Colors handled by compound variants
+        },
+        outlined: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+        },
+        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: {
+        filled: {
+          color: '#ffffff',
+        },
+        outlined: {
+          // Colors handled by compound variants
+        },
+        dot: {
+          // No text for dot variant
+        },
+      },
+    },
+    
+    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',
+        },
+      })),
+    ],
+  },
 })); 

package/src/Badge/Badge.web.tsx

@@ -1,45 +1,45 @@
-import React from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-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,
-  });
-
-  const badgeStyleArray = [badgeStyles.badge, style];
-  const badgeProps = getWebProps(badgeStyleArray);
-
-  if (variant === 'dot') {
-    return (
-      <span
-        {...badgeProps}
-        data-testid={testID}
-        role="status"
-        aria-label="status indicator"
-      />
-    );
-  }
-
-  return (
-    <span
-      {...badgeProps}
-      data-testid={testID}
-      role="status"
-    >
-      {children}
-    </span>
-  );
-};
-
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+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,
+  });
+
+  const badgeStyleArray = [badgeStyles.badge, style];
+  const badgeProps = getWebProps(badgeStyleArray);
+
+  if (variant === 'dot') {
+    return (
+      <span
+        {...badgeProps}
+        data-testid={testID}
+        role="status"
+        aria-label="status indicator"
+      />
+    );
+  }
+
+  return (
+    <span
+      {...badgeProps}
+      data-testid={testID}
+      role="status"
+    >
+      {children}
+    </span>
+  );
+};
+
 export default Badge; 

package/src/Badge/index.native.ts

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

package/src/Badge/index.ts

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

package/src/Badge/index.web.ts

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

package/src/Badge/types.ts

@@ -1,34 +1,34 @@
-import { ReactNode } from 'react';
-import type { DisplayColorVariant } from '../theme/variants';
-
-export interface BadgeProps {
-  /**
-   * The content to display inside the badge
-   */
-  children?: ReactNode;
-  
-  /**
-   * The size of the badge
-   */
-  size?: 'small' | 'medium' | 'large';
-  
-  /**
-   * The visual style variant of the badge
-   */
-  variant?: 'filled' | 'outlined' | 'dot';
-  
-  /**
-   * The color scheme of the badge
-   */
-  color?: DisplayColorVariant;
-  
-  /**
-   * Additional styles
-   */
-  style?: any;
-  
-  /**
-   * Test ID for testing
-   */
-  testID?: string;
+import { ReactNode } from 'react';
+import type { DisplayColorVariant } from '../theme/variants';
+
+export interface BadgeProps {
+  /**
+   * The content to display inside the badge
+   */
+  children?: ReactNode;
+  
+  /**
+   * The size of the badge
+   */
+  size?: 'small' | 'medium' | 'large';
+  
+  /**
+   * The visual style variant of the badge
+   */
+  variant?: 'filled' | 'outlined' | 'dot';
+  
+  /**
+   * The color scheme of the badge
+   */
+  color?: DisplayColorVariant;
+  
+  /**
+   * Additional styles
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
 } 

package/src/Button/Button.native.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
-import { ButtonProps } from './types';
-import { buttonStyles } from './Button.styles';
-
-const Button: React.FC<ButtonProps> = ({
-  children,
-  title,
-  onPress,
-  disabled = false,
-  variant = 'contained',
-  intent = 'primary',
-  size = 'medium',
-  style,
-  testID,
-}) => {
-  buttonStyles.useVariants({
-    size,
-    intent,
-    variant,
-    disabled,
-  });
-
-  return (
-    <TouchableOpacity
-      onPress={onPress}
-      disabled={disabled}
-      testID={testID}
-      activeOpacity={0.7}
-      style={[buttonStyles.button, style]}
-    >
-      <Text style={buttonStyles.text}>
-        {children || title}
-      </Text>
-    </TouchableOpacity>
-  );
-};
-
+import React from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import { ButtonProps } from './types';
+import { buttonStyles } from './Button.styles';
+
+const Button: React.FC<ButtonProps> = ({
+  children,
+  title,
+  onPress,
+  disabled = false,
+  variant = 'contained',
+  intent = 'primary',
+  size = 'medium',
+  style,
+  testID,
+}) => {
+  buttonStyles.useVariants({
+    size,
+    intent,
+    variant,
+    disabled,
+  });
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+      activeOpacity={0.7}
+      style={[buttonStyles.button, style]}
+    >
+      <Text style={buttonStyles.text}>
+        {children || title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
 export default Button;