react-native-mantine 0.4.0 → 0.6.0

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