react-native-mantine 0.1.15 → 0.2.0

package/src/components/Pagination/index.tsx

@@ -0,0 +1,336 @@
+import React, { forwardRef } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor, MantineNumberSize, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface PaginationProps extends DefaultProps {
+  /** Current page (controlled) */
+  value?: number;
+
+  /** Default page (uncontrolled) */
+  defaultValue?: number;
+
+  /** Called when page changes */
+  onChange?: (page: number) => void;
+
+  /** Total number of pages */
+  total: number;
+
+  /** Pagination size */
+  size?: MantineSize;
+
+  /** Pagination color */
+  color?: MantineColor;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Number of siblings on each side of selected page */
+  siblings?: number;
+
+  /** Number of elements visible on each side of selected page */
+  boundaries?: number;
+
+  /** Show first/last controls */
+  withControls?: boolean;
+
+  /** Show previous/next controls */
+  withEdges?: boolean;
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /** Custom icons */
+  previousIcon?: React.ReactNode;
+  nextIcon?: React.ReactNode;
+  firstIcon?: React.ReactNode;
+  lastIcon?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: { height: rem(24) as any, minWidth: rem(24), fontSize: rem(10), padding: rem(4) },
+  sm: { height: rem(28) as any, minWidth: rem(28), fontSize: rem(12), padding: rem(6) },
+  md: { height: rem(32) as any, minWidth: rem(32), fontSize: rem(14), padding: rem(8) },
+  lg: { height: rem(38) as any, minWidth: rem(38), fontSize: rem(16), padding: rem(10) },
+  xl: { height: rem(44) as any, minWidth: rem(44), fontSize: rem(18), padding: rem(12) },
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      disabled,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      disabled: boolean;
+    },
+    { size }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        opacity: disabled ? 0.5 : 1,
+      },
+      item: {
+        height: sizeStyles.height,
+        minWidth: sizeStyles.minWidth as any,
+        paddingHorizontal: sizeStyles.padding as any,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: theme.fn.radius(radius),
+        marginHorizontal: rem(2) as any,
+        borderWidth: 1,
+        borderColor: 'transparent',
+      },
+      itemDefault: {
+        backgroundColor: 'transparent',
+        borderColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+      },
+      itemActive: {
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+      },
+      itemControl: {
+        backgroundColor: 'transparent',
+      },
+      label: {
+        fontSize: sizeStyles.fontSize as any,
+        fontWeight: '500',
+      },
+      labelDefault: {
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      },
+      labelActive: {
+        color: theme.white,
+      },
+      labelControl: {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[1] : theme.colors.gray?.[7],
+      },
+      labelDisabled: {
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[3] : theme.colors.gray?.[5],
+      },
+      dots: {
+        paddingHorizontal: rem(8) as any,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<PaginationProps> = {
+  size: 'md',
+  color: 'blue',
+  radius: 'sm',
+  siblings: 1,
+  boundaries: 1,
+  withControls: true,
+  withEdges: false,
+  disabled: false,
+};
+
+const range = (start: number, end: number): number[] => {
+  const length = end - start + 1;
+  return Array.from({ length }, (_, i) => start + i);
+};
+
+const DOTS = 'dots';
+
+export const Pagination = forwardRef<any, PaginationProps>((props, ref) => {
+  const {
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    total,
+    size,
+    color,
+    radius,
+    siblings,
+    boundaries,
+    withControls,
+    withEdges,
+    disabled,
+    previousIcon,
+    nextIcon,
+    firstIcon,
+    lastIcon,
+    style,
+    ...others
+  } = useComponentDefaultProps('Pagination', defaultProps, props);
+
+  const { styles, sx } = useStyles(
+    { color, radius, disabled },
+    { name: 'Pagination', size }
+  ) as any;
+
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue ?? 1);
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const handlePageChange = (page: number) => {
+    if (disabled) return;
+    if (page < 1 || page > total) return;
+
+    if (controlledValue === undefined) {
+      setUncontrolledValue(page);
+    }
+    onChange?.(page);
+  };
+
+  const paginationRange = React.useMemo(() => {
+    const totalPageNumbers = siblings! * 2 + 3 + boundaries! * 2;
+
+    if (totalPageNumbers >= total) {
+      return range(1, total);
+    }
+
+    const leftSiblingIndex = Math.max(value - siblings!, boundaries! + 1);
+    const rightSiblingIndex = Math.min(value + siblings!, total - boundaries!);
+
+    const shouldShowLeftDots = leftSiblingIndex > boundaries! + 2;
+    const shouldShowRightDots = rightSiblingIndex < total - (boundaries! + 1);
+
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      const leftItemCount = siblings! * 2 + boundaries! + 2;
+      return [...range(1, leftItemCount), DOTS, ...range(total - (boundaries! - 1), total)];
+    }
+
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      const rightItemCount = boundaries! + 1 + 2 * siblings!;
+      return [...range(1, boundaries!), DOTS, ...range(total - rightItemCount, total)];
+    }
+
+    return [
+      ...range(1, boundaries!),
+      DOTS,
+      ...range(leftSiblingIndex, rightSiblingIndex),
+      DOTS,
+      ...range(total - boundaries! + 1, total),
+    ];
+  }, [total, value, siblings, boundaries]);
+
+  const renderItem = (page: number | string, index: number) => {
+    if (page === DOTS) {
+      return (
+        <BoxView key={`dots-${index}`} style={styles.dots}>
+          <Text style={[styles.label, styles.labelDefault]}>...</Text>
+        </BoxView>
+      );
+    }
+
+    const pageNumber = page as number;
+    const isActive = pageNumber === value;
+
+    return (
+      <TouchableOpacity
+        key={pageNumber}
+        style={[styles.item, isActive ? styles.itemActive : styles.itemDefault]}
+        onPress={() => handlePageChange(pageNumber)}
+        disabled={disabled}
+        activeOpacity={0.7}
+      >
+        <Text style={[styles.label, isActive ? styles.labelActive : styles.labelDefault]}>
+          {pageNumber}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const canGoPrevious = value > 1;
+  const canGoNext = value < total;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {withEdges && (
+        <TouchableOpacity
+          style={[styles.item, styles.itemControl]}
+          onPress={() => handlePageChange(1)}
+          disabled={disabled || !canGoPrevious}
+          activeOpacity={0.7}
+        >
+          <Text
+            style={[
+              styles.label,
+              styles.labelControl,
+              (!canGoPrevious || disabled) && styles.labelDisabled,
+            ]}
+          >
+            {firstIcon || '<<'}
+          </Text>
+        </TouchableOpacity>
+      )}
+
+      {withControls && (
+        <TouchableOpacity
+          style={[styles.item, styles.itemControl]}
+          onPress={() => handlePageChange(value - 1)}
+          disabled={disabled || !canGoPrevious}
+          activeOpacity={0.7}
+        >
+          <Text
+            style={[
+              styles.label,
+              styles.labelControl,
+              (!canGoPrevious || disabled) && styles.labelDisabled,
+            ]}
+          >
+            {previousIcon || '<'}
+          </Text>
+        </TouchableOpacity>
+      )}
+
+      {paginationRange.map(renderItem)}
+
+      {withControls && (
+        <TouchableOpacity
+          style={[styles.item, styles.itemControl]}
+          onPress={() => handlePageChange(value + 1)}
+          disabled={disabled || !canGoNext}
+          activeOpacity={0.7}
+        >
+          <Text
+            style={[
+              styles.label,
+              styles.labelControl,
+              (!canGoNext || disabled) && styles.labelDisabled,
+            ]}
+          >
+            {nextIcon || '>'}
+          </Text>
+        </TouchableOpacity>
+      )}
+
+      {withEdges && (
+        <TouchableOpacity
+          style={[styles.item, styles.itemControl]}
+          onPress={() => handlePageChange(total)}
+          disabled={disabled || !canGoNext}
+          activeOpacity={0.7}
+        >
+          <Text
+            style={[
+              styles.label,
+              styles.labelControl,
+              (!canGoNext || disabled) && styles.labelDisabled,
+            ]}
+          >
+            {lastIcon || '>>'}
+          </Text>
+        </TouchableOpacity>
+      )}
+    </BoxView>
+  );
+});
+
+Pagination.displayName = 'Pagination';

