panelui-native 0.25.0 → 0.28.1

package/src/components/select/index.tsx

@@ -51,7 +51,8 @@ import { useCSSVariable } from 'uniwind';
 import { CheckIcon, ChevronDownIcon } from '../../icons';
 import { getNativeUI } from '../../native';
 import { Portal } from '../../primitives/portal';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
+import { useBackHandler } from '../../hooks/use-back-handler';
 import { BottomSheet } from '../bottom-sheet';
 
 const selectVariants = tv({
@@ -223,6 +224,11 @@ function SelectRoot({
     onOpenChange?.(false);
   }, [chevron, onOpenChange]);
 
+  // An open overlay list catches the Android back button, closing itself
+  // instead of popping the screen behind it. The `sheet` presentation gets the
+  // same behaviour from its BottomSheet; the native picker owns its own back.
+  useBackHandler(open && presentation === 'overlay' && !nativeUI, close);
+
   const toggle = useCallback(() => {
     if (open) {
       close();
@@ -333,7 +339,7 @@ function SelectRoot({
                 </Text>
               ) : null}
               <ScrollView bounces={false} className="max-h-96">
-                <View className="gap-1 pb-2">{children}</View>
+                <View className="gap-1 pb-2">{textChildren(children)}</View>
               </ScrollView>
             </SelectContext.Provider>
           </BottomSheet.Content>
@@ -353,7 +359,7 @@ function SelectRoot({
               exiting={FadeOut.duration(120)}
               className={slots.list()}
             >
-              {children}
+              {textChildren(children)}
             </Animated.View>
           ) : null}
         </View>
@@ -410,7 +416,7 @@ function SelectRoot({
               className={slots.list()}
             >
               <ScrollView bounces={false} showsVerticalScrollIndicator={false}>
-                {children}
+                {textChildren(children)}
               </ScrollView>
             </Animated.View>
           </SelectContext.Provider>

package/src/components/steps/index.tsx

@@ -26,7 +26,7 @@ import { Pressable, View, type Text as RNText, type ViewProps } from 'react-nati
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { CheckIcon } from '../../icons';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { Spinner } from '../spinner';
 
 export type StepState = 'active' | 'completed' | 'inactive' | 'loading';
@@ -163,7 +163,7 @@ const StepsRoot = forwardRef<View, StepsProps>(
     return (
       <StepsContext.Provider value={context}>
         <View ref={ref} className={root({ className })} {...props}>
-          {children}
+          {textChildren(children)}
         </View>
       </StepsContext.Provider>
     );
@@ -210,7 +210,7 @@ const StepsItem = forwardRef<View, StepsItemProps>(
     return (
       <StepItemContext.Provider value={context}>
         <View ref={ref} className={item({ className })} {...props}>
-          {children}
+          {textChildren(children)}
         </View>
       </StepItemContext.Provider>
     );
@@ -240,7 +240,7 @@ const StepsTrigger = forwardRef<View, StepsTriggerProps>(
         className={trigger({ className })}
         {...props}
       >
-        {children}
+        {textChildren(children)}
       </Pressable>
     );
   }

package/src/components/tabs/index.tsx

@@ -40,7 +40,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
 const SPRING = { damping: 24, stiffness: 300, mass: 0.7 } as const;
@@ -197,7 +197,7 @@ function TabsRoot({
   return (
     <TabsContext.Provider value={context}>
       <View className={cn('gap-3', className)} {...props}>
-        {children}
+        {textChildren(children)}
       </View>
     </TabsContext.Provider>
   );
@@ -274,7 +274,7 @@ function TabsList({ className, scrollable = false, children, ...props }: TabsLis
   const row = (
     <View accessibilityRole="tablist" className={cn(list(), className)} {...props}>
       <TabsIndicator />
-      {children}
+      {textChildren(children)}
     </View>
   );
 
@@ -341,13 +341,11 @@ function TabsTrigger({
       className={cn(slots.trigger(), (icon || badge) && 'flex-row gap-1.5', className)}
     >
       {icon}
-      {typeof children === 'string' ? (
+      {textChildren(children, (text) => (
         <Text size="sm" weight="medium" className={slots.label()}>
-          {children}
+          {text}
         </Text>
-      ) : (
-        children
-      )}
+      ))}
       {badge}
     </Pressable>
   );
@@ -384,7 +382,7 @@ function TabsContent({ className, value, children, style, ...props }: TabsConten
       className={className}
       {...props}
     >
-      {children}
+      {textChildren(children)}
     </Animated.View>
   );
 }

package/src/components/timeline/index.tsx

@@ -43,7 +43,7 @@ import { View, type Text as RNText, type ViewProps } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 
 export type TimelineVariant = 'dot' | 'icon' | 'numbered' | 'card' | 'compact';
 /** Semantic colour for a single event, independent of progress. */
@@ -209,7 +209,7 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
     return (
       <TimelineContext.Provider value={context}>
         <View ref={ref} className={root({ className })} {...props}>
-          {children}
+          {textChildren(children)}
         </View>
       </TimelineContext.Provider>
     );
@@ -247,7 +247,7 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     return (
       <TimelineItemContext.Provider value={context}>
         <View ref={ref} className={item({ className })} {...props}>
-          {children}
+          {textChildren(children)}
         </View>
       </TimelineItemContext.Provider>
     );
@@ -357,7 +357,7 @@ const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
 
     return (
       <View ref={ref} className={body({ className })} {...props}>
-        {variant === 'card' ? <View className={panel()}>{children}</View> : children}
+        {variant === 'card' ? <View className={panel()}>{textChildren(children)}</View> : children}
       </View>
     );
   }

package/src/components/toast/index.tsx

@@ -39,7 +39,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { Portal } from '../../primitives/portal';
-import { Text, type TextProps } from '../../primitives/text';
+import { Text, type TextProps, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XIcon } from '../../icons';
 import { Button, type ButtonProps } from '../button';
@@ -171,7 +171,7 @@ const ToastRoot = ({ className, variant = 'default', onHide, children, ...props
   return (
     <ToastContext.Provider value={context}>
       <View accessibilityRole="alert" accessibilityLiveRegion="polite" className={root({ className })} {...props}>
-        {children}
+        {textChildren(children)}
       </View>
     </ToastContext.Provider>
   );

package/src/components/toggle-button/index.tsx

@@ -42,7 +42,7 @@ import {
   AnimatedPressable,
   type AnimatedPressableProps,
 } from '../../primitives/animated-pressable';
-import { Text } from '../../primitives/text';
+import { Text, textChildren } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
 
@@ -196,7 +196,7 @@ const ToggleButtonGroup = forwardRef<View, ToggleButtonGroupProps>(
           className={cn('flex-row items-center gap-1.5', className)}
           {...props}
         >
-          {children}
+          {textChildren(children)}
         </View>
       </ToggleGroupContext.Provider>
     );
@@ -347,13 +347,11 @@ const ToggleButtonRoot = forwardRef<View, ToggleButtonProps>(
             )}
             {...props}
           >
-            {typeof children === 'string' ? (
+            {textChildren(children, (text) => (
               <Text className={slots.label({ className: labelClassName })}>
-                {children}
+                {text}
               </Text>
-            ) : (
-              children
-            )}
+            ))}
           </AnimatedPressable>
         </IconColorProvider>
       </ToggleStateContext.Provider>