@idealyst/components 1.0.82 → 1.0.84

package/src/SVGImage/types.ts

@@ -1,7 +1,11 @@
+import { Intent } from '@idealyst/theme';
 import React from 'react';
 import { ViewProps } from 'react-native';
 import { SvgProps } from 'react-native-svg';
-import { IntentNames } from '../theme';
+
+// Component-specific type aliases for future extensibility
+export type SVGImageIntentVariant = Intent;
+export type SVGImageResizeMode = 'contain' | 'cover' | 'stretch';
 
 export interface SVGImageProps extends Omit<ViewProps, 'children'> {
   source: string | { uri: string } | React.FC<SvgProps>;
@@ -9,6 +13,6 @@ export interface SVGImageProps extends Omit<ViewProps, 'children'> {
   height?: number | string;
   size?: number | string;
   color?: string;
-  intent?: IntentNames;
-  resizeMode?: 'contain' | 'cover' | 'stretch';
+  intent?: SVGImageIntentVariant;
+  resizeMode?: SVGImageResizeMode;
 }

package/src/Screen/Screen.native.tsx

@@ -1,41 +1,67 @@
-import React from 'react';
-import { View as RNView, ScrollView as RNScrollView } from 'react-native';
+import React, { forwardRef } from 'react';
+import { View as RNView, ScrollView as RNScrollView, SafeAreaView } from 'react-native';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 
-const Screen: React.FC<ScreenProps> = ({
+const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   children,
   background = 'primary',
   padding = 'md',
-  safeArea = false,
+  safeArea = true,
   scrollable = true,
+  contentInset,
   style,
   testID,
-}) => {
+}, ref) => {
+
   screenStyles.useVariants({
     background,
     padding,
     safeArea,
   });
 
-  const screenStyleArray = [
-    screenStyles.screen,
-    style,
-  ];
-
   if (scrollable) {
-    return (
-      <RNScrollView style={screenStyleArray} testID={testID}>
-        {children}
-      </RNScrollView>
+    // For ScrollView, flex: 1 goes on the ScrollView style
+    // Background and padding go on contentContainerStyle (without flex: 1)
+    const scrollViewStyle = [{ flex: 1 }, style];
+
+    const contentContainerStyleArray = [
+      screenStyles.screenContent,
+      contentInset ? {
+        paddingTop: contentInset.top,
+        paddingBottom: contentInset.bottom,
+        paddingLeft: contentInset.left,
+        paddingRight: contentInset.right,
+      } : undefined,
+    ];
+
+  return (
+    <RNScrollView
+      ref={ref as any}
+      style={scrollViewStyle}
+      contentContainerStyle={contentContainerStyleArray}
+      testID={testID}
+    >
+      {children}
+    </RNScrollView>
     );
   }
 
-  return (
-    <RNView style={screenStyleArray} testID={testID}>
+  const containerStyle = [screenStyles.screen, style];
+
+  const view = (
+    <RNView ref={ref as any} style={containerStyle} testID={testID}>
       {children}
     </RNView>
   );
-};
+
+  if (safeArea) {
+    return <SafeAreaView style={{ flex: 1 }}>{view}</SafeAreaView>;
+  }
+
+  return view;
+});
+
+Screen.displayName = 'Screen';
 
 export default Screen; 

package/src/Screen/Screen.styles.tsx

@@ -1,60 +1,64 @@
 import { StyleSheet } from 'react-native-unistyles';
+import { Theme } from '@idealyst/theme';
 
