@idealyst/components 1.0.23 → 1.0.25

package/src/Button/Button.styles.tsx

@@ -1,215 +1,215 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { generateIntentVariants, generateButtonCompoundVariants } from '../theme/variantHelpers';
-
-export const buttonStyles = StyleSheet.create((theme) => ({
-  button: {
-    // Base styles - no borders defined here
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: theme.borderRadius?.md || 8,
-    fontWeight: '600',
-    textAlign: 'center',
-    transition: 'all 0.2s ease',
-    // Set default color to prevent fallback to theme.colors.text.placeholder
-    color: theme.intents?.primary?.on || '#ffffff',
-    
-    // All variants defined here
-    variants: {
-      size: {
-        small: {
-          paddingHorizontal: theme.spacing?.sm || 8,
-          paddingVertical: theme.spacing?.xs || 4,
-          minHeight: 24,
-        },
-        medium: {
-          paddingHorizontal: theme.spacing?.md || 12,
-          paddingVertical: theme.spacing?.sm || 8,
-          minHeight: 32,
-        },  
-        large: {
-          paddingHorizontal: theme.spacing?.lg || 16,
-          paddingVertical: theme.spacing?.md || 12,
-          minHeight: 40,
-        },
-      },
-      // Dynamically generated intent variants
-      intent: generateIntentVariants(theme),
-      variant: {
-        contained: {
-          // Contained buttons have no border
-          border: 'none',
-        },
-        outlined: {
-          backgroundColor: 'transparent',
-          // Border is defined in compound variants
-        },
-        text: {
-          backgroundColor: 'transparent',
-          border: 'none',
-        },
-      },
-      disabled: {
-        true: {
-          opacity: 0.6,
-        },
-        false: {
-          opacity: 1,
-        },
-      },
-    },
-    
-    // Dynamically generated compound variants for outlined and text variants
-    compoundVariants: generateButtonCompoundVariants(theme),
-    
-    // Web-specific styles
-    _web: {
-      cursor: 'pointer',
-      outline: 'none',
-      display: 'flex',
-      boxSizing: 'border-box',
-      userSelect: 'none',
-      // Fix for Chromium-based browsers (Brave, Chrome) border rendering
-      WebkitAppearance: 'none',
-      MozAppearance: 'none',
-      appearance: 'none',
-      backfaceVisibility: 'hidden',
-      WebkitBackfaceVisibility: 'hidden',
-      transform: 'translateZ(0)', // Force hardware acceleration
-      _hover: {
-        opacity: 0.9,
-      },
-      _active: {
-        transform: 'scale(0.98) translateZ(0)', // Maintain hardware acceleration
-      },
-      _focus: {
-        outlineOffset: '2px',
-      },
-    },
-  },
-  
-  // Separate text style for React Native (no borders, just text properties)
-  text: {
-    fontWeight: '600',
-    textAlign: 'center',
-    
-    variants: {
-      size: {
-        small: {
-          fontSize: 14,
-        },
-        medium: {
-          fontSize: 16,
-        },  
-        large: {
-          fontSize: 18,
-        },
-      },
-      intent: {
-        primary: {
-          color: theme.intents?.primary?.on || '#ffffff',
-        },
-        success: {
-          color: theme.intents?.success?.on || '#ffffff',
-        },
-        error: {
-          color: theme.intents?.error?.on || '#ffffff',
-        },
-        warning: {
-          color: theme.intents?.warning?.on || '#ffffff',
-        },
-        neutral: {
-          color: theme.intents?.neutral?.on || '#ffffff',
-        },
-      },
-      variant: {
-        contained: {},
-        outlined: {},
-        text: {},
-      },
-      disabled: {
-        true: {
-          opacity: 0.6,
-        },
-        false: {
-          opacity: 1,
-        },
-      },
-    },
-    
-    // Compound variants for text colors in different variants
-    compoundVariants: [
-      // Outlined variant text colors
-      {
-        variant: 'outlined',
-        intent: 'primary',
-        styles: {
-          color: theme.intents?.primary?.main || '#3b82f6',
-        },
-      },
-      {
-        variant: 'outlined',
-        intent: 'success',
-        styles: {
-          color: theme.intents?.success?.main || '#22c55e',
-        },
-      },
-      {
-        variant: 'outlined',
-        intent: 'error',
-        styles: {
-          color: theme.intents?.error?.main || '#ef4444',
-        },
-      },
-      {
-        variant: 'outlined',
-        intent: 'warning',
-        styles: {
-          color: theme.intents?.warning?.main || '#f59e0b',
-        },
-      },
-      {
-        variant: 'outlined',
-        intent: 'neutral',
-        styles: {
-          color: theme.intents?.neutral?.main || '#6b7280',
-        },
-      },
-      // Text variant text colors
-      {
-        variant: 'text',
-        intent: 'primary',
-        styles: {
-          color: theme.intents?.primary?.main || '#3b82f6',
-        },
-      },
-      {
-        variant: 'text',
-        intent: 'success',
-        styles: {
-          color: theme.intents?.success?.main || '#22c55e',
-        },
-      },
-      {
-        variant: 'text',
-        intent: 'error',
-        styles: {
-          color: theme.intents?.error?.main || '#ef4444',
-        },
-      },
-      {
-        variant: 'text',
-        intent: 'warning',
-        styles: {
-          color: theme.intents?.warning?.main || '#f59e0b',
-        },
-      },
-      {
-        variant: 'text',
-        intent: 'neutral',
-        styles: {
-          color: theme.intents?.neutral?.main || '#6b7280',
-        },
-      },
-    ],
-  },
+import { StyleSheet } from 'react-native-unistyles';
+import { generateIntentVariants, generateButtonCompoundVariants } from '../theme/variantHelpers';
+
+export const buttonStyles = StyleSheet.create((theme) => ({
+  button: {
+    // Base styles - no borders defined here
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.borderRadius?.md || 8,
+    fontWeight: '600',
+    textAlign: 'center',
+    transition: 'all 0.2s ease',
+    // Set default color to prevent fallback to theme.colors.text.placeholder
+    color: theme.intents?.primary?.on || '#ffffff',
+    
+    // All variants defined here
+    variants: {
+      size: {
+        small: {
+          paddingHorizontal: theme.spacing?.sm || 8,
+          paddingVertical: theme.spacing?.xs || 4,
+          minHeight: 24,
+        },
+        medium: {
+          paddingHorizontal: theme.spacing?.md || 12,
+          paddingVertical: theme.spacing?.sm || 8,
+          minHeight: 32,
+        },  
+        large: {
+          paddingHorizontal: theme.spacing?.lg || 16,
+          paddingVertical: theme.spacing?.md || 12,
+          minHeight: 40,
+        },
+      },
+      // Dynamically generated intent variants
+      intent: generateIntentVariants(theme),
+      variant: {
+        contained: {
+          // Contained buttons have no border
+          border: 'none',
+        },
+        outlined: {
+          backgroundColor: 'transparent',
+          // Border is defined in compound variants
+        },
+        text: {
+          backgroundColor: 'transparent',
+          border: 'none',
+        },
+      },
+      disabled: {
+        true: {
+          opacity: 0.6,
+        },
+        false: {
+          opacity: 1,
+        },
+      },
+    },
+    
+    // Dynamically generated compound variants for outlined and text variants
+    compoundVariants: generateButtonCompoundVariants(theme),
+    
+    // Web-specific styles
+    _web: {
+      cursor: 'pointer',
+      outline: 'none',
+      display: 'flex',
+      boxSizing: 'border-box',
+      userSelect: 'none',
+      // Fix for Chromium-based browsers (Brave, Chrome) border rendering
+      WebkitAppearance: 'none',
+      MozAppearance: 'none',
+      appearance: 'none',
+      backfaceVisibility: 'hidden',
+      WebkitBackfaceVisibility: 'hidden',
+      transform: 'translateZ(0)', // Force hardware acceleration
+      _hover: {
+        opacity: 0.9,
+      },
+      _active: {
+        transform: 'scale(0.98) translateZ(0)', // Maintain hardware acceleration
+      },
+      _focus: {
+        outlineOffset: '2px',
+      },
+    },
+  },
+  
+  // Separate text style for React Native (no borders, just text properties)
+  text: {
+    fontWeight: '600',
+    textAlign: 'center',
+    
+    variants: {
+      size: {
+        small: {
+          fontSize: 14,
+        },
+        medium: {
+          fontSize: 16,
+        },  
+        large: {
+          fontSize: 18,
+        },
+      },
+      intent: {
+        primary: {
+          color: theme.intents?.primary?.on || '#ffffff',
+        },
+        success: {
+          color: theme.intents?.success?.on || '#ffffff',
+        },
+        error: {
+          color: theme.intents?.error?.on || '#ffffff',
+        },
+        warning: {
+          color: theme.intents?.warning?.on || '#ffffff',
+        },
+        neutral: {
+          color: theme.intents?.neutral?.on || '#ffffff',
+        },
+      },
+      variant: {
+        contained: {},
+        outlined: {},
+        text: {},
+      },
+      disabled: {
+        true: {
+          opacity: 0.6,
+        },
+        false: {
+          opacity: 1,
+        },
+      },
+    },
+    
+    // Compound variants for text colors in different variants
+    compoundVariants: [
+      // Outlined variant text colors
+      {
+        variant: 'outlined',
+        intent: 'primary',
+        styles: {
+          color: theme.intents?.primary?.main || '#3b82f6',
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'success',
+        styles: {
+          color: theme.intents?.success?.main || '#22c55e',
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'error',
+        styles: {
+          color: theme.intents?.error?.main || '#ef4444',
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'warning',
+        styles: {
+          color: theme.intents?.warning?.main || '#f59e0b',
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'neutral',
+        styles: {
+          color: theme.intents?.neutral?.main || '#6b7280',
+        },
+      },
+      // Text variant text colors
+      {
+        variant: 'text',
+        intent: 'primary',
+        styles: {
+          color: theme.intents?.primary?.main || '#3b82f6',
+        },
+      },
+      {
+        variant: 'text',
+        intent: 'success',
+        styles: {
+          color: theme.intents?.success?.main || '#22c55e',
+        },
+      },
+      {
+        variant: 'text',
+        intent: 'error',
+        styles: {
+          color: theme.intents?.error?.main || '#ef4444',
+        },
+      },
+      {
+        variant: 'text',
+        intent: 'warning',
+        styles: {
+          color: theme.intents?.warning?.main || '#f59e0b',
+        },
+      },
+      {
+        variant: 'text',
+        intent: 'neutral',
+        styles: {
+          color: theme.intents?.neutral?.main || '#6b7280',
+        },
+      },
+    ],
+  },
 })); 

package/src/Button/Button.types.ts

@@ -1,12 +1,12 @@
-import { TouchableOpacityProps } from 'react-native';
-import { IntentNames } from '../theme';
-
-export interface ButtonProps extends Omit<TouchableOpacityProps, 'disabled'> {
-  title: string;
-  onPress: () => void;
-  variant?: 'contained' | 'outlined' | 'text';
-  intent?: IntentNames;
-  size?: 'small' | 'medium' | 'large';
-  disabled?: boolean;
-  loading?: boolean;
+import { TouchableOpacityProps } from 'react-native';
+import { IntentNames } from '../theme';
+
+export interface ButtonProps extends Omit<TouchableOpacityProps, 'disabled'> {
+  title: string;
+  onPress: () => void;
+  variant?: 'contained' | 'outlined' | 'text';
+  intent?: IntentNames;
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  loading?: boolean;
 } 

package/src/Button/Button.web.tsx

@@ -1,56 +1,56 @@
-import React from 'react';
-import { getWebProps } from 'react-native-unistyles/web';
-import { ButtonProps } from './types';
-import { buttonStyles } from './Button.styles';
-
-const Button: React.FC<ButtonProps> = ({
-  title,
-  children,
-  onPress,
-  disabled = false,
-  variant = 'contained',
-  intent = 'primary',
-  size = 'medium',
-  style,
-  testID,
-}) => {
-  const handleClick = () => {
-    if (!disabled && onPress) {
-      onPress();
-    }
-  };
-
-  // Apply variants using the correct Unistyles 3.0 pattern
-  buttonStyles.useVariants({
-    size: size as 'small' | 'medium' | 'large',
-    intent: intent as 'primary' | 'success' | 'error' | 'warning' | 'neutral',
-    variant: variant as 'contained' | 'outlined' | 'text',
-    disabled: disabled as boolean,
-  });
-
-  // Create the style array following the official documentation pattern
-  const buttonStyleArray = [
-    buttonStyles.button,
-    buttonStyles.text, // Include text styles for font sizing
-    style,
-  ];
-
-  // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps(buttonStyleArray);
-
-  // Use children if available, otherwise use title
-  const buttonContent = children || title;
-
-  return (
-    <button
-      {...webProps}
-      onClick={handleClick}
-      disabled={disabled}
-      data-testid={testID}
-    >
-      {buttonContent}
-    </button>
-  );
-};
-
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { ButtonProps } from './types';
+import { buttonStyles } from './Button.styles';
+
+const Button: React.FC<ButtonProps> = ({
+  title,
+  children,
+  onPress,
+  disabled = false,
+  variant = 'contained',
+  intent = 'primary',
+  size = 'medium',
+  style,
+  testID,
+}) => {
+  const handleClick = () => {
+    if (!disabled && onPress) {
+      onPress();
+    }
+  };
+
+  // Apply variants using the correct Unistyles 3.0 pattern
+  buttonStyles.useVariants({
+    size: size as 'small' | 'medium' | 'large',
+    intent: intent as 'primary' | 'success' | 'error' | 'warning' | 'neutral',
+    variant: variant as 'contained' | 'outlined' | 'text',
+    disabled: disabled as boolean,
+  });
+
+  // Create the style array following the official documentation pattern
+  const buttonStyleArray = [
+    buttonStyles.button,
+    buttonStyles.text, // Include text styles for font sizing
+    style,
+  ];
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps(buttonStyleArray);
+
+  // Use children if available, otherwise use title
+  const buttonContent = children || title;
+
+  return (
+    <button
+      {...webProps}
+      onClick={handleClick}
+      disabled={disabled}
+      data-testid={testID}
+    >
+      {buttonContent}
+    </button>
+  );
+};
+
 export default Button; 

package/src/Button/index.native.ts

@@ -1,3 +1,3 @@
-// React Native-specific Button export
-export { default } from './Button.native';
+// React Native-specific Button export
+export { default } from './Button.native';
 export * from './types'; 

package/src/Button/index.ts

@@ -1,5 +1,5 @@
-// Platform-agnostic Button export
-// Metro will resolve to index.native.ts for React Native
-// This file serves as fallback for web environments
-export { default } from './Button.web';
+// Platform-agnostic Button export
+// Metro will resolve to index.native.ts for React Native
+// This file serves as fallback for web environments
+export { default } from './Button.web';
 export * from './types'; 

package/src/Button/index.web.ts

@@ -1,3 +1,3 @@
-// Web-specific Button export
-export { default } from './Button.web';
+// Web-specific Button export
+export { default } from './Button.web';
 export * from './types';