panelui-native 0.75.1 → 0.76.0

package/src/components/search-bar/index.tsx

@@ -294,28 +294,31 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(
 
     const handleSubmit = useCallback(
       (event: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
+        if (disabled) return;
         // A return key is somebody saying they are done waiting, so the
         // pending pause is spent rather than waited out.
         flushSearchBarDebounce(debounceTimerRef, debouncedRef.current, text);
         onSubmit?.(text);
         onSubmitEditing?.(event);
       },
-      [onSubmit, onSubmitEditing, text]
+      [disabled, onSubmit, onSubmitEditing, text]
     );
 
     const handleClear = useCallback(() => {
+      if (disabled) return;
       setText('');
       onClear?.();
       // The keyboard stays: clearing a query is the start of the next one.
       // Android takes focus away with the press, so it is asked back.
       inputRef.current?.focus();
-    }, [onClear, setText]);
+    }, [disabled, onClear, setText]);
 
     const handleCancel = useCallback(() => {
+      if (disabled) return;
       setText('');
       inputRef.current?.blur();
       onCancel?.();
-    }, [onCancel, setText]);
+    }, [disabled, onCancel, setText]);
 
     /*
      * Cancel's width is measured once and driven from a shared value, so the
@@ -426,8 +429,11 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(
           <AnimatedPressable
             onLayout={handleCancelLayout}
             onPress={handleCancel}
+            disabled={disabled}
+            focusable={!disabled}
             hitSlop={8}
             accessibilityRole="button"
+            accessibilityState={{ disabled: !!disabled }}
             className={slots.cancelButton()}
           >
             <Text className={slots.cancelLabel()}>{cancelLabel}</Text>

package/src/components/split-view/index.tsx

@@ -56,10 +56,10 @@ import {
   DEFAULT_MIN_HEIGHT,
   clamp,
   nearestSnapIndex,
-  normalizeSnapIndex,
   resolveLength,
   resolveSnapPoints,
 } from './split-view-math';
+import { useSplitViewIndexLifecycle } from './split-view-lifecycle';
 
 /** Settles the pane onto a snap point without overshooting past its limits. */
 const SPRING = {
@@ -189,14 +189,16 @@ function SplitViewRoot({
     [pointsKey]
   );
 
-  const controlled = snapIndexProp !== undefined;
-  const [internalIndex, setInternalIndex] = useState(() =>
-    normalizeSnapIndex(defaultSnapIndex, 1)
-  );
-  const snapIndex = normalizeSnapIndex(
-    controlled ? snapIndexProp : internalIndex,
-    points.length || 1
-  );
+  const {
+    index: snapIndex,
+    requestIndex,
+    requestToken,
+  } = useSplitViewIndexLifecycle({
+    snapIndex: snapIndexProp,
+    defaultSnapIndex,
+    count: points.length,
+    onSnapIndexChange,
+  });
 
   const onSnapRef = useRef(onSnap);
   onSnapRef.current = onSnap;
@@ -207,30 +209,15 @@ function SplitViewRoot({
   }, []);
 
   /*
-   * Moving the seam is one function whether a drag, a press or a screen reader
-   * asked for it — the alternative is three places that each have to remember
-   * to spring, to report, and to leave a controlled caller's index alone.
+   * Every modality makes the same request. The synchronization effect below
+   * moves only to the index the owner accepts, then reports that settlement.
    */
   const moveTo = useCallback(
-    (index: number, options?: { animated?: boolean }) => {
-      const target = points[index];
-      if (target === undefined) return;
-
-      if (!controlled) setInternalIndex(index);
-      onSnapIndexChange?.(index);
-
-      const finish = () => report(index, target);
-      if (options?.animated === false || !animate) {
-        topHeight.value = target;
-        finish();
-        return;
-      }
-      topHeight.value = withSpring(target, SPRING, (finished) => {
-        'worklet';
-        if (finished) runOnJS(finish)();
-      });
+    (index: number) => {
+      if (points[index] === undefined) return;
+      requestIndex(index);
     },
-    [animate, controlled, onSnapIndexChange, points, report, topHeight]
+    [points, requestIndex]
   );
 
   const snapTo = useCallback((index: number) => moveTo(index), [moveTo]);
@@ -260,11 +247,15 @@ function SplitViewRoot({
       report(snapIndex, target);
       return;
     }
-    topHeight.value = withSpring(target, SPRING);
+    const finish = () => report(snapIndex, target);
+    topHeight.value = withSpring(target, SPRING, (finished) => {
+      'worklet';
+      if (finished) runOnJS(finish)();
+    });
     // Only when the resolved layout moves — a re-render that changes nothing
     // must not restart a spring the reader is watching.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [points, snapIndex, animate, animateOnMount]);
+  }, [points, snapIndex, animate, animateOnMount, requestToken]);
 
   const handleLayout = useCallback(
     (event: LayoutChangeEvent) => {
@@ -471,6 +462,7 @@ function SplitViewDragArea({
   return (
     <GestureDetector gesture={pan}>
       <View
+        {...props}
         accessible
         accessibilityRole="adjustable"
         accessibilityLabel={accessibilityLabel}
@@ -493,7 +485,6 @@ function SplitViewDragArea({
         }
         className={dragArea({ className })}
         onLayout={handleLayout}
-        {...props}
       >
         {children}
       </View>

package/src/components/split-view/split-view-lifecycle.ts

@@ -0,0 +1,43 @@
+import { useCallback, useState } from 'react';
+
+function normalizeIndex(index: number, count: number): number {
+  if (!Number.isFinite(index) || count <= 0) return 0;
+  return Math.max(0, Math.min(Math.round(index), count - 1));
+}
+
+interface SplitViewIndexLifecycleOptions {
+  snapIndex: number | undefined;
+  defaultSnapIndex: number;
+  count: number;
+  onSnapIndexChange?: (index: number) => void;
+}
+
+/** Keeps requested indices intact until the measured snap-point list exists. */
+export function useSplitViewIndexLifecycle({
+  snapIndex,
+  defaultSnapIndex,
+  count,
+  onSnapIndexChange,
+}: SplitViewIndexLifecycleOptions) {
+  const controlled = snapIndex !== undefined;
+  const [internalIndex, setInternalIndex] = useState(defaultSnapIndex);
+  // Every request must settle, including one that resolves to the current index
+  // after a drag and a controlled request its owner rejects.
+  const [requestToken, setRequestToken] = useState(0);
+
+  const index = normalizeIndex(
+    controlled ? snapIndex : internalIndex,
+    count || 1
+  );
+
+  const requestIndex = useCallback(
+    (next: number) => {
+      if (!controlled) setInternalIndex(next);
+      setRequestToken((token) => token + 1);
+      onSnapIndexChange?.(next);
+    },
+    [controlled, onSnapIndexChange]
+  );
+
+  return { index, requestIndex, requestToken };
+}

package/src/components/splitter/index.tsx

@@ -58,6 +58,7 @@ import {
   isCollapsed,
   layoutOffset,
   normalizeConstraint,
+  resetLayout,
   resizeLayout,
   resolveLayout,
   type SplitterConstraint,
@@ -388,6 +389,7 @@ function SplitterHandle({
   disabled,
   withGrip = true,
   accessibilityLabel = 'Resize panels',
+  style,
   ...props
 }: SplitterHandleProps) {
   const context = useSplitter('Splitter.Handle');
@@ -468,17 +470,10 @@ function SplitterHandle({
    * they already have between them.
    */
   const reset = useCallback(() => {
-    const pair = boundary >= 0 ? boundary : 0;
-    const next = layout.value.slice();
-    const room = (next[pair] ?? 0) + (next[pair + 1] ?? 0);
-    const first = initial[pair] ?? 0;
-    const span = first + (initial[pair + 1] ?? 0);
-    if (span <= 0) return;
-    next[pair] = (first / span) * room;
-    next[pair + 1] = room - next[pair]!;
+    const next = resetLayout(layout.value, initial, boundary, constraints);
     layout.value = next;
     commit(next);
-  }, [boundary, commit, initial, layout]);
+  }, [boundary, commit, constraints, initial, layout]);
 
   const doubleTap = useMemo(
     () =>
@@ -548,6 +543,7 @@ function SplitterHandle({
   return (
     <GestureDetector gesture={gesture}>
       <Animated.View
+        {...props}
         accessible
         accessibilityRole="adjustable"
         accessibilityLabel={accessibilityLabel}
@@ -556,8 +552,7 @@ function SplitterHandle({
         accessibilityActions={frozen ? undefined : [{ name: 'increment' }, { name: 'decrement' }]}
         onAccessibilityAction={frozen ? undefined : onAccessibilityAction}
         className={handle({ className })}
-        style={animatedStyle}
-        {...props}
+        style={[style, animatedStyle]}
       >
         <View className={line()} />
         {withGrip ? <View className={grip()} /> : null}
@@ -582,6 +577,7 @@ export {
   layoutOffset,
   normalizeConstraint,
   panelFloor,
+  resetLayout,
   resizeLayout,
   resolveLayout,
   type SplitterConstraint,

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

@@ -227,6 +227,34 @@ export function resizeLayout(
   return next;
 }
 
+/** Restores one pair's initial ratio without escaping its current constraints. */
+export function resetLayout(
+  layout: number[],
+  initial: number[],
+  boundary: number,
+  constraints: SplitterConstraint[]
+): number[] {
+  const next = layout.slice();
+  if (boundary < 0 || boundary + 1 >= next.length) return next;
+
+  const pair = next[boundary]! + next[boundary + 1]!;
+  const first = initial[boundary];
+  const second = initial[boundary + 1];
+  if (
+    !Number.isFinite(pair) ||
+    typeof first !== 'number' ||
+    !Number.isFinite(first) ||
+    typeof second !== 'number' ||
+    !Number.isFinite(second) ||
+    first + second <= 0
+  ) {
+    return next;
+  }
+
+  const target = (first / (first + second)) * pair;
+  return resizeLayout(next, boundary, target - next[boundary]!, constraints);
+}
+
 /** Where a seam sits, in percent, measured from the start of the splitter. */
 export function layoutOffset(layout: number[], boundary: number): number {
   'worklet';

package/src/components/tabs/index.tsx

@@ -778,7 +778,7 @@ function TabsList({ className, scrollable = false, children, ...props }: TabsLis
   }, [scrollable, activeLayout?.x, activeLayout]);
 
   const row = (
-    <View accessibilityRole="tablist" className={cn(list(), className)} {...props}>
+    <View {...props} accessibilityRole="tablist" className={cn(list(), className)}>
       {/* Nothing to slide: in `expanding` every tab draws its own pill, and the
           open one is the shape that moves. */}
       {variant === 'expanding' ? null : <TabsIndicator />}

package/src/components/timeline/index.tsx

@@ -45,14 +45,23 @@
  */
 import {
   Children,
+  cloneElement,
   createContext,
   forwardRef,
   isValidElement,
   useContext,
   useMemo,
+  type ReactElement,
   type ReactNode,
 } from 'react';
-import { ScrollView, View, type Text as RNText, type ViewProps } from 'react-native';
+import {
+  ScrollView,
+  View,
+  type FlatListProps,
+  type ListRenderItemInfo,
+  type Text as RNText,
+  type ViewProps,
+} from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedScrollHandler,
@@ -65,7 +74,7 @@ import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { IconColorProvider } from '../../icons';
 import { Text, type TextProps, textChildren } from '../../primitives/text';
-import { timelineColumnWidth } from './timeline-geometry';
+import { TIMELINE_WIDE_COLUMN, timelineColumnOffsets, timelineColumnWidth } from './timeline-geometry';
 
 export type TimelineVariant = 'dot' | 'icon' | 'numbered' | 'card' | 'compact';
 /** Semantic colour for a single event, independent of progress. */
@@ -74,6 +83,7 @@ export type TimelineTone = 'default' | 'info' | 'success' | 'warning' | 'danger'
 export type TimelineOrientation = 'vertical' | 'horizontal';
 
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+const TimelineColumnOffsetContext = createContext<number | null>(null);
 
 /*
  * Horizontal geometry.
@@ -252,6 +262,8 @@ interface TimelineContextValue {
   offsets: number[];
   /** Horizontal only: false when the reader has asked for less movement. */
   animate: boolean;
+  /** A virtualized list draws one rail segment per mounted cell. */
+  virtualized: boolean;
 }
 
 interface TimelineItemContextValue {
@@ -330,17 +342,28 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
      * themselves by. These are the snap points, and they are what an item reads
      * to know how far it is from the reading edge.
      */
-    const offsets = useMemo(() => {
-      if (!horizontal) return [];
-      const result: number[] = [];
-      let sum = 0;
+    const columns = useMemo(() => {
+      if (!horizontal) return { offsets: [], children };
+      const items: ReactElement<TimelineItemProps>[] = [];
       Children.forEach(children, (child) => {
-        if (!isValidElement(child)) return;
-        result.push(sum);
-        sum += itemWidth(child.props as TimelineItemProps);
+        if (isValidElement(child) && child.type === TimelineItem) {
+          items.push(child as ReactElement<TimelineItemProps>);
+        }
       });
-      return result;
+      const offsets = timelineColumnOffsets(items.map((item) => itemWidth(item.props)));
+      let position = 0;
+      const rendered = Children.map(children, (child) => {
+        if (!isValidElement(child) || child.type !== TimelineItem) return child;
+        const offset = offsets[position++] ?? 0;
+        return (
+          <TimelineColumnOffsetContext.Provider value={offset}>
+            {child}
+          </TimelineColumnOffsetContext.Provider>
+        );
+      });
+      return { offsets, children: rendered };
     }, [children, horizontal]);
+    const { offsets } = columns;
 
     const context = useMemo(
       () => ({
@@ -350,6 +373,7 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
         scrollX,
         offsets,
         animate: !reducedMotion,
+        virtualized: false,
       }),
       [value, variant, orientation, scrollX, offsets, reducedMotion]
     );
@@ -402,7 +426,7 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
                   borderColor: typeof border === 'string' ? border : undefined,
                 }}
               />
-              {textChildren(children)}
+              {textChildren(columns.children)}
             </View>
           </AnimatedScrollView>
         </View>
@@ -412,6 +436,128 @@ const TimelineRoot = forwardRef<View, TimelineProps>(
 );
 TimelineRoot.displayName = 'Timeline';
 
+export interface TimelineListProps<T>
+  extends Omit<
+    FlatListProps<T>,
+    | 'data'
+    | 'renderItem'
+    | 'horizontal'
+    | 'getItemLayout'
+    | 'onScroll'
+    | 'snapToOffsets'
+    | 'CellRendererComponent'
+  > {
+  /** Complete event collection; rows outside the native window stay unmounted. */
+  data: readonly T[];
+  /** Render one `Timeline.Item`. Its step, width, and last marker are owned by the list. */
+  renderItem: (info: ListRenderItemInfo<T>) => ReactElement<TimelineItemProps>;
+  /** Width of each column, or a resolver for mixed-width histories. */
+  itemWidth?: number | ((item: T, index: number) => number);
+  /** Steps at or below this index render as completed. */
+  value?: number;
+  variant?: TimelineVariant;
+  snap?: boolean;
+}
+
+/**
+ * Opt-in bounded mount path for long horizontal histories. The compound
+ * `Timeline` API remains the simpler choice for short or mixed-content lists.
+ */
+function TimelineList<T>({
+  data,
+  renderItem,
+  itemWidth: requestedWidth = TIMELINE_WIDE_COLUMN,
+  value = 0,
+  variant = 'dot',
+  snap = true,
+  initialNumToRender = 6,
+  maxToRenderPerBatch = 6,
+  windowSize = 5,
+  className,
+  ...props
+}: TimelineListProps<T>) {
+  const reducedMotion = useReducedMotion();
+  const scrollX = useSharedValue(0);
+  const widths = useMemo(
+    () =>
+      data.map((item, index) =>
+        timelineColumnWidth(
+          typeof requestedWidth === 'function' ? requestedWidth(item, index) : requestedWidth,
+          true
+        )
+      ),
+    [data, requestedWidth]
+  );
+  const offsets = useMemo(() => {
+    let offset = 0;
+    return widths.map((width) => {
+      const current = offset;
+      offset += width;
+      return current;
+    });
+  }, [widths]);
+  const context = useMemo(
+    () => ({
+      activeStep: value,
+      variant,
+      orientation: 'horizontal' as const,
+      scrollX,
+      offsets,
+      animate: !reducedMotion,
+      virtualized: true,
+    }),
+    [value, variant, scrollX, offsets, reducedMotion]
+  );
+  const { root } = timelineVariants({ variant, orientation: 'horizontal' });
+  const onScroll = useAnimatedScrollHandler((event) => {
+    scrollX.value = event.contentOffset.x;
+  });
+
+  return (
+    <TimelineContext.Provider value={context}>
+      <Animated.FlatList
+        data={data}
+        horizontal
+        accessibilityRole="list"
+        showsHorizontalScrollIndicator={false}
+        decelerationRate="fast"
+        snapToAlignment="start"
+        initialNumToRender={initialNumToRender}
+        maxToRenderPerBatch={maxToRenderPerBatch}
+        windowSize={windowSize}
+        removeClippedSubviews
+        className={root({ className })}
+        {...props}
+        getItemLayout={(_, index) => ({
+          index,
+          length: widths[index] ?? TIMELINE_WIDE_COLUMN,
+          offset: offsets[index] ?? 0,
+        })}
+        snapToOffsets={snap ? offsets : undefined}
+        onScroll={onScroll}
+        scrollEventThrottle={16}
+        renderItem={(info) => (
+          /*
+           * The list owns the order, so it hands each column its own left edge
+           * the same way the compound root does. An item reads its offset from
+           * here rather than indexing by `step`, and a virtualized item that
+           * was given none would sit at zero and never recede.
+           */
+          <TimelineColumnOffsetContext.Provider value={offsets[info.index] ?? 0}>
+            {cloneElement(renderItem(info), {
+              step: info.index,
+              width: widths[info.index],
+              last: info.index === data.length - 1,
+              role: 'listitem',
+            })}
+          </TimelineColumnOffsetContext.Provider>
+        )}
+      />
+    </TimelineContext.Provider>
+  );
+}
+TimelineList.displayName = 'Timeline.List';
+
 export interface TimelineItemProps extends ViewProps {
   className?: string;
   /** Position in the sequence, zero-based. */
@@ -450,8 +596,16 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     },
     ref
   ) => {
-    const { activeStep, variant, orientation, scrollX, offsets, animate } =
+    const { activeStep, variant, orientation, scrollX, animate, virtualized } =
       useTimeline('Timeline.Item');
+    /*
+     * Where this column starts, from its position among the rendered items
+     * rather than from `step`. `step` is the semantic progress value: it may
+     * be sparse, repeated or reordered, and indexing the offsets by it lands a
+     * column on another column's snap point.
+     */
+    const columnOffset = useContext(TimelineColumnOffsetContext);
+    const border = useCSSVariable('--color-border');
     const isCompleted = completed ?? step <= activeStep;
     const { item } = timelineVariants({
       variant,
@@ -464,7 +618,7 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     const columnWidth = horizontal
       ? itemWidth({ step, width, children } as TimelineItemProps)
       : undefined;
-    const offset = offsets[step] ?? 0;
+    const offset = columnOffset ?? 0;
 
     const context = useMemo(
       () => ({
@@ -479,8 +633,8 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
     );
 
     /*
-     * A column recedes as it leaves the reading edge, so the one being read is
-     * the one that looks read.
+     * A column scales and drops as it leaves the reading edge, so the one being
+     * read is distinct without fading informative text below its contrast.
      *
      * One column's width either side, not two: a window wide enough to hold
      * three columns near full strength is a row where nothing is picked out,
@@ -494,12 +648,11 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
      * the rest.
      */
     const columnStyle = useAnimatedStyle(() => {
-      if (!horizontal || !animate) return { opacity: 1, transform: [] };
+      if (!horizontal || !animate) return { transform: [] };
       const distance = Math.abs(scrollX.value - offset);
       const window = Math.max(columnWidth ?? timelineColumnWidth(undefined, true), 1);
       const away = interpolate(distance, [0, window], [0, 1], 'clamp');
       return {
-        opacity: 1 - away * 0.4,
         transform: [{ scale: 1 - away * 0.04 }, { translateY: away * 4 }],
       };
     });
@@ -522,6 +675,22 @@ const TimelineItem = forwardRef<View, TimelineItemProps>(
           {...props}
           style={[style, { width: columnWidth }, columnStyle]}
         >
+          {virtualized && !last ? (
+            <View
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              pointerEvents="none"
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: HORIZONTAL_RAIL_TOP,
+                borderTopWidth: 1,
+                borderStyle: 'dashed',
+                borderColor: typeof border === 'string' ? border : undefined,
+              }}
+            />
+          ) : null}
           {textChildren(children)}
         </Animated.View>
       </TimelineItemContext.Provider>
@@ -678,22 +847,7 @@ const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
     const { body, panel } = timelineVariants({ variant, tone, completed, orientation });
     const horizontal = orientation === 'horizontal';
 
-    /*
-     * Horizontal: the body recedes further than the column around it.
-     *
-     * The rail is a continuous thing and has to stay readable across the whole
-     * track — the years either side of the one being read are half of what a
-     * timeline is for. The prose under them is not: several columns of it at
-     * equal weight is a wall, and no amount of fading the column as a whole
-     * fixes that without taking the years down with it. So the body takes a
-     * second, steeper curve and the dates keep the first one.
-     */
-    const bodyStyle = useAnimatedStyle(() => {
-      if (!horizontal || !animate) return { opacity: 1 };
-      const distance = Math.abs(scrollX.value - offset);
-      const window = Math.max(columnWidth, 1);
-      return { opacity: interpolate(distance, [0, window], [1, 0.3], 'clamp') };
-    });
+    /* Horizontal content stays fully opaque; scale and translation provide focus. */
 
     const inner =
       variant === 'card' ? (
@@ -715,7 +869,7 @@ const TimelineContent = forwardRef<View, ViewProps & { className?: string }>(
         ref={ref}
         className={body({ className })}
         {...props}
-        style={[style, bodyStyle]}
+        style={style}
       >
         {inner}
       </Animated.View>
@@ -825,6 +979,7 @@ const TimelineStat = forwardRef<View, TimelineStatProps>(
 TimelineStat.displayName = 'Timeline.Stat';
 
 export const Timeline = Object.assign(TimelineRoot, {
+  List: TimelineList,
   Item: TimelineItem,
   Aside: TimelineAside,
   Indicator: TimelineIndicator,

package/src/components/timeline/timeline-geometry.ts

@@ -7,3 +7,14 @@ export function timelineColumnWidth(requested: number | undefined, filled: boole
   }
   return filled ? TIMELINE_WIDE_COLUMN : TIMELINE_NARROW_COLUMN;
 }
+
+/** Left edge of each column in render order. */
+export function timelineColumnOffsets(widths: readonly number[]): number[] {
+  const offsets: number[] = [];
+  let sum = 0;
+  for (const width of widths) {
+    offsets.push(sum);
+    sum += width;
+  }
+  return offsets;
+}

package/src/components/toast/index.tsx

@@ -175,7 +175,12 @@ const ToastRoot = ({ className, variant = 'default', onHide, children, ...props
 
   return (
     <ToastContext.Provider value={context}>
-      <View accessibilityRole="alert" accessibilityLiveRegion="polite" className={root({ className })} {...props}>
+      <View
+        {...props}
+        accessibilityRole="alert"
+        accessibilityLiveRegion="polite"
+        className={root({ className })}
+      >
         {textChildren(children)}
       </View>
     </ToastContext.Provider>

package/src/components/tooltip/index.tsx

@@ -623,7 +623,7 @@ function TooltipTitle({ className, ...props }: TooltipTitleProps) {
   const { title } = tooltipVariants({ variant });
 
   return (
-    <Text accessibilityRole="header" className={cn(title(), className)} {...props} />
+    <Text {...props} accessibilityRole="header" className={cn(title(), className)} />
   );
 }