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

package/components/Surface/Surface.ios.tsx

@@ -3,8 +3,12 @@ import { Animated, type StyleProp, View, type ViewStyle } from 'react-native';
 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, extractProperties, getStyleForShadowLayer } from './utils';
+import { defaultStyles, getCombinedShadowStyle } from './utils';
+
+const AnimatedView = Animated.createAnimatedComponent(View);
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -26,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;
 };
 
 /**
@@ -70,52 +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 } = extractProperties(
-            [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: extractProperties(
+            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/index.tsx

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

package/components/Surface/utils.ts

@@ -1,7 +1,7 @@
 import type { Animated } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 import { inputRange } from '../../styles/shadow';
 
 const defaultStylesDefault = StyleSheet.create(theme => ({
@@ -10,35 +10,10 @@ const defaultStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Surface: defaultStylesDefault,
-});
-
-export const defaultStyles = getRegisteredMoleculesComponentStyles('Surface');
-
-// TODO - abstract this
-export function extractProperties(
-    _objectsArray: Record<string, any>,
-    propertiesToExtract: string[],
-) {
-    const extracted: Record<string, any> = {};
-
-    const objectsArray = _objectsArray.flat();
-
-    for (let i = objectsArray.length - 1; i >= 0; i--) {
-        const obj = objectsArray[i];
-
-        for (const prop of propertiesToExtract) {
-            if (!obj) continue;
-            if (prop in obj) {
-                // @ts-ignore
-                extracted[prop] = obj[prop];
-            }
-        }
-    }
-
-    return extracted;
-}
+export const defaultStyles = getRegisteredComponentStylesWithFallback(
+    'Surface',
+    defaultStylesDefault,
+);
 
 const _shadowColor = '#000';
 
@@ -97,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/Switch/index.tsx

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

package/components/Switch/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet, useUnistyles } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 type States =
     | 'selected'
@@ -276,8 +276,4 @@ const switchStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Switch: switchStylesDefault,
-});
-
-export const switchStyles = getRegisteredMoleculesComponentStyles('Switch');
+export const switchStyles = getRegisteredComponentStylesWithFallback('Switch', switchStylesDefault);

package/components/Tabs/Tabs.tsx

@@ -1,10 +1,10 @@
 import {
     Children,
     cloneElement,
-    FC,
+    type FC,
     isValidElement,
     memo,
-    ReactElement,
+    type ReactElement,
     useCallback,
     useEffect,
     useMemo,
@@ -13,20 +13,21 @@ import {
 } from 'react';
 import {
     Animated,
-    StyleProp,
-    ViewStyle,
-    ViewProps,
+    type LayoutChangeEvent,
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
     ScrollView as RNScrollView,
-    LayoutChangeEvent,
-    NativeSyntheticEvent,
-    NativeScrollEvent,
-    View,
     ScrollView,
+    type StyleProp,
+    View,
+    type ViewProps,
+    type ViewStyle,
 } from 'react-native';
-import type { TabItemProps } from './TabItem';
+
 import { useControlledValue } from '../../hooks';
 import { noop } from '../../utils/lodash';
 import { HorizontalDivider, type HorizontalDividerProps } from '../HorizontalDivider';
+import type { TabItemProps } from './TabItem';
 import { tabsStyles } from './utils';
 
 export type TabsProps = ViewProps & {
@@ -100,7 +101,7 @@ export const TabBase = ({
     const nameToIndexMap = useMemo(
         () =>
             validChildren.reduce((acc, child, currentIndex) => {
-                acc[(child as ReactElement).props?.name] = currentIndex;
+                acc[(child as ReactElement<TabItemProps>).props?.name] = currentIndex;
 
                 return acc;
             }, {} as Record<string, number>),
@@ -110,7 +111,7 @@ export const TabBase = ({
     const [value, onChange] = useControlledValue({
         value: valueProp,
         onChange: onChangeProp,
-        defaultValue: defaultValue || (validChildren[0] as ReactElement)?.props?.name,
+        defaultValue: defaultValue || (validChildren[0] as ReactElement<TabItemProps>)?.props?.name,
     });
 
     const valueIndex = nameToIndexMap[value];
@@ -311,7 +312,7 @@ export const TabBase = ({
                     style={itemsContainerStyle}>
                     {validChildren.map((child, index) => (
                         <ChildItem
-                            key={(child as ReactElement).props?.name}
+                            key={(child as ReactElement<TabItemProps>).props?.name}
                             testID={testID && `${testID}--tab-item`}
                             index={index}
                             value={value}

package/components/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import { getRegisteredComponentWithFallback, registerMoleculesComponents } from '../../core';
+import { getRegisteredComponentWithFallback } from '../../core';
 import type { TabItemProps } from './TabItem';
 import { default as TabItem } from './TabItem';
 import type { TabLabelProps } from './TabLabel';
@@ -11,10 +11,6 @@ export const TabsDefault = Object.assign(TabBase, {
     Label: TabLabel,
 });
 
-registerMoleculesComponents({
-    Tabs: TabsDefault,
-});
-
 export const Tabs = getRegisteredComponentWithFallback('Tabs', TabsDefault);
 
 export type { TabItemProps, TabLabelProps, TabsProps };

package/components/Tabs/utils.ts

@@ -1,6 +1,6 @@
 import { StyleSheet } from 'react-native-unistyles';
 
-import { getRegisteredMoleculesComponentStyles, registerComponentsStyles } from '../../core';
+import { getRegisteredComponentStylesWithFallback } from '../../core';
 
 const tabsStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -113,14 +113,14 @@ const tabsLabelStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    Tabs: tabsStylesDefault,
-    Tabs_Item: tabsItemStylesDefault,
-    Tabs_Label: tabsLabelStylesDefault,
-});
-
-export const tabsStyles = getRegisteredMoleculesComponentStyles('Tabs');
-export const tabsItemStyles = getRegisteredMoleculesComponentStyles('Tabs_Item');
-export const tabsLabelStyles = getRegisteredMoleculesComponentStyles('Tabs_Label');
+export const tabsStyles = getRegisteredComponentStylesWithFallback('Tabs', tabsStylesDefault);
+export const tabsItemStyles = getRegisteredComponentStylesWithFallback(
+    'Tabs_Item',
+    tabsItemStylesDefault,
+);
+export const tabsLabelStyles = getRegisteredComponentStylesWithFallback(
+    'Tabs_Label',
+    tabsLabelStylesDefault,
+);
 
 export type States = 'hovered' | 'active' | 'activeAndHovered' | 'disabled';

package/components/Text/Text.tsx

@@ -1,10 +1,8 @@
 import { StyleSheet } from 'react-native-unistyles';
 
 import {
+    getRegisteredComponentStylesWithFallback,
     getRegisteredComponentWithFallback,
-    getRegisteredMoleculesComponentStyles,
-    registerComponentStyles,
-    registerMoleculesComponent,
 } from '../../core';
 import { textFactory } from './textFactory';
 
@@ -12,12 +10,8 @@ const defaultStyles = StyleSheet.create(theme => ({
     root: { color: theme.colors.onSurface, ...theme.typescale.bodyMedium },
 }));
 
-registerComponentStyles('Text', defaultStyles);
-
 const TextDefault = textFactory(
-    (getRegisteredMoleculesComponentStyles('Text') as any) ?? defaultStyles,
+    getRegisteredComponentStylesWithFallback('Text', defaultStyles) as any,
 );
 
-registerMoleculesComponent('Text', TextDefault);
-
 export default getRegisteredComponentWithFallback('Text', TextDefault);

package/components/TextInput/TextInput.tsx

@@ -3,7 +3,7 @@ import React, {
     memo,
     type PropsWithoutRef,
     type ReactNode,
-    type RefObject,
+    type Ref,
     useCallback,
     useContext,
     useEffect,
@@ -50,7 +50,7 @@ type Element = ReactNode | ((props: ElementProps) => ReactNode);
 
 export type Props = Omit<TextInputProps, 'ref'> &
     WithElements<Element> & {
-        ref?: RefObject<TextInputHandles | null>;
+        ref?: Ref<NativeTextInput | null>;
         /**
          * Variant of the TextInput.
          * - `flat` - flat input with an underline.
@@ -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,
@@ -432,6 +432,7 @@ const TextInput = forwardRef<TextInputHandles, Props>(
             };
         }, [onBlurRef]);
 
+        // @ts-ignore // TODO - fix this
         const componentStyles = styles.root;
 
         const labelWidth = labelLayout.width;

package/components/TextInput/index.tsx

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

package/components/TextInput/utils.ts

@@ -1,10 +1,8 @@
 import { StyleSheet } from 'react-native-unistyles';
 
 import {
-    getRegisteredComponentUtils,
-    getRegisteredMoleculesComponentStyles,
-    registerComponentsStyles,
-    registerComponentUtils,
+    getRegisteredComponentStylesWithFallback,
+    getRegisteredComponentUtilsWithFallback,
 } from '../../core';
 
 export type States =
@@ -37,12 +35,11 @@ const getInputMinHeightDefault = (variant: string, size: string) => {
     }
 };
 
-registerComponentUtils('TextInput', {
-    getInputMinHeight: getInputMinHeightDefault,
-});
-
-export const getInputMinHeight =
-    getRegisteredComponentUtils('TextInput').getInputMinHeight ?? getInputMinHeightDefault;
+export const getInputMinHeight = getRegisteredComponentUtilsWithFallback(
+    'TextInput',
+    getInputMinHeightDefault,
+    'getInputMinHeight',
+);
 
 const textInputStylesDefault = StyleSheet.create(theme => ({
     root: {
@@ -530,11 +527,7 @@ const textInputStylesDefault = StyleSheet.create(theme => ({
     },
 }));
 
-registerComponentsStyles({
-    TextInput: textInputStylesDefault,
-});
-
-export const styles = getRegisteredMoleculesComponentStyles('TextInput');
+export const styles = getRegisteredComponentStylesWithFallback('TextInput', textInputStylesDefault);
 
 export const inputLabelStyles = StyleSheet.create({
     labelContainer: {

package/components/TextInputWithMask/index.tsx

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

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';