react-native-mantine 0.1.15 → 0.2.0

package/src/components/Textarea/index.tsx

@@ -0,0 +1,61 @@
+import { forwardRef, useState } from 'react';
+import { TextInput as RNTextInput } from 'react-native';
+import { TextInput, type TextInputProps } from '../TextInput';
+
+export interface TextareaProps extends Omit<TextInputProps, 'multiline'> {
+  /** Minimum number of visible text lines */
+  minRows?: number;
+
+  /** Maximum number of visible text lines */
+  maxRows?: number;
+
+  /** Auto-grow textarea to fit content */
+  autosize?: boolean;
+}
+
+const defaultProps: Partial<TextareaProps> = {
+  minRows: 3,
+  autosize: false,
+};
+
+export const Textarea = forwardRef<RNTextInput, TextareaProps>((props, ref) => {
+  const { minRows, maxRows, autosize, style, ...others} = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+
+  const handleContentSizeChange = (event: any) => {
+    if (autosize) {
+      const height = event.nativeEvent.contentSize.height;
+      setContentHeight(height);
+    }
+  };
+
+  // Calculate height based on rows
+  const lineHeight = 20; // approximate line height
+  const paddingVertical = 12;
+  const minHeight = minRows ? minRows * lineHeight + paddingVertical * 2 : undefined;
+  const maxHeight = maxRows ? maxRows * lineHeight + paddingVertical * 2 : undefined;
+
+  const textareaStyle = {
+    height: autosize ? contentHeight : minHeight,
+    minHeight: minHeight,
+    maxHeight: maxHeight,
+    textAlignVertical: 'top' as const,
+  };
+
+  return (
+    <TextInput
+      ref={ref}
+      multiline
+      numberOfLines={minRows}
+      onContentSizeChange={handleContentSizeChange}
+      style={[textareaStyle, style]}
+      {...others}
+    />
+  );
+});
+
+Textarea.displayName = 'Textarea';

package/src/components/ThemeIcon/index.tsx

