panelui-native 0.71.0 → 0.75.0

package/src/components/toast/toast-store.ts

@@ -44,11 +44,18 @@ const DEFAULT_DURATION = 4000;
 
 let counter = 0;
 
-class ToastStore {
+interface ToastTimer {
+  remaining: number;
+  startedAt?: number;
+  timeout?: ReturnType<typeof setTimeout>;
+}
+
+export class ToastStore {
   private items: ToastItem[] = [];
   private snapshot: readonly ToastItem[] = this.items;
   private listeners = new Set<() => void>();
-  private timers = new Map<string, ReturnType<typeof setTimeout>>();
+  private timers = new Map<string, ToastTimer>();
+  private timersPaused = false;
 
   subscribe = (listener: () => void) => {
     this.listeners.add(listener);
@@ -69,10 +76,9 @@ class ToastStore {
 
     const duration = resolved.duration ?? DEFAULT_DURATION;
     if (duration > 0) {
-      this.timers.set(
-        id,
-        setTimeout(() => this.hide(id), duration)
-      );
+      const timer = { remaining: duration };
+      this.timers.set(id, timer);
+      if (!this.timersPaused) this.startTimer(id, timer);
     }
 
     return id;
@@ -81,7 +87,7 @@ class ToastStore {
   hide = (id: string) => {
     const timer = this.timers.get(id);
     if (timer) {
-      clearTimeout(timer);
+      if (timer.timeout !== undefined) clearTimeout(timer.timeout);
       this.timers.delete(id);
     }
     if (!this.items.some((item) => item.id === id)) return;
@@ -90,13 +96,42 @@ class ToastStore {
   };
 
   hideAll = () => {
-    this.timers.forEach(clearTimeout);
+    this.timers.forEach((timer) => {
+      if (timer.timeout !== undefined) clearTimeout(timer.timeout);
+    });
     this.timers.clear();
     if (this.items.length === 0) return;
     this.items = [];
     this.emit();
   };
 
+  /** Pause auto-dismiss countdowns while their viewport is not visible. */
+  pauseTimers = () => {
+    if (this.timersPaused) return;
+    this.timersPaused = true;
+    const now = Date.now();
+
+    this.timers.forEach((timer) => {
+      if (timer.timeout === undefined || timer.startedAt === undefined) return;
+      clearTimeout(timer.timeout);
+      timer.remaining = Math.max(0, timer.remaining - (now - timer.startedAt));
+      delete timer.timeout;
+      delete timer.startedAt;
+    });
+  };
+
+  /** Resume each auto-dismiss countdown from its remaining visible time. */
+  resumeTimers = () => {
+    if (!this.timersPaused) return;
+    this.timersPaused = false;
+    this.timers.forEach((timer, id) => this.startTimer(id, timer));
+  };
+
+  private startTimer(id: string, timer: ToastTimer) {
+    timer.startedAt = Date.now();
+    timer.timeout = setTimeout(() => this.hide(id), timer.remaining);
+  }
+
   private emit() {
     this.snapshot = this.items;
     this.listeners.forEach((listener) => listener());

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

@@ -333,6 +333,7 @@ const ToggleButtonRoot = forwardRef<View, ToggleButtonProps>(
         <IconColorProvider color={typeof tint === 'string' ? tint : undefined}>
           <AnimatedPressable
             ref={ref}
+            {...props}
             accessibilityRole="button"
             // `checked` is what a screen reader reads out as "on"/"off"; the
             // selected state is the entire point of this control, so it is
@@ -345,7 +346,6 @@ const ToggleButtonRoot = forwardRef<View, ToggleButtonProps>(
               slots.root({ className }),
               selected ? selectedClassName : unselectedClassName
             )}
-            {...props}
           >
             {textChildren(children, (text) => (
               <Text className={slots.label({ className: labelClassName })}>

package/src/components/tour/index.tsx

@@ -74,6 +74,11 @@ import { Portal } from '../../primitives/portal';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { Button } from '../button';
+import {
+  currentTourCardHeight,
+  nextTourCardMeasurement,
+  type TourCardMeasurement,
+} from './tour-card-measurement';
 
 const AnimatedPath = Animated.createAnimatedComponent(Path);
 
@@ -466,7 +471,10 @@ function TourOverlay({
   const insets = useSafeAreaInsets();
   const reducedMotion = useReducedMotion();
   const [spot, setSpot] = useState<(Rect & { radius: number }) | null>(null);
-  const [cardHeight, setCardHeight] = useState<number | null>(null);
+  const [cardMeasurement, setCardMeasurement] = useState<TourCardMeasurement | null>(
+    null
+  );
+  const cardHeight = currentTourCardHeight(active, cardMeasurement);
 
   const stepPadding = active?.padding ?? padding;
   const stepRadius = active?.radius ?? radius;
@@ -570,8 +578,8 @@ function TourOverlay({
 
   const onCardLayout = (event: LayoutChangeEvent) => {
     const measured = event.nativeEvent.layout.height;
-    setCardHeight((current) =>
-      current !== null && Math.abs(current - measured) < 1 ? current : measured
+    setCardMeasurement((current) =>
+      nextTourCardMeasurement(active, measured, current)
     );
   };
 

package/src/components/tour/tour-card-measurement.ts

@@ -0,0 +1,29 @@
+/** A measured Tour card height tied to the step that produced it. */
+export interface TourCardMeasurement {
+  owner: object | undefined;
+  height: number;
+}
+
+/**
+ * Returns a height only when it belongs to the step currently being rendered.
+ * A previous step can be much taller or shorter, so reusing its height would
+ * place the next card incorrectly before that card's first layout pass.
+ */
+export function currentTourCardHeight(
+  owner: object | undefined,
+  measurement: TourCardMeasurement | null
+): number | null {
+  return measurement && measurement.owner === owner ? measurement.height : null;
+}
+
+/** Stores a card height without churning state for sub-pixel layout noise. */
+export function nextTourCardMeasurement(
+  owner: object | undefined,
+  height: number,
+  current: TourCardMeasurement | null
+): TourCardMeasurement {
+  if (current && current.owner === owner && Math.abs(current.height - height) < 1) {
+    return current;
+  }
+  return { owner, height };
+}

package/src/components/tree/index.tsx

@@ -54,7 +54,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, {
   LinearTransition,
   useAnimatedStyle,
@@ -353,10 +359,9 @@ const TreeItem = forwardRef<View, TreeItemProps>(
 );
 TreeItem.displayName = 'Tree.Item';
 
-export interface TreeTriggerProps extends ViewProps {
+/** Pressable props are forwarded; `onPress` runs after the tree updates its state. */
+export interface TreeTriggerProps extends Omit<PressableProps, 'children'> {
   className?: string;
-  /** Runs after the press has been handled, with the tree's own state already updated. */
-  onPress?: () => void;
   children?: ReactNode;
 }
 
@@ -370,20 +375,20 @@ export interface TreeTriggerProps extends ViewProps {
  * actually survives to the user.
  */
 const TreeTrigger = forwardRef<View, TreeTriggerProps>(
-  ({ className, onPress, children, ...props }, ref) => {
+  ({ className, onPress, disabled = false, children, ...props }, ref) => {
     const { toggleExpanded, select, selectionMode, expandOnPress, size } =
       useTree('Tree.Trigger');
     const { value, level, isExpanded, isSelected, isDisabled, isBranch } =
       useTreeItem('Tree.Trigger');
-    const { trigger } = treeVariants({ size, isSelected, isDisabled });
-
     const accentForeground = useCSSVariable('--color-accent-foreground');
     const selectedColor = typeof accentForeground === 'string' ? accentForeground : undefined;
 
-    const handlePress = () => {
+    const triggerDisabled = Boolean(isDisabled || disabled);
+    const { trigger } = treeVariants({ size, isSelected, isDisabled: triggerDisabled });
+    const handlePress: NonNullable<PressableProps['onPress']> = (event) => {
       if (isBranch && expandOnPress) toggleExpanded(value);
       select(value);
-      onPress?.();
+      onPress?.(event);
     };
 
     return (
@@ -393,13 +398,13 @@ const TreeTrigger = forwardRef<View, TreeTriggerProps>(
         accessibilityState={{
           expanded: isBranch ? isExpanded : undefined,
           selected: selectionMode === 'none' ? undefined : isSelected,
-          disabled: isDisabled,
+          disabled: triggerDisabled,
         }}
         aria-level={level + 1}
-        disabled={isDisabled}
-        onPress={handlePress}
+        disabled={triggerDisabled}
         className={trigger({ className })}
         {...props}
+        onPress={handlePress}
       >
         <IconColorProvider color={isSelected ? selectedColor : undefined}>
           {children}

package/src/hooks/use-keyboard-avoidance.ts

@@ -45,7 +45,12 @@
  * ```
  */
 import { useCallback, useEffect, useState } from 'react';
-import { useWindowDimensions, type LayoutChangeEvent, type View } from 'react-native';
+import {
+  useWindowDimensions,
+  type LayoutChangeEvent,
+  type View,
+  type ViewStyle,
+} from 'react-native';
 import {
   measure,
   runOnJS,
@@ -106,7 +111,7 @@ export interface UseKeyboardAvoidanceResult {
   /** Attach to the same element, so a re-layout at rest cannot leave it offset. */
   onLayout: (event: LayoutChangeEvent) => void;
   /** Apply to the same element. */
-  animatedStyle: ReturnType<typeof useAnimatedStyle>;
+  animatedStyle: ReturnType<typeof useAnimatedStyle<ViewStyle>>;
 }
 
 type KeyboardHeightHook = () => SharedValue<number>;

package/src/index.ts

@@ -61,6 +61,7 @@ export {
   Avatar,
   type AvatarProps,
   type AvatarBadgeProps,
+  type AvatarGroupProps,
 } from './components/avatar';
 export {
   Attachment,
@@ -522,6 +523,7 @@ export {
   type NumberInputProps,
 } from './components/number-input';
 export { OtpInput, type OtpInputProps } from './components/otp-input';
+export { SearchBar, type SearchBarProps } from './components/search-bar';
 export {
   Panelside,
   usePanelside,
@@ -1031,6 +1033,22 @@ export {
   type SortableReorderDetails,
 } from './components/sortable';
 export { Spinner, type SpinnerProps } from './components/spinner';
+export {
+  Splitter,
+  type SplitterProps,
+  type SplitterPanelProps,
+  type SplitterHandleProps,
+  type SplitterOrientation,
+  type SplitterConstraint,
+} from './components/splitter';
+export {
+  SplitView,
+  useSplitView,
+  type SplitViewProps,
+  type SplitViewPaneProps,
+  type SplitViewDragAreaProps,
+  type SplitViewHandleProps,
+} from './components/split-view';
 export {
   Steps,
   type StepsProps,
@@ -1068,6 +1086,7 @@ export {
   type TimelineStatProps,
   type TimelineVariant,
   type TimelineTone,
+  type TimelineOrientation,
 } from './components/timeline';
 export {
   Toast,

package/src/utils/chart.ts

@@ -264,6 +264,50 @@ export function yOf(value: number, plot: Plot, min: number, max: number): number
   return plot.top + plot.height - ((value - min) / span) * plot.height;
 }
 
+/**
+ * Widens a domain out to round numbers.
+ *
+ * An axis derived from the data ends wherever the data happened to end, so it
+ * gets labelled 34,650 — a number that is true and that nobody was looking for.
+ * Rounding the ends out to a step of 1, 2 or 5 times a power of ten gives the
+ * axis labels somebody can actually read a value off, and it can only ever add
+ * room, never crop.
+ *
+ * Zero survives: any step divides it, so a baseline pinned there stays there.
+ */
+export function niceDomain(
+  min: number,
+  max: number,
+  ticks = 5
+): [number, number] {
+  if (!Number.isFinite(min) || !Number.isFinite(max) || max <= min) {
+    return [min, max];
+  }
+
+  const rough = (max - min) / Math.max(1, ticks);
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const error = rough / magnitude;
+
+  /*
+   * 1, 2, 5 or 10 times the magnitude — the steps a reader can divide in their
+   * head. The thresholds are geometric means rather than the steps themselves,
+   * so each candidate wins over the span it is genuinely closest to. Rounding at
+   * the steps instead pushes anything above 5 up to a full decade, which turns a
+   * top of 31,500 into an axis ending at 40,000 and hands a quarter of the plot
+   * to empty space.
+   */
+  const step =
+    (error >= Math.sqrt(50)
+      ? 10
+      : error >= Math.sqrt(10)
+        ? 5
+        : error >= Math.sqrt(2)
+          ? 2
+          : 1) * magnitude;
+
+  return [Math.floor(min / step) * step, Math.ceil(max / step) * step];
+}
+
 /**
  * A value's x on a *measured* axis, with `min` at the left edge and `max` at
  * the right.
@@ -356,7 +400,16 @@ export function runsOf(
   min: number,
   max: number,
   /** Baselines to stack each point on top of, for a stacked area. */
-  baselines?: number[]
+  baselines?: number[],
+  /**
+   * Place points at band centres rather than spreading them edge to edge.
+   *
+   * A line drawn over columns has to agree with them about where a row sits,
+   * and a column owns a slice of the axis rather than a position on it. Spread
+   * evenly, the first point lands half a slice left of the bar it describes and
+   * every point after it is wrong by the same amount.
+   */
+  banded?: boolean
 ): ChartPoint[][] {
   'worklet';
   const runs: ChartPoint[][] = [];
@@ -370,7 +423,8 @@ export function runsOf(
       continue;
     }
     const stacked = value + (baselines?.[i] ?? 0);
-    run.push({ x: xOf(i, values.length, plot), y: yOf(stacked, plot, min, max) });
+    const x = banded ? bandOf(i, values.length, plot) : xOf(i, values.length, plot);
+    run.push({ x, y: yOf(stacked, plot, min, max) });
   }
   if (run.length) runs.push(run);
   return runs;
@@ -404,7 +458,9 @@ export function linePath(
   max: number,
   curve: ChartCurve,
   loading: boolean,
-  baselines?: number[]
+  baselines?: number[],
+  /** Place points at band centres, for a line drawn over columns. */
+  banded?: boolean
 ): string {
   'worklet';
   if (loading || plot.width <= 0) {
@@ -413,7 +469,7 @@ export function linePath(
     const y = plot.top + plot.height / 2;
     return `M${plot.left},${y} L${plot.left + plot.width},${y}`;
   }
-  return runsOf(values, plot, min, max, baselines)
+  return runsOf(values, plot, min, max, baselines, banded)
     .map((run) => segment(run, curve))
     .join(' ');
 }
@@ -433,13 +489,15 @@ export function areaPath(
   max: number,
   curve: ChartCurve,
   loading: boolean,
-  baselines?: number[]
+  baselines?: number[],
+  /** Place points at band centres, for an area drawn against columns. */
+  banded?: boolean
 ): string {
   'worklet';
   if (loading || plot.width <= 0) return '';
 
   const bottom = plot.top + plot.height;
-  const runs = runsOf(values, plot, min, max, baselines);
+  const runs = runsOf(values, plot, min, max, baselines, banded);
 
   if (!baselines) {
     return runs
@@ -460,7 +518,8 @@ export function areaPath(
     plot,
     min,
     max,
-    baselines
+    baselines,
+    banded
   );
 
   return runs