react-native-mantine 0.14.0 → 0.15.0

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

@@ -1,29 +1,76 @@
+/**
+ * Attach helper functions to theme object
+ * Creates theme.fn object with all utility functions
+ * Aligned with Mantine web's theme function attachment pattern
+ */
+
+import type { MantineTheme, MantineThemeBase } from '../types';
 import { fns } from './fns';
+import {
+  createPrimaryShadeFunction,
+  createPrimaryColorFunction,
+} from './fns/primary-shade';
+import { createThemeColorFunction } from './fns/theme-color/theme-color';
 
-export function attachFunctions(themeBase: any): any {
+/**
+ * Attach helper functions to theme base object
+ * Converts MantineThemeBase to full MantineTheme with fn object
+ *
+ * @param themeBase - Base theme configuration without functions
+ * @returns Complete theme with attached helper functions
+ *
+ * @example
+ * const theme = attachFunctions(baseTheme);
+ * theme.fn.themeColor('blue', 5); // '#339af0'
+ * theme.fn.primaryShade(); // 6
+ * theme.fn.variant({ variant: 'filled', color: 'blue' });
+ */
+export function attachFunctions(themeBase: MantineThemeBase): MantineTheme {
   return {
     ...themeBase,
     fn: {
-      radius: fns.radius(themeBase),
+      // Color functions
+      themeColor: createThemeColorFunction(themeBase),
+      primaryShade: createPrimaryShadeFunction(themeBase),
+      primaryColor: createPrimaryColorFunction(themeBase),
+
+      // Variant function
+      variant: fns.variant(themeBase),
+
+      // Color manipulation
       rgba: fns.rgba(themeBase),
+      lighten: fns.lighten,
+      darken: fns.darken,
+      dimmed: fns.dimmed(themeBase),
+
+      // Size and spacing functions
+      radius: fns.radius(themeBase),
       size: fns.size(themeBase),
-      variant: fns.variant(themeBase),
-      themeColor: (color: string, shade?: number) =>
-        fns.themeColor({ theme: themeBase, color, shade }),
+
+      // Visual effects
       shadow: fns.shadow,
       gradient: fns.gradient(themeBase),
+
+      // Typography functions
       fontStyles: fns.fontStyles(themeBase),
       inputFontStyles: fns.inputFontStyles(themeBase),
-      focusStyles: fns.focusStyles(themeBase),
       placeholderStyles: fns.placeholderStyles(themeBase),
+      fontSize: fns.fontSize(themeBase),
+      lineHeight: fns.lineHeight(themeBase),
+      headingStyles: fns.headingStyles(themeBase),
+
+      // Layout functions
       cover: fns.cover(themeBase),
+      focusStyles: fns.focusStyles(themeBase),
       hover: fns.hover(themeBase),
-      lighten: fns.lighten,
-      darken: fns.darken,
-      dimmed: fns.dimmed(themeBase),
+
+      // Responsive functions
       largerThan: fns.largerThan(themeBase),
       smallerThan: fns.smallerThan(themeBase),
+
+      // Color scheme helpers
+      colorSchemeValue: fns.colorSchemeValue(themeBase),
+      colorSchemeConstants: fns.colorSchemeConstants(themeBase),
     },
-    activeStyles: fns.activeStyles(themeBase),
   };
 }

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

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import type { MantineTheme } from '../../default-theme';
+import type { MantineThemeBase } from '../../types';
 
 /**
  * Default breakpoint values in pixels
@@ -20,7 +20,7 @@ export type MantineNumberSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
  */
 function getBreakpointValue(
   breakpoint: MantineNumberSize,
-  theme: MantineTheme
+  theme: MantineThemeBase
 ): number {
   if (typeof breakpoint === 'number') {
     return breakpoint;
@@ -40,7 +40,7 @@ function getBreakpointValue(
  * @param theme - The Mantine theme
  * @returns A function that takes a breakpoint and returns a boolean
  */
-export function largerThan(theme: MantineTheme) {
+export function largerThan(theme: MantineThemeBase) {
   return (breakpoint: MantineNumberSize): boolean => {
     const { width } = Dimensions.get('window');
     const breakpointValue = getBreakpointValue(breakpoint, theme);
@@ -53,7 +53,7 @@ export function largerThan(theme: MantineTheme) {
  * @param theme - The Mantine theme
  * @returns A function that takes a breakpoint and returns a boolean
  */
-export function smallerThan(theme: MantineTheme) {
+export function smallerThan(theme: MantineThemeBase) {
   return (breakpoint: MantineNumberSize): boolean => {
     const { width } = Dimensions.get('window');
     const breakpointValue = getBreakpointValue(breakpoint, theme);

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

@@ -0,0 +1,200 @@
+/**
+ * Color scheme value helper
+ * Returns different values based on the current color scheme (light or dark mode)
+ * Useful for theme-aware constants like colors, spacing, etc.
+ */
+
+import type { MantineThemeBase, ColorScheme } from '../../types';
+
+/**
+ * Color scheme value type
+ * Represents a value that has different values for light and dark modes
+ */
+export interface ColorSchemeValue<T = any> {
+  light: T;
+  dark: T;
+}
+
+/**
+ * Type helper to resolve ColorSchemeValue types to their base types
+ * Recursively transforms ColorSchemeValue<T> to T in object structures
+ */
+export type ResolveColorSchemeValue<T> = T extends ColorSchemeValue<infer U>
+  ? U
+  : T extends Record<string, any>
+  ? { [K in keyof T]: ResolveColorSchemeValue<T[K]> }
+  : T;
+
+/**
+ * Check if a value is a color scheme value object
+ * @param value - Value to check
+ * @returns True if value is a ColorSchemeValue object
+ */
+export function isColorSchemeValue<T = any>(value: any): value is ColorSchemeValue<T> {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    'light' in value &&
+    'dark' in value &&
+    Object.keys(value).length === 2
+  );
+}
+
+/**
+ * Create a color scheme-aware value
+ * Returns an object with light and dark values
+ *
+ * @param light - Value for light mode
+ * @param dark - Value for dark mode
+ * @returns ColorSchemeValue object
+ *
+ * @example
+ * const backgroundColor = colorSchemeValue('#FCFCFC', '#272727');
+ * // { light: '#FCFCFC', dark: '#272727' }
+ */
+export function colorSchemeValue<T = any>(light: T, dark: T): ColorSchemeValue<T> {
+  return { light, dark };
+}
+
+/**
+ * Get the appropriate value based on color scheme
+ * If the value is a ColorSchemeValue object, returns the appropriate value
+ * Otherwise, returns the value as-is
+ *
+ * @param value - Value or ColorSchemeValue object
+ * @param colorScheme - Current color scheme
+ * @returns Resolved value for the current color scheme
+ *
+ * @example
+ * const bgColor = resolveColorSchemeValue({ light: '#fff', dark: '#000' }, 'dark');
+ * // '#000'
+ *
+ * @example
+ * const fixedColor = resolveColorSchemeValue('#blue', 'dark');
+ * // '#blue'
+ */
+export function resolveColorSchemeValue<T = any>(
+  value: T | ColorSchemeValue<T>,
+  colorScheme: ColorScheme
+): T {
+  if (isColorSchemeValue(value)) {
+    return value[colorScheme];
+  }
+  return value as T;
+}
+
+/**
+ * Create a theme function that resolves color scheme values
+ * This is attached to theme.fn.colorSchemeValue
+ *
+ * @param theme - Mantine theme base
+ * @returns Function that resolves color scheme values based on current theme
+ */
+export const createColorSchemeValueFunction = (theme: MantineThemeBase) => {
+  /**
+   * Get value based on current color scheme
+   * Returns the appropriate value for light or dark mode
+   *
+   * @param value - Value or ColorSchemeValue object
+   * @returns Resolved value for current color scheme
+   *
+   * @example
+   * // In a component using theme
+   * const theme = useTheme();
+   * const bgColor = theme.fn.colorSchemeValue({ light: '#fff', dark: '#000' });
+   * // Returns '#fff' in light mode, '#000' in dark mode
+   *
+   * @example
+   * // With fixed value
+   * const color = theme.fn.colorSchemeValue('#blue');
+   * // Returns '#blue' regardless of color scheme
+   */
+  return <T = any>(value: T | ColorSchemeValue<T>): T => {
+    return resolveColorSchemeValue(value, theme.colorScheme);
+  };
+};
+
+/**
+ * Helper to create a set of color scheme-aware constants
+ * Converts an object with ColorSchemeValue properties into resolved values
+ *
+ * @param constants - Object with ColorSchemeValue properties
+ * @param colorScheme - Current color scheme
+ * @returns Object with resolved values
+ *
+ * @example
+ * const constants = {
+ *   text: { light: '#000', dark: '#fff' },
+ *   background: { light: '#FCFCFC', dark: '#272727' },
+ *   primaryButtonBackground: { light: '#00203E', dark: '#2581C4' },
+ *   fixedColor: '#blue', // Non-scheme values pass through
+ * };
+ *
+ * const resolved = resolveColorSchemeConstants(constants, 'dark');
+ * // {
+ * //   text: '#fff',
+ * //   background: '#272727',
+ * //   primaryButtonBackground: '#2581C4',
+ * //   fixedColor: '#blue'
+ * // }
+ */
+export function resolveColorSchemeConstants<T extends Record<string, any>>(
+  constants: T,
+  colorScheme: ColorScheme
+): ResolveColorSchemeValue<T> {
+  const resolved = {} as T;
+
+  for (const key in constants) {
+    if (Object.prototype.hasOwnProperty.call(constants, key)) {
+      const value = constants[key];
+
+      if (isColorSchemeValue(value)) {
+        resolved[key] = value[colorScheme] as any;
+      } else if (value !== null && typeof value === 'object' && !Array.isArray(value)) {
+        // Recursively resolve nested objects
+        resolved[key] = resolveColorSchemeConstants(value, colorScheme);
+      } else {
+        // Pass through non-scheme values
+        resolved[key] = value;
+      }
+    }
+  }
+
+  return resolved as ResolveColorSchemeValue<T>;
+}
+
+/**
+ * Create a theme function that resolves color scheme constants
+ * This is attached to theme.fn.colorSchemeConstants
+ *
+ * @param theme - Mantine theme base
+ * @returns Function that resolves all constants in an object based on current theme
+ */
+export const createColorSchemeConstantsFunction = (theme: MantineThemeBase) => {
+  /**
+   * Resolve all color scheme values in an object
+   * Useful for resolving a set of constants stored in theme.other
+   *
+   * @param constants - Object containing ColorSchemeValue properties
+   * @returns Object with all values resolved for current color scheme
+   *
+   * @example
+   * // Define constants in theme
+   * const theme = createTheme({
+   *   other: {
+   *     colors: {
+   *       text: { light: '#000', dark: '#fff' },
+   *       background: { light: '#FCFCFC', dark: '#272727' },
+   *     }
+   *   }
+   * });
+   *
+   * // In component
+   * const colors = theme.fn.colorSchemeConstants(theme.other.colors);
+   * // { text: '#000', background: '#FCFCFC' } in light mode
+   * // { text: '#fff', background: '#272727' } in dark mode
+   */
+  return <T extends Record<string, any>>(constants: T): ResolveColorSchemeValue<T> => {
+    return resolveColorSchemeConstants(constants, theme.colorScheme);
+  };
+};

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

@@ -1,4 +1,4 @@
-import type { MantineTheme } from '../../default-theme';
+import type { MantineThemeBase } from '../../types';
 
 /**
  * Returns a dimmed text color based on the current color scheme
@@ -6,7 +6,7 @@ import type { MantineTheme } from '../../default-theme';
  * @param theme - The Mantine theme
  * @returns A function that returns the dimmed color
  */
-export function dimmed(theme: MantineTheme) {
+export function dimmed(theme: MantineThemeBase) {
   return () => {
     const colorScheme = theme.currentMode || 'light';
     return colorScheme === 'dark'

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

@@ -1,5 +1,4 @@
-import type { MantineTheme } from '../../../default-theme';
-import type { MantineGradient, GradientConfig } from '../../../theme.d';
+import type { MantineThemeBase, MantineGradient, GradientConfig } from '../../../types';
 import { themeColor } from '../theme-color/theme-color';
 import { getPrimaryShade } from '../primary-shade';
 
@@ -32,7 +31,7 @@ function degToCoordinates(deg: number): { start: { x: number; y: number }; end:
  * Creates a gradient configuration for use with expo-linear-gradient
  * Returns gradient colors and coordinates based on theme gradient settings
  */
-export function gradient(theme: MantineTheme) {
+export function gradient(theme: MantineThemeBase) {
   return (payload?: MantineGradient): GradientConfig => {
     const merged = {
       from: payload?.from || theme.defaultGradient?.from || theme.primaryColor,

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

@@ -1,31 +1,72 @@
-import type { MantineTheme } from '../../default-theme';
+import type { MantineThemeBase, MantineNumberSize } from '../../types';
+import type { TextStyle } from 'react-native';
+import { getSize } from '../../get-size';
 
-export const fontStyles = (theme: MantineTheme) => () => ({
+/**
+ * Returns base font styles from theme
+ * Includes fontFamily and lineHeight
+ */
+export const fontStyles = (theme: MantineThemeBase) => () => ({
   fontFamily: theme.fontFamily,
+  lineHeight: theme.lineHeight,
 });
 
 /**
  * Returns font styles specifically for input components
  */
-export const inputFontStyles = (theme: MantineTheme) => () => {
+export const inputFontStyles = (theme: MantineThemeBase) => () => {
+  return {
+    fontFamily: theme.fontFamilyInput,
+    fontSize: theme.fontSizes.md,
+    lineHeight: theme.lineHeights.md,
+  };
+};
+
+/**
+ * Get font size from theme
+ * @param size - Size key or number
+ */
+export const fontSize = (theme: MantineThemeBase) => (size: MantineNumberSize) => {
+  return getSize({ size, sizes: theme.fontSizes });
+};
+
+/**
+ * Get line height from theme
+ * @param size - Size key or number (unitless multiplier)
+ */
+export const lineHeight = (theme: MantineThemeBase) => (size: MantineNumberSize) => {
+  return getSize({ size, sizes: theme.lineHeights });
+};
+
+/**
+ * Get heading styles by order
+ * @param order - Heading level (1-6)
+ */
+export const headingStyles = (theme: MantineThemeBase) => (order: 1 | 2 | 3 | 4 | 5 | 6) => {
+  const headingKey = `h${order}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  const heading = theme.headings.sizes[headingKey];
+
   return {
-    fontFamily: theme.fontFamily,
+    fontSize: heading.fontSize,
+    lineHeight: heading.lineHeight * heading.fontSize,
+    fontWeight: (heading.fontWeight ?? theme.headings.fontWeight ?? theme.fontWeights.bold) as TextStyle['fontWeight'],
+    fontFamily: heading.fontFamily ?? theme.headings.fontFamily ?? theme.fontFamilyBold,
   };
 };
 
-export const focusStyles = (_theme: MantineTheme) => () => ({
+export const focusStyles = (_theme: MantineThemeBase) => () => ({
   // 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) => () => ({
+export const placeholderStyles = (_theme: MantineThemeBase) => () => ({
   // Placeholder styles for inputs
   opacity: 0.6,
 });
 
 export const cover =
-  (_theme: MantineTheme) =>
+  (_theme: MantineThemeBase) =>
   (offset: number = 0) => ({
     position: 'absolute' as const,
     top: offset,
@@ -34,13 +75,13 @@ export const cover =
     left: offset,
   });
 
-export const hover = (_theme: MantineTheme) => (styles: any) => ({
+export const hover = (_theme: MantineThemeBase) => (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) => ({
+export const activeStyles = (_theme: MantineThemeBase) => ({
   // Active/pressed state styles
   opacity: 0.8,
   transform: [{ scale: 0.98 }],

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

@@ -1,9 +1,14 @@
+/**
+ * Theme helper functions
+ * Exports all utility functions for theme manipulation
+ */
+
 import { radius } from './radius';
 import { rgba } from './rgba';
 import { size } from './size';
 import { themeColor } from './theme-color/theme-color';
 import { variant } from './variant';
-import { getPrimaryShade } from './primary-shade';
+import { getPrimaryShade, getPrimaryColor } from './primary-shade';
 import { shadow } from './shadow';
 import { gradient } from './gradient/gradient';
 import { lighten } from './lighten';
@@ -11,14 +16,59 @@ import { darken } from './darken';
 import { dimmed } from './dimmed';
 import { largerThan, smallerThan } from './breakpoints';
 import * as helpers from './helpers';
+import {
+  createColorSchemeValueFunction,
+  createColorSchemeConstantsFunction,
+} from './color-scheme-value';
 
+/**
+ * Collection of all theme helper functions
+ * Used by attach-functions to create theme.fn object
+ */
 export const fns = {
+  // Color functions
+  themeColor,
+  getPrimaryShade,
+  getPrimaryColor,
+
+  // Variant function
+  variant,
+
+  // Color manipulation
+  rgba,
+  lighten,
+  darken,
+  dimmed,
+
+  // Size and spacing
+  radius,
+  size,
+
+  // Visual effects
+  shadow,
+  gradient,
+
+  // Responsive
+  largerThan,
+  smallerThan,
+
+  // Color scheme helpers
+  colorSchemeValue: createColorSchemeValueFunction,
+  colorSchemeConstants: createColorSchemeConstantsFunction,
+
+  // Helper functions from helpers module
+  ...helpers,
+};
+
+// Re-export individual functions for direct imports
+export {
   radius,
   rgba,
   size,
-  variant,
   themeColor,
+  variant,
   getPrimaryShade,
+  getPrimaryColor,
   shadow,
   gradient,
   lighten,
@@ -26,5 +76,15 @@ export const fns = {
   dimmed,
   largerThan,
   smallerThan,
-  ...helpers,
 };
+
+// Re-export color scheme helpers
+export {
+  colorSchemeValue,
+  resolveColorSchemeValue,
+  resolveColorSchemeConstants,
+  isColorSchemeValue,
+  createColorSchemeValueFunction,
+  createColorSchemeConstantsFunction,
+} from './color-scheme-value';
+export type { ColorSchemeValue, ResolveColorSchemeValue } from './color-scheme-value';

package/src/theme/functions/fns/primary-shade.ts

@@ -1,17 +1,93 @@
-import type { MantineTheme } from '../../default-theme';
-
 /**
+ * Primary shade helper function
  * Returns the appropriate primary shade based on the current color scheme
- * Matches Mantine web implementation
+ * Aligned with Mantine web's primaryShade implementation
+ */
+
+import type { MantineThemeBase, ColorScheme, Shade } from '../../types';
+
+/**
+ * Get the primary shade for the current color scheme
+ *
+ * If theme.primaryShade is a number, returns that number.
+ * If theme.primaryShade is an object with light/dark values, returns the
+ * appropriate value based on the color scheme.
+ *
+ * @param theme - Mantine theme object
+ * @param colorScheme - Optional color scheme override (light or dark)
+ * @returns Shade value (0-9)
+ *
+ * @example
+ * // With theme.primaryShade = { light: 6, dark: 8 }
+ * // and theme.colorScheme = 'light'
+ * getPrimaryShade(theme) // returns 6
+ *
+ * @example
+ * // With explicit colorScheme override
+ * getPrimaryShade(theme, 'dark') // returns 8
+ *
+ * @example
+ * // With theme.primaryShade = 7 (single number)
+ * getPrimaryShade(theme) // returns 7
  */
-export function getPrimaryShade(
-  theme: MantineTheme,
-  colorScheme?: 'light' | 'dark'
-): number {
+export function getPrimaryShade(theme: MantineThemeBase, colorScheme?: ColorScheme): Shade {
+  // If primaryShade is a single number, return it directly
   if (typeof theme.primaryShade === 'number') {
     return theme.primaryShade;
   }
 
-  const scheme = colorScheme || theme.currentMode || 'light';
+  // Determine which color scheme to use
+  // Priority: 1. parameter override, 2. theme.colorScheme, 3. default to 'light'
+  const scheme = colorScheme || theme.colorScheme || 'light';
+
+  // Return the appropriate shade for the color scheme
   return theme.primaryShade[scheme];
 }
+
+/**
+ * Curried version of getPrimaryShade for use with theme.fn
+ * Matches Mantine web's theme.fn.primaryShade signature
+ *
+ * @internal
+ */
+export function createPrimaryShadeFunction(theme: MantineThemeBase) {
+  return (colorScheme?: ColorScheme): Shade => {
+    return getPrimaryShade(theme, colorScheme);
+  };
+}
+
+/**
+ * Get the primary color at the primary shade
+ *
+ * @param theme - Mantine theme object
+ * @param colorScheme - Optional color scheme override
+ * @returns Color string value
+ *
+ * @example
+ * // Get primary color at primary shade
+ * getPrimaryColor(theme) // returns '#228be6' (blue[6])
+ */
+export function getPrimaryColor(theme: MantineThemeBase, colorScheme?: ColorScheme): string {
+  const shade = getPrimaryShade(theme, colorScheme);
+  const primaryPalette = theme.colors[theme.primaryColor];
+
+  if (!primaryPalette) {
+    console.warn(
+      `Primary color "${theme.primaryColor}" not found in theme.colors. Falling back to 'blue'.`
+    );
+    return theme.colors.blue?.[shade] || '#228be6';
+  }
+
+  return primaryPalette[shade] || primaryPalette[0] || '#228be6';
+}
+
+/**
+ * Curried version of getPrimaryColor for use with theme.fn
+ *
+ * @internal
+ */
+export function createPrimaryColorFunction(theme: MantineThemeBase) {
+  return (colorScheme?: ColorScheme): string => {
+    return getPrimaryColor(theme, colorScheme);
+  };
+}

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

@@ -84,7 +84,7 @@ const SHADOW_CONFIG: Record<MantineShadow, { ios: ShadowStyles; android: ShadowS
  * // Android will get: { elevation: 4 }
  * const shadowStyles = shadow('md');
  */
-export function shadow(size?: MantineShadow | MantineSize): ShadowStyles {
+export function shadow(size?: MantineSize): ShadowStyles {
   if (!size) {
     return {};
   }

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

@@ -6,9 +6,10 @@ export function size(_theme: any) {
     size,
     sizes,
   }: {
-    size: MantineNumberSize;
+    size?: MantineNumberSize | (string & {});
     sizes: Sizes;
-  }): number => {
-    return getSize({ size, sizes }) as number;
+  }): number | string => {
+    if (!size) return 0;
+    return getSize({ size: size as MantineNumberSize, sizes }) as number | string;
   };
 }