panelui-native 0.22.6 → 0.28.1

package/src/components/separator/index.tsx

@@ -9,16 +9,24 @@
  * ```tsx
  * <Separator />
  * <Separator orientation="vertical" />
+ * <Separator>or</Separator>
  * ```
  *
  * A vertical separator takes its length from the parent, so the parent needs a
  * height — inside a `flex-row` with `items-stretch`, or with an explicit `h-*`
  * on either the row or the separator itself. Without one it measures zero and
  * nothing draws.
+ *
+ * Passing children turns it into a *labelled* separator: the rule breaks around
+ * centred content — the "or continue with" divider in a sign-in form. Only the
+ * horizontal axis carries a label, because a stacked word is not a divider; a
+ * vertical separator ignores its children and stays a plain hairline.
  */
-import { forwardRef } from 'react';
+import { forwardRef, isValidElement, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { Text } from '../../primitives/text';
+import { cn } from '../../utils/cn';
 
 const separatorVariants = tv({
   base: 'bg-border',
@@ -58,40 +66,90 @@ export interface SeparatorProps
   /**
    * Whether the separator is only visual. A decorative separator is skipped by
    * screen readers; set false when the split itself carries meaning — between
-   * two groups of menu items, say — and it is announced instead.
+   * two groups of menu items, say — and it is announced instead. A labelled
+   * separator is never decorative: its label is content, so it is always read.
    */
   decorative?: boolean;
+  /**
+   * Optional label sitting in the break of a horizontal rule — the "or"
+   * between two sign-in paths. A bare string is wrapped in the muted label
+   * style; an element is rendered as-is. Ignored on the vertical axis, where a
+   * label is not a divider.
+   */
+  children?: ReactNode;
+  /** Styles the label text of a labelled separator. */
+  labelClassName?: string;
 }
 
 export const Separator = forwardRef<View, SeparatorProps>(
   (
     {
       className,
+      labelClassName,
       orientation = 'horizontal',
       variant,
       thickness,
       decorative = true,
+      children,
       style,
       ...props
     },
     ref
-  ) => (
-    <View
-      ref={ref}
-      // `role` rather than `accessibilityRole` — React Native's older role list
-      // has no separator, the ARIA-aligned one does.
-      role={decorative ? 'none' : 'separator'}
-      accessible={!decorative}
-      aria-orientation={decorative ? undefined : orientation}
-      className={separatorVariants({ orientation, variant, className })}
-      style={
-        thickness !== undefined
-          ? [orientation === 'horizontal' ? { height: thickness } : { width: thickness }, style]
-          : style
-      }
-      {...props}
-    />
-  )
+  ) => {
+    const hasLabel =
+      orientation === 'horizontal' && children != null && children !== false;
+
+    // Labelled: two rules flanking centred content. The label carries meaning,
+    // so the row announces itself as a separator regardless of `decorative`,
+    // and the flanking rules are hidden from the reader. Here `className`
+    // styles the wrapping row and `labelClassName` the text.
+    if (hasLabel) {
+      const rule = separatorVariants({ orientation, variant });
+      const ruleStyle =
+        thickness !== undefined ? { height: thickness } : undefined;
+
+      return (
+        <View
+          ref={ref}
+          role="separator"
+          aria-orientation="horizontal"
+          className={cn('w-full flex-row items-center gap-3', className)}
+          style={style}
+          {...props}
+        >
+          <View aria-hidden className={rule} style={[styles.flex, ruleStyle]} />
+          {isValidElement(children) ? (
+            children
+          ) : (
+            <Text size="xs" muted className={labelClassName}>
+              {children}
+            </Text>
+          )}
+          <View aria-hidden className={rule} style={[styles.flex, ruleStyle]} />
+        </View>
+      );
+    }
+
+    return (
+      <View
+        ref={ref}
+        // `role` rather than `accessibilityRole` — React Native's older role list
+        // has no separator, the ARIA-aligned one does.
+        role={decorative ? 'none' : 'separator'}
+        accessible={!decorative}
+        aria-orientation={decorative ? undefined : orientation}
+        className={separatorVariants({ orientation, variant, className })}
+        style={
+          thickness !== undefined
+            ? [orientation === 'horizontal' ? { height: thickness } : { width: thickness }, style]
+            : style
+        }
+        {...props}
+      />
+    );
+  }
 );
 
 Separator.displayName = 'Separator';
+
+const styles = { flex: { flex: 1 } } as const;

package/src/components/shimmer/index.tsx

@@ -34,6 +34,7 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { useCSSVariable } from 'uniwind';
+import { useDirectionSign } from '../../hooks/use-direction';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 
@@ -97,6 +98,8 @@ export function Shimmer({
   const [width, setWidth] = useState(0);
   const progress = useSharedValue(0);
   const reducedMotion = useReducedMotion();
+  // The sweep follows the reading direction; `reverse` then flips it again.
+  const sign = useDirectionSign();
 
   const themeMuted = useCSSVariable('--color-muted-foreground');
   const themeForeground = useCSSVariable('--color-foreground');
@@ -134,7 +137,13 @@ export function Shimmer({
     // Travel from fully off one edge to fully off the other.
     const from = -bandWidth;
     const to = width;
-    const x = reverse
+    /*
+     * The sweep follows the reading direction. It is standing in for text
+     * arriving, and text arrives from the side you start reading on — a band
+     * travelling against the script reads as something leaving.
+     */
+    const backwards = reverse !== (sign === -1);
+    const x = backwards
       ? to - progress.value * (to - from)
       : from + progress.value * (to - from);
     return { transform: [{ translateX: x }] };

package/src/components/slider/index.tsx

@@ -34,6 +34,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useDirectionSign } from '../../hooks/use-direction';
 import { getNativeUI } from '../../native';
 import { Text } from '../../primitives/text';
 import { selectionTick } from '../../utils/haptics';
@@ -60,8 +61,8 @@ const sliderVariants = tv({
     // The track is the full height of the control, so the thumb has somewhere
     // to sit rather than somewhere to stick out of.
     track: 'w-full justify-center rounded-full bg-muted',
-    fill: 'absolute bottom-0 left-0 top-0 rounded-full',
-    thumb: 'absolute left-0 rounded-full p-0.5',
+    fill: 'absolute bottom-0 start-0 top-0 rounded-full',
+    thumb: 'absolute start-0 rounded-full p-0.5',
     // `background`, not a per-colour on-token: the status foregrounds are the
     // darker text hues meant for soft fills, so a green-700 knob on a green-500
     // pill would barely show. The page background reads against every fill in
@@ -193,6 +194,9 @@ export const Slider = forwardRef<View, SliderProps>(
 
     // Measured on layout; the thumb travels across (trackWidth - thumbWidth) so
     // it stays inside the track at both ends.
+    // `1` left to right, `-1` right to left. Everything below that is a raw
+    // pixel offset rather than a laid-out box multiplies through it.
+    const sign = useDirectionSign();
     const trackWidth = useSharedValue(0);
     // Fraction 0..1 that drives the fill and the thumb, animated on the UI thread.
     const progress = useSharedValue(max > min ? (value - min) / (max - min) : 0);
@@ -253,7 +257,12 @@ export const Slider = forwardRef<View, SliderProps>(
       })
       .onUpdate((event) => {
         const travel = Math.max(trackWidth.value - thumbWidth, 1);
-        const delta = event.translationX / travel;
+        /*
+         * Yoga mirrors the track but not a translation: a finger moving right
+         * in a right-to-left subtree is moving *back* along the scale, and
+         * without the sign the thumb runs away from the finger.
+         */
+        const delta = (event.translationX * sign) / travel;
         const next = Math.min(Math.max(startProgress.value + delta, 0), 1);
         progress.value = next;
         runOnJS(commitFromProgress)(next, false);
@@ -268,7 +277,11 @@ export const Slider = forwardRef<View, SliderProps>(
       .maxDuration(250)
       .onEnd((event) => {
         const travel = Math.max(trackWidth.value - thumbWidth, 1);
-        const next = Math.min(Math.max((event.x - thumbWidth / 2) / travel, 0), 1);
+        // `event.x` is measured from the physical left edge either way, so
+        // right-to-left counts back from the far end of the track.
+        const along =
+          sign === 1 ? event.x : trackWidth.value - event.x;
+        const next = Math.min(Math.max((along - thumbWidth / 2) / travel, 0), 1);
         progress.value = withSpring(next, SPRING);
         runOnJS(commitFromProgress)(next, true);
       });
@@ -284,7 +297,9 @@ export const Slider = forwardRef<View, SliderProps>(
 
     const thumbStyle = useAnimatedStyle(() => {
       const travel = Math.max(trackWidth.value - thumbWidth, 0);
-      return { transform: [{ translateX: progress.value * travel }] };
+      // A transform is not laid out, so Yoga does not mirror it — the thumb
+      // has to travel the other way itself.
+      return { transform: [{ translateX: progress.value * travel * sign }] };
     });
 
     const knobStyle = useAnimatedStyle(() => ({

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';
@@ -53,7 +53,7 @@ const stepsVariants = tv({
       vertical: {
         root: 'flex-col',
         item: 'flex-col items-start',
-        separator: 'ml-3.5 h-8 w-0.5',
+        separator: 'ms-3.5 h-8 w-0.5',
       },
     },
     state: {
@@ -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/switch/index.tsx

@@ -7,6 +7,7 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 import { tv, type VariantProps } from 'tailwind-variants';
+import { useDirectionSign } from '../../hooks/use-direction';
 import { getNativeUI } from '../../native';
 import { selectionTick } from '../../utils/haptics';
 
@@ -68,6 +69,10 @@ export const Switch = forwardRef<View, SwitchProps>(
     ref
   ) => {
     const progress = useSharedValue(value ? 1 : 0);
+    // The track is mirrored by Yoga, but a transform is not — so "on" would
+    // otherwise still be on the right in a right-to-left subtree, which reads
+    // as the toggle running backwards.
+    const sign = useDirectionSign();
     const nativeUI = native ? getNativeUI() : null;
     const slots = switchVariants({ size, disabled: !!disabled });
 
@@ -77,7 +82,7 @@ export const Switch = forwardRef<View, SwitchProps>(
 
     const thumbStyle = useAnimatedStyle(() => ({
       transform: [
-        { translateX: interpolate(progress.value, [0, 1], [0, TRAVEL[size]]) },
+        { translateX: interpolate(progress.value, [0, 1], [0, TRAVEL[size] * sign]) },
       ],
     }));
 

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>