react-native-mantine 0.1.15 → 0.3.0

package/src/components/List/index.tsx

@@ -0,0 +1,294 @@
+import React, { forwardRef, createContext, useContext } from 'react';
+import { BoxView } from '../BoxView';
+import { Text } from '../Text';
+import type { DefaultProps, SpacingValue } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+import { rem } from '../../theme/utils/rem';
+
+interface ListContextValue {
+  type: 'ordered' | 'unordered';
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  spacing: SpacingValue;
+  center: boolean;
+  icon: React.ReactNode;
+  withPadding: boolean;
+  listStyleType: string;
+  startIndex: number;
+}
+
+const ListContext = createContext<ListContextValue | null>(null);
+
+const useListContext = () => {
+  const context = useContext(ListContext);
+  if (!context) {
+    throw new Error('List components must be used within List');
+  }
+  return context;
+};
+
+export interface ListProps extends DefaultProps {
+  /** List type */
+  type?: 'ordered' | 'unordered';
+
+  /** List size */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Spacing between items */
+  spacing?: SpacingValue;
+
+  /** Center items with icon */
+  center?: boolean;
+
+  /** Custom icon for unordered list */
+  icon?: React.ReactNode;
+
+  /** Add padding-left to offset list from main content */
+  withPadding?: boolean;
+
+  /** List style type for ordered lists */
+  listStyleType?: 'decimal' | 'lower-alpha' | 'upper-alpha' | 'lower-roman' | 'upper-roman';
+
+  /** Start index for ordered list */
+  startIndex?: number;
+
+  /** List children */
+  children?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+}
+
+export interface ListItemProps extends DefaultProps {
+  /** Item children */
+  children?: React.ReactNode;
+
+  /** Custom icon for this item */
+  icon?: React.ReactNode;
+
+  /** Additional styles */
+  style?: any;
+
+  /** Internal item index */
+  __index?: number;
+}
+
+const fontSizes = {
+  xs: rem(10),
+  sm: rem(12),
+  md: rem(14),
+  lg: rem(16),
+  xl: rem(18),
+};
+
+const useListStyles = createStyles(
+  (
+    theme,
+    {
+      withPadding,
+      spacing,
+    }: {
+      withPadding: boolean;
+      spacing: SpacingValue;
+    }
+  ) => {
+    const getSpacing = () => {
+      if (typeof spacing === 'number') return rem(spacing);
+      return theme.spacing[spacing] || theme.spacing.md;
+    };
+
+    return {
+      root: {
+        ...(withPadding && {
+          paddingLeft: theme.spacing.md,
+        }),
+      },
+      item: {
+        marginBottom: getSpacing(),
+      },
+    };
+  }
+);
+
+const useListItemStyles = createStyles(
+  (
+    theme,
+    {
+      size,
+      center,
+    }: {
+      size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+      center: boolean;
+    }
+  ) => ({
+    item: {
+      flexDirection: 'row',
+      alignItems: center ? 'center' : 'flex-start',
+    },
+    icon: {
+      marginRight: theme.spacing.xs,
+      marginTop: (center ? 0 : rem(2)) as any,
+    },
+    iconText: {
+      fontSize: fontSizes[size] as any,
+      color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
+      fontWeight: '600',
+      minWidth: rem(20) as any,
+    },
+    content: {
+      flex: 1,
+    },
+    contentText: {
+      fontSize: fontSizes[size] as any,
+      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+      lineHeight: (fontSizes[size] as any) * 1.5,
+    },
+  })
+);
+
+const defaultProps: Partial<ListProps> = {
+  type: 'unordered',
+  size: 'md',
+  spacing: 'xs',
+  center: false,
+  withPadding: false,
+  listStyleType: 'decimal',
+  startIndex: 1,
+};
+
+const defaultItemProps: Partial<ListItemProps> = {};
+
+const getListMarker = (
+  type: 'ordered' | 'unordered',
+  index: number,
+  listStyleType: string,
+  startIndex: number
+): string => {
+  if (type === 'unordered') {
+    return '•';
+  }
+
+  const actualIndex = index + startIndex;
+
+  switch (listStyleType) {
+    case 'decimal':
+      return `${actualIndex}.`;
+    case 'lower-alpha':
+      return `${String.fromCharCode(96 + actualIndex)}.`;
+    case 'upper-alpha':
+      return `${String.fromCharCode(64 + actualIndex)}.`;
+    case 'lower-roman': {
+      const romanNumerals = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix', 'x'];
+      return `${romanNumerals[actualIndex - 1] || actualIndex}.`;
+    }
+    case 'upper-roman': {
+      const romanNumerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX', 'X'];
+      return `${romanNumerals[actualIndex - 1] || actualIndex}.`;
+    }
+    default:
+      return `${actualIndex}.`;
+  }
+};
+
+const ListRoot = forwardRef<any, ListProps>((props, ref) => {
+  const {
+    type,
+    size,
+    spacing,
+    center,
+    icon,
+    withPadding,
+    listStyleType,
+    startIndex,
+    children,
+    style,
+    ...others
+  } = useComponentDefaultProps('List', defaultProps, props);
+
+  const { styles, sx} = useListStyles(
+    { withPadding, spacing },
+    { name: 'List' }
+  ) as any;
+
+  const childrenArray = React.Children.toArray(children);
+
+  return (
+    <ListContext.Provider
+      value={{
+        type: type || 'unordered',
+        size: size || 'md',
+        spacing: spacing || 'md',
+        center: center || false,
+        icon,
+        withPadding: withPadding || false,
+        listStyleType: listStyleType || 'disc',
+        startIndex: startIndex || 1,
+      }}
+    >
+      <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+        {childrenArray.map((child, index) => {
+          if (!React.isValidElement(child)) return child;
+          return React.cloneElement(child as React.ReactElement, {
+            key: index,
+            __index: index,
+          });
+        })}
+      </BoxView>
+    </ListContext.Provider>
+  );
+});
+
+export const ListItem = forwardRef<any, ListItemProps>((props, ref) => {
+  const { children, icon: itemIcon, style, __index, ...others} = {
+    ...defaultItemProps,
+    ...props,
+  };
+
+  const context = useListContext();
+
+  const { styles, sx} = useListItemStyles(
+    { size: context.size, center: context.center },
+    { name: 'ListItem' }
+  ) as any;
+
+  const index = __index ?? 0;
+
+  const renderIcon = () => {
+    if (itemIcon) return itemIcon;
+    if (context.icon) return context.icon;
+
+    const marker = getListMarker(
+      context.type,
+      index,
+      context.listStyleType,
+      context.startIndex
+    );
+
+    return <Text style={styles.iconText}>{marker}</Text>;
+  };
+
+  return (
+    <BoxView ref={ref} style={sx(styles.item, style)} {...others}>
+      <BoxView style={styles.icon}>{renderIcon()}</BoxView>
+      <BoxView style={styles.content}>
+        {typeof children === 'string' ? (
+          <Text style={styles.contentText}>{children}</Text>
+        ) : (
+          children
+        )}
+      </BoxView>
+    </BoxView>
+  );
+});
+
+ListRoot.displayName = 'List';
+ListItem.displayName = 'List.Item';
+
+// Create a properly typed List component with Item subcomponent
+type ListComponent = typeof ListRoot & {
+  Item: typeof ListItem;
+};
+
+// Attach sub-components and export with proper typing
+export const List = ListRoot as ListComponent;
+List.Item = ListItem;