package/src/components/Paper/index.tsx

@@ -0,0 +1,155 @@
+import React, { forwardRef } from 'react';
+import { Platform } from 'react-native';
+import { BoxView } from '../BoxView';
+import type {
+  DefaultProps,
+  MantineNumberSize,
+  SpacingValue,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface PaperProps extends DefaultProps {
+  /** Key of theme.shadows or any valid shadow value */
+  shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Padding from theme.spacing, or number to set padding in px */
+  p?: SpacingValue;
+
+  /** Add border with (theme.colors.gray || [])[3] color in light color scheme and (theme.colors.dark || [])[4] in dark */
+  withBorder?: boolean;
+
+  /** Paper children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const shadows = {
+  xs: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 1,
+    },
+    android: {
+      elevation: 1,
+    },
+  },
+  sm: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+    },
+    android: {
+      elevation: 2,
+    },
+  },
+  md: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.15,
+      shadowRadius: 4,
+    },
+    android: {
+      elevation: 4,
+    },
+  },
+  lg: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 8,
+    },
+  },
+  xl: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.25,
+      shadowRadius: 16,
+    },
+    android: {
+      elevation: 12,
+    },
+  },
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      shadow,
+      radius,
+      p,
+      withBorder,
+    }: {
+      shadow?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+      radius: MantineNumberSize;
+      p?: SpacingValue;
+      withBorder: boolean;
+    }
+  ) => {
+    const getShadowStyles = () => {
+      if (!shadow) return {};
+      const shadowConfig = shadows[shadow as keyof typeof shadows];
+      if (!shadowConfig) return {};
+
+      return Platform.OS === 'ios' ? shadowConfig.ios : shadowConfig.android;
+    };
+
+    const getPadding = () => {
+      if (p === undefined) return {};
+      if (typeof p === 'number') return { padding: rem(p) };
+      return { padding: theme.spacing[p] || theme.spacing.md };
+    };
+
+    return {
+      root: {
+        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : theme.white,
+        borderRadius: theme.fn.radius(radius),
+        ...getShadowStyles(),
+        ...getPadding(),
+        ...(withBorder && {
+          borderWidth: 1,
+          borderColor:
+            theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[3],
+        }),
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<PaperProps> = {
+  radius: 'sm',
+  p: 0,
+  withBorder: false,
+};
+
+export const Paper = forwardRef<any, PaperProps>((props, ref) => {
+  const { shadow, radius, p, withBorder, children, style} =
+    useComponentDefaultProps('Paper', defaultProps, props);
+
+  const { styles, sx, ...others} = useStyles({ shadow, radius, p, withBorder}, { name: 'Paper' }) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+Paper.displayName = 'Paper';

package/src/components/PasswordInput/index.tsx

@@ -0,0 +1,78 @@
+import React, { forwardRef, useState } from 'react';
+import { TextInput as RNTextInput, Pressable } from 'react-native';
+import { TextInput, type TextInputProps } from '../TextInput';
+import { Text } from '../Text';
+
+export interface PasswordInputProps extends Omit<TextInputProps, 'rightSection' | 'type'> {
+  /** Toggle button aria-label */
+  visibilityToggleLabel?: string;
+
+  /** Controlled visibility state */
+  visible?: boolean;
+
+  /** Called when visibility changes */
+  onVisibilityChange?: (visible: boolean) => void;
+
+  /** Custom visibility toggle icon */
+  visibilityToggleIcon?: (visible: boolean) => React.ReactNode;
+}
+
+const defaultProps: Partial<PasswordInputProps> = {
+  visibilityToggleLabel: 'Toggle password visibility',
+};
+
+const DefaultEyeIcon = ({ visible }: { visible: boolean }) => (
+  <Text style={{ fontSize: 18 }}>{visible ? '👁️' : '👁️‍🗨️'}</Text>
+);
+
+export const PasswordInput = forwardRef<RNTextInput, PasswordInputProps>((props, ref) => {
+  const {
+    visibilityToggleLabel,
+    visible: controlledVisible,
+    onVisibilityChange,
+    visibilityToggleIcon,
+    ...others
+  } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const [uncontrolledVisible, setUncontrolledVisible] = useState(false);
+  const isControlled = controlledVisible !== undefined;
+  const visible = isControlled ? controlledVisible : uncontrolledVisible;
+
+  const handleToggle = () => {
+    const newVisible = !visible;
+    if (!isControlled) {
+      setUncontrolledVisible(newVisible);
+    }
+    onVisibilityChange?.(newVisible);
+  };
+
+  const toggleButton = (
+    <Pressable
+      onPress={handleToggle}
+      accessibilityLabel={visibilityToggleLabel}
+      accessibilityRole="button"
+      style={{
+        padding: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      {visibilityToggleIcon ? visibilityToggleIcon(visible) : <DefaultEyeIcon visible={visible} />}
+    </Pressable>
+  );
+
+  return (
+    <TextInput
+      ref={ref}
+      secureTextEntry={!visible}
+      rightSection={toggleButton}
+      rightSectionWidth={40}
+      {...others}
+    />
+  );
+});
+
+PasswordInput.displayName = 'PasswordInput';