panelui-native 0.63.0 → 0.66.1

package/src/components/signature/signature-accessibility.ts

@@ -0,0 +1,67 @@
+export type SignatureChangeKind = 'draw' | 'undo' | 'redo' | 'clear';
+
+export interface SignatureAccessibilityAction {
+  name: string;
+  label: string;
+}
+
+/**
+ * What the pad reads as when it is focused.
+ *
+ * It counts strokes and says nothing about whether the signature is finished,
+ * because the component cannot know that — one mark may be the whole signature
+ * or the first letter of it. Announcing "complete" after the first stroke tells
+ * somebody who cannot see the pad that they are done when they may not be.
+ */
+export function signatureAccessibilityValue(strokeCount: number) {
+  return {
+    text:
+      strokeCount === 0
+        ? 'Empty signature'
+        : `Signed, ${strokeCount} ${strokeCount === 1 ? 'stroke' : 'strokes'}`,
+  };
+}
+
+export function signatureAccessibilityActions(
+  strokeCount: number,
+  undoneCount: number,
+  alternative: boolean,
+  disabled: boolean
+): SignatureAccessibilityAction[] {
+  if (disabled) return [];
+
+  const actions: SignatureAccessibilityAction[] = [];
+  if (strokeCount > 0) {
+    actions.push(
+      { name: 'signature-undo', label: 'Undo last stroke' },
+      { name: 'signature-clear', label: 'Clear signature' }
+    );
+  }
+  if (undoneCount > 0) {
+    actions.push({ name: 'signature-redo', label: 'Redo last stroke' });
+  }
+  if (alternative) {
+    actions.push({ name: 'signature-alternative', label: 'Use another signature method' });
+  }
+  return actions;
+}
+
+/**
+ * Spoken when the pad crosses between empty and not, and nowhere else.
+ *
+ * Every stroke is silent on purpose: a running commentary during drawing is
+ * noise over the one gesture the reader is concentrating on. The two crossings
+ * are the ones that cannot be felt — that the pad now holds something, and that
+ * it no longer does.
+ */
+export function signatureAnnouncement(
+  previousCount: number,
+  strokeCount: number,
+  change: SignatureChangeKind
+): string | null {
+  if (previousCount === strokeCount) return null;
+  if (change === 'clear') return 'Signature cleared. Signature is empty.';
+  if (strokeCount === 0) return 'Signature is empty.';
+  if (previousCount === 0) return 'Signature started.';
+  return null;
+}

package/src/components/slider/index.tsx

