react-native-mantine 0.4.0 → 0.6.0

package/lib/typescript/module/src/theme/functions/fns/size.d.ts

@@ -0,0 +1,6 @@
+import type { MantineNumberSize } from '../../types';
+export declare function size(_theme: any): <Sizes extends Record<any, any>>({ size, sizes, }: {
+    size: MantineNumberSize;
+    sizes: Sizes;
+}) => number;
+//# sourceMappingURL=size.d.ts.map

package/lib/typescript/module/src/theme/functions/fns/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../../../../../../src/theme/functions/fns/size.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAGrD,wBAAgB,IAAI,CAAC,MAAM,EAAE,GAAG,IACtB,KAAK,SAAS,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,kBAGrC;IACD,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,KAAK,CAAC;CACd,KAAG,MAAM,CAGX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mantine",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Make Mantine Accessable on React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",
@@ -74,7 +74,8 @@
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^29.5.5",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.44",
+    "@types/react": "^19.0.0",
+    "@types/react-native-vector-icons": "^6.4.18",
     "commitlint": "^17.0.2",
     "del-cli": "^5.1.0",
     "eslint": "^8.51.0",
@@ -83,18 +84,20 @@
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "prettier-eslint": "^16.3.0",
-    "react": "18.3.1",
-    "react-native": "0.76.9",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "react-native-builder-bob": "latest",
+    "react-native-vector-icons": "^10.0.0",
     "release-it": "^15.0.0",
     "typescript": "^5.2.2"
   },
   "resolutions": {
-    "@types/react": "^18.2.44"
+    "@types/react": "^19.0.0"
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "react-native": "*",
+    "react-native-vector-icons": "^10.0.0"
   },
   "workspaces": [
     "example"
@@ -189,9 +192,9 @@
     "version": "0.41.2"
   },
   "dependencies": {
-    "expo-clipboard": "~7.0.0",
-    "expo-font": "~13.0.0",
-    "expo-linear-gradient": "~14.0.0",
+    "expo-clipboard": "~8.0.8",
+    "expo-font": "~14.0.10",
+    "expo-linear-gradient": "~15.0.8",
     "lodash-es": "^4.17.21"
   }
 }

package/src/components/Button/Button.styles.ts

