react-native-molecules 0.5.0-beta.1 → 0.5.0-beta.11

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 { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+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.medium,
+                    },
+                },
+                {
+                    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,231 +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,
+                },
+            },
         },
-    };
-});
+    },
+}));
 
-registerComponentsStyles({
-    Button: defaultStylesDefault,
-});
+export const buttonStyles = getRegisteredComponentStylesWithFallback('Button', buttonStylesDefault);
+
+export const buttonIconStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonIcon',
+    buttonIconStylesDefault,
+);
+
+export const buttonTextStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonText',
+    buttonTextStylesDefault,
+);
 
-export const defaultStyles = getRegisteredMoleculesComponentStyles('Button');
+export const buttonActivityIndicatorStyles = getRegisteredComponentStylesWithFallback(
+    'ButtonActivityIndicator',
+    buttonActivityIndicatorStylesDefault,
+);

package/components/Card/Card.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, useMemo } from 'react';
 import type { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { useActionState } from '../../hooks';
 import type { MD3Elevation } from '../../types/theme';
 import { resolveStateVariant } from '../../utils';
@@ -41,7 +41,7 @@ const Card = (
 
     cardStyles.useVariants({
         variant,
-        state,
+        state: state as 'disabled' | 'hovered' | 'pressed',
     });
 
     const elevationLevel = variant === 'elevated' ? (hovered ? 2 : 1) : hovered ? 1 : 0;
@@ -84,6 +84,11 @@ const cardStylesDefault = StyleSheet.create(theme => ({
                 outlined: {},
                 undefined: {},
             },
+            state: {
+                disabled: {},
+                hovered: {},
+                pressed: {},
+            },
         },
         compoundVariants: [
             {
@@ -154,7 +159,6 @@ const cardStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card', cardStylesDefault);
-export const cardStyles = getRegisteredMoleculesComponentStyles('Card');
+export const cardStyles = getRegisteredComponentStylesWithFallback('Card', cardStylesDefault);
 
 export default memo(forwardRef(Card));

package/components/Card/CardContent.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {
     children: ReactNode | ReactNode[];
@@ -22,8 +22,9 @@ const cardContentStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card_Content', cardContentStylesDefault);
-
-export const cardContentStyles = getRegisteredMoleculesComponentStyles('Card_Content');
+export const cardContentStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Content',
+    cardContentStylesDefault,
+);
 
 export default CardContent;

package/components/Card/CardHeader.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {
     children: ReactNode | ReactNode[];
@@ -25,7 +25,9 @@ const cardHeaderStylesDefault = StyleSheet.create(theme => ({
         justifyContent: 'space-between',
     },
 }));
-registerComponentStyles('Card_Header', cardHeaderStylesDefault);
-export const cardHeaderStyles = getRegisteredMoleculesComponentStyles('Card_Header');
+export const cardHeaderStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Header',
+    cardHeaderStylesDefault,
+);
 
 export default CardHeader;

package/components/Card/CardMedia.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo, type ReactNode } from 'react';
 import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type Props = ViewProps & {
     style?: StyleProp<ViewStyle>;
@@ -28,8 +28,10 @@ const cardMediaStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card_Media', cardMediaStylesDefault);
-export const cardMediaStyles = getRegisteredMoleculesComponentStyles('Card_Media');
+export const cardMediaStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Media',
+    cardMediaStylesDefault,
+);
 
 CardMedia.displayName = 'Card_Media';
 

package/components/Card/CardTypography.tsx

@@ -2,7 +2,7 @@ import { forwardRef, memo } from 'react';
 import { type TextProps } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { Text } from '../Text';
 
 export type Props = TextProps & {
@@ -107,7 +107,9 @@ const cardTypograhyStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('Card_Typography', cardTypograhyStylesDefault);
-export const cardTypograhyStyles = getRegisteredMoleculesComponentStyles('Card_Typography');
+export const cardTypograhyStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Typography',
+    cardTypograhyStylesDefault,
+);
 
 export default memo(forwardRef(CardTypography));

package/components/Card/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import { default as CardComponent } from './Card';
 import { default as CardActions } from './CardActions';
 import { default as CardContent } from './CardContent';
@@ -21,10 +21,6 @@ export const CardDefault = Object.assign(
     },
 );
 
-registerMoleculesComponents({
-    Card: CardDefault,
-});
-
 export const Card = getRegisteredComponentWithFallback('Card', CardDefault);
 
 export { type Props as CardProps, cardStyles } from './Card';

package/components/Card/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 export type States = 'hovered' | 'focused' | 'pressed' | 'disabled';
 export type CardTypographyVariant = 'headline' | 'subhead' | 'text';
@@ -16,8 +16,7 @@ const cardActionsStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Card_Actions: cardActionsStylesDefault,
-});
-
-export const cardActionsStyles = getRegisteredMoleculesComponentStyles('Card_Actions');
+export const cardActionsStyles = getRegisteredComponentStylesWithFallback(
+    'Card_Actions',
+    cardActionsStylesDefault,
+);

package/components/Checkbox/Checkbox.tsx

@@ -47,6 +47,7 @@ const Checkbox = (
     if (label) {
         styles.useVariants({
             variant: 'item',
+            // @ts-ignore // TODO - fix this
             state: state as States,
             isLeading,
             size,

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -33,6 +33,7 @@ const CheckboxIOS = (
 
     styles.useVariants({
         variant: 'ios',
+        // @ts-ignore // TODO - fix this
         state: state as States,
         size,
     });