@idealyst/components 1.0.0

package/src/Card/Card.web.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { CardProps } from './types';
+import { cardStyles, cardHoverStyles } 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,
+}) => {
+  const handleClick = () => {
+    if (!disabled && clickable && onPress) {
+      onPress();
+    }
+  };
+
+  // Apply variants
+  cardStyles.useVariants({
+    variant: variant as any,
+    padding,
+    radius,
+    intent,
+    clickable,
+    disabled,
+  });
+
+  // Create style arrays
+  const cardStyleArray = [
+    cardStyles.card,
+    clickable && !disabled && cardHoverStyles.clickableHover,
+    style,
+  ].filter(Boolean);
+
+  // Generate web props
+  const webProps = getWebProps(cardStyleArray);
+
+  // Use appropriate HTML element based on clickable state
+  const Component = clickable ? 'button' : 'div';
+
+  return (
+    <Component
+      {...webProps}
+      onClick={clickable ? handleClick : undefined}
+      disabled={clickable && disabled}
+      data-testid={testID}
+      aria-label={accessibilityLabel}
+      role={clickable ? 'button' : undefined}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default Card; 

package/src/Card/index.native.ts

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

package/src/Card/index.ts

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

package/src/Card/index.web.ts

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

package/src/Card/types.ts

@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import type { IntentVariant } from '../theme/variants';
+
+export interface CardProps {
+  /**
+   * The content to display inside the card
+   */
+  children?: ReactNode;
+  
+  /**
+   * The visual style variant of the card
+   */
+  variant?: 'default' | 'outlined' | 'elevated' | 'filled';
+  
+  /**
+   * The padding size inside the card
+   */
+  padding?: 'none' | 'small' | 'medium' | 'large';
+  
+  /**
+   * The border radius of the card
+   */
+  radius?: 'none' | 'small' | 'medium' | 'large';
+  
+  /**
+   * The intent/color scheme of the card
+   */
+  intent?: IntentVariant;
+  
+  /**
+   * Whether the card is clickable
+   */
+  clickable?: boolean;
+  
+  /**
+   * Called when the card is pressed (if clickable)
+   */
+  onPress?: () => void;
+  
+  /**
+   * Whether the card is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Additional styles (platform-specific)
+   */
+  style?: any;
+  
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+  
+  /**
+   * Accessibility label
+   */
+  accessibilityLabel?: string;
+} 

package/src/Checkbox/Checkbox.native.tsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { CheckboxProps } from './types';
+import { checkboxStyles, checkboxLabelStyles, checkboxCheckmarkStyles, checkboxHelperStyles } from './Checkbox.styles';
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  onCheckedChange,
+  size = 'medium',
+  intent = 'primary',
+  variant = 'default',
+  label,
+  children,
+  style,
+  testID,
+  accessibilityLabel,
+  required = false,
+  error,
+  helperText,
+}) => {
+  const [internalChecked, setInternalChecked] = useState(checked);
+  
+  useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  const handlePress = () => {
+    if (disabled) return;
+    
+    const newChecked = !internalChecked;
+    setInternalChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  // Apply variants for main checkbox
+  checkboxStyles.useVariants({
+    size,
+    intent,
+    variant: variant as any,
+    checked: internalChecked,
+    disabled,
+  });
+
+  // Apply variants for label
+  checkboxLabelStyles.useVariants({
+    size,
+    disabled,
+  });
+
+  // Apply variants for checkmark
+  checkboxCheckmarkStyles.useVariants({
+    size,
+    visible: internalChecked,
+  });
+
+  // Apply variants for helper text
+  checkboxHelperStyles.useVariants({
+    error: !!error,
+  });
+
+  const labelContent = children || label;
+  const displayHelperText = error || helperText;
+
+  return (
+    <View style={[checkboxStyles.wrapper, style]}>
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        testID={testID}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="checkbox"
+        accessibilityState={{ checked: internalChecked }}
+        style={checkboxStyles.container}
+      >
+        <View style={checkboxStyles.checkbox}>
+          {(internalChecked || indeterminate) && (
+            <Text style={checkboxCheckmarkStyles.checkmark}>
+              {indeterminate ? '−' : '✓'}
+            </Text>
+          )}
+        </View>
+        {labelContent && (
+          <Text style={checkboxLabelStyles.label}>
+            {labelContent}
+          </Text>
+        )}
+      </Pressable>
+      {displayHelperText && (
+        <Text style={checkboxHelperStyles.helperText}>
+          {error || helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+export default Checkbox; 

package/src/Checkbox/Checkbox.styles.tsx

@@ -0,0 +1,292 @@
+import { StyleSheet } from 'react-native-unistyles';
+
+export const checkboxStyles = StyleSheet.create((theme) => ({
+  wrapper: {
+    flexDirection: 'column',
+    gap: theme.spacing?.xs || 4,
+    
+    // Web-specific styles
+    _web: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      width: 'auto',
+    },
+  },
+  
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: theme.spacing?.sm || 8,
+    
+    // Web-specific styles for proper layout
+    _web: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.spacing?.sm || 8,
+      width: 'fit-content',
+      cursor: 'pointer',
+    },
+  },
+  
+  checkbox: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.borderRadius?.sm || 4,
+    position: 'relative',
+    transition: 'all 0.2s ease',
+    
+    variants: {
+      size: {
+        small: {
+          width: 16,
+          height: 16,
+        },
+        medium: {
+          width: 20,
+          height: 20,
+        },
+        large: {
+          width: 24,
+          height: 24,
+        },
+      },
+      intent: {
+        primary: {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+        },
+        success: {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+        },
+        error: {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+        },
+        warning: {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+        },
+        neutral: {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+        },
+        info: {
+          backgroundColor: 'transparent',
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+        },
+      },
+      variant: {
+        default: {
+          // 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'}`,
+          },
+        },
+        outlined: {
+          // React Native border properties
+          borderWidth: 2,
+          borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
+          // Web-specific border override
+          _web: {
+            border: `2px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
+          },
+        },
+      },
+      checked: {
+        true: {
+          // Checked state handled by compound variants
+        },
+        false: {
+          backgroundColor: 'transparent',
+        },
+      },
+      disabled: {
+        true: {
+          opacity: 0.5,
+        },
+        false: {
+          opacity: 1,
+        },
+      },
+    },
+    
+    compoundVariants: [
+      // Checked state for each intent
+      {
+        checked: true,
+        intent: 'primary',
+        styles: {
+          backgroundColor: theme.intents?.primary?.main || '#3b82f6',
+          borderColor: theme.intents?.primary?.main || '#3b82f6',
+          _web: {
+            border: `1px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
+          },
+        },
+      },
+      {
+        checked: true,
+        intent: 'success',
+        styles: {
+          backgroundColor: theme.intents?.success?.main || '#22c55e',
+          borderColor: theme.intents?.success?.main || '#22c55e',
+          _web: {
+            border: `1px solid ${theme.intents?.success?.main || '#22c55e'}`,
+          },
+        },
+      },
+      {
+        checked: true,
+        intent: 'error',
+        styles: {
+          backgroundColor: theme.intents?.error?.main || '#ef4444',
+          borderColor: theme.intents?.error?.main || '#ef4444',
+          _web: {
+            border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
+          },
+        },
+      },
+      {
+        checked: true,
+        intent: 'warning',
+        styles: {
+          backgroundColor: theme.intents?.warning?.main || '#f59e0b',
+          borderColor: theme.intents?.warning?.main || '#f59e0b',
+          _web: {
+            border: `1px solid ${theme.intents?.warning?.main || '#f59e0b'}`,
+          },
+        },
+      },
+      {
+        checked: true,
+        intent: 'neutral',
+        styles: {
+          backgroundColor: theme.intents?.neutral?.main || '#6b7280',
+          borderColor: theme.intents?.neutral?.main || '#6b7280',
+          _web: {
+            border: `1px solid ${theme.intents?.neutral?.main || '#6b7280'}`,
+          },
+        },
+      },
+      {
+        checked: true,
+        intent: 'info',
+        styles: {
+          backgroundColor: theme.intents?.info?.main || '#06b6d4',
+          borderColor: theme.intents?.info?.main || '#06b6d4',
+          _web: {
+            border: `1px solid ${theme.intents?.info?.main || '#06b6d4'}`,
+          },
+        },
+      },
+    ],
+    
+    _web: {
+      cursor: 'pointer',
+      outline: 'none',
+      display: 'flex',
+      boxSizing: 'border-box',
+      userSelect: 'none',
+      WebkitAppearance: 'none',
+      MozAppearance: 'none',
+      appearance: 'none',
+      _hover: {
+        opacity: 0.8,
+      },
+      _focus: {
+        outline: `2px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
+        outlineOffset: '2px',
+      },
+    },
+  },
+}));
+
+export const checkboxLabelStyles = StyleSheet.create((theme) => ({
+  label: {
+    color: theme.colors?.text?.primary || theme.palettes?.gray?.[900] || '#111827',
+    
+    // Web-specific styles to prevent centering issues
+    _web: {
+      display: 'block',
+      textAlign: 'left',
+      margin: 0,
+      padding: 0,
+    },
+    
+    variants: {
+      size: {
+        small: {
+          fontSize: theme.typography?.fontSize?.sm || 14,
+        },
+        medium: {
+          fontSize: theme.typography?.fontSize?.md || 16,
+        },
+        large: {
+          fontSize: theme.typography?.fontSize?.lg || 18,
+        },
+      },
+      disabled: {
+        true: {
+          color: theme.colors?.text?.disabled || theme.palettes?.gray?.[400] || '#9ca3af',
+        },
+        false: {
+          color: theme.colors?.text?.primary || theme.palettes?.gray?.[900] || '#111827',
+        },
+      },
+    },
+  },
+}));
+
+export const checkboxCheckmarkStyles = StyleSheet.create((theme) => ({
+  checkmark: {
+    position: 'absolute',
+    color: '#ffffff',
+    fontWeight: 'bold',
+    
+    variants: {
+      size: {
+        small: {
+          fontSize: 10,
+        },
+        medium: {
+          fontSize: 12,
+        },
+        large: {
+          fontSize: 14,
+        },
+      },
+      visible: {
+        true: {
+          opacity: 1,
+        },
+        false: {
+          opacity: 0,
+        },
+      },
+    },
+  },
+}));
+
+export const checkboxHelperStyles = StyleSheet.create((theme) => ({
+  helperText: {
+    fontSize: theme.typography?.fontSize?.sm || 14,
+    color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
+    marginTop: 2, // Reduced spacing between checkbox and helper text
+    
+    variants: {
+      error: {
+        true: {
+          color: theme.intents?.error?.main || '#ef4444',
+        },
+        false: {
+          color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
+        },
+      },
+    },
+  },
+})); 

package/src/Checkbox/Checkbox.web.tsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect } from 'react';
+import { getWebProps } from 'react-native-unistyles/web';
+import { CheckboxProps } from './types';
+import { checkboxStyles, checkboxLabelStyles, checkboxCheckmarkStyles, checkboxHelperStyles } from './Checkbox.styles';
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked = false,
+  indeterminate = false,
+  disabled = false,
+  onCheckedChange,
+  size = 'medium',
+  intent = 'primary',
+  variant = 'default',
+  label,
+  children,
+  style,
+  testID,
+  accessibilityLabel,
+  required = false,
+  error,
+  helperText,
+}) => {
+  const [internalChecked, setInternalChecked] = useState(checked);
+  
+  useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    
+    const newChecked = event.target.checked;
+    setInternalChecked(newChecked);
+    onCheckedChange?.(newChecked);
+  };
+
+  // Apply variants for main checkbox
+  checkboxStyles.useVariants({
+    size,
+    intent,
+    variant: variant as any,
+    checked: internalChecked,
+    disabled,
+  });
+
+  // Apply variants for label
+  checkboxLabelStyles.useVariants({
+    size,
+    disabled,
+  });
+
+  // Apply variants for checkmark
+  checkboxCheckmarkStyles.useVariants({
+    size,
+    visible: internalChecked,
+  });
+
+  // Apply variants for helper text
+  checkboxHelperStyles.useVariants({
+    error: !!error,
+  });
+
+  // Create style arrays
+  const wrapperStyleArray = [checkboxStyles.wrapper, style];
+  const containerStyleArray = [checkboxStyles.container];
+  const checkboxStyleArray = [checkboxStyles.checkbox];
+  const labelStyleArray = [checkboxLabelStyles.label];
+  const helperTextStyleArray = [checkboxHelperStyles.helperText];
+  const checkmarkStyleArray = [checkboxCheckmarkStyles.checkmark];
+
+  // Generate web props
+  const wrapperProps = getWebProps(wrapperStyleArray);
+  const containerProps = getWebProps(containerStyleArray);
+  const checkboxProps = getWebProps(checkboxStyleArray);
+  const labelProps = getWebProps(labelStyleArray);
+  const helperTextProps = getWebProps(helperTextStyleArray);
+  const checkmarkProps = getWebProps(checkmarkStyleArray);
+
+  const labelContent = children || label;
+  const displayHelperText = error || helperText;
+
+  return (
+    <div {...wrapperProps}>
+      <label {...containerProps}>
+        <div style={{ position: 'relative' }}>
+          <input
+            type="checkbox"
+            checked={internalChecked}
+            onChange={handleChange}
+            disabled={disabled}
+            required={required}
+            data-testid={testID}
+            aria-label={accessibilityLabel}
+            ref={(ref) => {
+              if (ref) {
+                ref.indeterminate = indeterminate;
+              }
+            }}
+            style={{
+              position: 'absolute',
+              opacity: 0,
+              width: '100%',
+              height: '100%',
+              margin: 0,
+              cursor: disabled ? 'not-allowed' : 'pointer',
+            }}
+          />
+          <div {...checkboxProps}>
+            {(internalChecked || indeterminate) && (
+              <div {...checkmarkProps}>
+                {indeterminate ? '−' : '✓'}
+              </div>
+            )}
+          </div>
+        </div>
+        {labelContent && (
+          <span {...labelProps}>
+            {labelContent}
+          </span>
+        )}
+      </label>
+      {displayHelperText && (
+        <div {...helperTextProps}>
+          {error || helperText}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Checkbox; 

package/src/Checkbox/index.native.ts

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

package/src/Checkbox/index.ts

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

package/src/Checkbox/index.web.ts

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