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

package/components/Slot/compose-refs.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+
+type PossibleRef<T> = React.Ref<T> | undefined;
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */
+function setRef<T>(ref: PossibleRef<T>, value: T) {
+    if (typeof ref === 'function') {
+        return ref(value);
+    } else if (ref !== null && ref !== undefined) {
+        ref.current = value;
+    }
+}
+
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */
+function composeRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+    return node => {
+        let hasCleanup = false;
+        const cleanups = refs.map(ref => {
+            const cleanup = setRef(ref, node);
+            if (!hasCleanup && typeof cleanup === 'function') {
+                hasCleanup = true;
+            }
+            return cleanup;
+        });
+
+        // React <19 will log an error to the console if a callback ref returns a
+        // value. We don't use ref cleanups internally so this will only happen if a
+        // user's ref callback returns a value, which we only expect if they are
+        // using the cleanup functionality added in React 19.
+        if (hasCleanup) {
+            return () => {
+                for (let i = 0; i < cleanups.length; i++) {
+                    const cleanup = cleanups[i];
+                    if (typeof cleanup === 'function') {
+                        cleanup();
+                    } else {
+                        setRef(refs[i], null);
+                    }
+                }
+            };
+        }
+
+        return undefined;
+    };
+}
+
+/**
+ * A custom hook that composes multiple refs
+ * Accepts callback refs and RefObject(s)
+ */
+function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T> {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return React.useCallback(composeRefs(...refs), refs);
+}
+
+export { composeRefs, useComposedRefs };

package/components/Slot/index.tsx

@@ -0,0 +1,8 @@
+import { getRegisteredComponentWithFallback } from '../../core';
+import { Slot as SlotComponent, Slottable } from './Slot';
+
+const SlotDefault = Object.assign(SlotComponent, { Slottable, Root: SlotComponent });
+
+export const Slot = getRegisteredComponentWithFallback('Slot', SlotDefault);
+
+export { createSlot, createSlottable, type SlotProps } from './Slot';

package/components/Surface/Surface.android.tsx

@@ -2,11 +2,13 @@ import { forwardRef, memo, type ReactNode, useMemo } from 'react';
 import { Animated, type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
 import { useUnistyles } from 'react-native-unistyles';
 
-import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../types/theme';
 import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
+import { Slot } from '../Slot';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, getElevationAndroid } from './utils';
+import { defaultStyles } from './utils';
+
+const AnimatedView = Animated.createAnimatedComponent(View);
 
 export type Props = ViewProps & {
     /**
@@ -20,11 +22,31 @@ export type Props = ViewProps & {
      * TestID used for testing purposes
      */
     testID?: string;
+    /**
+     * When `true`, the component will not render a wrapper element. Instead, it will
+     * merge its props (styles, elevation shadow, ref) onto its immediate child element.
+     * This follows the Radix UI "Slot" pattern for flexible component composition.
+     *
+     * @example
+     * ```tsx
+     * // With asChild - merges elevation styles onto the child
+     * <Surface asChild elevation={2}>
+     *   <Card><Text>Content</Text></Card>
+     * </Surface>
+     * ```
+     *
+     * @note When `asChild` is `true`, only a single child element is allowed.
+     * @default false
+     */
+    asChild?: boolean;
 };
 
 const elevationLevel = [0, 1, 2, 6, 8, 12];
 
