react-native-mantine 0.1.15 → 0.2.0

package/src/components/Chip/index.tsx

@@ -0,0 +1,350 @@
+import React, { forwardRef } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type {
+  DefaultProps,
+  MantineColor,
+  MantineNumberSize,
+  MantineSize,
+  Variants,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface ChipProps extends DefaultProps {
+  /** Chip label */
+  children: React.ReactNode;
+
+  /** Chip size */
+  size?: MantineSize;
+
+  /** Chip color */
+  color?: MantineColor;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Chip variant */
+  variant?: Variants<'filled' | 'outline' | 'light'>;
+
+  /** If true, chip will be checked */
+  checked?: boolean;
+
+  /** Default checked state (uncontrolled) */
+  defaultChecked?: boolean;
+
+  /** Called when checked state changes */
+  onChange?: (checked: boolean) => void;
+
+  /** If true, chip will be disabled */
+  disabled?: boolean;
+
+  /** Icon to display when checked */
+  icon?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Text style */
+  textStyle?: any;
+
+  /** Value for chip groups */
+  value?: string;
+
+  /** Type of chip */
+  type?: 'checkbox' | 'radio';
+}
+
+const sizes = {
+  xs: { height: rem(24) as any, fontSize: rem(10), paddingHorizontal: rem(8) as any },
+  sm: { height: rem(28) as any, fontSize: rem(12), paddingHorizontal: rem(10) as any },
+  md: { height: rem(32) as any, fontSize: rem(14), paddingHorizontal: rem(12) as any },
+  lg: { height: rem(36) as any, fontSize: rem(16), paddingHorizontal: rem(14) as any },
+  xl: { height: rem(42) as any, fontSize: rem(18), paddingHorizontal: rem(16) as any },
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      color,
+      radius,
+      variant,
+      checked,
+      disabled,
+    }: {
+      size: MantineSize;
+      color: MantineColor;
+      radius: MantineNumberSize;
+      variant: Variants<'filled' | 'outline' | 'light'>;
+      checked: boolean;
+      disabled: boolean;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
+
+    const getVariantStyles = () => {
+      if (!checked) {
+        return {
+          backgroundColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.colors.gray?.[1],
+          borderWidth: 1,
+          borderColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[4],
+        };
+      }
+
+      switch (variant) {
+        case 'filled':
+          return {
+            backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            borderWidth: 0,
+          };
+        case 'outline':
+          return {
+            backgroundColor: 'transparent',
+            borderWidth: 1,
+            borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+          };
+        case 'light':
+          return {
+            backgroundColor:
+              theme.colorScheme === 'dark'
+                ? theme.fn.rgba(colors?.[9] || theme.primaryBgColor, 0.25)
+                : colors?.[0] || (theme.colors.gray || [])[1],
+            borderWidth: 0,
+          };
+        default:
+          return {
+            backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            borderWidth: 0,
+          };
+      }
+    };
+
+    const getTextColor = () => {
+      if (!checked) {
+        return theme.colorScheme === 'dark' ? theme.white : theme.black;
+      }
+
+      switch (variant) {
+        case 'filled':
+          return theme.white;
+        case 'outline':
+        case 'light':
+          return colors?.[6] || colors?.[5] || theme.primaryBgColor;
+        default:
+          return theme.white;
+      }
+    };
+
+    return {
+      root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: sizeStyles.height as any,
+        paddingHorizontal: sizeStyles.paddingHorizontal as any,
+        borderRadius: theme.fn.radius(radius),
+        ...getVariantStyles(),
+        ...(disabled && {
+          opacity: 0.6,
+        }),
+      },
+      icon: {
+        marginRight: rem(6) as any,
+      },
+      text: {
+        fontSize: sizeStyles.fontSize as any,
+        fontWeight: (checked ? '600' : '500') as any,
+        color: getTextColor(),
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<ChipProps> = {
+  size: 'sm',
+  color: 'blue',
+  radius: 'xl',
+  variant: 'filled',
+  disabled: false,
+  type: 'checkbox',
+};
+
+export const Chip = forwardRef<any, ChipProps>((props, ref) => {
+  const {
+    children,
+    size,
+    color,
+    radius,
+    variant,
+    checked: controlledChecked,
+    defaultChecked,
+    onChange,
+    disabled,
+    icon,
+    style,
+    textStyle,
+    value,
+    type,
+    ...others
+  } = useComponentDefaultProps('Chip', defaultProps, props);
+
+  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked || false);
+
+  const checked = controlledChecked !== undefined ? controlledChecked : uncontrolledChecked;
+
+  const { styles, sx} = useStyles(
+    { size, color, radius, variant, checked, disabled },
+    { name: 'Chip' }
+  ) as any;
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    const newChecked = !checked;
+    if (controlledChecked === undefined) {
+      setUncontrolledChecked(newChecked);
+    }
+    onChange?.(newChecked);
+  };
+
+  const showIcon = checked && icon;
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      style={sx(styles.root, style)}
+      onPress={handlePress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      {...others}
+    >
+      {showIcon && <BoxView style={styles.icon}>{icon}</BoxView>}
+      <Text style={sx(styles.text, textStyle)}>{children}</Text>
+    </TouchableOpacity>
+  );
+});
+
+Chip.displayName = 'Chip';
+
+// Chip.Group component for managing multiple chips
+export interface ChipGroupProps extends DefaultProps {
+  /** Chips */
+  children: React.ReactNode;
+
+  /** Selected value(s) */
+  value?: string | string[];
+
+  /** Default value(s) */
+  defaultValue?: string | string[];
+
+  /** Called when value changes */
+  onChange?: (value: string | string[]) => void;
+
+  /** If true, multiple chips can be selected */
+  multiple?: boolean;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Spacing between chips */
+  spacing?: MantineSize;
+}
+
+const useGroupStyles = createStyles(
+  (
+    _theme,
+    {
+      spacing: _spacing,
+    }: {
+      spacing: MantineSize;
+    }
+  ) => ({
+    root: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 8,
+    },
+  })
+);
+
+const defaultGroupProps: Partial<ChipGroupProps> = {
+  multiple: false,
+  spacing: 'sm',
+};
+
+export const ChipGroup = forwardRef<any, ChipGroupProps>((props, ref) => {
+  const {
+    children,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    multiple,
+    style,
+    spacing,
+    ...otherProps
+  } = useComponentDefaultProps('ChipGroup', defaultGroupProps, props);
+
+  const [uncontrolledValue, setUncontrolledValue] = React.useState<string | string[]>(
+    defaultValue || (multiple ? [] : '')
+  );
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const { styles, sx } = useGroupStyles({ spacing}, { name: 'ChipGroup' }) as any;
+
+  const handleChipChange = (chipValue: string, checked: boolean) => {
+    let newValue: string | string[];
+
+    if (multiple) {
+      const currentArray = Array.isArray(value) ? value : [];
+      newValue = checked
+        ? [...currentArray, chipValue]
+        : currentArray.filter((v) => v !== chipValue);
+    } else {
+      newValue = checked ? chipValue : '';
+    }
+
+    if (controlledValue === undefined) {
+      setUncontrolledValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const isChecked = (chipValue: string) => {
+    if (multiple && Array.isArray(value)) {
+      return value.includes(chipValue);
+    }
+    return value === chipValue;
+  };
+
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (React.isValidElement(child) && child.type === Chip) {
+      const chipValue = child.props.value;
+      if (chipValue !== undefined) {
+        return React.cloneElement(child as React.ReactElement<ChipProps>, {
+          checked: isChecked(chipValue),
+          onChange: (checked: boolean) => handleChipChange(chipValue, checked),
+        });
+      }
+    }
+    return child;
+  });
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...otherProps}>
+      {enhancedChildren}
+    </BoxView>
+  );
+});
+
+ChipGroup.displayName = 'Chip.Group';
+
+// Attach Group to Chip
+(Chip as any).Group = ChipGroup;

