react-native-mantine 0.14.0 → 0.16.0

package/src/theme/create-theme.ts

@@ -1,25 +1,136 @@
-import { DEFAULT_COLORS, DEFAULT_THEME } from './default-theme';
-import type { MantineTheme } from './default-theme';
+/**
+ * Create custom Mantine theme
+ * Merges user overrides with default theme configuration
+ * Aligned with Mantine web's createTheme/mergeTheme pattern
+ */
+
+import { _DEFAULT_THEME, DEFAULT_THEME } from './default-theme';
+import { DEFAULT_COLORS } from './default-colors';
+import type {
+  MantineTheme,
+  MantineThemeOverride,
+  MantineThemeBase,
+  MantineThemeColors,
+} from './types';
 import { attachFunctions } from './functions/attach-functions';
 
-export const createTheme = (theme?: Partial<MantineTheme>): MantineTheme => {
-  const { primaryShade, other = {}, components = {} } = theme || {};
-  const themeBase = {
-    ...DEFAULT_THEME,
-    // Use provided primaryShade or fall back to DEFAULT_THEME's value
-    primaryShade: primaryShade !== undefined ? primaryShade : DEFAULT_THEME.primaryShade,
-    other: other,
-    components: components,
-    fontFamily: 'Nunito',
-    primaryColor: 'blue',
-    secondaryColor: 'cyan',
-    headings: {
-      ...DEFAULT_THEME.headings,
-      fontFamily: 'Nunito',
-    },
-    colors: DEFAULT_COLORS,
-  };
-
-  // Attach theme functions to ensure fn.gradient and other functions are available
-  return attachFunctions(themeBase);
-};
+/**
+ * Deep merge helper for theme objects
+ * Handles nested objects and arrays properly
+ */
+function deepMerge<T extends Record<string, any>>(target: T, source: Partial<T>): T {
+  const result = { ...target };
+
+  for (const key in source) {
+    if (Object.prototype.hasOwnProperty.call(source, key)) {
+      const sourceValue = source[key];
+      const targetValue = result[key];
+
+      if (
+        sourceValue &&
+        typeof sourceValue === 'object' &&
+        !Array.isArray(sourceValue) &&
+        targetValue &&
+        typeof targetValue === 'object' &&
+        !Array.isArray(targetValue)
+      ) {
+        // Recursively merge nested objects
+        result[key] = deepMerge(targetValue, sourceValue) as any;
+      } else if (sourceValue !== undefined) {
+        // Direct assignment for primitives, arrays, and undefined target values
+        result[key] = sourceValue as any;
+      }
+    }
+  }
+
+  return result;
+}
+
+/**
+ * Create a custom Mantine theme
+ *
+ * Merges provided theme overrides with the default theme configuration.
+ * Returns a complete theme object with all helper functions attached.
+ *
+ * @param override - Partial theme configuration to override defaults
+ * @returns Complete Mantine theme with attached helper functions
+ *
+ * @example
+ * // Create theme with custom primary color
+ * const theme = createTheme({
+ *   primaryColor: 'teal',
+ * });
+ *
+ * @example
+ * // Create theme with custom colors and primary shade
+ * const theme = createTheme({
+ *   primaryColor: 'brand',
+ *   primaryShade: { light: 5, dark: 7 },
+ *   colors: {
+ *     brand: [
+ *       '#e6f7ff',
+ *       '#bae7ff',
+ *       '#91d5ff',
+ *       '#69c0ff',
+ *       '#40a9ff',
+ *       '#1890ff',
+ *       '#096dd9',
+ *       '#0050b3',
+ *       '#003a8c',
+ *       '#002766',
+ *     ],
+ *   },
+ * });
+ *
+ * @example
+ * // Create theme with custom typography
+ * const theme = createTheme({
+ *   fontFamily: 'Nunito',
+ *   headings: {
+ *     fontFamily: 'Nunito-Bold',
+ *     sizes: {
+ *       h1: { fontSize: 40, lineHeight: 1.2 },
+ *     },
+ *   },
+ * });
+ */
+export function createTheme(override?: MantineThemeOverride): MantineTheme {
+  if (!override) {
+    return DEFAULT_THEME;
+  }
+
+  // Create base theme by merging override with default
+  const mergedBase: MantineThemeBase = deepMerge(_DEFAULT_THEME, override as any);
+
+  // Ensure colors includes all defaults plus any custom colors
+  if (override.colors) {
+    mergedBase.colors = {
+      ...DEFAULT_COLORS,
+      ...override.colors,
+    } as MantineThemeColors;
+  }
+
+  // Attach helper functions to create complete theme
+  return attachFunctions(mergedBase);
+}
+
+/**
+ * Merge multiple theme overrides
+ * Useful for combining theme configurations
+ *
+ * @param themes - Array of theme overrides to merge
+ * @returns Merged theme override
+ *
+ * @example
+ * const brandTheme = { primaryColor: 'brand' };
+ * const typographyTheme = { fontFamily: 'Nunito' };
+ * const merged = mergeThemeOverrides(brandTheme, typographyTheme);
+ */
+export function mergeThemeOverrides(
+  ...themes: MantineThemeOverride[]
+): MantineThemeOverride {
+  return themes.reduce(
+    (acc, theme) => deepMerge(acc as any, theme as any),
+    {} as MantineThemeOverride
+  );
+}

package/src/theme/default-colors.ts

