@idealyst/components 1.2.44 → 1.2.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.44",
+  "version": "1.2.46",
   "description": "Shared component library for React and React Native",
   "documentation": "https://github.com/IdealystIO/idealyst-framework/tree/main/packages/components#readme",
   "readme": "README.md",
@@ -56,7 +56,7 @@
     "publish:npm": "npm publish"
   },
   "peerDependencies": {
-    "@idealyst/theme": "^1.2.44",
+    "@idealyst/theme": "^1.2.46",
     "@mdi/js": ">=7.0.0",
     "@mdi/react": ">=1.0.0",
     "@react-native-vector-icons/common": ">=12.0.0",
@@ -107,7 +107,7 @@
   },
   "devDependencies": {
     "@idealyst/blur": "^1.2.40",
-    "@idealyst/theme": "^1.2.44",
+    "@idealyst/theme": "^1.2.46",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Dialog/Dialog.styles.tsx

@@ -127,7 +127,6 @@ export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
     }),
 
     content: (_props: DialogDynamicProps) => ({
-        padding: 24,
         _web: {
             overflow: 'visible',
             maxHeight: 'none',

package/src/Icon/IconSvg/IconSvg.web.tsx

@@ -34,6 +34,10 @@ export const IconSvg: React.FC<IconSvgProps> = ({
   // Look up path from registry
   const path = IconRegistry.get(name);
 
+  // Convert numeric size to pixel string to prevent @mdi/react from
+  // treating it as a multiplier of the base 24px size
+  const normalizedSize = typeof size === 'number' ? `${size}px` : size;
+
   // Warn in development if icon is not registered
   if (!path && process.env.NODE_ENV !== 'production') {
     console.warn(
@@ -51,7 +55,7 @@ export const IconSvg: React.FC<IconSvgProps> = ({
       style={style}
       className={className}
       path={path}
-      size={size}
+      size={normalizedSize}
       color={color}
       aria-label={ariaLabel || name}
       data-testid={testID}

package/src/Screen/Screen.native.tsx

@@ -1,5 +1,6 @@
-import { forwardRef } from 'react';
-import { View as RNView, ScrollView as RNScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import { forwardRef, useEffect } from 'react';
+import { View as RNView, ScrollView as RNScrollView, Keyboard, Platform } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScreenProps } from './types';
 import { screenStyles } from './Screen.styles';
@@ -27,6 +28,40 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
 }, ref) => {
   const insets = useSafeAreaInsets();
 
+  // Animated keyboard offset
+  const keyboardOffset = useSharedValue(0);
+
+  // Listen for keyboard events and animate
+  useEffect(() => {
+    if (!avoidKeyboard) return;
+
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+    const showSubscription = Keyboard.addListener(showEvent, (e) => {
+      keyboardOffset.value = withTiming(e.endCoordinates.height, {
+        duration: Platform.OS === 'ios' ? e.duration : 250,
+        easing: Easing.out(Easing.cubic),
+      });
+    });
+
+    const hideSubscription = Keyboard.addListener(hideEvent, (e) => {
+      keyboardOffset.value = withTiming(0, {
+        duration: Platform.OS === 'ios' ? (e.duration ?? 250) : 250,
+        easing: Easing.out(Easing.cubic),
+      });
+    });
+
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, [avoidKeyboard]);
+
+  const animatedKeyboardStyle = useAnimatedStyle(() => ({
+    paddingBottom: keyboardOffset.value,
+  }));
+
   // Handle 'transparent' background separately since it's not a surface color key
   // The $surface iterator only expands to actual surface color keys
   const backgroundVariant = background === 'transparent' ? undefined : background;
@@ -55,13 +90,6 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     paddingRight: insets.right,
   } : undefined;
 
-  // Wrapper component for keyboard avoidance
-  const KeyboardWrapper = avoidKeyboard ? KeyboardAvoidingView : RNView;
-  const keyboardWrapperProps = avoidKeyboard ? {
-    behavior: Platform.OS === 'ios' ? 'padding' as const : 'height' as const,
-    style: { flex: 1 },
-  } : { style: { flex: 1 } };
-
   if (scrollable) {
     // Content styles applied via View wrapper for Unistyles reactivity
     // (contentContainerStyle isn't reactive, only style prop is)
@@ -73,7 +101,7 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
     } : safeAreaStyle;
 
     return (
-      <KeyboardWrapper {...keyboardWrapperProps}>
+      <Animated.View style={[{ flex: 1 }, avoidKeyboard && animatedKeyboardStyle]}>
         <RNScrollView
           ref={ref as any}
           nativeID={id}
@@ -87,16 +115,16 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
             {children}
           </RNView>
         </RNScrollView>
-      </KeyboardWrapper>
+      </Animated.View>
     );
   }
 
   return (
-    <KeyboardWrapper {...keyboardWrapperProps}>
+    <Animated.View style={[{ flex: 1 }, avoidKeyboard && animatedKeyboardStyle]}>
       <RNView ref={ref as any} nativeID={id} style={[screenStyle, safeAreaStyle, style]} testID={testID} onLayout={onLayout}>
         {children}
       </RNView>
-    </KeyboardWrapper>
+    </Animated.View>
   );
 });
 

package/src/TextArea/TextArea.styles.tsx

@@ -68,6 +68,7 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
 
     textareaContainer: (_props: TextAreaVariants) => ({
         position: 'relative' as const,
+        width: '100%',
         borderWidth: 1,
         borderColor: theme.colors.border.primary,
         borderRadius: theme.radii.md,
@@ -80,6 +81,7 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
             },
         },
         _web: {
+            boxSizing: 'border-box',
             border: `1px solid ${theme.colors.border.primary}`,
         },
     }),
@@ -112,9 +114,13 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
             },
         },
         _web: {
+            display: 'block',
+            width: '100%',
             fontFamily: 'inherit',
             outline: 'none',
             border: 'none',
+            borderWidth: 0,
+            background: 'transparent',
             transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
             boxSizing: 'border-box',
             overflowY: 'hidden',