fluent-styles 1.62.4 → 1.62.6

package/src/badge/index.tsx

@@ -1,7 +1,7 @@
 import { Text, TextProps, TextStyle } from "react-native";
 import { styled } from "../utiles/styled";
 import { theme } from "../utiles/theme";
-import { forwardRef, ReactNode, ElementRef } from "react";
+import React, { ReactNode } from "react";
 import { Stack } from "../stack";
 
 type TextVariants = {
@@ -68,10 +68,7 @@ interface BadgeWithIconProps extends StyledBadgeProps {
   iconRight?: ReactNode;
 }
 
-const BadgeWithIcon = forwardRef<
-  ElementRef<typeof StyledBadge>,
-  BadgeWithIconProps
->(({ title, iconLeft, iconRight, ...rest }, ref) => {
+const BadgeWithIcon = ({ title, iconLeft, iconRight, ref, ...rest }: BadgeWithIconProps & { ref?: React.Ref<any> }) => {
   const {
     color,
     fontSize,
@@ -112,7 +109,7 @@ const BadgeWithIcon = forwardRef<
       {iconRight && <>{iconRight}</>}
     </Stack>
   );
-});
+};
 
 interface BadgeIconProps extends StyledBadgeProps {
   char?: string;
@@ -124,12 +121,7 @@ interface BadgeIconProps extends StyledBadgeProps {
   size?: number;
 }
 
-const BadgeIcon = forwardRef<
-  ElementRef<typeof StyledBadge>,
-  BadgeIconProps
->(
-  (
-    {
+const BadgeIcon = ({
       icon,
       char,
       top = -6,
@@ -140,9 +132,8 @@ const BadgeIcon = forwardRef<
       bottom,
       left,
       size = 16,
-    },
-    ref
-  ) => {
+      ref,
+    }: BadgeIconProps & { ref?: React.Ref<any> }) => {
     return (
       <Stack
         flex={1}
@@ -172,8 +163,7 @@ const BadgeIcon = forwardRef<
         </Stack>
       </Stack>
     );
-  }
-);
+  };
 
 export { BadgeIcon };
 export type { BadgeIconProps };

package/src/button/index.tsx

@@ -91,11 +91,9 @@ export interface StyledButtonProps extends ButtonProps {
   rightIcon?:  React.ReactNode
 }
 
-interface RefExoticComponent
-  extends React.ForwardRefExoticComponent<
-    StyledButtonProps & React.RefAttributes<React.ComponentRef<typeof ButtonBase>>
-  > {
-  Text: typeof StyledText
+interface RefExoticComponent {
+  (props: StyledButtonProps & { ref?: React.Ref<React.ComponentRef<typeof ButtonBase>> }): React.ReactNode;
+  Text: typeof StyledText;
 }
 
 // ─── Base styled component ────────────────────────────────────────────────────
@@ -287,10 +285,7 @@ function spinnerColor(props: StyledButtonProps): string {
 
 // ─── Button ──────────────────────────────────────────────────────────────────
 
-const Button = React.forwardRef<
-  React.ComponentPropsWithRef<typeof ButtonBase>,
-  StyledButtonProps
->(({ children, loading, leftIcon, rightIcon, disabled, ...rest }, ref) => {
+const Button = ({ children, loading, leftIcon, rightIcon, disabled, ref, ...rest }: StyledButtonProps & { ref?: React.Ref<React.ComponentRef<typeof ButtonBase>> }) => {
   const isDisabled = disabled || loading
 
   return (
@@ -319,12 +314,12 @@ const Button = React.forwardRef<
       {/* Right icon slot */}
       {!loading && rightIcon ? rightIcon : null}
     </ButtonBase>
-  )
-})
+  );
+};
 
 Button.displayName = 'StyledButton'
 
-const StyledButton = Button as RefExoticComponent
+const StyledButton = Button as unknown as RefExoticComponent
 StyledButton.Text = StyledText
 
 export { StyledButton }

package/src/card/index.tsx

@@ -117,16 +117,15 @@ const CardBase = styled<CardComponentProps>(View, {
  * Flexible layout container with shadow variants
  * Can be wrapped in Pressable for interactive behavior
  */
-const CardComponent = React.forwardRef<React.ComponentRef<typeof CardBase>, StyledCardProps>(
-  (
-    {
-      children,
-      pressable = false,
-      pressableProps,
-      ...rest
-    },
-    ref
-  ) => {
+const CardComponent = (
+  {
+    children,
+    pressable = false,
+    pressableProps,
+    ref,
+    ...rest
+  }: StyledCardProps & { ref?: React.Ref<React.ComponentRef<typeof CardBase>> }
+) => {
     const cardContent = (
       <CardBase ref={ref} {...rest}>
         {children}
@@ -138,20 +137,19 @@ const CardComponent = React.forwardRef<React.ComponentRef<typeof CardBase>, Styl
     }
 
     return cardContent;
-  }
-);
+};
 
 interface HeaderProps extends StackProps {
   children: React.ReactNode;
 }
 
-const StyledHeader = React.forwardRef<React.ComponentRef<typeof Stack>, HeaderProps>(({ children, ...rest }, ref) => {
+const StyledHeader = ({ children, ref, ...rest }: HeaderProps & { ref?: React.Ref<React.ComponentRef<typeof Stack>> }) => {
   return (
     <Stack borderBottomWidth={1} borderBottomColor={theme.colors.gray[100]} ref={ref} {...rest}>
       {children}
     </Stack>
   );
-});
+};
 
 StyledHeader.displayName = 'StyledHeader';
 
@@ -159,13 +157,13 @@ interface ImageProps extends StyledImageBackgroundProps {
   children?: React.ReactNode;
 }
 
-const StyledImage = React.forwardRef<React.ComponentRef<typeof StyledImageBackground>, ImageProps>(({ children, ...rest }, ref) => {
+const StyledImage = ({ children, ref, ...rest }: ImageProps & { ref?: React.Ref<React.ComponentRef<typeof StyledImageBackground>> }) => {
   return (
     <StyledImageBackground ref={ref} {...rest}>
       {children}
     </StyledImageBackground>
   );
-});
+};
 
 StyledImage.displayName = 'StyledImage';
 
@@ -173,13 +171,13 @@ interface ContentProps extends StackProps {
   children: React.ReactNode;
 }
 
-const StyledContent= React.forwardRef<React.ComponentRef<typeof Stack>, ContentProps>(({ children, ...rest }, ref) => {
+const StyledContent = ({ children, ref, ...rest }: ContentProps & { ref?: React.Ref<React.ComponentRef<typeof Stack>> }) => {
   return (
     <Stack ref={ref} {...rest}>
       {children}
     </Stack>
   );
-});
+};
 
 StyledContent.displayName = 'StyledContent';
 
@@ -187,24 +185,24 @@ interface FooterProps extends StackProps {
   children: React.ReactNode;
 }
 
-const StyledFooter = React.forwardRef<React.ComponentRef<typeof Stack>, FooterProps>(({ children, ...rest }, ref) => {
+const StyledFooter = ({ children, ref, ...rest }: FooterProps & { ref?: React.Ref<React.ComponentRef<typeof Stack>> }) => {
   return (
     <Stack borderTopWidth={1} borderTopColor={theme.colors.gray[100]} ref={ref} {...rest}>
       {children}
     </Stack>
   );
-});
+};
 
 
 StyledFooter.displayName = 'StyledFooter';
 
-interface Card extends React.ForwardRefExoticComponent<
-  StyledCardProps & React.RefAttributes<React.ComponentRef<typeof CardBase>>
-> {
+interface Card {
+  (props: StyledCardProps & { ref?: React.Ref<React.ComponentRef<typeof CardBase>> }): React.ReactNode;
   Header: typeof StyledHeader;
   Footer: typeof StyledFooter;
   Image: typeof StyledImage;
   Content: typeof StyledContent;
+  displayName?: string;
 }
 
 const StyledCard = CardComponent as Card;

package/src/checkBox/index.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import {
     TouchableOpacity,
     TouchableOpacityProps,
@@ -82,25 +82,21 @@ const CheckBoxBase = styled<CheckBoxProps>(TouchableOpacity, {
     } as any,
 });
 
-const StyledCheckBox = forwardRef<
-    React.ComponentRef<typeof CheckBoxBase>,
-    StyledCheckBoxProps
->(
-    (
-        {
-            checked = false,
-            onCheck,
-            checkedColor,
-            uncheckedColor,
-            checkMarkColor = theme.colors.gray[400],
-            size = 24,
-            disabled = false,
-            iconProps,
-            iconSize = size * 0.6,
-            ...rest
-        },
+const StyledCheckBox = (
+    {
+        checked = false,
+        onCheck,
+        checkedColor,
+        uncheckedColor,
+        checkMarkColor = theme.colors.gray[400],
+        size = 24,
+        disabled = false,
+        iconProps,
+        iconSize = size * 0.6,
         ref,
-    ) => {
+        ...rest
+    }: StyledCheckBoxProps & { ref?: React.Ref<React.ComponentRef<typeof CheckBoxBase>> },
+) => {
         const [internalChecked, setInternalChecked] = useState(checked);
 
         useEffect(() => {
@@ -130,8 +126,7 @@ const StyledCheckBox = forwardRef<
                 )}
             </CheckBoxBase>
         );
-    },
-);
+};
 
 StyledCheckBox.displayName = "StyledCheckBox";
 export { StyledCheckBox, type StyledCheckBoxProps };

package/src/dropdown/index.tsx

@@ -1,5 +1,4 @@
 import React, {
-  forwardRef,
   useCallback,
   useEffect,
   useMemo,
@@ -787,35 +786,34 @@ const MetaRow: React.FC<{
 // ─── StyledDropdown (single-select) ──────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
 
-export const StyledDropdown = forwardRef<any, StyledDropdownProps>(
-  (
-    {
-      data,
-      onChange,
-      placeholder,
-      placeholderTextColor = theme.colors.gray[400],
-      value,
-      defaultValue,
-      disabled = false,
-      maxHeight = 260,
-      size = "md",
-      variant = "outline",
-      leftIcon,
-      label,
-      helperText,
-      errorMessage,
-      error = false,
-      searchable = false,
-      searchPlaceholder,
-      clearable = false,
-      loading = false,
-      emptyText = "No options found",
-      focusColor = theme.colors.indigo?.[500] ?? "#6366f1",
-      groupBy,
-      ...rest
-    },
+export const StyledDropdown = (
+  {
+    data,
+    onChange,
+    placeholder,
+    placeholderTextColor = theme.colors.gray[400],
+    value,
+    defaultValue,
+    disabled = false,
+    maxHeight = 260,
+    size = "md",
+    variant = "outline",
+    leftIcon,
+    label,
+    helperText,
+    errorMessage,
+    error = false,
+    searchable = false,
+    searchPlaceholder,
+    clearable = false,
+    loading = false,
+    emptyText = "No options found",
+    focusColor = theme.colors.indigo?.[500] ?? "#6366f1",
+    groupBy,
     ref,
-  ) => {
+    ...rest
+  }: StyledDropdownProps & { ref?: React.Ref<any> },
+) => {
     const [open, setOpen] = useState(false);
     const [internalValue, setInternalValue] = useState(defaultValue ?? "");
     const { triggerRef, pos, measure, updatePanelHeight } =
@@ -910,8 +908,7 @@ export const StyledDropdown = forwardRef<any, StyledDropdownProps>(
         )}
       </Stack>
     );
-  },
-);
+};
 
 StyledDropdown.displayName = "StyledDropdown";
 
@@ -919,41 +916,37 @@ StyledDropdown.displayName = "StyledDropdown";
 // ─── StyledMultiSelectDropdown ────────────────────────────────────────────────
 // ─────────────────────────────────────────────────────────────────────────────
 
-export const StyledMultiSelectDropdown = forwardRef<
-  any,
-  StyledMultiSelectDropdownProps
->(
-  (
-    {
-      data,
-      onChange,
-      placeholder,
-      placeholderTextColor = theme.colors.gray[400],
-      value,
-      defaultValue,
-      disabled = false,
-      maxHeight = 300,
-      size = "md",
-      variant = "outline",
-      leftIcon,
-      label,
-      helperText,
-      errorMessage,
-      error = false,
-      searchable = false,
-      searchPlaceholder,
-      clearable = false,
-      loading = false,
-      emptyText = "No options found",
-      focusColor = theme.colors.indigo?.[500] ?? "#6366f1",
-      groupBy,
-      separator = ", ",
-      maxDisplay = 3,
-      selectAll = false,
-      ...rest
-    },
+export const StyledMultiSelectDropdown = (
+  {
+    data,
+    onChange,
+    placeholder,
+    placeholderTextColor = theme.colors.gray[400],
+    value,
+    defaultValue,
+    disabled = false,
+    maxHeight = 300,
+    size = "md",
+    variant = "outline",
+    leftIcon,
+    label,
+    helperText,
+    errorMessage,
+    error = false,
+    searchable = false,
+    searchPlaceholder,
+    clearable = false,
+    loading = false,
+    emptyText = "No options found",
+    focusColor = theme.colors.indigo?.[500] ?? "#6366f1",
+    groupBy,
+    separator = ", ",
+    maxDisplay = 3,
+    selectAll = false,
     ref,
-  ) => {
+    ...rest
+  }: StyledMultiSelectDropdownProps & { ref?: React.Ref<any> },
+) => {
     const [open, setOpen] = useState(false);
     const [internalKeys, setInternalKeys] = useState<string[]>(
       defaultValue ?? [],
@@ -1075,7 +1068,6 @@ export const StyledMultiSelectDropdown = forwardRef<
         )}
       </Stack>
     );
-  },
-);
+};
 
 StyledMultiSelectDropdown.displayName = "StyledMultiSelectDropdown";