-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,
-        },
+function generateBackgroundVariants(theme: Theme) {
+  return {
+    primary: { backgroundColor: theme.colors.surface.primary },
+    secondary: { backgroundColor: theme.colors.surface.secondary },
+    tertiary: { backgroundColor: theme.colors.surface.tertiary },
+    inverse: { backgroundColor: theme.colors.surface.inverse },
+    'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
+    'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
+    transparent: { backgroundColor: 'transparent' },
+  }
+}
+
+function generatePaddingVariants() {
+  return {
+    none: { padding: 0 },
+    xs: { padding: 4 },
+    sm: { padding: 8 },
+    md: { padding: 16 },
+    lg: { padding: 24 },
+    xl: { padding: 32 },
+  }
+}
+
+// Styles are inlined here instead of in @idealyst/theme because Unistyles' Babel
+// transform on native cannot resolve function calls to extract variant structures.
+// @ts-ignore - TS language server needs restart to pick up theme structure changes
+export const screenStyles = StyleSheet.create((theme: Theme) => {
+  return {
+    screen: {
+      flex: 1,
+      backgroundColor: theme.colors.surface.primary,
+      variants: {
+        background: generateBackgroundVariants(theme),
+        padding: generatePaddingVariants(),
+        safeArea: {
+          true: {},
+          false: {},
+        }
       },
-      safeArea: {
-        true: {
-          paddingTop: theme.spacing.lg, // Safe area top
-          paddingBottom: theme.spacing.lg, // Safe area bottom
-        },
-        false: {
-          paddingTop: 0,
-          paddingBottom: 0,
-        },
+      _web: {
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        minHeight: '100%',
+        boxSizing: 'border-box',
       },
     },
-    // Web-specific styles
-    _web: {
-      overflow: 'auto',
-      display: 'flex',
-      flexDirection: 'column',
-      minHeight: '100%',
-      boxSizing: 'border-box',
+    // Content style for ScrollView - no flex: 1 so content can grow
+    screenContent: {
+      backgroundColor: theme.colors.surface.primary,
+      variants: {
+        background: generateBackgroundVariants(theme),
+        padding: generatePaddingVariants(),
+        safeArea: {
+          true: {},
+          false: {},
+        }
+      },
     },
-  },
-})); 
+  };
+});

package/src/Screen/Screen.web.tsx

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getWebProps } from 'react-native-unistyles/web';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
+import useMergeRefs from '../hooks/useMergeRefs';
 
-const Screen: React.FC<ScreenProps> = ({
+const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
   children,
   background = 'primary',
   padding = 'md',
   safeArea = false,
   style,
   testID,
-}) => {
+}, ref) => {
   screenStyles.useVariants({
     background,
     padding,
@@ -18,16 +19,21 @@ const Screen: React.FC<ScreenProps> = ({
   });
 
   // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps([screenStyles.screen, style]);
+  const webProps = getWebProps([screenStyles.screen, style as any]);
+
+  const mergedRef = useMergeRefs(ref, webProps.ref);
 
   return (
     <div
       {...webProps}
+      ref={mergedRef}
       data-testid={testID}
     >
       {children}
     </div>
   );
-};
+});
+
+Screen.displayName = 'Screen';
 
 export default Screen; 

package/src/Screen/index.ts

@@ -1,2 +1,5 @@
-export { default } from './Screen.web';
-export * from './types'; 
+import ScreenComponent from './Screen.web';
+
+export default ScreenComponent;
+export { ScreenComponent as Screen };
+export * from './types';

package/src/Screen/index.web.ts

@@ -1,2 +1,5 @@
-export { default } from './Screen.web';
-export * from './types'; 
+import ScreenComponent from './Screen.web';
+
+export default ScreenComponent;
+export { ScreenComponent as Screen };
+export * from './types';

package/src/Screen/types.ts

