react-native-mantine 0.5.0 → 0.7.0

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, {

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/Table.example.tsx

@@ -0,0 +1,85 @@
+import { View } from 'react-native';
+import { Table } from './index';
+
+/**
+ * Example demonstrating the fixed Table component with proper column alignment.
+ *
+ * The fix addresses the following issues:
+ * 1. Removed flex: 1 from cells which caused equal spacing regardless of content
+ * 2. Implemented automatic column width calculation using onLayout callbacks
+ * 3. Each column now uses the maximum width of all cells in that column
+ * 4. Columns align properly across all rows (thead, tbody, tfoot)
+ */
+
+const elements = [
+  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
+  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
+  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
+  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
+  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
+];
+
+export function TableExample() {
+  return (
+    <View style={{ padding: 40 }}>
+      <Table
+        verticalSpacing="md"
+        horizontalSpacing="md"
+        fontSize="sm"
+        striped
+        withBorder
+        withColumnBorders
+      >
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Element position</Table.Th>
+            <Table.Th>Element name</Table.Th>
+            <Table.Th>Symbol</Table.Th>
+            <Table.Th>Atomic mass</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {elements.map((element) => (
+            <Table.Tr key={element.name}>
+              <Table.Td>{element.position}</Table.Td>
+              <Table.Td>{element.name}</Table.Td>
+              <Table.Td>{element.symbol}</Table.Td>
+              <Table.Td>{element.mass}</Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </View>
+  );
+}
+
+export function TableWithVariableContent() {
+  return (
+    <View style={{ padding: 40 }}>
+      <Table withBorder withColumnBorders>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Short</Table.Th>
+            <Table.Th>Medium length header</Table.Th>
+            <Table.Th>Very long header text that spans multiple words</Table.Th>
+            <Table.Th>ID</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>A</Table.Td>
+            <Table.Td>Medium content here</Table.Td>
+            <Table.Td>Short</Table.Td>
+            <Table.Td>1</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>B</Table.Td>
+            <Table.Td>Short</Table.Td>
+            <Table.Td>This is a very long content that should make the column wider</Table.Td>
+            <Table.Td>2</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>
+    </View>
+  );
+}