-const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, ref: any) => {
+const Surface = (
+    { elevation: _elevation = 1, style, children, testID, asChild = false, ...props }: Props,
+    ref: any,
+) => {
     const { theme } = useUnistyles();
 
     const backgroundColor = (() => {
@@ -33,6 +55,7 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
     })();
 
     const { memoizedStyles, surfaceBackground } = useMemo(() => {
+        const elevation = typeof _elevation === 'number' ? (_elevation > 5 ? 5 : _elevation) : 0;
         return {
             memoizedStyles: [
                 {
@@ -41,7 +64,7 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
                 defaultStyles.root,
                 style,
                 {
-                    elevation: getElevationAndroid(elevation, inputRange, elevationLevel),
+                    elevation: elevationLevel[elevation],
                 },
             ] as StyleProp<ViewStyle>,
             surfaceBackground: extractPropertiesFromStyles(
@@ -49,13 +72,15 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, re
                 ['backgroundColor'],
             ).backgroundColor,
         };
-    }, [backgroundColor, elevation, style]);
+    }, [backgroundColor, _elevation, style]);
+
+    const Component = asChild ? Slot : AnimatedView;
 
     return (
         <BackgroundContextWrapper backgroundColor={surfaceBackground}>
-            <View ref={ref} {...props} testID={testID} style={memoizedStyles}>
+            <Component ref={ref} {...props} testID={testID} style={memoizedStyles}>
                 {children}
-            </View>
+            </Component>
         </BackgroundContextWrapper>
     );
 };

package/components/Surface/Surface.ios.tsx

@@ -4,8 +4,11 @@ import { useUnistyles } from 'react-native-unistyles';
 
 import type { MD3Elevation } from '../../types/theme';
 import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
+import { Slot } from '../Slot';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
-import { defaultStyles, getStyleForShadowLayer } from './utils';
+import { defaultStyles, getCombinedShadowStyle } from './utils';
+
+const AnimatedView = Animated.createAnimatedComponent(View);
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -27,6 +30,23 @@ export type Props = ComponentPropsWithRef<typeof View> & {
      * TestID used for testing purposes
      */
     testID?: string;
+    /**
+     * When `true`, the component will not render a wrapper element. Instead, it will
+     * merge its props (styles, elevation shadow, ref) onto its immediate child element.
+     * This follows the Radix UI "Slot" pattern for flexible component composition.
+     *
+     * @example
+     * ```tsx
+     * // With asChild - merges elevation styles onto the child
+     * <Surface asChild elevation={2}>
+     *   <Card><Text>Content</Text></Card>
+     * </Surface>
+     * ```
+     *
+     * @note When `asChild` is `true`, only a single child element is allowed.
+     * @default false
+     */
+    asChild?: boolean;
 };
 
 /**
@@ -71,53 +91,38 @@ export type Props = ComponentPropsWithRef<typeof View> & {
  * });
  * ```
  */
