@idealyst/components 1.0.82 → 1.0.84

package/src/Button/Button.styles.tsx

@@ -1,215 +1,258 @@
 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: {
+import { Theme, Intent, Size, CompoundVariants} from '@idealyst/theme';
+import { buildSizeVariants } from '../utils/buildSizeVariants';
+
+type ButtonSize = Size;
+type ButtonIntent = Intent;
+type ButtonType = 'contained' | 'outlined' | 'text';
+
+export type ButtonVariants = {
+    size: ButtonSize;
+    intent: ButtonIntent;
+    type: ButtonType;
+    disabled: boolean;
+}
+
+/**
+ * Create intent variants (placeholder, colors handled by compound variants)
+ */
+function createIntentVariants(theme: Theme) {
+    const variants: any = {};
+    for (const intent in theme.intents) {
+        variants[intent] = {};
+    }
+    return variants;
+}
+
+/**
+ * Create type variants (structure only, colors handled by compound variants)
+ */
+function createTypeVariants(theme: Theme) {
+    return {
         contained: {
-          // Contained buttons have no border
-          border: 'none',
+            borderWidth: 0,
         },
         outlined: {
-          backgroundColor: 'transparent',
-          // Border is defined in compound variants
+            borderWidth: 2,
+            borderStyle: 'solid' ,
+            backgroundColor: 'transparent',
         },
         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',
+            borderWidth: 0,
+            backgroundColor: 'transparent',
         },
-      },
-      {
-        variant: 'text',
-        intent: 'success',
-        styles: {
-          color: theme.intents?.success?.main || '#22c55e',
-        },
-      },
-      {
-        variant: 'text',
-        intent: 'error',
-        styles: {
-          color: theme.intents?.error?.main || '#ef4444',
+    } as const;
+}
+
+/**
+ * Create compound variants for intent+type combinations
+ */
+function createButtonCompoundVariants(theme: Theme): CompoundVariants<keyof ButtonVariants> {
+    const compoundVariants: CompoundVariants<keyof ButtonVariants> = [];
+
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent];
+
+        // Contained + intent
+        compoundVariants.push({
+            intent,
+            type: 'contained',
+            styles: {
+                backgroundColor: intentValue.primary,
+                color: intentValue.contrast,
+            },
+        });
+
+        // Outlined + intent
+        compoundVariants.push({
+            intent,
+            type: 'outlined',
+            styles: {
+                color: intentValue.primary,
+                borderColor: intentValue.primary,
+            },
+        });
+
+        // Text + intent
+        compoundVariants.push({
+            intent,
+            type: 'text',
+            styles: {
+                color: intentValue.primary,
+            },
+        });
+    };
+
+    return compoundVariants;
+}
+
+/**
+ * Create icon compound variants for intent+type combinations
+ */
+function createIconCompoundVariants(theme: Theme): CompoundVariants<keyof ButtonVariants> {
+    const compoundVariants: CompoundVariants<keyof ButtonVariants> = [];
+
+    for (const intent in theme.intents) {
+        const intentValue = theme.intents[intent as Intent];
+
+        // Contained + intent
+        compoundVariants.push({
+            intent,
+            type: 'contained',
+            styles: { color: intentValue.contrast },
+        });
+
+        // Outlined + intent
+        compoundVariants.push({
+            intent,
+            type: 'outlined',
+            styles: { color: intentValue.primary },
+        });
+
+        // Text + intent
+        compoundVariants.push({
+            intent,
+            type: 'text',
+            styles: { color: intentValue.primary },
+        });
+    }
+
+    return compoundVariants;
+}
+
+/**
+ * Create icon color variants dynamically based on theme, intent, and type
+ */
+function createIconColorVariants(theme: Theme, intent: Intent) {
+    const intentValue = theme.intents[intent];
+
+    return {
+        contained: {
+            color: intentValue.contrast,
         },
-      },
-      {
-        variant: 'text',
-        intent: 'warning',
-        styles: {
-          color: theme.intents?.warning?.main || '#f59e0b',
+        outlined: {
+            color: intentValue.primary,
         },
-      },
-      {
-        variant: 'text',
-        intent: 'neutral',
-        styles: {
-          color: theme.intents?.neutral?.main || '#6b7280',
+        text: {
+            color: intentValue.primary,
         },
-      },
-    ],
-  },
-})); 
+    } as const;
+}
+
+/**
+ * Generate button icon styles
+ */
+const createButtonIconStyles = (theme: Theme) => {
+    return ({ intent }: Partial<ButtonVariants>) => {
+        return {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            variants: {
+                size: buildSizeVariants(theme, 'button', size => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                })),
+                type: createIconColorVariants(theme, intent),
+            },
+        } as const;
+    };
+}
+
+/**
+ * Generate button text styles
+ */
+const createButtonTextStyles = (theme: Theme) => {
+    return ({ intent }: Partial<ButtonVariants>) => {
+        return {
+            fontWeight: '600',
+            textAlign: 'center',
+            variants: {
+                size: buildSizeVariants(theme, 'button', size => ({
+                    fontSize: size.fontSize,
+                })),
+                type: createIconColorVariants(theme, intent), // Text uses same colors as icons
+                disabled: {
+                    true: { opacity: 0.6 },
+                    false: { opacity: 1 },
+                },
+            },
+        } 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.
+export const buttonStyles = StyleSheet.create((theme: Theme) => {
+    return {
+        button: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 8,
+            fontWeight: '600',
+            textAlign: 'center',
+            _web: {
+                display: 'flex',
+                transition: 'all 0.1s ease',
+            },
+            variants: {
+                size: buildSizeVariants(theme, 'button', size => ({
+                    paddingVertical: size.paddingVertical,
+                    paddingHorizontal: size.paddingHorizontal,
+                    minHeight: size.minHeight,
+                })),
+                type: createTypeVariants(theme),
+                disabled: {
+                    true: { opacity: 0.6 },
+                    false: { opacity: 1, _web: {
+                        cursor: 'pointer',
+                        _hover: {
+                            opacity: 0.90,
+                        },
+                        _active: {
+                            opacity: 0.75,
+                        },
+                    } },
+                } as const,
+            } as const,
+            compoundVariants: createButtonCompoundVariants(theme),
+        } as const,
+        icon: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            variants: {
+                size: buildSizeVariants(theme, 'button', size => ({
+                    width: size.iconSize,
+                    height: size.iconSize,
+                })),
+                intent: createIntentVariants(theme),
+                type: createTypeVariants(theme),
+            } as const,
+            compoundVariants: createIconCompoundVariants(theme),
+        } as const,
+        iconContainer: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+        } as const,
+        text: {
+            fontWeight: '600',
+            textAlign: 'center',
+            variants: {
+                size: buildSizeVariants(theme, 'button', size => ({
+                    fontSize: size.fontSize,
+                })),
+                intent: createIntentVariants(theme),
+                type: createTypeVariants(theme),
+                disabled: {
+                    true: { opacity: 0.6 },
+                    false: { opacity: 1 },
+                },
+            },
+            compoundVariants: createIconCompoundVariants(theme), // Text uses same colors as icons
+        } as const,
+    };
+});

