react-native-mantine 0.14.0 → 0.16.0

package/src/components/Select/index.tsx

@@ -92,8 +92,6 @@ const useStyles = createStyles(
     theme,
     { color }: { color: MantineColor; size: MantineSize }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
-
     return {
       modalOverlay: {
         flex: 1,
@@ -102,7 +100,7 @@ const useStyles = createStyles(
       },
       modalContent: {
         backgroundColor:
-          theme.colorScheme === 'dark' ? (theme.colors.dark || [])[7] : theme.white,
+          theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 7) : theme.white,
         borderTopLeftRadius: theme.radius.lg,
         borderTopRightRadius: theme.radius.lg,
         maxHeight: '80%',
@@ -112,8 +110,8 @@ const useStyles = createStyles(
         borderBottomWidth: 1,
         borderBottomColor:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[4]
-            : (theme.colors.gray || [])[2],
+            ? theme.fn.themeColor('dark', 4)
+            : theme.fn.themeColor('gray', 2),
       },
       listContainer: {
         paddingVertical: rem(8) as any,
@@ -127,19 +125,19 @@ const useStyles = createStyles(
       itemSelected: {
         backgroundColor:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[5]
-            : colors?.[0] || (theme.colors.gray || [])[0],
+            ? theme.fn.themeColor('dark', 5)
+            : theme.fn.themeColor(color, 0),
       },
       itemDisabled: {
         opacity: 0.4,
       },
       itemText: {
         fontSize: rem(14) as any,
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 0) : theme.black,
       },
       itemTextSelected: {
         fontWeight: '600',
-        color: colors?.[6] || colors?.[5] || theme.primaryBgColor,
+        color: theme.fn.themeColor(color, 6),
       },
       groupLabel: {
         paddingVertical: rem(8) as any,
@@ -148,8 +146,8 @@ const useStyles = createStyles(
         fontWeight: '600',
         color:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[2]
-            : (theme.colors.gray || [])[6],
+            ? theme.fn.themeColor('dark', 2)
+            : theme.fn.themeColor('gray', 6),
         textTransform: 'uppercase',
       },
       emptyState: {
@@ -159,8 +157,8 @@ const useStyles = createStyles(
       emptyText: {
         color:
           theme.colorScheme === 'dark'
-            ? (theme.colors.dark || [])[2]
-            : (theme.colors.gray || [])[6],
+            ? theme.fn.themeColor('dark', 2)
+            : theme.fn.themeColor('gray', 6),
       },
     };
   }

package/src/components/SimpleGrid/index.tsx

@@ -38,11 +38,14 @@ const useStyles = createStyles(
       verticalSpacing: MantineNumberSize;
     }
   ) => {
-    const horizontalSpacing = theme.fn.size({ size: spacing, sizes: theme.spacing });
-    const rowSpacing = theme.fn.size({
+    const horizontalSpacingValue = theme.fn.size({ size: spacing, sizes: theme.spacing });
+    const horizontalSpacing = typeof horizontalSpacingValue === 'number' ? horizontalSpacingValue : parseFloat(horizontalSpacingValue) || 0;
+
+    const rowSpacingValue = theme.fn.size({
       size: verticalSpacing || spacing,
       sizes: theme.spacing,
     });
+    const rowSpacing = typeof rowSpacingValue === 'number' ? rowSpacingValue : parseFloat(rowSpacingValue) || 0;
 
     return {
       root: {

package/src/components/Spoiler/index.tsx

@@ -45,7 +45,7 @@ const useStyles = createStyles((theme) => ({
   controlText: {
     fontSize: theme.fontSizes.sm as number,
     fontWeight: '500',
-    color: theme.colors[theme.primaryColor]?.[6] || theme.primaryBgColor,
+    color: theme.fn.themeColor(theme.primaryColor, 6),
   },
 }));
 

package/src/components/Stepper/index.tsx

@@ -138,7 +138,13 @@ const useStepStyles = createStyles(
       radius: MantineNumberSize;
     }
   ) => {
-    const colors = theme.colors[color] || theme.colors[theme.primaryColor];
+    const activeColor = theme.fn.themeColor(color || theme.primaryColor);
+    const inactiveBgColor = theme.colorScheme === 'dark'
+      ? theme.fn.themeColor('dark', 5)
+      : theme.fn.themeColor('gray', 1);
+    const inactiveBorderColor = theme.colorScheme === 'dark'
+      ? theme.fn.themeColor('dark', 4)
+      : theme.fn.themeColor('gray', 3);
 
     return {
       step: {
@@ -163,17 +169,9 @@ const useStepStyles = createStyles(
         width: iconSize as any,
         height: iconSize as any,
         borderRadius: theme.fn.radius(radius),
-        backgroundColor: isCompleted || isActive
-          ? colors?.[6] || colors?.[5] || theme.primaryBgColor
-          : theme.colorScheme === 'dark'
-          ? theme.colors.dark?.[5]
-          : theme.colors.gray?.[1],
+        backgroundColor: isCompleted || isActive ? activeColor : inactiveBgColor,
         borderWidth: rem(2) as any,
-        borderColor: isCompleted || isActive
-          ? colors?.[6] || colors?.[5] || theme.primaryBgColor
-          : theme.colorScheme === 'dark'
-          ? theme.colors.dark?.[4]
-          : theme.colors.gray?.[3],
+        borderColor: isCompleted || isActive ? activeColor : inactiveBorderColor,
         justifyContent: 'center',
         alignItems: 'center',
       },
@@ -181,8 +179,8 @@ const useStepStyles = createStyles(
         color: isCompleted || isActive
           ? theme.white
           : theme.colorScheme === 'dark'
-          ? theme.colors.dark?.[1]
-          : theme.colors.gray?.[6],
+          ? theme.fn.themeColor('dark', 1)
+          : theme.fn.themeColor('gray', 6),
         fontSize: theme.fontSizes.sm as number,
         fontWeight: '600',
       },
@@ -190,10 +188,10 @@ const useStepStyles = createStyles(
         height: (orientation === 'horizontal' ? rem(2) : rem(24)) as any,
         width: (orientation === 'horizontal' ? '100%' : rem(2)) as any,
         backgroundColor: isCompleted
-          ? colors?.[6] || colors?.[5] || theme.primaryBgColor
+          ? activeColor
           : theme.colorScheme === 'dark'
-          ? theme.colors.dark?.[4]
-          : theme.colors.gray?.[2],
+          ? theme.fn.themeColor('dark', 4)
+          : theme.fn.themeColor('gray', 2),
         marginHorizontal: orientation === 'horizontal' ? theme.spacing.xs : 0,
         marginVertical: orientation === 'vertical' ? theme.spacing.xs : 0,
         ...(orientation === 'horizontal' && {
@@ -216,7 +214,9 @@ const useStepStyles = createStyles(
       },
       description: {
         fontSize: theme.fontSizes.xs as number,
-        color: theme.colorScheme === 'dark' ? theme.colors.dark?.[2] : theme.colors.gray?.[6],
+        color: theme.colorScheme === 'dark'
+          ? theme.fn.themeColor('dark', 2)
+          : theme.fn.themeColor('gray', 6),
       },
     };
   }

package/src/components/Switch/index.tsx

@@ -63,7 +63,7 @@ const useStyles = createStyles(
       },
       label: {
         fontSize: theme.fontSizes.sm as number,
-        color: theme.colorScheme === 'dark' ? (theme.colors.dark || [])[0] : theme.black,
+        color: theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 0) : theme.black,
         marginLeft: labelPosition === 'right' ? theme.spacing.sm : 0,
         marginRight: labelPosition === 'left' ? theme.spacing.sm : 0,
       },
@@ -104,9 +104,8 @@ export const Switch = forwardRef<any, SwitchProps>((props, ref) => {
   };
 
   const colorKey = color || theme.primaryColor;
-  const colors = theme.colors[colorKey] || theme.colors[theme.primaryColor];
-  const falseColor = theme.colorScheme === 'dark' ? (theme.colors.dark || [])[4] : (theme.colors.gray || [])[3];
-  const trueColor = colors?.[6] || colors?.[5] || theme.primaryBgColor;
+  const falseColor = theme.colorScheme === 'dark' ? theme.fn.themeColor('dark', 4) : theme.fn.themeColor('gray', 3);
+  const trueColor = theme.fn.themeColor(colorKey, 6);
   const trackColor: { false: string; true: string } = {
     false: falseColor || '#ccc',
     true: trueColor || '#000',
@@ -118,8 +117,8 @@ export const Switch = forwardRef<any, SwitchProps>((props, ref) => {
       : checked
       ? theme.white
       : theme.colorScheme === 'dark'
-      ? (theme.colors.dark || [])[0]
-      : (theme.colors.gray || [])[1];
+      ? theme.fn.themeColor('dark', 0)
+      : theme.fn.themeColor('gray', 1);
 
   const switchComponent = (
     <RNSwitch