react-native-mantine 0.1.15 → 0.3.0

package/src/components/Burger/index.tsx

@@ -0,0 +1,230 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { TouchableOpacity, Animated } from 'react-native';
+import type { DefaultProps, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { getSize } from '../../theme';
+
+export interface BurgerProps extends DefaultProps {
+  /** Burger state: true for cross, false for burger */
+  opened: boolean;
+
+  /** Called when burger is pressed */
+  onPress?: () => void;
+
+  /** Burger color */
+  color?: string;
+
+  /** Predefined burger size or number to set width and height in px */
+  size?: MantineSize | number;
+
+  /** Transition duration in ms */
+  transitionDuration?: number;
+
+  /** Accessibility label */
+  accessibilityLabel?: string;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Disabled state */
+  disabled?: boolean;
+}
+
+const sizes = {
+  xs: 12,
+  sm: 18,
+  md: 24,
+  lg: 34,
+  xl: 42,
+};
+
+const useStyles = createStyles(
+  (
+    _theme,
+    {
+      size,
+      color,
+      disabled,
+    }: {
+      size: MantineSize | number;
+      color: string;
+      disabled: boolean;
+    }
+  ) => {
+    const burgerSize = typeof size === 'number' ? size : (getSize({ size, sizes }) as unknown as number);
+
+    return {
+      root: {
+        width: burgerSize + 8,
+        height: burgerSize,
+        justifyContent: 'center' as const,
+        alignItems: 'center' as const,
+        opacity: disabled ? 0.4 : 1,
+      },
+      burger: {
+        width: burgerSize,
+        height: burgerSize,
+        justifyContent: 'space-between' as const,
+        position: 'relative' as const,
+      },
+      line: {
+        height: Math.max(1, Math.round(burgerSize / 12)),
+        backgroundColor: color,
+        borderRadius: burgerSize / 24,
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<BurgerProps> = {
+  size: 'md',
+  transitionDuration: 300,
+  accessibilityLabel: 'Toggle navigation',
+  disabled: false,
+};
+
+export const Burger = forwardRef<any, BurgerProps>((props, ref) => {
+  const {
+    opened,
+    onPress,
+    color,
+    size = 'md',
+    transitionDuration,
+    accessibilityLabel,
+    style,
+    disabled,
+    ...others
+  } = useComponentDefaultProps('Burger', defaultProps, props);
+
+  const topLineRotation = useRef(new Animated.Value(0)).current;
+  const middleLineOpacity = useRef(new Animated.Value(1)).current;
+  const bottomLineRotation = useRef(new Animated.Value(0)).current;
+  const topLineTranslateY = useRef(new Animated.Value(0)).current;
+  const bottomLineTranslateY = useRef(new Animated.Value(0)).current;
+
+  const burgerSize = typeof size === 'number' ? size : (getSize({ size, sizes }) as unknown as number);
+  const lineHeight = Math.max(1, Math.round(burgerSize / 12));
+  const spacing = (burgerSize - lineHeight * 3) / 2;
+
+  const { styles, sx } = useStyles(
+    {
+      size,
+      color: color || '#000',
+      disabled: disabled || false,
+    },
+    { name: 'Burger' }
+  ) as any;
+
+  useEffect(() => {
+    const config = {
+      duration: transitionDuration,
+      useNativeDriver: true,
+    };
+
+    if (opened) {
+      Animated.parallel([
+        Animated.timing(topLineRotation, {
+          toValue: 1,
+          ...config,
+        }),
+        Animated.timing(middleLineOpacity, {
+          toValue: 0,
+          ...config,
+        }),
+        Animated.timing(bottomLineRotation, {
+          toValue: 1,
+          ...config,
+        }),
+        Animated.timing(topLineTranslateY, {
+          toValue: 1,
+          ...config,
+        }),
+        Animated.timing(bottomLineTranslateY, {
+          toValue: 1,
+          ...config,
+        }),
+      ]).start();
+    } else {
+      Animated.parallel([
+        Animated.timing(topLineRotation, {
+          toValue: 0,
+          ...config,
+        }),
+        Animated.timing(middleLineOpacity, {
+          toValue: 1,
+          ...config,
+        }),
+        Animated.timing(bottomLineRotation, {
+          toValue: 0,
+          ...config,
+        }),
+        Animated.timing(topLineTranslateY, {
+          toValue: 0,
+          ...config,
+        }),
+        Animated.timing(bottomLineTranslateY, {
+          toValue: 0,
+          ...config,
+        }),
+      ]).start();
+    }
+  }, [opened, transitionDuration, topLineRotation, middleLineOpacity, bottomLineRotation, topLineTranslateY, bottomLineTranslateY]);
+
+  const topLineStyle = {
+    transform: [
+      {
+        translateY: topLineTranslateY.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, spacing + lineHeight],
+        }),
+      },
+      {
+        rotate: topLineRotation.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['0deg', '45deg'],
+        }),
+      },
+    ],
+  };
+
+  const bottomLineStyle = {
+    transform: [
+      {
+        translateY: bottomLineTranslateY.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0, -(spacing + lineHeight)],
+        }),
+      },
+      {
+        rotate: bottomLineRotation.interpolate({
+          inputRange: [0, 1],
+          outputRange: ['0deg', '-45deg'],
+        }),
+      },
+    ],
+  };
+
+  return (
+    <TouchableOpacity
+      ref={ref}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.6}
+      accessible={true}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: opened }}
+      style={sx(styles.root, style)}
+      {...others}
+    >
+      <Animated.View style={styles.burger}>
+        <Animated.View style={[styles.line, topLineStyle]} />
+        <Animated.View style={[styles.line, { opacity: middleLineOpacity }]} />
+        <Animated.View style={[styles.line, bottomLineStyle]} />
+      </Animated.View>
+    </TouchableOpacity>
+  );
+});
+
+Burger.displayName = 'Burger';