package/src/components/CloseButton/index.tsx

@@ -0,0 +1,154 @@
+import React, { forwardRef } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import type { DefaultProps, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { getSize } from '../../theme';
+
+export interface CloseButtonProps extends DefaultProps {
+  /** Called when button is pressed */
+  onPress?: () => void;
+
+  /** Icon size */
+  size?: MantineSize | number;
+
+  /** Key of theme.radius or number to set border-radius in px */
+  radius?: MantineSize;
+
+  /** Icon color */
+  iconColor?: string;
+
+  /** Custom icon */
+  icon?: React.ReactNode;
+
+  /** Accessibility label */
+  accessibilityLabel?: string;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+const sizes = {
+  xs: 16,
+  sm: 22,
+  md: 28,
+  lg: 34,
+  xl: 44,
+};
+
+const iconSizes = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      radius,
+      disabled,
+    }: {
+      size: MantineSize | number;
+      radius: MantineSize;
+      disabled: boolean;
+    }
+  ) => {
+    const buttonSize = typeof size === 'number' ? size : getSize({ size, sizes }) as number;
+
+    return {
+      root: {
+        width: buttonSize,
+        height: buttonSize,
+        borderRadius: theme.fn.radius(radius),
+        justifyContent: 'center' as const,
+        alignItems: 'center' as const,
+        backgroundColor: 'transparent',
+        opacity: disabled ? 0.4 : 1,
+      },
+      rootHover: {
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[5] : theme.colors.gray?.[0],
+      },
+    };
+  }
+);
+
+const CloseIcon = ({ size, color }: { size: number; color: string }) => (
+  <BoxView style={{ width: size, height: size, position: 'relative' }}>
+    <BoxView
+      style={{
+        position: 'absolute',
+        width: size,
+        height: 2,
+        backgroundColor: color,
+        top: (size - 2) / 2,
+        transform: [{ rotate: '45deg' }],
+      }}
+    />
+    <BoxView
+      style={{
+        position: 'absolute',
+        width: size,
+        height: 2,
+        backgroundColor: color,
+        top: (size - 2) / 2,
+        transform: [{ rotate: '-45deg' }],
+      }}
+    />
+  </BoxView>
+);
+
+const defaultProps: Partial<CloseButtonProps> = {
+  size: 'md',
+  radius: 'sm',
+  accessibilityLabel: 'Close',
+  disabled: false,
+};
+
+export const CloseButton = forwardRef<any, CloseButtonProps>((props, ref) => {
+  const {
+    onPress,
+    size = 'md',
+    radius = 'sm',
+    iconColor,
+    icon,
+    accessibilityLabel,
+    style,
+    disabled,
+    ...others
+  } = useComponentDefaultProps('CloseButton', defaultProps, props);
+
+  const { styles, sx, theme} = useStyles(
+    { size, radius, disabled },
+    { name: 'CloseButton' }
+  ) as any;
+
+  const iconSize = typeof size === 'number' ? Math.round(size * 0.7) : (getSize({ size, sizes: iconSizes }) as unknown as number);
+  const defaultIconColor =
+    iconColor || (theme.colorScheme === 'dark' ? theme.colors.dark?.[0] : theme.colors.gray?.[7]) || '#000';
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.6}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      style={sx(styles.root, style)}
+      {...others}
+    >
+      {icon || <CloseIcon size={iconSize} color={defaultIconColor} />}
+    </TouchableOpacity>
+  );
+});
+
+CloseButton.displayName = 'CloseButton';

