react-native-mantine 0.1.15 → 0.2.0

package/src/components/Accordion/index.tsx

@@ -0,0 +1,297 @@
+import React, { forwardRef, createContext, useContext, useState } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import { Collapse } from '../Collapse';
+import type { DefaultProps, MantineNumberSize, SpacingValue } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+interface AccordionContextValue {
+  value: string[];
+  onChange: (value: string) => void;
+  multiple: boolean;
+  variant: 'default' | 'contained' | 'separated';
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+const useAccordionContext = () => {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error('Accordion components must be used within Accordion');
+  }
+  return context;
+};
+
+export interface AccordionProps extends DefaultProps {
+  /** Accordion items */
+  children: React.ReactNode;
+
+  /** Allow multiple items to be opened at once */
+  multiple?: boolean;
+
+  /** Default opened items (uncontrolled) */
+  defaultValue?: string | string[];
+
+  /** Controlled opened items */
+  value?: string | string[];
+
+  /** Called when opened items change */
+  onChange?: (value: string | string[]) => void;
+
+  /** Accordion variant */
+  variant?: 'default' | 'contained' | 'separated';
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Spacing between items (separated variant only) */
+  spacing?: SpacingValue;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface AccordionItemProps extends DefaultProps {
+  /** Unique item value */
+  value: string;
+
+  /** Item label */
+  label?: React.ReactNode;
+
+  /** Item content */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface AccordionControlProps extends DefaultProps {
+  /** Control content */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface AccordionPanelProps extends DefaultProps {
+  /** Panel content */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useAccordionStyles = createStyles(
+  (
+    theme,
+    {
+      variant,
+      radius,
+      spacing,
+    }: {
+      variant: 'default' | 'contained' | 'separated';
+      radius: MantineNumberSize;
+      spacing: SpacingValue;
+    }
+  ) => {
+    const getSpacing = () => {
+      if (typeof spacing === 'number') return rem(spacing);
+      return theme.spacing[spacing] || theme.spacing.md;
+    };
+
+    return {
+      root: {
+        ...(variant === 'contained' && {
+          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.white,
+          borderRadius: theme.fn.radius(radius),
+          borderWidth: 1,
+          borderColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+        }),
+      },
+      item: {
+        ...(variant === 'separated' && {
+          backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark?.[6] : theme.white,
+          borderRadius: theme.fn.radius(radius),
+          borderWidth: 1,
+          borderColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+          marginBottom: getSpacing() as any,
+        }),
+        ...(variant === 'default' && {
+          borderBottomWidth: 1,
+          borderBottomColor:
+            theme.colorScheme === 'dark' ? theme.colors.dark?.[4] : theme.colors.gray?.[3],
+        }),
+      },
+    };
+  }
+);
+
+const useAccordionItemStyles = createStyles((theme) => ({
+  control: {
+    padding: theme.spacing.md,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  label: {
+    fontSize: theme.fontSizes.sm as number,
+    fontWeight: '500',
+    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+    flex: 1,
+  },
+  icon: {
+    marginLeft: theme.spacing.sm,
+  },
+  iconText: {
+    fontSize: 16,
+    color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
+  },
+  panel: {
+    padding: theme.spacing.md,
+    paddingTop: 0,
+  },
+}));
+
+const defaultAccordionProps: Partial<AccordionProps> = {
+  multiple: false,
+  variant: 'default',
+  radius: 'sm',
+  spacing: 'md',
+};
+
+export const Accordion = forwardRef<any, AccordionProps>((props, ref) => {
+  const {
+    children,
+    multiple,
+    defaultValue,
+    value: controlledValue,
+    onChange,
+    variant,
+    radius,
+    spacing,
+    style,
+    ...others
+  } = useComponentDefaultProps('Accordion', defaultAccordionProps, props);
+
+  const [uncontrolledValue, setUncontrolledValue] = useState<string[]>(() => {
+    if (defaultValue === undefined) return [];
+    return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+  });
+
+  const value =
+    controlledValue !== undefined
+      ? Array.isArray(controlledValue)
+        ? controlledValue
+        : [controlledValue]
+      : uncontrolledValue;
+
+  const handleChange = (itemValue: string) => {
+    const newValue = value.includes(itemValue)
+      ? value.filter((v) => v !== itemValue)
+      : multiple
+      ? [...value, itemValue]
+      : [itemValue];
+
+    if (controlledValue === undefined) {
+      setUncontrolledValue(newValue);
+    }
+
+    onChange?.(multiple ? newValue : newValue[0] || '');
+  };
+
+  const { styles, sx } = useAccordionStyles(
+    { variant: variant || 'default', radius: radius || 'sm', spacing: spacing || 'md' },
+    { name: 'Accordion' }
+  ) as any;
+
+  return (
+    <AccordionContext.Provider value={{ value, onChange: handleChange, multiple: multiple || false, variant: variant || 'default' }}>
+      <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+        {children}
+      </BoxView>
+    </AccordionContext.Provider>
+  );
+});
+
+export const AccordionItem = forwardRef<any, AccordionItemProps>((props, ref) => {
+  const { children, style, ...others } = props;
+  const { styles, sx } = useAccordionItemStyles({}, { name: 'AccordionItem' }) as any;
+
+  return (
+    <BoxView ref={ref} style={sx(styles.item, style)} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+export const AccordionControl = forwardRef<any, AccordionControlProps>((props, ref) => {
+  const { children, style, ...others } = props;
+  const { styles } = useAccordionItemStyles({}, { name: 'AccordionControl' }) as any;
+
+  return (
+    <BoxView ref={ref} style={[styles.control, style]} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+export const AccordionPanel = forwardRef<any, AccordionPanelProps>((props, ref) => {
+  const { children, style, ...others } = props;
+  const { styles } = useAccordionItemStyles({}, { name: 'AccordionPanel' }) as any;
+
+  return (
+    <BoxView ref={ref} style={[styles.panel, style]} {...others}>
+      {children}
+    </BoxView>
+  );
+});
+
+// Simplified Accordion.Item component that combines all parts
+interface SimpleAccordionItemProps extends AccordionItemProps {
+  label: React.ReactNode;
+}
+
+const SimpleAccordionItem = forwardRef<any, SimpleAccordionItemProps>((props, ref) => {
+  const { value, label, children, style, ...others} = props;
+  const context = useAccordionContext();
+  const { styles, sx} = useAccordionItemStyles({}, { name: 'AccordionItem' }) as any;
+
+  const isOpen = context.value.includes(value);
+
+  return (
+    <BoxView ref={ref} style={sx(styles.item, style)} {...others}>
+      <TouchableOpacity
+        style={styles.control}
+        onPress={() => context.onChange(value)}
+        activeOpacity={0.7}
+      >
+        {typeof label === 'string' ? <Text style={styles.label}>{label}</Text> : label}
+        <BoxView style={styles.icon}>
+          <Text style={styles.iconText}>{isOpen ? '−' : '+'}</Text>
+        </BoxView>
+      </TouchableOpacity>
+
+      <Collapse in={isOpen}>
+        <BoxView style={styles.panel}>{children}</BoxView>
+      </Collapse>
+    </BoxView>
+  );
+});
+
+Accordion.displayName = 'Accordion';
+AccordionItem.displayName = 'Accordion.Item';
+AccordionControl.displayName = 'Accordion.Control';
+AccordionPanel.displayName = 'Accordion.Panel';
+SimpleAccordionItem.displayName = 'Accordion.SimpleItem';
+
+// Attach sub-components
+(Accordion as any).Item = SimpleAccordionItem;
+(Accordion as any).Control = AccordionControl;
+(Accordion as any).Panel = AccordionPanel;
+
+export { SimpleAccordionItem };

package/src/components/ActionIcon/ActionIcon.tsx

@@ -1,4 +1,4 @@
-import { isValidElement } from 'react';
+import { forwardRef } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { createStyles } from '../../theme/create-styles';
 import { BoxView } from '../BoxView';
@@ -7,33 +7,35 @@ import { getSize } from '../../theme';
 export type ActionIconProps = {
   onPress?: (payload: any) => void;
   children?: React.ReactNode;
-  icon: React.ReactNode;
-  minWidth?: number;
+  color?: string;
+  variant?: 'filled' | 'light' | 'outline' | 'transparent' | 'default';
   style?: any;
-  size?: any;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
 };
 
-export const ActionIcon = ({
-  onPress = () => {},
-  children,
-  icon,
-  minWidth = 100,
-  style,
-  size = 'md',
-}: ActionIconProps): React.ReactElement => {
-  const { styles } = useStyles({ minWidth, size });
-  return (
-    <TouchableOpacity
-      onPress={typeof onPress === 'function' ? onPress : () => {}}
-      style={[style, styles.container]}
-    >
-      <>
-        <BoxView style={styles.containerButton}>{icon}</BoxView>
-        {isValidElement(children) ? children : <></>}
-      </>
-    </TouchableOpacity>
-  );
-};
+export const ActionIcon = forwardRef<any, ActionIconProps>(
+  (
+    {
+      onPress = () => {},
+      children,
+      variant = 'default',
+      style,
+      size = 'md',
+    },
+    ref
+  ) => {
+    const { styles } = useStyles({ size, variant });
+    return (
+      <TouchableOpacity
+        ref={ref}
+        onPress={typeof onPress === 'function' ? onPress : () => {}}
+        style={[styles.container, style]}
+      >
+        <BoxView style={styles.iconWrapper}>{children}</BoxView>
+      </TouchableOpacity>
+    );
+  }
+);
 
 export const sizes = {
   xs: 18,
@@ -43,22 +45,37 @@ export const sizes = {
   xl: 44,
 };
 
-const useStyles = createStyles((theme, { minWidth = 100, size = 40 }) => {
-  return {
-    container: {
-      alignItems: 'center',
-      minWidth: minWidth,
-    },
-    containerButton: {
-      backgroundColor:
-        theme.currentMode === 'dark'
-          ? theme.primaryBgColor
-          : theme.secondaryBgColor,
-      borderRadius: 50,
-      alignItems: 'center',
-      justifyContent: 'center',
-      height: getSize({ size: size, sizes }),
-      width: getSize({ size: size, sizes }),
-    },
-  };
-});
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      size = 'md',
+      variant = 'default',
+    }: {
+      size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+      variant?: string;
+    }
+  ) => {
+    const sizeValue = typeof size === 'number' ? size : getSize({ size, sizes });
+
+    return {
+      container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      iconWrapper: {
+        backgroundColor:
+          variant === 'transparent'
+            ? 'transparent'
+            : theme.currentMode === 'dark'
+              ? theme.primaryBgColor
+              : theme.secondaryBgColor,
+        borderRadius: sizeValue / 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: sizeValue,
+        width: sizeValue,
+      },
+    };
+  }
+);

package/src/components/Anchor/index.tsx

@@ -0,0 +1,139 @@
+import React, { forwardRef } from 'react';
+import { Text as RNText, Linking, type TextStyle } from 'react-native';
+import { Text } from '../Text';
+import type {
+  DefaultProps,
+  MantineColor,
+  MantineSize,
+  Variants,
+} from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+export interface AnchorProps extends DefaultProps {
+  /** Anchor text color from theme */
+  color?: MantineColor;
+
+  /** Anchor text size */
+  size?: MantineSize;
+
+  /** Anchor text weight */
+  weight?: TextStyle['fontWeight'];
+
+  /** Underline style */
+  underline?: boolean;
+
+  /** Variant of anchor */
+  variant?: Variants<'text' | 'link'>;
+
+  /** URL to open when anchor is pressed (opens in browser) */
+  href?: string;
+
+  /** Called when anchor is pressed */
+  onPress?: () => void;
+
+  /** Anchor content */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const sizes = {
+  xs: rem(12),
+  sm: rem(14),
+  md: rem(16),
+  lg: rem(18),
+  xl: rem(20),
+};
+
+const useStyles = createStyles(
+  (
+    theme,
+    {
+      color,
+      size,
+      weight,
+      underline,
+    }: {
+      color: MantineColor;
+      size: MantineSize;
+      weight: TextStyle['fontWeight'];
+      underline: boolean;
+    },
+    { variant }
+  ) => {
+    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const fontSize = sizes[size as keyof typeof sizes] || sizes.md;
+
+    const getVariantStyles = () => {
+      switch (variant) {
+        case 'link':
+          return {
+            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            textDecorationLine: underline ? 'underline' : 'none',
+          };
+        case 'text':
+          return {
+            color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] || theme.white : theme.black,
+            textDecorationLine: 'none',
+          };
+        default:
+          return {
+            color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+            textDecorationLine: underline ? 'underline' : 'none',
+          };
+      }
+    };
+
+    return {
+      root: {
+        fontSize,
+        fontWeight: weight || '400',
+        ...getVariantStyles(),
+      } as TextStyle,
+    };
+  }
+);
+
+const defaultProps: Partial<AnchorProps> = {
+  color: 'blue',
+  size: 'md',
+  weight: '400',
+  underline: true,
+  variant: 'link',
+};
+
+export const Anchor = forwardRef<RNText, AnchorProps>((props, ref) => {
+  const { color, size, weight, underline, variant, href, onPress, children, style, ...others} =
+    useComponentDefaultProps('Anchor', defaultProps, props);
+
+  const { styles, sx} = useStyles(
+    { color, size, weight, underline },
+    { name: 'Anchor', variant }
+  ) as any;
+
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else if (href) {
+      Linking.openURL(href).catch((err) =>
+        console.error('Failed to open URL:', err)
+      );
+    }
+  };
+
+  return (
+    <Text
+      ref={ref}
+      style={sx(styles.root, style)}
+      onPress={handlePress}
+      {...others}
+    >
+      {children}
+    </Text>
+  );
+});
+
+Anchor.displayName = 'Anchor';

package/src/components/AspectRatio/index.tsx

@@ -0,0 +1,68 @@
+import React, { forwardRef, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { BoxView } from '../BoxView';
+import type { DefaultProps } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface AspectRatioProps extends DefaultProps {
+  /** Aspect ratio, e.g., 16/9, 4/3, 1 */
+  ratio: number;
+
+  /** Children to render inside aspect ratio container */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles(() => ({
+  root: {
+    position: 'relative' as const,
+    width: '100%',
+  },
+  content: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: 'hidden' as const,
+  },
+}));
+
+const defaultProps: Partial<AspectRatioProps> = {
+  ratio: 1,
+};
+
+export const AspectRatio = forwardRef<any, AspectRatioProps>((props, ref) => {
+  const { ratio, children, style, ...others} = useComponentDefaultProps(
+    'AspectRatio',
+    defaultProps,
+    props
+  );
+
+  const [width, setWidth] = useState(0);
+
+  const { styles, sx} = useStyles({}, { name: 'AspectRatio' }) as any;
+
+  const handleLayout = (event: LayoutChangeEvent) => {
+    const { width: layoutWidth } = event.nativeEvent.layout;
+    setWidth(layoutWidth);
+  };
+
+  const height = width / ratio;
+
+  return (
+    <BoxView
+      ref={ref}
+      style={sx(styles.root, { height }, style)}
+      onLayout={handleLayout}
+      {...others}
+    >
+      <BoxView style={styles.content}>{children}</BoxView>
+    </BoxView>
+  );
+});
+
+AspectRatio.displayName = 'AspectRatio';