@idealyst/components 1.1.6 → 1.1.8

package/src/Screen/Screen.native.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from 'react';
-import { View as RNView, ScrollView as RNScrollView, SafeAreaView } from 'react-native';
+import { View as RNView, ScrollView as RNScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
 
@@ -21,7 +22,9 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   testID,
   id,
 }, ref) => {
+  const insets = useSafeAreaInsets();
 
+  // Set active variants for this render
   screenStyles.useVariants({
     background,
     safeArea,
@@ -34,47 +37,47 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
     marginHorizontal,
   });
 
-  if (scrollable) {
-    // For ScrollView, flex: 1 goes on the ScrollView style
-    // Background and padding go on contentContainerStyle (without flex: 1)
-    const scrollViewStyle = [{ flex: 1 }, style];
+  // Call styles as functions to get theme-reactive styles
+  const screenStyle = (screenStyles.screen as any)({});
+
+  // Calculate safe area padding
+  const safeAreaStyle = safeArea ? {
+    paddingTop: insets.top,
+    paddingBottom: insets.bottom,
+    paddingLeft: insets.left,
+    paddingRight: insets.right,
+  } : undefined;
 
-    const contentContainerStyleArray = [
-      screenStyles.screenContent,
-      contentInset ? {
-        paddingTop: contentInset.top,
-        paddingBottom: contentInset.bottom,
-        paddingLeft: contentInset.left,
-        paddingRight: contentInset.right,
-      } : undefined,
-    ];
+  if (scrollable) {
+    // Content styles applied via View wrapper for Unistyles reactivity
+    // (contentContainerStyle isn't reactive, only style prop is)
+    const contentInsetStyle = contentInset ? {
+      paddingTop: (safeArea ? insets.top : 0) + (contentInset.top ?? 0),
+      paddingBottom: (safeArea ? insets.bottom : 0) + (contentInset.bottom ?? 0),
+      paddingLeft: (safeArea ? insets.left : 0) + (contentInset.left ?? 0),
+      paddingRight: (safeArea ? insets.right : 0) + (contentInset.right ?? 0),
+    } : safeAreaStyle;
 
     return (
       <RNScrollView
         ref={ref as any}
         nativeID={id}
-        style={scrollViewStyle}
-        contentContainerStyle={contentContainerStyleArray}
+        style={[screenStyle, style]}
+        contentContainerStyle={{ flexGrow: 1 }}
         testID={testID}
       >
-        {children}
+        <RNView style={[contentInsetStyle, { flex: 1 }]}>
+          {children}
+        </RNView>
       </RNScrollView>
     );
   }
 
-  const containerStyle = [screenStyles.screen, style];
-
-  const view = (
-    <RNView ref={ref as any} nativeID={id} style={containerStyle} testID={testID}>
+  return (
+    <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID}>
       {children}
     </RNView>
   );
-
-  if (safeArea) {
-    return <SafeAreaView style={{ flex: 1 }}>{view}</SafeAreaView>;
-  }
-
-  return view;
 });
 
 Screen.displayName = 'Screen';

package/src/Screen/Screen.styles.old.tsx

