@idealyst/components 1.1.7 → 1.1.9

package/src/Screen/Screen.native.tsx

@@ -6,7 +6,7 @@ import { screenStyles } from './Screen.styles';
 
 const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   children,
-  background = 'primary',
+  background = 'screen',
   safeArea = true,
   scrollable = true,
   contentInset,
@@ -24,6 +24,7 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
 }, ref) => {
   const insets = useSafeAreaInsets();
 
+  // Set active variants for this render
   screenStyles.useVariants({
     background,
     safeArea,
@@ -36,6 +37,9 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
     marginHorizontal,
   });
 
+  // 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,
@@ -45,43 +49,32 @@ const Screen = forwardRef<RNView | RNScrollView, ScreenProps>(({
   } : undefined;
 
   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];
-
-    const contentContainerStyleArray = [
-      screenStyles.screenContent,
-      safeAreaStyle,
-      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),
-      } : undefined,
-    ];
+    // 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 screenStyle = (screenStyles.screen as any)({});
-  const containerStyle = [
-    screenStyle,
-    safeAreaStyle,
-    style,
-  ];
-
   return (
-    <RNView ref={ref as any} nativeID={id} style={containerStyle} testID={testID}>
+    <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID}>
       {children}
     </RNView>
   );

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,87 +1,122 @@
+/**
+ * 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 { applyExtensions } from '../extensions/applyExtension';
+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;
 
-// Style creators for extension support
-function createScreenStyles(theme: Theme) {
-    return () => ({
+// Wrap theme for $iterator support
+type Theme = ThemeStyleWrapper<BaseTheme>;
+
+type ScreenBackground = 'screen' | '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,
         variants: {
-            background: generateBackgroundVariants(theme),
+            background: {
+                screen: { backgroundColor: theme.colors.surface.screen },
+                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: {},
             },
-            // 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),
+            // $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,
+            },
         },
         _web: {
-            overflow: 'auto',
             display: 'flex',
             flexDirection: 'column',
             minHeight: '100%',
             boxSizing: 'border-box',
         },
-    });
-}
-
-// 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) => {
-    // Apply extensions to main visual elements
-    const extended = applyExtensions('Screen', theme, {
-        screen: createScreenStyles(theme),
-    });
+    }),
 
-    return {
-        ...extended,
-        // Minor utility styles (not extended)
-        // Content style for ScrollView - no flex: 1 so content can grow
-        screenContent: {
-            backgroundColor: theme.colors.surface.primary,
-            variants: {
-                background: generateBackgroundVariants(theme),
-                safeArea: {
-                    true: {},
-                    false: {},
-                },
-                // 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),
+    screenContent: (_props: ScreenDynamicProps) => ({
+        variants: {
+            background: {
+                screen: { backgroundColor: theme.colors.surface.screen },
+                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,
             },
         },
-    };
-});
+    }),
+}));

package/src/Screen/Screen.web.tsx

@@ -6,7 +6,7 @@ import useMergeRefs from '../hooks/useMergeRefs';
 
 const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
   children,
-  background = 'primary',
+  background = 'screen',
   safeArea = false,
   // Spacing variants from ContainerStyleProps
   gap,
@@ -32,7 +32,7 @@ const Screen = forwardRef<HTMLDivElement, ScreenProps>(({
     marginHorizontal,
   });
 
-  // Use getWebProps to generate className and ref for web
+  // 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 as any)({}),
+                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 as any)({})}
+                    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 as any)({})}>
-                  <Text style={selectStyles.optionText}>
+                <View style={optionStyle}>
+                  <Text style={optionTextStyle}>
                     No options found
                   </Text>
                 </View>
@@ -298,16 +317,10 @@ const Select = forwardRef<View, SelectProps>(({
     );
   };
 
-  // Get dynamic styles
-  const containerStyle = (selectStyles.container as any)({});
-  const triggerStyle = (selectStyles.trigger as any)({ type, intent });
-  const dropdownStyle = (selectStyles.dropdown as any)({});
-  const optionStyle = (selectStyles.option as any)({});
-
   return (
     <View ref={ref} nativeID={id} style={[containerStyle, style]} testID={testID}>
       {label && (
-        <Text style={selectStyles.label}>
+        <Text style={labelStyle}>
           {label}
         </Text>
       )}
@@ -325,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}
           >
@@ -344,11 +357,7 @@ const Select = forwardRef<View, SelectProps>(({
       {!(Platform.OS === 'ios' && presentationMode === 'actionSheet') && renderDropdown()}
 
       {helperText && (
-        <Text
-          style={[
-            selectStyles.helperText,
-          ]}
-        >
+        <Text style={helperTextStyle}>
           {helperText}
         </Text>
       )}