package/src/components/Button/Button.styles.ts

@@ -20,6 +20,7 @@ export interface ButtonStylesParams {
   compact: boolean;
   withRightIcon: boolean;
   withLeftIcon: boolean;
+  gradient?: { from: string; to: string; deg?: number };
 }
 
 export const sizes = {
@@ -122,6 +123,34 @@ const getWidthStyles = (fullWidth: boolean) => ({
 //   };
 // }
 
+interface GetVariantStylesInput {
+  variant: string;
+  color: MantineColor;
+  theme: any;
+  gradient?: any;
+}
+
+function getVariantStyles({
+  variant,
+  theme,
+  color,
+  gradient,
+}: GetVariantStylesInput) {
+  if (!BUTTON_VARIANTS.includes(variant)) {
+    return {};
+  }
+
+  const colors = theme.fn.variant({ color, variant, gradient });
+
+  return {
+    backgroundColor: colors.background,
+    color: colors.color,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+  };
+}
+
 const useStyles = createStyles(
   (
     theme,
@@ -131,11 +160,11 @@ const useStyles = createStyles(
       compact,
       withLeftIcon,
       withRightIcon,
-      // color,
-      // gradient,
+      color,
+      gradient,
     }: ButtonStylesParams,
     {
-      // variant,
+      variant,
       size,
     }
   ) => {
@@ -145,6 +174,7 @@ const useStyles = createStyles(
         ...theme.fn.fontStyles(),
         ...theme.fn.focusStyles(),
         ...getWidthStyles(fullWidth),
+        ...getVariantStyles({ variant, theme, color, gradient }),
         'borderRadius': theme.fn.radius(radius),
         'fontWeight': 600,
         'position': 'relative',
@@ -152,20 +182,13 @@ const useStyles = createStyles(
         'fontSize': getSize({ size, sizes: theme.fontSizes }),
         'userSelect': 'none',
         'cursor': 'pointer',
-        // ...getVariantStyles({ variant, theme, color, gradient }),
 
         '&:active': theme.activeStyles,
 
         '&:disabled, &[data-disabled]': {
           'borderColor': 'transparent',
-          // 'backgroundColor':
-          //   theme.colorScheme === 'dark'
-          //     ? theme.colors.dark[4]
-          //     : theme.colors.gray[2],
-          // 'color':
-          //   theme.colorScheme === 'dark'
-          //     ? theme.colors.dark[6]
-          //     : theme.colors.gray[5],
+          'backgroundColor': theme.colors.gray?.[2] || '#e9ecef',
+          'color': theme.colors.gray?.[5] || '#adb5bd',
           'cursor': 'not-allowed',
           'backgroundImage': 'none',
           'pointerEvents': 'none',
@@ -181,10 +204,7 @@ const useStyles = createStyles(
           '&::before': {
             content: '""',
             ...theme.fn.cover(rem(-1)),
-            // backgroundColor:
-            //   theme.colorScheme === 'dark'
-            //     ? theme.fn.rgba(theme.colors.dark[7], 0.5)
-            //     : 'rgba(255, 255, 255, .5)',
+            backgroundColor: 'rgba(255, 255, 255, .5)',
             borderRadius: theme.fn.radius(radius),
             cursor: 'not-allowed',
           },

package/src/components/Button/index.tsx

@@ -104,7 +104,7 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
       ...others
     } = useComponentDefaultProps('Button', defaultProps, props);
 
-    const { styles, sx } = useStyles(
+    const { styles, sx} = useStyles(
       {
         radius,
         color,
@@ -173,3 +173,5 @@ export const _Button = forwardRef<HTMLButtonElement, ButtonProps>(
     );
   }
 ) as any;
+
+export const Button = _Button;

package/src/components/Card/index.tsx

@@ -0,0 +1,166 @@
+import React, { forwardRef, createContext, useContext } from 'react';
+import { BoxView } from '../BoxView';
+import { Paper } from '../Paper';
+import type { PaperProps } from '../Paper';
+import type { DefaultProps, SpacingValue } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+interface CardContextValue {
+  padding: SpacingValue;
+}
+
+const CardContext = createContext<CardContextValue | null>(null);
+
+const useCardContext = () => {
+  const context = useContext(CardContext);
+  return context;
+};
+
+export interface CardProps extends PaperProps {
+  /** Card padding */
+  padding?: SpacingValue;
+
+  /** Card children */
+  children?: React.ReactNode;
+}
+
+export interface CardSectionProps extends DefaultProps {
+  /** Section children */
+  children?: React.ReactNode;
+
+  /** Inherit padding from Card */
+  inheritPadding?: boolean;
+
+  /** Section padding override */
+  padding?: SpacingValue;
+
+  /** Add border to section */
+  withBorder?: boolean;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useCardStyles = createStyles((theme, { padding }: { padding: SpacingValue }) => {
+  const getPadding = () => {
+    if (padding === undefined) return theme.spacing.md;
+    if (typeof padding === 'number') return rem(padding);
+    return theme.spacing[padding] || theme.spacing.md;
+  };
+
+  return {
+    root: {
+      padding: getPadding(),
+      overflow: 'hidden',
+    },
+  };
+});
+
+const useCardSectionStyles = createStyles(
+  (
+    theme,
+    {
+      padding,
+      withBorder,
+      inheritPadding,
+      cardPadding,
+    }: {
+      padding?: SpacingValue;
+      withBorder: boolean;
+      inheritPadding: boolean;
+      cardPadding?: SpacingValue;
+    }
+  ) => {
+    const getPadding = () => {
+      if (inheritPadding && cardPadding !== undefined) {
+        if (typeof cardPadding === 'number') return rem(cardPadding);
+        return theme.spacing[cardPadding] || theme.spacing.md;
+      }
+      if (padding === undefined) return 0;
+      if (typeof padding === 'number') return rem(padding);
+      return theme.spacing[padding] || 0;
+    };
+
+    return {
+      root: {
+        padding: getPadding(),
+        ...(withBorder && {
+          borderTopWidth: 1,
+          borderBottomWidth: 1,
+          borderColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+        }),
+      },
+    };
+  }
+);
+
+const defaultCardProps: Partial<CardProps> = {
+  padding: 'md',
+  radius: 'sm',
+  withBorder: false,
+};
+
+const defaultCardSectionProps: Partial<CardSectionProps> = {
+  inheritPadding: false,
+  withBorder: false,
+};
+
+export const Card = forwardRef<any, CardProps>((props, ref) => {
+  const {
+    padding,
+    children,
+    style,
+    p,
+    ...otherProps
+  } = useComponentDefaultProps('Card', defaultCardProps, props);
+
+  const { styles, sx } = useCardStyles({ padding}, { name: 'Card' }) as any;
+
+  // Use p prop for Paper, padding for Card internal logic
+  const paperPadding = p !== undefined ? p : 0;
+
+  return (
+    <CardContext.Provider value={{ padding: padding! }}>
+      <Paper ref={ref} p={paperPadding} style={sx(styles.root, style)} {...otherProps}>
+        {children}
+      </Paper>
+    </CardContext.Provider>
+  );
+});
+
+export const CardSection = forwardRef<any, CardSectionProps>((props, ref) => {
+  const {
+    children,
+    inheritPadding,
+    padding,
+    withBorder,
+    style,
+    ...others
+  } = useComponentDefaultProps('CardSection', defaultCardSectionProps, props);
+
+  const cardContext = useCardContext();
+  const { styles, sx} = useCardSectionStyles(
+    {
+      padding,
+      withBorder,
+      inheritPadding,
+      cardPadding: cardContext?.padding,
+    },
+    { name: 'CardSection' }
+  ) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+Card.displayName = 'Card';
+CardSection.displayName = 'Card.Section';
+
+// Attach sub-components
+(Card as any).Section = CardSection;

package/src/components/Center/index.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react';
+import { BoxView } from '../BoxView';
+import type { ViewProps } from '../BoxView';
+import type { DefaultProps } from '../../theme/types';
+
+export interface CenterProps extends DefaultProps, Omit<ViewProps, 'style'> {
+  /** Content that should be centered */
+  children?: React.ReactNode;
+
+  /** Inline center (applies display: inline-flex) - not applicable in React Native */
+  inline?: boolean;
+}
+
+/**
+ * Center component centers its children horizontally and vertically
+ * Uses flexbox to achieve centering
+ */
+export const Center = forwardRef<any, CenterProps>((props, ref) => {
+  const { children, style, inline, ...others} = props;
+
+  return (
+    <BoxView
+      ref={ref}
+      style={[
+        {
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        style,
+      ]}
+      {...others}
+    >
+      {children}
+    </BoxView>
+  );
+});
+
+Center.displayName = 'Center';

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,168 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { Pressable, Animated } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor, MantineSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface CheckboxProps extends DefaultProps {
+  /** Checkbox label */
+  label?: React.ReactNode;
+
+  /** Checkbox size */
+  size?: MantineSize;
+
+  /** Checkbox color from theme */
+  color?: MantineColor;
+
+  /** Checked state */
+  checked?: boolean;
+
+  /** Called when checkbox state changes */
+  onChange?: (checked: boolean) => void;
+
+  /** Indeterminate state */
+  indeterminate?: boolean;
+
+  /** Disabled state */
+  disabled?: boolean;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Wrapper style */
+  wrapperStyle?: any;
+}
+
+const sizes = {
+  xs: rem(14),
+  sm: rem(18),
+  md: rem(22),
+  lg: rem(28),
+  xl: rem(36),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      color,
+      disabled,
+    }: {
+      size: MantineSize;
+      color: MantineColor;
+      disabled: boolean;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const checkboxSize = sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        opacity: disabled ? 0.5 : 1,
+      },
+      checkbox: {
+        width: checkboxSize as any,
+        height: checkboxSize as any,
+        borderRadius: theme.radius.sm,
+        borderWidth: 2,
+        borderColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+        backgroundColor: 'transparent',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+      checked: {
+        borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+      },
+      checkmark: {
+        color: theme.white,
+        fontSize: (checkboxSize as any as number) * 0.6,
+        fontWeight: 'bold',
+      },
+      label: {
+        fontSize: theme.fontSizes.sm as number,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        marginLeft: theme.spacing.sm,
+        flex: 1,
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<CheckboxProps> = {
+  size: 'md',
+  color: 'blue',
+  checked: false,
+  indeterminate: false,
+  disabled: false,
+};
+
+export const Checkbox = forwardRef<any, CheckboxProps>((props, ref) => {
+  const {
+    label,
+    size,
+    color,
+    checked,
+    onChange,
+    indeterminate,
+    disabled,
+    style,
+    wrapperStyle,
+    ...otherProps
+  } = useComponentDefaultProps('Checkbox', defaultProps, props);
+
+  const { styles, sx } = useStyles({ size, color, disabled}, { name: 'Checkbox' }) as any;
+
+  const scaleAnim = useRef(new Animated.Value(checked ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.spring(scaleAnim, {
+      toValue: checked || indeterminate ? 1 : 0,
+      useNativeDriver: true,
+      tension: 100,
+      friction: 7,
+    }).start();
+  }, [checked, indeterminate, scaleAnim]);
+
+  const handlePress = () => {
+    if (!disabled) {
+      onChange?.(!checked);
+    }
+  };
+
+  const checkboxContent = (
+    <BoxView style={sx(styles.checkbox, (checked || indeterminate) && styles.checked, style)}>
+      <Animated.View
+        style={{
+          transform: [{ scale: scaleAnim }],
+          opacity: scaleAnim,
+        }}
+      >
+        <Text style={styles.checkmark}>{indeterminate ? '−' : '✓'}</Text>
+      </Animated.View>
+    </BoxView>
+  );
+
+  return (
+    <Pressable
+      ref={ref}
+      onPress={handlePress}
+      disabled={disabled}
+      style={sx(styles.root, wrapperStyle)}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: checked || indeterminate }}
+      {...otherProps}
+    >
+      {checkboxContent}
+      {label && <Text style={styles.label}>{label}</Text>}
+    </Pressable>
+  );
+});
+
+Checkbox.displayName = 'Checkbox';