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

package/components/TimePickerModal/TimePickerModal.tsx

@@ -103,8 +103,12 @@ export function TimePickerModal({
                             accessibilityLabel="toggle keyboard"
                         />
                         <View style={styles.fill} />
-                        <Button onPress={onClose}>{cancelLabel}</Button>
-                        <Button onPress={onConfirm}>{confirmLabel}</Button>
+                        <Button onPress={onClose}>
+                            <Button.Text>{cancelLabel}</Button.Text>
+                        </Button>
+                        <Button onPress={onConfirm}>
+                            <Button.Text>{confirmLabel}</Button.Text>
+                        </Button>
                     </View>
                 </KeyboardAvoidingView>
             </Modal>

package/components/TimePickerModal/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TimePickerModalDefault from './TimePickerModal';
 
-registerMoleculesComponents({
-    TimePickerModal: TimePickerModalDefault,
-});
-
 export const TimePickerModal = getRegisteredComponentWithFallback(
     'TimePickerModal',
     TimePickerModalDefault,

package/components/TimePickerModal/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const timepickerModalStylesDefault = StyleSheet.create(theme => ({
     keyboardView: {
@@ -41,8 +41,7 @@ const timepickerModalStylesDefault = StyleSheet.create(theme => ({
     fill: { flex: 1 },
 }));
 
-registerComponentsStyles({
-    TimePickerModal: timepickerModalStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TimePickerModal');
+export const styles = getRegisteredComponentStylesWithFallback(
+    'TimePickerModal',
+    timepickerModalStylesDefault,
+);

package/components/Tooltip/TooltipTrigger.tsx

@@ -30,27 +30,36 @@ const TooltipTrigger = memo(({ children }: { children: ReactElement }) => {
         () => triggerRef?.current,
     );
 
-    const onPress = useCallback(() => {
-        // @ts-ignore
-        children?.props?.onPress?.();
-    }, [children?.props]);
+    const onPress = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
+            children?.props?.onPress?.(e);
+        },
+        [children?.props],
+    );
 
-    const onLongPress = useCallback(() => {
-        // @ts-ignore
-        children?.props?.onLongPress?.();
+    const onLongPress = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
+            children?.props?.onLongPress?.(e);
 
-        if (isWeb) return;
-        onOpen();
-    }, [children?.props, isWeb, onOpen]);
+            if (isWeb) return;
+            onOpen();
+        },
+        [children?.props, isWeb, onOpen],
+    );
 
-    const onPressOut = useCallback(() => {
-        // @ts-ignore
+    const onPressOut = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
 
-        children?.props?.onPressOut?.();
+            children?.props?.onPressOut?.(e);
 
-        if (isWeb) return;
-        onClose();
-    }, [children?.props, isWeb, onClose]);
+            if (isWeb) return;
+            onClose();
+        },
+        [children?.props, isWeb, onClose],
+    );
 
     const onHoverIn = useCallback(() => {
         // @ts-ignore

package/components/Tooltip/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TooltipComponent from './Tooltip';
 import TooltipContent from './TooltipContent';
 import TooltipTrigger from './TooltipTrigger';
@@ -8,10 +8,6 @@ export const TooltipDefault = Object.assign(TooltipComponent, {
     Content: TooltipContent,
 });
 
-registerMoleculesComponents({
-    Tooltip: TooltipDefault,
-});
-
 export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
 
 export type { Props as TooltipProps } from './Tooltip';

package/components/Tooltip/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const tooltipStylesDefault = StyleSheet.create(theme => ({
     content: {
@@ -14,8 +14,7 @@ const tooltipStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Tooltip: tooltipStylesDefault,
-});
-
-export const tooltipStyles = getRegisteredMoleculesComponentStyles('Tooltip');
+export const tooltipStyles = getRegisteredComponentStylesWithFallback(
+    'Tooltip',
+    tooltipStylesDefault,
+);

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>
     );
 };

package/components/TouchableRipple/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TouchableRippleDefault from './TouchableRipple';
 
-registerMoleculesComponents({
-    TouchableRipple: TouchableRippleDefault,
-});
-
 export const TouchableRipple = getRegisteredComponentWithFallback(
     'TouchableRipple',
     TouchableRippleDefault,

package/components/TouchableRipple/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -8,8 +8,7 @@ const touchableRippleStylesDefault = StyleSheet.create(theme => ({
     } as any,
 }));
 
-registerComponentsStyles({
-    TouchableRipple: touchableRippleStylesDefault,
-});
-
-export const touchableRippleStyles = getRegisteredMoleculesComponentStyles('TouchableRipple');
+export const touchableRippleStyles = getRegisteredComponentStylesWithFallback(
+    'TouchableRipple',
+    touchableRippleStylesDefault,
+);

package/components/VerticalDivider/VerticalDivider.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
-import { type StyleProp, View, type ViewProps, type ViewStyle } from 'react-native';
+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 = Omit<ViewProps, 'children'> & {
     /**
@@ -21,7 +21,6 @@ export type Props = Omit<ViewProps, 'children'> & {
      *  Horizontal spacing of the Divider
      */
     spacing?: number;
-    style?: StyleProp<ViewStyle>;
 };
 
 /**
@@ -70,9 +69,9 @@ const VerticalDivider = ({
             style={[
                 verticalDividerStyles.root,
                 style,
-                topInset && { marginTop: topInset },
-                bottomInset && { marginBottom: bottomInset },
-                spacing && { marginHorizontal: spacing },
+                topInset ? { marginTop: topInset } : undefined,
+                bottomInset ? { marginBottom: bottomInset } : undefined,
+                spacing ? { marginHorizontal: spacing } : undefined,
             ]}
         />
     );
@@ -93,7 +92,9 @@ export const verticalDividerStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentStyles('VerticalDivider', verticalDividerStylesDefault);
-export const verticalDividerStyles = getRegisteredMoleculesComponentStyles('HorizontalDivider');
+export const verticalDividerStyles = getRegisteredComponentStylesWithFallback(
+    'VerticalDivider',
+    verticalDividerStylesDefault,
+);
 
 export default memo(VerticalDivider);

package/components/VerticalDivider/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import VerticalDividerDefault from './VerticalDivider';
 
-registerMoleculesComponents({
-    VerticalDivider: VerticalDividerDefault,
-});
-
 export const VerticalDivider = getRegisteredComponentWithFallback(
     'VerticalDivider',
     VerticalDividerDefault,