@@ -186,6 +186,12 @@ function snap(value: number, min: number, max: number, step: number) {
 /** Which thumb a drag has hold of. A one-thumb slider only ever has `high`. */
 type Thumb = 'low' | 'high';
 
+function recordStep(last: Record<Thumb, number>, thumb: Thumb, next: number) {
+  if (next === last[thumb]) return false;
+  last[thumb] = next;
+  return true;
+}
+
 export const Slider = forwardRef<View, SliderProps>(
   (
     {
@@ -278,9 +284,12 @@ export const Slider = forwardRef<View, SliderProps>(
     rangeChangeRef.current = onRangeChange;
     const rangeCommitRef = useRef(onRangeCommit);
     rangeCommitRef.current = onRangeCommit;
-    // The last step a drag ticked on, so haptics fire once per step, not per
-    // pixel of movement within it.
-    const lastTick = useRef(value);
+    // Each thumb owns its last tick. Sharing one scalar lets the stationary
+    // endpoint suppress the thumb under the finger on a range slider.
+    const lastTick = useRef<Record<Thumb, number>>({
+      low,
+      high: isRange ? high : value,
+    });
     /*
      * True from the moment a finger lands until it lifts. A controlled parent
      * echoes every change straight back as a new prop, and springing the thumb
@@ -329,8 +338,7 @@ export const Slider = forwardRef<View, SliderProps>(
       (p: number, commit: boolean) => {
         const raw = min + p * span;
         const snapped = snap(raw, min, max, step);
-        if (haptics && snapped !== lastTick.current) {
-          lastTick.current = snapped;
+        if (haptics && recordStep(lastTick.current, 'high', snapped)) {
           selectionTick();
         }
         emitChange(snapped);
@@ -340,16 +348,13 @@ export const Slider = forwardRef<View, SliderProps>(
     );
 
     const commitRangeFromProgress = useCallback(
-      (pLow: number, pHigh: number, commit: boolean) => {
+      (pLow: number, pHigh: number, commit: boolean, thumb: Thumb) => {
         const next: [number, number] = [
           snap(min + pLow * span, min, max, step),
           snap(min + pHigh * span, min, max, step),
         ];
-        // Either end crossing onto a new step is a step crossed — the tick is
-        // about the thumb under the finger, and only one of them is.
-        const moved = next[0] !== lastTick.current && next[1] !== lastTick.current;
-        if (haptics && moved) {
-          lastTick.current = next[0];
+        const nextStep = thumb === 'low' ? next[0] : next[1];
+        if (haptics && recordStep(lastTick.current, thumb, nextStep)) {
           selectionTick();
         }
         emitRangeChange(next);
@@ -418,12 +423,12 @@ export const Slider = forwardRef<View, SliderProps>(
           const ceiling = Math.max(highProgress.value - gap, 0);
           const next = Math.min(Math.max(dragStartLow.value + delta, 0), ceiling);
           lowProgress.value = next;
-          runOnJS(commitRangeFromProgress)(next, highProgress.value, false);
+          runOnJS(commitRangeFromProgress)(next, highProgress.value, false, 'low');
         } else {
           const floor = Math.min(lowProgress.value + gap, 1);
           const next = Math.min(Math.max(dragStartHigh.value + delta, floor), 1);
           highProgress.value = next;
-          runOnJS(commitRangeFromProgress)(lowProgress.value, next, false);
+          runOnJS(commitRangeFromProgress)(lowProgress.value, next, false, 'high');
         }
       })
       .onFinalize(() => {
@@ -431,7 +436,12 @@ export const Slider = forwardRef<View, SliderProps>(
         pressedLow.value = withSpring(0, KNOB_SPRING);
         runOnJS(setDragging)(false);
         if (isRange) {
-          runOnJS(commitRangeFromProgress)(lowProgress.value, highProgress.value, true);
+          runOnJS(commitRangeFromProgress)(
+            lowProgress.value,
+            highProgress.value,
+            true,
+            activeThumb.value
+          );
         } else {
           runOnJS(commitFromProgress)(highProgress.value, true);
         }
@@ -456,11 +466,11 @@ export const Slider = forwardRef<View, SliderProps>(
         if (pickThumb(event.x) === 'low') {
           const bounded = Math.min(next, Math.max(highProgress.value - gap, 0));
           lowProgress.value = withSpring(bounded, SPRING);
-          runOnJS(commitRangeFromProgress)(bounded, highProgress.value, true);
+          runOnJS(commitRangeFromProgress)(bounded, highProgress.value, true, 'low');
         } else {
           const bounded = Math.max(next, Math.min(lowProgress.value + gap, 1));
           highProgress.value = withSpring(bounded, SPRING);
-          runOnJS(commitRangeFromProgress)(lowProgress.value, bounded, true);
+          runOnJS(commitRangeFromProgress)(lowProgress.value, bounded, true, 'high');
         }
       });
 
@@ -503,7 +513,7 @@ export const Slider = forwardRef<View, SliderProps>(
         const next = snap(value + dir * (step || 1), min, max, step);
         if (next === value) return;
         if (haptics) {
-          lastTick.current = next;
+          recordStep(lastTick.current, 'high', next);
           selectionTick();
         }
         highProgress.value = withSpring(toFraction(next), SPRING);
@@ -521,7 +531,7 @@ export const Slider = forwardRef<View, SliderProps>(
       const next = snap(bounded, min, max, step);
       if (next === current) return;
       if (haptics) {
-        lastTick.current = next;
+        recordStep(lastTick.current, thumb, next);
         selectionTick();
       }
       const pair: [number, number] = thumb === 'low' ? [next, high] : [low, next];

package/src/components/sortable/index.tsx

@@ -89,6 +89,7 @@ import { useCSSVariable } from 'uniwind';
 import { GripVerticalIcon, IconColorProvider } from '../../icons';
 import { cn } from '../../utils/cn';
 import { impactKnock, selectionTick } from '../../utils/haptics';
+import { moveWithPinned, stepWithPinned } from './reorder';
 
 /**
  * Rows getting out of the way of the one being carried. Quick, because they
@@ -228,66 +229,6 @@ function slotCenter(
   return offset + (self === undefined ? 0 : (heights[self] ?? 0)) / 2;
 }
 
-/**
- * The order after a row has moved, with pinned rows left where they were.
- *
- * The move is applied first, to the whole list, so a carried row can be dragged
- * *past* a pinned one — refusing the move instead would make a pinned row a
- * wall, and a row that holds its place is not the same as a row nothing may
- * cross. The pinned ids are then put back at the indices they occupy in the
- * laid-out order, and everything else falls into the slots that are left, in
- * the order the move produced.
- *
- * `laid` rather than `list` is what the fixed indices are read from, because
- * that is the one order a pinned row is guaranteed to be correctly placed in:
- * it is where it was rendered, and holding its slot is the whole point.
- */
-function moveWithPinned(
-  list: readonly string[],
-  laid: readonly string[],
-  pinned: Record<string, boolean>,
-  id: string,
-  from: number,
-  to: number
-): string[] {
-  'worklet';
-  const moved = [...list];
-  moved.splice(from, 1);
-  moved.splice(to, 0, id);
-
-  const next: (string | undefined)[] = [];
-  let anyPinned = false;
-  for (let i = 0; i < moved.length; i += 1) next.push(undefined);
-  for (let i = 0; i < laid.length && i < next.length; i += 1) {
-    const at = laid[i];
-    if (at !== undefined && pinned[at]) {
-      next[i] = at;
-      anyPinned = true;
-    }
-  }
-  if (!anyPinned) return moved;
-
-  const free: string[] = [];
-  for (let i = 0; i < moved.length; i += 1) {
-    const at = moved[i];
-    if (at !== undefined && !pinned[at]) free.push(at);
-  }
-
-  const result: string[] = [];
-  let f = 0;
-  for (let i = 0; i < next.length; i += 1) {
-    const held = next[i];
-    if (held !== undefined) {
-      result.push(held);
-      continue;
-    }
-    const take = free[f];
-    f += 1;
-    if (take !== undefined) result.push(take);
-  }
-  return result;
-}
-
 /**
  * Where the dragged row belongs now, given where its edges have reached.
  *
@@ -760,15 +701,22 @@ function SortableRoot({
       const current = rendered.value.indexOf(id);
       if (current < 0) return;
 
-      const to = current + delta;
-      if (to < 0 || to >= rendered.value.length) return;
+      const next = stepWithPinned(
+        rendered.value,
+        rendered.value,
+        pinned.value,
+        id,
+        current,
+        delta
+      );
+      const to = next.indexOf(id);
+      if (to === current) return;
 
-      const next = reorderItems(rendered.value, current, to);
       order.value = next;
       if (haptics) selectionTick();
       onReorder?.(next, { id, from: current, to });
     },
-    [haptics, onReorder, order, rendered]
+    [haptics, onReorder, order, pinned, rendered]
   );
 
   const context = useMemo<SortableContextValue>(

package/src/components/sortable/reorder.ts

@@ -0,0 +1,88 @@
+type PinnedItems = Readonly<Record<string, boolean>>;
+
+/**
+ * Move one item, then restore pinned items to the slots in `laid`.
+ *
+ * Restoring after the move lets an item cross a pin instead of turning that
+ * slot into a wall. The laid-out order is the source of truth because it is
+ * the last arrangement the caller rendered and therefore the one whose pins
+ * are known to be in their promised positions.
+ */
+export function moveWithPinned(
+  list: readonly string[],
+  laid: readonly string[],
+  pinned: PinnedItems,
+  id: string,
+  from: number,
+  to: number
+): string[] {
+  'worklet';
+  if (
+    from === to ||
+    from < 0 ||
+    from >= list.length ||
+    to < 0 ||
+    to >= list.length ||
+    list[from] !== id ||
+    pinned[id]
+  ) {
+    return [...list];
+  }
+
+  const moved = [...list];
+  moved.splice(from, 1);
+  moved.splice(to, 0, id);
+
+  const next: (string | undefined)[] = [];
+  let anyPinned = false;
+  for (let i = 0; i < moved.length; i += 1) next.push(undefined);
+  for (let i = 0; i < laid.length && i < next.length; i += 1) {
+    const at = laid[i];
+    if (at !== undefined && pinned[at]) {
+      next[i] = at;
+      anyPinned = true;
+    }
+  }
+  if (!anyPinned) return moved;
+
+  const free: string[] = [];
+  for (let i = 0; i < moved.length; i += 1) {
+    const at = moved[i];
+    if (at !== undefined && !pinned[at]) free.push(at);
+  }
+
+  const result: string[] = [];
+  let freeIndex = 0;
+  for (let i = 0; i < next.length; i += 1) {
+    const held = next[i];
+    if (held !== undefined) {
+      result.push(held);
+      continue;
+    }
+    const take = free[freeIndex];
+    freeIndex += 1;
+    if (take !== undefined) result.push(take);
+  }
+  return result;
+}
+
+/** Move by one available slot, stepping past pinned slots that would be a no-op. */
+export function stepWithPinned(
+  list: readonly string[],
+  laid: readonly string[],
+  pinned: PinnedItems,
+  id: string,
+  from: number,
+  delta: number
+): string[] {
+  'worklet';
+  const direction = Math.sign(delta);
+  if (direction === 0) return [...list];
+
+  for (let to = from + direction; to >= 0 && to < list.length; to += direction) {
+    const next = moveWithPinned(list, laid, pinned, id, from, to);
+    if (next.indexOf(id) !== from) return next;
+  }
+
+  return [...list];
+}

package/src/components/swipe/index.tsx

@@ -258,10 +258,13 @@ const actionVariants = tv({
     color: {
       default: { root: 'bg-muted-foreground', label: 'text-background' },
       primary: { root: 'bg-primary', label: 'text-primary-foreground' },
-      success: { root: 'bg-success', label: 'text-white' },
-      warning: { root: 'bg-warning', label: 'text-white' },
-      info: { root: 'bg-info', label: 'text-white' },
-      destructive: { root: 'bg-destructive', label: 'text-white' },
+      success: { root: 'bg-success', label: 'text-success-solid-foreground' },
+      warning: { root: 'bg-warning', label: 'text-warning-solid-foreground' },
+      info: { root: 'bg-info', label: 'text-info-solid-foreground' },
+      destructive: {
+        root: 'bg-destructive',
+        label: 'text-destructive-solid-foreground',
+      },
     },
   },
   defaultVariants: {

package/src/components/switch/index.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useEffect } from 'react';
-import { Pressable, View } from 'react-native';
+import { Pressable, View, type PressableProps } from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedStyle,
@@ -10,6 +10,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
 import { useDirectionSign } from '../../hooks/use-direction';
 import { getNativeUI } from '../../native';
 import { selectionTick } from '../../utils/haptics';
+import { useFieldLabelledBy } from '../field';
 
 const SPRING = { damping: 18, stiffness: 250, mass: 0.5 } as const;
 
@@ -35,7 +36,22 @@ const switchVariants = tv({
 
 const TRAVEL: Record<'sm' | 'md', number> = { sm: 16, md: 20 };
 
-export interface SwitchProps extends VariantProps<typeof switchVariants> {
+/**
+ * Room around each track so the target reaches 48dp on both axes.
+ *
+ * Slop rather than a bigger box, because a box is layout: a switch sized to
+ * its target would stand 48dp tall in every row it has ever been placed in,
+ * and the tracks are only 24 and 28 tall. The `md` track is already 48 wide,
+ * which is why the horizontal figures differ between the two sizes.
+ */
+const SWITCH_HIT_SLOP: Record<'sm' | 'md', { top: number; bottom: number; left: number; right: number }> = {
+  sm: { top: 12, bottom: 12, left: 4, right: 4 },
+  md: { top: 10, bottom: 10, left: 0, right: 0 },
+};
+
+export interface SwitchProps
+  extends VariantProps<typeof switchVariants>,
+    Pick<PressableProps, 'accessibilityLabel' | 'accessibilityHint' | 'accessibilityLabelledBy'> {
   className?: string;
   value: boolean;
   onValueChange?: (value: boolean) => void;
@@ -48,7 +64,7 @@ export interface SwitchProps extends VariantProps<typeof switchVariants> {
    * `className` and `size` are ignored.
    */
   native?: boolean;
-  /** Text label drawn beside the control. Native mode only. */
+  /** Names the control to assistive technology; native mode also draws it. */
   label?: string;
   /**
    * Tick the haptic engine each time the switch is flipped — a toggle you feel
@@ -65,7 +81,19 @@ export interface SwitchProps extends VariantProps<typeof switchVariants> {
  */
 export const Switch = forwardRef<View, SwitchProps>(
   (
-    { className, value, onValueChange, disabled, size = 'md', native, label, haptics },
+    {
+      className,
+      value,
+      onValueChange,
+      disabled,
+      size = 'md',
+      native,
+      label,
+      haptics,
+      accessibilityLabel,
+      accessibilityHint,
+      accessibilityLabelledBy,
+    },
     ref
   ) => {
     const progress = useSharedValue(value ? 1 : 0);
@@ -75,6 +103,9 @@ export const Switch = forwardRef<View, SwitchProps>(
     const sign = useDirectionSign();
     const nativeUI = native ? getNativeUI() : null;
     const slots = switchVariants({ size, disabled: !!disabled });
+    // React Native's labelled-by relationship is Android-only. `label` or an
+    // explicit accessibilityLabel remains the portable name on iOS.
+    const fieldLabelledBy = useFieldLabelledBy();
 
     useEffect(() => {
       progress.value = withSpring(value ? 1 : 0, SPRING);
@@ -101,7 +132,7 @@ export const Switch = forwardRef<View, SwitchProps>(
           <NativeSwitch
             value={value}
             onValueChange={(next: boolean) => onValueChange?.(next)}
-            label={label}
+            label={label ?? accessibilityLabel}
             disabled={disabled}
           />
         </Host>
@@ -113,12 +144,17 @@ export const Switch = forwardRef<View, SwitchProps>(
         ref={ref}
         accessibilityRole="switch"
         accessibilityState={{ checked: value, disabled: !!disabled }}
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityHint={accessibilityHint}
+        accessibilityLabelledBy={
+          accessibilityLabelledBy ?? (accessibilityLabel || label ? undefined : fieldLabelledBy)
+        }
         disabled={disabled}
         onPress={() => {
           if (haptics) selectionTick();
           onValueChange?.(!value);
         }}
-        hitSlop={8}
+        hitSlop={SWITCH_HIT_SLOP[size]}
       >
         <View className={slots.track({ className })}>
           <Animated.View style={activeTrackStyle} className={slots.activeTrack()} />

package/src/components/time-picker/accessibility.ts

@@ -0,0 +1,24 @@
+/** Resolve a standard adjustable action without wrapping past either bound. */
+export function indexForAccessibilityAction(
+  index: number,
+  length: number,
+  actionName: string,
+  disabled = false
+): number | undefined {
+  const direction = actionName === 'increment' ? 1 : actionName === 'decrement' ? -1 : 0;
+  if (disabled || direction === 0 || length <= 0) return undefined;
+
+  const next = Math.min(Math.max(index + direction, 0), length - 1);
+  return next === index ? undefined : next;
+}
+
+/** Keep the numeric adjustable range aligned with the values the face offers. */
+export function accessibilityValueForIndex(index: number, length: number, text: string) {
+  const max = Math.max(0, length - 1);
+  return {
+    min: 0,
+    max,
+    now: Math.min(Math.max(index, 0), max),
+    text,
+  };
+}

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

@@ -55,6 +55,7 @@ import {
 import {
   ScrollView,
   View,
+  type AccessibilityActionEvent,
   type NativeScrollEvent,
   type NativeSyntheticEvent,
 } from 'react-native';
@@ -74,6 +75,10 @@ import { ClockIcon } from '../../icons';
 import { Text } from '../../primitives/text';
 import { cn } from '../../utils/cn';
 import { selectionTick } from '../../utils/haptics';
+import {
+  accessibilityValueForIndex,
+  indexForAccessibilityAction,
+} from './accessibility';
 import {
   clampTime,
   displayHour,
@@ -398,6 +403,20 @@ function Column<T>({
 
   const selectedItem = items[index];
 
+  const onAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const next = indexForAccessibilityAction(
+        index,
+        items.length,
+        event.nativeEvent.actionName,
+        disabled
+      );
+      if (next === undefined) return;
+      onIndexChange(next);
+    },
+    [disabled, index, items.length, onIndexChange]
+  );
+
   return (
     <Animated.ScrollView
       ref={ref}
@@ -426,7 +445,12 @@ function Column<T>({
       removeClippedSubviews={false}
       accessibilityRole="adjustable"
       accessibilityLabel={accessibilityLabel}
-      accessibilityValue={selectedItem ? { text: label(selectedItem) } : undefined}
+      accessibilityState={{ disabled }}
+      accessibilityValue={
+        selectedItem ? accessibilityValueForIndex(index, items.length, label(selectedItem)) : undefined
+      }
+      accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+      onAccessibilityAction={onAccessibilityAction}
     >
       {items.map((item, i) => (
         <ColumnRow key={i} offset={offset} index={i} selected={i === index}>
@@ -930,6 +954,21 @@ function RulerFace({
     [width]
   );
 
+  const onAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      const next = indexForAccessibilityAction(
+        index,
+        times.length,
+        event.nativeEvent.actionName,
+        disabled
+      );
+      if (next === undefined) return;
+      const time = times[next];
+      if (time) onValueChange(time);
+    },
+    [disabled, index, onValueChange, times]
+  );
+
   return (
     <View className={readout === 'none' ? undefined : 'gap-4'}>
       {readout === 'none' ? null : (
@@ -955,7 +994,14 @@ function RulerFace({
           onMomentumScrollEnd={onMomentumEnd}
           accessibilityRole="adjustable"
           accessibilityLabel="Time"
-          accessibilityValue={{ text: formatTime(value, { hourCycle, locale }) }}
+          accessibilityState={{ disabled }}
+          accessibilityValue={accessibilityValueForIndex(
+            index,
+            times.length,
+            formatTime(value, { hourCycle, locale })
+          )}
+          accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
+          onAccessibilityAction={onAccessibilityAction}
         >
           {/*
             No numbers under the ticks. The readout above already says the