@@ -0,0 +1,87 @@
+import { StyleSheet } from 'react-native-unistyles';
+import { Theme } from '@idealyst/theme';
+import {
+  buildGapVariants,
+  buildPaddingVariants,
+  buildPaddingVerticalVariants,
+  buildPaddingHorizontalVariants,
+  buildMarginVariants,
+  buildMarginVerticalVariants,
+  buildMarginHorizontalVariants,
+} from '../utils/buildViewStyleVariants';
+import { applyExtensions } from '../extensions/applyExtension';
+
+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' },
+  };
+}
+
+/**
+ * Create dynamic screen styles.
+ * Returns a function to ensure Unistyles can track theme changes.
+ */
+function createScreenStyles(theme: Theme) {
+    return (_props?: {}) => ({
+        flex: 1,
+        variants: {
+            background: generateBackgroundVariants(theme),
+            safeArea: {
+                true: {},
+                false: {},
+            },
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+        _web: {
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100%',
+            boxSizing: 'border-box',
+        },
+    });
+}
+
+/**
+ * Create dynamic screen content styles for ScrollView.
+ * No flex: 1 so content can grow beyond screen height.
+ */
+function createScreenContentStyles(theme: Theme) {
+    return (_props?: {}) => ({
+        variants: {
+            background: generateBackgroundVariants(theme),
+            safeArea: {
+                true: {},
+                false: {},
+            },
+            gap: buildGapVariants(theme),
+            padding: buildPaddingVariants(theme),
+            paddingVertical: buildPaddingVerticalVariants(theme),
+            paddingHorizontal: buildPaddingHorizontalVariants(theme),
+            margin: buildMarginVariants(theme),
+            marginVertical: buildMarginVerticalVariants(theme),
+            marginHorizontal: buildMarginHorizontalVariants(theme),
+        },
+    });
+}
+
+// Styles use applyExtensions to enable theme extensions and ensure proper
+// reactivity with Unistyles' native Shadow Tree updates.
+export const screenStyles = StyleSheet.create((theme: Theme) => {
+    return applyExtensions('Screen', theme, {
+        screen: createScreenStyles(theme),
+        screenContent: createScreenContentStyles(theme),
+    });
+});

package/src/Screen/Screen.styles.tsx

@@ -1,76 +1,125 @@
+/**
+ * Screen styles using defineStyle with $iterator expansion.
+ */
 import { StyleSheet } from 'react-native-unistyles';
-import { Theme } from '@idealyst/theme';
-import {
-  buildGapVariants,
-  buildPaddingVariants,
-  buildPaddingVerticalVariants,
-  buildPaddingHorizontalVariants,
-  buildMarginVariants,
-  buildMarginVerticalVariants,
-  buildMarginHorizontalVariants,
-} from '../utils/buildViewStyleVariants';
+import { defineStyle, ThemeStyleWrapper } from '@idealyst/theme';
+import type { Theme as BaseTheme } from '@idealyst/theme';
+import { ViewStyleSize } from '../utils/viewStyleProps';
 
-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' },
-  };
-}
+// Required: Unistyles must see StyleSheet usage in original source to process this file
+void StyleSheet;
 
-// 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),
-        safeArea: {
-          true: {},
-          false: {},
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type ScreenBackground = 'primary' | 'secondary' | 'tertiary' | 'inverse' | 'inverse-secondary' | 'inverse-tertiary' | 'transparent';
+
+export type ScreenDynamicProps = {
+    background?: ScreenBackground;
+    safeArea?: boolean;
+    gap?: ViewStyleSize;
+    padding?: ViewStyleSize;
+    paddingVertical?: ViewStyleSize;
+    paddingHorizontal?: ViewStyleSize;
+    margin?: ViewStyleSize;
+    marginVertical?: ViewStyleSize;
+    marginHorizontal?: ViewStyleSize;
+};
+
+/**
+ * Screen styles with $iterator expansion for spacing variants.
+ *
+ * NOTE: Top-level theme access required for Unistyles reactivity.
+ */
+export const screenStyles = defineStyle('Screen', (theme: Theme) => ({
+    screen: (_props: ScreenDynamicProps) => ({
+        flex: 1,
+        // Theme marker for Unistyles reactivity
+        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 },
+                'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
+                'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
+                transparent: { backgroundColor: 'transparent' },
+            },
+            safeArea: {
+                true: {},
+                false: {},
+            },
+            // $iterator expands for each view size
+            gap: {
+                gap: theme.sizes.$view.spacing,
+            },
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
         },
-        // Spacing variants from ContainerStyleProps
-        gap: buildGapVariants(theme),
-        padding: buildPaddingVariants(theme),
-        paddingVertical: buildPaddingVerticalVariants(theme),
-        paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        margin: buildMarginVariants(theme),
-        marginVertical: buildMarginVerticalVariants(theme),
-        marginHorizontal: buildMarginHorizontalVariants(theme),
-      },
-      _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),
-        safeArea: {
-          true: {},
-          false: {},
+        _web: {
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100%',
+            boxSizing: 'border-box',
+        },
+    }),
+
+    screenContent: (_props: ScreenDynamicProps) => ({
+        // Theme marker for Unistyles reactivity
+        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 },
+                'inverse-secondary': { backgroundColor: theme.colors.surface['inverse-secondary'] },
+                'inverse-tertiary': { backgroundColor: theme.colors.surface['inverse-tertiary'] },
+                transparent: { backgroundColor: 'transparent' },
+            },
+            safeArea: {
+                true: {},
+                false: {},
+            },
+            gap: {
+                gap: theme.sizes.$view.spacing,
+            },
+            padding: {
+                padding: theme.sizes.$view.padding,
+            },
+            paddingVertical: {
+                paddingVertical: theme.sizes.$view.padding,
+            },
+            paddingHorizontal: {
+                paddingHorizontal: theme.sizes.$view.padding,
+            },
+            margin: {
+                margin: theme.sizes.$view.padding,
+            },
+            marginVertical: {
+                marginVertical: theme.sizes.$view.padding,
+            },
+            marginHorizontal: {
+                marginHorizontal: theme.sizes.$view.padding,
+            },
         },
