react-native-mantine 0.5.0 → 0.6.0

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/List/index.tsx

@@ -228,7 +228,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,
           });

package/src/components/Menu/index.tsx

@@ -3,11 +3,11 @@ 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,
@@ -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;
 }
@@ -216,7 +216,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 +241,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,7 +271,7 @@ const MenuDropdown: React.FC<MenuDropdownProps> = ({ children, style, ...others
           {children}
         </Animated.View>
       </TouchableOpacity>
-    </Portal>
+    </Modal>
   );
 };
 

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/Notification/index.tsx

@@ -156,10 +156,18 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
 
       <BoxView style={styles.body}>
         {title && (
-          <Text style={styles.title}>{typeof title === 'string' ? title : title}</Text>
+          typeof title === 'string' || typeof title === 'number' ? (
+            <Text style={styles.title}>{title}</Text>
+          ) : (
+            <BoxView style={{ marginBottom: styles.title.marginBottom }}>{title}</BoxView>
+          )
         )}
         {message && (
-          <Text style={styles.message}>{typeof message === 'string' ? message : message}</Text>
+          typeof message === 'string' || typeof message === 'number' ? (
+            <Text style={styles.message}>{message}</Text>
+          ) : (
+            <BoxView>{message}</BoxView>
+          )
         )}
       </BoxView>
 

package/src/components/NumberInput/index.tsx

@@ -4,7 +4,6 @@ import { BoxView } from '../BoxView';
 import { Text } from '../Text';
 import type {
   DefaultProps,
-
   MantineNumberSize,
   MantineSize,
 } from '../../theme/types';
@@ -13,7 +12,19 @@ import { createStyles, getSize } from '../../theme';
 import { rem } from '../../theme/utils/rem';
 import { INPUT_SIZES } from '../Input';
 