package/src/Button/Button.web.tsx

@@ -1,56 +1,113 @@
-import React from 'react';
+import React, { isValidElement, forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ButtonProps } from './types';
 import { buttonStyles } from './Button.styles';
+import { IconSvg } from '../Icon/IconSvg/IconSvg.web';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+// Extended props to include path props added by Babel plugin
+interface InternalButtonProps extends ButtonProps {
+  leftIconPath?: string;
+  rightIconPath?: string;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>((props: InternalButtonProps, ref) => {
+
+  const {
+    title,
+    children,
+    onPress,
+    disabled = false,
+    type = 'contained',
+    intent = 'primary',
+    size = 'md',
+    leftIcon,
+    rightIcon,
+    leftIconPath,
+    rightIconPath,
+    style,
+    testID,
+  } = props;
+
+  buttonStyles.useVariants({
+    type,
+    intent,
+    size,
+    disabled
+  });
 
-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
+  // Compute dynamic styles
   const buttonStyleArray = [
     buttonStyles.button,
-    buttonStyles.text, // Include text styles for font sizing
-    style,
+    buttonStyles.text,
+    style as any,
   ];
 
   // Use getWebProps to generate className and ref for web
   const webProps = getWebProps(buttonStyleArray);
 
+  // Icon container styles
+  const iconContainerProps = getWebProps([buttonStyles.iconContainer]);
+
+  // Icon styles with dynamic function
+  const iconStyleArray = [buttonStyles.icon];
+  const iconProps = getWebProps(iconStyleArray);
+
+  // Helper to render icon
+  const renderIcon = (icon: string | React.ReactNode, iconPath?: string) => {
+    if (typeof icon === 'string' && iconPath) {
+      // Render IconSvg directly with the path from Babel plugin
+      // Don't pass size - let the style control the dimensions
+      return (
+        <IconSvg
+          path={iconPath}
+          {...iconProps}
+          aria-label={icon}
+        />
+      );
+    } else if (isValidElement(icon)) {
+      // Render custom component as-is
+      return icon;
+    }
+    return null;
+  };
+
   // Use children if available, otherwise use title
   const buttonContent = children || title;
 
+  // Determine if we need to wrap content in icon container
+  const hasIcons = leftIcon || rightIcon;
+
+  // Merge unistyles web ref with forwarded ref
+  const mergedRef = useMergeRefs(ref, webProps.ref);
+
   return (
     <button
       {...webProps}
+      ref={mergedRef}
       onClick={handleClick}
       disabled={disabled}
       data-testid={testID}
     >
-      {buttonContent}
+      {hasIcons ? (
+        <div {...iconContainerProps}>
+          {leftIcon && renderIcon(leftIcon, leftIconPath)}
+          {buttonContent}
+          {rightIcon && renderIcon(rightIcon, rightIconPath)}
+        </div>
+      ) : (
+        buttonContent
+      )}
     </button>
   );
-};
+});
+
+Button.displayName = 'Button';
 
 export default Button; 

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';
-export * from './types'; 
+import ButtonComponent from './Button.web';
+
+export default ButtonComponent;
+export { ButtonComponent as Button };
+export * from './types';

