fluent-styles 1.62.14 → 1.62.15

package/src/button/index.tsx

@@ -285,7 +285,19 @@ function spinnerColor(props: StyledButtonProps): string {
 
 // ─── Button ──────────────────────────────────────────────────────────────────
 
-const Button = ({ children, loading, leftIcon, rightIcon, disabled, ref, ...rest }: StyledButtonProps & { ref?: React.Ref<React.ComponentRef<typeof ButtonBase>> }) => {
+// `ref` is destructured straight from props above the button, which only
+// works unpatched on React 19's "ref as prop" model — on React 18 (still the
+// baseline for RN/Expo consumers of this library) a plain function component
+// can never receive a ref at all; React strips it before the function runs.
+// `forwardRef` is the compatible way to accept a ref on both, so wrap here
+// instead of destructuring `ref` out of the props object directly. Any
+// caller relying on that ref — e.g. StyledDropdown's Trigger, which measures
+// this button's on-screen position to place its option panel — silently got
+// `null` without this, and the panel fell back to {top:0,left:0,width:0}.
+const Button = React.forwardRef<
+  React.ComponentRef<typeof ButtonBase>,
+  StyledButtonProps
+>(({ children, loading, leftIcon, rightIcon, disabled, ...rest }, ref) => {
   const isDisabled = disabled || loading
 
   return (
@@ -315,7 +327,7 @@ const Button = ({ children, loading, leftIcon, rightIcon, disabled, ref, ...rest
       {!loading && rightIcon ? rightIcon : null}
     </ButtonBase>
   );
-};
+});
 
 Button.displayName = 'StyledButton'
 

package/src/datePicker/index.tsx

@@ -799,7 +799,11 @@ const InputTrigger: React.FC<{
       borderRadius={12}
       paddingHorizontal={14}
       paddingVertical={12}
-      backgroundColor={palettes.white}
+      // PATCHED: was hard-coded to palettes.white regardless of theme — the
+      // "background" token is already themeable via the `colors` prop (it
+      // already drives the calendar sheet below), so reuse it here too
+      // instead of introducing a second, disconnected background colour.
+      backgroundColor={C.background}
       onPress={onPress}
       disabled={disabled}
     >

package/src/dropdown/index.tsx

@@ -81,6 +81,32 @@ interface DropdownBaseProps<TItem extends DropdownOptionItem>
   emptyText?: string;
   focusColor?: string;
   groupBy?: (item: TItem) => string;
+  /**
+   * Resting-surface + option-panel colour overrides — lets a consumer theme
+   * the dropdown (e.g. for dark mode) without the trigger's own focus/error
+   * border logic needing to change. A nested `colors` object (rather than
+   * a flat `backgroundColor` prop) avoids colliding with the `ViewStyle`
+   * props this interface already extends, which style the outer wrapper,
+   * not the trigger box.
+   */
+  colors?: StyledDropdownColors;
+}
+
+export interface StyledDropdownColors {
+  /** Trigger box resting background. @default '#fff' */
+  background?:      string;
+  /** Trigger box resting border (overridden by focus/error). @default gray[200] */
+  border?:          string;
+  /** Selected value text colour. @default gray[800] */
+  text?:            string;
+  /** Open option-panel background. @default '#fff' */
+  panelBackground?: string;
+  /** Open option-panel border. @default gray[200] */
+  panelBorder?:     string;
+  /** Option row label text colour. @default gray[800] */
+  panelText?:       string;
+  /** Dividers / section-header strip background inside the panel. @default gray[100] */
+  panelDivider?:    string;
 }
 
 export interface StyledDropdownProps<
@@ -221,11 +247,12 @@ const OptionRow: React.FC<{
   multiSelect: boolean;
   size: DropdownSize;
   focusColor: string;
-}> = ({ item, selected, onPress, multiSelect, size, focusColor }) => {
+  textColor: string;
+}> = ({ item, selected, onPress, multiSelect, size, focusColor, textColor: baseTextColor }) => {
   const sz = SZ[size];
   const textColor = item.disabled
     ? theme.colors.gray[300]
-    : theme.colors.gray[800];
+    : baseTextColor;
 
   return (
     <StyledButton
@@ -309,6 +336,7 @@ interface ListPanelProps {
   allSelected?: boolean;
   onSelectAll?: () => void;
   onPanelLayout?: (height: number) => void;
+  colors: Required<StyledDropdownColors>;
 }
 
 type ListEntry = DropdownOptionItem | { _header: string };
@@ -333,6 +361,7 @@ const ListPanel: React.FC<ListPanelProps> = ({
   allSelected,
   onSelectAll,
   onPanelLayout,
+  colors,
 }) => {
   const [query, setQuery] = useState("");
   const sz = SZ[size];
@@ -376,7 +405,7 @@ const ListPanel: React.FC<ListPanelProps> = ({
             paddingHorizontal={sz.px}
             paddingTop={10}
             paddingBottom={4}
-            backgroundColor={theme.colors.gray[50]}
+            backgroundColor={colors.panelDivider}
           >
             <StyledText
               fontSize={11}
@@ -398,10 +427,11 @@ const ListPanel: React.FC<ListPanelProps> = ({
           multiSelect={multiSelect}
           size={size}
           focusColor={focusColor}
+          textColor={colors.panelText}
         />
       );
     },
-    [selectedKeys, onSelect, multiSelect, size, focusColor, sz.px],
+    [selectedKeys, onSelect, multiSelect, size, focusColor, sz.px, colors.panelDivider, colors.panelText],
   );
 
   const keyExtractor = useCallback(
@@ -427,10 +457,10 @@ const ListPanel: React.FC<ListPanelProps> = ({
           left={position.left}
           width={position.width}
           maxHeight={maxHeight}
-          backgroundColor={theme.colors.white}
+          backgroundColor={colors.panelBackground}
           borderRadius={10}
           borderWidth={1}
-          borderColor={theme.colors.gray[200]}
+          borderColor={colors.panelBorder}
           shadowColor={theme.colors.gray[900]}
           shadowOffset={{
             width: 0,
@@ -545,7 +575,7 @@ const ListPanel: React.FC<ListPanelProps> = ({
               renderItem={renderItem}
               ItemSeparatorComponent={() => (
                 <StyledDivider
-                  backgroundColor={theme.colors.gray[100]}
+                  backgroundColor={colors.panelDivider}
                   height={1}
                 />
               )}
@@ -634,6 +664,7 @@ const Trigger: React.FC<{
   hasError: boolean;
   focusColor: string;
   leftIcon?: React.ReactNode;
+  colors: Required<StyledDropdownColors>;
 }> = ({
   triggerRef,
   onPress,
@@ -648,24 +679,25 @@ const Trigger: React.FC<{
   hasError,
   focusColor,
   leftIcon,
+  colors,
 }) => {
   const sz = SZ[size];
   const opacity = disabled ? 0.5 : 1;
-  const textColor = isPlaceholder ? placeholderColor : theme.colors.gray[800];
+  const textColor = isPlaceholder ? placeholderColor : colors.text;
 
   // Border colour logic
   const borderColor = hasError
     ? theme.colors.red[500]
     : open
       ? focusColor
-      : theme.colors.gray[200];
+      : colors.border;
 
   // Variant-specific styles
   const variantStyle: ViewStyle = (() => {
     switch (variant) {
       case "filled":
         return {
-          backgroundColor: open ? theme.colors.white : theme.colors.gray[100],
+          backgroundColor: colors.background,
           borderWidth: 0,
           borderBottomWidth: open ? 2 : 0,
           borderBottomColor: borderColor,
@@ -686,7 +718,7 @@ const Trigger: React.FC<{
         };
       default: // outline
         return {
-          backgroundColor: theme.colors.white,
+          backgroundColor: colors.background,
           borderWidth: open ? 1.5 : 1,
           borderColor: borderColor,
           borderRadius: 8,
@@ -810,6 +842,7 @@ export const StyledDropdown = (
     emptyText = "No options found",
     focusColor = theme.colors.indigo?.[500] ?? "#6366f1",
     groupBy,
+    colors: colorsProp,
     ref,
     ...rest
   }: StyledDropdownProps & { ref?: React.Ref<any> },
@@ -819,6 +852,18 @@ export const StyledDropdown = (
     const { triggerRef, pos, measure, updatePanelHeight } =
       useMeasure(maxHeight);
 
+    // PATCHED: resolved once here so both the closed Trigger and the open
+    // ListPanel share one themed palette instead of each hard-coding white.
+    const RC: Required<StyledDropdownColors> = {
+      background:      colorsProp?.background      ?? theme.colors.white,
+      border:           colorsProp?.border           ?? theme.colors.gray[200],
+      text:             colorsProp?.text             ?? theme.colors.gray[800],
+      panelBackground:  colorsProp?.panelBackground  ?? theme.colors.white,
+      panelBorder:      colorsProp?.panelBorder      ?? theme.colors.gray[200],
+      panelText:        colorsProp?.panelText        ?? theme.colors.gray[800],
+      panelDivider:     colorsProp?.panelDivider      ?? theme.colors.gray[100],
+    };
+
     const selected = value ?? internalValue;
     const hasError = error || !!errorMessage;
     const selectedItem = useMemo(
@@ -885,6 +930,7 @@ export const StyledDropdown = (
           hasError={hasError}
           focusColor={focusColor}
           leftIcon={leftIcon}
+          colors={RC}
         />
         {open && (
           <ListPanel
@@ -897,6 +943,7 @@ export const StyledDropdown = (
             multiSelect={false}
             searchable={searchable}
             searchPlaceholder={searchPlaceholder}
+            colors={RC}
             clearable={clearable}
             onClear={handleClear}
             emptyText={emptyText}
@@ -943,6 +990,7 @@ export const StyledMultiSelectDropdown = (
     separator = ", ",
     maxDisplay = 3,
     selectAll = false,
+    colors: colorsProp,
     ref,
     ...rest
   }: StyledMultiSelectDropdownProps & { ref?: React.Ref<any> },
@@ -951,6 +999,17 @@ export const StyledMultiSelectDropdown = (
     const [internalKeys, setInternalKeys] = useState<string[]>(
       defaultValue ?? [],
     );
+
+    // PATCHED: see StyledDropdown above — same shared-palette rationale.
+    const RC: Required<StyledDropdownColors> = {
+      background:      colorsProp?.background      ?? theme.colors.white,
+      border:           colorsProp?.border           ?? theme.colors.gray[200],
+      text:             colorsProp?.text             ?? theme.colors.gray[800],
+      panelBackground:  colorsProp?.panelBackground  ?? theme.colors.white,
+      panelBorder:      colorsProp?.panelBorder      ?? theme.colors.gray[200],
+      panelText:        colorsProp?.panelText        ?? theme.colors.gray[800],
+      panelDivider:     colorsProp?.panelDivider      ?? theme.colors.gray[100],
+    };
     const { triggerRef, pos, measure, updatePanelHeight } = useMeasure(maxHeight);
 
     const selectedKeys = useMemo(
@@ -1042,9 +1101,11 @@ export const StyledMultiSelectDropdown = (
           hasError={hasError}
           focusColor={focusColor}
           leftIcon={leftIcon}
+          colors={RC}
         />
         {open && (
           <ListPanel
+            colors={RC}
             data={data}
             selectedKeys={selectedKeys}
             onSelect={handleSelect}

package/src/input/index.tsx

@@ -126,7 +126,29 @@ export interface StyledTextInputProps
   // ── Pass-through style props (from original) ───────────────────────────
   fontSize?:          number
   fontWeight?:        TextStyle['fontWeight']
-  
+
+  // ── Theme override ──────────────────────────────────────────────────────
+  /**
+   * Resting-state surface colours. Lets a consumer theme this field (e.g.
+   * for dark mode) without fighting the focus/error border logic below —
+   * those stay computed internally and only fall back to `colors.border`
+   * when neither focused nor in an error state.
+   */
+  colors?:            StyledFieldColors
+
+}
+
+export interface StyledFieldColors {
+  /** Resting background of the input box. @default '#fff' (outline/filled) */
+  background?:  string
+  /** Resting border colour (overridden by focus/error). @default gray[200] */
+  border?:      string
+  /** Typed text colour. @default gray[800] */
+  text?:        string
+  /** Placeholder text colour. @default gray[300] */
+  placeholder?: string
+  /** Label text colour — `labelProps.color` still wins if also set. @default gray[700] */
+  label?:       string
 }
 
 // ─── Flat style-prop resolution ────────────────────────────────────────────────
@@ -138,7 +160,13 @@ export interface StyledTextInputProps
 // instead of through the shared HOC.
 const BASE_INPUT_STYLE: TextStyle = {
     borderColor: theme.colors.gray[200],
-    backgroundColor: theme.colors.gray[1],
+    // PATCHED: was theme.colors.gray[1] (white) — this style lands on the
+    // *inner* native TextInput, layered on top of the wrap View that
+    // `variantWrapStyle`/`FC.background` already colour. Nothing downstream
+    // ever overrode it, so every input rendered an opaque white rectangle
+    // regardless of the wrap's themed colour. Transparent lets the wrap's
+    // colour actually show through.
+    backgroundColor: 'transparent',
     flex: 1,
     color: theme.colors.gray[800],
     paddingHorizontal: 16,
@@ -212,7 +240,9 @@ function variantWrapStyle(
   switch (variant) {
     case 'filled':
       return {
-        backgroundColor: focused ? '#fff' : bg,
+        // PATCHED: used to hard-jump to '#fff' on focus, which fought any
+        // themed `bg` (e.g. a dark surface would flash white on tap).
+        backgroundColor: bg,
         borderWidth:     focused ? 1.5 : 0,
         borderColor:     bc,
       }
@@ -229,8 +259,11 @@ function variantWrapStyle(
         borderWidth:     0,
       }
     default: // outline
+      // PATCHED: used to hard-code '#fff', ignoring the `bg` param entirely
+      // — the one line responsible for every "white input on a dark
+      // screen" bug. `bg` now carries the caller's themed surface colour.
       return {
-        backgroundColor: '#fff',
+        backgroundColor: bg,
         borderWidth:     focused ? 1.5 : 1,
         borderColor:     bc,
       }
@@ -379,6 +412,7 @@ export const StyledTextInput = (
     borderColor:      borderColorProp,
     focusColor        = theme.colors.indigo?.[500] ?? '#6366f1',
     floatLabel        = false,
+    colors:           colorsProp,
 
     // Styles
     containerStyle,
@@ -443,8 +477,20 @@ export const StyledTextInput = (
     const hasError   = error || !!errorMessage
     const sz         = SIZE[size]
 
+    // PATCHED: `colors` lets a consumer theme the resting surface (e.g. for
+    // dark mode) without touching the focus/error logic below — those stay
+    // computed here and only fall back to `FC.border` when neither focused
+    // nor erroring, so a themed border never masks a validation error.
+    const FC = {
+      background:  colorsProp?.background  ?? (theme.colors.gray[50] ?? '#fafafa'),
+      border:       colorsProp?.border       ?? theme.colors.gray[200],
+      text:         colorsProp?.text         ?? theme.colors.gray[800],
+      placeholder:  colorsProp?.placeholder  ?? theme.colors.gray[300],
+      label:        colorsProp?.label        ?? theme.colors.gray[700],
+    }
+
     const resolvedBorderColor = borderColorProp
-      ?? (hasError ? theme.colors.red[500] : theme.colors.gray[200])
+      ?? (hasError ? theme.colors.red[500] : FC.border)
 
     const resolvedFocusColor = hasError
       ? theme.colors.red[500]
@@ -453,7 +499,7 @@ export const StyledTextInput = (
     const wrapStyle = variantWrapStyle(
       variant,
       resolvedBorderColor,
-      theme.colors.gray[50] ?? '#fafafa',
+      FC.background,
       focused,
       resolvedFocusColor,
     )
@@ -492,8 +538,8 @@ export const StyledTextInput = (
             <StyledText
               fontSize={theme.fontSize.small}
               fontWeight={theme.fontWeight.semiBold}
-              color={theme.colors.gray[700]}
-            
+              color={FC.label}
+
               marginBottom={6}
               {...labelProps}
             >
@@ -559,7 +605,7 @@ export const StyledTextInput = (
               onFocus={handleFocus}
               onBlur={handleBlur}
               placeholder={floatLabel ? undefined : placeholder}
-              placeholderTextColor={theme.colors.gray[300]}
+              placeholderTextColor={FC.placeholder}
               editable={editable && !loading}
               multiline={multiline}
               numberOfLines={numberOfLines}
@@ -574,7 +620,7 @@ export const StyledTextInput = (
                   paddingVertical:   sz.paddingV,
                   minHeight:         multiline ? sz.minHeight * 2 : sz.minHeight,
                   opacity:           editable && !loading ? 1 : 0.55,
-                  color:             theme.colors.gray[800],
+                  color:             FC.text,
                   textAlignVertical: multiline ? 'top' : 'center',
                 },
                 inputStyle,

package/src/page/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyledSafeAreaView, StyledSafeAreaViewProps } from '../safeAreaView';
-import { StatusBar, StatusBarProps } from 'react-native';
+import { StatusBar, StatusBarProps, Platform, useColorScheme } from 'react-native';
 import { StyledHeader } from '../header';
 
 interface StyledPageProps extends StyledSafeAreaViewProps {
@@ -19,10 +19,43 @@ interface StyledPageType {
     displayName?: string;
 }
 
-const Page = ({ children, statusBarProps, showStatusBar = true, statusBarStyle = 'dark-content', statusBarBackgroundColor, hideStatusBarOnAndroid, hideStatusBarOnIOS, translucentStatusBar, ...props }: React.PropsWithChildren<StyledPageProps>) => {
+// statusBarStyle used to default to a hardcoded 'dark-content' regardless of
+// the active theme — any screen rendered in dark mode that forgot to pass
+// its own statusBarStyle got dark (near-invisible) status bar icons on a
+// dark background. Falls back to the OS color scheme via useColorScheme()
+// instead, the same signal a theme-aware caller would use for its own
+// explicit statusBarStyle.
+//
+// translucentStatusBar now also defaults to true on Android specifically
+// (via Platform.select): with edge-to-edge unavoidable from targetSdk 35+,
+// StatusBar's `backgroundColor` prop is deprecated and silently ignored on
+// Android there, so a non-translucent bar left the *native* window
+// background (white by default) showing behind the status bar instead of
+// the page's own backgroundColor. iOS's status bar is always an overlay, so
+// it's left unaffected (translucentStatusBar stays undefined there unless
+// the caller sets it).
+const Page = ({
+    children, statusBarProps, showStatusBar = true,
+    statusBarStyle, statusBarBackgroundColor,
+    hideStatusBarOnAndroid, hideStatusBarOnIOS,
+    translucentStatusBar,
+    ...props
+}: React.PropsWithChildren<StyledPageProps>) => {
+    const colorScheme = useColorScheme();
+    const resolvedStatusBarStyle = statusBarStyle ?? (colorScheme === 'dark' ? 'light-content' : 'dark-content');
+    const resolvedTranslucent = translucentStatusBar ?? Platform.select({ android: true, default: undefined });
+
     return (
         <StyledSafeAreaView {...props}>
-            {showStatusBar && <StatusBar hidden={hideStatusBarOnAndroid || hideStatusBarOnIOS} barStyle={statusBarStyle} backgroundColor={statusBarBackgroundColor} translucent={translucentStatusBar} {...statusBarProps} />}
+            {showStatusBar && (
+                <StatusBar
+                    hidden={hideStatusBarOnAndroid || hideStatusBarOnIOS}
+                    barStyle={resolvedStatusBarStyle}
+                    backgroundColor={statusBarBackgroundColor}
+                    translucent={resolvedTranslucent}
+                    {...statusBarProps}
+                />
+            )}
             {children}
         </StyledSafeAreaView>
     )

package/src/pressable/index.tsx

@@ -2,16 +2,22 @@
 import { Pressable, PressableProps } from 'react-native';
 import { styled } from '../utiles/styled';
 import { ViewStyle } from '../utiles/viewStyleProps';
-import { viewStyleStringVariants } from '../utiles/viewStyleVariants';
+import { viewStyleVariants, viewStyleStringVariants } from '../utiles/viewStyleVariants';
 
 type StyledPressableProps = PressableProps & ViewStyle;
 
+// Same missing-viewStyleVariants gap as StyledSafeAreaView (see that file
+// for the full explanation): width/height/borderRadius/backgroundColor
+// passed to StyledPressable were silently dropped instead of styled —
+// e.g. an icon button built as <StyledPressable width={44} height={44}
+// borderRadius={22} backgroundColor={...}> rendered with none of that.
 const StyledPressable = styled<StyledPressableProps>(Pressable, {
     base: {
         position: 'relative',
     } as ViewStyle,
     variants: {
-        ...viewStyleStringVariants
+        ...viewStyleVariants,
+        ...viewStyleStringVariants,
     } as any
 });
 

package/src/safeAreaView/index.tsx

@@ -4,15 +4,25 @@ import {
 } from 'react-native-safe-area-context';
 import { styled } from '../utiles/styled';
 import { ViewStyleProps, ViewStyle } from '../utiles/viewStyleProps';
-import { viewStyleStringVariants } from '../utiles/viewStyleVariants';
+import { viewStyleVariants, viewStyleStringVariants } from '../utiles/viewStyleVariants';
 
 type StyledSafeAreaViewProps = SafeAreaViewProps & ViewStyleProps;
 
+// This only spread viewStyleStringVariants, so backgroundColor/padding/
+// margin/width/height/borderRadius/etc — everything defined in
+// viewStyleVariants instead — were never registered as variants here. They
+// fell through as raw unhandled props on SafeAreaView instead of landing in
+// `style`, so e.g. <StyledPage backgroundColor="#111"> silently did nothing.
+// Stack already spreads both and works correctly, which is what exposed the
+// gap: on Android specifically, a screen that relied on StyledPage's
+// backgroundColor to paint the safe area showed the native window's default
+// white background through instead.
 const StyledSafeAreaView = styled<StyledSafeAreaViewProps>(SafeAreaView, {
     base: {
     flex: 1,
     } as ViewStyle,
     variants: {
+      ...viewStyleVariants,
       ...viewStyleStringVariants,
     }
 });

package/src/utiles/styled.tsx

@@ -17,7 +17,16 @@ const styled = <P extends object>(
     Component: ComponentType<P>,
     { base, variants }: StyledOptions = {}
 ) => {
-    const StyledComponent = (props: P & { ref?: React.Ref<any> }) => {
+    // `ref` used to be handled via a plain function reading it off props —
+    // that only works under React 19's "ref as prop" model. Consumers still
+    // on React 18 (the current baseline for RN/Expo) get a plain function
+    // component that can never receive a ref at all (React strips it before
+    // the function runs), so any ref attached to a styled() component —
+    // including this library's own internals, e.g. StyledDropdown's Trigger
+    // measuring its own on-screen position — silently no-ops with a
+    // "Function components cannot be given refs" warning. forwardRef is the
+    // version that works on both React 18 and 19.
+    const StyledComponent = React.forwardRef<any, P>((props, ref) => {
         const styles: Style = { ...(base || {}) };
         const options = props as Record<string, any>;
         const incomingStyle = options.style;
@@ -39,8 +48,8 @@ const styled = <P extends object>(
             });
         }
 
-       return <Component {...(cleanProps as P)} style={[styles, incomingStyle]} />;
-    };
+       return <Component {...(cleanProps as P)} ref={ref} style={[styles, incomingStyle]} />;
+    });
 
     StyledComponent.displayName = `Styled(${
         typeof Component === "string" ? Component : Component.displayName ?? Component.name ?? "Component"