@idealyst/components 1.0.0

package/src/Icon/index.native.ts

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

package/src/Icon/index.ts

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

package/src/Icon/index.web.ts

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

package/src/Icon/types.ts

@@ -0,0 +1,36 @@
+import { IconName } from "./icon-types";
+import type { DisplayColorVariant } from '../theme/variants';
+
+export type IconSizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export interface IconProps {
+  /**
+   * The name of the icon to display
+   */
+  name: IconName;
+  
+  /**
+   * The size variant of the icon
+   */
+  size?: IconSizeVariant;
+
+  /**
+   * Predefined color variant based on theme
+   */
+  color?: DisplayColorVariant;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+  
+  /**
+   * Accessibility label for screen readers
+   */
+  accessibilityLabel?: string;
+}

package/src/Input/Input.native.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { TextInput } from 'react-native';
+import { InputProps } from './types';
+import { inputStyles } from './Input.styles';
+
+const Input: React.FC<InputProps> = ({
+  value,
+  onChangeText,
+  placeholder,
+  disabled = false,
+  inputType = 'text',
+  secureTextEntry = false,
+  autoCapitalize = 'sentences',
+  size = 'medium',
+  variant = 'default',
+  hasError = false,
+  style,
+  testID,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+
+  const getKeyboardType = () => {
+    switch (inputType) {
+      case 'email':
+        return 'email-address';
+      case 'number':
+        return 'numeric';
+      case 'password':
+      case 'text':
+      default:
+        return 'default';
+    }
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  // Apply variants to the stylesheet
+  inputStyles.useVariants({
+    size,
+    variant,
+    focused: isFocused,
+  });
+
+  const inputStyleArray = [
+    inputStyles.input,
+    disabled && inputStyles.disabled,
+    hasError && inputStyles.error,
+    style,
+  ];
+
+  return (
+    <TextInput
+      value={value}
+      onChangeText={onChangeText}
+      placeholder={placeholder}
+      editable={!disabled}
+      keyboardType={getKeyboardType()}
+      secureTextEntry={secureTextEntry || inputType === 'password'}
+      autoCapitalize={autoCapitalize}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      style={inputStyleArray}
+      testID={testID}
+      placeholderTextColor="#999999"
+    />
+  );
+};
+
+export default Input; 

package/src/Input/Input.styles.tsx

@@ -0,0 +1,177 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const inputStyles = StyleSheet.create((theme) => ({
+  input: {
+    variants: {
+      size: {
+        small: {
+          height: 36,
+          paddingHorizontal: theme.spacing?.sm || 8,
+          paddingVertical: theme.spacing?.xs || 4,
+          fontSize: theme.typography?.fontSize?.sm || 14,
+        },
+        medium: {
+          height: 44,
+          paddingHorizontal: theme.spacing?.md || 12,
+          paddingVertical: theme.spacing?.sm || 8,
+          fontSize: theme.typography?.fontSize?.md || 16,
+        },
+        large: {
+          height: 52,
+          paddingHorizontal: theme.spacing?.lg || 16,
+          paddingVertical: theme.spacing?.md || 12,
+          fontSize: theme.typography?.fontSize?.lg || 18,
+        },
+      },
+      variant: {
+        default: {
+          backgroundColor: theme.colors?.surface?.primary || '#ffffff',
+          borderWidth: 1,
+          borderColor: theme.colors?.border?.primary || '#e5e7eb',
+          borderStyle: 'solid',
+          color: theme.colors?.text?.primary || '#000000',
+          
+          _web: {
+            border: `1px solid ${theme.colors?.border?.primary || '#e5e7eb'}`,
+          },
+        },
+        outlined: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: theme.intents?.primary?.main || '#3b82f6',
+          borderStyle: 'solid',
+          color: theme.colors?.text?.primary || '#000000',
+          
+          _web: {
+            border: `1px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
+          },
+        },
+        filled: {
+          backgroundColor: theme.colors?.surface?.secondary || '#f9fafb',
+          borderWidth: 0,
+          borderColor: 'transparent',
+          color: theme.colors?.text?.primary || '#000000',
+          
+          _web: {
+            border: 'none',
+          },
+        },
+      },
+      focused: {
+        true: {
+          // Base focused styles - will be overridden by compound variants
+        },
+        false: {
+          // No additional styles when not focused
+        },
+      },
+    },
+    
+    compoundVariants: [
+      // Default variant focus
+      {
+        variant: 'default',
+        focused: true,
+        styles: {
+          borderColor: theme.intents?.primary?.main || '#3b82f6',
+          shadowColor: theme.intents?.primary?.main || '#3b82f6',
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: 0.1,
+          shadowRadius: 2,
+          elevation: 1,
+        },
+      },
+      // Outlined variant focus
+      {
+        variant: 'outlined',
+        focused: true,
+        styles: {
+          backgroundColor: 'transparent',
+          borderWidth: 1,
+          borderColor: theme.intents?.primary?.main || '#3b82f6',
+          borderStyle: 'solid',
+        },
+      },
+      // Filled variant focus
+      {
+        variant: 'filled',
+        focused: true,
+        styles: {
+          backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
+          borderWidth: 0,
+          shadowColor: theme.intents?.primary?.main || '#3b82f6',
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: 0.05,
+          shadowRadius: 1,
+          elevation: 0.5,
+        },
+      },
+    ],
+    
+    borderRadius: theme.borderRadius?.md || 8,
+    fontWeight: theme.typography?.fontWeight?.regular || '400',
+    // Web-specific styles
+    _web: {
+      boxSizing: 'border-box',
+      outline: 'none',
+      transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+      fontFamily: 'inherit',
+      _focus: {
+        borderColor: theme.intents?.primary?.main || '#3b82f6',
+      },
+      _hover: {
+        borderColor: theme.intents?.primary?.main || '#3b82f6',
+      },
+    },
+  },
+  disabled: {
+    opacity: 0.6,
+    backgroundColor: theme.colors?.surface?.secondary || '#f3f4f6',
+    color: theme.colors?.text?.disabled || '#9ca3af',
+    _web: {
+      cursor: 'not-allowed',
+    },
+  },
+  error: {
+    borderWidth: 1,
+    borderColor: theme.intents?.error?.main || '#ef4444',
+    borderStyle: 'solid',
+    
+    variants: {
+      focused: {
+        true: {
+          shadowColor: theme.intents?.error?.main || '#ef4444',
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: 0.1,
+          shadowRadius: 2,
+          elevation: 1,
+        },
+        false: {
+          // No additional styles when not focused
+        },
+      },
+      variant: {
+        default: {
+          // Use default error styles
+        },
+        outlined: {
+          // Override outlined styles for error
+          borderColor: theme.intents?.error?.main || '#ef4444',
+        },
+        filled: {
+          // Add border for error even in filled variant
+          borderWidth: 1,
+          borderColor: theme.intents?.error?.main || '#ef4444',
+        },
+      },
+    },
+    
+    _web: {
+      border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
+      _focus: {
+        borderColor: theme.intents?.error?.main || '#ef4444',
+        boxShadow: `0 0 0 2px ${theme.intents?.error?.main || '#ef4444'}20`,
+      },
+    },
+  },
+})); 

package/src/Input/Input.web.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { InputProps } from './types';
+import { inputStyles } from './Input.styles';
+
+const Input: React.FC<InputProps> = ({
+  value,
+  onChangeText,
+  placeholder,
+  disabled = false,
+  inputType = 'text',
+  secureTextEntry = false,
+  autoCapitalize = 'sentences',
+  size = 'medium',
+  variant = 'default',
+  hasError = false,
+  style,
+  testID,
+}) => {
+  const getInputType = () => {
+    switch (inputType) {
+      case 'email':
+        return 'email';
+      case 'number':
+        return 'number';
+      case 'password':
+        return 'password';
+      case 'text':
+      default:
+        return 'text';
+    }
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onChangeText) {
+      onChangeText(e.target.value);
+    }
+  };
+
+  // Apply variants using the correct Unistyles 3.0 pattern
+  inputStyles.useVariants({
+    size: size as 'small' | 'medium' | 'large',
+    variant: variant as 'default' | 'outlined' | 'filled',
+  });
+
+  // Create the style array following the official documentation pattern
+  const inputStyleArray = [
+    inputStyles.input,
+    disabled && inputStyles.disabled,
+    hasError && inputStyles.error,
+    style,
+  ].filter(Boolean);
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps(inputStyleArray);
+
+  return (
+    <input
+      {...webProps}
+      type={secureTextEntry ? 'password' : getInputType()}
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      disabled={disabled}
+      autoCapitalize={autoCapitalize}
+      data-testid={testID}
+    />
+  );
+};
+
+export default Input; 

package/src/Input/index.native.ts

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

package/src/Input/index.ts

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

package/src/Input/index.web.ts

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

package/src/Input/types.ts

@@ -0,0 +1,69 @@
+import type { IntentVariant } from '../theme/variants';
+
+export interface InputProps {
+  /**
+   * The current value of the input
+   */
+  value?: string;
+  
+  /**
+   * Called when the text changes
+   */
+  onChangeText?: (text: string) => void;
+  
+  /**
+   * Placeholder text
+   */
+  placeholder?: string;
+  
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * The type of input (affects keyboard type on mobile)
+   */
+  inputType?: 'text' | 'email' | 'password' | 'number';
+  
+  /**
+   * Whether to show the password
+   */
+  secureTextEntry?: boolean;
+  
+  /**
+   * Auto-capitalization behavior
+   */
+  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+  
+  /**
+   * Size variant of the input
+   */
+  size?: 'small' | 'medium' | 'large';
+  
+  /**
+   * Style variant of the input
+   */
+  variant?: 'default' | 'outlined' | 'filled';
+  
+  /**
+   * The intent/color scheme of the input (for focus states, validation, etc.)
+   */
+  intent?: IntentVariant;
+  
+  /**
+   * Whether the input has an error state
+   * @deprecated Use intent="error" instead
+   */
+  hasError?: boolean;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+} 

package/src/Screen/Screen.native.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { View as RNView, ScrollView as RNScrollView } from 'react-native';
+import { ScreenProps } from './types';
+import { screenStyles } from './Screen.styles';
+
+const Screen: React.FC<ScreenProps> = ({
+  children,
+  background = 'primary',
+  padding = 'md',
+  safeArea = false,
+  scrollable = true,
+  style,
+  testID,
+}) => {
+  screenStyles.useVariants({
+    background,
+    padding,
+    safeArea,
+  });
+
+  const screenStyleArray = [
+    screenStyles.screen,
+    style,
+  ];
+
+  if (scrollable) {
+    return (
+      <RNScrollView style={screenStyleArray} testID={testID}>
+        {children}
+      </RNScrollView>
+    );
+  }
+
+  return (
+    <RNView style={screenStyleArray} testID={testID}>
+      {children}
+    </RNView>
+  );
+};
+
+export default Screen; 

package/src/Screen/Screen.styles.tsx

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const screenStyles = StyleSheet.create((theme) => ({
+  screen: {
+    flex: 1,
+    // Default background color as fallback
+    backgroundColor: theme.colors.surface.primary,
+    variants: {
+      background: {
+        primary: {
+          backgroundColor: theme.colors.surface.primary,
+        },
+        secondary: {
+          backgroundColor: theme.colors.surface.secondary,
+        },
+        tertiary: {
+          backgroundColor: theme.colors.surface.tertiary,
+        },
+        inverse: {
+          backgroundColor: theme.colors.surface.inverse,
+        },
+      },
+      padding: {
+        none: {
+          padding: 0,
+        },
+        sm: {
+          padding: theme.spacing.sm,
+        },
+        md: {
+          padding: theme.spacing.md,
+        },
+        lg: {
+          padding: theme.spacing.lg,
+        },
+        xl: {
+          padding: theme.spacing.xl,
+        },
+      },
+      safeArea: {
+        true: {
+          paddingTop: theme.spacing.lg, // Safe area top
+          paddingBottom: theme.spacing.lg, // Safe area bottom
+        },
+        false: {
+          paddingTop: 0,
+          paddingBottom: 0,
+        },
+      },
+    },
+    // Web-specific styles
+    _web: {
+      overflow: 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+      minHeight: '100%',
+      boxSizing: 'border-box',
+    },
+  },
+})); 

package/src/Screen/Screen.web.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { ScreenProps } from './types';
+import { screenStyles } from './Screen.styles';
+
+const Screen: React.FC<ScreenProps> = ({
+  children,
+  background = 'primary',
+  padding = 'md',
+  safeArea = false,
+  style,
+  testID,
+}) => {
+  screenStyles.useVariants({
+    background,
+    padding,
+    safeArea,
+  });
+
+  // Use getWebProps to generate className and ref for web
+  const webProps = getWebProps([screenStyles.screen, style]);
+
+  return (
+    <div
+      {...webProps}
+      data-testid={testID}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Screen; 

package/src/Screen/index.native.ts

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

package/src/Screen/index.ts

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

package/src/Screen/index.web.ts

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

package/src/Screen/types.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from 'react';
+
+export interface ScreenProps {
+  /**
+   * The content to display inside the screen
+   */
+  children?: ReactNode;
+  
+  /**
+   * Background variant - controls the background color
+   */
+  background?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
+  
+  /**
+   * Screen padding variant
+   */
+  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+  
+  /**
+   * Safe area padding for mobile devices
+   */
+  safeArea?: boolean;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+
+  /**
+   * Scrollable content
+   */
+  scrollable?: boolean;
+} 

package/src/Text/Text.native.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { StyleSheet } from 'react-native-unistyles';
+import { Text as RNText } from 'react-native';
+import { TextProps } from './types';
+import textStyles from './Text.styles';
+
+const Text: React.FC<TextProps> = ({
+  children,
+  size = 'medium',
+  weight = 'normal',
+  color,
+  align = 'left',
+  style,
+  testID,
+}) => {
+  textStyles.useVariants({
+    size,
+    weight,
+    align,
+    color: color
+  });
+
+  return (
+    <RNText 
+      style={[
+        textStyles.text,
+        style,
+      ]} 
+      testID={testID}
+    >
+      {children}
+    </RNText>
+  );
+};
+
+export default Text;