package/src/components/Loader/Loader.tsx

@@ -1,15 +1,16 @@
 import { ActivityIndicator } from 'react-native';
 import type { MantineNumberSize, MantineColor } from '../../theme/types';
 
-import { useComponentDefaultProps } from '../../theme/theme-provider';
-
-// const sizes = {
-//   xs: 18,
-//   sm: 22,
-//   md: 36,
-//   lg: 44,
-//   xl: 58,
-// };
+import { useComponentDefaultProps, useTheme } from '../../theme/theme-provider';
+import { getSize } from '../../theme/get-size';
+
+const sizes = {
+  xs: 18,
+  sm: 22,
+  md: 36,
+  lg: 44,
+  xl: 58,
+};
 
 export interface LoaderProps {
   /** Defines width of loader */
@@ -27,21 +28,30 @@ const defaultProps: Partial<LoaderProps> = {
 };
 
 export function Loader(props: LoaderProps) {
+  const theme = useTheme();
   const { size, color, variant, ...others } = useComponentDefaultProps(
     'Loader',
     defaultProps,
     props
   );
+
+  const loaderSize = getSize({ size: size || 'md', sizes }) as number;
+  const loaderColor = color
+    ? theme.fn.variant({
+        variant: 'filled',
+        primaryFallback: false,
+        color: color,
+      }).background
+    : theme.fn.variant({
+        variant: 'filled',
+        primaryFallback: false,
+        color: theme.primaryColor,
+      }).background;
+
   return (
     <ActivityIndicator
-      // size={getSize({ size, sizes })}
-      // color={
-      //   theme.fn.variant({
-      //     variant: 'filled',
-      //     primaryFallback: false,
-      //     color: color || theme.primaryColor,
-      //   }).background
-      // }
+      size={loaderSize}
+      color={loaderColor}
       {...others}
     />
   );

package/src/components/LoadingOverlay/index.tsx

@@ -0,0 +1,103 @@
+import { forwardRef } from 'react';
+import { Overlay } from '../Overlay';
+import { Loader } from '../Loader';
+import { BoxView } from '../BoxView';
+import type { DefaultProps, MantineNumberSize } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+import { createStyles } from '../../theme';
+
+export interface LoadingOverlayProps extends DefaultProps {
+  /** Controls overlay visibility */
+  visible: boolean;
+
+  /** Overlay opacity */
+  overlayOpacity?: number;
+
+  /** Overlay color */
+  overlayColor?: string;
+
+  /** Overlay blur (not fully supported in React Native) */
+  overlayBlur?: number;
+
+  /** Loader size */
+  loaderSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+  /** Border radius */
+  radius?: MantineNumberSize;
+
+  /** Z-index */
+  zIndex?: number;
+
+  /** Transition duration in ms */
+  transitionDuration?: number;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const useStyles = createStyles((_theme) => ({
+  root: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  loader: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: [{ translateX: -20 }, { translateY: -20 }],
+  },
+}));
+
+const defaultProps: Partial<LoadingOverlayProps> = {
+  visible: false,
+  overlayOpacity: 0.75,
+  overlayColor: '#fff',
+  overlayBlur: 0,
+  loaderSize: 'md',
+  radius: 0,
+  zIndex: 1000,
+  transitionDuration: 200,
+};
+
+export const LoadingOverlay = forwardRef<any, LoadingOverlayProps>(
+  (props, ref) => {
+    const {
+      visible,
+      overlayOpacity,
+      overlayColor,
+      overlayBlur,
+      loaderSize,
+      radius,
+      zIndex,
+      transitionDuration,
+      style,
+      ...others
+    } = useComponentDefaultProps('LoadingOverlay', defaultProps, props);
+
+    const { styles, sx} = useStyles({}, { name: 'LoadingOverlay' }) as any;
+
+    if (!visible) {
+      return null;
+    }
+
+    return (
+      <BoxView ref={ref} style={sx(styles.root, style)} {...others}>
+        <Overlay
+          opacity={overlayOpacity}
+          color={overlayColor}
+          blur={overlayBlur}
+          radius={radius}
+          zIndex={zIndex}
+        />
+        <BoxView style={styles.loader}>
+          <Loader size={loaderSize} />
+        </BoxView>
+      </BoxView>
+    );
+  }
+);
+
+LoadingOverlay.displayName = 'LoadingOverlay';

package/src/components/Mark/index.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+import { Text } from '../Text';
+import type { TextProps } from '../Text';
+import { useTheme } from '../../theme/theme-provider';
+
+export interface MarkProps extends TextProps {
+  /** Background color key from theme.colors or CSS color value */
+  color?: string;
+
+  /** Text content */
+  children?: React.ReactNode;
+}
+
+/**
+ * Mark component renders text with a background color (like HTML mark tag)
+ * Default background is yellow
+ */
+export const Mark = forwardRef<any, MarkProps>((props, ref) => {
+  const { children, color = 'yellow', style, ...others} = props;
+
+  const theme = useTheme();
+
+  // Get background color from theme or use as direct color
+  const getBackgroundColor = () => {
+    // Try to get from theme colors with lighter shade (index 2)
+    if (theme.colors[color]) {
+      return (theme.colors[color] || [])[2] || (theme.colors[color] || [])[0];
+    }
+    // Otherwise use the color directly
+    return color;
+  };
+
+  return (
+    <Text
+      ref={ref}
+      style={[
+        {
+          backgroundColor: getBackgroundColor(),
+          paddingHorizontal: 4,
+          paddingVertical: 2,
+        },
+        style,
+      ]}
+      {...others}
+    >
+      {children}
+    </Text>
+  );
+});
+
+Mark.displayName = 'Mark';

package/src/components/MediaQuery/index.tsx

@@ -0,0 +1,133 @@
+import React, { useState, useEffect } from 'react';
+import { Dimensions } from 'react-native';
+import type { ScaledSize } from 'react-native';
+import type { DefaultProps } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+
+export interface MediaQueryProps extends DefaultProps {
+  /** Minimum width for the query to match */
+  minWidth?: number;
+
+  /** Maximum width for the query to match */
+  maxWidth?: number;
+
+  /** Minimum height for the query to match */
+  minHeight?: number;
+
+  /** Maximum height for the query to match */
+  maxHeight?: number;
+
+  /** Shorthand for minWidth (convenience prop) */
+  largerThan?: number | string;
+
+  /** Shorthand for maxWidth (convenience prop) */
+  smallerThan?: number | string;
+
+  /** Orientation to match */
+  orientation?: 'portrait' | 'landscape';
+
+  /** Children to render when query matches */
+  children?: React.ReactNode;
+
+  /** Query type - window or screen */
+  query?: 'window' | 'screen';
+}
+
+const defaultProps: Partial<MediaQueryProps> = {
+  query: 'window',
+};
+
+const getOrientation = (dimensions: ScaledSize): 'portrait' | 'landscape' => {
+  return dimensions.width < dimensions.height ? 'portrait' : 'landscape';
+};
+
+const matchesQuery = (
+  dimensions: ScaledSize,
+  {
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    orientation,
+  }: {
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    orientation?: 'portrait' | 'landscape';
+  }
+): boolean => {
+  const { width, height } = dimensions;
+
+  if (minWidth !== undefined && width < minWidth) {
+    return false;
+  }
+
+  if (maxWidth !== undefined && width > maxWidth) {
+    return false;
+  }
+
+  if (minHeight !== undefined && height < minHeight) {
+    return false;
+  }
+
+  if (maxHeight !== undefined && height > maxHeight) {
+    return false;
+  }
+
+  if (orientation !== undefined && getOrientation(dimensions) !== orientation) {
+    return false;
+  }
+
+  return true;
+};
+
+export const MediaQuery: React.FC<MediaQueryProps> = (props) => {
+  const {
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    largerThan,
+    smallerThan,
+    orientation,
+    children,
+    query,
+  } = useComponentDefaultProps('MediaQuery', defaultProps, props);
+
+  const [dimensions, setDimensions] = useState(
+    Dimensions.get(query as 'window' | 'screen')
+  );
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({ window, screen }) => {
+      setDimensions(query === 'screen' ? screen : window);
+    });
+
+    return () => subscription?.remove();
+  }, [query]);
+
+  // Convert largerThan/smallerThan to minWidth/maxWidth
+  const finalMinWidth = largerThan !== undefined
+    ? (typeof largerThan === 'number' ? largerThan : parseInt(largerThan, 10))
+    : minWidth;
+  const finalMaxWidth = smallerThan !== undefined
+    ? (typeof smallerThan === 'number' ? smallerThan : parseInt(smallerThan, 10))
+    : maxWidth;
+
+  const matches = matchesQuery(dimensions, {
+    minWidth: finalMinWidth,
+    maxWidth: finalMaxWidth,
+    minHeight,
+    maxHeight,
+    orientation,
+  });
+
+  if (!matches) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+MediaQuery.displayName = 'MediaQuery';