react-native-mantine 0.1.15 → 0.2.0

package/src/components/Transition/index.tsx

@@ -0,0 +1,225 @@
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+import type { DefaultProps } from '../../theme/types';
+import { useComponentDefaultProps } from '../../theme/theme-provider';
+
+export type TransitionType =
+  | 'fade'
+  | 'scale'
+  | 'slide-down'
+  | 'slide-up'
+  | 'slide-left'
+  | 'slide-right'
+  | 'pop'
+  | 'rotate';
+
+export interface TransitionProps extends DefaultProps {
+  /** If true, component will be mounted */
+  mounted: boolean;
+
+  /** Transition type */
+  transition?: TransitionType;
+
+  /** Transition duration in ms */
+  duration?: number;
+
+  /** Exit transition duration in ms */
+  exitDuration?: number;
+
+  /** Transition timing function */
+  timingFunction?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+
+  /** Children to transition */
+  children: React.ReactNode;
+
+  /** Called when exit transition ends */
+  onExited?: () => void;
+
+  /** Called when enter transition ends */
+  onEntered?: () => void;
+
+  /** Additional styles */
+  style?: any;
+}
+
+const getEasing = (
+  timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
+) => {
+  switch (timingFunction) {
+    case 'linear':
+      return Easing.linear;
+    case 'ease':
+      return Easing.ease;
+    case 'ease-in':
+      return Easing.in(Easing.ease);
+    case 'ease-out':
+      return Easing.out(Easing.ease);
+    case 'ease-in-out':
+      return Easing.inOut(Easing.ease);
+    default:
+      return Easing.ease;
+  }
+};
+
+const defaultProps: Partial<TransitionProps> = {
+  transition: 'fade',
+  duration: 250,
+  timingFunction: 'ease',
+};
+
+export const Transition = forwardRef<any, TransitionProps>((props, ref) => {
+  const {
+    mounted,
+    transition,
+    duration,
+    exitDuration,
+    timingFunction,
+    children,
+    onExited,
+    onEntered,
+    style,
+    ...others
+  } = useComponentDefaultProps('Transition', defaultProps, props);
+
+  const animation = useRef(new Animated.Value(mounted ? 1 : 0)).current;
+  const shouldRender = useRef(mounted);
+
+  useEffect(() => {
+    if (mounted) {
+      shouldRender.current = true;
+      Animated.timing(animation, {
+        toValue: 1,
+        duration: duration || 250,
+        easing: getEasing(timingFunction || 'ease'),
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished && onEntered) {
+          onEntered();
+        }
+      });
+    } else {
+      Animated.timing(animation, {
+        toValue: 0,
+        duration: exitDuration || duration || 250,
+        easing: getEasing(timingFunction || 'ease'),
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) {
+          shouldRender.current = false;
+          if (onExited) {
+            onExited();
+          }
+        }
+      });
+    }
+  }, [mounted, duration, exitDuration, timingFunction, onEntered, onExited, animation]);
+
+  const getTransformStyle = () => {
+    switch (transition) {
+      case 'fade':
+        return {
+          opacity: animation,
+        };
+      case 'scale':
+        return {
+          opacity: animation,
+          transform: [
+            {
+              scale: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.75, 1],
+              }),
+            },
+          ],
+        };
+      case 'slide-down':
+        return {
+          opacity: animation,
+          transform: [
+            {
+              translateY: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-20, 0],
+              }),
+            },
+          ],
+        };
+      case 'slide-up':
+        return {
+          opacity: animation,
+          transform: [
+            {
+              translateY: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [20, 0],
+              }),
+            },
+          ],
+        };
+      case 'slide-left':
+        return {
+          opacity: animation,
+          transform: [
+            {
+              translateX: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [20, 0],
+              }),
+            },
+          ],
+        };
+      case 'slide-right':
+        return {
+          opacity: animation,
+          transform: [
+            {
+              translateX: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [-20, 0],
+              }),
+            },
+          ],
+        };
+      case 'pop':
+        return {
+          opacity: animation,
+          transform: [
+            {
+              scale: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, 1],
+              }),
+            },
+          ],
+        };
+      case 'rotate':
+        return {
+          opacity: animation,
+          transform: [
+            {
+              rotate: animation.interpolate({
+                inputRange: [0, 1],
+                outputRange: ['-180deg', '0deg'],
+              }),
+            },
+          ],
+        };
+      default:
+        return {
+          opacity: animation,
+        };
+    }
+  };
+
+  if (!shouldRender.current && !mounted) {
+    return null;
+  }
+
+  return (
+    <Animated.View ref={ref} style={[getTransformStyle(), style]} {...others}>
+      {children}
+    </Animated.View>
+  );
+});
+
+Transition.displayName = 'Transition';