package/src/components/Code/index.tsx

@@ -0,0 +1,83 @@
+import React, { forwardRef } from 'react';
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
+import { useTheme } from '../../theme/theme-provider';
+import { BoxView } from '../BoxView';
+
+export interface CodeProps extends Omit<TextProps, 'children'> {
+  /** Code content */
+  children?: React.ReactNode;
+
+  /** Code color from theme */
+  color?: string;
+
+  /** Display as code block instead of inline */
+  block?: boolean;
+}
+
+/**
+ * Code component renders inline code or code blocks with monospace font
+ */
+export const Code = forwardRef<any, CodeProps>((props, ref) => {
+  const { children, color, block = false, style, ...others} = props;
+
+  const theme = useTheme();
+
+  // Get background and text colors
+  const backgroundColor = theme.colors.gray?.[0] || '#F6F6F6';
+  const textColor = color
+    ? theme.colors[color]?.[theme.primaryShade] || color
+    : theme.light.text;
+
+  // Monospace font - in React Native, we can use 'Courier' or 'Courier New'
+  const codeStyles = {
+    fontFamily: 'Courier',
+    fontSize: theme.fontSizes.sm as number || 14,
+    backgroundColor: backgroundColor,
+    color: textColor,
+    paddingHorizontal: block ? 16 : 4,
+    paddingVertical: block ? 12 : 2,
+    borderRadius: theme.radius.sm || 4,
+  };
+
+  if (block) {
+    return (
+      <BoxView
+        ref={ref}
+        style={[
+          {
+            backgroundColor: backgroundColor,
+            borderRadius: theme.radius.sm || 4,
+            padding: 16,
+          },
+          style,
+        ]}
+      >
+        <Text
+          style={[
+            {
+              fontFamily: 'Courier',
+              fontSize: theme.fontSizes.sm as number || 14,
+              color: textColor,
+            },
+          ]}
+          {...others}
+        >
+          {children}
+        </Text>
+      </BoxView>
+    );
+  }
+
+  return (
+    <Text
+      ref={ref}
+      style={[codeStyles, style]}
+      {...others}
+    >
+      {children}
+    </Text>
+  );
+});
+
+Code.displayName = 'Code';