@@ -0,0 +1,167 @@
+import React, { forwardRef } from 'react';
+import { LinearGradient } from 'expo-linear-gradient';
+import { BoxView } from '../BoxView';
+import type {
+  DefaultProps,
+  MantineColor,
+  MantineNumberSize,
+  MantineSize,
+  Variants,
+} from '../../theme/types';
+import type { MantineGradient } from '../../theme/theme';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { getSize } from '../../theme';
+
+export interface ThemeIconProps extends DefaultProps {
+  /** Icon */
+  children: React.ReactNode;
+
+  /** Key of theme.colors */
+  color?: MantineColor;
+
+  /** Controls appearance */
+  variant?: Variants<'filled' | 'light' | 'gradient' | 'outline'>;
+
+  /** Controls gradient settings in gradient variant only */
+  gradient?: MantineGradient;
+
+  /** Predefined size or number to set width and height in px */
+  size?: MantineSize | number;
+
+  /** Key of theme.radius or number to set border-radius in px */
+  radius?: MantineNumberSize;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: 16,
+  sm: 20,
+  md: 26,
+  lg: 32,
+  xl: 40,
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      size,
+      radius,
+      variant,
+    }: {
+      color: MantineColor;
+      size: MantineSize | number;
+      radius: MantineNumberSize;
+      variant: 'filled' | 'light' | 'gradient' | 'outline';
+    }
+  ) => {
+    const iconSize = typeof size === 'number' ? size : getSize({ size, sizes }) as number;
+    const themeColor = color in theme.colors ? color : theme.primaryColor;
+    const shade = theme.primaryShade;
+
+    const getVariantStyles = () => {
+      switch (variant) {
+        case 'filled':
+          return {
+            backgroundColor: theme.colors[themeColor]?.[shade] || theme.colors[themeColor]?.[6],
+          };
+        case 'light':
+          return {
+            backgroundColor:
+              theme.colorScheme === 'dark'
+                ? theme.colors[themeColor]?.[9]
+                : theme.colors[themeColor]?.[0],
+          };
+        case 'outline':
+          return {
+            backgroundColor: 'transparent' as const,
+            borderWidth: 1,
+            borderColor: theme.colors[themeColor]?.[shade] || theme.colors[themeColor]?.[6],
+          };
+        case 'gradient':
+          return {
+            backgroundColor: 'transparent' as const,
+          };
+        default:
+          return {
+            backgroundColor: theme.colors[themeColor]?.[shade] || theme.colors[themeColor]?.[6],
+          };
+      }
+    };
+
+    return {
+      root: {
+        width: iconSize,
+        height: iconSize,
+        borderRadius: theme.fn.radius(radius),
+        justifyContent: 'center' as const,
+        alignItems: 'center' as const,
+        overflow: 'hidden' as const,
+        ...getVariantStyles(),
+      },
+      gradient: {
+        width: '100%' as const,
+        height: '100%' as const,
+        justifyContent: 'center' as const,
+        alignItems: 'center' as const,
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<ThemeIconProps> = {
+  variant: 'filled',
+  size: 'md',
+  radius: 'sm',
+  color: 'blue',
+  gradient: { from: 'blue', to: 'cyan', deg: 45 },
+};
+
+export const ThemeIcon = forwardRef<any, ThemeIconProps>((props, ref) => {
+  const { color, variant, gradient, size, radius, children, style, ...others} =
+    useComponentDefaultProps('ThemeIcon', defaultProps, props);
+
+  const { styles, sx, theme} = useStyles(
+    { color, size, radius, variant },
+    { name: 'ThemeIcon' }
+  ) as any;
+
+  const getGradientColors = (): [string, string] => {
+    const fromColor =
+      gradient?.from && gradient.from in theme.colors
+        ? theme.colors[gradient.from][theme.primaryShade]
+        : gradient?.from || theme.colors.blue?.[6] || '#228be6';
+    const toColor =
+      gradient?.to && gradient.to in theme.colors
+        ? theme.colors[gradient.to][theme.primaryShade]
+        : gradient?.to || theme.colors.cyan?.[6] || '#22b8cf';
+    return [fromColor, toColor];
+  };
+
+  if (variant === 'gradient') {
+    return (
+      <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+        <LinearGradient
+          colors={getGradientColors()}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 1, y: 1 }}
+          style={styles.gradient}
+        >
+          {children}
+        </LinearGradient>
+      </BoxView>
+    );
+  }
+
+  return (
+    <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+ThemeIcon.displayName = 'ThemeIcon';

package/src/components/Timeline/index.tsx

@@ -0,0 +1,331 @@
+import React, { forwardRef, createContext, useContext } 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';
+
+interface TimelineContextValue {
+  color: MantineColor;
+  radius: MantineNumberSize;
+  lineWidth: number;
+  bulletSize: number;
+  align: 'left' | 'right';
+  reverseActive: boolean;
+}
+
+const TimelineContext = createContext<TimelineContextValue | null>(null);
+
+const useTimelineContext = () => {
+  const context = useContext(TimelineContext);
+  if (!context) {
+    throw new Error('Timeline components must be used within Timeline');
+  }
+  return context;
+};
+
+export interface TimelineProps extends DefaultProps {
+  /** Timeline color */
+  color?: MantineColor;
+
+  /** Timeline alignment */
+  align?: 'left' | 'right';
+
+  /** Line width */
+  lineWidth?: number;
+
+  /** Bullet size */
+  bulletSize?: number;
+
+  /** Bullet border radius */
+  radius?: MantineNumberSize;
+
+  /** Timeline items */
+  children: React.ReactNode;
+
+  /** Highlight active items in reverse order */
+  reverseActive?: boolean;
+
+  /** Active item index */
+  active?: number;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface TimelineItemProps extends DefaultProps {
+  /** Item title */
+  title?: React.ReactNode;
+
+  /** Item children (content) */
+  children?: React.ReactNode;
+
+  /** Item bullet icon */
+  bullet?: React.ReactNode;
+
+  /** Item bullet size override */
+  bulletSize?: number;
+
+  /** Item color override */
+  color?: MantineColor;
+
+  /** Line variant */
+  lineVariant?: 'solid' | 'dashed' | 'dotted';
+
+  /** Additional styles */
+  style?: any;
+
+  /** Internal prop for item index */
+  __index?: number;
+
+  /** Internal prop for last item */
+  __isLast?: boolean;
+}
+
+const useTimelineStyles = createStyles(
+  (_theme, { align }: { align: 'left' | 'right' }) => ({
+    root: {
+      flexDirection: 'column',
+      alignItems: align === 'left' ? 'flex-start' : 'flex-end',
+    },
+  })
+);
+
+const useTimelineItemStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      radius,
+      lineWidth,
+      bulletSize,
+      align,
+      isActive,
+      lineVariant,
+      isLast,
+    }: {
+      color: MantineColor;
+      radius: MantineNumberSize;
+      lineWidth: number;
+      bulletSize: number;
+      align: 'left' | 'right';
+      isActive: boolean;
+      lineVariant: 'solid' | 'dashed' | 'dotted';
+      isLast: boolean;
+    }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+
+    const getLineStyle = () => {
+      const baseStyle = {
+        borderLeftWidth: lineWidth as any,
+        borderLeftColor: isActive
+          ? colors?.[6] || colors?.[5] || theme.primaryBgColor
+          : theme.colorScheme === 'dark'
+          ? theme.colors.dark?.[4]
+          : theme.colors.gray?.[3],
+      };
+
+      if (lineVariant === 'dashed') {
+        return { ...baseStyle, borderStyle: 'dashed' as const };
+      }
+      if (lineVariant === 'dotted') {
+        return { ...baseStyle, borderStyle: 'dotted' as const };
+      }
+      return baseStyle;
+    };
+
+    return {
+      item: {
+        flexDirection: align === 'left' ? 'row' : 'row-reverse',
+        width: '100%',
+      },
+      itemBody: {
+        flex: 1,
+        paddingBottom: isLast ? 0 : theme.spacing.md,
+        ...(align === 'left' && { paddingLeft: theme.spacing.md }),
+        ...(align === 'right' && { paddingRight: theme.spacing.md }),
+      },
+      bulletWrapper: {
+        position: 'relative',
+        width: bulletSize as any,
+        alignItems: 'center',
+      },
+      bullet: {
+        width: bulletSize as any,
+        height: bulletSize as any,
+        borderRadius: theme.fn.radius(radius),
+        backgroundColor: isActive
+          ? colors?.[6] || colors?.[5] || theme.primaryBgColor
+          : theme.colorScheme === 'dark'
+          ? theme.colors.dark?.[5]
+          : theme.colors.gray?.[2],
+        borderWidth: rem(2) as any,
+        borderColor: isActive
+          ? colors?.[6] || colors?.[5] || theme.primaryBgColor
+          : theme.colorScheme === 'dark'
+          ? theme.colors.dark?.[4]
+          : theme.colors.gray?.[3],
+        justifyContent: 'center',
+        alignItems: 'center',
+        zIndex: 1,
+      },
+      line: {
+        position: 'absolute',
+        top: bulletSize as any,
+        bottom: 0,
+        left: (bulletSize / 2 - lineWidth / 2) as any,
+        ...getLineStyle(),
+      },
+      title: {
+        fontSize: theme.fontSizes.sm as number,
+        fontWeight: '600',
+        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+        marginBottom: rem(4) as any,
+      },
+      content: {
+        fontSize: theme.fontSizes.sm as number,
+        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[7],
+      },
+    };
+  }
+);
+
+const defaultProps: Partial<TimelineProps> = {
+  color: 'blue',
+  align: 'left',
+  lineWidth: 2,
+  bulletSize: 20,
+  radius: 'xl',
+  reverseActive: false,
+  active: -1,
+};
+
+const defaultItemProps: Partial<TimelineItemProps> = {
+  lineVariant: 'solid',
+};
+
+const TimelineRoot = forwardRef<any, TimelineProps>((props, ref) => {
+  const {
+    color,
+    align,
+    lineWidth,
+    bulletSize,
+    radius,
+    reverseActive,
+    active,
+    children,
+    style,
+    ...others
+  } = useComponentDefaultProps('Timeline', defaultProps, props);
+
+  const { styles, sx } = useTimelineStyles({ align }, { name: 'Timeline' }) as any;
+
+  const childrenArray = React.Children.toArray(children);
+  const itemsCount = childrenArray.length;
+
+  return (
+    <TimelineContext.Provider
+      value={{
+        color: color!,
+        radius: radius || 'sm',
+        lineWidth: lineWidth!,
+        bulletSize: bulletSize!,
+        align: align!,
+        reverseActive: reverseActive!,
+      }}
+    >
+      <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+        {childrenArray.map((child, index) => {
+          if (!React.isValidElement(child)) return child;
+
+          const isActive = reverseActive
+            ? index >= itemsCount - (active! + 1)
+            : index <= active!;
+
+          return React.cloneElement(child as React.ReactElement, {
+            key: index,
+            __index: index,
+            __isLast: index === itemsCount - 1,
+            __isActive: isActive,
+          });
+        })}
+      </BoxView>
+    </TimelineContext.Provider>
+  );
+});
+
+export const TimelineItem = forwardRef<
+  any,
+  TimelineItemProps & { __isActive?: boolean }
+>((props, ref) => {
+  const {
+    title,
+    children,
+    bullet,
+    bulletSize: itemBulletSize,
+    color: itemColor,
+    lineVariant,
+    style,
+    __index,
+    __isLast,
+    __isActive,
+    ...others
+  } = { ...defaultItemProps, ...props };
+
+  const context = useTimelineContext();
+
+  const bulletSize = itemBulletSize || context.bulletSize;
+  const color = itemColor || context.color;
+  const isActive = __isActive ?? false;
+  const isLast = __isLast ?? false;
+
+  const { styles, sx} = useTimelineItemStyles(
+    {
+      color,
+      radius: context.radius,
+      lineWidth: context.lineWidth,
+      bulletSize,
+      align: context.align,
+      isActive,
+      lineVariant: lineVariant!,
+      isLast,
+    },
+    { name: 'TimelineItem' }
+  ) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.item, style)} {...others}>
+      <BoxView style={styles.bulletWrapper}>
+        <BoxView style={styles.bullet}>{bullet}</BoxView>
+        {!isLast && <BoxView style={styles.line} />}
+      </BoxView>
+
+      <BoxView style={styles.itemBody}>
+        {title && (
+          <Text style={styles.title}>
+            {typeof title === 'string' ? title : title}
+          </Text>
+        )}
+        {children && (
+          <Text style={styles.content}>
+            {typeof children === 'string' ? children : children}
+          </Text>
+        )}
+      </BoxView>
+    </BoxView>
+  );
+});
+
+TimelineRoot.displayName = 'Timeline';
+TimelineItem.displayName = 'Timeline.Item';
+
+// Create a properly typed Timeline component with Item subcomponent
+type TimelineComponent = typeof TimelineRoot & {
+  Item: typeof TimelineItem;
+};
+
+// Attach sub-components and export with proper typing
+export const Timeline = TimelineRoot as TimelineComponent;
+Timeline.Item = TimelineItem;