@@ -56,15 +56,10 @@ interface GetSizeStyles {
 }
 
 function getSizeStyles({
-  // compact,
   size,
   withLeftIcon,
   withRightIcon,
 }: GetSizeStyles): any {
-  // if (compact) {
-  //   return sizes[`compact-${size}`];
-  // }
-
   const _sizes: (typeof sizes)[keyof typeof sizes] = sizes[size];
 
   if (!_sizes) {
@@ -87,42 +82,6 @@ const getWidthStyles = (fullWidth: boolean) => ({
   width: fullWidth ? '100%' : 'auto',
 });
 
-// interface GetVariantStyles {
-//   theme: MantineTheme;
-//   color: MantineColor;
-//   variant: string;
-//   gradient: MantineGradient;
-// }
-
-// function getVariantStyles({
-//   variant,
-//   theme,
-//   color,
-//   gradient,
-// }: GetVariantStyles) {
-//   if (!BUTTON_VARIANTS.includes(variant)) {
-//     return null;
-//   }
-
-//   const colors = theme.fn.variant({ color, variant, gradient });
-
-//   if (variant === 'gradient') {
-//     return {
-//       border: 0,
-//       backgroundImage: colors.background,
-//       color: colors.color,
-//       ...theme.fn.hover({ backgroundSize: '200%' }),
-//     };
-//   }
-
-//   return {
-//     border: `${rem(1)} solid ${colors.border}`,
-//     backgroundColor: colors.background,
-//     color: colors.color,
-//     ...theme.fn.hover({ backgroundColor: colors.hover }),
-//   };
-// }
-
 interface GetVariantStylesInput {
   variant: string;
   color: MantineColor;
@@ -163,10 +122,7 @@ const useStyles = createStyles(
       color,
       gradient,
     }: ButtonStylesParams,
-    {
-      variant,
-      size,
-    }
+    { variant, size }
   ) => {
     return {
       root: {
@@ -233,10 +189,8 @@ const useStyles = createStyles(
 
       inner: {
         display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
         height: '100%',
-        overflow: 'visible',
+        flex: 1,
       },
 
       label: {
@@ -245,6 +199,9 @@ const useStyles = createStyles(
         overflow: 'hidden',
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'center',
+        flexDirection: 'row',
+        flex: 1,
       },
     };
   }

package/src/components/Button/index.tsx

@@ -69,6 +69,8 @@ export interface ButtonProps extends DefaultProps {
   disabled?: boolean;
 
   style?: any;
+
+  withTextWrapper?: boolean;
 }
 
 const defaultProps: Partial<ButtonProps> = {
@@ -78,75 +80,59 @@ const defaultProps: Partial<ButtonProps> = {
   loaderPosition: 'left',
 };
 
-export const _Button = forwardRef<View, ButtonProps>(
-  (props, ref) => {
-    const {
-      // className,
-      size,
+export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
+  const {
+    size,
+    color,
+    type,
+    disabled,
+    children,
+    leftIcon,
+    rightIcon,
+    fullWidth,
+    variant,
+    radius,
+    uppercase,
+    compact,
+    loading,
+    loaderPosition,
+    loaderProps,
+    gradient,
+    style,
+    withTextWrapper = true,
+    ...others
+  } = useComponentDefaultProps('Button', defaultProps, props);
+
+  const { styles, sx } = useStyles(
+    {
+      radius,
       color,
-      type,
-      disabled,
-      children,
-      leftIcon,
-      rightIcon,
       fullWidth,
-      variant,
-      radius,
-      uppercase,
       compact,
-      loading,
-      loaderPosition,
-      loaderProps,
       gradient,
-      // classNames,
-      // styles,
-      // unstyled,
-      style,
-      ...others
-    } = useComponentDefaultProps('Button', defaultProps, props);
-
-    const { styles, sx} = useStyles(
-      {
-        radius,
-        color,
-        fullWidth,
-        compact,
-        gradient,
-        withLeftIcon: !!leftIcon,
-        withRightIcon: !!rightIcon,
-      },
-      {
-        name: 'Button',
-        // unstyled, classNames, styles,
-        variant,
-        size,
-      }
-    );
-
-    // const colors = theme.fn.variant({ color, variant });
-
-    // const loader = (
-    //   <Loader
-    //     color={colors.color}
-    //     size={`calc(${(getSize({ size, sizes }) as any).height} / 2)`}
-    //     {...loaderProps}
-    //   />
-    // );
-    const loader = <ActivityIndicator />;
-
-    return (
-      <UnstyledButton
-        style={sx(styles.root, style)}
-        // type={type}
-        // disabled={disabled}
-        data-button
-        data-disabled={disabled || undefined}
-        data-loading={loading || undefined}
-        ref={ref}
-        // unstyled={unstyled}
-        {...others}
-      >
-        <BoxView style={styles.inner}>
+      withLeftIcon: !!leftIcon,
+      withRightIcon: !!rightIcon,
+    },
+    {
+      name: 'Button',
+      variant,
+      size,
+    }
+  );
+
+  const loader = <ActivityIndicator />;
+
+  return (
+    <UnstyledButton
+      style={sx(styles.root, style)}
+      data-button
+      data-disabled={disabled || undefined}
+      data-loading={loading || undefined}
+      ref={ref}
+      {...others}
+    >
+      <BoxView style={styles.inner}>
+        <BoxView style={styles.label}>
           {(leftIcon || (loading && loaderPosition === 'left')) && (
             <BoxView style={sx(styles.icon, styles.leftIcon)}>
               {loading && loaderPosition === 'left' ? loader : leftIcon}
@@ -156,27 +142,16 @@ export const _Button = forwardRef<View, ButtonProps>(
           {loading && loaderPosition === 'center' && (
             <BoxView style={styles.centerLoader}>{loader}</BoxView>
           )}
-
-          <BoxView
-            style={styles.label}
-            // style={{ textTransform: uppercase ? 'uppercase' : undefined }}
-          >
-            {typeof children === 'string' || typeof children === 'number' ? (
-              <Text>{children}</Text>
-            ) : (
-              children
-            )}
-          </BoxView>
-
+          {withTextWrapper ? <Text>{children}</Text> : children}
           {(rightIcon || (loading && loaderPosition === 'right')) && (
             <BoxView style={sx(styles.icon, styles.rightIcon)}>
               {loading && loaderPosition === 'right' ? loader : rightIcon}
             </BoxView>
           )}
         </BoxView>
-      </UnstyledButton>
-    );
-  }
-) as any;
+      </BoxView>
+    </UnstyledButton>
+  );
+}) as any;
 
 export const Button = _Button;

package/src/components/Chip/index.tsx

@@ -325,10 +325,10 @@ export const ChipGroup = forwardRef<any, ChipGroupProps>((props, ref) => {
   };
 
   const enhancedChildren = React.Children.map(children, (child) => {
-    if (React.isValidElement(child) && child.type === Chip) {
-      const chipValue = child.props.value;
+    if (React.isValidElement(child) && (child.type as any) === Chip) {
+      const chipValue = (child.props as ChipProps).value;
       if (chipValue !== undefined) {
-        return React.cloneElement(child as React.ReactElement<ChipProps>, {
+        return React.cloneElement<ChipProps>(child as React.ReactElement<ChipProps>, {
           checked: isChecked(chipValue),
           onChange: (checked: boolean) => handleChipChange(chipValue, checked),
         });

package/src/components/CloseButton/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { BoxView } from '../BoxView';
+import { Icon } from '../Icon';
 import type { DefaultProps, MantineSize } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
@@ -81,28 +81,7 @@ const useStyles = createStyles(
 );
 
 const CloseIcon = ({ size, color }: { size: number; color: string }) => (
-  <BoxView style={{ width: size, height: size, position: 'relative' }}>
-    <BoxView
-      style={{
-        position: 'absolute',
-        width: size,
-        height: 2,
-        backgroundColor: color,
-        top: (size - 2) / 2,
-        transform: [{ rotate: '45deg' }],
-      }}
-    />
-    <BoxView
-      style={{
-        position: 'absolute',
-        width: size,
-        height: 2,
-        backgroundColor: color,
-        top: (size - 2) / 2,
-        transform: [{ rotate: '-45deg' }],
-      }}
-    />
-  </BoxView>
+  <Icon name="times" size={size} color={color} />
 );
 
 const defaultProps: Partial<CloseButtonProps> = {

package/src/components/Collapse/index.tsx

@@ -46,6 +46,7 @@ export const Collapse = forwardRef<any, CollapseProps>((props, ref) => {
   } = useComponentDefaultProps('Collapse', defaultProps, props);
 
   const [contentHeight, setContentHeight] = useState<number>(0);
+  const [isFirstLayout, setIsFirstLayout] = useState(true);
   const heightAnim = useRef(new Animated.Value(opened ? 1 : 0)).current;
   const opacityAnim = useRef(new Animated.Value(opened ? 1 : 0)).current;
 
@@ -53,10 +54,18 @@ export const Collapse = forwardRef<any, CollapseProps>((props, ref) => {
     const { height } = event.nativeEvent.layout;
     if (height > 0 && height !== contentHeight) {
       setContentHeight(height);
+      if (isFirstLayout) {
+        setIsFirstLayout(false);
+      }
     }
   };
 
   useEffect(() => {
+    // Don't animate on first render or if content height hasn't been measured yet
+    if (isFirstLayout || contentHeight === 0) {
+      return;
+    }
+
     const animations = [
       Animated.timing(heightAnim, {
         toValue: opened ? 1 : 0,
@@ -80,11 +89,11 @@ export const Collapse = forwardRef<any, CollapseProps>((props, ref) => {
         onTransitionEnd();
       }
     });
-  }, [opened, heightAnim, opacityAnim, transitionDuration, animateOpacity, onTransitionEnd]);
+  }, [opened, heightAnim, opacityAnim, transitionDuration, animateOpacity, onTransitionEnd, contentHeight, isFirstLayout]);
 
   const animatedHeight = heightAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, contentHeight || 0],
+    outputRange: [0, contentHeight],
   });
 
   return (

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';