react-native-mantine 0.1.13 → 0.2.0

package/src/components/Avatar/index.tsx

@@ -0,0 +1,164 @@
+import React, { forwardRef, useState } from 'react';
+import { Image, type ImageProps } from 'react-native';
+import { Text } from '../Text';
+import { BoxView } from '../BoxView';
+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 AvatarProps extends DefaultProps {
+  /** Image url */
+  src?: string | null;
+
+  /** Image alt text */
+  alt?: string;
+
+  /** Avatar size */
+  size?: MantineSize | number;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Avatar color from theme */
+  color?: MantineColor;
+
+  /** Custom placeholder component */
+  children?: React.ReactNode;
+
+  /** Image props */
+  imageProps?: Partial<ImageProps>;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: rem(16),
+  sm: rem(26),
+  md: rem(38),
+  lg: rem(56),
+  xl: rem(84),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      size,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      size: MantineSize | number;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const sizeValue = typeof size === 'number' ? rem(size) : sizes[size as keyof typeof sizes] || sizes.md;
+
+    return {
+      root: {
+        width: sizeValue as any,
+        height: sizeValue as any,
+        borderRadius: theme.fn.radius(radius),
+        overflow: 'hidden',
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        justifyContent: 'center',
+        alignItems: 'center',
+      } as any,
+      image: {
+        width: '100%',
+        height: '100%',
+      },
+      placeholder: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: '100%',
+        height: '100%',
+      },
+      placeholderText: {
+        color: theme.white,
+        fontSize: typeof size === 'number' ? size / 2.5 : sizeValue / 2.5,
+        fontWeight: '700',
+        textTransform: 'uppercase' as const,
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<AvatarProps> = {
+  size: 'md',
+  radius: 'xl',
+  color: 'gray',
+};
+
+const getInitials = (name: string): string => {
+  const names = name.trim().split(' ');
+  if (names.length === 1) {
+    return names[0]?.substring(0, 2).toUpperCase() || '';
+  }
+  return ((names[0]?.[0] || '') + (names[names.length - 1]?.[0] || '')).toUpperCase();
+};
+
+export const Avatar = forwardRef<any, AvatarProps>((props, ref) => {
+  const {
+    src,
+    alt,
+    size,
+    radius,
+    color,
+    children,
+    imageProps,
+    style,
+    ...others
+  } = useComponentDefaultProps('Avatar', defaultProps, props);
+
+  const [imageError, setImageError] = useState(false);
+
+  const { styles, sx} = useStyles(
+    { color, radius, size },
+    { name: 'Avatar' }
+  ) as any;
+
+  const shouldShowImage = src && !imageError;
+
+  const renderPlaceholder = () => {
+    if (children) {
+      return <BoxView style={styles.placeholder}>{children}</BoxView>;
+    }
+
+    if (alt) {
+      const initials = getInitials(alt);
+      return (
+        <BoxView style={styles.placeholder}>
+          <Text style={styles.placeholderText}>{initials}</Text>
+        </BoxView>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {shouldShowImage ? (
+        <Image
+          source={{ uri: src || '' }}
+          style={styles.image as any}
+          onError={() => setImageError(true)}
+          {...imageProps}
+        />
+      ) : (
+        renderPlaceholder()
+      )}
+    </BoxView>
+  );
+});
+
+Avatar.displayName = 'Avatar';

package/src/components/BackgroundImage/index.tsx

@@ -0,0 +1,77 @@
+import React, { forwardRef } from 'react';
+import {
+  ImageBackground,
+  type ImageBackgroundProps,
+  type ImageSourcePropType,
+} from 'react-native';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface BackgroundImageProps extends DefaultProps, Omit<ImageBackgroundProps, 'source'> {
+  /** Background image source */
+  source: ImageSourcePropType;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Background image children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      radius,
+    }: {
+      radius: MantineNumberSize;
+    }
+  ) => ({
+    root: {
+      borderRadius: theme.fn.radius(radius),
+      overflow: 'hidden',
+    },
+    imageStyle: {
+      borderRadius: theme.fn.radius(radius),
+    },
+  })
+);
+
+const defaultProps: Partial<BackgroundImageProps> = {
+  radius: 0,
+  resizeMode: 'cover',
+};
+
+export const BackgroundImage = forwardRef<any, BackgroundImageProps>((props, ref) => {
+  const {
+    source,
+    radius,
+    children,
+    style,
+    imageStyle,
+    ...others
+  } = useComponentDefaultProps('BackgroundImage', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { radius },
+    { name: 'BackgroundImage' }
+  ) as any;
+
+  return (
+    <ImageBackground
+      ref={ref}
+      source={source}
+      style={sx(styles.root, style)}
+      imageStyle={[styles.imageStyle, imageStyle]}
+      {...others}
+    >
+      {children}
+    </ImageBackground>
+  );
+});
+
+BackgroundImage.displayName = 'BackgroundImage';

package/src/components/Badge/index.tsx

@@ -0,0 +1,193 @@
+import React, { forwardRef } from 'react';
+import { Text } from '../Text';
+import { BoxView } from '../BoxView';
+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 BadgeProps extends DefaultProps {
+  /** Badge color from theme */
+  color?: MantineColor;
+
+  /** Controls badge appearance */
+  variant?: Variants<'filled' | 'light' | 'outline' | 'dot'>;
+
+  /** Badge size */
+  size?: MantineSize;
+
+  /** Key of theme.radius or any valid value to set border-radius */
+  radius?: MantineNumberSize;
+
+  /** Sets badge width to 100% of parent element */
+  fullWidth?: boolean;
+
+  /** Section displayed on the left side of badge */
+  leftSection?: React.ReactNode;
+
+  /** Section displayed on the right side of badge */
+  rightSection?: React.ReactNode;
+
+  /** Badge content */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: { fontSize: rem(9), height: rem(16) as any, paddingHorizontal: rem(6) as any },
+  sm: { fontSize: rem(10), height: rem(18) as any, paddingHorizontal: rem(8) as any },
+  md: { fontSize: rem(11), height: rem(20) as any, paddingHorizontal: rem(10) as any },
+  lg: { fontSize: rem(13), height: rem(26) as any, paddingHorizontal: rem(12) as any },
+  xl: { fontSize: rem(16), height: rem(32) as any, paddingHorizontal: rem(16) as any },
+};
+
+const dotSizes = {
+  xs: rem(4),
+  sm: rem(4),
+  md: rem(6),
+  lg: rem(8),
+  xl: rem(10),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      fullWidth,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      fullWidth: boolean;
+    },
+    { variant, size }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const sizeStyles = sizes[size as keyof typeof sizes] || sizes.md;
+
+    const getVariantStyles = () => {
+      switch (variant) {
+        case 'filled':
+          return {
+            backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            color: theme.white,
+          };
+        case 'light':
+          return {
+            backgroundColor: colors?.[0] || colors?.[1] || (theme.colors.gray || [])[0],
+            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+          };
+        case 'outline':
+          return {
+            backgroundColor: 'transparent',
+            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            borderWidth: 1,
+            borderColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+          };
+        case 'dot':
+          return {
+            backgroundColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[5] : theme.white,
+            color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+            borderWidth: 1,
+            borderColor: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[3],
+          };
+        default:
+          return {
+            backgroundColor: colors?.[6] || theme.primaryBgColor,
+            color: theme.white,
+          };
+      }
+    };
+
+    return {
+      root: {
+        ...sizeStyles,
+        ...getVariantStyles(),
+        borderRadius: theme.fn.radius(radius),
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontWeight: '700',
+        textTransform: 'uppercase',
+        overflow: 'hidden',
+        ...(fullWidth && { width: '100%' }),
+      } as any,
+      inner: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+      },
+      leftSection: {
+        marginRight: theme.spacing.xs / 2,
+      },
+      rightSection: {
+        marginLeft: theme.spacing.xs / 2,
+      },
+      dot: {
+        width: (dotSizes[size as keyof typeof dotSizes] || dotSizes.md) as any,
+        height: (dotSizes[size as keyof typeof dotSizes] || dotSizes.md) as any,
+        borderRadius: (dotSizes[size as keyof typeof dotSizes] || dotSizes.md) as any,
+        backgroundColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        marginRight: theme.spacing.xs,
+      },
+      label: {
+        fontSize: sizeStyles.fontSize,
+        fontWeight: '700',
+        textTransform: 'uppercase',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<BadgeProps> = {
+  color: 'blue',
+  variant: 'light',
+  size: 'md',
+  radius: 'xl',
+  fullWidth: false,
+};
+
+export const Badge = forwardRef<any, BadgeProps>((props, ref) => {
+  const {
+    color,
+    variant,
+    size,
+    radius,
+    fullWidth,
+    leftSection,
+    rightSection,
+    children,
+    style,
+    ...others
+  } = useComponentDefaultProps('Badge', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { color, radius, fullWidth },
+    { name: 'Badge', variant, size }
+  ) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      <BoxView style={styles.inner}>
+        {variant === 'dot' && <BoxView style={styles.dot} />}
+        {leftSection && <BoxView style={styles.leftSection}>{leftSection}</BoxView>}
+        <Text style={styles.label}>{children}</Text>
+        {rightSection && <BoxView style={styles.rightSection}>{rightSection}</BoxView>}
+      </BoxView>
+    </BoxView>
+  );
+});
+
+Badge.displayName = 'Badge';

package/src/components/Blockquote/index.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef } from 'react';
+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 BlockquoteProps extends DefaultProps {
+  /** Blockquote color from theme */
+  color?: MantineColor;
+
+  /** Icon to display on the left side */
+  icon?: React.ReactNode;
+
+  /** Citation text */
+  cite?: React.ReactNode;
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Blockquote content */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+
+    return {
+      root: {
+        backgroundColor:
+          theme.colorScheme === 'dark' ? theme.colors.dark?.[6] || theme.colors.gray?.[8] : theme.colors.gray?.[0] || theme.colors.gray?.[1],
+        borderLeftWidth: 4,
+        borderLeftColor: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        borderRadius: theme.fn.radius(radius),
+        padding: theme.spacing.md,
+      },
+      inner: {
+        flexDirection: 'row',
+      },
+      icon: {
+        marginRight: theme.spacing.md,
+        marginTop: rem(2) as any as any,
+      },
+      body: {
+        flex: 1,
+      },
+      content: {
+        fontSize: rem(16),
+        lineHeight: rem(24),
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[0] || theme.white : theme.black,
+        marginBottom: 0,
+      },
+      cite: {
+        fontSize: rem(14),
+        marginTop: theme.spacing.xs,
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] || theme.colors.gray?.[5] : theme.colors.gray?.[6] || theme.colors.gray?.[7],
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<BlockquoteProps> = {
+  color: 'blue',
+  radius: 'sm',
+};
+
+export const Blockquote = forwardRef<any, BlockquoteProps>((props, ref) => {
+  const { color, icon, cite, radius, children, style} =
+    useComponentDefaultProps('Blockquote', defaultProps, props);
+
+  const { styles, sx, ...others} = useStyles({ color, radius}, { name: 'Blockquote' }) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      <BoxView style={styles.inner}>
+        {icon && <BoxView style={styles.icon}>{icon}</BoxView>}
+        <BoxView style={styles.body}>
+          <Text style={styles.content}>{children}</Text>
+          {cite && <Text style={styles.cite}>{cite}</Text>}
+        </BoxView>
+      </BoxView>
+    </BoxView>
+  );
+});
+
+Blockquote.displayName = 'Blockquote';

package/src/components/BoxView/index.tsx

@@ -5,23 +5,111 @@ export type CustomViewStyle = {
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only';
 };
 
+// Spacing value mapping
+const spacingMap: Record<string, number> = {
+  xs: 4,
+  sm: 8,
+  md: 12,
+  lg: 16,
+  xl: 20,
+};
+
+const getSpacingValue = (value: string | number | undefined): number | undefined => {
+  if (value === undefined) return undefined;
+  if (typeof value === 'number') return value;
+  return spacingMap[value] || 0;
+};
+
 export type ViewProps = DefaultView['props'] & {
   fullWidth?: boolean;
   fullHeight?: boolean;
   children?: React.ReactNode;
   style?: CustomViewStyle;
+  p?: string | number; // padding
+  px?: string | number; // padding horizontal
+  py?: string | number; // padding vertical
+  pt?: string | number; // padding top
+  pb?: string | number; // padding bottom
+  pl?: string | number; // padding left
+  pr?: string | number; // padding right
+  m?: string | number; // margin
+  mx?: string | number; // margin horizontal
+  my?: string | number; // margin vertical
+  mt?: string | number; // margin top
+  mb?: string | number; // margin bottom
+  ml?: string | number; // margin left
+  mr?: string | number; // margin right
 };
 
 export const BoxView = forwardRef((props: ViewProps, ref: any) => {
-  const { style, fullWidth, fullHeight, ...otherProps } = props;
+  const {
+    style,
+    fullWidth,
+    fullHeight,
+    p,
+    px,
+    py,
+    pt,
+    pb,
+    pl,
+    pr,
+    m,
+    mx,
+    my,
+    mt,
+    mb,
+    ml,
+    mr,
+    ...otherProps
+  } = props;
+
+  const spacingStyle: any = {};
+
+  // Padding
+  if (p !== undefined) {
+    const value = getSpacingValue(p);
+    spacingStyle.padding = value;
+  }
+  if (px !== undefined) {
+    const value = getSpacingValue(px);
+    spacingStyle.paddingHorizontal = value;
+  }
+  if (py !== undefined) {
+    const value = getSpacingValue(py);
+    spacingStyle.paddingVertical = value;
+  }
+  if (pt !== undefined) spacingStyle.paddingTop = getSpacingValue(pt);
+  if (pb !== undefined) spacingStyle.paddingBottom = getSpacingValue(pb);
+  if (pl !== undefined) spacingStyle.paddingLeft = getSpacingValue(pl);
+  if (pr !== undefined) spacingStyle.paddingRight = getSpacingValue(pr);
+
+  // Margin
+  if (m !== undefined) {
+    const value = getSpacingValue(m);
+    spacingStyle.margin = value;
+  }
+  if (mx !== undefined) {
+    const value = getSpacingValue(mx);
+    spacingStyle.marginHorizontal = value;
+  }
+  if (my !== undefined) {
+    const value = getSpacingValue(my);
+    spacingStyle.marginVertical = value;
+  }
+  if (mt !== undefined) spacingStyle.marginTop = getSpacingValue(mt);
+  if (mb !== undefined) spacingStyle.marginBottom = getSpacingValue(mb);
+  if (ml !== undefined) spacingStyle.marginLeft = getSpacingValue(ml);
+  if (mr !== undefined) spacingStyle.marginRight = getSpacingValue(mr);
+
   return (
     <DefaultView
       style={[
-        style,
         {
           ...(fullWidth ? { width: '100%' } : {}),
           ...(fullHeight ? { height: '100%' } : {}),
         },
+        spacingStyle,
+        style,
       ]}
       ref={ref}
       {...otherProps}

package/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef, Children } from 'react';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface BreadcrumbsProps extends DefaultProps {
+  /** Breadcrumb separator */
+  separator?: React.ReactNode;
+
+  /** Breadcrumb items */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+  },
+  separator: {
+    marginHorizontal: theme.spacing.xs,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] || theme.colors.gray?.[5] : theme.colors.gray?.[6] || theme.colors.gray?.[7],
+    fontSize: rem(14),
+  },
+}));
+
+const defaultProps: Partial<BreadcrumbsProps> = {
+  separator: '/',
+};
+
+export const Breadcrumbs = forwardRef<any, BreadcrumbsProps>((props, ref) => {
+  const { separator, children, style, ...others} = useComponentDefaultProps(
+    'Breadcrumbs',
+    defaultProps,
+    props
+  );
+
+  const { styles, sx} = useStyles({}, { name: 'Breadcrumbs' }) as any;
+
+  const items = Children.toArray(children);
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {items.map((item, index) => (
+        <React.Fragment key={index}>
+          {item}
+          {index !== items.length - 1 && (
+            <Text style={styles.separator}>
+              {typeof separator === 'string' ? separator : separator}
+            </Text>
+          )}
+        </React.Fragment>
+      ))}
+    </BoxView>
+  );
+});
+
+Breadcrumbs.displayName = 'Breadcrumbs';