panelui-native 0.71.0 → 0.73.0

package/src/components/breadcrumb/index.tsx

@@ -328,6 +328,7 @@ const BreadcrumbEllipsis = forwardRef<View, BreadcrumbEllipsisProps>(
       return (
         <View
           ref={ref}
+          {...(props as ViewProps)}
           accessibilityLabel="More"
           className={cn('h-5 items-center justify-center px-0.5', className)}
         >
@@ -339,12 +340,12 @@ const BreadcrumbEllipsis = forwardRef<View, BreadcrumbEllipsisProps>(
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityLabel="Show more"
         pressScale={0.92}
         onPress={onPress}
         className={cn('h-5 items-center justify-center px-0.5', className)}
-        {...props}
       >
         {glyph}
       </AnimatedPressable>

package/src/components/button/index.tsx

@@ -300,6 +300,7 @@ export const Button = forwardRef<View, ButtonProps>(
       endContent,
       native,
       glass = false,
+      accessibilityState,
       ...props
     },
     ref
@@ -441,8 +442,6 @@ export const Button = forwardRef<View, ButtonProps>(
       <IconColorProvider color={contentColor}>
         <AnimatedPressable
           ref={ref}
-          accessibilityRole="button"
-          accessibilityState={{ disabled: isDisabled, busy: loading }}
           disabled={isDisabled}
           // Joined segments cannot borrow room from each other without making
           // two actions claim the same pixels. ButtonGroup owns that layout.
@@ -451,6 +450,8 @@ export const Button = forwardRef<View, ButtonProps>(
           pressScale={attached ? 1 : undefined}
           className={root({ className: cn(attached && ATTACHED, className) })}
           {...props}
+          accessibilityRole="button"
+          accessibilityState={{ ...accessibilityState, disabled: isDisabled, busy: loading }}
         >
           {loading ? (
             <Spinner size={SPINNER_SIZE[resolvedSize ?? 'md']} className={spinner()} />

package/src/components/carousel/index.tsx

@@ -799,6 +799,7 @@ function makeArrow(direction: 'previous' | 'next') {
 
     return (
       <Pressable
+        {...props}
         disabled={disabled}
         onPress={direction === 'next' ? next : previous}
         accessibilityRole="button"
@@ -809,7 +810,6 @@ function makeArrow(direction: 'previous' | 'next') {
           disabled ? 'opacity-30' : 'active:bg-foreground/10',
           className
         )}
-        {...props}
       >
         {children ??
           (direction === 'next' ? (

package/src/components/chip/index.tsx

@@ -285,9 +285,9 @@ const ChipRoot = forwardRef<View, ChipProps>(
           {pressable ? (
             <AnimatedPressable
               ref={ref}
-              onPress={handlePress}
-              {...sharedProps}
               {...props}
+              {...sharedProps}
+              onPress={handlePress}
             >
               {body}
             </AnimatedPressable>

package/src/components/code-block/index.tsx

@@ -32,7 +32,7 @@
  * block in a text part, or the fields of a tool call that wrote a file.
  */
 import { createContext, useContext, useMemo, type ReactNode } from 'react';
-import { ScrollView, View, type ViewProps } from 'react-native';
+import { ScrollView, View, type TextProps, type ViewProps } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';
@@ -240,7 +240,7 @@ function CodeBlockHeader({ className, children, ...props }: CodeBlockHeaderProps
   );
 }
 
-export interface CodeBlockFilenameProps extends ViewProps {
+export interface CodeBlockFilenameProps extends TextProps {
   className?: string;
   children?: ReactNode;
 }
@@ -254,7 +254,7 @@ function CodeBlockFilename({ className, children, ...props }: CodeBlockFilenameP
   );
 }
 
-export interface CodeBlockLanguageProps extends ViewProps {
+export interface CodeBlockLanguageProps extends TextProps {
   className?: string;
   children?: ReactNode;
 }

package/src/components/collapsible/index.tsx

@@ -49,7 +49,13 @@ import {
   useState,
   type ReactNode,
 } from 'react';
-import { Pressable, View, type Text as RNText, type ViewProps } from 'react-native';
+import {
+  Pressable,
+  View,
+  type PressableProps,
+  type Text as RNText,
+  type ViewProps,
+} from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useReducedMotion,
@@ -160,14 +166,14 @@ const CollapsibleRoot = forwardRef<View, CollapsibleProps>(
 );
 CollapsibleRoot.displayName = 'Collapsible';
 
-export interface CollapsibleTriggerProps extends ViewProps {
+export interface CollapsibleTriggerProps extends Omit<PressableProps, 'children'> {
   className?: string;
   children?: ReactNode;
 }
 
 /** The pressable header row. Bare strings are wrapped in the title style. */
 const CollapsibleTrigger = forwardRef<View, CollapsibleTriggerProps>(
-  ({ className, children, ...props }, ref) => {
+  ({ className, children, onPress, ...props }, ref) => {
     const { open, toggle, isDisabled, variant } = useCollapsible('Collapsible.Trigger');
     const { trigger, title } = collapsibleVariants({ variant });
 
@@ -177,9 +183,12 @@ const CollapsibleTrigger = forwardRef<View, CollapsibleTriggerProps>(
         accessibilityRole="button"
         accessibilityState={{ expanded: open, disabled: isDisabled }}
         disabled={isDisabled}
-        onPress={toggle}
         className={trigger({ className })}
         {...props}
+        onPress={(event) => {
+          onPress?.(event);
+          toggle();
+        }}
       >
         {textChildren(children, (text) => (
           <Text className={title()}>{text}</Text>

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

@@ -1254,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]}
@@ -1267,7 +1268,6 @@ function FlowNode({
           accessibilityState={{ selected }}
           accessibilityActions={nodeActions}
           onAccessibilityAction={handleAccessibilityAction}
-          {...props}
         >
           {textChildren(children)}
         </Animated.View>

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}
                     />

package/src/components/marker/index.tsx

@@ -100,21 +100,21 @@ const MarkerRoot = forwardRef<View, MarkerProps>(
     const body = !onPress ? (
       <View
         ref={ref}
+        {...(props as ViewProps)}
         accessibilityState={{ disabled: !!disabled }}
         className={root({ className })}
-        {...(props as ViewProps)}
       >
         {inner}
       </View>
     ) : (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityState={{ disabled: !!disabled }}
         disabled={disabled}
         onPress={onPress}
         className={root({ className })}
-        {...props}
       >
         {inner}
       </AnimatedPressable>

package/src/components/marquee/index.tsx

@@ -62,12 +62,11 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useDirectionSign } from '../../hooks/use-direction';
 import { cn } from '../../utils/cn';
-
-/**
- * Points per second. Slow enough that a word stays readable as it crosses,
- * which is the speed a ticker is actually for.
- */
-const DEFAULT_SPEED = 40;
+import {
+  DEFAULT_MARQUEE_SPEED,
+  marqueeCopyCount,
+  normalizeMarqueeSpeed,
+} from './marquee-math';
 
 export type MarqueeDirection = 'horizontal' | 'vertical';
 
@@ -98,7 +97,7 @@ export interface MarqueeProps extends Omit<ViewProps, 'children'> {
 export function Marquee({
   className,
   children,
-  speed = DEFAULT_SPEED,
+  speed: speedProp = DEFAULT_MARQUEE_SPEED,
   spacing = 0,
   direction = 'horizontal',
   reverse = false,
@@ -115,19 +114,22 @@ export function Marquee({
 
   const [viewport, setViewport] = useState(0);
   const [content, setContent] = useState(0);
+  const speed = normalizeMarqueeSpeed(speedProp);
 
   // The distance from one copy to the same point on the next, and therefore
   // both the layout step and the exact loop length. They are the same number
   // on purpose: taking the gap from anywhere else is how a seam appears.
-  const period = content > 0 ? content + spacing : 0;
+  const layout = useMemo(
+    () => marqueeCopyCount(viewport, content, spacing),
+    [viewport, content, spacing]
+  );
+  const { period } = layout;
 
   const copies = useMemo(() => {
-    if (period <= 0 || viewport <= 0) return [];
     // Enough to span the container, plus one trailing into view and one
     // already past it — the two the travel consumes before the loop restarts.
-    const count = Math.ceil(viewport / period) + 2;
-    return Array.from({ length: count }, (_, index) => index);
-  }, [period, viewport]);
+    return Array.from({ length: layout.count }, (_, index) => index);
+  }, [layout.count]);
 
   const offset = useSharedValue(0);
 

package/src/components/marquee/marquee-math.ts

@@ -0,0 +1,37 @@
+/**
+ * The arithmetic behind the loop, kept out of the component so it can be tested
+ * without rendering one.
+ *
+ * Every value here reaches a Reanimated timing or a layout offset, and both
+ * treat `NaN` and `Infinity` as a frame that never resolves rather than as an
+ * error. A marquee handed a bad number should hold still, not wedge — so the
+ * guards live at the boundary, once, instead of at each use.
+ */
+
+/**
+ * Points per second. Slow enough that a word stays readable as it crosses,
+ * which is the speed a ticker is actually for.
+ */
+export const DEFAULT_MARQUEE_SPEED = 40;
+
+export function normalizeMarqueeSpeed(value: number): number {
+  if (!Number.isFinite(value)) return DEFAULT_MARQUEE_SPEED;
+  return Math.max(value, 0);
+}
+
+export function normalizeMarqueeSpacing(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.max(value, 0);
+}
+
+export function marqueeCopyCount(
+  viewport: number,
+  content: number,
+  spacing: number
+): { period: number; count: number } {
+  const safeViewport = Number.isFinite(viewport) ? Math.max(viewport, 0) : 0;
+  const safeContent = Number.isFinite(content) ? Math.max(content, 0) : 0;
+  const period = safeContent > 0 ? safeContent + normalizeMarqueeSpacing(spacing) : 0;
+  if (period <= 0 || safeViewport <= 0) return { period, count: 0 };
+  return { period, count: Math.ceil(safeViewport / period) + 2 };
+}

package/src/components/menu/index.tsx

@@ -451,6 +451,8 @@ export function MenuItem({
   closeOnSelect = true,
   onSelect,
   onPress,
+  onPressIn,
+  onPressOut,
   ...props
 }: MenuItemProps) {
   const { close, haptics } = useMenu('Menu.Item');
@@ -467,15 +469,21 @@ export function MenuItem({
 
   return (
     <AnimatedPressable
+      {...props}
       accessibilityRole="menuitem"
       accessibilityState={{ disabled }}
       disabled={disabled}
       onPress={handlePress}
-      onPressIn={press.onPressIn}
-      onPressOut={press.onPressOut}
+      onPressIn={(event) => {
+        onPressIn?.(event);
+        press.onPressIn();
+      }}
+      onPressOut={(event) => {
+        onPressOut?.(event);
+        press.onPressOut();
+      }}
       style={press.rowStyle}
       className={cn(slots.item(), 'overflow-hidden', className)}
-      {...props}
     >
       <Animated.View
         pointerEvents="none"

package/src/components/pagination/index.tsx

@@ -367,7 +367,7 @@ export interface PaginationItemProps
  * are on, so the current page is spoken as state rather than only painted.
  */
 const PaginationItem = forwardRef<View, PaginationItemProps>(
-  ({ className, labelClassName, page, children, ...props }, ref) => {
+  ({ className, labelClassName, page, children, onPress, ...props }, ref) => {
     const { page: current, size, disabled, goTo } = usePagination('Pagination.Item');
     const isCurrent = page === current;
     const { item, itemLabel } = paginationVariants({ size, current: isCurrent, disabled });
@@ -375,14 +375,17 @@ const PaginationItem = forwardRef<View, PaginationItemProps>(
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityLabel={`Page ${page}`}
         accessibilityState={{ selected: isCurrent, disabled }}
         disabled={disabled}
         hitSlop={size === 'sm' ? SMALL_HIT_SLOP : undefined}
-        onPress={() => goTo(page)}
+        onPress={(event) => {
+          onPress?.(event);
+          goTo(page);
+        }}
         className={item({ className })}
-        {...props}
       >
         {textChildren(children ?? String(page), (text) => (
           <Text className={itemLabel({ className: labelClassName })}>{text}</Text>
@@ -437,23 +440,29 @@ function PaginationArrow({
   word,
   className,
   label,
+  disabled,
+  onPress,
   ...props
 }: PaginationArrowProps & { step: -1 | 1; part: string; word: string }) {
   const { Glyph, size, spent, color, press } = useArrow(step, part);
-  const { item, itemLabel } = paginationVariants({ size, disabled: spent });
+  const isDisabled = Boolean(spent || disabled);
+  const { item, itemLabel } = paginationVariants({ size, disabled: isDisabled });
 
   return (
     <AnimatedPressable
+      {...props}
       accessibilityRole="button"
       accessibilityLabel={word}
-      accessibilityState={{ disabled: spent }}
-      disabled={spent}
+      accessibilityState={{ disabled: isDisabled }}
+      disabled={isDisabled}
       hitSlop={size === 'sm' ? SMALL_HIT_SLOP : undefined}
-      onPress={press}
+      onPress={(event) => {
+        onPress?.(event);
+        press();
+      }}
       className={item({
         className: cn('flex-row gap-1', label && (size === 'sm' ? 'px-2' : 'px-3'), className),
       })}
-      {...props}
     >
       {step === -1 ? <Glyph size={iconSize[size]} color={color} /> : null}
       {label ? <Text className={itemLabel()}>{word}</Text> : null}
@@ -489,24 +498,28 @@ export interface PaginationEllipsisProps
  * that always went forwards would strand anyone reading the row right to left.
  */
 const PaginationEllipsis = forwardRef<View, PaginationEllipsisProps>(
-  ({ className, direction = 1, jump = 5, ...props }, ref) => {
+  ({ className, direction = 1, jump = 5, disabled: disabledProp, onPress, ...props }, ref) => {
     const { page, size, disabled, goTo } = usePagination('Pagination.Ellipsis');
     const color = useCSSVariable('--color-muted-foreground');
     const { ellipsis } = paginationVariants({ size });
+    const isDisabled = Boolean(disabled || disabledProp);
 
     return (
       <AnimatedPressable
         ref={ref}
+        {...props}
         accessibilityRole="button"
         accessibilityLabel={
           direction === -1 ? `Back ${jump} pages` : `Forward ${jump} pages`
         }
-        accessibilityState={{ disabled }}
-        disabled={disabled}
+        accessibilityState={{ disabled: isDisabled }}
+        disabled={isDisabled}
         hitSlop={size === 'sm' ? SMALL_HIT_SLOP : undefined}
-        onPress={() => goTo(page + direction * jump)}
+        onPress={(event) => {
+          onPress?.(event);
+          goTo(page + direction * jump);
+        }}
         className={ellipsis({ className })}
-        {...props}
       >
         <EllipsisIcon
           size={iconSize[size]}