@@ -1,31 +1,45 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Size, Surface } from '@idealyst/theme';
 
 export interface ScreenProps {
   /**
    * The content to display inside the screen
    */
   children?: ReactNode;
-  
+
   /**
    * Background variant - controls the background color
    */
-  background?: 'primary' | 'secondary' | 'tertiary' | 'inverse';
-  
+  background?: Surface | 'transparent';
+
   /**
    * Screen padding variant
    */
-  padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
-  
+  padding?: Size | 'none';
+
   /**
    * Safe area padding for mobile devices
    */
   safeArea?: boolean;
-  
+
+  /**
+   * Content inset padding for scrollable content (mobile only)
+   * Adds padding to the scroll view's content container
+   * Useful for adding safe area insets or additional spacing
+   */
+  contentInset?: {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+  };
+
   /**
    * Additional styles (platform-specific)
    */
-  style?: any;
-  
+  style?: StyleProp<ViewStyle>;
+
   /**
    * Test ID for testing
    */

package/src/Select/Select.native.tsx

@@ -0,0 +1,347 @@
+import React, { useState, useRef, forwardRef } from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  ScrollView,
+  TextInput,
+  ActionSheetIOS,
+  Platform,
+  Animated,
+} from 'react-native';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import { SelectProps, SelectOption } from './types';
+import { selectStyles } from './Select.styles';
+import { BoundedModalContent } from '../internal/BoundedModalContent.native';
+import { useSmartPosition } from '../hooks/useSmartPosition.native';
+import useMergeRefs from '../hooks/useMergeRefs';
+
+const Select = forwardRef<View, SelectProps>(({
+  options,
+  value,
+  onValueChange,
+  placeholder = 'Select an option',
+  disabled = false,
+  error = false,
+  helperText,
+  label,
+  type = 'outlined',
+  intent = 'neutral',
+  size = 'md',
+  searchable = false,
+  filterOption,
+  presentationMode = 'dropdown',
+  maxHeight = 240,
+  style,
+  testID,
+  accessibilityLabel,
+}, ref) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const scaleAnim = useRef(new Animated.Value(0)).current;
+
+  const {
+    position: dropdownPosition,
+    size: dropdownSize,
+    isPositioned,
+    anchorRef: triggerRef,
+    measureAndPosition,
+    handleLayout: handleDropdownLayout,
+    reset: resetPosition,
+  } = useSmartPosition({
+    placement: 'bottom-start',
+    offset: 4,
+    maxHeight,
+    matchWidth: true,
+  });
+
+  const mergedTriggerRef = useMergeRefs(ref, triggerRef);
+  const selectedOption = options.find(option => option.value === value);
+
+  // Filter options based on search term
+  const filteredOptions = searchable && searchTerm
+    ? options.filter(option => {
+        if (filterOption) {
+          return filterOption(option, searchTerm);
+        }
+        return option.label.toLowerCase().includes(searchTerm.toLowerCase());
+      })
+    : options;
+
+  // Apply styles with variants
+  selectStyles.useVariants({
+    type,
+    size,
+    disabled,
+    error,
+    focused: isOpen,
+  });
+
+  const handleTriggerPress = () => {
+    if (disabled) return;
+
+    if (Platform.OS === 'ios' && presentationMode === 'actionSheet') {
+      showIOSActionSheet();
+    } else {
+      // Measure and position dropdown
+      measureAndPosition();
+
+      // Open the modal (it will be invisible with opacity 0 until positioned)
+      setIsOpen(true);
+      setSearchTerm('');
+
+      // Animate dropdown appearance
+      Animated.spring(scaleAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        tension: 300,
+        friction: 20,
+      }).start();
+    }
+  };
+
+  const showIOSActionSheet = () => {
+    const actionOptions = options.map(option => option.label);
+    const cancelButtonIndex = actionOptions.length;
+    actionOptions.push('Cancel');
+
+    ActionSheetIOS.showActionSheetWithOptions(
+      {
+        options: actionOptions,
+        cancelButtonIndex,
+        title: label || 'Select an option',
+        message: helperText,
+      },
+      (buttonIndex: number) => {
+        if (buttonIndex !== cancelButtonIndex && buttonIndex < options.length) {
+          const selectedOption = options[buttonIndex];
+          if (!selectedOption.disabled) {
+            onValueChange?.(selectedOption.value);
+          }
+        }
+      }
+    );
+  };
+
+  const handleOptionSelect = (option: SelectOption) => {
+    if (!option.disabled) {
+      onValueChange?.(option.value);
+      closeDropdown();
+    }
+  };
+
+  const closeDropdown = () => {
+    Animated.spring(scaleAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+      tension: 300,
+      friction: 20,
+    }).start(() => {
+      setIsOpen(false);
+      resetPosition();
+      setSearchTerm('');
+    });
+  };
+
+  const handleSearchChange = (text: string) => {
+    setSearchTerm(text);
+  };
+
+  const renderChevron = () => {
+    return (
+      <View style={selectStyles.chevron}>
+        <MaterialCommunityIcons
+          name="chevron-down"
+          style={selectStyles.chevron}
+        />
+      </View>
+    );
+  };
+
+  const renderTriggerIcon = (icon: any) => {
+    if (!icon) return null;
+
+    // If it's a string, render as MaterialCommunityIcons
+    if (typeof icon === 'string') {
+      const iconStyle = selectStyles.icon;
+      return (
+        <View style={iconStyle}>
+          <MaterialCommunityIcons
+            style={iconStyle}
+            name={icon}
+          />
+        </View>
+      );
+    }
+
+    // Otherwise render the React element directly
+    return <View style={selectStyles.icon}>{icon}</View>;
+  };
+
+  const renderOptionIcon = (icon: any) => {
+    if (!icon) return null;
+
+    // If it's a string, render as MaterialCommunityIcons
+    if (typeof icon === 'string') {
+      const iconStyle = selectStyles.optionIcon;
+      return (
+        <View style={iconStyle}>
+          <MaterialCommunityIcons
+            style={iconStyle}
+            name={icon}
+          />
+        </View>
+      );
+    }
+
+    // Otherwise render the React element directly
+    return <View style={selectStyles.optionIcon}>{icon}</View>;
+  };
+
+  const renderDropdown = () => {
+    if (!isOpen) return null;
+
+    // Show dropdown only after it has been measured AND positioned
+    const isMeasured = dropdownSize.height > 0;
+    const shouldShow = isMeasured && isPositioned;
+
+    return (
+      <Modal
+        visible={true}
+        transparent
+        animationType="none"
+        onRequestClose={closeDropdown}
+      >
+        <Pressable
+          style={selectStyles.overlay}
+          onPress={closeDropdown}
+        >
+          <BoundedModalContent
+            top={dropdownPosition.top}
+            left={dropdownPosition.left}
+            width={dropdownPosition.width}
+            maxHeight={maxHeight}
+          >
+            <Animated.View
+              style={[
+                selectStyles.dropdown,
+                {
+                  position: 'relative', // Override absolute positioning from styles
+                  top: 0, // Override top: '100%' from styles
+                  left: 0, // Override left from styles
+                  right: undefined, // Remove right constraint
+                  transform: [{ scale: scaleAnim }],
+                  opacity: shouldShow ? 1 : 0, // Hide until measured AND positioned
+                }
+              ]}
+              onLayout={handleDropdownLayout}
+            >
+            {searchable && (
+              <View style={selectStyles.searchContainer}>
+                <TextInput
+                  style={selectStyles.searchInput}
+                  placeholder="Search options..."
+                  value={searchTerm}
+                  onChangeText={handleSearchChange}
+                  autoFocus
+                />
+              </View>
+            )}
+
+            <ScrollView
+              style={selectStyles.optionsList}
+              showsVerticalScrollIndicator={true}
+            >
+              {filteredOptions.map((option) => (
+                  <Pressable
+                    key={option.value}
+                    style={selectStyles.option}
+                    onPress={() => handleOptionSelect(option)}
+                    disabled={option.disabled}
+                    android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
+                  >
+                    <View style={selectStyles.optionContent}>
+                      {renderOptionIcon(option.icon)}
+                      <Text
+                        style={[
+                          selectStyles.optionText,
+                          option.disabled && selectStyles.optionTextDisabled,
+                        ]}
+                      >
+                        {option.label}
+                      </Text>
+                    </View>
+                  </Pressable>
+                ))}
+
+              {filteredOptions.length === 0 && (
+                <View style={selectStyles.option}>
+                  <Text style={selectStyles.optionText}>
+                    No options found
+                  </Text>
+                </View>
+              )}
+            </ScrollView>
+            </Animated.View>
+          </BoundedModalContent>
+        </Pressable>
+      </Modal>
+    );
+  };
+
+  return (
+    <View ref={ref} style={[selectStyles.container, style]} testID={testID}>
+      {label && (
+        <Text style={selectStyles.label}>
+          {label}
+        </Text>
+      )}
+
+      <Pressable
+        ref={mergedTriggerRef}
+        style={selectStyles.trigger({ type, intent })}
+        onPress={handleTriggerPress}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel || label}
+        accessibilityRole="button"
+        accessibilityState={{
+          expanded: isOpen,
+          disabled,
+        }}
+        android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
+      >
+        <View style={selectStyles.triggerContent}>
+          {renderTriggerIcon(selectedOption?.icon)}
+          <Text
+            style={[
+              selectedOption ? selectStyles.triggerText : selectStyles.placeholder,
+            ]}
+            numberOfLines={1}
+          >
+            {selectedOption ? selectedOption.label : placeholder}
+          </Text>
+        </View>
+
+        {renderChevron()}
+      </Pressable>
+
+      {/* Only render dropdown modal if not using iOS ActionSheet */}
+      {!(Platform.OS === 'ios' && presentationMode === 'actionSheet') && renderDropdown()}
+
+      {helperText && (
+        <Text
+          style={[
+            selectStyles.helperText,
+          ]}
+        >
+          {helperText}
+        </Text>
+      )}
+    </View>
+  );
+});
+
+Select.displayName = 'Select';
+
+export default Select;