react-native-mantine 0.9.0 → 0.10.0

package/lib/typescript/module/src/theme/index.d.ts

@@ -3,4 +3,8 @@ 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';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/module/src/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/theme/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,mCAAmC,CAAC;AAC7D,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}

package/lib/typescript/module/src/theme/theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAMpD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,oBAA2B,CAAC;AAErD,eAAO,MAAM,aAAa,GAAI,iCAI3B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,KAAG,KAAK,CAAC,YAkDT,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,YAAwC,CAAC;AAErE,eAAO,MAAM,KAAK,GAAI,iDAInB,UAAU,KAAG,KAAK,CAAC,YAerB,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAEzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,CAAC,GACP,CAAC,GAAG;KACJ,GAAG,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;CACnE,CASA"}
+{"version":3,"file":"theme-provider.d.ts","sourceRoot":"","sources":["../../../../../src/theme/theme-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAOpD,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,YAAY,oBAA2B,CAAC;AAErD,eAAO,MAAM,aAAa,GAAI,iCAI3B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC9B,KAAG,KAAK,CAAC,YAsDT,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAO,YAAwC,CAAC;AAErE,eAAO,MAAM,KAAK,GAAI,iDAInB,UAAU,KAAG,KAAK,CAAC,YAerB,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC7B,CAAC,SAAS,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,EAEzB,SAAS,EAAE,MAAM,EACjB,YAAY,EAAE,CAAC,EACf,KAAK,EAAE,CAAC,GACP,CAAC,GAAG;KACJ,GAAG,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;CACnE,CASA"}

package/lib/typescript/module/src/theme/utils/to-rgba.d.ts

@@ -0,0 +1,9 @@
+interface RGBA {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+export declare function toRgba(color: string): RGBA;
+export {};
+//# sourceMappingURL=to-rgba.d.ts.map

package/lib/typescript/module/src/theme/utils/to-rgba.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"to-rgba.d.ts","sourceRoot":"","sources":["../../../../../../src/theme/utils/to-rgba.ts"],"names":[],"mappings":"AAEA,UAAU,IAAI;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AA8CD,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAe1C"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-mantine",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Make Mantine Accessable on React Native",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/components/Button/index.tsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import { LinearGradient } from 'expo-linear-gradient';
 import { UnstyledButton } from '../UnstyledButton';
 import type {
   DefaultProps,
@@ -9,7 +10,7 @@ import type {
 } from '../../theme/types';
 import type { MantineGradient } from '../../theme/theme';
 import type { LoaderProps } from '../Loader';
-import { ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator, View, StyleSheet } from 'react-native';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import useStyles from './Button.styles';
 import { BoxView } from '../BoxView';
@@ -102,7 +103,7 @@ export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
     ...others
   } = useComponentDefaultProps('Button', defaultProps, props);
 
-  const { styles, sx } = useStyles(
+  const { styles, sx, theme } = useStyles(
     {
       radius,
       color,
@@ -121,6 +122,55 @@ export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
 
   const loader = <ActivityIndicator />;
 
+  const buttonContent = (
+    <BoxView style={styles.inner}>
+      <BoxView style={styles.label}>
+        {(leftIcon || (loading && loaderPosition === 'left')) && (
+          <BoxView style={sx(styles.icon, styles.leftIcon)}>
+            {loading && loaderPosition === 'left' ? loader : leftIcon}
+          </BoxView>
+        )}
+
+        {loading && loaderPosition === 'center' && (
+          <BoxView style={styles.centerLoader}>{loader}</BoxView>
+        )}
+        {withTextWrapper(children, shouldWrapInText)}
+        {(rightIcon || (loading && loaderPosition === 'right')) && (
+          <BoxView style={sx(styles.icon, styles.rightIcon)}>
+            {loading && loaderPosition === 'right' ? loader : rightIcon}
+          </BoxView>
+        )}
+      </BoxView>
+    </BoxView>
+  );
+
+  // For gradient variant, wrap content in LinearGradient
+  if (variant === 'gradient') {
+    const gradientConfig = theme.fn.gradient(gradient);
+    const gradientStyle = StyleSheet.flatten([styles.root, style]);
+    const { backgroundColor, ...restStyle } = gradientStyle;
+
+    return (
+      <UnstyledButton
+        style={restStyle}
+        data-button
+        data-disabled={disabled || undefined}
+        data-loading={loading || undefined}
+        ref={ref}
+        {...others}
+      >
+        <LinearGradient
+          colors={gradientConfig.colors}
+          start={gradientConfig.start}
+          end={gradientConfig.end}
+          style={gradientStyles.gradient}
+        >
+          {buttonContent}
+        </LinearGradient>
+      </UnstyledButton>
+    );
+  }
+
   return (
     <UnstyledButton
       style={sx(styles.root, style)}
@@ -130,27 +180,17 @@ export const _Button = forwardRef<View, ButtonProps>((props, ref) => {
       ref={ref}
       {...others}
     >
-      <BoxView style={styles.inner}>
-        <BoxView style={styles.label}>
-          {(leftIcon || (loading && loaderPosition === 'left')) && (
-            <BoxView style={sx(styles.icon, styles.leftIcon)}>
-              {loading && loaderPosition === 'left' ? loader : leftIcon}
-            </BoxView>
-          )}
-
-          {loading && loaderPosition === 'center' && (
-            <BoxView style={styles.centerLoader}>{loader}</BoxView>
-          )}
-          {withTextWrapper(children, shouldWrapInText)}
-          {(rightIcon || (loading && loaderPosition === 'right')) && (
-            <BoxView style={sx(styles.icon, styles.rightIcon)}>
-              {loading && loaderPosition === 'right' ? loader : rightIcon}
-            </BoxView>
-          )}
-        </BoxView>
-      </BoxView>
+      {buttonContent}
     </UnstyledButton>
   );
 }) as any;
 
+const gradientStyles = StyleSheet.create({
+  gradient: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
 export const Button = _Button;

package/src/components/Code/index.tsx

@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import { Text } from '../Text';
 import type { TextProps } from '../Text';
 import { useTheme } from '../../theme/theme-provider';
+import { getPrimaryShade } from '../../theme/functions/fns/primary-shade';
 import { BoxView } from '../BoxView';
 import { withTextWrapper, type WithTextWrapperProps } from '../../theme/utils/withTextWrapper';
 
@@ -23,11 +24,12 @@ export const Code = forwardRef<any, CodeProps>((props, ref) => {
   const { children, color, block = false, style, withTextWrapper: shouldWrapInText = true, ...others} = props;
 
   const theme = useTheme();
+  const primaryShade = getPrimaryShade(theme);
 
   // Get background and text colors
   const backgroundColor = theme.colors.gray?.[0] || '#F6F6F6';
   const textColor = color
-    ? theme.colors[color]?.[theme.primaryShade] || color
+    ? theme.colors[color]?.[primaryShade] || color
     : theme.light.text;
 
   // Monospace font - in React Native, we can use 'Courier' or 'Courier New'

package/src/components/Gradient/Gradient.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { View, StyleSheet, type ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import type { MantineGradient, GradientConfig } from '../../theme/theme.d';
+import { useTheme } from '../../theme/theme-provider';
+
+export interface GradientProps {
+  /** Gradient configuration with from/to colors and optional degrees */
+  gradient?: MantineGradient;
+  /** Children to render inside gradient */
+  children?: React.ReactNode;
+  /** Additional styles */
+  style?: ViewStyle;
+  /** Whether to render as full width/height */
+  fill?: boolean;
+}
+
+/**
+ * Gradient component wrapper for expo-linear-gradient
+ * Provides seamless integration with Mantine theme system
+ *
+ * @example
+ * <Gradient gradient={{ from: 'blue', to: 'cyan', deg: 45 }}>
+ *   <Text>Gradient Background</Text>
+ * </Gradient>
+ */
+export function Gradient({ gradient, children, style, fill = true }: GradientProps) {
+  const theme = useTheme();
+
+  // Get gradient configuration from theme
+  const config: GradientConfig = theme.fn.gradient(gradient);
+
+  const containerStyle: ViewStyle = {
+    ...(fill && styles.fill),
+    ...style,
+  };
+
+  return (
+    <LinearGradient
+      colors={config.colors}
+      start={config.start}
+      end={config.end}
+      style={containerStyle}
+    >
+      {children}
+    </LinearGradient>
+  );
+}
+
+/**
+ * Fallback component when expo-linear-gradient is not available
+ * Renders a solid background using the 'from' color
+ */
+export function GradientFallback({ gradient, children, style }: GradientProps) {
+  const theme = useTheme();
+  const config: GradientConfig = theme.fn.gradient(gradient);
+
+  return (
+    <View style={[{ backgroundColor: config.colors[0] }, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});
+
+Gradient.displayName = 'Gradient';

package/src/components/Gradient/index.tsx

@@ -0,0 +1,2 @@
+export { Gradient, GradientFallback } from './Gradient';
+export type { GradientProps } from './Gradient';

package/src/components/Modal/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef } from 'react';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import {
   Modal as RNModal,
   TouchableOpacity,
@@ -6,6 +6,8 @@ import {
   KeyboardAvoidingView,
   Platform,
   ScrollView,
+  Dimensions,
+  type LayoutChangeEvent,
 } from 'react-native';
 import { BoxView } from '../BoxView';
 import { Text } from '../Text';
@@ -159,6 +161,9 @@ const useStyles = createStyles(
       body: {
         padding: getPadding(),
       },
+      scrollView: {
+        flexGrow: 0,
+      },
     };
   }
 ) as any;
@@ -208,6 +213,22 @@ export const Modal = forwardRef<any, ModalProps>((props, ref) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;
   const scaleAnim = useRef(new Animated.Value(0.9)).current;
 
+  // State for managing scroll behavior
+  const [contentHeight, setContentHeight] = useState(0);
+
+  // Calculate max height: min(300px, 50% of screen height)
+  const screenHeight = Dimensions.get('window').height;
+  const maxHeight = Math.min(300, screenHeight * 0.5);
+
+  // Only enable scrolling when content exceeds max height
+  const shouldEnableScroll = contentHeight > maxHeight;
+
+  // Handle content layout changes
+  const handleContentLayout = (event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+    setContentHeight(height);
+  };
+
   useEffect(() => {
     if (opened) {
       Animated.parallel([
@@ -299,8 +320,17 @@ export const Modal = forwardRef<any, ModalProps>((props, ref) => {
                 </BoxView>
               )}
 
-              <ScrollView style={styles.body} showsVerticalScrollIndicator={false}>
-                {children}
+              <ScrollView
+                style={[
+                  styles.body,
+                  styles.scrollView,
+                  !fullScreen && { maxHeight },
+                ]}
+                contentContainerStyle={{ flexGrow: 0 }}
+                showsVerticalScrollIndicator={shouldEnableScroll}
+                scrollEnabled={shouldEnableScroll || fullScreen}
+              >
+                <BoxView onLayout={handleContentLayout}>{children}</BoxView>
               </ScrollView>
             </Animated.View>
           </TouchableOpacity>

package/src/components/Paper/index.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import { Platform } from 'react-native';
 import { BoxView } from '../BoxView';
 import type {
   DefaultProps,
@@ -30,64 +29,6 @@ export interface PaperProps extends DefaultProps {
   style?: any;
 }
 
-const shadows = {
-  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,
-    },
-  },
-};
-
 const useStyles = createStyles(
   (
     theme,
@@ -105,10 +46,7 @@ const useStyles = createStyles(
   ) => {
     const getShadowStyles = () => {
       if (!shadow) return {};
-      const shadowConfig = shadows[shadow as keyof typeof shadows];
-      if (!shadowConfig) return {};
-
-      return Platform.OS === 'ios' ? shadowConfig.ios : shadowConfig.android;
+      return theme.fn.shadow(shadow);
     };
 
     const getPadding = () => {

package/src/components/Text/index.tsx

@@ -1,8 +1,9 @@
 import { useTheme } from '../../theme/theme-provider';
-import type { Palette } from '../../theme/theme';
+import { getPrimaryShade } from '../../theme/functions/fns/primary-shade';
 import { get } from 'lodash-es';
 import { forwardRef } from 'react';
 import { Text as DefaultText } from 'react-native';
+import type { MantineTheme } from '../../theme/default-theme';
 
 export type TextProps = DefaultText['props'] & {
   size?: string;
@@ -18,11 +19,11 @@ export type TextProps = DefaultText['props'] & {
 
 const propToColor = (
   color: string,
-  colors: { [key: string]: Palette },
-  primaryShade: number
+  theme: MantineTheme
 ): string => {
+  const primaryShade = getPrimaryShade(theme);
   const colorExistOnPalette = get(
-    colors,
+    theme.colors,
     `${color}.${primaryShade}`,
     ''
   ) as string;
@@ -47,34 +48,45 @@ export const Text = forwardRef((props: TextProps, ref: any) => {
     ...otherProps
   } = props;
 
+  const theme = useTheme();
   const {
     fontFamily,
     fontFamilyBold,
     fontFamilySemiBold,
-    colors,
-    primaryShade,
+    fontWeights,
     fontSizes,
     light,
-  } = useTheme();
+  } = theme;
+
+  // Determine font family based on weight/style
+  // On iOS/Android, some fonts need explicit family names for different weights
+  const getFontFamily = () => {
+    if (questrial) return 'Questrial';
+    if (bold) return fontFamilyBold;
+    if (semiBold) return fontFamilySemiBold;
+    return fontFamily;
+  };
+
+  // Still use fontWeight for platforms that support it well (like iOS with System font)
+  const getFontWeight = () => {
+    if (weight) return weight;
+    if (semiBold) return fontWeights.semibold;
+    if (bold) return fontWeights.bold;
+    return fontWeights.normal;
+  };
 
   return (
     <DefaultText
       ref={ref}
       style={[
         {
-          fontFamily: semiBold
-            ? fontFamilySemiBold
-            : bold
-              ? fontFamilyBold
-              : questrial
-                ? 'Questrial'
-                : fontFamily,
-          fontWeight: weight || (bold ? '900' : '300'),
+          fontFamily: getFontFamily(),
+          fontWeight: getFontWeight() as any,
           fontSize: fontSize ? fontSize : get(fontSizes, size, 16),
           color: white
             ? 'white'
             : color
-              ? propToColor(color, colors, primaryShade)
+              ? propToColor(color, theme)
               : light.text,
           ...(align ? { textAlign: align } : {}),
         },

package/src/components/ThemeIcon/index.tsx

@@ -12,6 +12,7 @@ import type { MantineGradient } from '../../theme/theme';
 import { useComponentDefaultProps } from '../../theme/theme-provider';
 import { createStyles } from '../../theme';
 import { getSize } from '../../theme';
+import { getPrimaryShade } from '../../theme/functions/fns/primary-shade';
 
 export interface ThemeIconProps extends DefaultProps {
   /** Icon */
@@ -61,7 +62,7 @@ const useStyles = createStyles(
   ) => {
     const iconSize = typeof size === 'number' ? size : getSize({ size, sizes }) as number;
     const themeColor = theme?.colors && color in theme.colors ? color : theme.primaryColor;
-    const shade = theme.primaryShade;
+    const shade = getPrimaryShade(theme);
 
     const getVariantStyles = () => {
       switch (variant) {
@@ -72,7 +73,7 @@ const useStyles = createStyles(
         case 'light':
           return {
             backgroundColor:
-              theme.colorScheme === 'dark'
+              theme.currentMode === 'dark'
                 ? theme.colors[themeColor]?.[9]
                 : theme.colors[themeColor]?.[0],
           };
@@ -131,13 +132,14 @@ export const ThemeIcon = forwardRef<any, ThemeIconProps>((props, ref) => {
   ) as any;
 
   const getGradientColors = (): [string, string] => {
+    const shade = getPrimaryShade(theme);
     const fromColor =
       gradient?.from && theme?.colors && gradient.from in theme.colors
-        ? theme.colors[gradient.from][theme.primaryShade]
+        ? theme.colors[gradient.from][shade]
         : gradient?.from || theme.colors.blue?.[6] || '#228be6';
     const toColor =
       gradient?.to && theme?.colors && gradient.to in theme.colors
-        ? theme.colors[gradient.to][theme.primaryShade]
+        ? theme.colors[gradient.to][shade]
         : gradient?.to || theme.colors.cyan?.[6] || '#22b8cf';
     return [fromColor, toColor];
   };

package/src/components/Title/index.tsx

@@ -24,11 +24,15 @@ export const Title = forwardRef<any, TitleProps>((props, ref) => {
   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
+  // Determine fontWeight - use specific value or default to bold
   const fontWeight =
     headingStyles.fontWeight ??
     theme.headings.fontWeight ??
-    700;
+    theme.fontWeights.bold;
+
+  // Use fontFamilyBold for headings to ensure proper rendering on iOS/Android
+  // Headings are typically bold, so we use the bold font family
+  const fontFamily = theme.headings.fontFamily || theme.fontFamilyBold;
 
   if (!shouldWrapInText) {
     return children;
@@ -44,7 +48,7 @@ export const Title = forwardRef<any, TitleProps>((props, ref) => {
             ? headingStyles.fontSize * headingStyles.lineHeight
             : headingStyles.fontSize * 1.3,
           fontWeight: fontWeight as any,
-          fontFamily: theme.headings.fontFamily || theme.fontFamilyBold,
+          fontFamily: fontFamily,
         },
         style,
       ]}

package/src/components/index.tsx

@@ -70,6 +70,7 @@ export * from './Image';
 export * from './BackgroundImage';
 export * from './ThemeIcon';
 export * from './ColorSwatch';
+export * from './Gradient';
 
 // Phase 5 components - Utility Components
 export * from './Transition';

package/src/theme/create-theme.ts

@@ -2,16 +2,14 @@ import { DEFAULT_COLORS, DEFAULT_THEME } from './default-theme';
 import type { MantineTheme } from './default-theme';
 
 export const createTheme = (theme?: Partial<MantineTheme>): MantineTheme => {
-  const { primaryShade = 7, other = {}, components = {} } = theme || {};
+  const { primaryShade, other = {}, components = {} } = theme || {};
   return {
     ...DEFAULT_THEME,
-    primaryShade: primaryShade,
+    // Use provided primaryShade or fall back to DEFAULT_THEME's value
+    primaryShade: primaryShade !== undefined ? primaryShade : DEFAULT_THEME.primaryShade,
     other: other,
     components: components,
     fontFamily: 'Nunito',
-    fontFamilyBold: 'Nunito Bold',
-    fontFamilySemiBold: 'Nunito SemiBold',
-    fontFamilyInput: 'Nunito',
     primaryColor: 'blue',
     secondaryColor: 'cyan',
     headings: {