@vvedantb/native-ui 0.12.1 → 0.17.0

package/src/SurfaceRow.tsx

@@ -0,0 +1,111 @@
+import type { ReactNode } from "react";
+import { Pressable, View } from "react-native";
+import { impactHaptic } from "./haptics";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+
+/** The web `ListRow` metrics: a 4 wide stripe 8 in from top and bottom, the surface radius. */
+export const SURFACE_ROW = {
+  accentWidth: 4,
+  accentInset: 8,
+  radius: tokens.radius.lg,
+};
+
+export type SurfaceRowProps = {
+  children: ReactNode;
+  /** Colour of the stripe down the leading edge: the row's status. Omit for a row with no status. */
+  accentColor?: string;
+  /** Fill. Default `tokens.color.surface`, the web `bg-card`. */
+  backgroundColor?: string;
+  /** A 1 wide hairline in this colour, such as an error row's tinted border. */
+  borderColor?: string;
+  /** Names the row for VoiceOver and TalkBack; the row is one button. */
+  accessibilityLabel: string;
+  /** Read after the label, such as the status and age. */
+  accessibilityHint?: string;
+  onPress: () => void;
+  /**
+   * A long press, such as the row menu (the web right-click), with a light
+   * haptic as it fires. VoiceOver and TalkBack reach it as the `longpress`
+   * action, named by `longPressLabel`.
+   */
+  onLongPress?: () => void;
+  /** The spoken name of the long-press action. Default "More actions". */
+  longPressLabel?: string;
+  /** Classes on the body, in place of the web row inset `p-2.5 pl-3`. */
+  className?: string;
+  testID?: string;
+};
+
+/**
+ * The shell of a status list row, as the web `ListRow`: a card surface with
+ * the surface radius, a 4 wide status stripe on the leading edge (inset 8 top
+ * and bottom, rounded on its outer side) and the body over it. The whole row
+ * is one button that fades while pressed, so put no other control in it; a
+ * long press (`onLongPress`) can open its menu.
+ */
+export function SurfaceRow({
+  children,
+  accentColor,
+  backgroundColor,
+  borderColor,
+  accessibilityLabel,
+  accessibilityHint,
+  onPress,
+  onLongPress,
+  longPressLabel = "More actions",
+  className,
+  testID,
+}: SurfaceRowProps) {
+  const scheme = useScheme();
+  const style = {
+    backgroundColor: backgroundColor ?? tokens.color.surface[scheme],
+    borderRadius: SURFACE_ROW.radius,
+    borderWidth: borderColor ? 1 : 0,
+    borderColor,
+  };
+  const body = (
+    <>
+      {accentColor ? (
+        <View
+          testID={testID ? `${testID}-accent` : undefined}
+          className="absolute left-0"
+          style={{
+            top: SURFACE_ROW.accentInset,
+            bottom: SURFACE_ROW.accentInset,
+            width: SURFACE_ROW.accentWidth,
+            backgroundColor: accentColor,
+            borderTopRightRadius: SURFACE_ROW.accentWidth,
+            borderBottomRightRadius: SURFACE_ROW.accentWidth,
+          }}
+        />
+      ) : null}
+      <View className={className ?? "p-2.5 pl-3"}>{children}</View>
+    </>
+  );
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      onPress={onPress}
+      onLongPress={
+        onLongPress
+          ? () => {
+              impactHaptic("light");
+              onLongPress();
+            }
+          : undefined
+      }
+      accessibilityActions={onLongPress ? [{ name: "longpress", label: longPressLabel }] : undefined}
+      onAccessibilityAction={(event) => {
+        if (event.nativeEvent.actionName === "longpress") onLongPress?.();
+      }}
+      className="overflow-hidden active:opacity-80"
+      style={style}
+    >
+      {body}
+    </Pressable>
+  );
+}

package/src/SwipeableRow.tsx