-export interface NumberInputProps extends DefaultProps, Omit<TextInputProps, 'value' | 'onChangeText' | 'onChange' | 'keyboardType' | 'editable' | 'placeholderTextColor' | 'defaultValue'> {
+export interface NumberInputProps
+  extends
+    DefaultProps,
+    Omit<
+      TextInputProps,
+      | 'value'
+      | 'onChangeText'
+      | 'onChange'
+      | 'keyboardType'
+      | 'editable'
+      | 'placeholderTextColor'
+      | 'defaultValue'
+    > {
   /** Input label */
   label?: React.ReactNode;
 
@@ -101,7 +112,9 @@ const useStyles = createStyles(
         case 'filled':
           return {
             backgroundColor:
-              theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+              theme.colorScheme === 'dark'
+                ? (theme.colors.dark || [])[5]
+                : (theme.colors.gray || [])[1],
             borderWidth: 1,
             borderColor: 'transparent',
           };
@@ -112,10 +125,15 @@ const useStyles = createStyles(
           };
         default:
           return {
-            backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : theme.white,
+            backgroundColor:
+              theme.colorScheme === 'dark'
+                ? (theme.colors.dark || [])[6]
+                : theme.white,
             borderWidth: 1,
             borderColor:
-              theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+              theme.colorScheme === 'dark'
+                ? (theme.colors.dark || [])[4]
+                : (theme.colors.gray || [])[4],
           };
       }
     };
@@ -132,7 +150,10 @@ const useStyles = createStyles(
       },
       description: {
         fontSize: theme.fontSizes.xs as number,
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+        color:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[2]
+            : (theme.colors.gray || [])[6],
         marginTop: theme.spacing.xs,
       },
       error: {
@@ -166,6 +187,7 @@ const useStyles = createStyles(
         ...(withIcon && {
           paddingLeft: 0,
         }),
+        fontFamily: theme.fontFamilyInput,
       },
       controls: {
         flexDirection: 'row',
@@ -178,12 +200,17 @@ const useStyles = createStyles(
         alignItems: 'center',
         borderLeftWidth: 1,
         borderLeftColor:
-          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[4]
+            : (theme.colors.gray || [])[4],
       },
       controlText: {
         fontSize: rem(18) as any,
         fontWeight: '600',
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : (theme.colors.gray || [])[7],
+        color:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[0]
+            : (theme.colors.gray || [])[7],
       },
     };
   }
@@ -226,9 +253,12 @@ export const NumberInput = forwardRef<any, NumberInputProps>((props, ref) => {
   } = useComponentDefaultProps('NumberInput', defaultProps, props);
 
   const theme = useTheme();
-  const [uncontrolledValue, setUncontrolledValue] = useState<number | ''>(defaultValue ?? '');
+  const [uncontrolledValue, setUncontrolledValue] = useState<number | ''>(
+    defaultValue ?? ''
+  );
 
-  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+  const value =
+    controlledValue !== undefined ? controlledValue : uncontrolledValue;
 
   const { styles, sx } = useStyles(
     {
@@ -297,7 +327,9 @@ export const NumberInput = forwardRef<any, NumberInputProps>((props, ref) => {
   return (
     <BoxView style={sx(styles.wrapper, wrapperStyle)}>
       {label && (
-        <Text style={styles.label}>{typeof label === 'string' ? label : label}</Text>
+        <Text style={styles.label}>
+          {typeof label === 'string' ? label : label}
+        </Text>
       )}
 
       <BoxView style={sx(styles.inputWrapper, style)}>
@@ -309,7 +341,9 @@ export const NumberInput = forwardRef<any, NumberInputProps>((props, ref) => {
           onChangeText={handleChange}
           placeholder={placeholder}
           placeholderTextColor={
-            theme.colorScheme === 'dark' ? (theme.colors.dark || [])[3] : (theme.colors.gray || [])[5]
+            theme.colorScheme === 'dark'
+              ? (theme.colors.dark || [])[3]
+              : (theme.colors.gray || [])[5]
           }
           keyboardType="numeric"
           editable={!disabled}
@@ -322,7 +356,10 @@ export const NumberInput = forwardRef<any, NumberInputProps>((props, ref) => {
             <TouchableOpacity
               style={styles.control}
               onPress={handleDecrement}
-              disabled={disabled || (min !== undefined && typeof value === 'number' && value <= min)}
+              disabled={
+                disabled ||
+                (min !== undefined && typeof value === 'number' && value <= min)
+              }
               activeOpacity={0.7}
             >
               <Text style={styles.controlText}>−</Text>
@@ -331,7 +368,10 @@ export const NumberInput = forwardRef<any, NumberInputProps>((props, ref) => {
             <TouchableOpacity
               style={styles.control}
               onPress={handleIncrement}
-              disabled={disabled || (max !== undefined && typeof value === 'number' && value >= max)}
+              disabled={
+                disabled ||
+                (max !== undefined && typeof value === 'number' && value >= max)
+              }
               activeOpacity={0.7}
             >
               <Text style={styles.controlText}>+</Text>
@@ -347,7 +387,9 @@ export const NumberInput = forwardRef<any, NumberInputProps>((props, ref) => {
       )}
 
       {error && (
-        <Text style={styles.error}>{typeof error === 'string' ? error : error}</Text>
+        <Text style={styles.error}>
+          {typeof error === 'string' ? error : error}
+        </Text>
       )}
     </BoxView>
   );

package/src/components/PasswordInput/index.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState } from 'react';
 import { TextInput as RNTextInput, Pressable } from 'react-native';
 import { TextInput, type TextInputProps } from '../TextInput';
-import { Text } from '../Text';
+import { Icon } from '../Icon';
 
 export interface PasswordInputProps extends Omit<TextInputProps, 'rightSection' | 'type'> {
   /** Toggle button aria-label */
@@ -22,7 +22,7 @@ const defaultProps: Partial<PasswordInputProps> = {
 };
 
 const DefaultEyeIcon = ({ visible }: { visible: boolean }) => (
-  <Text style={{ fontSize: 18 }}>{visible ? '👁️' : '👁️‍🗨️'}</Text>
+  <Icon name={visible ? 'eye' : 'eye-slash'} size={16} useThemeColor />
 );
 
 export const PasswordInput = forwardRef<RNTextInput, PasswordInputProps>((props, ref) => {

package/src/components/PinInput/index.tsx

@@ -1,12 +1,15 @@
 import { forwardRef, useRef, useState } from 'react';
 import { TextInput } from 'react-native';
 import { BoxView } from '../BoxView';
-import type { DefaultProps, MantineNumberSize, MantineSize } from '../../theme/types';
+import type {
+  DefaultProps,
+  MantineNumberSize,
+  MantineSize,
+} from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles, getSize } from '../../theme';
 import { rem } from '../../theme/utils/rem';
 
-
 export interface PinInputProps extends DefaultProps {
   /** Number of inputs */
   length?: number;
@@ -94,18 +97,23 @@ const useStyles = createStyles(
         borderColor: error
           ? (theme.colors.red || [])[6]
           : theme.colorScheme === 'dark'
-          ? (theme.colors.dark || [])[4]
-          : (theme.colors.gray || [])[4],
-        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : theme.white,
+            ? (theme.colors.dark || [])[4]
+            : (theme.colors.gray || [])[4],
+        backgroundColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[6]
+            : theme.white,
         fontSize: getSize({ size, sizes: theme.fontSizes }) as any,
         textAlign: 'center',
         color: theme.colorScheme === 'dark' ? theme.white : theme.black,
         ...(disabled && {
           opacity: 0.6,
         }),
+        fontFamily: theme.fontFamilyInput,
       },
       inputFocused: {
-        borderColor: theme.colors[theme.primaryColor]?.[6] || theme.primaryBgColor,
+        borderColor:
+          theme.colors[theme.primaryColor]?.[6] || theme.primaryBgColor,
         borderWidth: 2,
       },
     };
@@ -142,10 +150,13 @@ export const PinInput = forwardRef<any, PinInputProps>((props, ref) => {
     ...others
   } = useComponentDefaultProps('PinInput', defaultProps, props);
 
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || '');
+  const [uncontrolledValue, setUncontrolledValue] = useState(
+    defaultValue || ''
+  );
   const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
 
-  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+  const value =
+    controlledValue !== undefined ? controlledValue : uncontrolledValue;
   const inputRefs = useRef<(TextInput | null)[]>([]);
 
   const { styles, sx } = useStyles(
@@ -226,7 +237,11 @@ export const PinInput = forwardRef<any, PinInputProps>((props, ref) => {
         return (
           <TextInput
             key={index}
-            ref={(el) => (inputRefs.current[index] = el)}
+            ref={(el) => {
+              if (inputRefs.current) {
+                inputRefs.current[index] = el;
+              }
+            }}
             value={mask && displayValue ? '•' : displayValue}
             onChangeText={(text) => handleChange(text, index)}
             onKeyPress={(e) => handleKeyPress(e, index)}

package/src/components/Popover/index.tsx

@@ -3,9 +3,9 @@ import {
   View,
   TouchableWithoutFeedback,
   Animated,
+  Modal,
 } from 'react-native';
 import { BoxView } from '../BoxView';
-import { Portal } from '../Portal';
 import type {
   DefaultProps,
 
@@ -92,7 +92,7 @@ const defaultProps: Partial<PopoverProps> = {
 interface PopoverContextValue {
   opened: boolean;
   setOpened: (opened: boolean) => void;
-  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;
 }
@@ -123,7 +123,7 @@ const PopoverTarget: React.FC<PopoverTargetProps> = ({ children }) => {
     setOpened(true);
   };
 
-  return React.cloneElement(children, {
+  return React.cloneElement(children as React.ReactElement<any>, {
     ref: targetRef,
     onPress: handlePress,
   });
@@ -148,15 +148,18 @@ const PopoverDropdown: React.FC<PopoverDropdownProps> = ({ children, style, ...o
   }
 
   return (
-    <Portal>
+    <Modal
+      visible={opened}
+      transparent
+      animationType="none"
+      onRequestClose={() => setOpened(false)}
+      statusBarTranslucent
+    >
       <TouchableWithoutFeedback onPress={() => setOpened(false)}>
         <View
           style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
+            flex: 1,
+            backgroundColor: 'transparent',
           }}
         >
           <Animated.View
@@ -175,7 +178,7 @@ const PopoverDropdown: React.FC<PopoverDropdownProps> = ({ children, style, ...o
           </Animated.View>
         </View>
       </TouchableWithoutFeedback>
-    </Portal>
+    </Modal>
   );
 };
 

package/src/components/RingProgress/index.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from 'react';
-import { View } from 'react-native';
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { View, Animated } from 'react-native';
 import { BoxView } from '../BoxView';
 import { Text } from '../Text';
 import type { DefaultProps, MantineColor } from '../../theme/types';
@@ -119,13 +119,41 @@ export const RingProgress = forwardRef<any, RingProgressProps>((props, ref) => {
     { name: 'RingProgress' }
   ) as any;
 
+  // Animation values for each section
+  const animatedValues = useRef(
+    sections.map(() => new Animated.Value(0))
+  ).current;
+
+  // Update animation values when sections change
+  useEffect(() => {
+    // Ensure we have the right number of animated values
+    while (animatedValues.length < sections.length) {
+      animatedValues.push(new Animated.Value(0));
+    }
+
+    // Animate each section
+    const animations = sections.map((section, index) => {
+      const animValue = animatedValues[index];
+      if (!animValue) return Animated.timing(new Animated.Value(0), { toValue: 0, duration: 0, useNativeDriver: false });
+
+      return Animated.timing(animValue, {
+        toValue: section.value,
+        duration: 1000,
+        useNativeDriver: false,
+      });
+    });
+
+    Animated.parallel(animations).start();
+  }, [sections, animatedValues]);
+
   // Calculate total value and normalize sections
-  const normalizedSections = sections.map((section) => ({
+  const normalizedSections = sections.map((section, index) => ({
     ...section,
     percentage: (section.value / 100) * 100,
+    animatedValue: animatedValues[index] || new Animated.Value(0),
   }));
 
-  // Render simplified ring using borders and transforms
+  // Render animated ring using borders and transforms
   // Note: This is a basic implementation. For full SVG support, use react-native-svg
   const renderSections = () => {
     let currentAngle = 0;
@@ -139,10 +167,21 @@ export const RingProgress = forwardRef<any, RingProgressProps>((props, ref) => {
       const rotation = currentAngle;
       currentAngle += angle;
 
-      // Simplified representation - just show colored arcs
-      // This is a placeholder implementation
+      // Animate the opacity for a smooth appearance
+      const animatedOpacity = section.animatedValue.interpolate({
+        inputRange: [0, section.value],
+        outputRange: [0, 1],
+      });
+
+      // Animated scale for smooth growth effect
+      const animatedScale = section.animatedValue.interpolate({
+        inputRange: [0, section.value],
+        outputRange: [0.8, 1],
+      });
+
+      // Simplified representation - just show colored arcs with animation
       return (
-        <View
+        <Animated.View
           key={index}
           style={{
             position: 'absolute',
@@ -152,7 +191,11 @@ export const RingProgress = forwardRef<any, RingProgressProps>((props, ref) => {
             borderWidth: thickness,
             borderColor: 'transparent',
             borderTopColor: sectionColor,
-            transform: [{ rotate: `${rotation}deg` }],
+            transform: [
+              { rotate: `${rotation}deg` },
+              { scale: animatedScale },
+            ],
+            opacity: animatedOpacity,
           }}
         />
       );

package/src/components/SegmentedControl/index.tsx

@@ -85,19 +85,20 @@ const useStyles = createStyles(
         flexDirection: orientation === 'horizontal' ? 'row' : 'column',
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[1],
         borderRadius: theme.fn.radius(radius),
-        padding: rem(4) as any,
+        padding: rem(3) as any,
         opacity: disabled ? 0.5 : 1,
         ...(fullWidth && { width: '100%' }),
       },
       indicator: {
         position: 'absolute',
         backgroundColor: theme.white,
-        borderRadius: theme.fn.radius(radius),
+        borderRadius: (theme.fn.radius(radius) as number) - rem(1),
         shadowColor: '#000',
         shadowOffset: { width: 0, height: 1 },
         shadowOpacity: 0.05,
         shadowRadius: 1,
         elevation: 1,
+        margin: rem(3) as any,
         ...(theme.colorScheme === 'dark' && {
           backgroundColor: theme.colors.dark?.[5],
         }),
@@ -105,11 +106,11 @@ const useStyles = createStyles(
       segment: {
         flex: 1,
         paddingHorizontal: sizeStyles.padding as any,
-        paddingVertical: sizeStyles.padding as any,
+        paddingVertical: rem(6) as any,
         minHeight: sizeStyles.height as any,
         justifyContent: 'center',
         alignItems: 'center',
-        borderRadius: theme.fn.radius(radius),
+        borderRadius: (theme.fn.radius(radius) as number) - rem(1),
         zIndex: 1,
       },
       label: {
@@ -181,6 +182,7 @@ export const SegmentedControl = forwardRef<any, SegmentedControlProps>((props, r
   useEffect(() => {
     if (segmentLayouts[activeIndex]) {
       const layout = segmentLayouts[activeIndex];
+      // No need to adjust for margin since indicator has its own margin
 
       Animated.parallel([
         Animated.timing(indicatorPosition, {