react-native-mantine 0.13.0 → 0.15.0

package/lib/module/theme/functions/fns/theme-color/color-utils.js

@@ -0,0 +1,189 @@
+"use strict";
+
+/**
+ * Color utility functions for custom color support
+ * Handles detection and manipulation of custom hex/rgb/rgba colors
+ */
+
+/**
+ * Check if a color string is a custom color value (not a palette key)
+ *
+ * Custom colors include:
+ * - Hex colors: #fff, #ffffff
+ * - RGB colors: rgb(255, 255, 255)
+ * - RGBA colors: rgba(255, 255, 255, 0.5)
+ * - HSL colors: hsl(0, 100%, 50%)
+ * - HSLA colors: hsla(0, 100%, 50%, 0.5)
+ * - CSS named colors like 'transparent', 'currentColor'
+ *
+ * @param color - Color string to check
+ * @returns true if color is a custom value, false if it might be a palette key
+ */
+export function isCustomColor(color) {
+  if (!color || typeof color !== 'string') {
+    return false;
+  }
+
+  // Check for hex colors
+  if (color.startsWith('#')) {
+    return true;
+  }
+
+  // Check for rgb/rgba colors
+  if (color.startsWith('rgb')) {
+    return true;
+  }
+
+  // Check for hsl/hsla colors
+  if (color.startsWith('hsl')) {
+    return true;
+  }
+
+  // Check for CSS keywords
+  if (color === 'transparent' || color === 'currentColor') {
+    return true;
+  }
+
+  // Otherwise, assume it's a palette key or CSS named color
+  return false;
+}
+
+/**
+ * Generate a lighter shade of a custom color
+ * Used when shade 0-5 is requested for custom colors
+ *
+ * @param color - Base color (hex or rgb) - treated as shade 6
+ * @param shadeIndex - Shade index (0-5)
+ * @returns Lighter color string
+ */
+export function generateLighterShade(color, shadeIndex) {
+  // For shades 0-5, lighten the color (base is shade 6)
+  // shade 0 = lightest (90% lighter), shade 5 = slightly lighter (15% lighter)
+  const lightenAmount = (6 - shadeIndex) * 0.15; // 0.9 to 0.15
+
+  // Use the lighten algorithm from lighten.ts
+  const rgba = parseColorToRgba(color);
+  if (!rgba) return color;
+  const {
+    r,
+    g,
+    b,
+    a
+  } = rgba;
+  const light = input => Math.round(input + (255 - input) * lightenAmount);
+  return `rgba(${light(r)}, ${light(g)}, ${light(b)}, ${a})`;
+}
+
+/**
+ * Generate a darker shade of a custom color
+ * Used when shade 7-9 is requested for custom colors
+ *
+ * @param color - Base color (hex or rgb) - treated as shade 6
+ * @param shadeIndex - Shade index (7-9)
+ * @returns Darker color string
+ */
+export function generateDarkerShade(color, shadeIndex) {
+  // For shades 7-9, darken the color (base is shade 6)
+  // shade 7 = slightly darker (10% darker), shade 9 = darkest (30% darker)
+  const darkenAmount = (shadeIndex - 6) * 0.1; // 0.1 to 0.3
+
+  // Use the darken algorithm from darken.ts
+  const rgba = parseColorToRgba(color);
+  if (!rgba) return color;
+  const {
+    r,
+    g,
+    b,
+    a
+  } = rgba;
+  const f = 1 - darkenAmount;
+  const dark = input => Math.round(input * f);
+  return `rgba(${dark(r)}, ${dark(g)}, ${dark(b)}, ${a})`;
+}
+
+/**
+ * Get a shade variation of a custom color
+ *
+ * For custom colors, we treat shade 6 as the base color (no modification).
+ * This aligns with the default primaryShade for light mode.
+ * Shades 0-5 are lighter, shades 7-9 are darker.
+ *
+ * @param color - Base color (hex or rgb)
+ * @param shade - Shade index (0-9), where 6 is the base color
+ * @returns Color at the requested shade
+ */
+export function getCustomColorShade(color, shade) {
+  // Shade 6 is treated as the base color (most common primaryShade for light mode)
+  if (shade === 6) {
+    return color;
+  }
+
+  // Lighter shades (0-5)
+  if (shade < 6) {
+    return generateLighterShade(color, shade);
+  }
+
+  // Darker shades (7-9)
+  return generateDarkerShade(color, shade);
+}
+
+/**
+ * Parse color string to RGBA object
+ * Supports hex and rgb/rgba formats
+ */
+
+function parseColorToRgba(color) {
+  // Handle hex colors
+  if (color.startsWith('#')) {
+    return hexToRgba(color);
+  }
+
+  // Handle rgb/rgba colors
+  if (color.startsWith('rgb')) {
+    return rgbStringToRgba(color);
+  }
+  return null;
+}
+function isHexColor(hex) {
+  const HEX_REGEXP = /^#?([0-9A-F]{3}){1,2}$/i;
+  return HEX_REGEXP.test(hex);
+}
+function hexToRgba(color) {
+  if (!isHexColor(color)) {
+    return null;
+  }
+  let hexString = color.replace('#', '');
+
+  // Handle shorthand hex (#fff -> #ffffff)
+  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) {
+  const parts = color.replace(/[^0-9,.]/g, '').split(',').map(Number);
+  if (parts.length < 3) {
+    return null;
+  }
+  const r = parts[0] || 0;
+  const g = parts[1] || 0;
+  const b = parts[2] || 0;
+  const a = parts[3] !== undefined ? parts[3] : 1;
+  return {
+    r,
+    g,
+    b,
+    a
+  };
+}
+//# sourceMappingURL=color-utils.js.map