package/src/Button/index.web.ts

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

package/src/Button/types.ts

@@ -1,47 +1,64 @@
-import { ReactNode } from 'react';
-import type { IntentVariant } from '../theme/variants';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { IconName } from '../Icon/icon-types';
+import { Intent, Size } from '@idealyst/theme';
+
+// Component-specific type aliases for future extensibility
+export type ButtonType = 'contained' | 'outlined' | 'text';
+export type ButtonIntentVariant = Intent;
+export type ButtonSizeVariant = Size;
 
 export interface ButtonProps {
   /**
    * The text or content to display inside the button
    */
   children?: ReactNode;
-  
+
   /**
    * The text title to display inside the button (for web)
    */
   title?: string;
-  
+
   /**
    * Called when the button is pressed
    */
   onPress?: () => void;
-  
+
   /**
    * Whether the button is disabled
    */
   disabled?: boolean;
-  
+
   /**
-   * The visual style variant of the button
+   * The visual style type of the button
    */
-  variant?: 'contained' | 'outlined' | 'text';
-  
+  type?: ButtonType;
+
   /**
    * The intent/color scheme of the button
    */
-  intent?: IntentVariant;
-  
+  intent?: ButtonIntentVariant;
+
   /**
    * The size of the button
    */
-  size?: 'small' | 'medium' | 'large';
-  
+  size?: ButtonSizeVariant;
+
+  /**
+   * Icon to display on the left side. Can be an icon name or custom component (ReactNode)
+   */
+  leftIcon?: IconName | ReactNode;
+
+  /**
+   * Icon to display on the right side. Can be an icon name or custom component (ReactNode)
+   */
+  rightIcon?: IconName | ReactNode;
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */