@idealyst/components 1.0.0

package/src/Button/Button.native.tsx

@@ -0,0 +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>
+  );
+};
+
+export default Button; 

package/src/Button/Button.styles.tsx

@@ -0,0 +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',
+        },
+      },
+    ],
+  },
+})); 

package/src/Button/Button.types.ts

@@ -0,0 +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;
+} 

package/src/Button/Button.web.tsx

@@ -0,0 +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>
+  );
+};
+
+export default Button; 

package/src/Button/index.native.ts

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

package/src/Button/index.ts

@@ -0,0 +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'; 

package/src/Button/index.web.ts

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

package/src/Button/types.ts

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import type { IntentVariant } from '../theme/variants';
+
+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
+   */
+  variant?: 'contained' | 'outlined' | 'text';
+  
+  /**
+   * The intent/color scheme of the button
+   */
+  intent?: IntentVariant;
+  
+  /**
+   * The size of the button
+   */
+  size?: 'small' | 'medium' | 'large';
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+} 

package/src/Card/Card.native.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+import { CardProps } from './types';
+import { cardStyles } from './Card.styles';
+
+const Card: React.FC<CardProps> = ({
+  children,
+  variant = 'default',
+  padding = 'medium',
+  radius = 'medium',
+  intent = 'neutral',
+  clickable = false,
+  onPress,
+  disabled = false,
+  style,
+  testID,
+  accessibilityLabel,
+}) => {
+  // Apply variants
+  cardStyles.useVariants({
+    variant: variant as any,
+    padding,
+    radius,
+    intent,
+    clickable,
+    disabled,
+  });
+
+  // Use appropriate component based on clickable state
+  const Component = clickable ? Pressable : View;
+
+  const componentProps = {
+    style: [cardStyles.card, style],
+    testID,
+    accessibilityLabel,
+    // Only use button role for clickable cards in React Native
+    ...(clickable && { accessibilityRole: 'button' as const }),
+    ...(clickable && {
+      onPress: disabled ? undefined : onPress,
+      disabled,
+      android_ripple: { color: 'rgba(0, 0, 0, 0.1)' },
+    }),
+  };
+
+  return (
+    <Component {...componentProps}>
+      {children}
+    </Component>
+  );
+};
+
+export default Card; 

package/src/Card/Card.styles.tsx

