react-native-mantine 0.5.0 → 0.7.0

package/src/components/Dialog/index.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useEffect, useRef } from 'react';
-import { Animated } from 'react-native';
+import { Animated, Dimensions, ScrollView } from 'react-native';
 import { Paper } from '../Paper';
 import type { DefaultProps, MantineNumberSize, SpacingValue } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
@@ -30,6 +30,9 @@ export interface DialogProps extends DefaultProps {
     bottom?: number;
   };
 
+  /** If true, dialog will be centered on screen */
+  centered?: boolean;
+
   /** If true, dialog will show shadow */
   withShadow?: boolean;
 
@@ -57,6 +60,7 @@ const useStyles = createStyles(
     {
       size,
       position,
+      centered,
     }: {
       size: MantineNumberSize | number;
       position?: {
@@ -65,6 +69,7 @@ const useStyles = createStyles(
         right?: number;
         bottom?: number;
       };
+      centered?: boolean;
     }
   ) => {
     const getSize = () => {
@@ -73,6 +78,28 @@ const useStyles = createStyles(
       return rem(sizes[sizeKey] || sizes.md);
     };
 
+    const screenHeight = Dimensions.get('window').height;
+    const verticalMargin = 40; // Safety margin from screen edges
+
+    // If centered, calculate center position
+    if (centered) {
+      return {
+        root: {
+          position: 'absolute' as const,
+          width: getSize() as any,
+          maxWidth: '90%' as any,
+          maxHeight: (screenHeight - verticalMargin) as any,
+          zIndex: 1000,
+          // Center horizontally and vertically
+          left: '5%' as any,
+          right: '5%' as any,
+          top: '50%' as any,
+          transform: [{ translateY: -(screenHeight * 0.25) }] as any,
+        },
+      };
+    }
+
+    // Default positioning logic
     const defaultPosition = {
       bottom: 20,
       right: 20,
@@ -84,11 +111,23 @@ const useStyles = createStyles(
     const posLeft = finalPosition && typeof finalPosition === 'object' && 'left' in finalPosition ? finalPosition.left : undefined;
     const posRight = finalPosition && typeof finalPosition === 'object' && 'right' in finalPosition ? finalPosition.right : undefined;
 
+    // Calculate max height based on viewport and position
+    let maxHeight = screenHeight - verticalMargin;
+
+    // Adjust max height based on position
+    if (posTop !== undefined) {
+      maxHeight = screenHeight - posTop - verticalMargin;
+    }
+    if (posBottom !== undefined) {
+      maxHeight = screenHeight - posBottom - verticalMargin;
+    }
+
     return {
       root: {
         position: 'absolute' as const,
         width: getSize() as any,
         maxWidth: '90%' as any as any,
+        maxHeight: maxHeight as any,
         zIndex: 1000,
         ...(posTop !== undefined && { top: rem(posTop) as any }),
         ...(posBottom !== undefined && { bottom: rem(posBottom) as any }),
@@ -116,6 +155,7 @@ export const Dialog = forwardRef<any, DialogProps>((props, ref) => {
     padding,
     radius,
     position,
+    centered,
     withShadow,
     withBorder,
     style,
@@ -123,7 +163,7 @@ export const Dialog = forwardRef<any, DialogProps>((props, ref) => {
     ...otherProps
   } = useComponentDefaultProps('Dialog', defaultProps, props);
 
-  const { styles, sx } = useStyles({ size, position}, { name: 'Dialog' }) as any;
+  const { styles, sx } = useStyles({ size, position, centered }, { name: 'Dialog' }) as any;
 
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const slideAnim = useRef(new Animated.Value(50)).current;
@@ -174,14 +214,19 @@ export const Dialog = forwardRef<any, DialogProps>((props, ref) => {
       ]}
       {...otherProps}
     >
-      <Paper
-        shadow={withShadow ? 'lg' : undefined}
-        radius={radius}
-        p={padding}
-        withBorder={withBorder}
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        bounces={false}
       >
-        {children}
-      </Paper>
+        <Paper
+          shadow={withShadow ? 'lg' : undefined}
+          radius={radius}
+          p={padding}
+          withBorder={withBorder}
+        >
+          {children}
+        </Paper>
+      </ScrollView>
     </Animated.View>
   );
 });

package/src/components/Drawer/index.tsx

@@ -264,22 +264,16 @@ export const Drawer = forwardRef<any, DrawerProps>((props, ref) => {
       onRequestClose={onClose}
       statusBarTranslucent
     >
+      {/* Full screen overlay backdrop */}
       {withOverlay && (
-        <Animated.View
-          style={{
-            flex: 1,
-            opacity: fadeAnim,
-          }}
-        >
-          <Overlay
-            opacity={overlayOpacity}
-            color={overlayColor}
-            onPress={handleOverlayPress}
-            style={{ position: 'absolute' }}
-          />
-        </Animated.View>
+        <Overlay
+          opacity={overlayOpacity}
+          color={overlayColor}
+          onPress={handleOverlayPress}
+        />
       )}
 
+      {/* Drawer container positioned over overlay */}
       <BoxView style={styles.overlay} pointerEvents="box-none">
         <Animated.View
           ref={ref}

package/src/components/Icon/index.tsx

@@ -0,0 +1,74 @@
+import { forwardRef } from 'react';
+import type { TextStyle } from 'react-native';
+import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
+import { useTheme } from '../../theme/theme-provider';
+
+export interface IconProps {
+  /** Icon name from FontAwesome */
+  name: string;
+
+  /** Icon size in pixels */
+  size?: number;
+
+  /** Icon color */
+  color?: string;
+
+  /** Additional styles */
+  style?: TextStyle;
+
+  /** Whether to use theme color */
+  useThemeColor?: boolean;
+
+  /** Allow font scaling */
+  allowFontScaling?: boolean;
+}
+
+const defaultProps: Partial<IconProps> = {
+  size: 16,
+  allowFontScaling: false,
+  useThemeColor: false,
+};
+
+/**
+ * Icon component using react-native-vector-icons with FontAwesome
+ *
+ * @example
+ * ```tsx
+ * <Icon name="heart" size={24} color="red" />
+ * <Icon name="star" size={20} useThemeColor />
+ * ```
+ */
+export const Icon = forwardRef<any, IconProps>((props, ref) => {
+  const {
+    name,
+    size,
+    color,
+    style,
+    useThemeColor,
+    allowFontScaling,
+    ...others
+  } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const theme = useTheme();
+
+  const iconColor = color || (useThemeColor
+    ? (theme.colorScheme === 'dark' ? theme.colors.dark?.[0] : theme.black)
+    : undefined);
+
+  return (
+    <FontAwesomeIcon
+      ref={ref}
+      name={name}
+      size={size}
+      color={iconColor}
+      style={style}
+      allowFontScaling={allowFontScaling}
+      {...others}
+    />
+  );
+});
+
+Icon.displayName = 'Icon';

package/src/components/Kbd/index.tsx

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type { DefaultProps, MantineSize } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface KbdProps extends DefaultProps {
+export interface KbdProps extends DefaultProps, WithTextWrapperProps {
   /** Kbd size */
   size?: MantineSize;
 
@@ -63,10 +63,11 @@ const useStyles = createStyles(
 
 const defaultProps: Partial<KbdProps> = {
   size: 'md',
+  withTextWrapper: true,
 };
 
 export const Kbd = forwardRef<any, KbdProps>((props, ref) => {
-  const { size, children, style, ...otherProps} = useComponentDefaultProps(
+  const { size, children, style, withTextWrapper: shouldWrapInText, ...otherProps} = useComponentDefaultProps(
     'Kbd',
     defaultProps,
     props
@@ -76,7 +77,7 @@ export const Kbd = forwardRef<any, KbdProps>((props, ref) => {
 
   return (
     <BoxView ref={ref} style={sx(styles.root, style)} {...otherProps}>
-      <Text style={styles.label}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, styles.label)}
     </BoxView>
   );
 });

package/src/components/List/index.tsx

@@ -5,6 +5,7 @@ import type { DefaultProps, SpacingValue } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 interface ListContextValue {
   type: 'ordered' | 'unordered';
@@ -59,7 +60,7 @@ export interface ListProps extends DefaultProps {
   style?: any;
 }
 
-export interface ListItemProps extends DefaultProps {
+export interface ListItemProps extends DefaultProps, WithTextWrapperProps {
   /** Item children */
   children?: React.ReactNode;
 
@@ -156,7 +157,9 @@ const defaultProps: Partial<ListProps> = {
   startIndex: 1,
 };
 
-const defaultItemProps: Partial<ListItemProps> = {};
+const defaultItemProps: Partial<ListItemProps> = {
+  withTextWrapper: true,
+};
 
 const getListMarker = (
   type: 'ordered' | 'unordered',
@@ -228,7 +231,7 @@ const ListRoot = forwardRef<any, ListProps>((props, ref) => {
       <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
         {childrenArray.map((child, index) => {
           if (!React.isValidElement(child)) return child;
-          return React.cloneElement(child as React.ReactElement, {
+          return React.cloneElement<ListItemProps>(child as React.ReactElement<ListItemProps>, {
             key: index,
             __index: index,
           });
@@ -239,7 +242,7 @@ const ListRoot = forwardRef<any, ListProps>((props, ref) => {
 });
 
 export const ListItem = forwardRef<any, ListItemProps>((props, ref) => {
-  const { children, icon: itemIcon, style, __index, ...others} = {
+  const { children, icon: itemIcon, style, __index, withTextWrapper: shouldWrapInText, ...others} = {
     ...defaultItemProps,
     ...props,
   };
@@ -271,11 +274,7 @@ export const ListItem = forwardRef<any, ListItemProps>((props, ref) => {
     <BoxView ref={ref} style={sx(styles.item, style)} {...others}>
       <BoxView style={styles.icon}>{renderIcon()}</BoxView>
       <BoxView style={styles.content}>
-        {typeof children === 'string' ? (
-          <Text style={styles.contentText}>{children}</Text>
-        ) : (
-          children
-        )}
+        {withTextWrapper(children, shouldWrapInText, styles.contentText)}
       </BoxView>
     </BoxView>
   );

package/src/components/Mark/index.tsx

@@ -2,8 +2,9 @@ import React, { forwardRef } from 'react';
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
 import { useTheme } from '../../theme/theme-provider';
+import type { WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface MarkProps extends TextProps {
+export interface MarkProps extends TextProps, WithTextWrapperProps {
   /** Background color key from theme.colors or CSS color value */
   color?: string;
 
@@ -16,7 +17,7 @@ export interface MarkProps extends TextProps {
  * Default background is yellow
  */
 export const Mark = forwardRef<any, MarkProps>((props, ref) => {
-  const { children, color = 'yellow', style, ...others} = props;
+  const { children, color = 'yellow', style, withTextWrapper: shouldWrapInText = true, ...others} = props;
 
   const theme = useTheme();
 
@@ -30,6 +31,10 @@ export const Mark = forwardRef<any, MarkProps>((props, ref) => {
     return color;
   };
 
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/components/Menu/index.tsx

@@ -3,11 +3,10 @@ import {
   View,
   TouchableOpacity,
   Animated,
+  Modal,
 } from 'react-native';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import { Divider } from '../Divider';
-import { Portal } from '../Portal';
 import type {
   DefaultProps,
   MantineColor,
@@ -15,6 +14,7 @@ import type {
 } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 export interface MenuProps extends DefaultProps {
   /** Controlled opened state */
@@ -68,7 +68,7 @@ export interface MenuDropdownProps extends DefaultProps {
   style?: any;
 }
 
-export interface MenuItemProps extends DefaultProps {
+export interface MenuItemProps extends DefaultProps, WithTextWrapperProps {
   /** Item icon */
   icon?: React.ReactNode;
 
@@ -91,7 +91,7 @@ export interface MenuItemProps extends DefaultProps {
   style?: any;
 }
 
-export interface MenuLabelProps extends DefaultProps {
+export interface MenuLabelProps extends DefaultProps, WithTextWrapperProps {
   children: React.ReactNode;
   style?: any;
 }
@@ -171,7 +171,7 @@ interface MenuContextValue {
   opened: boolean;
   setOpened: (opened: boolean) => void;
   closeOnItemClick: boolean;
-  targetRef: React.RefObject<View>;
+  targetRef: React.RefObject<View | null>;
   dropdownPosition: { top: number; left: number; width: number };
   setDropdownPosition: (pos: { top: number; left: number; width: number }) => void;
 }
@@ -198,6 +198,7 @@ const defaultMenuProps: Partial<MenuProps> = {
 
 const defaultItemProps: Partial<MenuItemProps> = {
   disabled: false,
+  withTextWrapper: true,
 };
 
 const MenuTarget: React.FC<MenuTargetProps> = ({ children }) => {
@@ -216,7 +217,7 @@ const MenuTarget: React.FC<MenuTargetProps> = ({ children }) => {
     setOpened(true);
   };
 
-  return React.cloneElement(children, {
+  return React.cloneElement(children as React.ReactElement<any>, {
     ref: targetRef,
     onPress: handlePress,
   });
@@ -241,16 +242,19 @@ const MenuDropdown: React.FC<MenuDropdownProps> = ({ children, style, ...others
   }
 
   return (
-    <Portal>
+    <Modal
+      visible={opened}
+      transparent
+      animationType="none"
+      onRequestClose={() => setOpened(false)}
+      statusBarTranslucent
+    >
       <TouchableOpacity
         activeOpacity={1}
         onPress={() => setOpened(false)}
         style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
+          flex: 1,
+          backgroundColor: 'transparent',
         }}
       >
         <Animated.View
@@ -268,12 +272,12 @@ const MenuDropdown: React.FC<MenuDropdownProps> = ({ children, style, ...others
           {children}
         </Animated.View>
       </TouchableOpacity>
-    </Portal>
+    </Modal>
   );
 };
 
 const MenuItem = forwardRef<any, MenuItemProps>((props, ref) => {
-  const { icon, color, children, onPress, disabled, rightSection, style, ...others } =
+  const { icon, color, children, onPress, disabled, rightSection, style, withTextWrapper: shouldWrapInText, ...others } =
     useComponentDefaultProps('MenuItem', defaultItemProps, props);
 
   const { setOpened, closeOnItemClick } = useMenuContext();
@@ -304,19 +308,19 @@ const MenuItem = forwardRef<any, MenuItemProps>((props, ref) => {
       {...others}
     >
       {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
-      <Text style={styles.label}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, styles.label)}
       {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
     </TouchableOpacity>
   );
 });
 
 const MenuLabel = forwardRef<any, MenuLabelProps>((props, ref) => {
-  const { children, style, ...others } = props;
+  const { children, style, withTextWrapper: shouldWrapInText = true, ...others } = props;
   const { styles, sx } = useLabelStyles({}, { name: 'MenuLabel' }) as any;
 
   return (
     <BoxView ref={ref} style={sx(styles.label, style)} {...others}>
-      <Text style={styles.label}>{children}</Text>
+      {withTextWrapper(children, shouldWrapInText, styles.label)}
     </BoxView>
   );
 });

package/src/components/Modal/index.tsx

@@ -110,10 +110,11 @@ const useStyles = createStyles(
     return {
       overlay: {
         flex: 1,
-        backgroundColor: 'rgba(0, 0, 0, 0.001)',
+        backgroundColor: 'transparent',
         justifyContent: centered ? 'center' : 'flex-start',
         alignItems: 'center',
         paddingTop: (centered ? 0 : rem(60)) as any,
+        zIndex: 1001, // Ensure modal content is above backdrop
       },
       container: {
         backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
@@ -124,6 +125,7 @@ const useStyles = createStyles(
         ...(fullScreen && {
           height: '100%',
         }),
+        zIndex: 1002, // Ensure modal content is above its parent overlay
       },
       header: {
         padding: getPadding(),
@@ -254,24 +256,17 @@ export const Modal = forwardRef<any, ModalProps>((props, ref) => {
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={{ flex: 1 }}
       >
+        {/* Full screen overlay backdrop */}
         {withOverlay && (
-          <Animated.View
-            style={[
-              {
-                ...styles.overlay,
-                opacity: fadeAnim,
-              },
-            ]}
-          >
-            <Overlay
-              opacity={overlayOpacity}
-              color={overlayColor}
-              onPress={handleOverlayPress}
-              style={{ position: 'absolute' }}
-            />
-          </Animated.View>
+          <Overlay
+            opacity={overlayOpacity}
+            color={overlayColor}
+            onPress={handleOverlayPress}
+            zIndex={1000}
+          />
         )}
 
+        {/* Modal container positioned over overlay */}
         <TouchableOpacity
           activeOpacity={1}
           style={styles.overlay}

package/src/components/NavLink/index.tsx

@@ -1,7 +1,6 @@
 import React, { forwardRef } from 'react';
 import { UnstyledButton } from '../UnstyledButton';
 import { BoxView } from '../BoxView';
-import { Text } from '../Text';
 import type {
   DefaultProps,
   MantineColor,
@@ -10,8 +9,9 @@ import type {
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface NavLinkProps extends DefaultProps {
+export interface NavLinkProps extends DefaultProps, WithTextWrapperProps {
   /** Link label */
   label?: React.ReactNode;
 
@@ -156,6 +156,7 @@ const defaultProps: Partial<NavLinkProps> = {
   active: false,
   disabled: false,
   disableIfNoPress: true,
+  withTextWrapper: true,
 };
 
 export const NavLink = forwardRef<any, NavLinkProps>((props, ref) => {
@@ -172,6 +173,7 @@ export const NavLink = forwardRef<any, NavLinkProps>((props, ref) => {
     onPress,
     style,
     disableIfNoPress,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('NavLink', defaultProps, props);
 
@@ -192,8 +194,8 @@ export const NavLink = forwardRef<any, NavLinkProps>((props, ref) => {
       >
         {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
         <BoxView style={styles.body}>
-          {label && <Text style={styles.label}>{label}</Text>}
-          {description && <Text style={styles.description}>{description}</Text>}
+          {label && withTextWrapper(label, shouldWrapInText, styles.label)}
+          {description && withTextWrapper(description, shouldWrapInText, styles.description)}
         </BoxView>
         {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
       </UnstyledButton>

package/src/components/Notification/index.tsx

@@ -6,8 +6,9 @@ import type { DefaultProps, MantineColor, MantineNumberSize } from '../../theme/
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface NotificationProps extends DefaultProps {
+export interface NotificationProps extends DefaultProps, WithTextWrapperProps {
   /** Notification title */
   title?: React.ReactNode;
 
@@ -128,6 +129,7 @@ const defaultProps: Partial<NotificationProps> = {
   withCloseButton: true,
   withBorder: true,
   loading: false,
+  withTextWrapper: true,
 };
 
 export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
@@ -142,6 +144,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
     loading,
     withBorder,
     style,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('Notification', defaultProps, props);
 
@@ -155,12 +158,8 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
       {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
 
       <BoxView style={styles.body}>
-        {title && (
-          <Text style={styles.title}>{typeof title === 'string' ? title : title}</Text>
-        )}
-        {message && (
-          <Text style={styles.message}>{typeof message === 'string' ? message : message}</Text>
-        )}
+        {title && withTextWrapper(title, shouldWrapInText, styles.title)}
+        {message && withTextWrapper(message, shouldWrapInText, styles.message)}
       </BoxView>
 
       {withCloseButton && onClose && (