panelui-native 0.68.0 → 0.73.0

package/src/components/color-picker/index.tsx

@@ -71,6 +71,7 @@ import {
   View,
   type AccessibilityActionEvent,
   type LayoutChangeEvent,
+  type ViewStyle,
 } from 'react-native';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -663,8 +664,8 @@ interface ChannelTrackProps {
   /** What fills the track — a hue ramp, or a masked translucency ramp. */
   children: ReactNode;
   gesture: ReturnType<typeof Gesture.Race>;
-  thumbStyle: ReturnType<typeof useAnimatedStyle>;
-  thumbFillStyle: ReturnType<typeof useAnimatedStyle>;
+  thumbStyle: ReturnType<typeof useAnimatedStyle<ViewStyle>>;
+  thumbFillStyle: ReturnType<typeof useAnimatedStyle<ViewStyle>>;
   onLayout: (event: LayoutChangeEvent) => void;
   size: ColorPickerSize;
   className?: string;

package/src/components/fab/index.tsx

@@ -85,7 +85,10 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { useBackHandler } from '../../hooks/use-back-handler';
-import { AnimatedPressable } from '../../primitives/animated-pressable';
+import {
+  AnimatedPressable,
+  type AnimatedPressableProps,
+} from '../../primitives/animated-pressable';
 import { Scrim } from '../../primitives/scrim';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
@@ -180,7 +183,9 @@ function anchor(placement: FabPlacement, offset: number) {
  * Fab
  * -------------------------------------------------------------------------- */
 
-export interface FabProps extends Omit<ViewProps, 'children'>, FabVariantProps {
+export interface FabProps
+  extends Omit<AnimatedPressableProps, 'children' | 'style' | 'disabled'>,
+    Omit<FabVariantProps, 'disabled'> {
   className?: string;
   /** The glyph. Sized by you — this is the one thing that should not guess. */
   icon?: ReactNode;
@@ -201,7 +206,8 @@ export interface FabProps extends Omit<ViewProps, 'children'>, FabVariantProps {
   placement?: FabPlacement;
   /** Distance from the edges when `placement` is set, in points. */
   offset?: number;
-  onPress?: () => void;
+  /** Placement-aware view style. Press-state styling belongs in `className`. */
+  style?: ViewProps['style'];
   disabled?: boolean;
   /**
    * A tick on press. Off by default — needs the optional `expo-haptics`, and
@@ -231,33 +237,37 @@ const FabRoot = forwardRef<View, FabProps>(
     },
     ref
   ) => {
+    const isDisabled = Boolean(disabled);
     const { root, label } = fabVariants({
       size,
       variant,
       extended: extended && !!children,
-      disabled,
+      disabled: isDisabled,
     });
 
     const themed = useCSSVariable(CONTENT_COLOR_VAR[variant ?? 'primary']);
     const contentColor =
       typeof themed === 'string' ? themed : undefined;
 
-    const handlePress = useCallback(() => {
-      if (haptics) selectionTick();
-      onPress?.();
-    }, [haptics, onPress]);
+    const handlePress = useCallback<NonNullable<AnimatedPressableProps['onPress']>>(
+      (event) => {
+        if (haptics) selectionTick();
+        onPress?.(event);
+      },
+      [haptics, onPress]
+    );
 
     return (
       <IconColorProvider color={contentColor}>
         <AnimatedPressable
           ref={ref}
+          {...props}
           accessibilityRole="button"
-          accessibilityState={{ disabled }}
-          disabled={disabled}
+          accessibilityState={{ disabled: isDisabled }}
+          disabled={isDisabled}
           onPress={handlePress}
           className={root({ className })}
           style={[placement ? anchor(placement, offset) : null, style]}
-          {...props}
         >
           {icon}
           {extended && children ? (

package/src/components/flow/index.tsx

@@ -31,6 +31,10 @@
  * the edges are ordinary elements and cost a render per drag frame. That is a
  * real cost and it is the right trade.
  *
+ * An `animated` edge keeps that arrangement and animates the one property the
+ * geometry does not own: the dash offset. Its `d` still arrives by re-render,
+ * so a dragged node reshapes the edge while the dashes keep marching.
+ *
  * JavaScript is told a drag has finished through `onNodeDragEnd`. Positions
  * are otherwise yours to leave alone: pass `position` once and the canvas
  * takes it from there, or keep it in state and pass it back to drive nodes
@@ -65,10 +69,12 @@ import {
 import { useCSSVariable } from 'uniwind';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
+  cancelAnimation,
   runOnJS,
   useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
+  useReducedMotion,
   useSharedValue,
   withRepeat,
   withTiming,
@@ -159,6 +165,15 @@ const CONNECT_RADIUS = 44;
  */
 const GROUP_EDGE_STANDOFF = 5;
 
+/** Dash and gap length for a broken edge, in graph points. */
+const EDGE_DASH = 6;
+
+/**
+ * How long an animated edge takes to travel one dash-and-gap. Slow enough to
+ * read as flow rather than flicker, fast enough to look live.
+ */
+const EDGE_MARCH_DURATION = 600;
+
 export type FlowEdgeVariant = 'bezier' | 'smoothstep' | 'step' | 'straight';
 
 export interface FlowViewport {
@@ -1239,6 +1254,7 @@ function FlowNode({
     <FlowNodeContext.Provider value={id}>
       <GestureDetector gesture={gesture}>
         <Animated.View
+          {...props}
           collapsable={false}
           onLayout={onLayout}
           style={[{ position: 'absolute', top: 0, left: 0 }, style]}
@@ -1252,7 +1268,6 @@ function FlowNode({
           accessibilityState={{ selected }}
           accessibilityActions={nodeActions}
           onAccessibilityAction={handleAccessibilityAction}
-          {...props}
         >
           {textChildren(children)}
         </Animated.View>
@@ -1496,7 +1511,9 @@ export interface FlowEdgeProps {
   variant?: FlowEdgeVariant;
   /**
    * Mark the edge as carrying something — a request, a build, a dependency
-   * that is live rather than declared. Draws it dashed.
+   * that is live rather than declared. Draws it dashed and marches the dashes
+   * from source to target. Falls back to a still dashed edge when the
+   * operating system is set to reduce motion.
    */
   animated?: boolean;
   /** Draw it broken rather than solid. */
@@ -1551,6 +1568,63 @@ function FlowEdge(props: FlowEdgeProps) {
   return null;
 }
 
+/**
+ * A dashed edge whose dashes travel from source to target.
+ *
+ * The dash offset is the only animated property here, and the geometry is
+ * deliberately not one: `d` arrives as an ordinary prop and changes by
+ * re-render when a node moves. A path in React Native draws reliably when one
+ * property animates and the rest are plain, so splitting them this way lets a
+ * dragged node reshape the edge without ever interrupting the march.
+ *
+ * One dash and one gap of travel per cycle, which is why the loop is seamless:
+ * the end state is the start state shifted by exactly one period.
+ */
+function FlowMarchingEdge({
+  d,
+  stroke,
+  width,
+}: {
+  d: string;
+  stroke: string;
+  width: number;
+}) {
+  const offset = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+
+  useEffect(() => {
+    if (reducedMotion) {
+      offset.value = 0;
+      return undefined;
+    }
+    // Negative, so the dashes run the way the path was drawn: source to target.
+    offset.value = withRepeat(
+      withTiming(-EDGE_DASH * 2, {
+        duration: EDGE_MARCH_DURATION,
+        easing: Easing.linear,
+      }),
+      -1,
+      false
+    );
+    return () => cancelAnimation(offset);
+  }, [offset, reducedMotion]);
+
+  const dashProps = useAnimatedProps(() => ({ strokeDashoffset: offset.value }));
+
+  return (
+    <AnimatedPath
+      animatedProps={dashProps}
+      d={d}
+      fill="none"
+      stroke={stroke}
+      strokeWidth={width}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray={`${EDGE_DASH} ${EDGE_DASH}`}
+    />
+  );
+}
+
 /** The part that actually draws an edge, inside the canvas's one `<Svg>`. */
 function FlowEdgePath({
   from,
@@ -1612,7 +1686,7 @@ function FlowEdgePath({
   const b = { x: outB.x + origin.x, y: outB.y + origin.y };
 
   const d = edgePath(variant, a, sideA, b, sideB, curvature, radius, gap);
-  const dash = dashed || animated ? 6 : 0;
+  const dash = dashed || animated ? EDGE_DASH : 0;
   const stroke = color ?? tint;
 
   const head = arrow
@@ -1624,15 +1698,19 @@ function FlowEdgePath({
 
   return (
     <>
-      <Path
-        d={d}
-        fill="none"
-        stroke={stroke}
-        strokeWidth={width}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeDasharray={dash ? `${dash} ${dash}` : undefined}
-      />
+      {animated ? (
+        <FlowMarchingEdge d={d} stroke={stroke} width={width} />
+      ) : (
+        <Path
+          d={d}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={width}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeDasharray={dash ? `${dash} ${dash}` : undefined}
+        />
+      )}
       {head ? <Path d={head} fill={stroke} /> : null}
     </>
   );
@@ -1703,9 +1781,10 @@ function FlowEdgeLayer() {
           origin={origin}
         />
       ))}
-      {/* The connection line is the one path that does animate, because it
-          follows a finger and has nothing else to follow. It animates `d` and
-          only `d`, which is the one thing that works. */}
+      {/* The connection line follows a finger, so it is the path that animates
+          `d` — and only `d`, which is the one thing that works while the
+          geometry is what moves. An animated edge inverts the split: static
+          `d`, animated dash offset. Either is fine; both at once is not. */}
       <AnimatedPath
         animatedProps={lineProps}
         fill="none"

package/src/components/frame/index.tsx

@@ -398,7 +398,7 @@ const FrameRow = forwardRef<View, FrameRowProps>(
 
     if (!onPress) {
       return (
-        <View ref={ref} className={classes} {...(props as ViewProps)}>
+        <View ref={ref} {...(props as ViewProps)} className={classes}>
           {body}
         </View>
       );
@@ -407,10 +407,10 @@ const FrameRow = forwardRef<View, FrameRowProps>(
     return (
       <Pressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         onPress={onPress}
         className={classes}
-        {...props}
       >
         {body}
       </Pressable>

package/src/components/grid-item/index.tsx

@@ -334,9 +334,9 @@ const GridItemRoot = forwardRef<View, GridItemProps>(
       return (
         <View
           ref={ref}
+          {...(props as ViewProps)}
           accessibilityState={{ disabled: !!disabled }}
           className={root({ className })}
-          {...(props as ViewProps)}
         >
           {textChildren(children)}
         </View>
@@ -346,12 +346,12 @@ const GridItemRoot = forwardRef<View, GridItemProps>(
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{ disabled: !!disabled }}
         disabled={disabled}
         onPress={onPress}
         className={root({ className })}
-        {...props}
       >
         {textChildren(children)}
       </AnimatedPressable>

package/src/components/heatmap-chart/index.tsx

@@ -628,7 +628,13 @@ const HeatmapChartRoot = forwardRef<View, HeatmapChartProps>(function HeatmapCha
                 <Svg width={grid.width} height={grid.height} style={StyleSheet.absoluteFill}>
                   <Defs>
                     <ClipPath id={clipId}>
-                      <AnimatedRect x={0} y={0} height={grid.height} animatedProps={clipProps} />
+                      <AnimatedRect
+                        x={0}
+                        y={0}
+                        width={grid.width}
+                        height={grid.height}
+                        animatedProps={clipProps}
+                      />
                     </ClipPath>
                   </Defs>
                   <G clipPath={`url(#${clipId})`}>

package/src/components/hex-chart/index.tsx

@@ -534,7 +534,13 @@ const HexChartRoot = forwardRef<HexChartHandle, HexChartProps>(function HexChart
                         animatedProps={ellipseProps}
                       />
                     ) : (
-                      <AnimatedRect x={0} y={0} height={height} animatedProps={rectProps} />
+                      <AnimatedRect
+                          x={0}
+                          y={0}
+                          width={width}
+                          height={height}
+                          animatedProps={rectProps}
+                        />
                     )}
                   </ClipPath>
                 </Defs>

package/src/components/input-group/index.tsx

@@ -146,8 +146,13 @@ const InputGroupInput = forwardRef<TextInput, InputGroupInputProps>(
         style={[
           // Only override padding on the side that actually has a decorator —
           // a 0 here would wipe out the field's default horizontal padding.
-          group?.prefixWidth ? { paddingLeft: group.prefixWidth } : null,
-          group?.suffixWidth ? { paddingRight: group.suffixWidth } : null,
+          //
+          // `paddingStart`/`paddingEnd`, not left/right: the decorators are
+          // inset with `start-0`/`end-0`, so under `Direction dir="rtl"` Yoga
+          // moves them to the other edge. Physical padding stays where it was
+          // written and leaves the value running underneath them.
+          group?.prefixWidth ? { paddingStart: group.prefixWidth } : null,
+          group?.suffixWidth ? { paddingEnd: group.suffixWidth } : null,
           style,
         ]}
         {...props}

package/src/components/item/index.tsx

@@ -148,21 +148,21 @@ const ItemRoot = forwardRef<View, ItemProps>(
     const body = !onPress ? (
       <View
         ref={ref}
+        {...(props as ViewProps)}
         accessibilityState={{ disabled: !!disabled }}
         className={root({ className })}
-        {...(props as ViewProps)}
       >
         {textChildren(children)}
       </View>
     ) : (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{ disabled: !!disabled }}
         disabled={disabled}
         onPress={onPress}
         className={root({ className })}
-        {...props}
       >
         {textChildren(children)}
       </AnimatedPressable>

package/src/components/line-chart/index.tsx

@@ -477,11 +477,20 @@ const LineChartRoot = forwardRef<LineChartHandle, LineChartProps>(function LineC
                    * One clip for everything in the plot. Sharing it is what
                    * makes the reveal read as the chart arriving, rather than as
                    * three separate things animating in at once.
+                   *
+                   * `width` is set statically as well as animated, and it has
+                   * to be. Animated props on an element inside `Defs` do not
+                   * reach the native clip on every platform, and with the width
+                   * coming only from the animation there is no width at all
+                   * when they do not — an empty clip, and a chart whose marks
+                   * are all invisible while its axes draw normally. Declared,
+                   * the worst case is the reveal not playing.
                    */}
                   <ClipPath id={clipId}>
                     <AnimatedRect
                       x={plot.left}
                       y={0}
+                      width={plot.width}
                       height={size.height}
                       animatedProps={clipProps}
                     />