-        // Spacing variants from ContainerStyleProps
-        gap: buildGapVariants(theme),
-        padding: buildPaddingVariants(theme),
-        paddingVertical: buildPaddingVerticalVariants(theme),
-        paddingHorizontal: buildPaddingHorizontalVariants(theme),
-        margin: buildMarginVariants(theme),
-        marginVertical: buildMarginVerticalVariants(theme),
-        marginHorizontal: buildMarginHorizontalVariants(theme),
-      },
-    },
-  };
-});
+    }),
+}));

package/src/Screen/Screen.web.tsx

@@ -32,8 +32,8 @@ const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
     marginHorizontal,
   });
 
-  // Use getWebProps to generate className and ref for web
-  const webProps = getWebProps([screenStyles.screen, style as any]);
+  // Call style as function to get theme-reactive styles
+  const webProps = getWebProps([(screenStyles.screen as any)({}), style as any]);
 
   const mergedRef = useMergeRefs(ref, webProps.ref);
 

package/src/Select/Select.native.tsx

@@ -86,6 +86,27 @@ const Select = forwardRef<View, SelectProps>(({
     marginHorizontal,
   });
 
+  // Get dynamic styles - call as functions for theme reactivity
+  const containerStyle = (selectStyles.container as any)({});
+  const labelStyle = (selectStyles.label as any)({});
+  const triggerStyle = (selectStyles.trigger as any)({ type, intent, disabled, error, focused: isOpen });
+  const triggerContentStyle = (selectStyles.triggerContent as any)({});
+  const triggerTextStyle = (selectStyles.triggerText as any)({});
+  const placeholderStyle = (selectStyles.placeholder as any)({});
+  const iconStyle = (selectStyles.icon as any)({});
+  const chevronStyle = (selectStyles.chevron as any)({});
+  const dropdownStyle = (selectStyles.dropdown as any)({});
+  const searchContainerStyle = (selectStyles.searchContainer as any)({});
+  const searchInputStyle = (selectStyles.searchInput as any)({});
+  const optionsListStyle = (selectStyles.optionsList as any)({});
+  const optionStyle = (selectStyles.option as any)({});
+  const optionContentStyle = (selectStyles.optionContent as any)({});
+  const optionIconStyle = (selectStyles.optionIcon as any)({});
+  const optionTextStyle = (selectStyles.optionText as any)({});
+  const optionTextDisabledStyle = (selectStyles.optionTextDisabled as any)({});
+  const helperTextStyle = (selectStyles.helperText as any)({ error });
+  const overlayStyle = (selectStyles.overlay as any)({});
+
   const handleTriggerPress = () => {
     if (disabled) return;
 
@@ -158,10 +179,10 @@ const Select = forwardRef<View, SelectProps>(({
 
   const renderChevron = () => {
     return (
-      <View style={selectStyles.chevron}>
+      <View style={chevronStyle}>
         <MaterialCommunityIcons
           name="chevron-down"
-          style={selectStyles.chevron}
+          style={chevronStyle}
         />
       </View>
     );
@@ -172,7 +193,6 @@ const Select = forwardRef<View, SelectProps>(({
 
     // If it's a string, render as MaterialCommunityIcons
     if (typeof icon === 'string') {
-      const iconStyle = selectStyles.icon;
       return (
         <View style={iconStyle}>
           <MaterialCommunityIcons
@@ -184,7 +204,7 @@ const Select = forwardRef<View, SelectProps>(({
     }
 
     // Otherwise render the React element directly
-    return <View style={selectStyles.icon}>{icon}</View>;
+    return <View style={iconStyle}>{icon}</View>;
   };
 
   const renderOptionIcon = (icon: any) => {
@@ -192,11 +212,10 @@ const Select = forwardRef<View, SelectProps>(({
 
     // If it's a string, render as MaterialCommunityIcons
     if (typeof icon === 'string') {
-      const iconStyle = selectStyles.optionIcon;
       return (
-        <View style={iconStyle}>
+        <View style={optionIconStyle}>
           <MaterialCommunityIcons
-            style={iconStyle}
+            style={optionIconStyle}
             name={icon}
           />
         </View>
@@ -204,7 +223,7 @@ const Select = forwardRef<View, SelectProps>(({
     }
 
     // Otherwise render the React element directly
-    return <View style={selectStyles.optionIcon}>{icon}</View>;
+    return <View style={optionIconStyle}>{icon}</View>;
   };
 
   const renderDropdown = () => {
@@ -222,7 +241,7 @@ const Select = forwardRef<View, SelectProps>(({
         onRequestClose={closeDropdown}
       >
         <Pressable
-          style={selectStyles.overlay}
+          style={overlayStyle}
           onPress={closeDropdown}
         >
           <BoundedModalContent
@@ -233,7 +252,7 @@ const Select = forwardRef<View, SelectProps>(({
           >
             <Animated.View
               style={[
-                selectStyles.dropdown,
+                dropdownStyle,
                 {
                   position: 'relative', // Override absolute positioning from styles
                   top: 0, // Override top: '100%' from styles
@@ -246,9 +265,9 @@ const Select = forwardRef<View, SelectProps>(({
               onLayout={handleDropdownLayout}
             >
             {searchable && (
-              <View style={selectStyles.searchContainer}>
+              <View style={searchContainerStyle}>
                 <TextInput
-                  style={selectStyles.searchInput}
+                  style={searchInputStyle}
                   placeholder="Search options..."
                   value={searchTerm}
                   onChangeText={handleSearchChange}
@@ -258,23 +277,23 @@ const Select = forwardRef<View, SelectProps>(({
             )}
 
             <ScrollView
-              style={selectStyles.optionsList}
+              style={optionsListStyle}
               showsVerticalScrollIndicator={true}
             >
               {filteredOptions.map((option) => (
                   <Pressable
                     key={option.value}
-                    style={selectStyles.option}
+                    style={optionStyle}
                     onPress={() => handleOptionSelect(option)}
                     disabled={option.disabled}
                     android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
                   >
-                    <View style={selectStyles.optionContent}>
+                    <View style={optionContentStyle}>
                       {renderOptionIcon(option.icon)}
                       <Text
                         style={[
-                          selectStyles.optionText,
-                          option.disabled && selectStyles.optionTextDisabled,
+                          optionTextStyle,
+                          option.disabled && optionTextDisabledStyle,
                         ]}
                       >
                         {option.label}
@@ -284,8 +303,8 @@ const Select = forwardRef<View, SelectProps>(({
                 ))}
 
               {filteredOptions.length === 0 && (
-                <View style={selectStyles.option}>
-                  <Text style={selectStyles.optionText}>
+                <View style={optionStyle}>
+                  <Text style={optionTextStyle}>
                     No options found
                   </Text>
                 </View>
@@ -299,16 +318,16 @@ const Select = forwardRef<View, SelectProps>(({
   };
 
   return (
-    <View ref={ref} nativeID={id} style={[selectStyles.container, style]} testID={testID}>
+    <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID}>
       {label && (
-        <Text style={selectStyles.label}>
+        <Text style={labelStyle}>
           {label}
         </Text>
       )}
 
       <Pressable
         ref={mergedTriggerRef}
-        style={selectStyles.trigger({ type, intent })}
+        style={triggerStyle}
         onPress={handleTriggerPress}
         disabled={disabled}
         accessibilityLabel={accessibilityLabel || label}
@@ -319,11 +338,11 @@ const Select = forwardRef<View, SelectProps>(({
         }}
         android_ripple={{ color: 'rgba(0, 0, 0, 0.1)' }}
       >
-        <View style={selectStyles.triggerContent}>
+        <View style={triggerContentStyle}>
           {renderTriggerIcon(selectedOption?.icon)}
           <Text
             style={[
-              selectedOption ? selectStyles.triggerText : selectStyles.placeholder,
+              selectedOption ? triggerTextStyle : placeholderStyle,
             ]}
             numberOfLines={1}
           >
@@ -338,11 +357,7 @@ const Select = forwardRef<View, SelectProps>(({
       {!(Platform.OS === 'ios' && presentationMode === 'actionSheet') && renderDropdown()}
 
       {helperText && (
-        <Text
-          style={[
-            selectStyles.helperText,
-          ]}
-        >
+        <Text style={helperTextStyle}>
           {helperText}
         </Text>
       )}