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

package/components/TimePicker/utils.ts

@@ -41,6 +41,9 @@ const timePickerStylesDefault = StyleSheet.create(theme => ({
 
 const timePickerInputsStylesDefault = StyleSheet.create(theme => ({
     spaceBetweenInputsAndSwitcher: { width: 12 },
+    wrapper: {
+        alignItems: 'center',
+    },
     inputContainer: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -70,13 +73,30 @@ const timePickerInputsStylesDefault = StyleSheet.create(theme => ({
     betweenDot: {
         height: 12,
     },
+    supportingRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        width: '100%',
+        marginTop: 2,
+    },
+    supportingSlot: {
+        width: 96,
+        minHeight: theme.typescale.bodyMedium.lineHeight * 2,
+    },
+    supportingText: {
+        ...theme.typescale.bodyMedium,
+        fontSize: 12,
+        lineHeight: 16,
+        color: theme.colors.onSurfaceVariant,
+        textAlign: 'left',
+        paddingHorizontal: theme.spacings['1'],
+    },
+    supportingTextError: {
+        color: theme.colors.error,
+    },
 }));
 
 const timePickerInputStylesDefault = StyleSheet.create(theme => ({
-    root: {
-        rippleColor: theme.colors.onPrimaryContainer,
-    } as any,
-
     container: {
         position: 'relative',
     },
@@ -91,6 +111,10 @@ const timePickerInputStylesDefault = StyleSheet.create(theme => ({
         color: theme.colors.onSurface,
         borderRadius: theme.shapes.corner.small,
 
+        _web: {
+            outline: 'none',
+        },
+
         variants: {
             state: {
                 highlighted: {
@@ -100,6 +124,20 @@ const timePickerInputStylesDefault = StyleSheet.create(theme => ({
             },
         },
     },
+    keyboardInput: {
+        borderWidth: 2,
+        borderColor: 'transparent',
+    },
+    keyboardInputHighlighted: {
+        borderColor: theme.colors.primary,
+    },
+    inputError: {
+        backgroundColor: theme.colors.errorContainer,
+        color: theme.colors.onErrorContainer,
+    },
+    keyboardInputError: {
+        borderColor: theme.colors.error,
+    },
     button: {
         overflow: 'hidden',
         borderRadius: theme.shapes.corner.small,
@@ -218,6 +256,53 @@ const timePickerClockMinutesStylesDefault = StyleSheet.create(theme => ({
     textWhite: { color: '#fff' },
 }));
 
+const timePickerModalStylesDefault = StyleSheet.create(theme => ({
+    keyboardView: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        flex: 1,
+    },
+    modalContent: {
+        minWidth: 287,
+        width: undefined,
+        maxWidth: undefined,
+        flex: undefined,
+        borderRadius: theme.shapes.corner.extraLarge,
+        overflow: 'hidden',
+    },
+    frame: {
+        backgroundColor: theme.colors.surface,
+    },
+    labelContainer: {
+        minHeight: 56,
+        justifyContent: 'flex-end',
+        paddingLeft: theme.spacings['6'],
+        paddingRight: theme.spacings['6'],
+        paddingTop: theme.spacings['6'],
+        paddingBottom: theme.spacings['2'],
+        alignSelf: 'flex-start',
+    },
+    label: {
+        letterSpacing: 1,
+        fontSize: theme.typescale.labelLarge.fontSize,
+        color: theme.colors.onSurface,
+        fontWeight: theme.typescale.labelLarge.fontWeight,
+    },
+    timePickerContainer: {
+        padding: theme.spacings['6'],
+        paddingTop: theme.spacings['2'],
+        paddingBottom: 0,
+    },
+    footer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: theme.spacings['2'],
+        width: '100%',
+    },
+    inputTypeToggle: { margin: theme.spacings['1'] },
+    fill: { flex: 1 },
+}));
+
 const timePickerAmPmSwitcherStylesDefault = StyleSheet.create(theme => ({
     container: {
         width: 50,
@@ -291,3 +376,7 @@ export const timePickerAmPmSwitcherStyles = getRegisteredComponentStylesWithFall
     'TimePicker_AmPmSwitcher',
     timePickerAmPmSwitcherStylesDefault,
 );
+export const timePickerModalStyles = getRegisteredComponentStylesWithFallback(
+    'TimePickerModal',
+    timePickerModalStylesDefault,
+);

package/components/Tooltip/Tooltip.tsx

@@ -1,42 +1,64 @@
+import { useToggle } from '@react-native-molecules/utils/hooks';
 import {
     createContext,
     memo,
     type ReactElement,
+    type RefObject,
     useCallback,
     useEffect,
     useMemo,
     useRef,
 } from 'react';
-import { Text, type ViewProps, type ViewStyle } from 'react-native';
 
-import { useSubcomponents, useToggle } from '../../hooks';
-import { Popover, type PopoverProps } from '../Popover';
-import { tooltipStyles } from './utils';
+import { extractSubcomponents } from '../../utils/extractSubcomponents';
 
-export type Props = Omit<PopoverProps, 'isOpen' | 'triggerRef'> & {
+export type Props = {
     fadeInDelay?: number;
     fadeOutDelay?: number;
-    showArrow?: boolean;
-    style?: ViewStyle;
-    children: ReactElement | ReactElement[];
     hoverableContent?: boolean;
+    children: ReactElement | ReactElement[];
+};
+
+export type TooltipContextValue = {
+    isOpen: boolean;
+    triggerRef: RefObject<any>;
+    onOpen: () => void;
+    onClose: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
 
+export const TooltipContext = createContext<TooltipContextValue>({
+    isOpen: false,
+    onOpen: () => {},
+    onClose: () => {},
+    triggerRef: { current: null },
+});
+
 const Tooltip = ({
-    style,
     children,
     fadeInDelay = 100,
     fadeOutDelay = 300,
-    showArrow = false,
     hoverableContent = false,
-    ...rest
 }: Props) => {
     const { state: isOpen, setState: setIsOpen } = useToggle(false);
     const triggerRef = useRef(null);
     const timeOutRef = useRef<NodeJS.Timeout>(undefined);
-    const popoverTimeoutRef = useRef<NodeJS.Timeout>(undefined);
     const preventCloseRef = useRef(false);
 
+    const {
+        Tooltip_Trigger,
+        Tooltip_Content,
+        rest: restChildren,
+    } = extractSubcomponents({
+        children,
+        allowedChildren: [
+            { name: 'Tooltip_Trigger', allowMultiple: false },
+            { name: 'Tooltip_Content', allowMultiple: false },
+        ],
+        includeRest: true,
+    });
+
     const onClose = useCallback(() => {
         if (preventCloseRef.current) return;
         clearTimeout(timeOutRef.current);
@@ -48,34 +70,13 @@ const Tooltip = ({
         timeOutRef.current = setTimeout(() => setIsOpen(true), fadeInDelay);
     }, [fadeInDelay, setIsOpen]);
 
-    // const setPopoverOpen = useCallback(
-    //     (_isOpen: boolean) => {
-    //         clearTimeout(popoverTimeoutRef.current);
-    //         popoverTimeoutRef.current = setTimeout(
-    //             () => setIsOpen(_isOpen),
-    //             isOpen ? fadeInDelay : fadeOutDelay,
-    //         );
-    //     },
-    //     [fadeInDelay, fadeOutDelay, isOpen, setIsOpen],
-    // );
-
-    const { Tooltip_Trigger, Tooltip_Content } = useSubcomponents({
-        children,
-        allowedChildren: ['Tooltip_Trigger', 'Tooltip_Content'],
-    });
-
-    const contextValue = useMemo(
+    const contextValue = useMemo<TooltipContextValue>(
         () => ({
+            isOpen,
             triggerRef,
             onOpen,
             onClose,
-        }),
-        [onClose, onOpen],
-    );
-
-    const { popoverContentProps, popoverStyle } = useMemo(
-        () => ({
-            popoverContentProps: (hoverableContent
+            ...(hoverableContent
                 ? {
                       onMouseEnter: () => {
                           preventCloseRef.current = true;
@@ -88,50 +89,24 @@ const Tooltip = ({
                           setIsOpen(false);
                       },
                   }
-                : {}) as ViewProps,
-            popoverStyle: [tooltipStyles.content, style],
+                : {}),
         }),
-        [hoverableContent, setIsOpen, style],
+        [hoverableContent, isOpen, onClose, onOpen, setIsOpen],
     );
 
     useEffect(() => {
-        const popoverTimeout = popoverTimeoutRef;
-
         return () => {
             clearTimeout(timeOutRef.current);
-            clearTimeout(popoverTimeout.current);
         };
     }, []);
 
     return (
         <TooltipContext.Provider value={contextValue}>
-            {Tooltip_Trigger[0]}
-            {isOpen && (
-                <Popover
-                    isOpen={isOpen}
-                    inverted
-                    // placement={placement}
-                    showArrow={showArrow}
-                    // backdropStyles={styles.backdrop}
-                    triggerRef={triggerRef}
-                    // setIsOpen={setPopoverOpen}
-                    {...popoverContentProps}
-                    {...rest}
-                    style={popoverStyle}
-                    // contentTextStyles={contentTextStyles}
-                    // popoverContentProps={popoverContentProps}
-                    onClose={onClose}>
-                    <Text style={tooltipStyles.contentText}>{Tooltip_Content[0]}</Text>
-                </Popover>
-            )}
+            {Tooltip_Trigger}
+            {Tooltip_Content}
+            {restChildren}
         </TooltipContext.Provider>
     );
 };
 
-export const TooltipContext = createContext({
-    onOpen: () => {},
-    onClose: () => {},
-    triggerRef: null as any,
-});
-
 export default memo(Tooltip);

package/components/Tooltip/TooltipContent.tsx

@@ -1,11 +1,38 @@
-import { memo, type ReactElement, type ReactNode } from 'react';
+import { memo, type ReactNode, useContext, useMemo } from 'react';
+import { type StyleProp, Text, type ViewStyle } from 'react-native';
 
-export type Props = {
-    children: ReactElement | ReactNode;
+import { Popover, type PopoverProps } from '../Popover';
+import { TooltipContext } from './Tooltip';
+import { tooltipStyles } from './utils';
+
+export type Props = Omit<PopoverProps, 'isOpen' | 'triggerRef' | 'onClose' | 'children'> & {
+    children?: ReactNode;
 };
 
-const TooltipContent = memo(({ children }: Props) => {
-    return <>{children}</>;
+const TooltipContent = memo(({ children, style, ...rest }: Props) => {
+    const { isOpen, triggerRef, onClose, onMouseEnter, onMouseLeave } = useContext(TooltipContext);
+
+    const popoverStyle = useMemo<StyleProp<ViewStyle>>(
+        () => [tooltipStyles.content, style],
+        [style],
+    );
+
+    if (!isOpen) return null;
+
+    return (
+        <Popover
+            isOpen={isOpen}
+            inverted
+            triggerRef={triggerRef}
+            onClose={onClose}
+            {...rest}
+            style={popoverStyle}
+            // @ts-ignore — onMouseEnter/onMouseLeave spread onto the inner View via ...rest in Popover
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}>
+            <Text style={tooltipStyles.contentText}>{children}</Text>
+        </Popover>
+    );
 });
 
 TooltipContent.displayName = 'Tooltip_Content';

package/components/Tooltip/TooltipTrigger.tsx

@@ -30,27 +30,28 @@ const TooltipTrigger = memo(({ children }: { children: ReactElement }) => {
         () => triggerRef?.current,
     );
 
-    const onPress = useCallback(() => {
-        // @ts-ignore
-        children?.props?.onPress?.();
-    }, [children?.props]);
-
-    const onLongPress = useCallback(() => {
-        // @ts-ignore
-        children?.props?.onLongPress?.();
-
-        if (isWeb) return;
-        onOpen();
-    }, [children?.props, isWeb, onOpen]);
+    const onLongPress = useCallback(
+        (e: unknown) => {
+            // @ts-ignore
+            children?.props?.onLongPress?.(e);
+
+            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
@@ -84,9 +85,8 @@ const TooltipTrigger = memo(({ children }: { children: ReactElement }) => {
                 ref: actionsRef,
                 onLongPress,
                 onPressOut,
-                onPress,
             }),
-        [children, onLongPress, onPress, onPressOut, actionsRef],
+        [children, onLongPress, onPressOut, actionsRef],
     );
 });
 

package/components/Tooltip/index.tsx

@@ -10,7 +10,7 @@ export const TooltipDefault = Object.assign(TooltipComponent, {
 
 export const Tooltip = getRegisteredComponentWithFallback('Tooltip', TooltipDefault);
 
-export type { Props as TooltipProps } from './Tooltip';
+export type { TooltipContextValue, Props as TooltipProps } from './Tooltip';
 export type { Props as TooltipContentProps } from './TooltipContent';
 export type { Props as TooltipTriggerProps } from './TooltipTrigger';
 export { tooltipStyles } from './utils';

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,47 @@ import {
     StyleSheet,
     TouchableNativeFeedback,
     TouchableWithoutFeedback,
-    View,
     type ViewStyle,
 } from 'react-native';
-import { withUnistyles } from 'react-native-unistyles';
 
+import { useTheme } from '../../hooks/useTheme';
+import { extractPropertiesFromStyles } from '../../utils/extractPropertiesFromStyles';
+import { Slot } from '../Slot';
+import { rippleColorFromBackground } from './rippleFromForegroundColor';
 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;
+    rippleAlpha?: number;
+    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 = (
@@ -36,28 +58,76 @@ const TouchableRipple = (
         disabled: disabledProp,
         rippleColor: rippleColorProp,
         underlayColor: underlayColorProp,
+        rippleAlpha = 0.24,
         children,
+        asChild = false,
         ...rest
     }: Props,
     ref: any,
 ) => {
-    const disabled = disabledProp || !rest.onPress;
+    const disabled = disabledProp;
+    const theme = useTheme();
 
     const componentStyles = touchableRippleStyles;
 
     const { rippleColor, underlayColor, containerStyle } = useMemo(() => {
+        const { rippleColor: themeRippleColor, backgroundColor } = extractPropertiesFromStyles(
+            [componentStyles.root, style],
+            ['rippleColor', 'backgroundColor'],
+        );
+        const tokenResolvedColor =
+            typeof rippleColorProp === 'string'
+                ? theme.colors[rippleColorProp as keyof typeof theme.colors]
+                : undefined;
+        const rippleColorResolvedProp =
+            typeof tokenResolvedColor === 'string' ? tokenResolvedColor : rippleColorProp;
+
+        const fallback =
+            typeof themeRippleColor === 'string' && themeRippleColor.length > 0
+                ? themeRippleColor
+                : 'rgba(0, 0, 0, 0.32)';
+
+        const resolvedRipple =
+            rippleColorResolvedProp ??
+            (backgroundColor != null && backgroundColor !== ''
+                ? rippleColorFromBackground(String(backgroundColor), fallback, rippleAlpha)
+                : fallback);
+
         return {
-            rippleColor: rippleColorProp,
-            underlayColor: underlayColorProp || rippleColorProp,
+            rippleColor: resolvedRipple,
+            underlayColor: underlayColorProp ?? resolvedRipple,
             containerStyle: [borderless && styles.borderless, componentStyles.root, style],
         };
-    }, [borderless, componentStyles.root, rippleColorProp, style, underlayColorProp]);
+    }, [
+        borderless,
+        componentStyles.root,
+        rippleColorProp,
+        style,
+        underlayColorProp,
+        rippleAlpha,
+        theme,
+    ]);
 
     // A workaround for ripple on Android P is to use useForeground + overflow: 'hidden'
     // https://github.com/facebook/react-native/issues/6480
     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 +135,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 +155,7 @@ const TouchableRipple = (
                 containerStyle,
                 pressed && { backgroundColor: underlayColor },
             ]}>
-            {React.Children.only(children)}
+            {children}
         </Pressable>
     );
 };
@@ -98,8 +169,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));