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

package/components/TimePicker/AmPmSwitcher.tsx

@@ -71,7 +71,7 @@ function SwitchButton({
     disabled: boolean;
 }) {
     timePickerAmPmSwitcherStyles.useVariants({
-        // TODO - fix ts issues
+        // @ts-ignore // TODO - fix this
         state: resolveStateVariant({
             selected,
         }),

package/components/TimePicker/index.tsx

@@ -1,10 +1,6 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import TimePickerDefault from './TimePicker';
 
-registerMoleculesComponents({
-    TimePicker: TimePickerDefault,
-});
-
 export const TimePicker = getRegisteredComponentWithFallback('TimePicker', TimePickerDefault);
 
 export type { Props as TimePickerProps } from './TimePicker';

package/components/TimePicker/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { circleSize } from './timeUtils';
 
 const timePickerStylesDefault = StyleSheet.create(theme => ({
@@ -263,23 +263,31 @@ const timePickerAmPmSwitcherStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    TimePicker: timePickerStylesDefault,
-    TimePicker_Inputs: timePickerInputsStylesDefault,
-    TimePicker_Input: timePickerInputStylesDefault,
-    TimePicker_Clock: timePickerClockStylesDefault,
-    TimePicker_ClockHours: timePickerClockHoursStylesDefault,
-    TimePicker_ClockMinutes: timePickerClockMinutesStylesDefault,
-    TimePicker_AmPmSwitcher: timePickerAmPmSwitcherStylesDefault,
-});
-
-export const timePickerStyles = getRegisteredMoleculesComponentStyles('TimePicker');
-export const timePickerInputsStyles = getRegisteredMoleculesComponentStyles('TimePicker_Inputs');
-export const timePickerInputStyles = getRegisteredMoleculesComponentStyles('TimePicker_Input');
-export const timePickerClockStyles = getRegisteredMoleculesComponentStyles('TimePicker_Clock');
-export const timePickerClockHoursStyles =
-    getRegisteredMoleculesComponentStyles('TimePicker_ClockHours');
-export const timePickerClockMinutesStyles =
-    getRegisteredMoleculesComponentStyles('TimePicker_ClockMinutes');
-export const timePickerAmPmSwitcherStyles =
-    getRegisteredMoleculesComponentStyles('TimePicker_AmPmSwitcher');
+export const timePickerStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker',
+    timePickerStylesDefault,
+);
+export const timePickerInputsStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_Inputs',
+    timePickerInputsStylesDefault,
+);
+export const timePickerInputStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_Input',
+    timePickerInputStylesDefault,
+);
+export const timePickerClockStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_Clock',
+    timePickerClockStylesDefault,
+);
+export const timePickerClockHoursStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_ClockHours',
+    timePickerClockHoursStylesDefault,
+);
+export const timePickerClockMinutesStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_ClockMinutes',
+    timePickerClockMinutesStylesDefault,
+);
+export const timePickerAmPmSwitcherStyles = getRegisteredComponentStylesWithFallback(
+    'TimePicker_AmPmSwitcher',
+    timePickerAmPmSwitcherStylesDefault,
+);

package/components/TimePickerField/TimePickerField.tsx

@@ -26,10 +26,11 @@ const TimePickerField = (
         withModal = true,
         style,
         onBlur: onBlurProp,
-        modalProps = {},
-        iconButtonProps = {},
+        modalProps,
+        iconButtonProps,
         disabled,
         onFocus: onFocusProp,
+        children,
         ...rest
     }: Props,
     ref: any,
@@ -143,9 +144,10 @@ const TimePickerField = (
             onFocus={onFocus}
             onChangeText={onChangeText}
             style={componentStyles}
-            onBlur={onBlur}
-            right={rightElement}
-        />
+            onBlur={onBlur}>
+            <TextInput.Right>{rightElement}</TextInput.Right>
+            {children}
+        </TextInput>
     );
 };
 

package/components/TimePickerField/index.tsx

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

package/components/TimePickerField/utils.ts

@@ -5,17 +5,16 @@ export declare type MaskItem = string | RegExp | [RegExp];
 export declare type MaskArray = Array<MaskItem>;
 export declare type Mask = MaskArray | ((value?: string) => MaskArray);
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const timepickerFieldStylesDefault = StyleSheet.create({
     root: {},
 });
 
-registerComponentsStyles({
-    TimePickerField: timepickerFieldStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TimePickerField');
+export const styles = getRegisteredComponentStylesWithFallback(
+    'TimePickerField',
+    timepickerFieldStylesDefault,
+);
 
 export const timeMask24Hour: Mask = (text: string = '') => {
     const cleanTime = text.replace(/\D+/g, '');

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,17 +56,22 @@ const TouchableRipple = (
         rippleColor: rippleColorProp,
         underlayColor: underlayColorProp,
         children,
+        asChild = false,
         ...rest
     }: Props,
     ref: any,
 ) => {
-    const disabled = disabledProp || !rest.onPress;
+    const disabled = disabledProp;
 
     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));