react-native-molecules 0.5.0-beta.3 → 0.5.0-beta.30

package/components/Button/utils.ts

@@ -1,32 +1,109 @@
-import { Platform } from 'react-native';
+import { createContext } from 'react';
 import { StyleSheet } from 'react-native-unistyles';
 
 import { getRegisteredComponentStylesWithFallback } from '../../core';
+import type { ButtonContextType } from './types';
 
 export const sizeToIconSizeMap = {
-    xs: 18,
-    sm: 22,
+    xs: 20,
+    sm: 20,
     md: 24,
-    lg: 26,
+    lg: 32,
+    xl: 40,
 };
 
-const defaultStylesDefault = StyleSheet.create(theme => {
+export const sizeToHeightMap = {
+    xs: 32,
+    sm: 40,
+    md: 56,
+    lg: 96,
+    xl: 136,
+};
+
+export const sizeToPaddingMap = {
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 48,
+    xl: 64,
+};
+
+export const sizeToIconGapMap = {
+    xs: 4,
+    sm: 8,
+    md: 8,
+    lg: 12,
+    xl: 16,
+};
+
+export const elevationMap: Record<string, Record<string, number>> = {
+    true: {
+        contained: 1,
+        'contained-tonal': 1,
+        elevated: 2,
+    },
+    false: {
+        elevated: 1,
+    },
+};
+
+export const ButtonContext = createContext<ButtonContextType>({
+    variant: 'text',
+    size: 'sm',
+    state: 'default',
+    disabled: false,
+    labelColor: undefined,
+    iconSize: undefined,
+});
+
+const buttonStylesDefault = StyleSheet.create(theme => {
     return {
         root: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderStyle: 'solid',
             variants: {
                 size: {
+                    xs: {
+                        minWidth: 64,
+                        height: 32,
+                        paddingHorizontal: 12,
+                        gap: 4,
+                    },
                     sm: {
                         minWidth: 64,
-                        borderRadius: theme.shapes.corner.full,
+                        height: 40,
+                        paddingHorizontal: 16,
+                        gap: 8,
                     },
                     md: {
                         minWidth: 64,
-                        borderRadius: theme.shapes.corner.full,
+                        height: 56,
+                        paddingHorizontal: 24,
+                        gap: 8,
                     },
                     lg: {
-                        minWidth: 64,
+                        minWidth: 96,
+                        height: 96,
+                        paddingHorizontal: 48,
+                        gap: 12,
+                    },
+                    xl: {
+                        minWidth: 136,
+                        height: 136,
+                        paddingHorizontal: 64,
+                        gap: 16,
+                    },
+                },
+                shape: {
+                    rounded: {
                         borderRadius: theme.shapes.corner.full,
                     },
+                    square: {
+                        // Base - will be overridden by compoundVariants for size-specific radii
+                        borderRadius: 12,
+                    },
                 },
 
                 state: {
@@ -128,6 +205,42 @@ const defaultStylesDefault = StyleSheet.create(theme => {
                         // elevationLevel: theme.elevations.level1,
                     },
                 },
+                // Square shape + size compound variants for border radius
+                {
+                    shape: 'square',
+                    size: 'xs',
+                    styles: {
+                        borderRadius: theme.shapes.corner.small,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'sm',
+                    styles: {
+                        borderRadius: theme.shapes.corner.medium,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'md',
+                    styles: {
+                        borderRadius: theme.shapes.corner.large,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'lg',
+                    styles: {
+                        borderRadius: theme.shapes.corner.extraLarge,
+                    },
+                },
+                {
+                    shape: 'square',
+                    size: 'xl',
+                    styles: {
+                        borderRadius: theme.shapes.corner.extraLarge,
+                    },
+                },
             ],
         },
         stateLayer: {
@@ -184,230 +297,139 @@ const defaultStylesDefault = StyleSheet.create(theme => {
                 },
             ],
         },
+    };
+});
 
-        button: {
-            borderStyle: 'solid',
-        },
-        content: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexGrow: 1,
-        },
-        iconContainer: {
-            ...(Platform.OS !== 'web'
-                ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
-                : {}),
-        },
-        icon: {
-            ...(Platform.OS === 'web'
-                ? { marginLeft: theme.spacings['4'], marginRight: theme.spacings._4 }
-                : {}),
-            variants: {
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+/**
+ * Styles for Button.Icon component
+ */
+const buttonIconStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+                hovered: {},
+                default: {},
+            },
+            variant: {
+                outlined: {
+                    color: theme.colors.primary,
                 },
-                variant: {
-                    outlined: {
-                        color: theme.colors.primary,
-                    },
-                    text: {
-                        color: theme.colors.primary,
-                    },
-                    contained: {
-                        color: theme.colors.onPrimary,
-                    },
-                    elevated: {
-                        color: theme.colors.primary,
-                    },
-                    'contained-tonal': {
-                        color: theme.colors.onSecondaryContainer,
-                    },
+                text: {
+                    color: theme.colors.primary,
                 },
-            },
-        },
-        iconTextMode: {
-            marginLeft: theme.spacings['3'],
-            marginRight: theme.spacings._2,
-        },
-        label: {
-            display: 'flex',
-            alignItems: 'center',
-            textAlign: 'center',
-            marginVertical: theme.spacings['2l'],
-            marginHorizontal: theme.spacings['6'],
-            ...theme.typescale.labelLarge,
-
-            variants: {
-                size: {
-                    sm: {
-                        ...theme.typescale.labelMedium,
-                    },
-                    md: {
-                        ...theme.typescale.labelLarge,
-                    },
-                    lg: {
-                        ...theme.typescale.labelLarge,
-                        fontSize: theme.typescale.bodyLarge.fontSize,
-                    },
+                contained: {
+                    color: theme.colors.onPrimary,
                 },
-                variant: {
-                    outlined: {
-                        color: theme.colors.primary,
-                    },
-                    text: {
-                        color: theme.colors.primary,
-                    },
-                    contained: {
-                        color: theme.colors.onPrimary,
-                    },
-                    elevated: {
-                        color: theme.colors.primary,
-                    },
-                    'contained-tonal': {
-                        color: theme.colors.onSecondaryContainer,
-                    },
+                elevated: {
+                    color: theme.colors.primary,
                 },
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+                'contained-tonal': {
+                    color: theme.colors.onSecondaryContainer,
                 },
             },
+        },
+    },
+}));
 
-            compoundVariants: [
-                {
-                    variant: 'outlined',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+/**
+ * Styles for Button.Text component
+ */
+const buttonTextStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        ...theme.typescale.labelLarge,
+        variants: {
+            size: {
+                xs: {
+                    ...theme.typescale.labelLarge,
                 },
-
-                {
-                    variant: 'text',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                sm: {
+                    ...theme.typescale.labelLarge,
                 },
-                {
-                    variant: 'contained',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                md: {
+                    ...theme.typescale.titleMedium,
                 },
-                {
-                    variant: 'elevated',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                lg: {
+                    ...theme.typescale.headlineSmall,
                 },
-
-                {
-                    variant: 'contained-tonal',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                xl: {
+                    ...theme.typescale.headlineLarge,
                 },
-            ],
-        },
-        labelText: {
-            marginVertical: theme.spacings['2l'],
-            marginHorizontal: theme.spacings['3'],
-            ...theme.typescale.labelLarge,
-
-            variants: {
-                variant: {
-                    text: {
-                        color: theme.colors.primary,
-                    },
+            },
+            variant: {
+                text: {
+                    color: theme.colors.primary,
                 },
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+                outlined: {
+                    color: theme.colors.primary,
                 },
-                size: {
-                    sm: {
-                        ...theme.typescale.labelMedium,
-                    },
-                    md: {
-                        ...theme.typescale.labelLarge,
-                    },
-                    lg: {
-                        ...theme.typescale.labelLarge,
-                        fontSize: theme.typescale.bodyLarge.fontSize,
-                    },
+                contained: {
+                    color: theme.colors.onPrimary,
+                },
+                elevated: {
+                    color: theme.colors.primary,
+                },
+                'contained-tonal': {
+                    color: theme.colors.onSecondaryContainer,
                 },
             },
-
-            compoundVariants: [
-                {
-                    variant: 'text',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
                 },
-            ],
+                hovered: {},
+                default: {},
+            },
         },
-        labelTextAddons: {
-            marginVertical: theme.spacings['2l'],
-            marginHorizontal: theme.spacings['4'],
+    },
+}));
 
-            variants: {
-                variant: {
-                    text: {
-                        color: theme.colors.primary,
-                    },
+const buttonActivityIndicatorStylesDefault = StyleSheet.create(theme => ({
+    root: {
+        variants: {
+            state: {
+                disabled: {
+                    color: theme.colors.onSurfaceDisabled,
+                },
+                hovered: {},
+                default: {},
+            },
+            variant: {
+                outlined: {
+                    color: theme.colors.primary,
                 },
-                state: {
-                    disabled: {
-                        color: theme.colors.onSurfaceDisabled,
-                    },
-                    hovered: {},
-                    default: {},
+                text: {
+                    color: theme.colors.primary,
                 },
-                size: {
-                    sm: {
-                        ...theme.typescale.labelMedium,
-                    },
-                    md: {
-                        ...theme.typescale.labelLarge,
-                    },
-                    lg: {
-                        ...theme.typescale.labelLarge,
-                        fontSize: theme.typescale.bodyLarge.fontSize,
-                    },
+                contained: {
+                    color: theme.colors.onPrimary,
                 },
-            },
-
-            compoundVariants: [
-                {
-                    variant: 'text',
-                    state: 'disabled',
-                    styles: {
-                        color: theme.colors.stateLayer.disabled.onSurface_Level4,
-                    },
+                elevated: {
+                    color: theme.colors.primary,
                 },
-            ],
+                'contained-tonal': {
+                    color: theme.colors.onSecondaryContainer,
+                },
+            },
         },
-    };
-});
+    },
+}));
+
+export const buttonStyles = getRegisteredComponentStylesWithFallback('Button', buttonStylesDefault);
+
+export const buttonIconStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonIcon',
+    buttonIconStylesDefault,
+);
+
+export const buttonTextStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonText',
+    buttonTextStylesDefault,
+);
 
-export const defaultStyles = getRegisteredComponentStylesWithFallback(
-    'Button',
-    defaultStylesDefault,
+export const buttonActivityIndicatorStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonActivityIndicator',
+    buttonActivityIndicatorStylesDefault,
 );

package/components/Card/Card.tsx

@@ -51,7 +51,7 @@ const Card = (
             container: [cardStyles.container, cardStyles.root, style],
             innerContainer: [cardStyles.innerContainer, touchableContainerStyle],
         };
-        // eslint-disable-next-line
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [variant, state, style, touchableContainerStyle]);
 
     const elevation = elevationProp === undefined ? elevationLevel ?? 0 : elevationProp;