@@ -0,0 +1,240 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const cardStyles = StyleSheet.create((theme) => ({
+  card: {
+    backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+    position: 'relative',
+    overflow: 'hidden',
+    
+    variants: {
+      variant: {
+        default: {
+          backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+          // React Native border properties
+          borderWidth: 1,
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
+          // Web-specific border override
+          _web: {
+            border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb'}`,
+          },
+        },
+        outlined: {
+          backgroundColor: 'transparent',
+          // React Native border properties
+          borderWidth: 1,
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+          // Web-specific border override
+          _web: {
+            border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
+          },
+        },
+        elevated: {
+          backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+          borderWidth: 0,
+          _web: {
+            border: 'none',
+          },
+        },
+        filled: {
+          backgroundColor: theme.colors?.surface?.secondary || theme.palettes?.gray?.[50] || '#f9fafb',
+          borderWidth: 0,
+          _web: {
+            border: 'none',
+          },
+        },
+      },
+      padding: {
+        none: {
+          padding: 0,
+        },
+        small: {
+          padding: theme.spacing?.sm || 8,
+        },
+        medium: {
+          padding: theme.spacing?.md || 12,
+        },
+        large: {
+          padding: theme.spacing?.lg || 16,
+        },
+      },
+      radius: {
+        none: {
+          borderRadius: 0,
+        },
+        small: {
+          borderRadius: theme.borderRadius?.sm || 4,
+        },
+        medium: {
+          borderRadius: theme.borderRadius?.md || 8,
+        },
+        large: {
+          borderRadius: theme.borderRadius?.lg || 12,
+        },
+      },
+      intent: {
+        neutral: {
+          // Default colors handled by variant
+        },
+        primary: {
+          // Intent colors applied via compound variants
+        },
+        success: {
+          // Intent colors applied via compound variants  
+        },
+        error: {
+          // Intent colors applied via compound variants
+        },
+        warning: {
+          // Intent colors applied via compound variants
+        },
+        info: {
+          // Intent colors applied via compound variants
+        },
+      },
+      clickable: {
+        true: {
+          cursor: 'pointer',
+          transition: 'all 0.2s ease',
+        },
+        false: {
+          cursor: 'default',
+        },
+      },
+      disabled: {
+        true: {
+          opacity: 0.6,
+          cursor: 'not-allowed',
+        },
+        false: {
+          opacity: 1,
+        },
+      },
+    },
+    
+    compoundVariants: [
+      // Elevated variant with shadows
+      {
+        variant: 'elevated',
+        styles: {
+          shadowColor: theme.shadows?.md?.shadowColor || '#000',
+          shadowOffset: theme.shadows?.md?.shadowOffset || { width: 0, height: 4 },
+          shadowOpacity: theme.shadows?.md?.shadowOpacity || 0.1,
+          shadowRadius: theme.shadows?.md?.shadowRadius || 8,
+          elevation: theme.shadows?.md?.elevation || 4,
+          // More subtle shadow for web
+          _web: {
+            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)',
+          },
+        },
+      },
+      // Intent color combinations for outlined variant
+      {
+        variant: 'outlined',
+        intent: 'primary',
+        styles: {
+          borderColor: theme.intents?.primary?.main || '#3b82f6',
+          _web: {
+            border: `1px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
+          },
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'success',
+        styles: {
+          borderColor: theme.intents?.success?.main || '#22c55e',
+          _web: {
+            border: `1px solid ${theme.intents?.success?.main || '#22c55e'}`,
+          },
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'error',
+        styles: {
+          borderColor: theme.intents?.error?.main || '#ef4444',
+          _web: {
+            border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
+          },
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'warning',
+        styles: {
+          borderColor: theme.intents?.warning?.main || '#f59e0b',
+          _web: {
+            border: `1px solid ${theme.intents?.warning?.main || '#f59e0b'}`,
+          },
+        },
+      },
+      {
+        variant: 'outlined',
+        intent: 'info',
+        styles: {
+          borderColor: theme.intents?.info?.main || '#06b6d4',
+          _web: {
+            border: `1px solid ${theme.intents?.info?.main || '#06b6d4'}`,
+          },
+        },
+      },
+      // Intent color combinations for filled variant
+      {
+        variant: 'filled',
+        intent: 'primary',
+        styles: {
+          backgroundColor: theme.intents?.primary?.container || theme.palettes?.blue?.[50] || '#eff6ff',
+        },
+      },
+      {
+        variant: 'filled',
+        intent: 'success',
+        styles: {
+          backgroundColor: theme.intents?.success?.container || theme.palettes?.green?.[50] || '#f0fdf4',
+        },
+      },
+      {
+        variant: 'filled',
+        intent: 'error',
+        styles: {
+          backgroundColor: theme.intents?.error?.container || theme.palettes?.red?.[50] || '#fef2f2',
+        },
+      },
+      {
+        variant: 'filled',
+        intent: 'warning',
+        styles: {
+          backgroundColor: theme.intents?.warning?.container || theme.palettes?.amber?.[50] || '#fffbeb',
+        },
+      },
+      {
+        variant: 'filled',
+        intent: 'info',
+        styles: {
+          backgroundColor: theme.intents?.info?.container || theme.palettes?.cyan?.[50] || '#ecfeff',
+        },
+      },
+    ],
+    
+    _web: {
+      display: 'flex',
+      flexDirection: 'column',
+      boxSizing: 'border-box',
+      _hover: {
+        // Hover effects for clickable cards
+      },
+    },
+  },
+}));
+
+// Add hover effects for clickable cards
+export const cardHoverStyles = StyleSheet.create((theme) => ({
+  clickableHover: {
+    _web: {
+      _hover: {
+        transform: 'translateY(-2px)',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06)',
+      },
+    },
+  },
+}));