react-native-mantine 0.6.0 → 0.8.0

package/src/components/Notification/index.tsx

@@ -6,8 +6,9 @@ import type { DefaultProps, MantineColor, MantineNumberSize } from '../../theme/
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { rem } from '../../theme/utils/rem';
+import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface NotificationProps extends DefaultProps {
+export interface NotificationProps extends DefaultProps, WithTextWrapperProps {
   /** Notification title */
   title?: React.ReactNode;
 
@@ -128,6 +129,7 @@ const defaultProps: Partial<NotificationProps> = {
   withCloseButton: true,
   withBorder: true,
   loading: false,
+  withTextWrapper: true,
 };
 
 export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
@@ -142,6 +144,7 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
     loading,
     withBorder,
     style,
+    withTextWrapper: shouldWrapInText,
     ...others
   } = useComponentDefaultProps('Notification', defaultProps, props);
 
@@ -155,20 +158,8 @@ export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
       {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
 
       <BoxView style={styles.body}>
-        {title && (
-          typeof title === 'string' || typeof title === 'number' ? (
-            <Text style={styles.title}>{title}</Text>
-          ) : (
-            <BoxView style={{ marginBottom: styles.title.marginBottom }}>{title}</BoxView>
-          )
-        )}
-        {message && (
-          typeof message === 'string' || typeof message === 'number' ? (
-            <Text style={styles.message}>{message}</Text>
-          ) : (
-            <BoxView>{message}</BoxView>
-          )
-        )}
+        {title && withTextWrapper(title, shouldWrapInText, styles.title)}
+        {message && withTextWrapper(message, shouldWrapInText, styles.message)}
       </BoxView>
 
       {withCloseButton && onClose && (

package/src/components/Radio/index.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
-import { Pressable, Animated } from 'react-native';
+import React, { forwardRef, useEffect, useRef, createContext, useContext } from 'react';
+import { Pressable, Animated, View } from 'react-native';
 import { BoxView } from '../BoxView';
 import { Text } from '../Text';
 import type { DefaultProps, MantineColor, MantineSize } from '../../theme/types';
@@ -36,6 +36,44 @@ export interface RadioProps extends DefaultProps {
   wrapperStyle?: any;
 }
 
+export interface RadioGroupProps {
+  /** Current selected value */
+  value?: string;
+
+  /** Called when value changes */
+  onChange?: (value: string) => void;
+
+  /** Radio group children */
+  children: React.ReactNode;
+
+  /** Radio group name for accessibility */
+  name?: string;
+
+  /** Radio size for all children */
+  size?: MantineSize;
+
+  /** Radio color for all children */
+  color?: MantineColor;
+
+  /** Wrapper style */
+  style?: any;
+
+  /** Spacing between radio buttons */
+  spacing?: number;
+}
+
+interface RadioGroupContextValue {
+  value?: string;
+  onChange?: (value: string) => void;
+  size?: MantineSize;
+  color?: MantineColor;
+  name?: string;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | undefined>(undefined);
+
+const useRadioGroupContext = () => useContext(RadioGroupContext);
+
 const sizes = {
   xs: rem(14),
   sm: rem(18),
@@ -103,20 +141,28 @@ const defaultProps: Partial<RadioProps> = {
   disabled: false,
 };
 
-export const Radio = forwardRef<any, RadioProps>((props, ref) => {
+const RadioComponent = forwardRef<any, RadioProps>((props, ref) => {
+  const groupContext = useRadioGroupContext();
+
   const {
     label,
-    size,
-    color,
+    size: propSize,
+    color: propColor,
     value,
-    checked,
-    onChange,
+    checked: propChecked,
+    onChange: propOnChange,
     disabled,
     style,
     wrapperStyle,
     ...others
   } = useComponentDefaultProps('Radio', defaultProps, props);
 
+  // Use group context if available, otherwise use props
+  const size = propSize || groupContext?.size || defaultProps.size;
+  const color = propColor || groupContext?.color || defaultProps.color;
+  const checked = groupContext ? groupContext.value === value : propChecked;
+  const onChange = groupContext?.onChange || propOnChange;
+
   const { styles, sx } = useStyles({ size, color, disabled }, { name: 'Radio' }) as any;
 
   const scaleAnim = useRef(new Animated.Value(checked ? 1 : 0)).current;
@@ -158,6 +204,7 @@ export const Radio = forwardRef<any, RadioProps>((props, ref) => {
       style={sx(styles.root, wrapperStyle)}
       accessibilityRole="radio"
       accessibilityState={{ checked }}
+      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
       {...others}
     >
       {radioContent}
@@ -166,4 +213,48 @@ export const Radio = forwardRef<any, RadioProps>((props, ref) => {
   );
 });
 
-Radio.displayName = 'Radio';
+RadioComponent.displayName = 'Radio';
+
+const RadioGroup = forwardRef<View, RadioGroupProps>((props, ref) => {
+  const {
+    value,
+    onChange,
+    children,
+    name,
+    size,
+    color,
+    style,
+    spacing = 12,
+  } = props;
+
+  const contextValue: RadioGroupContextValue = {
+    value,
+    onChange,
+    size,
+    color,
+    name,
+  };
+
+  return (
+    <RadioGroupContext.Provider value={contextValue}>
+      <View ref={ref} style={style}>
+        {React.Children.map(children, (child, index) => {
+          if (!React.isValidElement(child)) {
+            return child;
+          }
+          return (
+            <View key={index} style={{ marginBottom: index < React.Children.count(children) - 1 ? spacing : 0 }}>
+              {child}
+            </View>
+          );
+        })}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+});
+
+RadioGroup.displayName = 'RadioGroup';
+
+export const Radio = Object.assign(RadioComponent, {
+  Group: RadioGroup,
+});

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>
+  );
+}

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,7 +140,7 @@ const useTableStyles = createStyles(
     }
   ) => ({
     wrapper: {
-      flex: 1,
+      // No flex: 1 here to avoid constraining the table
     },
     root: {
       width: '100%',
@@ -179,6 +189,7 @@ const useTableRowStyles = createStyles(
     }
   ) => ({
     tr: {
+      flexDirection: 'row',
       borderBottomWidth: 1,
       borderBottomColor:
         theme.colorScheme === 'dark'
@@ -204,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 = () => {
@@ -224,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],
@@ -276,6 +292,20 @@ const Table = forwardRef<any, TableProps>((props, ref) => {
     { 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={{
@@ -286,6 +316,8 @@ const Table = forwardRef<any, TableProps>((props, ref) => {
         fontSize: fontSize!,
         verticalSpacing: verticalSpacing!,
         horizontalSpacing: horizontalSpacing!,
+        columnWidths,
+        onCellLayout,
       }}
     >
       <ScrollView
@@ -357,17 +389,32 @@ 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>
   );
 });
 
 const Th = forwardRef<any, TableThProps>((props, ref) => {
-  const { children, style, ...others } = props;
+  const { children, style, withTextWrapper: shouldWrapInText = true, __columnIndex, ...others } = props;
   const context = useTableContext();
 
+  const columnIndex = __columnIndex ?? 0;
+  const columnWidth = context?.columnWidths?.[columnIndex];
+
   const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
@@ -375,21 +422,40 @@ const Th = forwardRef<any, TableThProps>((props, ref) => {
       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}>
-      <Text style={styles.cell}>{children}</Text>)
+    <BoxView
+      ref={ref}
+      style={sx(styles.cell, style)}
+      onLayout={handleLayout}
+      {...others}
+    >
+      {withTextWrapper(children, shouldWrapInText, styles.cell)}
     </BoxView>
   );
 });
 
 const Td = forwardRef<any, TableTdProps>((props, ref) => {
-  const { children, style, ...others } = props;
+  const { children, style, withTextWrapper: shouldWrapInText = true, __columnIndex, ...others } = props;
   const context = useTableContext();
 
+  const columnIndex = __columnIndex ?? 0;
+  const columnWidth = context?.columnWidths?.[columnIndex];
+
   const { styles, sx } = useTableCellStyles(
     {
       fontSize: context?.fontSize ?? 'sm',
@@ -397,13 +463,29 @@ const Td = forwardRef<any, TableTdProps>((props, ref) => {
       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}>
-      <Text style={styles.cell}>{children}</Text>
+    <BoxView
+      ref={ref}
+      style={sx(styles.cell, style)}
+      onLayout={handleLayout}
+      {...others}
+    >
+      {withTextWrapper(children, shouldWrapInText, styles.cell)}
     </BoxView>
   );
 });

package/src/components/Title/index.tsx

@@ -2,8 +2,9 @@ import React, { forwardRef } from 'react';
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
 import { useTheme } from '../../theme/theme-provider';
+import type { WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
-export interface TitleProps extends Omit<TextProps, 'size'> {
+export interface TitleProps extends Omit<TextProps, 'size'>, WithTextWrapperProps {
   /** Heading order (h1-h6) */
   order?: 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -16,7 +17,7 @@ export interface TitleProps extends Omit<TextProps, 'size'> {
  * Maps order prop to h1-h6 heading styles from theme
  */
 export const Title = forwardRef<any, TitleProps>((props, ref) => {
-  const { order = 1, children, style, ...others} = props;
+  const { order = 1, children, style, withTextWrapper: shouldWrapInText = true, ...others} = props;
   const theme = useTheme();
 
   // Get heading styles from theme
@@ -29,6 +30,10 @@ export const Title = forwardRef<any, TitleProps>((props, ref) => {
     theme.headings.fontWeight ??
     700;
 
+  if (!shouldWrapInText) {
+    return children;
+  }
+
   return (
     <Text
       ref={ref}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useCachedResources';
+export * from './use-form';

package/src/hooks/use-form/index.ts

@@ -0,0 +1,3 @@
+export { useForm } from './useForm';
+export * from './types';
+export * from './validators';