react-native-mantine 0.9.0 → 0.10.0

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

@@ -0,0 +1,100 @@
+import { Platform } from 'react-native';
+import type { MantineSize } from '../../types';
+
+export interface ShadowStyles {
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  elevation?: number;
+}
+
+export type MantineShadow = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Platform-specific shadow configurations
+ * iOS uses shadowColor, shadowOffset, shadowOpacity, shadowRadius
+ * Android uses elevation
+ */
+const SHADOW_CONFIG: Record<MantineShadow, { ios: ShadowStyles; android: ShadowStyles }> = {
+  xs: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.05,
+      shadowRadius: 1,
+    },
+    android: {
+      elevation: 1,
+    },
+  },
+  sm: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+    },
+    android: {
+      elevation: 2,
+    },
+  },
+  md: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.15,
+      shadowRadius: 4,
+    },
+    android: {
+      elevation: 4,
+    },
+  },
+  lg: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 4 },
+      shadowOpacity: 0.2,
+      shadowRadius: 8,
+    },
+    android: {
+      elevation: 8,
+    },
+  },
+  xl: {
+    ios: {
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 8 },
+      shadowOpacity: 0.25,
+      shadowRadius: 16,
+    },
+    android: {
+      elevation: 12,
+    },
+  },
+};
+
+/**
+ * Returns platform-specific shadow styles for React Native
+ * @param size - Shadow size (xs, sm, md, lg, xl)
+ * @returns Object with shadow properties for the current platform
+ *
+ * @example
+ * // iOS will get: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.15, shadowRadius: 4 }
+ * // Android will get: { elevation: 4 }
+ * const shadowStyles = shadow('md');
+ */
+export function shadow(size?: MantineShadow | MantineSize): ShadowStyles {
+  if (!size) {
+    return {};
+  }
+
+  const shadowSize = size as MantineShadow;
+  const shadowConfig = SHADOW_CONFIG[shadowSize];
+
+  if (!shadowConfig) {
+    return {};
+  }
+
+  return Platform.OS === 'ios' ? shadowConfig.ios : shadowConfig.android;
+}

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

@@ -1,5 +1,6 @@
 import type { MantineTheme } from '../../../default-theme';
 import type { MantineColor } from '../../../types';