@@ -0,0 +1,43 @@
+import { createContext, useContext, type ComponentType, type ReactNode } from "react";
+import type { SwipeAction } from "./swipeRow";
+
+export type SwipeableRowProps = {
+  /** Revealed at the left by a swipe right. The first one commits on a full swipe and sits at the screen edge. */
+  leadingActions?: readonly SwipeAction[];
+  /** Revealed at the right by a swipe left. The first one commits on a full swipe and sits at the screen edge. */
+  trailingActions?: readonly SwipeAction[];
+  /** `false` (such as in select mode) leaves the row still under the finger. */
+  enabled?: boolean;
+  /** The row's fill while it moves, so the actions behind do not show through. Default the screen background. */
+  backgroundColor?: string;
+  children: ReactNode;
+};
+
+/**
+ * The Gesture Handler row, from `@vvedantb/native-ui/gesture-handler`
+ * (`GestureHandlerProvider`). A context, so only that entry imports
+ * `react-native-gesture-handler`.
+ */
+export const SwipeRowGestureContext = createContext<ComponentType<SwipeableRowProps> | null>(null);
+
+/**
+ * A list row that a horizontal swipe moves aside, to reveal its actions
+ * behind it, as the iOS and Android mail apps. The row follows the finger
+ * 1:1 and springs on at the finger's speed when it lifts: past half its
+ * buttons it stays open; a full swipe (half the row, with a light haptic as
+ * it arms) runs the first action, and an action that `exits` slides the row
+ * out. Toward a side with no actions it gives a little, with resistance. A
+ * vertical drag scrolls the list first. One row is open at a time: another
+ * row opening, a tap on any row, or `closeSwipeRows` (pass it to the list's
+ * `onScrollBeginDrag`) closes it. With Reduce Motion on it still follows the
+ * finger, and the release settles at once.
+ *
+ * The swipe needs `GestureHandlerProvider`; without it the row is drawn as
+ * is, with no swipe. Either way, spread `swipeActionsAccessibility(actions)`
+ * on the row's main pressable, so screen reader users get the same actions.
+ */
+export function SwipeableRow(props: SwipeableRowProps) {
+  const GestureRow = useContext(SwipeRowGestureContext);
+  if (!GestureRow) return <>{props.children}</>;
+  return <GestureRow {...props} />;
+}

package/src/Switch.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Switch as PrimitiveSwitch } from "./primitives/switch";
 import { cn } from "./cn";
-import { switchColors, switchSize, touchSlop } from "./controlStyles";
+import { switchColors, switchSize, touchSlop, type SwitchSize } from "./controlStyles";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
 
@@ -16,16 +16,18 @@ type SwitchProps = Omit<
   /** Track fill when on or off, in place of the `palette` colours. */
   onColor?: string;
   offColor?: string;
+  /** `sm` (default) is the web `Switch`, 36 × 20; `md` is 40 × 24 with a 20 thumb. */
+  size?: SwitchSize;
 };
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof PrimitiveSwitch>,
   SwitchProps