@@ -0,0 +1,252 @@
+/**
+ * Default Mantine color palettes
+ * 10-shade system (0 = lightest, 9 = darkest)
+ * Identical to Mantine web v6 color values
+ */
+
+import type { MantineThemeColors, MantineColorsTuple } from './types';
+
+/**
+ * Dark color palette - used for UI elements in dark mode
+ */
+const dark: MantineColorsTuple = [
+  '#C1C2C5',
+  '#A6A7AB',
+  '#909296',
+  '#5c5f66',
+  '#373A40',
+  '#2C2E33',
+  '#25262b',
+  '#1A1B1E',
+  '#141517',
+  '#101113',
+];
+
+/**
+ * Gray color palette - neutral colors for UI elements
+ */
+const gray: MantineColorsTuple = [
+  '#f8f9fa',
+  '#f1f3f5',
+  '#e9ecef',
+  '#dee2e6',
+  '#ced4da',
+  '#adb5bd',
+  '#868e96',
+  '#495057',
+  '#343a40',
+  '#212529',
+];
+
+/**
+ * Red color palette
+ */
+const red: MantineColorsTuple = [
+  '#fff5f5',
+  '#ffe3e3',
+  '#ffc9c9',
+  '#ffa8a8',
+  '#ff8787',
+  '#ff6b6b',
+  '#fa5252',
+  '#f03e3e',
+  '#e03131',
+  '#c92a2a',
+];
+
+/**
+ * Pink color palette
+ */
+const pink: MantineColorsTuple = [
+  '#fff0f6',
+  '#ffdeeb',
+  '#fcc2d7',
+  '#faa2c1',
+  '#f783ac',
+  '#f06595',
+  '#e64980',
+  '#d6336c',
+  '#c2255c',
+  '#a61e4d',
+];
+
+/**
+ * Grape color palette
+ */
+const grape: MantineColorsTuple = [
+  '#f8f0fc',
+  '#f3d9fa',
+  '#eebefa',
+  '#e599f7',
+  '#da77f2',
+  '#cc5de8',
+  '#be4bdb',
+  '#ae3ec9',
+  '#9c36b5',
+  '#862e9c',
+];
+
+/**
+ * Violet color palette
+ */
+const violet: MantineColorsTuple = [
+  '#f3f0ff',
+  '#e5dbff',
+  '#d0bfff',
+  '#b197fc',
+  '#9775fa',
+  '#845ef7',
+  '#7950f2',
+  '#7048e8',
+  '#6741d9',
+  '#5f3dc4',
+];
+
+/**
+ * Indigo color palette
+ */
+const indigo: MantineColorsTuple = [
+  '#edf2ff',
+  '#dbe4ff',
+  '#bac8ff',
+  '#91a7ff',
+  '#748ffc',
+  '#5c7cfa',
+  '#4c6ef5',
+  '#4263eb',
+  '#3b5bdb',
+  '#364fc7',
+];
+
+/**
+ * Blue color palette - default primary color
+ */
+const blue: MantineColorsTuple = [
+  '#e7f5ff',
+  '#d0ebff',
+  '#a5d8ff',
+  '#74c0fc',
+  '#4dabf7',
+  '#339af0',
+  '#228be6',
+  '#1c7ed6',
+  '#1971c2',
+  '#1864ab',
+];
+
+/**
+ * Cyan color palette
+ */
+const cyan: MantineColorsTuple = [
+  '#e3fafc',
+  '#c5f6fa',
+  '#99e9f2',
+  '#66d9e8',
+  '#3bc9db',
+  '#22b8cf',
+  '#15aabf',
+  '#1098ad',
+  '#0c8599',
+  '#0b7285',
+];
+
+/**
+ * Teal color palette
+ */
+const teal: MantineColorsTuple = [
+  '#e6fcf5',
+  '#c3fae8',
+  '#96f2d7',
+  '#63e6be',
+  '#38d9a9',
+  '#20c997',
+  '#12b886',
+  '#0ca678',
+  '#099268',
+  '#087f5b',
+];
+
+/**
+ * Green color palette
+ */
+const green: MantineColorsTuple = [
+  '#ebfbee',
+  '#d3f9d8',
+  '#b2f2bb',
+  '#8ce99a',
+  '#69db7c',
+  '#51cf66',
+  '#40c057',
+  '#37b24d',
+  '#2f9e44',
+  '#2b8a3e',
+];
+
+/**
+ * Lime color palette
+ */
+const lime: MantineColorsTuple = [
+  '#f4fce3',
+  '#e9fac8',
+  '#d8f5a2',
+  '#c0eb75',
+  '#a9e34b',
+  '#94d82d',
+  '#82c91e',
+  '#74b816',
+  '#66a80f',
+  '#5c940d',
+];
+
+/**
+ * Yellow color palette
+ */
+const yellow: MantineColorsTuple = [
+  '#fff9db',
+  '#fff3bf',
+  '#ffec99',
+  '#ffe066',
+  '#ffd43b',
+  '#fcc419',
+  '#fab005',
+  '#f59f00',
+  '#f08c00',
+  '#e67700',
+];
+
+/**
+ * Orange color palette
+ */
+const orange: MantineColorsTuple = [
+  '#fff4e6',
+  '#ffe8cc',
+  '#ffd8a8',
+  '#ffc078',
+  '#ffa94d',
+  '#ff922b',
+  '#fd7e14',
+  '#f76707',
+  '#e8590c',
+  '#d9480f',
+];
+
+/**
+ * Default Mantine color palette
+ * Contains all 14 default color schemes
+ */
+export const DEFAULT_COLORS: MantineThemeColors = {
+  dark,
+  gray,
+  red,
+  pink,
+  grape,
+  violet,
+  indigo,
+  blue,
+  cyan,
+  teal,
+  green,
+  lime,
+  yellow,
+  orange,
+};