react-native-mantine 0.5.0 → 0.6.0

package/src/components/Slider/index.tsx

@@ -247,19 +247,28 @@ export const Slider = forwardRef<any, SliderProps>((props, ref) => {
     [trackWidth, min, max]
   );
 
+  const trackLayoutRef = useRef({ x: 0, y: 0, width: 0, height: 0 });
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabled!,
       onMoveShouldSetPanResponder: () => !disabled!,
-      onPanResponderGrant: () => {
+      onPanResponderGrant: (evt: GestureResponderEvent) => {
         setShowLabel(true);
         Animated.spring(scale, {
           toValue: 1.2,
           useNativeDriver: true,
         }).start();
+
+        // Handle tap to move slider
+        const locationX = evt.nativeEvent.locationX;
+        const newValue = getValueFromPosition(locationX);
+        updateValue(newValue);
       },
       onPanResponderMove: (_evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-        const newValue = getValueFromPosition(gestureState.moveX);
+        // Calculate position relative to track start
+        const relativeX = gestureState.moveX - trackLayoutRef.current.x;
+        const newValue = getValueFromPosition(relativeX);
         updateValue(newValue);
       },
       onPanResponderRelease: () => {
@@ -274,7 +283,9 @@ export const Slider = forwardRef<any, SliderProps>((props, ref) => {
   ).current;
 
   const handleLayout = (event: LayoutChangeEvent) => {
-    setTrackWidth(event.nativeEvent.layout.width);
+    const { x, y, width, height } = event.nativeEvent.layout;
+    setTrackWidth(width);
+    trackLayoutRef.current = { x, y, width, height };
   };
 
   const percentage = ((value - min!) / (max! - min!)) * 100;

package/src/components/Stepper/index.tsx

@@ -252,10 +252,11 @@ export const Stepper = forwardRef<any, StepperProps>((props, ref) => {
 
   const childrenArray = React.Children.toArray(children);
   const steps = childrenArray.filter(
-    (child) => React.isValidElement(child) && (child as any).type === Step
+    (child): child is React.ReactElement<StepProps & { __stepIndex?: number; __isLast?: boolean }> =>
+      React.isValidElement(child) && (child.type as any) === Step
   );
   const completedStep = childrenArray.find(
-    (child) => React.isValidElement(child) && (child as any).type === StepperCompleted
+    (child) => React.isValidElement(child) && (child.type as any) === StepperCompleted
   );
 
   const isStepsCompleted = active >= steps.length;
@@ -275,7 +276,7 @@ export const Stepper = forwardRef<any, StepperProps>((props, ref) => {
       <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
         <BoxView style={styles.steps}>
           {steps.map((step, index) => {
-            return React.cloneElement(step as React.ReactElement, {
+            return React.cloneElement<StepProps & { __stepIndex?: number; __isLast?: boolean }>(step, {
               key: index,
               __stepIndex: index,
               __isLast: index === steps.length - 1,
@@ -286,7 +287,7 @@ export const Stepper = forwardRef<any, StepperProps>((props, ref) => {
         <BoxView style={styles.content}>
           {isStepsCompleted
             ? completedStep
-            : steps[active] && (steps[active] as React.ReactElement).props.children}
+            : steps[active] && steps[active].props.children}
         </BoxView>
       </BoxView>
     </StepperContext.Provider>

package/src/components/Table/index.tsx

@@ -137,12 +137,18 @@ const useTableStyles = createStyles(
       borderCollapse: 'collapse' as any,
       ...(withBorder && {
         borderWidth: 1,
-        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+        borderColor:
+          theme.colorScheme === 'dark'
+            ? theme.colors.dark?.[4]
+            : theme.colors.gray?.[3],
       }),
     },
     caption: {
       fontSize: theme.fontSizes.sm 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],
       paddingVertical: theme.spacing.xs,
       textAlign: 'center',
       ...(captionSide === 'bottom' && { order: 1 }),
@@ -153,7 +159,10 @@ const useTableStyles = createStyles(
 const useTableHeadStyles = createStyles((theme) => ({
   thead: {
     borderBottomWidth: 1,
-    borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+    borderBottomColor:
+      theme.colorScheme === 'dark'
+        ? theme.colors.dark?.[4]
+        : theme.colors.gray?.[3],
   },
 }));
 
@@ -171,11 +180,16 @@ const useTableRowStyles = createStyles(
   ) => ({
     tr: {
       borderBottomWidth: 1,
-      borderBottomColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+      borderBottomColor:
+        theme.colorScheme === 'dark'
+          ? theme.colors.dark?.[4]
+          : theme.colors.gray?.[3],
       ...(striped &&
         isEven && {
           backgroundColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[0],
+            theme.colorScheme === 'dark'
+              ? theme.colors.dark?.[6]
+              : theme.colors.gray?.[0],
         }),
     },
   })
@@ -218,7 +232,9 @@ const useTableCellStyles = createStyles(
         ...(withColumnBorders && {
           borderRightWidth: 1,
           borderRightColor:
-            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+            theme.colorScheme === 'dark'
+              ? theme.colors.dark?.[4]
+              : theme.colors.gray?.[3],
         }),
         ...(isHeader && {
           fontWeight: '600',
@@ -239,7 +255,7 @@ const defaultProps: Partial<TableProps> = {
   captionSide: 'top',
 };
 
-export const Table = forwardRef<any, TableProps>((props, ref) => {
+const Table = forwardRef<any, TableProps>((props, ref) => {
   const {
     children,
     horizontalSpacing,
@@ -255,7 +271,7 @@ export const Table = forwardRef<any, TableProps>((props, ref) => {
     ...others
   } = useComponentDefaultProps('Table', defaultProps, props);
 
-  const { styles, sx} = useTableStyles(
+  const { styles, sx } = useTableStyles(
     { withBorder, captionSide },
     { name: 'Table' }
   ) as any;
@@ -272,7 +288,11 @@ export const Table = forwardRef<any, TableProps>((props, ref) => {
         horizontalSpacing: horizontalSpacing!,
       }}
     >
-      <ScrollView horizontal style={styles.wrapper} showsHorizontalScrollIndicator>
+      <ScrollView
+        horizontal
+        style={styles.wrapper}
+        showsHorizontalScrollIndicator
+      >
         <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
           {caption && <Text style={styles.caption}>{caption}</Text>}
           {children}
@@ -282,9 +302,9 @@ export const Table = forwardRef<any, TableProps>((props, ref) => {
   );
 });
 
-export const Thead = forwardRef<any, TableTheadProps>((props, ref) => {
-  const { children, style, ...others} = props;
-  const { styles, sx} = useTableHeadStyles({}, { name: 'Thead' }) as any;
+const Thead = forwardRef<any, TableTheadProps>((props, ref) => {
+  const { children, style, ...others } = props;
+  const { styles, sx } = useTableHeadStyles({}, { name: 'Thead' }) as any;
 
   return (
     <BoxView ref={ref} style={sx(styles.thead, style)} {...others}>
@@ -293,7 +313,7 @@ export const Thead = forwardRef<any, TableTheadProps>((props, ref) => {
   );
 });
 
-export const Tbody = forwardRef<any, TableTbodyProps>((props, ref) => {
+const Tbody = forwardRef<any, TableTbodyProps>((props, ref) => {
   const { children, style, ...others } = props;
 
   const childrenArray = React.Children.toArray(children);
@@ -302,16 +322,19 @@ export const Tbody = forwardRef<any, TableTbodyProps>((props, ref) => {
     <BoxView ref={ref} style={style} {...others}>
       {childrenArray.map((child, index) => {
         if (!React.isValidElement(child)) return child;
-        return React.cloneElement(child as React.ReactElement, {
-          key: index,
-          __index: index,
-        });
+        return React.cloneElement<TableTrProps>(
+          child as React.ReactElement<TableTrProps>,
+          {
+            key: index,
+            __index: index,
+          }
+        );
       })}
     </BoxView>
   );
 });
 
-export const Tfoot = forwardRef<any, TableTfootProps>((props, ref) => {
+const Tfoot = forwardRef<any, TableTfootProps>((props, ref) => {
   const { children, style, ...others } = props;
 
   return (
@@ -321,11 +344,11 @@ export const Tfoot = forwardRef<any, TableTfootProps>((props, ref) => {
   );
 });
 
-export const Tr = forwardRef<any, TableTrProps>((props, ref) => {
-  const { children, style, __index, ...others} = props;
+const Tr = forwardRef<any, TableTrProps>((props, ref) => {
+  const { children, style, __index, ...others } = props;
   const context = useTableContext();
 
-  const { styles, sx} = useTableRowStyles(
+  const { styles, sx } = useTableRowStyles(
     {
       striped: context?.striped ?? false,
       highlightOnHover: context?.highlightOnHover ?? false,
@@ -341,11 +364,11 @@ export const Tr = forwardRef<any, TableTrProps>((props, ref) => {
   );
 });
 
-export const Th = forwardRef<any, TableThProps>((props, ref) => {
-  const { children, style, ...others} = props;
+const Th = forwardRef<any, TableThProps>((props, ref) => {
+  const { children, style, ...others } = props;
   const context = useTableContext();
 
-  const { styles, sx} = useTableCellStyles(
+  const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
       verticalSpacing: context?.verticalSpacing ?? 'xs',
@@ -358,16 +381,16 @@ export const Th = forwardRef<any, TableThProps>((props, ref) => {
 
   return (
     <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
-      {typeof children === 'string' ? <Text style={styles.cell}>{children}</Text> : children}
+      <Text style={styles.cell}>{children}</Text>)
     </BoxView>
   );
 });
 
-export const Td = forwardRef<any, TableTdProps>((props, ref) => {
-  const { children, style, ...others} = props;
+const Td = forwardRef<any, TableTdProps>((props, ref) => {
+  const { children, style, ...others } = props;
   const context = useTableContext();
 
-  const { styles, sx} = useTableCellStyles(
+  const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
       verticalSpacing: context?.verticalSpacing ?? 'xs',
@@ -380,7 +403,7 @@ export const Td = forwardRef<any, TableTdProps>((props, ref) => {
 
   return (
     <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
-      {typeof children === 'string' ? <Text style={styles.cell}>{children}</Text> : children}
+      <Text style={styles.cell}>{children}</Text>
     </BoxView>
   );
 });
@@ -393,10 +416,24 @@ Tr.displayName = 'Table.Tr';
 Th.displayName = 'Table.Th';
 Td.displayName = 'Table.Td';
 
-// Attach sub-components
-(Table as any).Thead = Thead;
-(Table as any).Tbody = Tbody;
-(Table as any).Tfoot = Tfoot;
-(Table as any).Tr = Tr;
-(Table as any).Th = Th;
-(Table as any).Td = Td;
+// Attach sub-components with proper typing
+interface TableComponent extends React.ForwardRefExoticComponent<
+  TableProps & React.RefAttributes<any>
+> {
+  Thead: typeof Thead;
+  Tbody: typeof Tbody;
+  Tfoot: typeof Tfoot;
+  Tr: typeof Tr;
+  Th: typeof Th;
+  Td: typeof Td;
+}
+
+const TableWithSubComponents = Table as TableComponent;
+TableWithSubComponents.Thead = Thead;
+TableWithSubComponents.Tbody = Tbody;
+TableWithSubComponents.Tfoot = Tfoot;
+TableWithSubComponents.Tr = Tr;
+TableWithSubComponents.Th = Th;
+TableWithSubComponents.Td = Td;
+
+export { TableWithSubComponents as Table };

package/src/components/TextInput/index.tsx

@@ -1,5 +1,8 @@
 import React, { forwardRef } from 'react';
-import { TextInput as RNTextInput, type TextInputProps as RNTextInputProps } from 'react-native';
+import {
+  TextInput as RNTextInput,
+  type TextInputProps as RNTextInputProps,
+} from 'react-native';
 import { BoxView } from '../BoxView';
 import { Text } from '../Text';
 import type {
@@ -12,7 +15,8 @@ import { createStyles, getSize } from '../../theme';
 import { rem } from '../../theme/utils/rem';
 import { INPUT_SIZES } from '../Input';
 
-export interface TextInputProps extends DefaultProps, Omit<RNTextInputProps, 'style'> {
+export interface TextInputProps
+  extends DefaultProps, Omit<RNTextInputProps, 'style'> {
   /** Input label */
   label?: React.ReactNode;
 
@@ -71,7 +75,10 @@ const useStyles = createStyles(
     const getVariantStyles = () => {
       if (variant === 'filled') {
         return {
-          backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+          backgroundColor:
+            theme.colorScheme === 'dark'
+              ? (theme.colors.dark || [])[5]
+              : (theme.colors.gray || [])[1],
           borderWidth: 1,
           borderColor: 'transparent',
         };
@@ -87,13 +94,20 @@ const useStyles = createStyles(
 
       // default variant
       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],
+        borderColor:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[4]
+            : (theme.colors.gray || [])[4],
       };
     };
 
-    const sizeValue = INPUT_SIZES[size as keyof typeof INPUT_SIZES] || INPUT_SIZES.md;
+    const sizeValue =
+      INPUT_SIZES[size as keyof typeof INPUT_SIZES] || INPUT_SIZES.md;
 
     return {
       wrapper: {
@@ -102,7 +116,10 @@ const useStyles = createStyles(
       label: {
         fontSize: theme.fontSizes.sm as number,
         fontWeight: '500',
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        color:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[0]
+            : theme.black,
         marginBottom: theme.spacing.xs / 2,
       },
       required: {
@@ -110,7 +127,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 / 2,
         marginBottom: theme.spacing.xs / 2,
       },
@@ -123,23 +143,30 @@ const useStyles = createStyles(
         position: 'relative',
       },
       input: {
-        ...theme.fn.fontStyles(),
         height: sizeValue as any,
         fontSize: getSize({ size, sizes: theme.fontSizes }) as any,
         paddingHorizontal: (variant === 'unstyled' ? 0 : rem(12)) as any,
-        paddingLeft: (withIcon ? sizeValue : variant === 'unstyled' ? 0 : rem(12)) as any,
+        paddingLeft: (withIcon
+          ? sizeValue
+          : variant === 'unstyled'
+            ? 0
+            : rem(12)) as any,
         paddingRight: (withRightSection
           ? rem(rightSectionWidth || sizeValue)
           : variant === 'unstyled'
-          ? 0
-          : rem(12)) as any,
+            ? 0
+            : rem(12)) as any,
         borderRadius: theme.fn.radius(radius),
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        color:
+          theme.colorScheme === 'dark'
+            ? (theme.colors.dark || [])[0]
+            : theme.black,
         ...getVariantStyles(),
         ...(invalid && {
           borderColor: (theme.colors.red || [])[6],
           color: (theme.colors.red || [])[6],
         }),
+        fontFamily: theme.fontFamilyInput,
       },
       icon: {
         position: 'absolute',
@@ -171,62 +198,62 @@ const defaultProps: Partial<TextInputProps> = {
   required: false,
 };
 
-export const TextInput = forwardRef<RNTextInput, TextInputProps>((props, ref) => {
-  const {
-    label,
-    description,
-    error,
-    size,
-    radius,
-    icon,
-    rightSection,
-    rightSectionWidth,
-    required,
-    variant,
-    style,
-    wrapperStyle,
-    ...others
-  } = useComponentDefaultProps('TextInput', defaultProps, props);
-
-  const { styles, sx} = useStyles(
-    {
+export const TextInput = forwardRef<RNTextInput, TextInputProps>(
+  (props, ref) => {
+    const {
+      label,
+      description,
+      error,
+      size,
       radius,
-      invalid: !!error,
-      withIcon: !!icon,
-      withRightSection: !!rightSection,
+      icon,
+      rightSection,
       rightSectionWidth,
-    },
-    { name: 'TextInput', variant, size }
-  ) as any;
-
-  return (
-    <BoxView style={sx(styles.wrapper, wrapperStyle)}>
-      {label && (
-        <Text style={styles.label}>
-          {label}
-          {required && <Text style={styles.required}> *</Text>}
-        </Text>
-      )}
-
-      {description && <Text style={styles.description}>{description}</Text>}
-
-      <BoxView style={styles.inputWrapper}>
-        {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
-
-        <RNTextInput
-          ref={ref}
-          style={sx(styles.input, style)}
-          {...others}
-        />
-
-        {rightSection && (
-          <BoxView style={styles.rightSectionContainer}>{rightSection}</BoxView>
+      required,
+      variant,
+      style,
+      wrapperStyle,
+      ...others
+    } = useComponentDefaultProps('TextInput', defaultProps, props);
+
+    const { styles, sx } = useStyles(
+      {
+        radius,
+        invalid: !!error,
+        withIcon: !!icon,
+        withRightSection: !!rightSection,
+        rightSectionWidth,
+      },
+      { name: 'TextInput', variant, size }
+    ) as any;
+
+    return (
+      <BoxView style={sx(styles.wrapper, wrapperStyle)}>
+        {label && (
+          <Text style={styles.label}>
+            {label}
+            {required && <Text style={styles.required}> *</Text>}
+          </Text>
         )}
-      </BoxView>
 
-      {error && <Text style={styles.error}>{error}</Text>}
-    </BoxView>
-  );
-});
+        {description && <Text style={styles.description}>{description}</Text>}
+
+        <BoxView style={styles.inputWrapper}>
+          {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+
+          <RNTextInput ref={ref} style={sx(styles.input, style)} {...others} />
+
+          {rightSection && (
+            <BoxView style={styles.rightSectionContainer}>
+              {rightSection}
+            </BoxView>
+          )}
+        </BoxView>
+
+        {error && <Text style={styles.error}>{error}</Text>}
+      </BoxView>
+    );
+  }
+);
 
 TextInput.displayName = 'TextInput';

package/src/components/Timeline/index.tsx

@@ -244,12 +244,15 @@ const TimelineRoot = forwardRef<any, TimelineProps>((props, ref) => {
             ? index >= itemsCount - (active! + 1)
             : index <= active!;
 
-          return React.cloneElement(child as React.ReactElement, {
-            key: index,
-            __index: index,
-            __isLast: index === itemsCount - 1,
-            __isActive: isActive,
-          });
+          return React.cloneElement<TimelineItemProps & { __isActive?: boolean }>(
+            child as React.ReactElement<TimelineItemProps & { __isActive?: boolean }>,
+            {
+              key: index,
+              __index: index,
+              __isLast: index === itemsCount - 1,
+              __isActive: isActive,
+            }
+          );
         })}
       </BoxView>
     </TimelineContext.Provider>
@@ -304,14 +307,18 @@ export const TimelineItem = forwardRef<
 
       <BoxView style={styles.itemBody}>
         {title && (
-          <Text style={styles.title}>
-            {typeof title === 'string' ? title : title}
-          </Text>
+          typeof title === 'string' ? (
+            <Text style={styles.title}>{title}</Text>
+          ) : (
+            <BoxView style={{ marginBottom: rem(4) }}>{title}</BoxView>
+          )
         )}
         {children && (
-          <Text style={styles.content}>
-            {typeof children === 'string' ? children : children}
-          </Text>
+          typeof children === 'string' ? (
+            <Text style={styles.content}>{children}</Text>
+          ) : (
+            <BoxView>{children}</BoxView>
+          )
         )}
       </BoxView>
     </BoxView>

package/src/components/Tooltip/index.tsx

@@ -4,9 +4,9 @@ import {
   TouchableWithoutFeedback,
   Animated,
   Platform,
+  Modal,
 } from 'react-native';
 import { Text } from '../Text';
-import { Portal } from '../Portal';
 import type {
   DefaultProps,
   MantineColor,
@@ -210,7 +210,7 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
       ? { onLongPress: show }
       : { onPress: show, onPressOut: hide };
 
-  const childWithRef = React.cloneElement(children, {
+  const childWithRef = React.cloneElement(children as React.ReactElement<any>, {
     ref: targetRef,
     ...triggerProps,
   });
@@ -219,16 +219,18 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
     <>
       {childWithRef}
       {isVisible && (
-        <Portal>
+        <Modal
+          visible={isVisible}
+          transparent
+          animationType="none"
+          onRequestClose={hide}
+          statusBarTranslucent
+        >
           <TouchableWithoutFeedback onPress={hide}>
             <View
               style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                zIndex,
+                flex: 1,
+                backgroundColor: 'transparent',
               }}
             >
               <Animated.View
@@ -238,6 +240,7 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
                     top: tooltipPosition.top,
                     left: tooltipPosition.left,
                     opacity,
+                    zIndex,
                   },
                 ]}
                 {...others}
@@ -250,7 +253,7 @@ export const Tooltip = forwardRef<any, TooltipProps>((props, _ref) => {
               </Animated.View>
             </View>
           </TouchableWithoutFeedback>
-        </Portal>
+        </Modal>
       )}
     </>
   );

package/src/components/TransferList/index.tsx

@@ -184,14 +184,10 @@ const defaultProps: Partial<TransferListProps> = {
 };
 
 const DefaultItem: React.FC<{ data: TransferListDataItem; selected: boolean }> = ({
-  data,
   selected,
 }) => {
   return (
-    <>
-      <Checkbox checked={selected} onChange={() => {}} />
-      <Text>{data.label}</Text>
-    </>
+    <Checkbox checked={selected} onChange={() => {}} />
   );
 };