->(({ value, checked, onValueChange, onCheckedChange, onColor, offColor, ...props }, ref) => {
+>(({ value, checked, onValueChange, onCheckedChange, onColor, offColor, size: sizeName, ...props }, ref) => {
   const resolvedValue = checked ?? value ?? false;
   const colors = switchColors(resolvedValue, useScheme());
   const trackColor = resolvedValue ? onColor : offColor;
-  const size = switchSize(useLargerText());
+  const size = switchSize(useLargerText(), sizeName);
 
   const handleCheckedChange = (nextValue: boolean) => {
     onCheckedChange?.(nextValue);
@@ -45,7 +47,7 @@ const Switch = React.forwardRef<
         trackColor ? { backgroundColor: trackColor, borderColor: trackColor } : colors.track
       }
       thumbStyle={colors.thumb}
-      thumbClassName={cn(size.thumb, resolvedValue ? size.on : "translate-x-0")}
+      thumbClassName={cn(size.thumb, resolvedValue ? size.on : size.off)}
       {...props}
       accessibilityState={{
         ...props.accessibilityState,

package/src/Tabs.tsx

@@ -1,5 +1,6 @@
-import { createContext, useContext, type ReactNode } from "react";
-import { Pressable, Text, View, type ViewProps } from "react-native";
+import { Children, createContext, isValidElement, useContext, type ReactNode } from "react";
+import { Pressable, View, type ViewProps } from "react-native";
+import Animated, { type SharedValue } from "react-native-reanimated";
 import { cn } from "./cn";
 import {
   MIN_TOUCH_TARGET,
@@ -13,6 +14,7 @@ import {
 } from "./controlStyles";
 import { selectionHaptic } from "./haptics";
 import { useControllableState } from "./primitives/use-controllable-state";
+import { useTabIndicator, useTabLabelStyle } from "./tabIndicator";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
 
@@ -27,8 +29,13 @@ const TabsContext = createContext<{
 const TabsListContext = createContext<{
   variant: TabsListVariant;
   size: TabsSize;
+  progress?: SharedValue<number>;
+  indicator?: ReturnType<typeof useTabIndicator>;
 }>({ variant: "pills", size: "default" });
 
+/** A trigger's place in its list, for the linked indicator and label colour. */
+const TabIndexContext = createContext(0);
+
 function useTabs(part: string) {
   const context = useContext(TabsContext);
   if (!context) throw new Error(`${part} must be inside Tabs.`);
@@ -68,36 +75,67 @@ export type TabsListProps = ViewProps & {
   variant?: TabsListVariant;
   /** `sm` makes the triggers smaller. */
   size?: TabsSize;
+  /**
+   * Where a linked `Pager` is, in pages: the first trigger is page 0. With it,
+   * as in `PillTabs`, the selected fill is one indicator that slides with the
+   * pages and each label blends to the selected colour with it. The triggers
+   * are the list's direct children, in page order.
+   */
+  progress?: SharedValue<number>;
   className?: string;
 };
 
 export function TabsList({
   variant = "pills",
   size = "default",
+  progress,
   className,
   style,
+  children,
   ...props
 }: TabsListProps) {
   const scheme = useScheme();
+  const triggers = Children.toArray(children);
+  const indicator = useTabIndicator(progress, triggers.length);
   return (
-    <TabsListContext.Provider value={{ variant, size }}>
+    <TabsListContext.Provider value={{ variant, size, progress, indicator }}>
       <View
         accessibilityRole="tablist"
         className={cn(
           "flex-row",
           // The web lists: `segmented` and `pills` are `inline-flex` (as wide
           // as their tabs), `soft` a full-width row of centred, wrapping pills.
-          // Pills wrap rather than run off a phone screen.
+          // Pills wrap rather than run off a phone screen, except under a
+          // linked indicator, which slides along one line.
           variant === "segmented"
             ? "max-w-full gap-[3px] self-start rounded-full p-[3px]"
             : variant === "soft"
               ? "flex-wrap items-center justify-center gap-1.5"
-              : "max-w-full flex-wrap gap-1.5 self-start",
+              : progress
+                ? "max-w-full gap-1.5 self-start"
+                : "max-w-full flex-wrap gap-1.5 self-start",
           className,
         )}
         style={variant === "segmented" ? [tabTrackStyle(scheme), style] : style}
         {...props}
-      />
+      >
+        {indicator.measured ? (
+          // The selected fill under the triggers, as `PillTabs`.
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              { position: "absolute", left: 0, borderRadius: 9999 },
+              { backgroundColor: tabColors(variant, true, scheme).backgroundColor },
+              indicator.style,
+            ]}
+          />
+        ) : null}
+        {triggers.map((trigger, index) => (
+          <TabIndexContext.Provider key={isValidElement(trigger) && trigger.key !== null ? trigger.key : index} value={index}>
+            {trigger}
+          </TabIndexContext.Provider>
+        ))}
+      </View>
     </TabsListContext.Provider>
   );
 }
@@ -107,6 +145,12 @@ export type TabsTriggerProps = {
   children: ReactNode;
   disabled?: boolean;
   className?: string;
+  /**
+   * The trigger height on screen, for an app whose web call site sizes its
+   * list (a `h-8` list with `p-1` has 24-high triggers). Default: the web
+   * `.t-tab` 30, or the larger-text size. The hit slop still reaches 44.
+   */
+  minHeight?: number;
   testID?: string;
   accessibilityLabel?: string;
 };
@@ -116,18 +160,27 @@ export function TabsTrigger({
   children,
   disabled,
   className,
+  minHeight,
   testID,
   accessibilityLabel,
 }: TabsTriggerProps) {
   const { value: current, setValue } = useTabs("TabsTrigger");
-  const { variant, size } = useContext(TabsListContext);
+  const { variant, size, progress, indicator } = useContext(TabsListContext);
+  const index = useContext(TabIndexContext);
   const largerText = useLargerText();
   const scheme = useScheme();
   const selected = current === value;
   // Fill and label are styles from `tabColors`: apps' `bg-secondary` and
   // `bg-surface` can stay light in dark mode, under a light label.
   const colors = tabColors(variant, selected, scheme);
+  const labelStyle = useTabLabelStyle(
+    progress,
+    index,
+    { selected: tabColors(variant, true, scheme).color, muted: tabColors(variant, false, scheme).color },
+    colors.color,
+  );
   const trigger = tabTriggerSize(variant, size, largerText);
+  const height = minHeight ?? trigger.minHeight;
   // The web `.t-tab` is `font-medium`; the soft trigger is regular.
   const medium = variant !== "soft";
 
@@ -139,8 +192,8 @@ export function TabsTrigger({
         accessibilityLabel ?? (typeof children === "string" ? children : undefined)
       }
       accessibilityState={{ selected, disabled: Boolean(disabled) }}
-      // The web height (30) on screen, a 44 target to touch.
-      hitSlop={touchSlop(MIN_TOUCH_TARGET, trigger.minHeight)}
+      // The trigger height on screen (the web 30 by default), a 44 target to touch.
+      hitSlop={touchSlop(MIN_TOUCH_TARGET, height)}
       disabled={disabled}
       onPress={() => {
         if (selected) return;
@@ -156,20 +209,22 @@ export function TabsTrigger({
       )}
       // A plain object: NativeWind puts the class styles and `style` in an
       // array, where a `({ pressed }) => ...` style is dropped.
-      style={{ backgroundColor: colors.backgroundColor, minHeight: trigger.minHeight }}
+      // When linked and measured, the list's indicator draws the selected fill.
+      style={{ backgroundColor: indicator?.measured ? "transparent" : colors.backgroundColor, minHeight: height }}
+      onLayout={progress ? indicator?.onLayout(index) : undefined}
     >
       {typeof children === "string" || typeof children === "number" ? (
-        <Text
+        <Animated.Text
           numberOfLines={1}
           className={cn(
             "text-center",
             medium ? "font-instrument-sans-medium" : "font-instrument-sans",
             trigger.textClassName,
           )}
-          style={[{ color: colors.color }, medium ? typeStyle("medium") : null]}
+          style={[{ letterSpacing: trigger.letterSpacing }, medium ? typeStyle("medium") : null, labelStyle]}
         >
           {children}
-        </Text>
+        </Animated.Text>
       ) : (
         children
       )}

package/src/Toast.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useSyncExternalStore } from "react";
+import { Fragment, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import {
   AccessibilityInfo,
   ActivityIndicator,
@@ -9,6 +9,8 @@ import {
 } from "react-native";
 import { FadeInUp, FadeOutUp, LinearTransition } from "react-native-reanimated";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { notificationHaptic } from "./haptics";
+import { EASE_OUT } from "./motion";
 import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
 import Svg, { Path } from "react-native-svg";
 import { cn } from "./cn";
@@ -25,6 +27,7 @@ import { tokens } from "./tokens";
 import { useLargerText } from "./theme";
 import { useScheme } from "./useScheme";
 import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+import { ToastDragContext } from "./toastDrag";
 import { getToasts, subscribeToasts, toast, type ToastItem } from "./toastStore";
 
 // On iOS the overlay draws above RN `Modal`s, so toasts show over dialogs (as
@@ -33,6 +36,11 @@ const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : Fragment
 
 const toastShadow = toastShadowStyle(Platform.OS);
 
+// Down from the top edge and back up the way it came, the exit 20% quicker:
+// the reader is done with it.
+const TOAST_ENTER = FadeInUp.duration(200).easing(EASE_OUT);
+const TOAST_EXIT = FadeOutUp.duration(160).easing(EASE_OUT);
+
 /**
  * Renders the `toast()` queue at the top of the screen, inside the safe-area
  * insets. Mount once, inside `SafeAreaProvider` and after the navigator.
@@ -83,15 +91,39 @@ function ToastIcon({ item }: { item: ToastItem }) {
   );
 }
 
+/**
+ * Closes `item` after its `duration`, counting only while it is not `held`:
+ * a finger on the toast pauses the time left, and lifting it resumes. A
+ * toast replaced in place (same id, new item) starts its own time afresh.
+ */
+function useToastTimer(item: ToastItem, held: boolean) {
+  // The time left, and the item it counts for. Only the effect reads and writes it.
+  const left = useRef({ item, ms: item.duration });
+  useEffect(() => {
+    if (left.current.item !== item) left.current = { item, ms: item.duration };
+    if (held || !Number.isFinite(item.duration)) return;
+    const startedAt = Date.now();
+    const timer = setTimeout(() => toast.dismiss(item.id), left.current.ms);
+    return () => {
+      clearTimeout(timer);
+      left.current.ms -= Date.now() - startedAt;
+    };
+  }, [item, held]);
+}
+
 function ToastCard({ item }: { item: ToastItem }) {
   const largerText = useLargerText();
   const scheme = useScheme();
+  // The swipe up to dismiss, under `GestureHandlerProvider`.
+  const Drag = useContext(ToastDragContext);
+  const [held, setHeld] = useState(false);
+  useToastTimer(item, held);
 
+  // A success or error toast reports an operation the user started: one
+  // notification haptic as it shows (or turns from loading into a result).
   useEffect(() => {
-    if (!Number.isFinite(item.duration)) return;
-    const timer = setTimeout(() => toast.dismiss(item.id), item.duration);
-    return () => clearTimeout(timer);
-  }, [item]);
+    if (item.variant === "success" || item.variant === "error") notificationHaptic(item.variant);
+  }, [item.id, item.variant]);
 
   useEffect(() => {
     AccessibilityInfo.announceForAccessibility(
@@ -99,72 +131,82 @@ function ToastCard({ item }: { item: ToastItem }) {
     );
   }, [item.title, item.description]);
 
-  return (
-    <NativeOnlyAnimatedView
-      entering={FadeInUp.duration(200)}
-      exiting={FadeOutUp.duration(160)}
-      layout={LinearTransition}
-    >
-      {/* The web toast: flat overlay fill, radius 16, ring and a light shadow. */}
-      <View style={[toastSurfaceStyle(scheme), toastShadow]}>
-        <Pressable
-          testID={`toast-${item.id}`}
-          // With an action, the text and the action button stay separate
-          // elements for VoiceOver and TalkBack instead of one grouped button.
-          accessible={!item.action}
-          accessibilityRole="button"
-          accessibilityHint="Closes the message"
-          onPress={() => toast.dismiss(item.id)}
-          className="flex-row items-center gap-3 px-4 py-3"
-        >
-          <ToastIcon item={item} />
-          <View className="min-w-0 flex-1">
-            {/* Web `text-sm font-medium leading-snug` (14 / 19.25, 500); `text-lg` with larger text. */}
+  const surface = (
+    // The web toast: flat overlay fill, radius 16, ring and a light shadow.
+    <View style={[toastSurfaceStyle(scheme), toastShadow]}>
+      <Pressable
+        testID={`toast-${item.id}`}
+        // With an action, the text and the action button stay separate
+        // elements for VoiceOver and TalkBack instead of one grouped button.
+        accessible={!item.action}
+        accessibilityRole="button"
+        accessibilityHint="Closes the message"
+        onPress={() => toast.dismiss(item.id)}
+        className="flex-row items-center gap-3 px-4 py-3"
+      >
+        <ToastIcon item={item} />
+        <View className="min-w-0 flex-1">
+          {/* Web `text-sm font-medium leading-snug` (14 / 19.25, 500); `text-lg` with larger text. */}
+          <Text
+            className={cn(
+              "font-instrument-sans-medium",
+              largerText ? "text-lg" : "text-sm",
+            )}
+            style={[
+              textStyle("foreground", scheme),
+              typeStyle("medium"),
+              largerText ? sizeStyle("text-lg") : sizeStyle("text-sm", "snug"),
+            ]}
+          >
+            {item.title}
+          </Text>
+          {item.description ? (
             <Text
               className={cn(
-                "font-instrument-sans-medium",
-                largerText ? "text-lg" : "text-sm",
+                "font-instrument-sans",
+                largerText ? "text-base" : "text-sm",
               )}
-              style={[
-                textStyle("foreground", scheme),
-                typeStyle("medium"),
-                largerText ? sizeStyle("text-lg") : sizeStyle("text-sm", "snug"),
-              ]}
+              style={textStyle("muted", scheme)}
             >
-              {item.title}
+              {item.description}
             </Text>
-            {item.description ? (
-              <Text
-                className={cn(
-                  "font-instrument-sans",
-                  largerText ? "text-base" : "text-sm",
-                )}
-                style={textStyle("muted", scheme)}
-              >
-                {item.description}
-              </Text>
-            ) : null}
-          </View>
-          {item.action ? (
-            <Pressable
-              accessibilityRole="button"
-              hitSlop={8}
-              onPress={() => {
-                item.action?.onPress();
-                toast.dismiss(item.id);
-              }}
-              className="rounded-full bg-secondary px-3 py-1.5 active:opacity-70"
-            >
-              <Text
-                className="font-instrument-sans-semibold text-sm"
-                style={[textStyle("foreground", scheme), typeStyle("semibold")]}
-              >
-                {item.action.label}
-              </Text>
-            </Pressable>
           ) : null}
-        </Pressable>
-      </View>
+        </View>
+        {item.action ? (
+          <Pressable
+            accessibilityRole="button"
+            hitSlop={8}
+            onPress={() => {
+              item.action?.onPress();
+              toast.dismiss(item.id);
+            }}
+            className="rounded-full bg-secondary px-3 py-1.5 active:opacity-70"
+          >
+            <Text
+              className="font-instrument-sans-semibold text-sm"
+              style={[textStyle("foreground", scheme), typeStyle("semibold")]}
+            >
+              {item.action.label}
+            </Text>
+          </Pressable>
+        ) : null}
+      </Pressable>
+    </View>
+  );
+
+  return (
+    <NativeOnlyAnimatedView
+      entering={TOAST_ENTER}
+      exiting={TOAST_EXIT}
+      layout={LinearTransition}
+    >
+      {Drag ? (
+        <Drag onDismiss={() => toast.dismiss(item.id)} onHoldChange={setHeld}>
+          {surface}
+        </Drag>
+      ) : (
+        surface
+      )}
     </NativeOnlyAnimatedView>
   );
 }

package/src/ai/activity-step-detail.tsx

@@ -6,6 +6,7 @@ import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
 import { MONO_FONT, chatTextSize } from "./chat-text";
+import { EMERALD } from "./unified-diff";
 import { CodeBlock } from "./code-block";
 
 /** The step fields the detail reads: the web `ActivityStep` subset. */
@@ -30,9 +31,6 @@ export type ActivityStepDetailProps = {
   loadingLabel?: string;
 };
 
-/** Web `bg-emerald-500/10` and `text-emerald-700` (dark `text-emerald-300`). */
-const EMERALD = { fill: "#10b981", light: "#047857", dark: "#6ee7b7" } as const;
-
 /**
  * A tool step's body, as the web `ActivityStepDetail`: exit code and
  * "Truncated" badges, the shell transcript (`$ command`, a blank line, then