package/src/components/index.tsx

@@ -5,3 +5,104 @@ export * from './Text';
 export * from './Button';
 export * from './UnstyledButton';
 export * from './ActionIcon';
+export * from './Loader';
+
+// Phase 1 components
+export * from './Center';
+export * from './Container';
+export * from './Flex';
+export * from './Space';
+export * from './Title';
+export * from './Highlight';
+export * from './Mark';
+export * from './Code';
+
+// Phase 2 components - Visual Feedback
+export * from './Badge';
+export * from './Avatar';
+export * from './Paper';
+export * from './Divider';
+export * from './Progress';
+export * from './Skeleton';
+
+// Phase 2 components - Input Components
+export * from './TextInput';
+export * from './Textarea';
+export * from './PasswordInput';
+export * from './Switch';
+export * from './Checkbox';
+export * from './Radio';
+
+// Phase 3 components - Foundation & Utilities
+export * from './Overlay';
+export * from './Portal';
+
+// Phase 3 components - Interactive Components
+export * from './Modal';
+export * from './Drawer';
+export * from './Dialog';
+export * from './Collapse';
+export * from './Accordion';
+export * from './Spoiler';
+export * from './Notification';
+
+// Phase 3 components - Form Components
+export * from './NumberInput';
+export * from './PinInput';
+export * from './Chip';
+export * from './NativeSelect';
+
+// Phase 4 components - Advanced Interactions
+export * from './Slider';
+export * from './Rating';
+export * from './Stepper';
+export * from './SegmentedControl';
+export * from './Pagination';
+
+// Phase 4 components - Data Display
+export * from './Card';
+export * from './Timeline';
+export * from './Table';
+export * from './List';
+
+// Phase 5 components - Images & Media
+export * from './Image';
+export * from './BackgroundImage';
+export * from './ThemeIcon';
+export * from './ColorSwatch';
+
+// Phase 5 components - Utility Components
+export * from './Transition';
+export * from './CloseButton';
+export * from './CopyButton';
+export * from './Burger';
+
+// Phase 6 components - Foundation
+export * from './Anchor';
+export * from './Kbd';
+export * from './Indicator';
+
+// Phase 6 components - Layout
+export * from './Grid';
+export * from './SimpleGrid';
+export * from './AspectRatio';
+export * from './MediaQuery';
+
+// Phase 6 components - Display
+export * from './Blockquote';
+export * from './Breadcrumbs';
+export * from './NavLink';
+
+// Phase 6 components - Complex Overlays
+export * from './LoadingOverlay';
+export * from './Tooltip';
+export * from './Popover';
+export * from './Menu';
+
+// Phase 6 components - Advanced Form
+export * from './Select';
+export * from './MultiSelect';
+
+// Phase 6 components - Specialized
+export * from './RingProgress';
+export * from './TransferList';

package/src/theme/create-theme.ts

