react-native-molecules 0.5.0-beta.4 → 0.5.0-beta.6

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.tsx

@@ -70,6 +70,7 @@ const Switch = (
         ref,
         actionsToListen: ['focus', 'hover', 'press'],
     });
+    const isFirstRender = useRef(true);
 
     const [value, onChange] = useControlledValue({
         value: valueProp,
@@ -98,8 +99,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 +131,11 @@ const Switch = (
     });
 
     useEffect(() => {
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            return;
+        }
+
         Animated.timing(toggleMarginAnimation, {
             toValue: value ? 1 : 0,
             duration: 300,

package/components/TextInput/TextInput.tsx

@@ -194,8 +194,8 @@ const DefaultComponent = (props: RenderProps) => <NativeTextInput {...props} />;
 const TextInput = forwardRef<TextInputHandles, Props>(
     (
         {
-            variant = 'flat',
-            size = 'md',
+            variant = 'outlined',
+            size = 'sm',
             disabled = false,
             error: errorProp = false,
             multiline = false,

package/components/TouchableRipple/TouchableRipple.native.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo, useMemo } from 'react';
+import { type ComponentProps, forwardRef, memo, type ReactNode, useMemo } from 'react';
 import {
     type BackgroundPropType,
     Platform,
@@ -7,25 +7,44 @@ import {
     StyleSheet,
     TouchableNativeFeedback,
     TouchableWithoutFeedback,
-    View,
     type ViewStyle,
 } from 'react-native';
-import { withUnistyles } from 'react-native-unistyles';
 
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
+import { Slot } from '../Slot';
 import { touchableRippleStyles } from './utils';
 
 const ANDROID_VERSION_LOLLIPOP = 21;
 const ANDROID_VERSION_PIE = 28;
 
-type Props = React.ComponentProps<typeof TouchableWithoutFeedback> & {
+type Props = ComponentProps<typeof TouchableWithoutFeedback> & {
     borderless?: boolean;
     background?: BackgroundPropType;
     disabled?: boolean;
     onPress?: () => void | null;
     rippleColor?: string;
     underlayColor?: string;
-    children: React.ReactNode;
+    children: ReactNode;
     style?: StyleProp<ViewStyle>;
+    /**
+     * When `true`, the component will not render a wrapper element. Instead, it will
+     * merge its props (styles, event handlers, ref) onto its immediate child element.
+     * This follows the Radix UI "Slot" pattern for flexible component composition.
+     *
+     * @note On Android, the native ripple effect will NOT work when `asChild` is `true`
+     * because `TouchableNativeFeedback` requires a View wrapper. Only press events will work.
+     *
+     * @example
+     * ```tsx
+     * <TouchableRipple asChild onPress={handlePress}>
+     *   <View><Text>Custom pressable</Text></View>
+     * </TouchableRipple>
+     * ```
+     *
+     * @note When `asChild` is `true`, only a single child element is allowed.
+     * @default false
+     */
+    asChild?: boolean;
 };
 
 const TouchableRipple = (
@@ -37,6 +56,7 @@ const TouchableRipple = (
         rippleColor: rippleColorProp,
         underlayColor: underlayColorProp,
         children,
+        asChild = false,
         ...rest
     }: Props,
     ref: any,
@@ -46,8 +66,12 @@ const TouchableRipple = (
     const componentStyles = touchableRippleStyles;
 
     const { rippleColor, underlayColor, containerStyle } = useMemo(() => {
+        const { rippleColor: _rippleColor } = extractPropertiesFromStyles(
+            [componentStyles.root, style],
+            ['rippleColor'],
+        );
         return {
-            rippleColor: rippleColorProp,
+            rippleColor: rippleColorProp || _rippleColor,
             underlayColor: underlayColorProp || rippleColorProp,
             containerStyle: [borderless && styles.borderless, componentStyles.root, style],
         };
@@ -58,6 +82,21 @@ const TouchableRipple = (
     const useForeground =
         Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_PIE && borderless;
 
+    if (asChild) {
+        // When asChild is true, use Slot to merge props with the child
+        // Note: TouchableNativeFeedback ripple won't work with asChild since it requires a View wrapper
+        return (
+            <Slot
+                {...rest}
+                style={containerStyle}
+                ref={ref}
+                onPress={rest.onPress}
+                disabled={disabled}>
+                {children}
+            </Slot>
+        );
+    }
+
     if (TouchableRipple.supported) {
         return (
             <TouchableNativeFeedback
@@ -65,12 +104,13 @@ const TouchableRipple = (
                 ref={ref}
                 disabled={disabled}
                 useForeground={useForeground}
+                style={containerStyle}
                 background={
                     background != null
                         ? background
                         : TouchableNativeFeedback.Ripple(rippleColor!, borderless)
                 }>
-                <View style={containerStyle}>{React.Children.only(children)}</View>
+                <>{children}</>
             </TouchableNativeFeedback>
         );
     }
@@ -84,7 +124,7 @@ const TouchableRipple = (
                 containerStyle,
                 pressed && { backgroundColor: underlayColor },
             ]}>
-            {React.Children.only(children)}
+            {children}
         </Pressable>
     );
 };
@@ -98,8 +138,4 @@ const styles = StyleSheet.create({
 TouchableRipple.supported =
     Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
 
-export default memo(
-    withUnistyles(forwardRef(TouchableRipple), theme => ({
-        rippleColor: theme.colors.onSurfaceRipple,
-    })),
-);
+export default memo(forwardRef(TouchableRipple));

package/components/TouchableRipple/TouchableRipple.tsx

@@ -1,4 +1,4 @@
-import { Children, forwardRef, memo, type ReactNode, useCallback, useMemo } from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useMemo, useRef } from 'react';
 import {
     type GestureResponderEvent,
     Pressable,
@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
+import { Slot } from '../Slot';
 import { touchableRippleStyles } from './utils';
 
 export type Props = PressableProps & {
@@ -50,6 +51,28 @@ export type Props = PressableProps & {
      */
     children: ReactNode;
     style?: StyleProp<ViewStyle>;
+    /**
+     * When `true`, the component will not render a wrapper element. Instead, it will
+     * merge its props (styles, event handlers, ref) onto its immediate child element.
+     * This follows the Radix UI "Slot" pattern for flexible component composition.
+     *
+     * @example
+     * ```tsx
+     * // Without asChild - renders a Pressable wrapper
+     * <TouchableRipple onPress={handlePress}>
+     *   <View><Text>Click me</Text></View>
+     * </TouchableRipple>
+     *
+     * // With asChild - merges props onto the child
+     * <TouchableRipple asChild onPress={handlePress}>
+     *   <Link href="/page"><Text>Navigate</Text></Link>
+     * </TouchableRipple>
+     * ```
+     *
+     * @note When `asChild` is `true`, only a single child element is allowed.
+     * @default false
+     */
+    asChild?: boolean;
 };
 
 /**
@@ -96,6 +119,7 @@ const TouchableRipple = (
         onPressIn: onPressInProp,
         onPressOut: onPressOutProp,
         centered,
+        asChild = false,
         ...rest
     }: Props,
     ref: any,
@@ -121,29 +145,52 @@ const TouchableRipple = (
         };
     }, [borderless, componentStyles.root, rippleColorProp, style]);
 
-    const handlePressIn = useCallback(
+    // Track whether pointer is currently down for handling pointer leave
+    const isPointerDownRef = useRef(false);
+    // Store current target element to clean up ripples on pointer up/leave
+    const currentTargetRef = useRef<HTMLElement | null>(null);
+
+    // Using 'any' for event types to support both React DOM PointerEvent and React Native events
+    // This is a web-only file, so we primarily handle DOM pointer events
+    const handlePointerDown = useCallback(
         (e: any) => {
-            onPressInProp?.(e);
+            onPressInProp?.(e as GestureResponderEvent);
 
             if (disabled) return;
 
-            const button = e.currentTarget;
+            isPointerDownRef.current = true;
+
+            const button = e.currentTarget as HTMLElement;
+            currentTargetRef.current = button;
             const computedStyle = window.getComputedStyle(button);
             const dimensions = button.getBoundingClientRect();
 
-            let touchX;
-            let touchY;
-
-            const { changedTouches, touches } = e.nativeEvent;
-            const touch = touches?.[0] ?? changedTouches?.[0];
+            let touchX: number;
+            let touchY: number;
 
-            // If centered or it was pressed using keyboard - enter or space
-            if (centered || !touch) {
+            if (centered) {
+                // If centered, always position ripple at center
                 touchX = dimensions.width / 2;
                 touchY = dimensions.height / 2;
+            } else if ('clientX' in e && 'clientY' in e) {
+                // Web pointer event - calculate position relative to element
+                touchX = e.clientX - dimensions.left;
+                touchY = e.clientY - dimensions.top;
+            } else if (e.nativeEvent) {
+                // React Native gesture event
+                const { changedTouches, touches } = e.nativeEvent;
+                const touch = touches?.[0] ?? changedTouches?.[0];
+                if (touch) {
+                    touchX = touch.locationX ?? dimensions.width / 2;
+                    touchY = touch.locationY ?? dimensions.height / 2;
+                } else {
+                    touchX = dimensions.width / 2;
+                    touchY = dimensions.height / 2;
+                }
             } else {
-                touchX = touch.locationX ?? e.pageX;
-                touchY = touch.locationY ?? e.pageY;
+                // Fallback to center (keyboard activation)
+                touchX = dimensions.width / 2;
+                touchY = dimensions.height / 2;
             }
 
             // Get the size of the button to determine how big the ripple should be
@@ -156,7 +203,7 @@ const TouchableRipple = (
             // Create a container for our ripple effect so we don't need to change the parent's style
             const container = document.createElement('span');
 
-            container.setAttribute('data-paper-ripple', '');
+            container.setAttribute('data-molecules-ripple', '');
 
             Object.assign(container.style, {
                 position: 'absolute',
@@ -217,42 +264,86 @@ const TouchableRipple = (
         [onPressInProp, disabled, centered, rippleColor],
     );
 
-    const handlePressOut = useCallback(
-        (e: any) => {
-            onPressOutProp?.(e);
-
-            if (disabled) return;
-
-            const containers = e.currentTarget.querySelectorAll(
-                '[data-paper-ripple]',
-            ) as HTMLElement[];
+    const fadeOutRipples = useCallback((target: HTMLElement) => {
+        const containers = target.querySelectorAll(
+            '[data-molecules-ripple]',
+        ) as NodeListOf<HTMLElement>;
 
+        requestAnimationFrame(() => {
             requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    containers.forEach(container => {
-                        const ripple = container.firstChild as HTMLSpanElement;
-
-                        Object.assign(ripple.style, {
-                            transitionDuration: '250ms',
-                            opacity: 0,
-                        });
-
-                        // Finally remove the span after the transition
-                        setTimeout(() => {
-                            const { parentNode } = container;
-
-                            if (parentNode) {
-                                parentNode.removeChild(container);
-                            }
-                        }, 500);
+                containers.forEach(container => {
+                    const ripple = container.firstChild as HTMLSpanElement;
+
+                    Object.assign(ripple.style, {
+                        transitionDuration: '250ms',
+                        opacity: 0,
                     });
+
+                    // Finally remove the span after the transition
+                    setTimeout(() => {
+                        const { parentNode } = container;
+
+                        if (parentNode) {
+                            parentNode.removeChild(container);
+                        }
+                    }, 500);
                 });
             });
+        });
+    }, []);
+
+    const handlePointerUp = useCallback(
+        (e: any) => {
+            onPressOutProp?.(e as GestureResponderEvent);
+
+            if (disabled || !isPointerDownRef.current) return;
+
+            isPointerDownRef.current = false;
+            currentTargetRef.current = null;
+
+            const target = e.currentTarget as HTMLElement;
+            fadeOutRipples(target);
         },
-        [onPressOutProp, disabled],
+        [onPressOutProp, disabled, fadeOutRipples],
     );
 
-    const Component = onPress ? Pressable : View;
+    const handlePointerLeave = useCallback(
+        (e: any) => {
+            // Only fade out if pointer was down (dragging out of element)
+            if (disabled || !isPointerDownRef.current) return;
+
+            isPointerDownRef.current = false;
+            currentTargetRef.current = null;
+
+            const target = e.currentTarget as HTMLElement;
+            fadeOutRipples(target);
+        },
+        [disabled, fadeOutRipples],
+    );
+
+    const handlePointerCancel = useCallback(
+        (e: any) => {
+            if (disabled || !isPointerDownRef.current) return;
+
+            isPointerDownRef.current = false;
+            currentTargetRef.current = null;
+
+            const target = e.currentTarget as HTMLElement;
+            fadeOutRipples(target);
+        },
+        [disabled, fadeOutRipples],
+    );
+
+    const Component = asChild ? Slot : onPress ? Pressable : View;
+
+    // Use pointer events for universal compatibility (works on any HTML element)
+    // These events work with mouse, touch, and stylus inputs
+    const pointerEventProps = {
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerLeave,
+        onPointerCancel: handlePointerCancel,
+    };
 
     return (
         <Component
@@ -261,10 +352,9 @@ const TouchableRipple = (
             style={containerStyle}
             ref={ref}
             onPress={onPress}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            disabled={disabled}>
-            {Children.only(children)}
+            disabled={disabled}
+            {...pointerEventProps}>
+            {children}
         </Component>
     );
 };