package/src/components/Title/index.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
+import { useTheme } from '../../theme/theme-provider';
+
+export interface TitleProps extends Omit<TextProps, 'size'> {
+  /** Heading order (h1-h6) */
+  order?: 1 | 2 | 3 | 4 | 5 | 6;
+
+  /** Text content */
+  children?: React.ReactNode;
+}
+
+/**
+ * Title component renders heading text with appropriate styling
+ * Maps order prop to h1-h6 heading styles from theme
+ */
+export const Title = forwardRef<any, TitleProps>((props, ref) => {
+  const { order = 1, children, style, ...others} = props;
+  const theme = useTheme();
+
+  // Get heading styles from theme
+  const headingKey = `h${order}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  const headingStyles = theme.headings.sizes[headingKey];
+
+  // Determine fontWeight - use specific value or default to 700
+  const fontWeight =
+    headingStyles.fontWeight ??
+    theme.headings.fontWeight ??
+    700;
+
+  return (
+    <Text
+      ref={ref}
+      style={[
+        {
+          fontSize: headingStyles.fontSize,
+          lineHeight: headingStyles.lineHeight
+            ? headingStyles.fontSize * headingStyles.lineHeight
+            : headingStyles.fontSize * 1.3,
+          fontWeight: fontWeight as any,
+          fontFamily: theme.headings.fontFamily || theme.fontFamilyBold,
+        },
+        style,
+      ]}
+      {...others}
+    >
+      {children}
+    </Text>
+  );
+});
+
+Title.displayName = 'Title';