package/lib/module/theme/functions/fns/theme-color/color-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isCustomColor","color","startsWith","generateLighterShade","shadeIndex","lightenAmount","rgba","parseColorToRgba","r","g","b","a","light","input","Math","round","generateDarkerShade","darkenAmount","f","dark","getCustomColorShade","shade","hexToRgba","rgbStringToRgba","isHexColor","hex","HEX_REGEXP","test","hexString","replace","length","shorthandHex","split","join","parsed","parseInt","parts","map","Number","undefined"],"sourceRoot":"../../../../../../src","sources":["theme/functions/fns/theme-color/color-utils.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/functions/fns/theme-color/theme-color.js

@@ -1,31 +1,113 @@
 "use strict";
 
+/**
+ * Theme color helper function
+ * Retrieves colors from theme palette with proper shade handling
+ * Aligned with Mantine web's themeColor implementation
+ *
+ * Now supports custom color values (hex, rgb, rgba) that are not in the theme palette.
+ * Custom colors can be shaded on the fly using color manipulation algorithms.
+ */
+
 import { getPrimaryShade } from "../primary-shade.js";
+import { isCustomColor, getCustomColorShade } from "./color-utils.js";
+/**
+ * Get a color value from the theme
+ *
+ * @param theme - Mantine theme object
+ * @param color - Color name or CSS color value (now supports hex/rgb/rgba)
+ * @param shade - Optional shade (0-9). If not provided, uses primaryShade
+ * @param primaryFallback - If true and color not found, falls back to primary color
+ * @returns Color string value
+ *
+ * @example
+ * // Get blue at primary shade (6 for light mode, 8 for dark mode)
+ * themeColor({ theme, color: 'blue' })
+ *
+ * @example
+ * // Get blue at specific shade
+ * themeColor({ theme, color: 'blue', shade: 5 })
+ *
+ * @example
+ * // Pass through CSS color values
+ * themeColor({ theme, color: '#ff0000' }) // returns '#ff0000'
+ *
+ * @example
+ * // Use custom hex color with shade
+ * themeColor({ theme, color: '#FF5733', shade: 7 }) // returns darker version
+ *
+ * @example
+ * // Use custom rgb color with shade
+ * themeColor({ theme, color: 'rgb(255, 87, 51)', shade: 3 }) // returns lighter version
+ *
+ * @example
+ * // Use primary color fallback
+ * themeColor({ theme, color: 'unknown', primaryFallback: true })
+ */
 export function themeColor({
   theme,
   color,
-  shade
+  shade,
+  primaryFallback = false
 }) {
+  // Handle undefined/null color
   if (!color) {
-    return '';
+    return primaryFallback ? themeColor({
+      theme,
+      color: theme.primaryColor,
+      shade
+    }) : '';
   }
 
-  // If it's a hex/rgb color, return as is
-  if (color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl')) {
+  // Check if this is a custom color value (hex, rgb, rgba, etc.)
+  if (isCustomColor(color)) {
+    // If shade is specified, generate a shade variation
+    if (shade !== undefined) {
+      return getCustomColorShade(color, shade);
+    }
+    // Otherwise return the color as-is
     return color;
   }
 
-  // Get from theme colors
+  // Get color palette from theme
   const colorPalette = theme.colors[color];
+
+  // If color not in palette
   if (!colorPalette) {
-    // If color not in palette, return as is (might be a CSS color name)
+    // Try primary fallback if enabled
+    if (primaryFallback && color !== theme.primaryColor) {
+      return themeColor({
+        theme,
+        color: theme.primaryColor,
+        shade
+      });
+    }
+    // Otherwise return the color string as-is (might be a named CSS color)
     return color;
   }
 
-  // Use provided shade or get from theme based on color scheme
+  // Determine which shade to use
   const colorShade = shade !== undefined ? shade : getPrimaryShade(theme);
 
-  // Return the color at the specified shade
-  return colorPalette[colorShade] || colorPalette[0] || color;
+  // Get the color at the specified shade
+  const resolvedColor = colorPalette[colorShade];
+
+  // Return the color or fall back to first shade
+  return resolvedColor || colorPalette[0] || color;
+}
+
+/**
+ * Curried version of themeColor for use with theme.fn
+ * @internal
+ */
+export function createThemeColorFunction(theme) {
+  return (color, shade, primaryFallback) => {
+    return themeColor({
+      theme,
+      color,
+      shade,
+      primaryFallback
+    });
+  };
 }
 //# sourceMappingURL=theme-color.js.map

package/lib/module/theme/functions/fns/theme-color/theme-color.js.map

@@ -1 +1 @@
-{"version":3,"names":["getPrimaryShade","themeColor","theme","color","shade","startsWith","colorPalette","colors","colorShade","undefined"],"sourceRoot":"../../../../../../src","sources":["theme/functions/fns/theme-color/theme-color.ts"],"mappings":";;AAEA,SAASA,eAAe,QAAQ,qBAAkB;AAQlD,OAAO,SAASC,UAAUA,CAAC;EAAEC,KAAK;EAAEC,KAAK;EAAEC;AAAuB,CAAC,EAAU;EAC3E,IAAI,CAACD,KAAK,EAAE;IACV,OAAO,EAAE;EACX;;EAEA;EACA,IACEA,KAAK,CAACE,UAAU,CAAC,GAAG,CAAC,IACrBF,KAAK,CAACE,UAAU,CAAC,KAAK,CAAC,IACvBF,KAAK,CAACE,UAAU,CAAC,KAAK,CAAC,EACvB;IACA,OAAOF,KAAK;EACd;;EAEA;EACA,MAAMG,YAAY,GAAGJ,KAAK,CAACK,MAAM,CAACJ,KAAK,CAAC;EAExC,IAAI,CAACG,YAAY,EAAE;IACjB;IACA,OAAOH,KAAK;EACd;;EAEA;EACA,MAAMK,UAAU,GAAGJ,KAAK,KAAKK,SAAS,GAAGL,KAAK,GAAGJ,eAAe,CAACE,KAAK,CAAC;;EAEvE;EACA,OAAOI,YAAY,CAACE,UAAU,CAAC,IAAIF,YAAY,CAAC,CAAC,CAAC,IAAIH,KAAK;AAC7D","ignoreList":[]}
+{"version":3,"names":["getPrimaryShade","isCustomColor","getCustomColorShade","themeColor","theme","color","shade","primaryFallback","primaryColor","undefined","colorPalette","colors","colorShade","resolvedColor","createThemeColorFunction"],"sourceRoot":"../../../../../../src","sources":["theme/functions/fns/theme-color/theme-color.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,eAAe,QAAQ,qBAAkB;AAClD,SAASC,aAAa,EAAEC,mBAAmB,QAAQ,kBAAe;AASlE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAAC;EACzBC,KAAK;EACLC,KAAK;EACLC,KAAK;EACLC,eAAe,GAAG;AACH,CAAC,EAAU;EAC1B;EACA,IAAI,CAACF,KAAK,EAAE;IACV,OAAOE,eAAe,GAAGJ,UAAU,CAAC;MAAEC,KAAK;MAAEC,KAAK,EAAED,KAAK,CAACI,YAAY;MAAEF;IAAM,CAAC,CAAC,GAAG,EAAE;EACvF;;EAEA;EACA,IAAIL,aAAa,CAACI,KAAK,CAAC,EAAE;IACxB;IACA,IAAIC,KAAK,KAAKG,SAAS,EAAE;MACvB,OAAOP,mBAAmB,CAACG,KAAK,EAAEC,KAAK,CAAC;IAC1C;IACA;IACA,OAAOD,KAAK;EACd;;EAEA;EACA,MAAMK,YAAY,GAAGN,KAAK,CAACO,MAAM,CAACN,KAAK,CAAC;;EAExC;EACA,IAAI,CAACK,YAAY,EAAE;IACjB;IACA,IAAIH,eAAe,IAAIF,KAAK,KAAKD,KAAK,CAACI,YAAY,EAAE;MACnD,OAAOL,UAAU,CAAC;QAAEC,KAAK;QAAEC,KAAK,EAAED,KAAK,CAACI,YAAY;QAAEF;MAAM,CAAC,CAAC;IAChE;IACA;IACA,OAAOD,KAAK;EACd;;EAEA;EACA,MAAMO,UAAU,GAAGN,KAAK,KAAKG,SAAS,GAAGH,KAAK,GAAGN,eAAe,CAACI,KAAK,CAAC;;EAEvE;EACA,MAAMS,aAAa,GAAGH,YAAY,CAACE,UAAU,CAAC;;EAE9C;EACA,OAAOC,aAAa,IAAIH,YAAY,CAAC,CAAC,CAAC,IAAIL,KAAK;AAClD;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASS,wBAAwBA,CAACV,KAAuB,EAAE;EAChE,OAAO,CAACC,KAAmB,EAAEC,KAAa,EAAEC,eAAyB,KAAa;IAChF,OAAOJ,UAAU,CAAC;MAAEC,KAAK;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAgB,CAAC,CAAC;EAC7D,CAAC;AACH","ignoreList":[]}

package/lib/module/theme/functions/fns/variant.js

@@ -1,38 +1,97 @@
 "use strict";
 
+/**
+ * Variant styles generator
+ * Creates component variant styles for React Native
+ * Aligned with Mantine web's variant system
+ *
+ * Now supports custom color values (hex, rgb, rgba) in addition to theme palette colors.
+ * Custom colors are automatically shaded using color manipulation algorithms.
+ */
+
 import { themeColor } from "./theme-color/theme-color.js";
 import { getPrimaryShade } from "./primary-shade.js";
+
+/**
+ * Generate variant styles for components
+ *
+ * Supports the following variants:
+ * - filled: Filled background with primary color
+ * - light: Light background with colored text
+ * - outline: Transparent background with colored border
+ * - subtle: Transparent background with colored text
+ * - white: White background (useful for dark mode)
+ * - default: Default gray background
+ * - gradient: Transparent background for gradient overlays
+ * - transparent: Fully transparent
+ *
+ * @param theme - Mantine theme object
+ * @param input - Variant configuration
+ * @returns Style object with background, color, border, and optional hover
+ *
+ * @example
+ * // Filled variant with blue color
+ * variant(theme)({ variant: 'filled', color: 'blue' })
+ * // Returns: { background: '#228be6', color: '#fff', border: '#228be6' }
+ *
+ * @example
+ * // Light variant with red color
+ * variant(theme)({ variant: 'light', color: 'red' })
+ * // Returns: { background: '#fff5f5', color: '#f03e3e', border: 'transparent' }
+ *
+ * @example
+ * // Filled variant with custom hex color
+ * variant(theme)({ variant: 'filled', color: '#FF5733' })
+ * // Returns: { background: '#FF5733', color: '#fff', border: '#FF5733', hover: darker('#FF5733') }
+ *
+ * @example
+ * // Light variant with custom rgb color
+ * variant(theme)({ variant: 'light', color: 'rgb(255, 87, 51)' })
+ * // Returns: { background: lighter('rgb(...)'), color: darker('rgb(...)'), border: 'transparent' }
+ */
 export const variant = theme => input => {
   const {
     variant,
-    color = theme.primaryColor
+    color = theme.primaryColor,
+    primaryFallback = false
   } = input;
   const primaryShade = getPrimaryShade(theme);
+
+  /**
+   * Helper to get color at specific shade
+   */
   const getColor = (c, shade) => themeColor({
     theme,
     color: c,
-    shade
+    shade,
+    primaryFallback
   });
   switch (variant) {
+    // Filled variant - solid background with white text
     case 'filled':
       {
         const filledColor = getColor(color, primaryShade);
         return {
           background: filledColor,
-          color: '#fff',
+          color: theme.white,
           border: filledColor,
-          hover: getColor(color, primaryShade > 0 ? primaryShade + 1 : primaryShade)
+          hover: getColor(color, Math.min(primaryShade + 1, 9))
         };
       }
+
+    // Light variant - light background with colored text
     case 'light':
       {
+        const textShade = primaryShade > 6 ? primaryShade : 7;
         return {
           background: getColor(color, 0),
-          color: getColor(color, primaryShade > 6 ? primaryShade : 7),
+          color: getColor(color, textShade),
           border: 'transparent',
           hover: getColor(color, 1)
         };
       }
+
+    // Outline variant - transparent with colored border and text
     case 'outline':
       {
         const outlineColor = getColor(color, primaryShade);
@@ -43,6 +102,8 @@ export const variant = theme => input => {
           hover: getColor(color, 0)
         };
       }
+
+    // Subtle variant - transparent with colored text
     case 'subtle':
       {
         return {
@@ -52,43 +113,77 @@ export const variant = theme => input => {
           hover: getColor(color, 0)
         };
       }
+
+    // White variant - white background with colored text
     case 'white':
       {
         return {
-          background: '#fff',
+          background: theme.white,
           color: getColor(color, primaryShade),
-          border: '#fff',
-          hover: '#f8f9fa'
+          border: theme.white,
+          hover: theme.colors.gray?.[0] || '#f8f9fa'
         };
       }
+
+    // Default variant - gray background
     case 'default':
       {
+        const isDark = theme.colorScheme === 'dark';
+        if (isDark) {
+          return {
+            background: theme.colors.dark?.[6] || '#25262b',
+            color: theme.white,
+            border: theme.colors.dark?.[4] || '#373A40',
+            hover: theme.colors.dark?.[5] || '#2C2E33'
+          };
+        }
         return {
-          background: theme.light.background,
-          color: theme.light.text,
+          background: theme.white,
+          color: theme.black,
           border: theme.colors.gray?.[4] || '#ced4da',
           hover: theme.colors.gray?.[0] || '#f8f9fa'
         };
       }
+
+    // Gradient variant - transparent background for gradient overlays
+    // The actual gradient rendering is handled by LinearGradient component
     case 'gradient':
       {
-        // 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: 'transparent',
-          color: '#fff',
+          color: theme.white,
+          border: 'transparent'
+        };
+      }
+
+    // Transparent variant - fully transparent
+    case 'transparent':
+      {
+        return {
+          background: 'transparent',
+          color: getColor(color, primaryShade),
           border: 'transparent'
         };
       }
+
+    // Default fallback - same as filled variant
     default:
       {
+        const filledColor = getColor(color, primaryShade);
         return {
-          background: getColor(color, primaryShade),
-          color: '#fff',
-          border: getColor(color, primaryShade)
+          background: filledColor,
+          color: theme.white,
+          border: filledColor
         };
       }
   }
 };
+
+/**
+ * Curried version of variant for use with theme.fn
+ * @internal
+ */
+export function createVariantFunction(theme) {
+  return variant(theme);
+}
 //# sourceMappingURL=variant.js.map

package/lib/module/theme/functions/fns/variant.js.map

@@ -1 +1 @@
-{"version":3,"names":["themeColor","getPrimaryShade","variant","theme","input","color","primaryColor","primaryShade","getColor","c","shade","filledColor","background","border","hover","outlineColor","light","text","colors","gray"],"sourceRoot":"../../../../../src","sources":["theme/functions/fns/variant.ts"],"mappings":";;AAEA,SAASA,UAAU,QAAQ,8BAA2B;AACtD,SAASC,eAAe,QAAQ,oBAAiB;AAuBjD,OAAO,MAAMC,OAAO,GAAIC,KAAmB,IAAMC,KAAmB,IAAoB;EACtF,MAAM;IACJF,OAAO;IACPG,KAAK,GAAGF,KAAK,CAACG;EAChB,CAAC,GAAGF,KAAK;EAET,MAAMG,YAAY,GAAGN,eAAe,CAACE,KAAK,CAAC;EAC3C,MAAMK,QAAQ,GAAGA,CAACC,CAAS,EAAEC,KAAa,KAAKV,UAAU,CAAC;IAAEG,KAAK;IAAEE,KAAK,EAAEI,CAAC;IAAEC;EAAM,CAAC,CAAC;EAErF,QAAQR,OAAO;IACb,KAAK,QAAQ;MAAE;QACb,MAAMS,WAAW,GAAGH,QAAQ,CAACH,KAAK,EAAEE,YAAY,CAAC;QACjD,OAAO;UACLK,UAAU,EAAED,WAAW;UACvBN,KAAK,EAAE,MAAM;UACbQ,MAAM,EAAEF,WAAW;UACnBG,KAAK,EAAEN,QAAQ,CAACH,KAAK,EAAEE,YAAY,GAAG,CAAC,GAAGA,YAAY,GAAG,CAAC,GAAGA,YAAY;QAC3E,CAAC;MACH;IAEA,KAAK,OAAO;MAAE;QACZ,OAAO;UACLK,UAAU,EAAEJ,QAAQ,CAACH,KAAK,EAAE,CAAC,CAAC;UAC9BA,KAAK,EAAEG,QAAQ,CAACH,KAAK,EAAEE,YAAY,GAAG,CAAC,GAAGA,YAAY,GAAG,CAAC,CAAC;UAC3DM,MAAM,EAAE,aAAa;UACrBC,KAAK,EAAEN,QAAQ,CAACH,KAAK,EAAE,CAAC;QAC1B,CAAC;MACH;IAEA,KAAK,SAAS;MAAE;QACd,MAAMU,YAAY,GAAGP,QAAQ,CAACH,KAAK,EAAEE,YAAY,CAAC;QAClD,OAAO;UACLK,UAAU,EAAE,aAAa;UACzBP,KAAK,EAAEU,YAAY;UACnBF,MAAM,EAAEE,YAAY;UACpBD,KAAK,EAAEN,QAAQ,CAACH,KAAK,EAAE,CAAC;QAC1B,CAAC;MACH;IAEA,KAAK,QAAQ;MAAE;QACb,OAAO;UACLO,UAAU,EAAE,aAAa;UACzBP,KAAK,EAAEG,QAAQ,CAACH,KAAK,EAAEE,YAAY,CAAC;UACpCM,MAAM,EAAE,aAAa;UACrBC,KAAK,EAAEN,QAAQ,CAACH,KAAK,EAAE,CAAC;QAC1B,CAAC;MACH;IAEA,KAAK,OAAO;MAAE;QACZ,OAAO;UACLO,UAAU,EAAE,MAAM;UAClBP,KAAK,EAAEG,QAAQ,CAACH,KAAK,EAAEE,YAAY,CAAC;UACpCM,MAAM,EAAE,MAAM;UACdC,KAAK,EAAE;QACT,CAAC;MACH;IAEA,KAAK,SAAS;MAAE;QACd,OAAO;UACLF,UAAU,EAAET,KAAK,CAACa,KAAK,CAACJ,UAAU;UAClCP,KAAK,EAAEF,KAAK,CAACa,KAAK,CAACC,IAAI;UACvBJ,MAAM,EAAEV,KAAK,CAACe,MAAM,CAACC,IAAI,GAAG,CAAC,CAAC,IAAI,SAAS;UAC3CL,KAAK,EAAEX,KAAK,CAACe,MAAM,CAACC,IAAI,GAAG,CAAC,CAAC,IAAI;QACnC,CAAC;MACH;IAEA,KAAK,UAAU;MAAE;QACf;QACA;QACA;QACA,OAAO;UACLP,UAAU,EAAE,aAAa;UACzBP,KAAK,EAAE,MAAM;UACbQ,MAAM,EAAE;QACV,CAAC;MACH;IAEA;MAAS;QACP,OAAO;UACLD,UAAU,EAAEJ,QAAQ,CAACH,KAAK,EAAEE,YAAY,CAAC;UACzCF,KAAK,EAAE,MAAM;UACbQ,MAAM,EAAEL,QAAQ,CAACH,KAAK,EAAEE,YAAY;QACtC,CAAC;MACH;EACF;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["themeColor","getPrimaryShade","variant","theme","input","color","primaryColor","primaryFallback","primaryShade","getColor","c","shade","filledColor","background","white","border","hover","Math","min","textShade","outlineColor","colors","gray","isDark","colorScheme","dark","black","createVariantFunction"],"sourceRoot":"../../../../../src","sources":["theme/functions/fns/variant.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/theme/functions/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+/**
+ * Theme functions module
+ * Exports all theme-related utilities and functions
+ */
+
+export { attachFunctions } from "./attach-functions.js";
+export * from "./fns/index.js";
+export * from "./fns/primary-shade.js";
+export * from "./fns/theme-color/theme-color.js";
+export * from "./fns/variant.js";
+export * from "./fns/rgba.js";
+export * from "./fns/radius.js";
+export * from "./fns/size.js";
+export * from "./fns/shadow.js";
+export * from "./fns/gradient/gradient.js";
+export * from "./fns/lighten.js";
+export * from "./fns/darken.js";
+export * from "./fns/dimmed.js";
+export * from "./fns/breakpoints.js";
+//# sourceMappingURL=index.js.map

package/lib/module/theme/functions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["attachFunctions"],"sourceRoot":"../../../../src","sources":["theme/functions/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA,SAASA,eAAe,QAAQ,uBAAoB;AACpD,cAAc,gBAAO;AACrB,cAAc,wBAAqB;AACnC,cAAc,kCAA+B;AAC7C,cAAc,kBAAe;AAC7B,cAAc,eAAY;AAC1B,cAAc,iBAAc;AAC5B,cAAc,eAAY;AAC1B,cAAc,iBAAc;AAC5B,cAAc,4BAAyB;AACvC,cAAc,kBAAe;AAC7B,cAAc,iBAAc;AAC5B,cAAc,iBAAc;AAC5B,cAAc,sBAAmB","ignoreList":[]}

package/lib/module/theme/index.js

@@ -1,10 +1,22 @@
 "use strict";
 
-export { ThemeProvider, useTheme, Theme } from "./theme-provider.js";
+/**
+ * Mantine React Native Theme System
+ * Main export file for theme-related types and utilities
+ */
+
+// Type exports
+
+// Theme exports
+export { DEFAULT_COLORS } from "./default-colors.js";
+export { DEFAULT_THEME, _DEFAULT_THEME } from "./default-theme.js";
+export { createTheme } from "./create-theme.js";
+
+// Function exports
+export { attachFunctions, getPrimaryShade, getPrimaryColor, themeColor, variant, rgba, radius, size, shadow, gradient, lighten, darken, dimmed, largerThan, smallerThan, colorSchemeValue, resolveColorSchemeValue, resolveColorSchemeConstants, isColorSchemeValue } from "./functions/index.js";
+
+// Utility exports
 export { createStyles } from "./create-styles.js";
 export { filterProps } from "./filter-props.js";
 export { getSize } from "./get-size/index.js";
-export { createTheme } from "./create-theme.js";
-export { shadow } from "./functions/fns/shadow.js";
-export { gradient } from "./functions/fns/gradient/gradient.js";
 //# sourceMappingURL=index.js.map

package/lib/module/theme/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["ThemeProvider","useTheme","Theme","createStyles","filterProps","getSize","createTheme","shadow","gradient"],"sourceRoot":"../../../src","sources":["theme/index.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,QAAQ,EAAEC,KAAK,QAAQ,qBAAkB;AACjE,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,WAAW,QAAQ,mBAAgB;AAC5C,SAASC,OAAO,QAAQ,qBAAY;AACpC,SAASC,WAAW,QAAQ,mBAAgB;AAC5C,SAASC,MAAM,QAAQ,2BAAwB;AAE/C,SAASC,QAAQ,QAAQ,sCAAmC","ignoreList":[]}
+{"version":3,"names":["DEFAULT_COLORS","DEFAULT_THEME","_DEFAULT_THEME","createTheme","attachFunctions","getPrimaryShade","getPrimaryColor","themeColor","variant","rgba","radius","size","shadow","gradient","lighten","darken","dimmed","largerThan","smallerThan","colorSchemeValue","resolveColorSchemeValue","resolveColorSchemeConstants","isColorSchemeValue","createStyles","filterProps","getSize"],"sourceRoot":"../../../src","sources":["theme/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA;;AAsDA;AACA,SAASA,cAAc,QAAQ,qBAAkB;AACjD,SAASC,aAAa,EAAEC,cAAc,QAAQ,oBAAiB;AAC/D,SAASC,WAAW,QAAQ,mBAAgB;;AAE5C;AACA,SACEC,eAAe,EACfC,eAAe,EACfC,eAAe,EACfC,UAAU,EACVC,OAAO,EACPC,IAAI,EACJC,MAAM,EACNC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,MAAM,EACNC,UAAU,EACVC,WAAW,EACXC,gBAAgB,EAChBC,uBAAuB,EACvBC,2BAA2B,EAC3BC,kBAAkB,QACb,sBAAa;;AAEpB;AACA,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,WAAW,QAAQ,mBAAgB;AAC5C,SAASC,OAAO,QAAQ,qBAAY","ignoreList":[]}

package/lib/module/theme/theme-provider.js

@@ -1,11 +1,9 @@
 "use strict";
 
-import { get } from 'lodash-es';
 import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { ActivityIndicator, Appearance, Platform } from 'react-native';
 import { Layout } from "./constants.js";
 import { createTheme } from "./create-theme.js";
-import { getPrimaryShade } from "./functions/fns/primary-shade.js";
 import { filterProps } from "./filter-props.js";
 import useCachedResources from "../hooks/useCachedResources.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -15,11 +13,6 @@ export const ThemeProvider = ({
   theme,
   forceMode
 }) => {
-  const {
-    colors,
-    primaryColor,
-    secondaryColor
-  } = theme;
   const systemDarkMode = Appearance.getColorScheme();
   const [currentMode, setCurrentMode] = useState(forceMode || systemDarkMode || 'light');
   const toggleMode = () => {
@@ -36,23 +29,9 @@ export const ThemeProvider = ({
     forceModeDevice(currentMode);
   }, [currentMode]);
   const memoValue = useMemo(() => {
-    const darkTheme = {
-      light: theme.dark,
-      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}.${shade}`, 'black'),
-      primaryBgColor: get(colors, `${primaryColor}.${shade}`),
-      secondaryBgColor: get(colors, `${secondaryColor}.0`),
-      ...(currentMode === 'dark' ? darkTheme : {}),
+      colorScheme: currentMode,
       window: Layout.window,
       isSmallDevice: Layout.isSmallDevice,
       screen: Layout.screen,