@idealyst/components 1.0.83 → 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

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, forwardRef } from 'react';
 import {
   View,
   Text,
@@ -10,10 +10,14 @@ import {
   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: React.FC<SelectProps> = ({
+const Select = forwardRef<View, SelectProps>(({
   options,
   value,
   onValueChange,
@@ -22,9 +26,9 @@ const Select: React.FC<SelectProps> = ({
   error = false,
   helperText,
   label,
-  variant = 'outlined',
+  type = 'outlined',
   intent = 'neutral',
-  size = 'medium',
+  size = 'md',
   searchable = false,
   filterOption,
   presentationMode = 'dropdown',
@@ -32,11 +36,27 @@ const Select: React.FC<SelectProps> = ({
   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
@@ -51,9 +71,8 @@ const Select: React.FC<SelectProps> = ({
 
   // Apply styles with variants
   selectStyles.useVariants({
-    variant: variant as any,
+    type,
     size,
-    intent,
     disabled,
     error,
     focused: isOpen,
@@ -65,8 +84,13 @@ const Select: React.FC<SelectProps> = ({
     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,
@@ -89,7 +113,7 @@ const Select: React.FC<SelectProps> = ({
         title: label || 'Select an option',
         message: helperText,
       },
-      (buttonIndex) => {
+      (buttonIndex: number) => {
         if (buttonIndex !== cancelButtonIndex && buttonIndex < options.length) {
           const selectedOption = options[buttonIndex];
           if (!selectedOption.disabled) {
@@ -115,6 +139,7 @@ const Select: React.FC<SelectProps> = ({
       friction: 20,
     }).start(() => {
       setIsOpen(false);
+      resetPosition();
       setSearchTerm('');
     });
   };
@@ -123,32 +148,95 @@ const Select: React.FC<SelectProps> = ({
     setSearchTerm(text);
   };
 
-  const renderChevron = () => (
-    <View style={selectStyles.chevron}>
-      <Text style={{ color: 'currentColor' }}>▼</Text>
-    </View>
-  );
+  const renderChevron = () => {
+    return (
+      <View style={selectStyles.chevron}>
+        <MaterialCommunityIcons
+          name="chevron-down"
+          style={selectStyles.chevron}
+        />
+      </View>
+    );
+  };
 
-  const renderDropdown = () => (
-    <Modal
-      visible={isOpen}
-      transparent
-      animationType="none"
-      onRequestClose={closeDropdown}
-    >
-      <Pressable style={selectStyles.overlay} onPress={closeDropdown}>
-        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-          <Animated.View
-            style={[
-              selectStyles.dropdown,
-              {
-                maxHeight,
-                transform: [{ scale: scaleAnim }],
-                minWidth: 280,
-                maxWidth: '90%',
-              },
-            ]}
+  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
@@ -161,16 +249,11 @@ const Select: React.FC<SelectProps> = ({
               </View>
             )}
 
-            <ScrollView style={selectStyles.optionsList} showsVerticalScrollIndicator={false}>
-              {filteredOptions.map((option) => {
-                const isSelected = option.value === value;
-
-                selectStyles.useVariants({
-                  selected: isSelected,
-                  disabled: option.disabled,
-                });
-
-                return (
+            <ScrollView
+              style={selectStyles.optionsList}
+              showsVerticalScrollIndicator={true}
+            >
+              {filteredOptions.map((option) => (
                   <Pressable
                     key={option.value}
                     style={selectStyles.option}
@@ -179,11 +262,7 @@ const Select: React.FC<SelectProps> = ({
                     android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
                   >
                     <View style={selectStyles.optionContent}>
-                      {option.icon && (
-                        <View style={selectStyles.optionIcon}>
-                          {option.icon}
-                        </View>
-                      )}
+                      {renderOptionIcon(option.icon)}
                       <Text
                         style={[
                           selectStyles.optionText,
@@ -194,8 +273,7 @@ const Select: React.FC<SelectProps> = ({
                       </Text>
                     </View>
                   </Pressable>
-                );
-              })}
+                ))}
 
               {filteredOptions.length === 0 && (
                 <View style={selectStyles.option}>
@@ -205,14 +283,15 @@ const Select: React.FC<SelectProps> = ({
                 </View>
               )}
             </ScrollView>
-          </Animated.View>
-        </View>
-      </Pressable>
-    </Modal>
-  );
+            </Animated.View>
+          </BoundedModalContent>
+        </Pressable>
+      </Modal>
+    );
+  };
 
   return (
-    <View style={[selectStyles.container, style]} testID={testID}>
+    <View ref={ref} style={[selectStyles.container, style]} testID={testID}>
       {label && (
         <Text style={selectStyles.label}>
           {label}
@@ -220,7 +299,8 @@ const Select: React.FC<SelectProps> = ({
       )}
 
       <Pressable
-        style={selectStyles.trigger}
+        ref={mergedTriggerRef}
+        style={selectStyles.trigger({ type, intent })}
         onPress={handleTriggerPress}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel || label}
@@ -232,11 +312,7 @@ const Select: React.FC<SelectProps> = ({
         android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
       >
         <View style={selectStyles.triggerContent}>
-          {selectedOption?.icon && (
-            <View style={selectStyles.icon}>
-              {selectedOption.icon}
-            </View>
-          )}
+          {renderTriggerIcon(selectedOption?.icon)}
           <Text
             style={[
               selectedOption ? selectStyles.triggerText : selectStyles.placeholder,
@@ -257,7 +333,6 @@ const Select: React.FC<SelectProps> = ({
         <Text
           style={[
             selectStyles.helperText,
-            error && selectStyles.helperText.variants?.error?.true,
           ]}
         >
           {helperText}
@@ -265,6 +340,8 @@ const Select: React.FC<SelectProps> = ({
       )}
     </View>
   );
-};
+});
+
+Select.displayName = 'Select';
 
 export default Select;