@idealyst/components 1.2.74 → 1.2.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.74",
+  "version": "1.2.76",
   "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.74",
+    "@idealyst/theme": "^1.2.76",
     "@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.74",
+    "@idealyst/theme": "^1.2.76",
     "@idealyst/tooling": "^1.2.30",
     "@mdi/react": "^1.6.1",
     "@types/react": "^19.1.0",

package/src/Screen/Screen.native.tsx

@@ -10,6 +10,10 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   children,
   background = 'screen',
   safeArea = true,
+  safeAreaTop,
+  safeAreaBottom,
+  safeAreaLeft,
+  safeAreaRight,
   scrollable = true,
   avoidKeyboard = true,
   contentInset,
@@ -28,6 +32,12 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
 }, ref) => {
   const insets = useSafeAreaInsets();
 
+  // Resolve safe area per edge: specific prop > general safeArea prop
+  const applySafeAreaTop = safeAreaTop ?? safeArea;
+  const applySafeAreaBottom = safeAreaBottom ?? safeArea;
+  const applySafeAreaLeft = safeAreaLeft ?? safeArea;
+  const applySafeAreaRight = safeAreaRight ?? safeArea;
+
   // Animated keyboard offset
   const keyboardOffset = useSharedValue(0);
 
@@ -82,22 +92,22 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   // 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;
+  // Calculate safe area padding per edge
+  const safeAreaStyle = {
+    paddingTop: applySafeAreaTop ? insets.top : 0,
+    paddingBottom: applySafeAreaBottom ? insets.bottom : 0,
+    paddingLeft: applySafeAreaLeft ? insets.left : 0,
+    paddingRight: applySafeAreaRight ? insets.right : 0,
+  };
 
   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),
+      paddingTop: safeAreaStyle.paddingTop + (contentInset.top ?? 0),
+      paddingBottom: safeAreaStyle.paddingBottom + (contentInset.bottom ?? 0),
+      paddingLeft: safeAreaStyle.paddingLeft + (contentInset.left ?? 0),
+      paddingRight: safeAreaStyle.paddingRight + (contentInset.right ?? 0),
     } : safeAreaStyle;
 
     return (

package/src/Screen/Screen.web.tsx

@@ -15,6 +15,10 @@ const Screen = forwardRef<IdealystElement, ScreenProps>(({
   children,
   background = 'screen',
   safeArea = false,
+  safeAreaTop: _safeAreaTop,
+  safeAreaBottom: _safeAreaBottom,
+  safeAreaLeft: _safeAreaLeft,
+  safeAreaRight: _safeAreaRight,
   onLayout,
   // Spacing variants from ContainerStyleProps
   gap,

package/src/Screen/types.ts

@@ -20,10 +20,35 @@ export interface ScreenProps extends ContainerStyleProps {
   background?: Surface | 'transparent';
 
   /**
-   * Safe area padding for mobile devices
+   * Safe area padding for all edges (lower precedence).
+   * Individual edge props (safeAreaTop, etc.) override this when set.
    */
   safeArea?: boolean;
 
+  /**
+   * Safe area padding for the top edge.
+   * Overrides safeArea for top when explicitly set.
+   */
+  safeAreaTop?: boolean;
+
+  /**
+   * Safe area padding for the bottom edge.
+   * Overrides safeArea for bottom when explicitly set.
+   */
+  safeAreaBottom?: boolean;
+
+  /**
+   * Safe area padding for the left edge.
+   * Overrides safeArea for left when explicitly set.
+   */
+  safeAreaLeft?: boolean;
+
+  /**
+   * Safe area padding for the right edge.
+   * Overrides safeArea for right when explicitly set.
+   */
+  safeAreaRight?: boolean;
+
   /**
    * Content inset padding for scrollable content (mobile only)
    * Adds padding to the scroll view's content container

package/src/TextArea/TextArea.styles.tsx

@@ -126,7 +126,7 @@ export const textAreaStyles = defineStyle('TextArea', (theme: Theme) => ({
             size: {
                 fontSize: theme.sizes.$textarea.fontSize,
                 padding: theme.sizes.$textarea.padding,
-                lineHeight: theme.sizes.$textarea.lineHeight,
+                lineHeight: 'auto',
             },
             autoGrow: {
                 true: {