+import { getPrimaryShade } from '../primary-shade';
 
 export interface ThemeColorInput {
   theme: MantineTheme;
@@ -29,8 +30,8 @@ export function themeColor({ theme, color, shade }: ThemeColorInput): string {
     return color;
   }
 
-  // Use provided shade or default to primaryShade
-  const colorShade = shade !== undefined ? shade : theme.primaryShade;
+  // Use provided shade or get from theme based on color scheme
+  const colorShade = shade !== undefined ? shade : getPrimaryShade(theme);
 
   // Return the color at the specified shade
   return colorPalette[colorShade] || colorPalette[0] || color;

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

@@ -1,6 +1,7 @@
 import type { MantineTheme } from '../../default-theme';
 import type { MantineColor } from '../../types';
 import { themeColor } from './theme-color/theme-color';
+import { getPrimaryShade } from './primary-shade';
 
 export interface VariantInput {
   variant:
@@ -27,10 +28,9 @@ export const variant = (theme: MantineTheme) => (input: VariantInput): VariantOu
   const {
     variant,
     color = theme.primaryColor,
-    gradient,
   } = input;
 
-  const primaryShade = theme.primaryShade;
+  const primaryShade = getPrimaryShade(theme);
   const getColor = (c: string, shade: number) => themeColor({ theme, color: c, shade });
 
   switch (variant) {
@@ -91,10 +91,11 @@ export const variant = (theme: MantineTheme) => (input: VariantInput): VariantOu
     }
 
     case 'gradient': {
-      const from = gradient?.from || theme.primaryColor;
-      const to = gradient?.to || theme.primaryColor;
+      // For gradient variant, return transparent background
+      // The actual gradient rendering is handled by LinearGradient component
+      // We just need to provide the text color and border
       return {
-        background: `linear-gradient(${gradient?.deg || 45}deg, ${getColor(from, primaryShade)}, ${getColor(to, primaryShade)})`,
+        background: 'transparent',
         color: '#fff',
         border: 'transparent',
       };

package/src/theme/index.tsx

@@ -3,3 +3,7 @@ export { createStyles } from './create-styles';
 export { filterProps } from './filter-props';
 export { getSize } from './get-size';
 export { createTheme } from './create-theme';
+export { shadow } from './functions/fns/shadow';
+export type { ShadowStyles, MantineShadow } from './functions/fns/shadow';
+export { gradient } from './functions/fns/gradient/gradient';
+export type { MantineGradient, GradientConfig } from './theme.d';

package/src/theme/theme-provider.tsx

@@ -15,6 +15,7 @@ import type { ReactNode } from 'react';
 import { Layout } from './constants';
 import type { MantineTheme } from './default-theme';
 import { createTheme } from './create-theme';
+import { getPrimaryShade } from './functions/fns/primary-shade';
 
 import { filterProps } from './filter-props';
 import useCachedResources from '../hooks/useCachedResources';
@@ -36,7 +37,7 @@ export const ThemeProvider = ({
   theme: MantineTheme;
   forceMode?: 'light' | 'dark';
 }): React.ReactElement => {
-  const { colors, primaryShade, primaryColor, secondaryColor } = theme;
+  const { colors, primaryColor, secondaryColor } = theme;
   const systemDarkMode = Appearance.getColorScheme();
   const [currentMode, setCurrentMode] = useState<'light' | 'dark'>(
     forceMode || systemDarkMode || 'light'
@@ -64,10 +65,14 @@ export const ThemeProvider = ({
       dark: theme.light,
     };
 
+    // Get the primary shade for the current mode
+    const themeWithMode = { ...theme, currentMode };
+    const shade = getPrimaryShade(themeWithMode);
+
     return {
       ...theme,
-      primaryTextColor: get(colors, `${primaryColor}.${primaryShade}`, 'black'),
-      primaryBgColor: get(colors, `${primaryColor}.${primaryShade}`),
+      primaryTextColor: get(colors, `${primaryColor}.${shade}`, 'black'),
+      primaryBgColor: get(colors, `${primaryColor}.${shade}`),
       secondaryBgColor: get(colors, `${secondaryColor}.0`),
       ...(currentMode === 'dark' ? darkTheme : {}),
       window: Layout.window,

package/src/theme/theme.d.ts

@@ -12,4 +12,14 @@ export type Palette = [
   string,
 ];
 
-export type MantineGradient = any;
+export interface MantineGradient {
+  from: string;
+  to: string;
+  deg?: number;
+}
+
+export interface GradientConfig {
+  colors: [string, string];
+  start: { x: number; y: number };
+  end: { x: number; y: number };
+}

package/src/theme/utils/to-rgba.ts

@@ -0,0 +1,69 @@
+/* eslint-disable no-bitwise */
+
+interface RGBA {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+function isHexColor(hex: string): boolean {
+  const HEX_REGEXP = /^#?([0-9A-F]{3}){1,2}$/i;
+
+  return HEX_REGEXP.test(hex);
+}
+
+function hexToRgba(color: string): RGBA {
+  let hexString = color.replace('#', '');
+
+  if (hexString.length === 3) {
+    const shorthandHex = hexString.split('');
+    hexString = [
+      shorthandHex[0],
+      shorthandHex[0],
+      shorthandHex[1],
+      shorthandHex[1],
+      shorthandHex[2],
+      shorthandHex[2],
+    ].join('');
+  }
+
+  const parsed = parseInt(hexString, 16);
+  const r = (parsed >> 16) & 255;
+  const g = (parsed >> 8) & 255;
+  const b = parsed & 255;
+
+  return {
+    r,
+    g,
+    b,
+    a: 1,
+  };
+}
+
+function rgbStringToRgba(color: string): RGBA {
+  const parts = color.replace(/[^0-9,.]/g, '').split(',').map(Number);
+  const r = parts[0] || 0;
+  const g = parts[1] || 0;
+  const b = parts[2] || 0;
+  const a = parts[3] || 1;
+
+  return { r, g, b, a };
+}
+
+export function toRgba(color: string): RGBA {
+  if (isHexColor(color)) {
+    return hexToRgba(color);
+  }
+
+  if (color.startsWith('rgb')) {
+    return rgbStringToRgba(color);
+  }
+
+  return {
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 1,
+  };
+}