react-native-molecules 0.5.0-beta.2 → 0.5.0-beta.20

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/utils.ts

@@ -15,30 +15,6 @@ export const defaultStyles = getRegisteredComponentStylesWithFallback(
     defaultStylesDefault,
 );
 
-// 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;
-}
-
 const _shadowColor = '#000';
 
 const iOSShadowOutputRanges = [
@@ -96,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/Tabs/TabItem.tsx

@@ -1,29 +1,20 @@
-import {
-    Children,
-    cloneElement,
-    forwardRef,
-    isValidElement,
-    type JSXElementConstructor,
-    memo,
-    type ReactElement,
-    useCallback,
-    useMemo,
-    useRef,
-    useState,
-} from 'react';
+import { forwardRef, memo, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';
 import { type LayoutChangeEvent, View, type ViewProps, type ViewStyle } from 'react-native';
 
 import { useActionState } from '../../hooks';
 import { resolveStateVariant } from '../../utils';
 import { StateLayer } from '../StateLayer';
 import { TouchableRipple, type TouchableRippleProps } from '../TouchableRipple';
-import { tabsItemStyles } from './utils';
+import { TabItemContext, tabsItemStyles } from './utils';
 
-export type TabItemProps = Omit<TouchableRippleProps, 'children' | 'ref'> & {
+export type TabItemProps<T extends string | number> = Omit<
+    TouchableRippleProps,
+    'children' | 'ref'
+> & {
     /**
      * name of the tab. This should be unique like a route name
      * */
-    name: string;
+    name: T;
     /**
      * Allows to define if TabItem is active.
      * */
@@ -37,22 +28,11 @@ export type TabItemProps = Omit<TouchableRippleProps, 'children' | 'ref'> & {
     contentsContainerProps?: Omit<ViewProps, 'children' | 'style' | 'onLayout'>;
     onLayoutContent?: (e: LayoutChangeEvent) => void;
     accessibilityLabel?: string;
-    children: ReactElement<
-        {
-            active: boolean;
-            hovered: boolean;
-            variant: 'primary' | 'secondary';
-        },
-        JSXElementConstructor<{
-            active: boolean;
-            hovered: boolean;
-            variant: 'primary' | 'secondary';
-        }>
-    >;
+    children: ReactNode;
     stateLayerProps?: ViewProps;
 };
 
-const TabItem = (
+const TabItem = <T extends string | number>(
     {
         active = false,
         variant = 'primary',
@@ -65,7 +45,7 @@ const TabItem = (
         children,
         stateLayerProps,
         ...rest
-    }: TabItemProps,
+    }: TabItemProps<T>,
     ref: any,
 ) => {
     const { hovered, actionsRef } = useActionState({ ref, actionsToListen: ['hover'] });
@@ -110,36 +90,33 @@ const TabItem = (
         [active, accessibilityLabel, state],
     );
 
+    const contextValue = useMemo(() => ({ active, hovered, variant }), [active, hovered, variant]);
+
     return (
-        <TouchableRipple
-            style={containerStyle}
-            accessibilityRole="tab"
-            accessibilityState={accessibilityState}
-            accessibilityValue={accessibilityValue}
-            {...rest}
-            ref={actionsRef}
-            onLayout={onLayout}>
-            <>
-                <View
-                    style={[tabsItemStyles.contentsContainer, contentsContainerStyleProp]}
-                    {...contentsContainerProps}
-                    onLayout={onLayoutHandled}>
-                    {Children.map(children, child => {
-                        if (!isValidElement(child)) return null;
-                        return cloneElement(child, {
-                            active,
-                            hovered,
-                            variant,
-                        });
-                    })}
-                </View>
+        <TabItemContext.Provider value={contextValue}>
+            <TouchableRipple
+                style={containerStyle}
+                accessibilityRole="tab"
+                accessibilityState={accessibilityState}
+                accessibilityValue={accessibilityValue}
+                {...rest}
+                ref={actionsRef}
+                onLayout={onLayout}>
+                <>
+                    <View
+                        style={[tabsItemStyles.contentsContainer, contentsContainerStyleProp]}
+                        {...contentsContainerProps}
+                        onLayout={onLayoutHandled}>
+                        {children}
+                    </View>
 
-                <StateLayer
-                    {...stateLayerProps}
-                    style={[tabsItemStyles.stateLayer, stateLayerProps?.style]}
-                />
-            </>
-        </TouchableRipple>
+                    <StateLayer
+                        {...stateLayerProps}
+                        style={[tabsItemStyles.stateLayer, stateLayerProps?.style]}
+                    />
+                </>
+            </TouchableRipple>
+        </TabItemContext.Provider>
     );
 };
 

package/components/Tabs/TabLabel.tsx

@@ -1,9 +1,9 @@
-import { type FC, memo, useMemo } from 'react';
+import { memo, useContext, useMemo } from 'react';
 import { type TextProps, type TextStyle } from 'react-native';
 
 import { Icon, type IconProps, type IconType } from '../Icon';
 import { Text } from '../Text';
-import { tabsLabelStyles } from './utils';
+import { TabItemContext, tabsLabelStyles } from './utils';
 
 const DEFAULT_ICON_SIZE = 24;
 
@@ -23,11 +23,6 @@ export type TabLabelProps = {
     iconStyle?: TextStyle;
 
     activeColor?: string;
-
-    active: boolean;
-    hovered: boolean;
-
-    variant: 'primary' | 'secondary';
 };
 
 const TabLabel = memo((props: TabLabelProps) => {
@@ -40,9 +35,10 @@ const TabLabel = memo((props: TabLabelProps) => {
         labelStyle: labelStyleProp,
         labelProps,
         label,
-        active,
     } = props;
 
+    const { active } = useContext(TabItemContext);
+
     // tabsLabelStyles.useVariants({
     //     variant,
     //     state: resolveStateVariant({
@@ -81,4 +77,4 @@ const TabLabel = memo((props: TabLabelProps) => {
 
 TabLabel.displayName = 'TabLabel';
 
-export default TabLabel as unknown as FC<Omit<TabLabelProps, 'active' | 'hovered' | 'variant'>>;
+export default TabLabel;