react-native-molecules 0.5.0-beta.28 → 0.5.0-beta.29

package/components/Button/utils.ts

@@ -210,7 +210,7 @@ const buttonStylesDefault = StyleSheet.create(theme => {
                     shape: 'square',
                     size: 'xs',
                     styles: {
-                        borderRadius: theme.shapes.corner.medium,
+                        borderRadius: theme.shapes.corner.small,
                     },
                 },
                 {

package/components/Checkbox/Checkbox.tsx

@@ -1,125 +1,161 @@
 import { useControlledValue } from '@react-native-molecules/utils/hooks';
-import { forwardRef, memo, useCallback, useMemo } from 'react';
+import { forwardRef, memo, useCallback, useContext, useId, useMemo } from 'react';
 import { View } from 'react-native';
 
 import { resolveStateVariant } from '../../utils';
 import { Text } from '../Text';
 import CheckboxBase from './CheckboxBase';
-import type { CheckBoxBaseProps, States } from './types';
-import { styles } from './utils';
-
-export type Props = CheckBoxBaseProps;
+import { CheckboxItemContext } from './context';
+import type { CheckboxLabelProps, CheckboxProps, CheckboxRowProps } from './types';
+import { checkboxRowStyles } from './utils';
 
+/**
+ * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onValueChange`.
+ */
 const Checkbox = (
     {
         value: valueProp,
-        onChange: onChangeProp,
         defaultValue,
-        disabled,
+        onValueChange,
         indeterminate,
-        label,
-        labelStyle,
-        containerStyle,
-        labelProps,
-        position = 'leading',
-        accessibilityLabel: accessibilityLabelProp,
+        disabled: disabledProp,
+        size: sizeProp,
         testID,
-        size = 'md',
-        style: styleProp,
         ...rest
-    }: Props,
+    }: CheckboxProps,
     ref: any,
 ) => {
-    const [value, onChange] = useControlledValue({
+    const item = useContext(CheckboxItemContext);
+
+    const [value, setValue] = useControlledValue({
         value: valueProp,
-        onChange: onChangeProp,
         defaultValue,
-        disabled: disabled,
+        onChange: onValueChange,
+        disabled: disabledProp,
     });
 
-    // Prepare label-related state and styles (always compute, even if not used)
-    const isLeading = position === 'leading';
-    const checked = Boolean(value) && !indeterminate;
-    const state = resolveStateVariant({ disabled: Boolean(disabled), checked });
-    const accessibilityLabel = accessibilityLabelProp ?? label;
-
-    // Use variants only when label is provided
-    if (label) {
-        styles.useVariants({
-            variant: 'item',
-            // @ts-ignore // TODO - fix this
-            state: state as States,
-            isLeading,
-            // @ts-ignore // TODO - fix this
-            size,
-        });
-    }
+    // Inside a CheckboxRow the item context drives state; standalone (bare) mode owns its own.
+    const checked = item ? item.checked : Boolean(value);
+    const disabled = disabledProp ?? item?.disabled;
+    const isIndeterminate = item ? item.indeterminate : indeterminate;
+    const size = sizeProp ?? item?.size ?? 'md';
+    const labelId = item?.labelId;
 
-    const { containerStyles, labelStyles, style } = useMemo(() => {
-        return {
-            containerStyles: [styles.itemContainer, containerStyle],
-            labelStyles: [
-                // @ts-ignore
-                styles.label,
-                labelStyle,
-            ],
-            style: [styles.root, styleProp],
-        };
-    }, [containerStyle, labelStyle, styleProp]);
-
-    const onLabelPress = useCallback(() => {
-        if (!disabled) {
-            onChange(!value);
-        }
-    }, [onChange, value, disabled]);
-
-    const accessibilityState = useMemo(
-        () => ({
-            checked: Boolean(value),
-            disabled,
-        }),
-        [disabled, value],
+    const onChange = useCallback(
+        (next: boolean) => {
+            if (item) {
+                item.onToggle();
+            } else {
+                setValue(next);
+            }
+        },
+        [item, setValue],
     );
 
-    const checkboxStyle = label ? style : styleProp;
-    const checkboxAccessibilityLabel = label ? undefined : accessibilityLabelProp;
-
-    const checkbox = (
+    return (
         <CheckboxBase
-            ref={label ? undefined : ref}
-            value={value}
+            {...rest}
+            ref={ref}
+            value={checked}
             onChange={onChange}
+            indeterminate={isIndeterminate}
             disabled={disabled}
-            indeterminate={indeterminate}
             size={size}
-            style={checkboxStyle}
             testID={testID}
-            accessibilityLabel={checkboxAccessibilityLabel}
-            {...rest}
+            accessibilityLabelledBy={labelId}
         />
     );
+};
+
+/**
+ * The label for a CheckboxRow. Pressing it toggles the checkbox, and it is wired to the control via
+ * `nativeID` / `accessibilityLabelledBy` (web `id` / `aria-labelledby`).
+ */
+export const CheckboxLabel = memo(({ children, style, ...rest }: CheckboxLabelProps) => {
+    const item = useContext(CheckboxItemContext);
+
+    const state = resolveStateVariant({
+        disabled: !!item?.disabled,
+        checked: !!item?.checked,
+    });
+
+    checkboxRowStyles.useVariants({ state: state as any });
 
-    if (!label) {
-        return checkbox;
+    if (!item) {
+        return (
+            <Text style={style} {...rest}>
+                {children}
+            </Text>
+        );
     }
 
     return (
-        <View style={containerStyles} ref={ref}>
-            {isLeading && checkbox}
-            <Text
-                onPress={onLabelPress}
-                disabled={disabled}
-                selectable={false}
-                accessibilityLabel={accessibilityLabel}
-                accessibilityRole="checkbox"
-                accessibilityState={accessibilityState}
-                {...labelProps}
-                style={labelStyles}>
-                {label}
-            </Text>
-            {!isLeading && checkbox}
-        </View>
+        <Text
+            nativeID={item.labelId}
+            onPress={item.disabled ? undefined : item.onToggle}
+            disabled={item.disabled}
+            selectable={false}
+            style={[checkboxRowStyles.label, style]}
+            {...rest}>
+            {children}
+        </Text>
     );
-};
+});
+
+CheckboxLabel.displayName = 'Checkbox_Label';
+
+/**
+ * A row that binds checked state to a Checkbox control and its Checkbox.Label. The row itself is not
+ * pressable — only the Checkbox and Checkbox.Label inside it are. Children may be in any order.
+ */
+export const CheckboxRow = memo(
+    forwardRef(
+        (
+            {
+                value: valueProp,
+                defaultValue,
+                onValueChange,
+                indeterminate,
+                disabled,
+                size,
+                style,
+                children,
+                ...rest
+            }: CheckboxRowProps,
+            ref: any,
+        ) => {
+            const labelId = useId();
+
+            const [value, setValue] = useControlledValue({
+                value: valueProp,
+                defaultValue,
+                onChange: onValueChange,
+                disabled,
+            });
+
+            const checked = Boolean(value);
+
+            const onToggle = useCallback(() => {
+                if (disabled) return;
+                setValue(!checked);
+            }, [disabled, setValue, checked]);
+
+            const contextValue = useMemo(
+                () => ({ checked, onToggle, disabled, indeterminate, size, labelId }),
+                [checked, onToggle, disabled, indeterminate, size, labelId],
+            );
+
+            return (
+                <CheckboxItemContext.Provider value={contextValue}>
+                    <View ref={ref} style={[checkboxRowStyles.row, style]} {...rest}>
+                        {children}
+                    </View>
+                </CheckboxItemContext.Provider>
+            );
+        },
+    ),
+);
+
+CheckboxRow.displayName = 'Checkbox_Row';
 
 export default memo(forwardRef(Checkbox));

package/components/Checkbox/CheckboxBase.ios.tsx

@@ -4,12 +4,10 @@ import { View } from 'react-native';
 import { resolveStateVariant } from '../../utils';
 import { Icon } from '../Icon';
 import { TouchableRipple } from '../TouchableRipple';
-import type { CheckBoxBaseProps, States } from './types';
+import type { CheckboxBaseProps, States } from './types';
 import { iconSizeMap, styles } from './utils';
 
-export type Props = Omit<CheckBoxBaseProps, 'uncheckedColor' | 'value' | 'defaultValue'> & {
-    value: boolean;
-};
+export type Props = Omit<CheckboxBaseProps, 'uncheckedColor'>;
 
 const CheckboxIOS = (
     {

package/components/Checkbox/CheckboxBase.tsx

@@ -1,5 +1,4 @@
-import { forwardRef, memo, type PropsWithoutRef, useCallback, useMemo } from 'react';
-import { type ViewProps } from 'react-native';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
@@ -7,16 +6,10 @@ import { tokenStylesParser } from '../../utils/tokenStylesParser';
 import { Icon } from '../Icon';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple } from '../TouchableRipple';
-import type { CheckBoxBaseProps, States } from './types';
+import type { CheckboxBaseProps, States } from './types';
 import { iconSizeMap, styles } from './utils';
 
-export type Props = Omit<CheckBoxBaseProps, 'value' | 'defaultValue'> & {
-    value: boolean;
-    /**
-     * props for the stateLayer
-     */
-    stateLayerProps?: PropsWithoutRef<ViewProps>;
-};
+export type Props = CheckboxBaseProps;
 
 const CheckboxAndroid = (
     {

package/components/Checkbox/context.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+import type { Size } from './types';
+
+export type CheckboxItemContextType = {
+    checked: boolean;
+    onToggle: () => void;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    size?: Size;
+    labelId: string;
+};
+
+export const CheckboxItemContext = createContext<CheckboxItemContextType | null>(null);

package/components/Checkbox/index.tsx

@@ -1,7 +1,14 @@
 import { getRegisteredComponentWithFallback } from '../../core';
-import CheckboxComponent from './Checkbox';
+// @component ./Checkbox.tsx
+import CheckboxBox, { CheckboxLabel, CheckboxRow as CheckboxRowComponent } from './Checkbox';
 
-export const Checkbox = getRegisteredComponentWithFallback('Checkbox', CheckboxComponent);
+const CheckboxDefault = Object.assign(CheckboxBox, {
+    Label: CheckboxLabel,
+    Row: CheckboxRowComponent,
+});
 
-export type { Props as CheckboxProps } from './Checkbox';
-export { styles as checkboxStyles } from './utils';
+export const Checkbox = getRegisteredComponentWithFallback('Checkbox', CheckboxDefault);
+export const CheckboxRow = CheckboxRowComponent;
+
+export type { CheckboxLabelProps, CheckboxProps, CheckboxRowProps } from './types';
+export { checkboxRowStyles, styles as checkboxStyles } from './utils';

package/components/Checkbox/types.ts

@@ -1,46 +1,45 @@
-import type { StyleProp, TextProps, TextStyle, ViewStyle } from 'react-native';
+import type { PropsWithoutRef, ReactNode } from 'react';
+import type { TextProps, ViewProps } from 'react-native';
 
 import type { TouchableRippleProps } from '../TouchableRipple';
 
 export type Size = 'sm' | 'md' | 'lg';
 export type States = 'disabled' | 'checked' | 'hovered' | 'checkedAndHovered';
 
-export type CheckBoxBaseProps = Omit<TouchableRippleProps, 'children'> & {
+/**
+ * Internal props for the platform control (CheckboxBase).
+ */
+export type CheckboxBaseProps = Omit<TouchableRippleProps, 'children'> & {
     /**
-     * value of checkbox.
+     * Whether the checkbox is checked.
      */
-    value?: boolean;
-    /**
-     * defaultValue of checkbox.
-     */
-    defaultValue?: boolean;
+    value: boolean;
     /**
-     * function execute when the value change i.e checkbox is press
+     * Called when the checkbox is pressed.
      */
     onChange?: (newValue: boolean) => void;
     /**
-     * Whether or not if it's in the indeterminate state, if true, it will override the value
+     * Whether the checkbox is in the indeterminate state (overrides `value`).
      */
     indeterminate?: boolean;
     /**
-     * Whether checkbox is disabled.
+     * Whether the checkbox is disabled.
      */
     disabled?: boolean;
     /**
-     * Size of the icon.
-     * Should be a number or a Design Token
+     * Size of the checkbox.
      */
     size?: Size;
     /**
-     * Custom color for unchecked checkbox.
+     * Custom color for the checked checkbox.
      */
-    uncheckedColor?: string;
+    color?: string;
     /**
-     * Custom color for checkbox.
+     * Custom color for the unchecked checkbox.
      */
-    color?: string;
+    uncheckedColor?: string;
     /**
-     * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
+     * Accessibility label for the touchable.
      */
     accessibilityLabel?: string;
     /**
@@ -48,25 +47,60 @@ export type CheckBoxBaseProps = Omit<TouchableRippleProps, 'children'> & {
      */
     testID?: string;
     /**
-     * Label to be displayed next to the checkbox.
+     * Props for the state layer.
+     */
+    stateLayerProps?: PropsWithoutRef<ViewProps>;
+};
+
+/**
+ * The checkbox control (the box). Use inside a CheckboxRow, or standalone with `value`/`onValueChange`.
+ */
+export type CheckboxProps = Omit<CheckboxBaseProps, 'value' | 'onChange'> & {
+    /**
+     * Whether the checkbox is checked (controlled).
+     */
+    value?: boolean;
+    /**
+     * Default checked state (uncontrolled).
+     */
+    defaultValue?: boolean;
+    /**
+     * Called when the checked state changes.
+     */
+    onValueChange?: (newValue: boolean) => void;
+};
+
+export type CheckboxRowProps = ViewProps & {
+    /**
+     * Whether the checkbox is checked (controlled).
+     */
+    value?: boolean;
+    /**
+     * Default checked state (uncontrolled).
+     */
+    defaultValue?: boolean;
+    /**
+     * Called when the checked state changes.
      */
-    label?: string;
+    onValueChange?: (newValue: boolean) => void;
     /**
-     * Style that is passed to Label element.
+     * Whether the checkbox is in the indeterminate state.
      */
-    labelStyle?: StyleProp<TextStyle>;
+    indeterminate?: boolean;
     /**
-     * Style that is passed to Container element (when label is provided).
+     * Disables the row (control + label).
      */
-    containerStyle?: ViewStyle;
+    disabled?: boolean;
     /**
-     * Props for the label text element.
+     * Size applied to the checkbox.
      */
-    labelProps?: Omit<TextProps, 'children' | 'style'>;
+    size?: Size;
     /**
-     * Checkbox control position relative to label.
+     * Checkbox control and Checkbox.Label, in any order.
      */
-    position?: 'leading' | 'trailing';
+    children: ReactNode;
+};
 
-    style?: StyleProp<TextStyle>;
+export type CheckboxLabelProps = TextProps & {
+    children: ReactNode;
 };

package/components/Checkbox/utils.ts

@@ -21,17 +21,14 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
                 sm: {
                     padding: PADDING,
                     borderRadius: 16,
-                    // iconSize: iconSizeMap.sm,
                 },
                 md: {
                     padding: PADDING,
                     borderRadius: 18,
-                    // iconSize: iconSizeMap.md,
                 },
                 lg: {
                     padding: PADDING,
                     borderRadius: 20,
-                    // iconSize: iconSizeMap.lg,
                 },
             },
         },
@@ -81,57 +78,6 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    itemContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    label: {
-        flexShrink: 1,
-        flexGrow: 1,
-        variants: {
-            variant: {
-                item: {
-                    color: theme.colors.onSurface,
-                },
-            },
-            isLeading: {
-                true: {
-                    textAlign: 'right',
-                    paddingLeft: 0,
-                    paddingRight: theme.spacings['2'],
-                },
-                false: {
-                    textAlign: 'left',
-                    paddingLeft: theme.spacings['2'],
-                    paddingRight: 0,
-                },
-            },
-        },
-        compoundVariants: [
-            {
-                variant: 'item',
-                size: 'sm',
-                styles: {
-                    ...theme.typescale.bodyMedium,
-                },
-            },
-            {
-                variant: 'item',
-                size: 'md',
-                styles: {
-                    ...theme.typescale.bodyMedium,
-                },
-            },
-            {
-                variant: 'item',
-                size: 'lg',
-                styles: {
-                    ...theme.typescale.bodyLarge,
-                },
-            },
-        ],
-    },
     icon: {
         color: theme.colors.onSurfaceVariant,
 
@@ -150,36 +96,32 @@ const checkboxStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
-    // compoundVariantStyles: (variant: 'android' | 'ios' | 'item', size: Size, state: States) => {
-    //     if (variant === 'android') {
-    //         return {
-    //             root: {
-    //                 ...(size === 'sm' && { width: 32, height: 32 }),
-    //                 ...(size === 'md' && { width: 36, height: 36 }),
-    //                 ...(size === 'lg' && { width: 40, height: 40 }),
-    //             },
-    //             stateLayer: {
-    //                 ...(state === 'hovered' && {
-    //                     backgroundColor: theme.colors.stateLayer.hover.onSurface,
-    //                 }),
-    //                 ...(state === 'checkedAndHovered' && {
-    //                     backgroundColor: theme.colors.stateLayer.hover.primary,
-    //                 }),
-    //             },
-    //         } as any;
-    //     }
+}));
 
-    //     if (variant === 'item') {
-    //         return {
-    //             root: {
-    //                 labelColor: 'colors.onSurface',
-    //                 ...(size === 'sm' && { labelTypeScale: theme.typescale.bodyMedium }),
-    //                 ...(size === 'md' && { labelTypeScale: theme.typescale.bodyLarge }),
-    //                 ...(size === 'lg' && { labelTypeScale: theme.typescale.bodyLarge }),
-    //             },
-    //         };
-    //     }
-    // },
+const checkboxRowStylesDefault = StyleSheet.create(theme => ({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    label: {
+        flexShrink: 1,
+        flexGrow: 1,
+        color: theme.colors.onSurface,
+        ...theme.typescale.bodyLarge,
+
+        variants: {
+            state: {
+                checked: {},
+                checkedAndHovered: {},
+                hovered: {},
+                disabled: { color: theme.colors.onSurfaceDisabled },
+            },
+        },
+    },
 }));
 
 export const styles = getRegisteredComponentStylesWithFallback('Checkbox', checkboxStylesDefault);
+export const checkboxRowStyles = getRegisteredComponentStylesWithFallback(
+    'Checkbox_Row',
+    checkboxRowStylesDefault,
+);

package/components/IconButton/IconButton.tsx

@@ -13,13 +13,12 @@ import CrossFadeIcon from '../Icon/CrossFadeIcon';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
 import type { IconButtonShape, IconButtonVariant, IconButtonWidth } from './types';
-import { defaultStyles, iconButtonSizeToIconSizeMap } from './utils';
-
-const ICON_BUTTON_MIN_CONTAINER_SIZE = 32;
-const ICON_BUTTON_CONTAINER_PADDING = 16;
-const M3_ICON_BUTTON_NARROW_WIDTH_ADJUSTMENT = -8;
-const M3_ICON_BUTTON_WIDE_WIDTH_ADJUSTMENT = 12;
-const M3_ICON_BUTTON_SQUARE_CORNER_RADIUS = 12;
+import {
+    defaultStyles,
+    iconButtonConstants,
+    iconButtonDefaultProps,
+    iconButtonSizeToIconSizeMap,
+} from './utils';
 
 export type Props = Omit<TouchableRippleProps, 'children' | 'style'> & {
     /**
@@ -88,17 +87,17 @@ const emptyObject = {};
 const IconButton = (
     {
         name,
-        size = 24,
+        size = iconButtonDefaultProps.size,
         color: _iconColor,
         type,
         accessibilityLabel,
         disabled = false,
         onPress,
         selected = false,
-        animated = false,
-        variant = 'default',
-        shape = 'round',
-        width = 'default',
+        animated = iconButtonDefaultProps.animated,
+        variant = iconButtonDefaultProps.variant,
+        shape = iconButtonDefaultProps.shape,
+        width = iconButtonDefaultProps.width,
         style,
         testID,
         stateLayerProps = emptyObject,
@@ -142,18 +141,18 @@ const IconButton = (
             iconButtonSizeToIconSizeMap[size as keyof typeof iconButtonSizeToIconSizeMap] ??
             (typeof size === 'number' && size ? (size as number) : 24);
         const containerHeight = Math.max(
-            ICON_BUTTON_MIN_CONTAINER_SIZE,
-            iconSizeInNum + ICON_BUTTON_CONTAINER_PADDING,
+            iconButtonConstants.minContainerSize,
+            iconSizeInNum + iconButtonConstants.containerPadding,
         );
         const widthAdjustment =
             width === 'narrow'
-                ? M3_ICON_BUTTON_NARROW_WIDTH_ADJUSTMENT
+                ? iconButtonConstants.narrowWidthAdjustment
                 : width === 'wide'
-                ? M3_ICON_BUTTON_WIDE_WIDTH_ADJUSTMENT
+                ? iconButtonConstants.wideWidthAdjustment
                 : 0;
         const containerWidth = Math.max(iconSizeInNum, containerHeight + widthAdjustment);
         const borderRadius =
-            shape === 'round' ? containerHeight / 2 : M3_ICON_BUTTON_SQUARE_CORNER_RADIUS;
+            shape === 'round' ? containerHeight / 2 : iconButtonConstants.squareCornerRadius;
 
         return {
             iconColor: _iconColor,