fluent-styles 1.62.1 → 1.62.3

package/src/tabBar/TabBar.tsx

@@ -12,11 +12,9 @@ import {
   Easing,
   ScrollView,
   StyleSheet,
-  Text,
-  TouchableOpacity,
   useColorScheme,
-  View,
 } from 'react-native'
+import { Stack, StyledText, StyledPressable } from 'fluent-styles'
 
 import {
   TAB_BAR_COLORS_DARK,
@@ -30,59 +28,45 @@ import {
 
 // ─── Badge ────────────────────────────────────────────────────────────────────
 
-const Badge: React.FC<{
-  value: number | string
-  color: string
-}> = ({ value, color }) => {
+const Badge: React.FC<{ value: number | string; color: string }> = ({ value, color }) => {
   const isDot = value === ''
   return (
-    <View style={[badge.wrap, isDot && badge.dot_wrap]}>
+    <Stack
+      position="absolute"
+      top={-4}
+      right={isDot ? -4 : -8}
+      minWidth={isDot ? 8 : 16}
+      height={isDot ? 8 : 16}
+      borderRadius={isDot ? 4 : 8}
+      alignItems="center"
+      justifyContent="center"
+      paddingHorizontal={isDot ? 0 : 3}
+      backgroundColor={isDot ? undefined : '#ef4444'}
+    >
       {isDot ? (
-        <View style={[badge.dot, { backgroundColor: color }]} />
+        <Stack width={6} height={6} borderRadius={3} backgroundColor={color} />
       ) : (
-        <Text style={[badge.text, { color }]}>
+        <StyledText fontSize={9} fontWeight="700" color={color}>
           {typeof value === 'number' && value > 99 ? '99+' : value}
-        </Text>
+        </StyledText>
       )}
-    </View>
+    </Stack>
   )
 }
 
-const badge = StyleSheet.create({
-  wrap: {
-    position:   'absolute',
-    top:        -4,
-    right:      -8,
-    minWidth:   16,
-    height:     16,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 3,
-    backgroundColor: '#ef4444',
-  },
-  dot_wrap: {
-    top:    0,
-    right: -4,
-    minWidth: 8,
-    height:   8,
-    borderRadius: 4,
-    padding: 0,
-  },
-  dot: { width: 6, height: 6, borderRadius: 3 },
-  text: { fontSize: 9, fontWeight: '700', color: '#fff' },
-})
-
 // ─── Indicator ────────────────────────────────────────────────────────────────
+// NOTE: Animated.View is kept here intentionally — fluent-styles Stack does not
+// accept Animated values for left/width, which are required for the sliding
+// animation. This is the only place native Animated.View remains.
 
 interface IndicatorProps {
-  type:      IndicatorStyle
-  left:      Animated.Value
-  width:     Animated.Value
-  height:    number
-  color:     string
-  radius?:   number
-  visible:   boolean
+  type:    IndicatorStyle
+  left:    Animated.Value
+  width:   Animated.Value
+  height:  number
+  color:   string
+  radius?: number
+  visible: boolean
 }
 
 const Indicator: React.FC<IndicatorProps> = ({
@@ -100,7 +84,7 @@ const Indicator: React.FC<IndicatorProps> = ({
             width,
             backgroundColor: color,
             borderRadius:    radius ?? 999,
-            opacity:         0.15,
+            // FIX: removed opacity: 0.15 — pill is now fully opaque
           },
         ]}
       />
@@ -123,7 +107,7 @@ const Indicator: React.FC<IndicatorProps> = ({
     )
   }
 
-  // line (default)
+  // line
   return (
     <Animated.View
       style={{
@@ -141,32 +125,21 @@ const Indicator: React.FC<IndicatorProps> = ({
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-function resolveIndicatorHeight(
-  type: IndicatorStyle | false,
-  explicit?: number,
-): number {
+function resolveIndicatorHeight(type: IndicatorStyle | false, explicit?: number): number {
   if (explicit !== undefined) return explicit
   if (type === 'line') return 3
   if (type === 'dot')  return 6
   return 3
 }
 
-function resolveBarHeight(
-  hasIcons:   boolean,
-  hasIndicator: boolean,
-  explicit?:  number,
-): number {
+function resolveBarHeight(hasIcons: boolean, hasIndicator: boolean, explicit?: number): number {
   if (explicit !== undefined) return explicit
-  if (hasIcons)       return 52
-  if (hasIndicator)   return 44
+  if (hasIcons)     return 52
+  if (hasIndicator) return 44
   return 48
 }
 
-function getVariantTabStyle(
-  variant:  TabBarVariant,
-  isActive: boolean,
-  colors:   TabBarColors,
-) {
+function getVariantChipProps(variant: TabBarVariant, isActive: boolean, colors: TabBarColors) {
   if (variant === 'card' || variant === 'solid') {
     return isActive
       ? { backgroundColor: colors.activeChipBg, borderRadius: 8 }
@@ -183,27 +156,23 @@ function TabBarInner<T extends TabValue>(props: TabBarProps<T>) {
     value: controlledValue,
     defaultValue,
     onChange,
-
-    indicator        = false,
+    indicator            = false,
     indicatorWidth,
     indicatorHeight,
     indicatorColor,
     indicatorRadius,
-
-    tabAlign         = 'center',
+    tabAlign             = 'center',
     height,
-    variant          = 'default',
-    labelBulge       = 1,
-    showBorder       = false,
+    variant              = 'default',
+    labelBulge           = 1,
+    showBorder           = false,
     tabPaddingHorizontal = 12,
-    iconLabelGap     = 4,
-    fontSize         = 14,
-    iconFontSize     = 11,
-
+    iconLabelGap         = 4,
+    fontSize             = 14,
+    iconFontSize         = 11,
     textColor,
     activeTextColor,
     colors: colorOverrides,
-
     style,
     contentStyle,
     tabStyle,
@@ -212,25 +181,19 @@ function TabBarInner<T extends TabValue>(props: TabBarProps<T>) {
 
   // ── Colours ──────────────────────────────────────────────────────────────
   const scheme = useColorScheme()
-  const baseColors: TabBarColors = scheme === 'dark'
-    ? TAB_BAR_COLORS_DARK
-    : TAB_BAR_COLORS_LIGHT
-
+  const baseColors: TabBarColors = scheme === 'dark' ? TAB_BAR_COLORS_DARK : TAB_BAR_COLORS_LIGHT
   const colors: TabBarColors = useMemo(
     () => colorOverrides ? { ...baseColors, ...colorOverrides } : baseColors,
     [baseColors, colorOverrides],
   )
-
-  const resolvedTextColor       = (textColor       as string) ?? colors.text
-  const resolvedActiveTextColor = (activeTextColor  as string) ?? colors.activeText
-  const resolvedIndicatorColor  = (indicatorColor   as string) ?? colors.indicator
+  const resolvedTextColor       = (textColor      as string) ?? colors.text
+  const resolvedActiveTextColor = (activeTextColor as string) ?? colors.activeText
+  const resolvedIndicatorColor  = (indicatorColor  as string) ?? colors.indicator
 
   // ── State ────────────────────────────────────────────────────────────────
   const isControlled = controlledValue !== undefined
-  const [localValue, setLocalValue] = useState<T>(
-    defaultValue ?? options[0]?.value,
-  )
-  const active = isControlled ? controlledValue! : localValue
+  const [localValue, setLocalValue] = useState<T>(defaultValue ?? options[0]?.value)
+  const active    = isControlled ? controlledValue! : localValue
   const activeRef = useRef(active)
   activeRef.current = active
 
@@ -241,13 +204,12 @@ function TabBarInner<T extends TabValue>(props: TabBarProps<T>) {
   }, [isControlled, onChange])
 
   // ── Layout measurement ────────────────────────────────────────────────────
-  const tabCount   = options.length
-  const layouts    = useRef<{ tab?: LayoutRectangle; text?: LayoutRectangle }[]>(
+  const tabCount = options.length
+  const layouts  = useRef<{ tab?: LayoutRectangle; text?: LayoutRectangle }[]>(
     Array.from({ length: tabCount }, () => ({})),
   )
   const [layoutReady, setLayoutReady] = useState(false)
 
-  // Reset when options change
   const prevOptionsLen = useRef(tabCount)
   if (prevOptionsLen.current !== tabCount) {
     prevOptionsLen.current = tabCount
@@ -256,11 +218,10 @@ function TabBarInner<T extends TabValue>(props: TabBarProps<T>) {
   }
 
   const checkReady = useCallback(() => {
-    const allDone = layouts.current.every(l => l.tab && l.text)
-    if (allDone) setLayoutReady(true)
+    if (layouts.current.every(l => l.tab && l.text)) setLayoutReady(true)
   }, [])
 
-  const onLayoutTab = useCallback((i: number) => (e: LayoutChangeEvent) => {
+  const onLayoutTab  = useCallback((i: number) => (e: LayoutChangeEvent) => {
     layouts.current[i] = { ...layouts.current[i], tab: e.nativeEvent.layout }
     checkReady()
   }, [checkReady])
@@ -274,52 +235,27 @@ function TabBarInner<T extends TabValue>(props: TabBarProps<T>) {
   const indLeft  = useRef(new Animated.Value(0)).current
   const indWidth = useRef(new Animated.Value(0)).current
   const indH     = resolveIndicatorHeight(indicator, indicatorHeight)
-
   const scrollRef   = useRef<ScrollView>(null)
   const barWidthRef = useRef(0)
 
   const navigateTo = useCallback((idx: number) => {
     const layout = layouts.current[idx]
     if (!layout.tab || !layout.text) return
-
-    // Resolve indicator width
-    const useTextWidth = indicatorWidth === undefined
-    const useTabWidth  = indicatorWidth === 0
-    const iw = useTextWidth
+    const iw = indicatorWidth === undefined
       ? (indicator === 'pill' ? layout.tab.width : layout.text.width)
-      : useTabWidth
+      : indicatorWidth === 0
       ? layout.tab.width
       : indicatorWidth!
-
-    // Center the indicator within the tab
     const il = layout.tab.x + (layout.tab.width - iw) / 2
-
     Animated.parallel([
-      Animated.timing(indLeft, {
-        toValue:         il,
-        duration:        220,
-        easing:          Easing.out(Easing.cubic),
-        useNativeDriver: false,
-      }),
-      Animated.timing(indWidth, {
-        toValue:         iw,
-        duration:        220,
-        easing:          Easing.out(Easing.cubic),
-        useNativeDriver: false,
-      }),
+      Animated.timing(indLeft,  { toValue: il, duration: 220, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
+      Animated.timing(indWidth, { toValue: iw, duration: 220, easing: Easing.out(Easing.cubic), useNativeDriver: false }),
     ]).start()
-
-    // Auto-scroll horizontal bar
     if (tabAlign === 'scroll') {
-      const tabCenter = layout.tab.x + layout.tab.width / 2
-      scrollRef.current?.scrollTo({
-        x:        tabCenter - barWidthRef.current / 2,
-        animated: true,
-      })
+      scrollRef.current?.scrollTo({ x: layout.tab.x + layout.tab.width / 2 - barWidthRef.current / 2, animated: true })
     }
   }, [indLeft, indWidth, indicatorWidth, indicator, tabAlign])
 
-  // Navigate when active tab or layout readiness changes
   useEffect(() => {
     if (!indicator || !layoutReady) return
     const idx = options.findIndex(o => o.value === active)
@@ -329,175 +265,126 @@ function TabBarInner<T extends TabValue>(props: TabBarProps<T>) {
   // ── Dimensions ───────────────────────────────────────────────────────────
   const hasIcons  = options.some(o => !!o.iconRender)
   const barHeight = resolveBarHeight(hasIcons, !!indicator, height)
-
-  const bulgeFactor = typeof labelBulge === 'boolean'
-    ? (labelBulge ? 1.2 : 1)
-    : labelBulge
+  const bulgeFactor = typeof labelBulge === 'boolean' ? (labelBulge ? 1.2 : 1) : labelBulge
 
   // ── Render each tab ──────────────────────────────────────────────────────
   const renderTab = (item: (typeof options)[number], index: number) => {
     const isActive   = item.value === active
     const isDisabled = item.disabled ?? false
 
+    // FIX: pill/line/dot use resolvedActiveTextColor (label sits on indicator bg)
+    // solid/card use activeChipText (label sits on per-tab chip bg)
     const labelColor = isActive
       ? (variant === 'solid' || variant === 'card') ? colors.activeChipText : resolvedActiveTextColor
       : isDisabled ? colors.disabled
       : resolvedTextColor
 
-    const chipStyle = getVariantTabStyle(variant, isActive, colors)
+    const chipProps = getVariantChipProps(variant, isActive, colors)
 
     return (
-      <TouchableOpacity
+      <StyledPressable
         key={String(item.value)}
-        activeOpacity={isDisabled ? 1 : 0.7}
         disabled={isDisabled}
         onPress={() => handlePress(item.value)}
         onLayout={onLayoutTab(index)}
-        style={[
-          S.tab,
-          tabAlign === 'center' && S.tab_equal,
-          { paddingHorizontal: tabPaddingHorizontal },
-          hasIcons && { paddingVertical: 6 },
-          chipStyle,
-          tabStyle,
-        ]}
+        alignItems="center"
+        justifyContent="center"
+        height="100%"
+        flexDirection="column"
+        paddingHorizontal={tabPaddingHorizontal}
+        paddingVertical={hasIcons ? 6 : undefined}
+        {...(tabAlign === 'center' ? { flex: 1 } : {})}
+        {...chipProps}
+        {...(tabStyle as object)}
         accessibilityRole="tab"
         accessibilityState={{ selected: isActive, disabled: isDisabled }}
       >
-        {/* Icon */}
         {item.iconRender?.(
           isActive ? resolvedActiveTextColor : resolvedTextColor,
           isActive,
         )}
 
-        {/* Label + badge row */}
-        <View style={S.label_wrap} onLayout={onLayoutText(index)}>
-          <Text
-            style={[
-              S.label,
-              {
-                fontSize:   hasIcons ? iconFontSize : fontSize,
-                color:      labelColor,
-                fontWeight: isActive ? '600' : '400',
-                marginTop:  item.iconRender ? iconLabelGap : 0,
-              },
-              isActive && bulgeFactor !== 1 && {
-                transform: [
-                  { scaleX: bulgeFactor },
-                  { scaleY: bulgeFactor },
-                ],
-              },
-            ]}
+        <Stack
+          position="relative"
+          alignItems="center"
+          onLayout={onLayoutText(index)}
+        >
+          <StyledText
+            fontSize={hasIcons ? iconFontSize : fontSize}
+            color={labelColor}
+            fontWeight={isActive ? '600' : '400'}
+            textAlign="center"
+            marginTop={item.iconRender ? iconLabelGap : 0}
+            style={isActive && bulgeFactor !== 1
+              ? { transform: [{ scaleX: bulgeFactor }, { scaleY: bulgeFactor }] }
+              : undefined}
           >
             {item.label}
-          </Text>
+          </StyledText>
 
-          {/* Badge */}
           {item.badge !== undefined && (
             <Badge value={item.badge} color={colors.badge} />
           )}
-        </View>
-      </TouchableOpacity>
+        </Stack>
+      </StyledPressable>
     )
   }
 
   // ── Content ──────────────────────────────────────────────────────────────
-  const tabs = options.map(renderTab)
-
   const indicatorEl = indicator ? (
     <Indicator
-      type={indicator}
-      left={indLeft}
-      width={indWidth}
-      height={indH}
-      color={resolvedIndicatorColor}
-      radius={indicatorRadius}
-      visible={layoutReady}
+      type={indicator} left={indLeft} width={indWidth}
+      height={indH} color={resolvedIndicatorColor}
+      radius={indicatorRadius} visible={layoutReady}
     />
   ) : null
 
-  // ── Bar wrapper ──────────────────────────────────────────────────────────
+  const borderProps = (showBorder || variant === 'underline')
+    ? { borderTopWidth: StyleSheet.hairlineWidth, borderTopColor: colors.border }
+    : {}
+
   return (
-    <View
+    <Stack
       testID={testID}
-      style={[
-        S.bar,
-        {
-          height:          barHeight,
-          backgroundColor: colors.background,
-          borderTopWidth:  showBorder || variant === 'underline'
-            ? StyleSheet.hairlineWidth
-            : 0,
-          borderTopColor:  colors.border,
-        },
-        style,
-      ]}
+      flexDirection="row"
+      overflow="hidden"
+      height={barHeight}
+      backgroundColor={colors.background}
+      {...borderProps}
+      {...(style as object)}
     >
       {tabAlign === 'center' ? (
-        <View style={[S.center_content, contentStyle]}>
+        <Stack
+          flex={1}
+          flexDirection="row"
+          alignItems="center"
+          position="relative"
+          {...(contentStyle as object)}
+        >
           {indicatorEl}
-          {tabs}
-        </View>
+          {options.map(renderTab)}
+        </Stack>
       ) : (
         <ScrollView
           ref={scrollRef}
           horizontal
           bounces={false}
           showsHorizontalScrollIndicator={false}
-          style={S.scroll}
-          contentContainerStyle={[S.scroll_content, contentStyle]}
+          style={{ flex: 1 }}
+          contentContainerStyle={[
+            { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 4, position: 'relative', flexGrow: 1 },
+            contentStyle,
+          ]}
           onLayout={e => { barWidthRef.current = e.nativeEvent.layout.width }}
         >
           {indicatorEl}
-          {tabs}
+          {options.map(renderTab)}
         </ScrollView>
       )}
-    </View>
+    </Stack>
   )
 }
 
-// ── Static styles ─────────────────────────────────────────────────────────────
-
-const S = StyleSheet.create({
-  bar: {
-    flexDirection: 'row',
-    overflow:      'hidden',
-  },
-  center_content: {
-    flex:          1,
-    flexDirection: 'row',
-    alignItems:    'center',
-    position:      'relative',
-  },
-  scroll: {
-    flex: 1,
-  },
-  scroll_content: {
-    flexDirection: 'row',
-    alignItems:    'center',
-    paddingHorizontal: 4,
-    position:      'relative',
-    flexGrow:      1,
-  },
-  tab: {
-    alignItems:     'center',
-    justifyContent: 'center',
-    height:         '100%',
-    flexDirection:  'column',
-  },
-  tab_equal: {
-    flex: 1,
-  },
-  label_wrap: {
-    position:   'relative',
-    alignItems: 'center',
-  },
-  label: {
-    textAlign:    'center',
-    includeFontPadding: false,
-  },
-})
-
 export const TabBar = memo(TabBarInner) as <T extends TabValue>(
   p: TabBarProps<T>,
-) => React.JSX.Element
+) => React.JSX.Element

package/src/utiles/styled.tsx

@@ -1,5 +1,5 @@
 
-import React, { forwardRef, ComponentType } from "react";
+import React, { ComponentType, Ref, forwardRef } from "react";
 import { ViewStyle, TextStyle, ImageStyle } from "react-native";
 
 type Style = ViewStyle | TextStyle | ImageStyle;
@@ -13,13 +13,15 @@ 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 = {}
 ) => {
-    return forwardRef<any, P>((props, ref) => {
+    function buildStyles(options: Record<string, any>): Style {
         const styles: Style = { ...(base || {}) };
-        const options = props as Record<string, any>;
 
         if (variants) {
             Object.keys(variants).forEach((category) => {
@@ -28,9 +30,7 @@ const styled = <P extends object>(
 
                 if (typeof variantValue === "function") {
                     const style = variantValue(variantSelected, options);
-                    if (style) {
-                        Object.assign(styles, style);
-                    }
+                    if (style) Object.assign(styles, style);
                 } else if (variantValue && variantValue[variantSelected]) {
                     const value = variantValue[variantSelected];
                     Object.assign(
@@ -41,6 +41,22 @@ const styled = <P extends object>(
             });
         }
 
+        return 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;
+    }
+
+    // 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} />;
     });
 };