@idealyst/components 1.0.83 → 1.0.84

package/src/Checkbox/Checkbox.native.tsx

@@ -1,14 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, forwardRef } from 'react';
 import { View, Text, Pressable } from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { CheckboxProps } from './types';
-import { checkboxStyles, checkboxLabelStyles, checkboxCheckmarkStyles, checkboxHelperStyles } from './Checkbox.styles';
+import { checkboxStyles } from './Checkbox.styles';
 
-const Checkbox: React.FC<CheckboxProps> = ({
+const Checkbox = forwardRef<View, CheckboxProps>(({
   checked = false,
   indeterminate = false,
   disabled = false,
   onCheckedChange,
-  size = 'medium',
+  size = 'md',
   intent = 'primary',
   variant = 'default',
   label,
@@ -19,44 +20,28 @@ const Checkbox: React.FC<CheckboxProps> = ({
   required = false,
   error,
   helperText,
-}) => {
+}, ref) => {
   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
+  // Apply variants
   checkboxStyles.useVariants({
     size,
-    intent,
-    variant: variant as any,
+    type: 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({
+    visible: internalChecked || indeterminate,
     error: !!error,
   });
 
@@ -64,7 +49,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   const displayHelperText = error || helperText;
 
   return (
-    <View style={[checkboxStyles.wrapper, style]}>
+    <View ref={ref} style={[checkboxStyles.wrapper, style]}>
       <Pressable
         onPress={handlePress}
         disabled={disabled}
@@ -74,26 +59,31 @@ const Checkbox: React.FC<CheckboxProps> = ({
         accessibilityState={{ checked: internalChecked }}
         style={checkboxStyles.container}
       >
-        <View style={checkboxStyles.checkbox}>
+        <View style={checkboxStyles.checkbox({ intent })}>
           {(internalChecked || indeterminate) && (
-            <Text style={checkboxCheckmarkStyles.checkmark}>
-              {indeterminate ? '−' : '✓'}
-            </Text>
+            <MaterialCommunityIcons
+              name={indeterminate ? 'minus' : 'check'}
+              size={14}
+              color="#ffffff"
+              style={checkboxStyles.checkmark}
+            />
           )}
         </View>
         {labelContent && (
-          <Text style={checkboxLabelStyles.label}>
+          <Text style={checkboxStyles.label}>
             {labelContent}
           </Text>
         )}
       </Pressable>
       {displayHelperText && (
-        <Text style={checkboxHelperStyles.helperText}>
+        <Text style={checkboxStyles.helperText}>
           {error || helperText}
         </Text>
       )}
     </View>
   );
-};
+});
+
+Checkbox.displayName = 'Checkbox';
 
 export default Checkbox; 

package/src/Checkbox/Checkbox.styles.tsx

@@ -1,292 +1,240 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme, StylesheetStyles, Intent, Size} from '@idealyst/theme';
 
-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: {
+type CheckboxSize = Size;
+type CheckboxIntent = Intent | 'info';
+type CheckboxType = 'default' | 'outlined';
+
+type CheckboxVariants = {
+    size: CheckboxSize;
+    intent: CheckboxIntent;
+    type: CheckboxType;
+    checked: boolean;
+    disabled: boolean;
+    visible: boolean;
+    error: boolean;
+}
+
+export type ExpandedCheckboxStyles = StylesheetStyles<keyof CheckboxVariants>;
+
+export type CheckboxStylesheet = {
+    wrapper: ExpandedCheckboxStyles;
+    container: ExpandedCheckboxStyles;
+    checkbox: ExpandedCheckboxStyles;
+    label: ExpandedCheckboxStyles;
+    checkmark: ExpandedCheckboxStyles;
+    helperText: ExpandedCheckboxStyles;
+}
+
+/**
+ * Helper to get intent colors, mapping 'info' to 'primary'
+ */
+function getIntentColors(theme: Theme, intent: CheckboxIntent) {
+    const actualIntent = intent === 'info' ? 'primary' : intent;
+    return theme.intents[actualIntent as Intent];
+}
+
+/**
+ * Create size variants for checkbox
+ */
+function createCheckboxSizeVariants() {
+    return {
+        xs: { width: 14, height: 14 },
+        sm: { width: 16, height: 16 },
+        md: { width: 20, height: 20 },
+        lg: { width: 24, height: 24 },
+        xl: { width: 28, height: 28 },
+    } as const;
+}
+
+/**
+ * Create type variants for checkbox
+ */
+function createCheckboxTypeVariants(theme: Theme) {
+    return {
         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'}`,
-          },
+            borderWidth: 1,
+            borderColor: theme.colors.border.primary,
+            _web: {
+                border: `1px solid ${theme.colors.border.primary}`,
+            },
         },
         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',
-      },
-    },
-  },
-}));
+            borderWidth: 2,
+            borderColor: theme.colors.border.primary,
+            _web: {
+                border: `2px solid ${theme.colors.border.primary}`,
+            },
+        },
+    } as const;
+}
 
