@idealyst/components 1.2.73 → 1.2.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/components",
-  "version": "1.2.73",
+  "version": "1.2.75",
   "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.73",
+    "@idealyst/theme": "^1.2.75",
     "@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.73",
+    "@idealyst/theme": "^1.2.75",
     "@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: {

package/src/TextInput/TextInput.native.tsx

@@ -86,6 +86,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
   // Submit handling
   onSubmitEditing,
   returnKeyType = 'default',
+  textContentType,
 }, ref) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
@@ -183,6 +184,10 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     hasError,
   ]);
 
+  // Determine the textContentType for iOS AutoFill
+  // If explicitly provided, use that; otherwise default password fields to 'password'
+  const resolvedTextContentType = textContentType ?? (isSecureField ? 'password' : undefined);
+
   // Memoized TextInput props (everything except value/onChangeText)
   const textInputProps = useMemo(() => ({
     onPress: handlePress,
@@ -196,6 +201,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     onSubmitEditing: handleSubmitEditing,
     returnKeyType,
     placeholderTextColor: '#999999',
+    textContentType: resolvedTextContentType,
     ...nativeA11yProps,
   }), [
     handlePress,
@@ -209,6 +215,7 @@ const TextInput = React.forwardRef<IdealystElement, TextInputProps>(({
     handleBlur,
     handleSubmitEditing,
     returnKeyType,
+    resolvedTextContentType,
     nativeA11yProps,
   ]);
 

package/src/TextInput/types.ts

@@ -23,6 +23,31 @@ export type TextInputMode = 'text' | 'email' | 'password' | 'number';
  */
 export type ReturnKeyType = 'done' | 'go' | 'next' | 'search' | 'send' | 'default';
 
+/**
+ * Text content type for iOS AutoFill.
+ * Helps iOS identify the purpose of the field for password/credential autofill.
+ * @platform ios
+ */
+export type TextContentType =
+  | 'none'
+  | 'username'
+  | 'password'
+  | 'newPassword'
+  | 'oneTimeCode'
+  | 'emailAddress'
+  | 'name'
+  | 'givenName'
+  | 'familyName'
+  | 'telephoneNumber'
+  | 'streetAddressLine1'
+  | 'streetAddressLine2'
+  | 'addressCity'
+  | 'addressState'
+  | 'addressCityAndState'
+  | 'postalCode'
+  | 'countryName'
+  | 'creditCardNumber';
+
 /**
  * Single-line text input field with support for icons, validation states, and multiple visual styles.
  * Includes built-in password visibility toggle and platform-specific keyboard handling.
@@ -160,6 +185,15 @@ export interface TextInputProps extends FormInputStyleProps, FormAccessibilityPr
    */
   returnKeyType?: ReturnKeyType;
 
+  /**
+   * iOS AutoFill content type. Helps iOS identify the field purpose for
+   * password/credential autofill. Set to 'none' to disable autofill suggestions.
+   * For password fields, use 'password' for existing passwords or 'newPassword' for signup.
+   * Pair with a username field using 'username' or 'emailAddress' for best results.
+   * @platform ios
+   */
+  textContentType?: TextContentType;
+
   /**
    * Additional styles (platform-specific)
    */