fluent-styles 1.62.4 → 1.62.6

package/src/spinner/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import {
   ActivityIndicator,
   ActivityIndicatorProps,
@@ -94,22 +94,21 @@ const StyledActivityIndicator = styled<any>(ActivityIndicator, {
  * - Theme integration
  * - Accessibility support
  */
-const StyledSpinner = forwardRef<any, SpinnerProps>(
-  (
-    {
-      size = 'medium',
-      variant = 'primary',
-      color,
-      overlay = false,
-      overlayColor = 'rgba(0, 0, 0, 0.3)',
-      label,
-      labelColor,
-      labelSize = 14,
-      accessibilityLabel = 'Loading',
-      ...rest
-    },
-    ref
-  ) => {
+const StyledSpinner = (
+  {
+    size = 'medium',
+    variant = 'primary',
+    color,
+    overlay = false,
+    overlayColor = 'rgba(0, 0, 0, 0.3)',
+    label,
+    labelColor,
+    labelSize = 14,
+    accessibilityLabel = 'Loading',
+    ref,
+    ...rest
+  }: SpinnerProps & { ref?: React.Ref<any> }
+) => {
     // Determine size
     const finalSize = typeof size === 'number' ? size : sizeConfig[size];
 
@@ -178,8 +177,7 @@ const StyledSpinner = forwardRef<any, SpinnerProps>(
         </YStack>
       </YStack>
     );
-  }
-);
+};
 
 StyledSpinner.displayName = 'StyledSpinner';
 
@@ -198,22 +196,21 @@ interface SpinnerContainerProps extends Omit<SpinnerProps, 'ref' | 'overlay'> {
  *
  * Use for: Page loading, data fetching, async operations
  */
-const SpinnerContainer = forwardRef<any, SpinnerContainerProps>(
-  (
-    {
-      isVisible = true,
-      size = 'large',
-      variant = 'primary',
-      color,
-      backdropColor = 'rgba(0, 0, 0, 0.5)',
-      message,
-      labelColor,
-      labelSize = 14,
-      onBackdropPress,
-      ...rest
-    },
-    ref
-  ) => {
+const SpinnerContainer = (
+  {
+    isVisible = true,
+    size = 'large',
+    variant = 'primary',
+    color,
+    backdropColor = 'rgba(0, 0, 0, 0.5)',
+    message,
+    labelColor,
+    labelSize = 14,
+    onBackdropPress,
+    ref,
+    ...rest
+  }: SpinnerContainerProps & { ref?: React.Ref<any> }
+) => {
     if (!isVisible) return null;
 
     // Determine size
@@ -283,8 +280,7 @@ const SpinnerContainer = forwardRef<any, SpinnerContainerProps>(
         {spinnerContent}
       </StyledButton>
     );
-  }
-);
+};
 
 SpinnerContainer.displayName = 'SpinnerContainer';
 
@@ -302,22 +298,21 @@ interface InlineSpinnerProps extends Omit<SpinnerProps, 'overlay'> {
  *
  * Use for: Button loading states, inline operations, compact loading indicators
  */
-const InlineSpinner = forwardRef<any, InlineSpinnerProps>(
-  (
-    {
-      size = 'small',
-      variant = 'primary',
-      color,
-      text,
-      labelColor,
-      labelSize = 12,
-      direction = 'row',
-      gap = 8,
-      accessibilityLabel = 'Loading',
-      ...rest
-    },
-    ref
-  ) => {
+const InlineSpinner = (
+  {
+    size = 'small',
+    variant = 'primary',
+    color,
+    text,
+    labelColor,
+    labelSize = 12,
+    direction = 'row',
+    gap = 8,
+    accessibilityLabel = 'Loading',
+    ref,
+    ...rest
+  }: InlineSpinnerProps & { ref?: React.Ref<any> }
+) => {
     // Determine size
     const finalSize = typeof size === 'number' ? size : sizeConfig[size];
 
@@ -348,8 +343,7 @@ const InlineSpinner = forwardRef<any, InlineSpinnerProps>(
         )}
       </StackComponent>
     );
-  }
-);
+};
 
 InlineSpinner.displayName = 'InlineSpinner';
 

package/src/utiles/styled.tsx

@@ -1,5 +1,5 @@
 
-import React, { ComponentType, Ref, forwardRef } from "react";
+import React, { ComponentType } from "react";
 import { ViewStyle, TextStyle, ImageStyle } from "react-native";
 
 type Style = ViewStyle | TextStyle | ImageStyle;
@@ -13,52 +13,39 @@ interface StyledOptions {
     };
 }
 
-// React 19 passes ref as a regular prop; React 18 and below do not.
-const isReact19 = typeof React.version === "string" && parseInt(React.version) >= 19;
-
 const styled = <P extends object>(
     Component: ComponentType<P>,
     { base, variants }: StyledOptions = {}
 ) => {
-    function buildStyles(options: Record<string, any>): Style {
+    const StyledComponent = (props: P & { ref?: React.Ref<any> }) => {
         const styles: Style = { ...(base || {}) };
+        const options = props as Record<string, any>;
+        const cleanProps = { ...options };
 
         if (variants) {
             Object.keys(variants).forEach((category) => {
+                delete cleanProps[category];
                 const variantSelected = options[category];
                 const variantValue = variants[category];
 
                 if (typeof variantValue === "function") {
                     const style = variantValue(variantSelected, options);
                     if (style) Object.assign(styles, style);
-                } else if (variantValue && variantValue[variantSelected]) {
+                } else if (variantValue?.[variantSelected]) {
                     const value = variantValue[variantSelected];
-                    Object.assign(
-                        styles,
-                        typeof value === "function" ? value(variantSelected, options) : value
-                    );
+                    Object.assign(styles, typeof value === "function" ? value(variantSelected, options) : value);
                 }
             });
         }
 
-        return styles;
-    }
+        return <Component {...(cleanProps as P)} style={styles} />;
+    };
 
-    if (isReact19) {
-        // React 19: ref is a plain prop
-        function StyledComponent19(props: P & { ref?: Ref<any> }) {
-            const { ref, ...rest } = props as any;
-            const styles = buildStyles(rest);
-            return <Component {...(rest as any)} style={styles} ref={ref} />;
-        }
-        return StyledComponent19;
-    }
+    StyledComponent.displayName = `Styled(${
+        typeof Component === "string" ? Component : Component.displayName ?? Component.name ?? "Component"
+    })`;
 
-    // React 18 and below: use forwardRef
-    return forwardRef<any, P>((props, ref) => {
-        const styles = buildStyles(props as Record<string, any>);
-        return <Component {...(props as any)} style={styles} ref={ref} />;
-    });
+    return StyledComponent;
 };
 
-export { styled };
+export { styled };