package/src/components/Collapse/index.tsx

@@ -0,0 +1,108 @@
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { Animated, type LayoutChangeEvent } from 'react-native';
+import { BoxView } from '../BoxView';
+import type { DefaultProps } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+
+export interface CollapseProps extends DefaultProps {
+  /** Content that should be collapsed */
+  children: React.ReactNode;
+
+  /** Opened state */
+  in: boolean;
+
+  /** Transition duration in ms */
+  transitionDuration?: number;
+
+  /** Transition timing function */
+  transitionTimingFunction?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+
+  /** Called when transition ends */
+  onTransitionEnd?: () => void;
+
+  /** Animation delay in ms */
+  animateOpacity?: boolean;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const defaultProps: Partial<CollapseProps> = {
+  transitionDuration: 200,
+  transitionTimingFunction: 'ease',
+  animateOpacity: true,
+};
+
+export const Collapse = forwardRef<any, CollapseProps>((props, ref) => {
+  const {
+    children,
+    in: opened,
+    transitionDuration,
+    transitionTimingFunction,
+    onTransitionEnd,
+    animateOpacity,
+    style,
+    ...others
+  } = useComponentDefaultProps('Collapse', defaultProps, props);
+
+  const [contentHeight, setContentHeight] = useState<number>(0);
+  const heightAnim = useRef(new Animated.Value(opened ? 1 : 0)).current;
+  const opacityAnim = useRef(new Animated.Value(opened ? 1 : 0)).current;
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    if (height > 0 && height !== contentHeight) {
+      setContentHeight(height);
+    }
+  };
+
+  useEffect(() => {
+    const animations = [
+      Animated.timing(heightAnim, {
+        toValue: opened ? 1 : 0,
+        duration: transitionDuration,
+        useNativeDriver: false,
+      }),
+    ];
+
+    if (animateOpacity) {
+      animations.push(
+        Animated.timing(opacityAnim, {
+          toValue: opened ? 1 : 0,
+          duration: transitionDuration,
+          useNativeDriver: true,
+        })
+      );
+    }
+
+    Animated.parallel(animations).start(({ finished }) => {
+      if (finished && onTransitionEnd) {
+        onTransitionEnd();
+      }
+    });
+  }, [opened, heightAnim, opacityAnim, transitionDuration, animateOpacity, onTransitionEnd]);
+
+  const animatedHeight = heightAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, contentHeight || 0],
+  });
+
+  return (
+    <Animated.View
+      ref={ref}
+      style={[
+        {
+          height: animatedHeight,
+          overflow: 'hidden',
+          ...(animateOpacity && { opacity: opacityAnim }),
+        },
+        style,
+      ]}
+      {...others}
+    >
+      <BoxView onLayout={handleLayout}>{children}</BoxView>
+    </Animated.View>
+  );
+});
+
+Collapse.displayName = 'Collapse';