-const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, ref: any) => {
+const Surface = (
+    { elevation = 1, style, children, testID, asChild = false, ...props }: Props,
+    ref: any,
+) => {
     const { theme } = useUnistyles();
     const backgroundColor = (() => {
         // @ts-ignore
         return theme.colors.elevation?.[`level${elevation}`];
     })();
 
-    const { surfaceBackground, sharedStyle, layer0Style, layer1Style } = useMemo(() => {
-        const { position, alignSelf, top, left, right, bottom, borderRadius } =
-            extractPropertiesFromStyles(
-                [defaultStyles.root as ViewStyle, style],
-                ['position', 'alignSelf', 'top', 'left', 'right', 'bottom', 'borderRadius'],
-            );
-        const absoluteStyle = { position, alignSelf, top, right, bottom, left };
-
+    const { surfaceBackground, combinedStyle } = useMemo(() => {
         return {
             surfaceBackground: extractPropertiesFromStyles(
                 [defaultStyles.root as ViewStyle, style],
                 ['backgroundColor'],
             ).backgroundColor,
-            sharedStyle: [
-                { backgroundColor, borderRadius },
+            combinedStyle: [
+                { backgroundColor },
+                getCombinedShadowStyle(elevation),
                 defaultStyles.root,
                 style,
-                {
-                    position: undefined,
-                    alignSelf: undefined,
-                    top: undefined,
-                    left: undefined,
-                    right: undefined,
-                    bottom: undefined,
-                },
             ],
-            layer0Style: [getStyleForShadowLayer(0, elevation), absoluteStyle, { borderRadius }],
-            layer1Style: [getStyleForShadowLayer(1, elevation), { borderRadius }],
         };
     }, [backgroundColor, elevation, style]);
 
+    const Component = asChild ? Slot : AnimatedView;
+
     return (
         <BackgroundContextWrapper backgroundColor={surfaceBackground}>
-            <View ref={ref} style={layer0Style}>
-                <View style={layer1Style}>
-                    <View {...props} testID={testID} style={sharedStyle}>
-                        {children}
-                    </View>
-                </View>
-            </View>
+            <Component ref={ref} {...props} testID={testID} style={combinedStyle}>
+                {children}
+            </Component>
         </BackgroundContextWrapper>
     );
 };

package/components/Surface/Surface.tsx

@@ -1,11 +1,14 @@
 import { forwardRef, memo, type ReactNode, useMemo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+import { Animated, type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
 
 import shadow from '../../styles/shadow';
 import type { MD3Elevation } from '../../types/theme';
+import { Slot } from '../Slot';
 import { BackgroundContextWrapper } from './BackgroundContextWrapper';
 import { defaultStyles } from './utils';
 
+const AnimatedView = Animated.createAnimatedComponent(View);
+
 export type Props = ViewProps & {
     /**
      * Content of the `Surface`.
@@ -18,11 +21,33 @@ export type Props = ViewProps & {
      * TestID used for testing purposes
      */
     testID?: string;
+    /**
+     * When `true`, the component will not render a wrapper element. Instead, it will
+     * merge its props (styles, elevation shadow, ref) onto its immediate child element.
+     * This follows the Radix UI "Slot" pattern for flexible component composition.
+     *
+     * @example
+     * ```tsx
+     * // Without asChild - renders an AnimatedView wrapper
+     * <Surface elevation={2}>
+     *   <Card><Text>Content</Text></Card>
+     * </Surface>
+     *
+     * // With asChild - merges elevation styles onto the child
+     * <Surface asChild elevation={2}>
+     *   <Card><Text>Content</Text></Card>
+     * </Surface>
+     * ```
+     *
+     * @note When `asChild` is `true`, only a single child element is allowed.
+     * @default false
+     */
+    asChild?: boolean;
 };
 
 // for Web
 const Surface = (
-    { elevation = 1, style, children, testID, backgroundColor, ...props }: Props,
+    { elevation = 1, style, children, testID, backgroundColor, asChild = false, ...props }: Props,
     ref: any,
 ) => {
     const { surfaceStyle } = useMemo(() => {
@@ -36,11 +61,13 @@ const Surface = (
         };
     }, [backgroundColor, elevation, style]);
 
+    const Component = asChild ? Slot : AnimatedView;
+
     return (
         <BackgroundContextWrapper backgroundColor={backgroundColor!}>
-            <View ref={ref} {...props} testID={testID} style={surfaceStyle}>
+            <Component ref={ref} {...props} testID={testID} style={surfaceStyle}>
                 {children}
-            </View>
+            </Component>
         </BackgroundContextWrapper>
     );
 };

package/components/Surface/utils.ts

@@ -72,10 +72,48 @@ export const getStyleForShadowLayer = (
     };
 };
 
-export const getElevationAndroid = (
-    elevation: number,
-    _inputRange: number[],
-    elevationLevel: number[],
-) => {
-    return elevationLevel[elevation];
+/**
+ * Combines the two shadow layers into a single shadow style.
+ * This approximates the two-layer shadow effect using a single shadow.
+ */
+export const getCombinedShadowStyle = (elevation: number, shadowColor = _shadowColor) => {
+    if (elevation === 0) {
+        return {
+            shadowColor,
+            shadowOpacity: 0,
+            shadowOffset: { width: 0, height: 0 },
+            shadowRadius: 0,
+        };
+    }
+
+    const layer0 = iOSShadowOutputRanges[0];
+    const layer1 = iOSShadowOutputRanges[1];
+
+    // Use the larger shadow offset (from layer 0)
+    const shadowOffsetHeight = layer0.height[elevation];
+
+    // Use the larger shadow radius (from layer 0)
+    const shadowRadius = layer0.shadowRadius[elevation];
+
+    // Combine opacities (additive, capped at 1.0)
+    // This approximates the visual effect of two overlapping shadows
+    const shadowOpacity = Math.min(1.0, layer0.shadowOpacity + layer1.shadowOpacity);
+
+    return {
+        shadowColor,
+        shadowOpacity,
+        shadowOffset: {
+            width: 0,
+            height: shadowOffsetHeight,
+        },
+        shadowRadius,
+    };
 };
+
+// export const getElevationAndroid = (
+//     elevation: number,
+//     _inputRange: number[],
+//     elevationLevel: number[],
+// ) => {
+//     return elevationLevel[elevation];
+// };

package/components/Switch/Switch.ios.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo } from 'react';
 import {
     Switch as NativeSwitch,
@@ -6,7 +7,6 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useControlledValue } from '../../hooks';
 import type { IconType } from '../Icon';
 
 export type Props = SwitchProps & {

package/components/Switch/Switch.tsx

@@ -1,3 +1,4 @@
+import { useControlledValue, useLatest } from '@react-native-molecules/utils/hooks';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import {
     Animated,
@@ -9,7 +10,7 @@ import {
     type ViewStyle,
 } from 'react-native';
 
-import { useActionState, useControlledValue, useLatest } from '../../hooks';
+import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { Icon, type IconType } from '../Icon';
 import { switchStyles, useSwitchColors } from './utils';
@@ -70,6 +71,7 @@ const Switch = (
         ref,
         actionsToListen: ['focus', 'hover', 'press'],
     });
+    const isFirstRender = useRef(true);
 
     const [value, onChange] = useControlledValue({
         value: valueProp,
@@ -98,8 +100,8 @@ const Switch = (
         state,
     });
 
-    const toggleMarginAnimation = useRef(new Animated.Value(value ? 0 : 1)).current;
-    const toggleSizeAnimation = useRef(new Animated.Value(value ? 0 : 1)).current;
+    const toggleMarginAnimation = useRef(new Animated.Value(value ? 1 : 0)).current;
+    const toggleSizeAnimation = useRef(new Animated.Value(value ? 1 : 0)).current;
 
     const thumbPosition = toggleMarginAnimation.interpolate({
         inputRange: [0, 1],
@@ -130,6 +132,11 @@ const Switch = (
     });
 
     useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+
         Animated.timing(toggleMarginAnimation, {
             toValue: value ? 1 : 0,
             duration: 300,

package/components/Tabs/TabItem.tsx

@@ -1,29 +1,20 @@
-import {
-    Children,
-    cloneElement,
-    forwardRef,
-    isValidElement,
-    type JSXElementConstructor,
-    memo,
-    type ReactElement,
-    useCallback,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { type LayoutChangeEvent, View, type ViewProps, type ViewStyle } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { tabsItemStyles } from './utils';
+import { TabItemContext, tabsItemStyles } from './utils';
 
-export type TabItemProps = Omit<TouchableRippleProps, 'children' | 'ref'> & {
+export type TabItemProps<T extends string | number> = Omit<
+    TouchableRippleProps,
+    'children' | 'ref'
+> & {
     /**
      * name of the tab. This should be unique like a route name
      * */
-    name: string;
+    name: T;
     /**
      * Allows to define if TabItem is active.
      * */
@@ -37,22 +28,11 @@ export type TabItemProps = Omit<TouchableRippleProps, 'children' | 'ref'> & {
     contentsContainerProps?: Omit<ViewProps, 'children' | 'style' | 'onLayout'>;
     onLayoutContent?: (e: LayoutChangeEvent) => void;
     accessibilityLabel?: string;
-    children: ReactElement<
-        {
-            active: boolean;
-            hovered: boolean;
-            variant: 'primary' | 'secondary';
-        },
-        JSXElementConstructor<{
-            active: boolean;
-            hovered: boolean;
-            variant: 'primary' | 'secondary';
-        }>
-    >;
+    children: ReactNode;
     stateLayerProps?: ViewProps;
 };
 
-const TabItem = (
+const TabItem = <T extends string | number>(
     {
         active = false,
         variant = 'primary',
@@ -65,7 +45,7 @@ const TabItem = (
         children,
         stateLayerProps,
         ...rest
-    }: TabItemProps,
+    }: TabItemProps<T>,
     ref: any,
 ) => {
     const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
@@ -110,36 +90,33 @@ const TabItem = (
         [active, accessibilityLabel, state],
     );
 
+    const contextValue = useMemo(() => ({ active, hovered, variant }), [active, hovered, variant]);
+
     return (
-        <TouchableRipple
-            style={containerStyle}
-            accessibilityRole="tab"
-            accessibilityState={accessibilityState}
-            accessibilityValue={accessibilityValue}
-            {...rest}
-            ref={actionsRef}
-            onLayout={onLayout}>
-            <>
-                <View
-                    style={[tabsItemStyles.contentsContainer, contentsContainerStyleProp]}
-                    {...contentsContainerProps}
-                    onLayout={onLayoutHandled}>
-                    {Children.map(children, child => {
-                        if (!isValidElement(child)) return null;
-                        return cloneElement(child, {
-                            active,
-                            hovered,
-                            variant,
-                        });
-                    })}
-                </View>
+        <TabItemContext.Provider value={contextValue}>
+            <TouchableRipple
+                style={containerStyle}
+                accessibilityRole="tab"
+                accessibilityState={accessibilityState}
+                accessibilityValue={accessibilityValue}
+                {...rest}
+                ref={actionsRef}
+                onLayout={onLayout}>
+                <>
+                    <View
+                        style={[tabsItemStyles.contentsContainer, contentsContainerStyleProp]}
+                        {...contentsContainerProps}
+                        onLayout={onLayoutHandled}>
+                        {children}
+                    </View>
 
-                <StateLayer
-                    {...stateLayerProps}
-                    style={[tabsItemStyles.stateLayer, stateLayerProps?.style]}
-                />
-            </>
-        </TouchableRipple>
+                    <StateLayer
+                        {...stateLayerProps}
+                        style={[tabsItemStyles.stateLayer, stateLayerProps?.style]}
+                    />
+                </>
+            </TouchableRipple>
+        </TabItemContext.Provider>
     );
 };
 

package/components/Tabs/TabLabel.tsx

@@ -1,9 +1,9 @@
-import { type FC, memo, useMemo } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { type TextProps, type TextStyle } from 'react-native';
 
 import { Icon, type IconProps, type IconType } from '../Icon';
 import { Text } from '../Text';
-import { tabsLabelStyles } from './utils';
+import { TabItemContext, tabsLabelStyles } from './utils';
 
 const DEFAULT_ICON_SIZE = 24;
 
@@ -23,11 +23,6 @@ export type TabLabelProps = {
     iconStyle?: TextStyle;
 
     activeColor?: string;
-
-    active: boolean;
-    hovered: boolean;
-
-    variant: 'primary' | 'secondary';
 };
 
 const TabLabel = memo((props: TabLabelProps) => {
@@ -40,9 +35,10 @@ const TabLabel = memo((props: TabLabelProps) => {
         labelStyle: labelStyleProp,
         labelProps,
         label,
-        active,
     } = props;
 
+    const { active } = useContext(TabItemContext);
+
     // tabsLabelStyles.useVariants({
     //     variant,
     //     state: resolveStateVariant({
@@ -81,4 +77,4 @@ const TabLabel = memo((props: TabLabelProps) => {
 
 TabLabel.displayName = 'TabLabel';
 
-export default TabLabel as unknown as FC<Omit<TabLabelProps, 'active' | 'hovered' | 'variant'>>;
+export default TabLabel;