react-native-mantine 0.4.0 → 0.6.0

package/src/components/Input/Input.styles.ts

@@ -21,205 +21,4 @@ export const sizes = {
   xl: rem(60),
 };
 
-// const INPUT_VARIANTS = ['default', 'filled', 'unstyled'];
-
-// interface GetVariantStylesInput {
-//   theme: MantineTheme;
-//   variant: string;
-// }
-
-// function getVariantStyles({ theme, variant }: GetVariantStylesInput) {
-//   if (!INPUT_VARIANTS.includes(variant)) {
-//     return null;
-//   }
-
-//   if (variant === 'default') {
-//     return {
-//       'border': `${rem(1)} solid ${
-//         theme.colorScheme === 'dark'
-//           ? theme.colors.dark[4]
-//           : theme.colors.gray[4]
-//       }`,
-//       'backgroundColor':
-//         theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
-//       'transition': 'border-color 100ms ease',
-//       '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),
-//     };
-//   }
-
-//   if (variant === 'filled') {
-//     return {
-//       'border': `${rem(1)} solid transparent`,
-//       'backgroundColor':
-//         theme.colorScheme === 'dark'
-//           ? theme.colors.dark[5]
-//           : theme.colors.gray[1],
-//       '&:focus, &:focus-within': theme.focusRingStyles.inputStyles(theme),
-//     };
-//   }
-
-//   return {
-//     'borderWidth': 0,
-//     'color': theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-//     'backgroundColor': 'transparent',
-//     'minHeight': rem(28),
-//     'outline': 0,
-
-//     '&:focus, &:focus-within': {
-//       outline: 'none',
-//       borderColor: 'transparent',
-//     },
-
-//     '&:disabled': {
-//       'backgroundColor': 'transparent',
-
-//       '&:focus, &:focus-within': {
-//         outline: 'none',
-//         borderColor: 'transparent',
-//       },
-//     },
-//   };
-// }
-
-// export default createStyles(
-//   (
-//     theme,
-//     {
-//       multiline,
-//       radius,
-//       invalid,
-//       rightSectionWidth,
-//       withRightSection,
-//       iconWidth,
-//       offsetBottom,
-//       offsetTop,
-//       pointer,
-//     }: InputStylesParams,
-//     { variant, size }
-//   ) => {
-//     const invalidColor = theme.fn.variant({
-//       variant: 'filled',
-//       color: 'red',
-//     }).background;
-//     const sizeStyles =
-//       variant === 'default' || variant === 'filled'
-//         ? {
-//             minHeight: getSize({ size, sizes }),
-//             paddingLeft: `calc(${getSize({ size, sizes })}  / 3)`,
-//             paddingRight: withRightSection
-//               ? rightSectionWidth || getSize({ size, sizes })
-//               : `calc(${getSize({ size, sizes })}  / 3)`,
-//             borderRadius: theme.fn.radius(radius),
-//           }
-//         : null;
-
-//     return {
-//       wrapper: {
-//         position: 'relative',
-//         marginTop: offsetTop ? `calc(${theme.spacing.xs} / 2)` : undefined,
-//         marginBottom: offsetBottom
-//           ? `calc(${theme.spacing.xs} / 2)`
-//           : undefined,
-//       },
-
-//       input: {
-//         ...theme.fn.fontStyles(),
-//         'height': multiline
-//           ? variant === 'unstyled'
-//             ? undefined
-//             : 'auto'
-//           : getSize({ size, sizes }),
-//         'WebkitTapHighlightColor': 'transparent',
-//         'lineHeight': multiline
-//           ? theme.lineHeight
-//           : `calc(${getSize({ size, sizes })} - ${rem(2)})`,
-//         'appearance': 'none',
-//         'resize': 'none',
-//         'boxSizing': 'border-box',
-//         'fontSize': getSize({ size, sizes: theme.fontSizes }),
-//         'width': '100%',
-//         'color':
-//           theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
-//         'display': 'block',
-//         'textAlign': 'left',
-//         'cursor': pointer ? 'pointer' : undefined,
-//         ...getVariantStyles({ theme, variant }),
-//         ...sizeStyles,
-
-//         '&:disabled, &[data-disabled]': {
-//           'backgroundColor':
-//             theme.colorScheme === 'dark'
-//               ? theme.colors.dark[6]
-//               : theme.colors.gray[1],
-//           'color': theme.colors.dark[2],
-//           'opacity': 0.6,
-//           'cursor': 'not-allowed',
-
-//           '&::placeholder': {
-//             color: theme.colors.dark[2],
-//           },
-//         },
-
-//         '&[data-invalid]': {
-//           'color': invalidColor,
-//           'borderColor': invalidColor,
-
-//           '&::placeholder': {
-//             opacity: 1,
-//             color: invalidColor,
-//           },
-//         },
-
-//         '&[data-with-icon]': {
-//           paddingLeft:
-//             typeof iconWidth === 'number'
-//               ? rem(iconWidth)
-//               : getSize({ size, sizes }),
-//         },
-
-//         '&::placeholder': {
-//           ...theme.fn.placeholderStyles(),
-//           opacity: 1,
-//         },
-
-//         '&::-webkit-inner-spin-button, &::-webkit-outer-spin-button, &::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
-//           {
-//             appearance: 'none',
-//           },
-
-//         '&[type=number]': {
-//           MozAppearance: 'textfield',
-//         },
-//       },
-
-//       icon: {
-//         pointerEvents: 'none',
-//         position: 'absolute',
-//         zIndex: 1,
-//         left: 0,
-//         top: 0,
-//         bottom: 0,
-//         display: 'flex',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         width: iconWidth ? rem(iconWidth) : getSize({ size, sizes }),
-//         color: invalid
-//           ? theme.colors.red[theme.colorScheme === 'dark' ? 6 : 7]
-//           : theme.colorScheme === 'dark'
-//             ? theme.colors.dark[2]
-//             : theme.colors.gray[5],
-//       },
-
-//       rightSection: {
-//         position: 'absolute',
-//         top: 0,
-//         bottom: 0,
-//         right: 0,
-//         display: 'flex',
-//         alignItems: 'center',
-//         justifyContent: 'center',
-//         width: rightSectionWidth || getSize({ size, sizes }),
-//       },
-//     };
-//   }
-// );
+export const INPUT_SIZES = sizes;

package/src/components/Input/index.ts

@@ -1 +1 @@
-export { sizes as INPUT_SIZES } from './Input.styles';
+export { INPUT_SIZES } from './Input.styles';

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>
   );
 };