@@ -14,6 +14,7 @@ export const createTheme = (theme?: Partial<MantineTheme>): MantineTheme => {
     primaryColor: 'blue',
     secondaryColor: 'cyan',
     headings: {
+      ...DEFAULT_THEME.headings,
       fontFamily: 'Nunito',
     },
     colors: DEFAULT_COLORS,

package/src/theme/default-theme.ts

@@ -225,6 +225,8 @@ export const _DEFAULT_THEME: MantineTheme = {
   primaryColor: 'blue',
   secondaryColor: 'black',
   secondaryBgColor: 'white',
+  white: '#ffffff',
+  black: '#000000',
   light: {
     text: '#000',
     background: '#fdfdfd',
@@ -317,6 +319,25 @@ export type ThemeSize = {
   xl: number;
 };
 
+export type HeadingStyle = {
+  fontSize: number;
+  lineHeight: number;
+  fontWeight?: number;
+};
+
+export type MantineHeadings = {
+  fontFamily?: string;
+  fontWeight?: number;
+  sizes: {
+    h1: HeadingStyle;
+    h2: HeadingStyle;
+    h3: HeadingStyle;
+    h4: HeadingStyle;
+    h5: HeadingStyle;
+    h6: HeadingStyle;
+  };
+};
+
 export type themeMode = 'dark' | 'light';
 
 export type MantineTheme = {
@@ -332,6 +353,8 @@ export type MantineTheme = {
   primaryColor: string;
   secondaryColor: string;
   secondaryBgColor: string;
+  white: string;
+  black: string;
 
   light: ColorScheme;
   dark: ColorScheme;
@@ -344,6 +367,7 @@ export type MantineTheme = {
   };
   radius: ThemeSize;
   fontSizes: ThemeSize;
+  headings: MantineHeadings;
   window: {
     width: number;
     height: number;

package/src/theme/functions/attach-functions.ts

@@ -6,7 +6,14 @@ export function attachFunctions(themeBase: any): any {
     fn: {
       radius: fns.radius(themeBase),
       variant: fns.variant(themeBase),
-      themeColor: fns.themeColor(themeBase),
+      themeColor: (color: string, shade?: number) =>
+        fns.themeColor({ theme: themeBase, color, shade }),
+      fontStyles: fns.fontStyles(themeBase),
+      focusStyles: fns.focusStyles(themeBase),
+      placeholderStyles: fns.placeholderStyles(themeBase),
+      cover: fns.cover(themeBase),
+      hover: fns.hover(themeBase),
     },
+    activeStyles: fns.activeStyles(themeBase),
   };
 }

package/src/theme/functions/fns/helpers.ts

@@ -0,0 +1,36 @@
+import type { MantineTheme } from '../../default-theme';
+
+export const fontStyles = (theme: MantineTheme) => () => ({
+  fontFamily: theme.fontFamily,
+});
+
+export const focusStyles = (_theme: MantineTheme) => () => ({
+  // Focus styles for accessibility
+  // In React Native, we typically don't use outline
+  // but can add other focus indicators if needed
+});
+
+export const placeholderStyles = (_theme: MantineTheme) => () => ({
+  // Placeholder styles for inputs
+  opacity: 0.6,
+});
+
+export const cover = (_theme: MantineTheme) => (offset: number = 0) => ({
+  position: 'absolute' as const,
+  top: offset,
+  right: offset,
+  bottom: offset,
+  left: offset,
+});
+
+export const hover = (_theme: MantineTheme) => (styles: any) => ({
+  // Hover styles (primarily for web, limited support in React Native)
+  // Can be applied via TouchableOpacity/Pressable activeOpacity instead
+  ...styles,
+});
+
+export const activeStyles = (_theme: MantineTheme) => ({
+  // Active/pressed state styles
+  opacity: 0.8,
+  transform: [{ scale: 0.98 }],
+});

package/src/theme/functions/fns/index.ts

@@ -1,9 +1,11 @@
 import { radius } from './radius';
 import { themeColor } from './theme-color/theme-color';
 import { variant } from './variant';
+import * as helpers from './helpers';
 
 export const fns = {
   radius,
   variant,
   themeColor,
+  ...helpers,
 };

package/src/theme/functions/fns/theme-color/theme-color.ts

@@ -1,6 +1,37 @@
+import type { MantineTheme } from '../../../default-theme';
+import type { MantineColor } from '../../../types';
 
-export function themeColor(_theme: any) {
-  return (_theme: any) => {
-    return {}
+export interface ThemeColorInput {
+  theme: MantineTheme;
+  color: MantineColor;
+  shade?: number;
+}
+
+export function themeColor({ theme, color, shade }: ThemeColorInput): string {
+  if (!color) {
+    return '';
   }
+
+  // If it's a hex/rgb color, return as is
+  if (
+    color.startsWith('#') ||
+    color.startsWith('rgb') ||
+    color.startsWith('hsl')
+  ) {
+    return color;
+  }
+
+  // Get from theme colors
+  const colorPalette = theme.colors[color];
+
+  if (!colorPalette) {
+    // If color not in palette, return as is (might be a CSS color name)
+    return color;
+  }
+
+  // Use provided shade or default to primaryShade
+  const colorShade = shade !== undefined ? shade : theme.primaryShade;
+
+  // Return the color at the specified shade
+  return colorPalette[colorShade] || colorPalette[0] || color;
 }

package/src/theme/functions/fns/variant.ts

@@ -1,3 +1,111 @@
-export const variant = (_theme: any) => (_variant: string) => {
-  return {}
+import type { MantineTheme } from '../../default-theme';
+import type { MantineColor } from '../../types';
+import { themeColor } from './theme-color/theme-color';
+
+export interface VariantInput {
+  variant:
+    | 'filled'
+    | 'outline'
+    | 'light'
+    | 'white'
+    | 'default'
+    | 'subtle'
+    | 'gradient';
+  color?: MantineColor;
+  gradient?: { from: string; to: string; deg?: number };
+  primaryFallback?: boolean;
+}
+
+export interface VariantOutput {
+  background: string;
+  color: string;
+  border: string;
+  hover?: string;
+}
+
+export const variant = (theme: MantineTheme) => (input: VariantInput): VariantOutput => {
+  const {
+    variant,
+    color = theme.primaryColor,
+    gradient,
+  } = input;
+
+  const primaryShade = theme.primaryShade;
+  const getColor = (c: string, shade: number) => themeColor({ theme, color: c, shade });
+
+  switch (variant) {
+    case 'filled': {
+      const filledColor = getColor(color, primaryShade);
+      return {
+        background: filledColor,
+        color: '#fff',
+        border: filledColor,
+        hover: getColor(color, primaryShade > 0 ? primaryShade + 1 : primaryShade),
+      };
+    }
+
+    case 'light': {
+      return {
+        background: getColor(color, 0),
+        color: getColor(color, primaryShade > 6 ? primaryShade : 7),
+        border: 'transparent',
+        hover: getColor(color, 1),
+      };
+    }
+
+    case 'outline': {
+      const outlineColor = getColor(color, primaryShade);
+      return {
+        background: 'transparent',
+        color: outlineColor,
+        border: outlineColor,
+        hover: getColor(color, 0),
+      };
+    }
+
+    case 'subtle': {
+      return {
+        background: 'transparent',
+        color: getColor(color, primaryShade),
+        border: 'transparent',
+        hover: getColor(color, 0),
+      };
+    }
+
+    case 'white': {
+      return {
+        background: '#fff',
+        color: getColor(color, primaryShade),
+        border: '#fff',
+        hover: '#f8f9fa',
+      };
+    }
+
+    case 'default': {
+      return {
+        background: theme.light.background,
+        color: theme.light.text,
+        border: theme.colors.gray?.[4] || '#ced4da',
+        hover: theme.colors.gray?.[0] || '#f8f9fa',
+      };
+    }
+
+    case 'gradient': {
+      const from = gradient?.from || theme.primaryColor;
+      const to = gradient?.to || theme.primaryColor;
+      return {
+        background: `linear-gradient(${gradient?.deg || 45}deg, ${getColor(from, primaryShade)}, ${getColor(to, primaryShade)})`,
+        color: '#fff',
+        border: 'transparent',
+      };
+    }
+
+    default: {
+      return {
+        background: getColor(color, primaryShade),
+        color: '#fff',
+        border: getColor(color, primaryShade),
+      };
+    }
+  }
 }

package/src/theme/utils/rem.ts

@@ -1,19 +1,21 @@
-function createConverter(units: string) {
-  return (px: unknown) => {
+// React Native needs numeric values, not rem strings
+// Convert rem to actual pixel values (16px base)
+function createNumericConverter() {
+  return (px: unknown): number => {
     if (typeof px === 'number') {
-      return `${px / 16}${units}`;
+      return px;
     }
 
     if (typeof px === 'string') {
       const replaced = px.replace('px', '');
       if (!Number.isNaN(Number(replaced))) {
-        return `${Number(replaced) / 16}${units}`;
+        return Number(replaced);
       }
     }
 
-    return px as string;
+    return typeof px === 'number' ? px : 0;
   };
 }
 
-export const rem = createConverter('rem');
-export const em = createConverter('em');
+export const rem = createNumericConverter();
+export const em = createNumericConverter();