react-native-mantine 0.5.0 → 0.7.0

package/src/components/Table/index.tsx

@@ -1,11 +1,13 @@
-import React, { forwardRef, createContext, useContext } from 'react';
+import React, { forwardRef, createContext, useContext, useState, useCallback } from 'react';
 import { ScrollView } from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
 import { BoxView } from '../BoxView';
 import { Text } from '../Text';
 import type { DefaultProps, SpacingValue } from '../../theme/types';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
 interface TableContextValue {
   striped: boolean;
@@ -15,6 +17,8 @@ interface TableContextValue {
   fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
   verticalSpacing: SpacingValue;
   horizontalSpacing: SpacingValue;
+  columnWidths: number[];
+  onCellLayout: (columnIndex: number, width: number) => void;
 }
 
 const TableContext = createContext<TableContextValue | null>(null);
@@ -94,20 +98,26 @@ export interface TableTrProps extends DefaultProps {
   __index?: number;
 }
 
-export interface TableThProps extends DefaultProps {
+export interface TableThProps extends DefaultProps, WithTextWrapperProps {
   /** Th children */
   children?: React.ReactNode;
 
   /** Additional styles */
   style?: any;
+
+  /** Internal column index */
+  __columnIndex?: number;
 }
 
-export interface TableTdProps extends DefaultProps {
+export interface TableTdProps extends DefaultProps, WithTextWrapperProps {
   /** Td children */
   children?: React.ReactNode;
 
   /** Additional styles */
   style?: any;
+
+  /** Internal column index */
+  __columnIndex?: number;
 }
 
 const fontSizes = {
@@ -130,19 +140,25 @@ const useTableStyles = createStyles(
     }
   ) => ({
     wrapper: {
-      flex: 1,
+      // No flex: 1 here to avoid constraining the table
     },
     root: {
       width: '100%',
       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 +169,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],
   },
 }));
 
@@ -170,12 +189,18 @@ const useTableRowStyles = createStyles(
     }
   ) => ({
     tr: {
+      flexDirection: 'row',
       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],
         }),
     },
   })
@@ -190,12 +215,14 @@ const useTableCellStyles = createStyles(
       horizontalSpacing,
       withColumnBorders,
       isHeader,
+      width,
     }: {
       fontSize: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
       verticalSpacing: SpacingValue;
       horizontalSpacing: SpacingValue;
       withColumnBorders: boolean;
       isHeader: boolean;
+      width?: number;
     }
   ) => {
     const getVerticalPadding = () => {
@@ -210,6 +237,9 @@ const useTableCellStyles = createStyles(
 
     return {
       cell: {
+        // Remove flex: 1 to prevent equal spacing
+        // Use explicit width when available for column alignment
+        ...(width && { width }),
         paddingVertical: getVerticalPadding() as any,
         paddingHorizontal: getHorizontalPadding() as any,
         fontSize: fontSizes[fontSize],
@@ -218,7 +248,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 +271,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,11 +287,25 @@ 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;
 
+  // Track column widths to ensure alignment across rows
+  const [columnWidths, setColumnWidths] = useState<number[]>([]);
+
+  const onCellLayout = useCallback((columnIndex: number, width: number) => {
+    setColumnWidths((prevWidths) => {
+      const newWidths = [...prevWidths];
+      // Store the maximum width for each column to ensure all cells in that column have the same width
+      if (!newWidths[columnIndex] || width > newWidths[columnIndex]) {
+        newWidths[columnIndex] = width;
+      }
+      return newWidths;
+    });
+  }, []);
+
   return (
     <TableContext.Provider
       value={{
@@ -270,9 +316,15 @@ export const Table = forwardRef<any, TableProps>((props, ref) => {
         fontSize: fontSize!,
         verticalSpacing: verticalSpacing!,
         horizontalSpacing: horizontalSpacing!,
+        columnWidths,
+        onCellLayout,
       }}
     >
-      <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 +334,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 +345,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 +354,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 +376,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,
@@ -334,53 +389,103 @@ export const Tr = forwardRef<any, TableTrProps>((props, ref) => {
     { name: 'Tr' }
   ) as any;
 
+  // Add column indices to children (Th and Td components)
+  const childrenArray = React.Children.toArray(children);
+  const childrenWithColumnIndex = childrenArray.map((child, index) => {
+    if (!React.isValidElement(child)) return child;
+    return React.cloneElement<TableThProps | TableTdProps>(
+      child as React.ReactElement<TableThProps | TableTdProps>,
+      {
+        __columnIndex: index,
+      }
+    );
+  });
+
   return (
     <BoxView ref={ref} style={sx(styles.tr, style)} {...others}>
-      {children}
+      {childrenWithColumnIndex}
     </BoxView>
   );
 });
 
-export const Th = forwardRef<any, TableThProps>((props, ref) => {
-  const { children, style, ...others} = props;
+const Th = forwardRef<any, TableThProps>((props, ref) => {
+  const { children, style, withTextWrapper: shouldWrapInText = true, __columnIndex, ...others } = props;
   const context = useTableContext();
 
-  const { styles, sx} = useTableCellStyles(
+  const columnIndex = __columnIndex ?? 0;
+  const columnWidth = context?.columnWidths?.[columnIndex];
+
+  const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
       verticalSpacing: context?.verticalSpacing ?? 'xs',
       horizontalSpacing: context?.horizontalSpacing ?? 'xs',
       withColumnBorders: context?.withColumnBorders ?? false,
       isHeader: true,
+      width: columnWidth,
     },
     { name: 'Th' }
   ) as any;
 
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      if (context?.onCellLayout && width > 0) {
+        context.onCellLayout(columnIndex, width);
+      }
+    },
+    [context, columnIndex]
+  );
+
   return (
-    <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
-      {typeof children === 'string' ? <Text style={styles.cell}>{children}</Text> : children}
+    <BoxView
+      ref={ref}
+      style={sx(styles.cell, style)}
+      onLayout={handleLayout}
+      {...others}
+    >
+      {withTextWrapper(children, shouldWrapInText, styles.cell)}
     </BoxView>
   );
 });
 
-export const Td = forwardRef<any, TableTdProps>((props, ref) => {
-  const { children, style, ...others} = props;
+const Td = forwardRef<any, TableTdProps>((props, ref) => {
+  const { children, style, withTextWrapper: shouldWrapInText = true, __columnIndex, ...others } = props;
   const context = useTableContext();
 
-  const { styles, sx} = useTableCellStyles(
+  const columnIndex = __columnIndex ?? 0;
+  const columnWidth = context?.columnWidths?.[columnIndex];
+
+  const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
       verticalSpacing: context?.verticalSpacing ?? 'xs',
       horizontalSpacing: context?.horizontalSpacing ?? 'xs',
       withColumnBorders: context?.withColumnBorders ?? false,
       isHeader: false,
+      width: columnWidth,
     },
     { name: 'Td' }
   ) as any;
 
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width } = event.nativeEvent.layout;
+      if (context?.onCellLayout && width > 0) {
+        context.onCellLayout(columnIndex, width);
+      }
+    },
+    [context, columnIndex]
+  );
+
   return (
-    <BoxView ref={ref} style={sx(styles.cell, style)} {...others}>
-      {typeof children === 'string' ? <Text style={styles.cell}>{children}</Text> : children}
+    <BoxView
+      ref={ref}
+      style={sx(styles.cell, style)}
+      onLayout={handleLayout}
+      {...others}
+    >
+      {withTextWrapper(children, shouldWrapInText, styles.cell)}
     </BoxView>
   );
 });
@@ -393,10 +498,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>