@idealyst/components 1.2.50 → 1.2.52

package/package.json

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

package/src/Dialog/Dialog.native.tsx

@@ -1,6 +1,7 @@
-import { useEffect, forwardRef, useMemo } from 'react';
-import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, GestureResponderEvent, Keyboard, Platform } from 'react-native';
+import { useEffect, forwardRef, useMemo, useState } from 'react';
+import { Modal, View, Text, TouchableOpacity, TouchableWithoutFeedback, BackHandler, Platform, Keyboard, useWindowDimensions } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { DialogProps } from './types';
 import { dialogStyles } from './Dialog.styles';
 import { getNativeInteractiveAccessibilityProps } from '../utils/accessibility';
@@ -16,6 +17,9 @@ const Dialog = forwardRef<View, DialogProps>(({
   closeOnBackdropClick = true,
   animationType: _animationType = 'fade',
   avoidKeyboard = false,
+  padding: paddingProp = 20,
+  maxContentHeight,
+  contentPadding = 24,
   style,
   testID,
   id,
@@ -41,32 +45,31 @@ const Dialog = forwardRef<View, DialogProps>(({
   const backdropOpacity = useSharedValue(0);
   const containerScale = useSharedValue(0.9);
   const containerOpacity = useSharedValue(0);
-  const keyboardOffset = useSharedValue(0);
 
-  // Listen for keyboard events and animate offset
+  // Get safe area insets
+  const insets = useSafeAreaInsets();
+
+  // Track keyboard height for avoidKeyboard
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+  const { height: screenHeight } = useWindowDimensions();
+
   useEffect(() => {
     if (!avoidKeyboard || !open) 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 / 2, {
-        duration: Platform.OS === 'ios' ? e.duration : 250,
-        easing: Easing.out(Easing.cubic),
-      });
+    const showSub = Keyboard.addListener(showEvent, (e) => {
+      setKeyboardHeight(e.endCoordinates.height);
     });
 
-    const hideSubscription = Keyboard.addListener(hideEvent, (e) => {
-      keyboardOffset.value = withTiming(0, {
-        duration: Platform.OS === 'ios' ? (e.duration ?? 250) : 250,
-        easing: Easing.out(Easing.cubic),
-      });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
     });
 
     return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
+      showSub.remove();
+      hideSub.remove();
     };
   }, [avoidKeyboard, open]);
 
@@ -142,8 +145,7 @@ const Dialog = forwardRef<View, DialogProps>(({
       opacity: containerOpacity.value,
       transform: [
         { scale: containerScale.value },
-        { translateY: -keyboardOffset.value },
-      ] as { scale: number }[] & { translateY: number }[],
+      ] as { scale: number }[],
     };
   });
 
@@ -154,19 +156,6 @@ const Dialog = forwardRef<View, DialogProps>(({
   const titleStyle = (dialogStyles.title as any)({});
   const closeButtonStyle = (dialogStyles.closeButton as any)({});
   const closeButtonTextStyle = (dialogStyles.closeButtonText as any)({});
-  const contentStyle = (dialogStyles.content as any)({});
-
-  // Style for custom backdrop wrapper (no default backdrop styling)
-  const customBackdropWrapperStyle = {
-    position: 'absolute' as const,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: 'flex' as const,
-    alignItems: 'center' as const,
-    justifyContent: 'center' as const,
-  };
 
   // Style for custom backdrop component container (fills entire backdrop area)
   const customBackdropContainerStyle = {
@@ -177,33 +166,55 @@ const Dialog = forwardRef<View, DialogProps>(({
     bottom: 0,
   };
 
+  // Position offsets for the container view
+  // Top: always safe area + padding
+  // Bottom: safe area + padding (no keyboard) or keyboard + padding (with keyboard)
+  const topOffset = insets.top + paddingProp;
+  const bottomOffset = keyboardHeight > 0
+    ? keyboardHeight + paddingProp
+    : insets.bottom + paddingProp;
+
+  // Max height is the available space (used as a ceiling, children can be smaller)
+  const maxAvailableHeight = screenHeight - topOffset - bottomOffset;
+
+  // Use the smaller of user's preferred max height and available space
+  const effectiveMaxHeight = maxContentHeight
+    ? Math.min(maxContentHeight, maxAvailableHeight)
+    : maxAvailableHeight;
+
+  // Dialog uses the effective max height, with flex: 1 so children can fill it
+  const dialogContainerStyle = {
+    ...containerStyle,
+    maxHeight: effectiveMaxHeight,
+    height: maxContentHeight ? effectiveMaxHeight : undefined,
+    flex: undefined,
+  };
+
   const dialogContainer = (
-    <TouchableWithoutFeedback onPress={(e: GestureResponderEvent) => e.stopPropagation()}>
-      <Animated.View ref={ref as any} style={[containerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
-        {(title || showCloseButton) && (
-          <View style={headerStyle}>
-            {title && (
-              <Text style={titleStyle}>
-                {title}
-              </Text>
-            )}
-            {showCloseButton && (
-              <TouchableOpacity
-                style={closeButtonStyle}
-                onPress={handleClosePress}
-                accessibilityLabel="Close dialog"
-                accessibilityRole="button"
-              >
-                <Text style={closeButtonTextStyle}>×</Text>
-              </TouchableOpacity>
-            )}
-          </View>
-        )}
-        <View style={contentStyle}>
-          {children}
+    <Animated.View ref={ref as any} style={[dialogContainerStyle, style, containerAnimatedStyle]} nativeID={id} {...nativeA11yProps}>
+      {(title || showCloseButton) && (
+        <View style={headerStyle}>
+          {title && (
+            <Text style={titleStyle}>
+              {title}
+            </Text>
+          )}
+          {showCloseButton && (
+            <TouchableOpacity
+              style={closeButtonStyle}
+              onPress={handleClosePress}
+              accessibilityLabel="Close dialog"
+              accessibilityRole="button"
+            >
+              <Text style={closeButtonTextStyle}>×</Text>
+            </TouchableOpacity>
+          )}
         </View>
-      </Animated.View>
-    </TouchableWithoutFeedback>
+      )}
+      <View style={contentPadding > 0 ? { padding: contentPadding } : undefined}>
+        {children}
+      </View>
+    </Animated.View>
   );
 
   return (
@@ -215,20 +226,36 @@ const Dialog = forwardRef<View, DialogProps>(({
       statusBarTranslucent
       testID={testID}
     >
-      <TouchableWithoutFeedback onPress={handleBackdropPress}>
-        {BackdropComponent ? (
-          <View style={customBackdropWrapperStyle}>
-            <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]}>
+      {/* Backdrop layer - positioned absolute, full screen */}
+      {BackdropComponent ? (
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <Animated.View style={[customBackdropContainerStyle, backdropAnimatedStyle]} pointerEvents="auto">
+            <View style={{ flex: 1 }} pointerEvents="none">
               <BackdropComponent isVisible={open} />
-            </Animated.View>
-            {dialogContainer}
-          </View>
-        ) : (
-          <Animated.View style={[backdropStyle, backdropAnimatedStyle]}>
-            {dialogContainer}
+            </View>
           </Animated.View>
-        )}
-      </TouchableWithoutFeedback>
+        </TouchableWithoutFeedback>
+      ) : (
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <Animated.View style={[backdropStyle, backdropAnimatedStyle]} />
+        </TouchableWithoutFeedback>
+      )}
+      {/* Dialog content - positioned absolute, accounts for keyboard and safe areas */}
+      <View
+        style={{
+          position: 'absolute',
+          top: topOffset,
+          left: 0,
+          right: 0,
+          bottom: bottomOffset,
+          alignItems: 'center',
+          justifyContent: 'center',
+          zIndex: 1001,
+        }}
+        pointerEvents="box-none"
+      >
+        {dialogContainer}
+      </View>
     </Modal>
   );
 });

package/src/Dialog/Dialog.styles.tsx

@@ -64,6 +64,7 @@ export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
             shadowRadius: 20,
             elevation: 10,
             maxHeight: '90%',
+            flexDirection: 'column' as const,
             ...sizeStyles,
             ...typeStyles,
             _web: {
@@ -127,6 +128,7 @@ export const dialogStyles = defineStyle('Dialog', (theme: Theme) => ({
     }),
 
     content: (_props: DialogDynamicProps) => ({
+        flex: 1,
         _web: {
             overflow: 'visible',
             maxHeight: 'none',

package/src/Dialog/Dialog.web.tsx

@@ -21,6 +21,8 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   showCloseButton = true,
   closeOnBackdropClick = true,
   closeOnEscapeKey = true,
+  height,
+  contentPadding = 24,
   style,
   testID,
   id,
@@ -144,14 +146,19 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(({
   const containerProps = getWebProps([
     (dialogStyles.container as any)({}),
     style as any,
+    height !== undefined ? { height, display: 'flex', flexDirection: 'column' } : null,
     isVisible
       ? { opacity: 1, transform: 'scale(1) translateY(0px)' }
       : { opacity: 0, transform: 'scale(0.96) translateY(-4px)' }
-  ]);
+  ].filter(Boolean));
   const headerProps = getWebProps([(dialogStyles.header as any)({})]);
   const titleProps = getWebProps([(dialogStyles.title as any)({})]);
   const closeButtonProps = getWebProps([(dialogStyles.closeButton as any)({})]);
-  const contentProps = getWebProps([(dialogStyles.content as any)({})]);
+  const contentProps = getWebProps([
+    (dialogStyles.content as any)({}),
+    height !== undefined ? { flex: 1, overflow: 'auto' } : null,
+    contentPadding > 0 ? { padding: contentPadding } : null,
+  ].filter(Boolean));
 
   const mergedBackdropRef = useMergeRefs(ref, backdropProps.ref);
 

package/src/Dialog/types.ts

@@ -73,6 +73,11 @@ export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
    */
   animationType?: DialogAnimationType;
 
+  /**
+   * Maximum height for the dialog content area (native only)
+   */
+  maxContentHeight?: number;
+
   /**
    * Additional styles (platform-specific)
    */
@@ -96,4 +101,18 @@ export interface DialogProps extends BaseProps, InteractiveAccessibilityProps {
    * @default false
    */
   avoidKeyboard?: boolean;
+
+  /**
+   * Fixed height for the dialog container.
+   * Can be a number (pixels) or a string (e.g., '50%', '400px').
+   * When set, children can use flex: 1 to fill the available space.
+   */
+  height?: number | string;
+
+  /**
+   * Padding for the dialog content area.
+   * Set to 0 to disable padding for custom layouts.
+   * @default 24
+   */
+  contentPadding?: number;
 }

package/src/index.native.ts

@@ -16,6 +16,9 @@ export * from './Pressable/types';
 export { default as Input } from './Input';
 export * from './Input/types';
 
+export { default as TextInput } from './TextInput';
+export * from './TextInput/types';
+
 // New primitive components
 export { default as Checkbox } from './Checkbox';
 export * from './Checkbox/types';
@@ -115,6 +118,7 @@ export type { IconButtonProps } from './IconButton/types';
 export type { TextProps } from './Text/types';
 export type { ViewProps } from './View/types';
 export type { InputProps } from './Input/types';
+export type { TextInputProps } from './TextInput/types';
 export type { CheckboxProps } from './Checkbox/types';
 export type { CardProps } from './Card/types';
 export type { DividerProps } from './Divider/types';