-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: {
+/**
+ * Create checked state variants dynamically based on intent
+ */
+function createCheckedVariants(theme: Theme, intent: CheckboxIntent) {
+    const colors = getIntentColors(theme, intent);
+
+    return {
         true: {
-          color: theme.colors?.text?.disabled || theme.palettes?.gray?.[400] || '#9ca3af',
+            backgroundColor: colors.primary,
+            borderColor: colors.primary,
+            _web: {
+                border: `1px solid ${colors.primary}`,
+            },
         },
         false: {
-          color: theme.colors?.text?.primary || theme.palettes?.gray?.[900] || '#111827',
+            backgroundColor: 'transparent',
         },
-      },
-    },
-  },
-}));
+    } as const;
+}
 
-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,
+/**
+ * Create size variants for label
+ */
+function createLabelSizeVariants() {
+    return {
+        xs: { fontSize: 12 },
+        sm: { fontSize: 14 },
+        md: { fontSize: 16 },
+        lg: { fontSize: 18 },
+        xl: { fontSize: 20 },
+    } as const;
+}
+
+/**
+ * Create size variants for checkmark
+ */
+function createCheckmarkSizeVariants() {
+    return {
+        xs: { width: 10, height: 10 },
+        sm: { width: 12, height: 12 },
+        md: { width: 14, height: 14 },
+        lg: { width: 16, height: 16 },
+        xl: { width: 20, height: 20 },
+    } as const;
+}
+
+function createCheckboxStyles(theme: Theme) {
+    return ({ intent }: Partial<CheckboxVariants>) => {
+        return {
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 4,
+            position: 'relative',
+            backgroundColor: 'transparent',
+            borderColor: theme.colors.border.primary,
+            variants: {
+                size: createCheckboxSizeVariants(),
+                type: createCheckboxTypeVariants(theme),
+                checked: createCheckedVariants(theme, intent),
+                disabled: {
+                    true: {
+                        opacity: 0.5,
+                        _web: {
+                            cursor: 'not-allowed',
+                        },
+                    },
+                    false: {
+                        opacity: 1,
+                        _web: {
+                            cursor: 'pointer',
+                            _hover: { opacity: 0.8 },
+                            _active: { opacity: 0.6 },
+                        },
+                    },
+                },
+            },
+            _web: {
+                outline: 'none',
+                display: 'flex',
+                boxSizing: 'border-box',
+                userSelect: 'none',
+                WebkitAppearance: 'none',
+                MozAppearance: 'none',
+                appearance: 'none',
+                transition: 'all 0.2s ease',
+                _focus: {
+                    outline: `2px solid ${theme.intents.primary.primary}`,
+                    outlineOffset: '2px',
+                },
+            },
+        } as const;
+    }
+}
+
+function createCheckmarkStyles(_theme: Theme) {
+    return {
+        position: 'absolute',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: '#ffffff',
+        variants: {
+            size: createCheckmarkSizeVariants(),
+            visible: {
+                true: { opacity: 1 },
+                false: { opacity: 0 },
+            },
+        },
+    } 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 checkboxStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    wrapper: {
+        flexDirection: 'column',
+        gap: 4,
+        _web: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            width: 'auto',
         },
-        false: {
-          opacity: 0,
+    },
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        _web: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+            width: 'fit-content',
+            cursor: 'pointer',
         },
-      },
     },
-  },
-}));
-
-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',
+    checkbox: createCheckboxStyles(theme),
+    label: {
+        color: theme.colors.text.primary,
+        variants: {
+            size: createLabelSizeVariants(),
+            disabled: {
+                true: { opacity: 0.5 },
+                false: { opacity: 1 },
+            },
+        },
+        _web: {
+            display: 'block',
+            textAlign: 'left',
+            margin: 0,
+            padding: 0,
         },
-        false: {
-          color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
+    },
+    checkmark: createCheckmarkStyles(theme),
+    helperText: {
+        fontSize: 14,
+        color: theme.colors.text.secondary,
+        marginTop: 2,
+        variants: {
+            error: {
+                true: { color: theme.intents.error.primary },
+                false: { color: theme.colors.text.secondary },
+            },
         },
-      },
     },
-  },
-})); 
+  };
+});