react-native-mantine 0.1.15 → 0.2.0

package/src/components/Notification/index.tsx

@@ -0,0 +1,175 @@
+import React, { forwardRef } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, MantineColor, MantineNumberSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface NotificationProps extends DefaultProps {
+  /** Notification title */
+  title?: React.ReactNode;
+
+  /** Notification message */
+  message?: React.ReactNode;
+
+  /** Notification children (alternative to message) */
+  children?: React.ReactNode;
+
+  /** Notification color */
+  color?: MantineColor;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Icon to display on the left */
+  icon?: React.ReactNode;
+
+  /** If true, close button will be shown */
+  withCloseButton?: boolean;
+
+  /** Called when close button is clicked */
+  onClose?: () => void;
+
+  /** Loading state */
+  loading?: boolean;
+
+  /** If true, notification will not have border */
+  withBorder?: boolean;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      withBorder,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      withBorder: boolean;
+      withIcon: boolean;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const borderColor = colors?.[6] || colors?.[5] || theme.primaryBgColor;
+
+    return {
+      root: {
+        backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : theme.white,
+        borderRadius: theme.fn.radius(radius),
+        padding: theme.spacing.md,
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        ...(withBorder && {
+          borderWidth: 1,
+          borderColor:
+            theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[3],
+          borderLeftWidth: rem(4) as any,
+          borderLeftColor: borderColor,
+        }),
+        // Shadow for elevation
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.1,
+        shadowRadius: 3,
+        elevation: 3,
+      },
+      icon: {
+        marginRight: theme.spacing.md,
+        paddingTop: rem(2) as any,
+      },
+      body: {
+        flex: 1,
+      },
+      title: {
+        fontSize: theme.fontSizes.sm as number,
+        fontWeight: '600',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        marginBottom: theme.spacing.xs,
+      },
+      message: {
+        fontSize: theme.fontSizes.sm as number,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+        lineHeight: theme.fontSizes.sm * 1.5,
+      },
+      closeButton: {
+        width: rem(24) as any,
+        height: rem(24) as any,
+        borderRadius: rem(12) as any,
+        backgroundColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginLeft: theme.spacing.sm,
+      },
+      closeButtonText: {
+        fontSize: rem(16) as any,
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      },
+      loader: {
+        marginRight: theme.spacing.md,
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<NotificationProps> = {
+  color: 'blue',
+  radius: 'sm',
+  withCloseButton: true,
+  withBorder: true,
+  loading: false,
+};
+
+export const Notification = forwardRef<any, NotificationProps>((props, ref) => {
+  const {
+    title,
+    message,
+    color,
+    radius,
+    icon,
+    withCloseButton,
+    onClose,
+    loading,
+    withBorder,
+    style,
+    ...others
+  } = useComponentDefaultProps('Notification', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { color, radius, withBorder, withIcon: !!icon },
+    { name: 'Notification' }
+  ) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+
+      <BoxView style={styles.body}>
+        {title && (
+          <Text style={styles.title}>{typeof title === 'string' ? title : title}</Text>
+        )}
+        {message && (
+          <Text style={styles.message}>{typeof message === 'string' ? message : message}</Text>
+        )}
+      </BoxView>
+
+      {withCloseButton && onClose && (
+        <TouchableOpacity style={styles.closeButton} onPress={onClose} activeOpacity={0.7}>
+          <Text style={styles.closeButtonText}>×</Text>
+        </TouchableOpacity>
+      )}
+    </BoxView>
+  );
+});
+
+Notification.displayName = 'Notification';

package/src/components/NumberInput/index.tsx

@@ -0,0 +1,356 @@
+import React, { forwardRef, useState } from 'react';
+import { TextInput, TouchableOpacity, type TextInputProps } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type {
+  DefaultProps,
+
+  MantineNumberSize,
+  MantineSize,
+} from '../../theme/types';
+import { useComponentDefaultProps, useTheme } from '../../theme/theme-provider';
+import { createStyles, getSize } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+import { INPUT_SIZES } from '../Input';
+
+export interface NumberInputProps extends DefaultProps, Omit<TextInputProps, 'value' | 'onChangeText' | 'onChange' | 'keyboardType' | 'editable' | 'placeholderTextColor' | 'defaultValue'> {
+  /** Input label */
+  label?: React.ReactNode;
+
+  /** Input description */
+  description?: React.ReactNode;
+
+  /** Input error message */
+  error?: React.ReactNode;
+
+  /** Input size */
+  size?: MantineSize;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Input variant */
+  variant?: 'default' | 'filled' | 'unstyled';
+
+  /** If true, input will take full width */
+  fullWidth?: boolean;
+
+  /** Minimum value */
+  min?: number;
+
+  /** Maximum value */
+  max?: number;
+
+  /** Step for increment/decrement */
+  step?: number;
+
+  /** Number of decimal places */
+  precision?: number;
+
+  /** If true, controls will be hidden */
+  hideControls?: boolean;
+
+  /** Current value */
+  value?: number | '';
+
+  /** Default value */
+  defaultValue?: number | '';
+
+  /** Called when value changes */
+  onChange?: (value: number | '') => void;
+
+  /** If true, input will be disabled */
+  disabled?: boolean;
+
+  /** Placeholder */
+  placeholder?: string;
+
+  /** Icon on the left */
+  icon?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Wrapper style */
+  wrapperStyle?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      radius,
+      variant,
+      fullWidth,
+      error,
+      disabled,
+      withIcon,
+    }: {
+      size: MantineSize;
+      radius: MantineNumberSize;
+      variant: 'default' | 'filled' | 'unstyled';
+      fullWidth: boolean;
+      error: boolean;
+      disabled: boolean;
+      withIcon: boolean;
+    }
+  ) => {
+    const getVariantStyles = () => {
+      switch (variant) {
+        case 'filled':
+          return {
+            backgroundColor:
+              theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : (theme.colors.gray || [])[1],
+            borderWidth: 1,
+            borderColor: 'transparent',
+          };
+        case 'unstyled':
+          return {
+            backgroundColor: 'transparent',
+            borderWidth: 0,
+          };
+        default:
+          return {
+            backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[6] : theme.white,
+            borderWidth: 1,
+            borderColor:
+              theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+          };
+      }
+    };
+
+    return {
+      wrapper: {
+        width: fullWidth ? '100%' : undefined,
+      },
+      label: {
+        fontSize: theme.fontSizes.sm as number,
+        fontWeight: '500',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        marginBottom: theme.spacing.xs,
+      },
+      description: {
+        fontSize: theme.fontSizes.xs as number,
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[2] : (theme.colors.gray || [])[6],
+        marginTop: theme.spacing.xs,
+      },
+      error: {
+        fontSize: theme.fontSizes.xs as number,
+        color: (theme.colors.red || [])[6],
+        marginTop: theme.spacing.xs,
+      },
+      inputWrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: getSize({ size, sizes: INPUT_SIZES }) as any,
+        borderRadius: theme.fn.radius(radius),
+        ...getVariantStyles(),
+        ...(error && {
+          borderColor: (theme.colors.red || [])[6],
+        }),
+        ...(disabled && {
+          opacity: 0.6,
+        }),
+      },
+      icon: {
+        paddingLeft: theme.spacing.sm,
+        paddingRight: theme.spacing.xs,
+      },
+      input: {
+        flex: 1,
+        height: '100%',
+        fontSize: getSize({ size, sizes: theme.fontSizes }),
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        paddingHorizontal: theme.spacing.sm,
+        ...(withIcon && {
+          paddingLeft: 0,
+        }),
+      },
+      controls: {
+        flexDirection: 'row',
+        height: '100%',
+      },
+      control: {
+        width: rem(32) as any,
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderLeftWidth: 1,
+        borderLeftColor:
+          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[4],
+      },
+      controlText: {
+        fontSize: rem(18) as any,
+        fontWeight: '600',
+        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : (theme.colors.gray || [])[7],
+      },
+    };
+  }
+) as any;
+
+const defaultProps: Partial<NumberInputProps> = {
+  size: 'sm',
+  radius: 'sm',
+  variant: 'default',
+  fullWidth: false,
+  step: 1,
+  precision: 0,
+  hideControls: false,
+  disabled: false,
+};
+
+export const NumberInput = forwardRef<any, NumberInputProps>((props, ref) => {
+  const {
+    label,
+    description,
+    error,
+    size,
+    radius,
+    variant,
+    fullWidth,
+    min,
+    max,
+    step,
+    precision,
+    hideControls,
+    value: controlledValue,
+    defaultValue,
+    onChange,
+    disabled,
+    placeholder,
+    icon,
+    style,
+    wrapperStyle,
+    ...others
+  } = useComponentDefaultProps('NumberInput', defaultProps, props);
+
+  const theme = useTheme();
+  const [uncontrolledValue, setUncontrolledValue] = useState<number | ''>(defaultValue ?? '');
+
+  const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+
+  const { styles, sx } = useStyles(
+    {
+      size,
+      radius,
+      variant,
+      fullWidth,
+      error: !!error,
+      disabled,
+      withIcon: !!icon,
+    },
+    { name: 'NumberInput' }
+  ) as any;
+
+  const formatValue = (val: number): number => {
+    if (precision !== undefined && precision > 0) {
+      return parseFloat(val.toFixed(precision));
+    }
+    return Math.round(val);
+  };
+
+  const clampValue = (val: number): number => {
+    let clamped = val;
+    if (min !== undefined && clamped < min) clamped = min;
+    if (max !== undefined && clamped > max) clamped = max;
+    return formatValue(clamped);
+  };
+
+  const handleChange = (text: string) => {
+    if (text === '' || text === '-') {
+      if (controlledValue === undefined) {
+        setUncontrolledValue('');
+      }
+      onChange?.('');
+      return;
+    }
+
+    const parsed = parseFloat(text);
+    if (!isNaN(parsed)) {
+      const clamped = clampValue(parsed);
+      if (controlledValue === undefined) {
+        setUncontrolledValue(clamped);
+      }
+      onChange?.(clamped);
+    }
+  };
+
+  const handleIncrement = () => {
+    const currentValue = typeof value === 'number' ? value : 0;
+    const newValue = clampValue(currentValue + (step || 1));
+    if (controlledValue === undefined) {
+      setUncontrolledValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  const handleDecrement = () => {
+    const currentValue = typeof value === 'number' ? value : 0;
+    const newValue = clampValue(currentValue - (step || 1));
+    if (controlledValue === undefined) {
+      setUncontrolledValue(newValue);
+    }
+    onChange?.(newValue);
+  };
+
+  return (
+    <BoxView style={sx(styles.wrapper, wrapperStyle)}>
+      {label && (
+        <Text style={styles.label}>{typeof label === 'string' ? label : label}</Text>
+      )}
+
+      <BoxView style={sx(styles.inputWrapper, style)}>
+        {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+
+        <TextInput
+          ref={ref}
+          value={value === '' ? '' : String(value)}
+          onChangeText={handleChange}
+          placeholder={placeholder}
+          placeholderTextColor={
+            theme.colorScheme === 'dark' ? (theme.colors.dark || [])[3] : (theme.colors.gray || [])[5]
+          }
+          keyboardType="numeric"
+          editable={!disabled}
+          style={styles.input}
+          {...others}
+        />
+
+        {!hideControls && (
+          <BoxView style={styles.controls}>
+            <TouchableOpacity
+              style={styles.control}
+              onPress={handleDecrement}
+              disabled={disabled || (min !== undefined && typeof value === 'number' && value <= min)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.controlText}>−</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.control}
+              onPress={handleIncrement}
+              disabled={disabled || (max !== undefined && typeof value === 'number' && value >= max)}
+              activeOpacity={0.7}
+            >
+              <Text style={styles.controlText}>+</Text>
+            </TouchableOpacity>
+          </BoxView>
+        )}
+      </BoxView>
+
+      {description && (
+        <Text style={styles.description}>
+          {typeof description === 'string' ? description : description}
+        </Text>
+      )}
+
+      {error && (
+        <Text style={styles.error}>{typeof error === 'string' ? error : error}</Text>
+      )}
+    </BoxView>
+  );
+});
+
+NumberInput.displayName = 'NumberInput';

package/src/components/Overlay/index.tsx

@@ -0,0 +1,100 @@
+import React, { forwardRef } from 'react';
+import { TouchableWithoutFeedback, Animated, StyleSheet } from 'react-native';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface OverlayProps extends DefaultProps {
+  /** Controls overlay opacity */
+  opacity?: number;
+
+  /** Controls overlay color */
+  color?: string;
+
+  /** Controls overlay blur (not fully supported in React Native) */
+  blur?: number;
+
+  /** Controls overlay z-index */
+  zIndex?: number;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Children to render inside overlay */
+  children?: React.ReactNode;
+
+  /** Called when overlay is pressed */
+  onPress?: () => void;
+
+  /** Additional styles */
+  style?: any;
+
+  /** If true, overlay will not block touches to underlying content */
+  fixed?: boolean;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      opacity,
+      color,
+      zIndex,
+      radius,
+      fixed,
+    }: {
+      opacity: number;
+      color: string;
+      zIndex: number;
+      radius: MantineNumberSize;
+      fixed: boolean;
+    }
+  ) => ({
+    root: {
+      ...StyleSheet.absoluteFillObject,
+      backgroundColor: color,
+      opacity,
+      zIndex,
+      borderRadius: theme.fn.radius(radius),
+      ...(fixed && {
+        position: 'absolute' as const,
+      }),
+    },
+  })
+);
+
+const defaultProps: Partial<OverlayProps> = {
+  opacity: 0.6,
+  color: '#000',
+  zIndex: 1000,
+  radius: 0,
+  fixed: false,
+};
+
+export const Overlay = forwardRef<any, OverlayProps>((props, ref) => {
+  const { opacity, color, zIndex, radius, children, onPress, style, fixed, ...others} =
+    useComponentDefaultProps('Overlay', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { opacity, color, zIndex, radius, fixed },
+    { name: 'Overlay' }
+  ) as any;
+
+  const content = (
+    <Animated.View ref={ref} style={sx(styles.root, style)} {...others}>
+      {children}
+    </Animated.View>
+  );
+
+  if (onPress) {
+    return (
+      <TouchableWithoutFeedback onPress={onPress}>
+        {content}
+      </TouchableWithoutFeedback>
+    );
+  }
+
+  return content;
+});
+
+Overlay.displayName = 'Overlay';