fluent-styles 1.62.3 → 1.62.5

package/src/header/index.tsx

@@ -8,7 +8,6 @@ import {
 import { styled } from "../utiles/styled";
 import { getStatusBarHeight } from "../utiles/statusBar";
 import { Stack } from "../stack";
-import StatusBar, { StatusBarProps } from "./statusBar";
 import { StyleShape, ShapeProps } from "../shape";
 import { StyledText, StyledTextProps } from "../text";
 import { ChevronLeft } from "../icons";
@@ -35,8 +34,6 @@ export interface HeaderProps extends ViewProps, ViewStyle {
   backArrowProps?: BackArrowProps;
   shapeProps?: ShapeProps;
   onBackPress?: () => void;
-  showStatusBar?: boolean;
-  statusBarProps?: StatusBarProps;
   skipStatusBarOnAndroid?: boolean;
   skipStatusBarOnIOS?: boolean;
   children?: React.ReactNode;
@@ -44,7 +41,7 @@ export interface HeaderProps extends ViewProps, ViewStyle {
 
 // ─── Container ────────────────────────────────────────────────────────────────
 
-const StyledHeaderContainer = styled<ViewProps & ViewStyle>(View, {
+const StyledHeaderContainer = styled<HeaderProps>(View, {
   base: {
     position: "relative",
     flexDirection: "row",
@@ -72,128 +69,138 @@ Full.displayName = "StyledHeader.Full";
 
 // ─── StyledHeader ─────────────────────────────────────────────────────────────
 
-const HeaderComponent = React.forwardRef<
-  React.ComponentPropsWithRef<typeof StyledHeaderContainer>,
-  HeaderProps
->(
-  (
-    {
-      // built-in title/icon layout props
-      showBackArrow,
-      backArrowProps,
-      showStatusBar = true,
-      onBackPress,
-      title,
-      titleAlignment = "left",
-      titleProps,
-      leftIcon,
-      rightIcon,
-      shapeProps,
-      statusBarProps,
-      skipStatusBarOnAndroid = true,
-      skipStatusBarOnIOS = true,
-      // children covers StyledHeader.Full usage
-      children,
-      ...rest
-    },
-    ref,
-  ) => {
-    // ── Left slot ─────────────────────────────────────────────────────────
-    const renderLeft = () => (
-      <Stack flex={1} horizontal alignItems="center" justifyContent="flex-start">
-        {showBackArrow && (
-          <StyledPressable onPress={onBackPress ?? backArrowProps?.onPress}>
-            <StyleShape
-              cycle
-
-              {...shapeProps}
-            >
-              <ChevronLeft
-                size={backArrowProps?.size ?? 24}
-                color={backArrowProps?.color ?? theme.colors.gray[700]}
-                strokeWidth={backArrowProps?.strokeWidth}
-              />
-            </StyleShape>
-          </StyledPressable>
-
-        )}
-        {leftIcon}
-        {titleAlignment === "left" && title && (
+const HeaderComponent = ({
+  showBackArrow,
+  backArrowProps,
+  onBackPress,
+  title,
+  titleAlignment = "left",
+  titleProps,
+  leftIcon,
+  rightIcon,
+  shapeProps,
+  skipStatusBarOnAndroid = true,
+  skipStatusBarOnIOS = true,
+  children,
+  // Pull ref directly from props
+  ref,
+  ...rest
+}: HeaderProps & { ref?: React.Ref<View> }) => {
+
+  // ── Left slot ─────────────────────────────────────────────────────────
+  const renderBackIcon = () => (
+    <>
+      {showBackArrow && (
+        <StyledPressable onPress={onBackPress ?? backArrowProps?.onPress} flexDirection="row" alignItems="center" justifyContent="flex-start">
+          <StyleShape
+            cycle
+
+            {...shapeProps}
+          >
+            <ChevronLeft
+              size={backArrowProps?.size ?? 24}
+              color={backArrowProps?.color ?? theme.colors.gray[700]}
+              strokeWidth={backArrowProps?.strokeWidth}
+            />
+          </StyleShape>
+        </StyledPressable>
+
+      )}
+    </>
+  );
+
+  // ── Left slot ─────────────────────────────────────────────────────────
+  const renderLeft = () => (
+    <>
+      {titleAlignment === "left" && title && (
+        <Stack flex={1} horizontal alignItems="center" justifyContent="flex-start">
+          {leftIcon}
           <StyledText
             marginLeft={showBackArrow || leftIcon ? 8 : 0}
             {...titleProps}
           >
             {title}
           </StyledText>
-        )}
-      </Stack>
-    );
-
-    // ── Center slot ───────────────────────────────────────────────────────
-    const renderCenter = () => {
-      if (titleAlignment !== "center" || !title) return null;
-      return (
-        <Stack flex={2} alignItems="center" justifyContent="center">
-          <StyledText numberOfLines={1} {...titleProps}>
-            {title}
-          </StyledText>
         </Stack>
-      );
-    };
-
-    // ── Right slot ────────────────────────────────────────────────────────
-    const renderRight = () => (
-      <Stack flex={1} horizontal alignItems="center" justifyContent="flex-end">
-        {titleAlignment === "right" && title && (
-          <StyledText marginRight={rightIcon ? 8 : 0} {...titleProps}>
-            {title}
-          </StyledText>
-        )}
-        {rightIcon}
-      </Stack>
-    );
+      )}
+    </>
 
-    // ── When children is present (e.g. StyledHeader.Full usage), render
-    //    them directly inside the container — skip the built-in layout slots.
-    const renderContent = () => {
-      if (children) return <>{children}</>;
-      return (
-        <>
-          {renderLeft()}
-          {renderCenter()}
-          {renderRight()}
-        </>
-      );
-    };
+  );
 
+  // ── Center slot ───────────────────────────────────────────────────────
+  const renderCenter = () => {
     return (
-      <Stack vertical>
-        {showStatusBar && <StatusBar {...statusBarProps} />}
-        <StyledHeaderContainer
-          ref={ref}
-          marginTop={getStatusBarHeight({
-            skipAndroid: skipStatusBarOnAndroid,
-            skipIos: skipStatusBarOnIOS,
-          })}
-          {...rest}
-        >
-          {renderContent()}
-        </StyledHeaderContainer>
-      </Stack>
+      <>
+        {
+          titleAlignment === "center" && title && (
+              <Stack flex={1} horizontal alignItems="center" justifyContent="center">
+  <StyledText numberOfLines={1} {...titleProps}>
+              {title}
+            </StyledText>
+              </Stack>
+
+          )
+        }
+      </>
     );
-  },
-);
-
-// ─── Composition ──────────────────────────────────────────────────────────────
-
-interface HeaderComponent
-  extends React.ForwardRefExoticComponent<
-    HeaderProps & React.RefAttributes<View>
-  > {
+  };
+
+  // ── Right slot ────────────────────────────────────────────────────────
+  const renderRight = () => (
+    <>
+      {titleAlignment === "right" && title && (
+        <StyledText marginRight={rightIcon ? 8 : 0} {...titleProps}>
+          {title}
+        </StyledText>
+      )}
+      {
+        rightIcon && (
+          <> {rightIcon}</>
+        )
+      }
+
+    </>
+  );
+
+  // ── When children is present (e.g. StyledHeader.Full usage), render
+  //    them directly inside the container — skip the built-in layout slots.
+  const renderContent = () => {
+    if (children) return <>{children}</>;
+    return (
+      <>
+        {renderBackIcon()}
+        {renderLeft()}
+        {renderCenter()}
+        {renderRight()}
+      </>
+    );
+  };
+
+  return (
+    <StyledHeaderContainer
+      ref={ref}
+      marginTop={getStatusBarHeight({
+        skipAndroid: skipStatusBarOnAndroid,
+        skipIos: skipStatusBarOnIOS,
+      })}
+      {...rest}
+    >
+      {renderContent()}
+    </StyledHeaderContainer>
+  );
+};
+
+
+// ─── Composition (React 19 Style) ─────────────────────────────────────────────
+
+// Define the static property on the function type
+interface StyledHeaderType {
+  (props: HeaderProps & { ref?: React.Ref<View> }): React.ReactElement | null;
   Full: typeof Full;
+  displayName?: string;
 }
 
-const StyledHeader = HeaderComponent as HeaderComponent;
+const StyledHeader = HeaderComponent as StyledHeaderType;
 
 StyledHeader.Full = Full;
 StyledHeader.displayName = "StyledHeader";

package/src/image/index.tsx

@@ -33,13 +33,13 @@ interface _StyledImageProps extends Omit<StyledImageProps, 'height' | 'width'> {
     width?: DimensionValue;
 }   
 
-const StyledImage = React.forwardRef<React.ComponentRef<typeof Image>, _StyledImageProps>(({ height = 100, width = 100, ...props }: _StyledImageProps, ref) => {
+const StyledImage = ({ height = 100, width = 100, ref, ...props }: _StyledImageProps & { ref?: React.Ref<React.ComponentRef<typeof Image>> }) => {
     const { cycle, size, ...rest } = props;
     const sizeStyle: ImageStyle = cycle
         ? { height: Number(size) as DimensionValue, width: Number(size) as DimensionValue, borderRadius: 9999  }
         : { height: height as DimensionValue, width: width as DimensionValue };
     return <Image {...rest} style={[props.style, sizeStyle]} ref={ref} />;
-});
+};
 
 export { StyledImage, StyledImageBackground };
 export type { StyledImageProps, StyledImageBackgroundProps };

package/src/index.ts

@@ -6,7 +6,7 @@ export { StyledText, type StyledTextProps } from './text'
 export { StyledSafeAreaProvider, type StyledSafeAreaProviderProps } from './safeAreaProvider'
 export { StyledSafeAreaView, type StyledSafeAreaViewProps } from './safeAreaView'
 export { StyledScrollView, type StyledScrollViewProps } from './scrollView'
-export { StyleShape, type ShapeProps } from './shape'
+export { StyledShape, StyleShape, type ShapeProps } from './shape'
 export { StyledPage, type StyledPageProps } from './page'
 export { StyledHeader, type HeaderProps } from './header'
 export { StyledSpacer, type SpacerProps } from './spacer'

package/src/input/index.tsx

@@ -1,5 +1,4 @@
 import React, {
-  forwardRef,
   useCallback,
   useImperativeHandle,
   useRef,
@@ -337,63 +336,62 @@ const ad = StyleSheet.create({
 
 // ─── StyledTextInput ──────────────────────────────────────────────────────────
 
-export const StyledTextInput = forwardRef<React.ComponentRef<typeof TextInputBase>, StyledTextInputProps>(
-  (
-    {
-      // Label / meta
-      label,
-      labelProps,
-      required          = false,
-      helperText,
-      helperProps,
-      errorMessage,
-      errorProps,
-      error             = false,
-
-      // Counter
-      showCounter       = false,
-
-      // Icons
-      leftIcon,
-      rightIcon,
-      leftAddon,
-      rightAddon,
-
-      // Clear + loading
-      clearable         = false,
-      loading           = false,
-
-      // Appearance
-      variant           = 'outline',
-      size              = 'md',
-      borderColor:      borderColorProp,
-      focusColor        = theme.colors.indigo?.[500] ?? '#6366f1',
-      floatLabel        = false,
-
-      // Styles
-      containerStyle,
-      inputWrapStyle,
-      inputStyle,
-
-      // Pass-through style props
-      fontSize: fontSizeProp,
-      fontWeight: fontWeightProp,
-
-      // TextInput props
-      value,
-      defaultValue,
-      onChangeText,
-      placeholder,
-      editable          = true,
-      multiline         = false,
-      numberOfLines,
-      maxLength,
-      onFocus: onFocusProp,
-      onBlur:  onBlurProp,
-      ...rest
-    },
+export const StyledTextInput = (
+  {
+    // Label / meta
+    label,
+    labelProps,
+    required          = false,
+    helperText,
+    helperProps,
+    errorMessage,
+    errorProps,
+    error             = false,
+
+    // Counter
+    showCounter       = false,
+
+    // Icons
+    leftIcon,
+    rightIcon,
+    leftAddon,
+    rightAddon,
+
+    // Clear + loading
+    clearable         = false,
+    loading           = false,
+
+    // Appearance
+    variant           = 'outline',
+    size              = 'md',
+    borderColor:      borderColorProp,
+    focusColor        = theme.colors.indigo?.[500] ?? '#6366f1',
+    floatLabel        = false,
+
+    // Styles
+    containerStyle,
+    inputWrapStyle,
+    inputStyle,
+
+    // Pass-through style props
+    fontSize: fontSizeProp,
+    fontWeight: fontWeightProp,
+
+    // TextInput props
+    value,
+    defaultValue,
+    onChangeText,
+    placeholder,
+    editable          = true,
+    multiline         = false,
+    numberOfLines,
+    maxLength,
+    onFocus: onFocusProp,
+    onBlur:  onBlurProp,
     ref,
-  ) => {
+    ...rest
+  }: StyledTextInputProps & { ref?: React.Ref<React.ComponentRef<typeof TextInputBase>> },
+) => {
     const [focused,     setFocused]     = useState(false)
     const [localValue,  setLocalValue]  = useState(defaultValue ?? '')
     const inputRef = useRef<TextInput>(null)
@@ -617,8 +615,7 @@ export const StyledTextInput = forwardRef<React.ComponentRef<typeof TextInputBas
 
       </View>
     )
-  },
-)
+};
 
 StyledTextInput.displayName = 'StyledTextInput'
 export { StyledTextInput as StyledInput }

package/src/page/index.tsx

@@ -1,18 +1,36 @@
 import React from 'react';
 import { StyledSafeAreaView, StyledSafeAreaViewProps } from '../safeAreaView';
+import { StatusBar, StatusBarProps } from 'react-native';
+import { StyledHeader } from '../header';
 
-type StyledPageProps = StyledSafeAreaViewProps & {
-    children?: React.ReactNode;
+interface StyledPageProps extends StyledSafeAreaViewProps {
+    statusBarProps?: StatusBarProps;
+    showStatusBar?: boolean;
+    statusBarStyle?: StatusBarProps['barStyle'];
+    statusBarBackgroundColor?: StatusBarProps['backgroundColor'];
+    hideStatusBarOnAndroid?: boolean;
+    hideStatusBarOnIOS?: boolean;
+    translucentStatusBar?: boolean;
 }
 
-const StyledPage = ({ children, ...props }: StyledPageProps) => {
+interface StyledPageType {
+    (props: React.PropsWithChildren<StyledPageProps>): React.ReactNode;
+    Header: typeof StyledHeader;
+    displayName?: string;
+}
+
+const Page = ({ children, statusBarProps, showStatusBar = true, statusBarStyle, statusBarBackgroundColor, hideStatusBarOnAndroid, hideStatusBarOnIOS, translucentStatusBar, ...props }: React.PropsWithChildren<StyledPageProps>) => {
     return (
         <StyledSafeAreaView {...props}>
+            {showStatusBar && <StatusBar hidden={hideStatusBarOnAndroid || hideStatusBarOnIOS} barStyle={statusBarStyle} backgroundColor={statusBarBackgroundColor} translucent={translucentStatusBar} {...statusBarProps} />}
             {children}
         </StyledSafeAreaView>
     )
 }
 
+const StyledPage = Page as StyledPageType;
+
+StyledPage.Header = StyledHeader;
 StyledPage.displayName = 'StyledPage';
 
 export { StyledPage };

package/src/safeAreaView/index.tsx

@@ -4,13 +4,17 @@ import {
 } from 'react-native-safe-area-context';
 import { styled } from '../utiles/styled';
 import { ViewStyleProps, ViewStyle } from '../utiles/viewStyleProps';
+import { viewStyleStringVariants } from '../utiles/viewStyleVariants';
 
 type StyledSafeAreaViewProps = SafeAreaViewProps & ViewStyleProps;
 
 const StyledSafeAreaView = styled<StyledSafeAreaViewProps>(SafeAreaView, {
     base: {
-        flex: 1,
-    } as ViewStyle
+    flex: 1,
+    } as ViewStyle,
+    variants: {
+      ...viewStyleStringVariants,
+    }
 });
 
 export { StyledSafeAreaView };

package/src/seperator/index.tsx

@@ -10,14 +10,9 @@ interface SeperatorProps extends StackProps {
     rightLabelProps?: React.ComponentProps<typeof StyledText>;
 }
 
-const StyledSeperator = React.forwardRef<
-    React.ComponentRef<typeof Stack>,
-    SeperatorProps
->(
-    (
-        { leftLabel, leftLabelProps, rightLabel, rightLabelProps, ...rest },
-        ref,
-    ) => {
+const StyledSeperator = (
+    { leftLabel, leftLabelProps, rightLabel, rightLabelProps, ref, ...rest }: SeperatorProps & { ref?: React.Ref<React.ComponentRef<typeof Stack>> },
+) => {
         return (
             <Stack
                 horizontal
@@ -50,8 +45,7 @@ const StyledSeperator = React.forwardRef<
                 }
             </Stack>
         );
-    },
-);
+};
 
 StyledSeperator.displayName = "StyledSeperator";
 

package/src/shape/cycle.tsx

@@ -114,18 +114,16 @@ interface StyledCycleProps extends CycleComponentProps {
  *   </LinearGradient>
  * </StyledCycle>
  */
-const StyledCycle = React.forwardRef<View, StyledCycleProps>(
-  (
-    {
-      children,
-      ...rest
-    },
-    ref
-  ) => (
-    <CycleBase ref={ref} {...rest}>
-      {children}
-    </CycleBase>
-  )
+const StyledCycle = (
+  {
+    children,
+    ref,
+    ...rest
+  }: StyledCycleProps & { ref?: React.Ref<View> }
+) => (
+  <CycleBase ref={ref} {...rest}>
+    {children}
+  </CycleBase>
 );
 
 StyledCycle.displayName = 'StyledCycle';

package/src/shape/index.tsx

@@ -1,6 +1,7 @@
 
 import { View, ViewProps, ViewStyle } from 'react-native';
 import { styled } from '../utiles/styled';
+import { viewStyleStringVariants, viewStyleVariants } from '../utiles/viewStyleVariants';
 
 type ShapeVariants = {
     cycle?: boolean | [boolean, ViewStyle];
@@ -9,7 +10,7 @@ type ShapeVariants = {
 
 type ShapeProps = ShapeVariants & ViewProps & ViewStyle;
 
-const StyleShape = styled<ShapeProps>(View, {
+const StyledShape = styled<ShapeProps>(View, {
     base: {
         position: 'relative',
     } as ViewStyle,
@@ -31,8 +32,11 @@ const StyleShape = styled<ShapeProps>(View, {
             }
             return { height: Number(selected), width: Number(selected) };
         },
-    } as any
+        ...viewStyleVariants,
+        ...viewStyleStringVariants,
+    } as any,
 });
 
-export { StyleShape };
+
+export { StyledShape, StyledShape as StyleShape };
 export type { ShapeProps };