@vvedantb/native-ui 0.13.0 → 0.17.1

package/src/markdown/tableText.ts

@@ -0,0 +1,58 @@
+/**
+ * A markdown table as text, for the table's copy actions: the formats and
+ * escaping of the web table controls (Streamdown's Copy table: Markdown, CSV
+ * and TSV), from each cell's plain text.
+ */
+export type MarkdownTableData = { headers: string[]; rows: string[][] };
+
+export type MarkdownTableFormat = "markdown" | "csv" | "tsv";
+
+/** CSV: a cell with a comma, quote or line break is quoted, its quotes doubled. Lines join with `\n`. */
+function toCsv({ headers, rows }: MarkdownTableData): string {
+  const cell = (text: string) => (/[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+  return [...(headers.length > 0 ? [headers] : []), ...rows].map((row) => row.map(cell).join(",")).join("\n");
+}
+
+/** TSV: tabs and line breaks in a cell are written as `\t`, `\n` and `\r`. */
+function toTsv({ headers, rows }: MarkdownTableData): string {
+  const cell = (text: string) => text.replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+  return [...(headers.length > 0 ? [headers] : []), ...rows].map((row) => row.map(cell).join("\t")).join("\n");
+}
+
+const MARKDOWN_ESCAPES: Record<string, string> = { "\\": "\\\\", "|": "\\|", "\n": "<br>", "&": "&amp;", "<": "&lt;", ">": "&gt;" };
+
+/** GitHub markdown: pipes and backslashes escaped, line breaks as `<br>`, short rows padded to the header. */
+function toMarkdown({ headers, rows }: MarkdownTableData): string {
+  if (headers.length === 0) return "";
+  const cell = (text: string) => text.replace(/[\\|\n&<>]/g, (char) => MARKDOWN_ESCAPES[char] ?? char);
+  const line = (cells: string[]) => `| ${cells.join(" | ")} |`;
+  return [
+    line(headers.map(cell)),
+    line(headers.map(() => "---")),
+    ...rows.map((row) => line(row.length < headers.length ? headers.map((_, index) => cell(row[index] ?? "")) : row.map(cell))),
+  ].join("\n");
+}
+
+/** The table in one of the copy formats. */
+export function markdownTableText(data: MarkdownTableData, format: MarkdownTableFormat): string {
+  if (format === "csv") return toCsv(data);
+  if (format === "tsv") return toTsv(data);
+  return toMarkdown(data);
+}
+
+/**
+ * Column widths for the full-screen table, where columns size to their text
+ * as the web table does: React Native has no table layout, so the longest
+ * line in each column, at `charWidth` a character plus the cell padding,
+ * clamped to `[min, max]`.
+ */
+export function markdownTableColumnWidths(
+  data: MarkdownTableData,
+  { charWidth, padding, min, max }: { charWidth: number; padding: number; min: number; max: number },
+): number[] {
+  return data.headers.map((header, column) => {
+    const cells = [header, ...data.rows.map((row) => row[column] ?? "")];
+    const longest = Math.max(...cells.flatMap((text) => text.split("\n").map((line) => line.length)));
+    return Math.min(max, Math.max(min, Math.ceil(longest * charWidth + padding)));
+  });
+}

package/src/marketing/UpgradeToProCard.tsx

@@ -46,8 +46,9 @@ export function UpgradeToProCard({
   const largerText = useLargerText();
   // Each class is also set as a style (`sizeStyle`): web `text-sm` is 14 / 20.
   const titleSize = largerText ? "text-lg" : "text-sm";
-  const ctaSize = largerText ? "text-base" : "text-xs";
-  // The web pill is a `Button` `sm` (`font-medium`) in `bg-foreground text-background`.
+  const ctaSize = largerText ? "text-base" : "text-sm";
+  // The web pill is a `Button` `sm` (`font-medium`) in `bg-foreground text-background`,
+  // at the phone `Button` `sm` size: 36 high with a 14 label (the web h-8 `text-xs`).
   const pill = (label: string, accessibilityLabel?: string) => (
     <Pressable
       testID={testID ? `${testID}-cta` : undefined}
@@ -57,7 +58,7 @@ export function UpgradeToProCard({
       hitSlop={HIT_SLOP}
       className={cn(
         "shrink-0 items-center justify-center rounded-full active:opacity-80",
-        largerText ? "min-h-12 px-4" : "min-h-8 px-3",
+        largerText ? "min-h-12 px-4" : "min-h-9 px-3",
       )}
       style={{ backgroundColor: tokens.color.foreground[scheme] }}
     >

package/src/media/ImageGallery.tsx

@@ -0,0 +1,224 @@
+import { useState } from "react";
+import { FlatList, Image, Modal, Pressable, Text, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconExternalLink, IconX } from "@tabler/icons-react-native";
+import { typeStyle } from "../controlStyles";
+import { IconButton } from "../IconButton";
+import { withAlpha } from "../palette";
+import { tokens } from "../tokens";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { imageAspect, imageGridTiles, imageViewerPage, MEDIA, type GalleryImage, type ImageGridTile } from "./imageGrid";
+
+export type ImageGalleryProps = {
+  images: GalleryImage[];
+  /** With it, the viewer has an "Open in browser" button that hands it the image's URL. */
+  onOpenImage?: (url: string) => void;
+  testID?: string;
+};
+
+/**
+ * The web `ImageGalleryPreview`: one image at its own shape (as wide as the
+ * column, at most 384 high), or up to a 2 x 2 grid of 4:3 tiles with "+N" on
+ * the fourth. A tap opens `ImageViewer` at that image. Images only; draw
+ * videos apart.
+ */
+export function ImageGallery({ images, onOpenImage, testID }: ImageGalleryProps) {
+  const [viewerIndex, setViewerIndex] = useState<number | null>(null);
+  const first = images[0];
+  if (!first) return null;
+  return (
+    <View testID={testID} className="w-full">
+      {images.length === 1 ? (
+        <SingleImage image={first} onOpen={() => setViewerIndex(0)} />
+      ) : (
+        <ImageGrid images={images} onOpen={setViewerIndex} />
+      )}
+      <ImageViewer
+        images={images}
+        index={viewerIndex}
+        onIndexChange={setViewerIndex}
+        onClose={() => setViewerIndex(null)}
+        onOpenImage={onOpenImage}
+      />
+    </View>
+  );
+}
+
+/** The hairline-ringed, rounded frame of a gallery image or grid. */
+function useMediaFrame() {
+  const scheme = useScheme();
+  return {
+    borderRadius: MEDIA.radius,
+    borderWidth: 1,
+    borderColor: MEDIA.outline[scheme],
+    overflow: "hidden" as const,
+    backgroundColor: tokens.color.surfaceSecondary[scheme],
+  };
+}
+
+/**
+ * A lone image, sized from the column and the image's own shape and capped
+ * at 384 high, so a tall capture keeps its shape instead of being cropped.
+ * Until both are known it holds a full-width 4:3 box.
+ */
+function SingleImage({ image, onOpen }: { image: GalleryImage; onOpen: () => void }) {
+  const frame = useMediaFrame();
+  const [columnWidth, setColumnWidth] = useState(0);
+  const [loadedSize, setLoadedSize] = useState<{ width: number; height: number } | null>(null);
+  const aspect = imageAspect(loadedSize);
+  const width = columnWidth > 0 ? Math.min(columnWidth, MEDIA.singleMaxHeight * aspect) : undefined;
+  return (
+    <View className="w-full" onLayout={(event) => setColumnWidth(event.nativeEvent.layout.width)}>
+      <Pressable
+        accessibilityRole="imagebutton"
+        accessibilityLabel={image.alt ?? "Image"}
+        accessibilityHint="Opens full screen"
+        onPress={onOpen}
+        className="active:opacity-90"
+        style={[frame, width === undefined ? { width: "100%", aspectRatio: aspect } : { width, height: width / aspect }]}
+      >
+        <Image
+          source={{ uri: image.url }}
+          resizeMode="cover"
+          style={{ width: "100%", height: "100%" }}
+          onLoad={(event) => setLoadedSize(event.nativeEvent.source)}
+        />
+      </Pressable>
+    </View>
+  );
+}
+
+/**
+ * Two columns of 4:3 tiles, filled as the web grid's rows are: tiles 0 and 2
+ * on the left, 1 and 3 on the right. With three, the first fills the left
+ * column, as tall as the two on the right.
+ */
+function ImageGrid({ images, onOpen }: { images: GalleryImage[]; onOpen: (index: number) => void }) {
+  const frame = useMediaFrame();
+  const tiles = imageGridTiles(images.length);
+  const spans = tiles[0]?.spansColumn === true;
+  const left = spans ? tiles.slice(0, 1) : tiles.filter((tile) => tile.index % 2 === 0);
+  const right = spans ? tiles.slice(1) : tiles.filter((tile) => tile.index % 2 === 1);
+  const tileStyle = { width: "100%" as const, aspectRatio: MEDIA.tileAspect };
+  const cell = (tile: ImageGridTile) => {
+    const image = images[tile.index];
+    if (!image) return null;
+    const name = image.alt ?? `Image ${tile.index + 1}`;
+    return (
+      <Pressable
+        key={tile.index}
+        accessibilityRole="imagebutton"
+        accessibilityLabel={tile.overflow > 0 ? `${name}, ${tile.overflow} more` : name}
+        accessibilityHint="Opens full screen"
+        onPress={() => onOpen(tile.index)}
+        className="active:opacity-90"
+        style={tile.spansColumn ? { width: "100%", flex: 1 } : tileStyle}
+      >
+        <Image source={{ uri: image.url }} resizeMode="cover" style={{ width: "100%", height: "100%" }} />
+        {tile.overflow > 0 ? (
+          <View className="absolute inset-0 items-center justify-center" style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}>
+            <Text className="font-instrument-sans-semibold text-xl" style={[{ color: tokens.color.white }, typeStyle("semibold")]}>
+              {`+${tile.overflow}`}
+            </Text>
+          </View>
+        ) : null}
+      </Pressable>
+    );
+  };
+  return (
+    <View style={[frame, { flexDirection: "row", gap: MEDIA.gap }]}>
+      <View style={{ flex: 1, gap: MEDIA.gap }}>{left.map(cell)}</View>
+      <View style={{ flex: 1, gap: MEDIA.gap }}>{right.map(cell)}</View>
+    </View>
+  );
+}
+
+export type ImageViewerProps = {
+  images: GalleryImage[];
+  /** The image on screen; `null` while closed. */
+  index: number | null;
+  onIndexChange: (index: number) => void;
+  onClose: () => void;
+  /** With it, an "Open in browser" button hands it the image's URL. */
+  onOpenImage?: (url: string) => void;
+};
+
+/**
+ * The web `ImageLightbox` on a phone: the images full screen on black, one
+ * page each, swiped sideways (TalkBack and VoiceOver step with the adjustable
+ * actions). Close (X, or Android back) and "Open in browser" sit at the top,
+ * "2 / 5" at the bottom when there is more than one. No pinch zoom. It fades
+ * in, or appears at once with Reduce Motion.
+ */
+export function ImageViewer({ images, index, onIndexChange, onClose, onOpenImage }: ImageViewerProps) {
+  const reduceMotion = useReduceMotion();
+  if (index === null) return null;
+  return (
+    <Modal visible transparent statusBarTranslucent animationType={reduceMotion ? "none" : "fade"} onRequestClose={onClose}>
+      <ViewerPages images={images} index={index} onIndexChange={onIndexChange} onClose={onClose} onOpenImage={onOpenImage} />
+    </Modal>
+  );
+}
+
+function ViewerPages({ images, index, onIndexChange, onClose, onOpenImage }: Omit<ImageViewerProps, "index"> & { index: number }) {
+  const { width, height } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const count = images.length;
+  const current = images[index];
+  const white = tokens.color.white;
+  return (
+    <View className="flex-1" style={{ backgroundColor: withAlpha(tokens.color.black, 0.92) }}>
+      <FlatList
+        data={images}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        initialScrollIndex={index}
+        getItemLayout={(_, item) => ({ length: width, offset: width * item, index: item })}
+        keyExtractor={(image, item) => `${item}:${image.url}`}
+        onMomentumScrollEnd={(event) => onIndexChange(imageViewerPage(event.nativeEvent.contentOffset.x, width, count))}
+        renderItem={({ item }) => (
+          <View style={{ width, height }} className="items-center justify-center">
+            <Image source={{ uri: item.url }} resizeMode="contain" style={{ width: "100%", height: "100%" }} accessibilityLabel={item.alt ?? "Image"} />
+          </View>
+        )}
+        accessibilityRole="adjustable"
+        accessibilityLabel={current?.alt ?? "Image"}
+        accessibilityValue={count > 1 ? { text: `${index + 1} of ${count}` } : undefined}
+        accessibilityActions={count > 1 ? [{ name: "increment" }, { name: "decrement" }] : undefined}
+        onAccessibilityAction={(event) => {
+          const next = event.nativeEvent.actionName === "increment" ? index + 1 : index - 1;
+          if (next >= 0 && next < count) onIndexChange(next);
+        }}
+      />
+      <View className="absolute left-0 right-0 flex-row items-center justify-between px-3" style={{ top: insets.top + 8 }}>
+        {onOpenImage && current ? (
+          <Pressable
+            accessibilityRole="link"
+            onPress={() => onOpenImage(current.url)}
+            className="min-h-11 flex-row items-center gap-1.5 rounded-full px-3 active:opacity-70"
+            style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}
+          >
+            <IconExternalLink size={16} color={white} />
+            <Text className="font-instrument-sans text-sm" style={{ color: white }}>
+              Open in browser
+            </Text>
+          </Pressable>
+        ) : (
+          <View />
+        )}
+        <IconButton icon={IconX} label="Close" variant="overlay" size="lg" onPress={onClose} />
+      </View>
+      {count > 1 ? (
+        <View className="absolute left-0 right-0 items-center" style={{ bottom: insets.bottom + 16 }} pointerEvents="none">
+          <View className="rounded-full px-3 py-1" style={{ backgroundColor: withAlpha(tokens.color.black, 0.6) }}>
+            <Text className="font-instrument-sans text-sm" style={{ color: white, fontVariant: ["tabular-nums"] }}>
+              {`${index + 1} / ${count}`}
+            </Text>
+          </View>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/media/MediaCard.tsx

@@ -0,0 +1,100 @@
+import type { ComponentType, ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { IconProps } from "@tabler/icons-react-native";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+export type MediaCardProps = {
+  icon: ComponentType<IconProps>;
+  title: string;
+  /** One muted line under the title. */
+  description?: string;
+  /** Makes the whole card one button. Then leave `action` out: a button cannot hold another. */
+  onPress?: () => void;
+  /** A control at the end, such as a delete button, for a card that is not itself a button. */
+  action?: ReactNode;
+  /** A glyph at the end of a pressable card, such as an open-in-browser arrow. Decorative. */
+  trailingIcon?: ComponentType<IconProps>;
+  /** Fill. Default `tokens.color.surface` (the web `bg-card`). */
+  backgroundColor?: string;
+  /** Title colour. Default the theme foreground. */
+  color?: string;
+  /** Icon and description colour. Default the theme muted. */
+  mutedColor?: string;
+  /** Names the pressable card. Default `title`. */
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  testID?: string;
+};
+
+/**
+ * A card for one thing a turn produced, such as a saved file or a report: an
+ * icon, a title and a muted line, on the surface fill at the surface radius
+ * (the web `Surface density="tight"`). It is at least 56 high. With `onPress`
+ * the whole card is a button that fades while pressed; otherwise `action`
+ * holds its control.
+ */
+export function MediaCard({
+  icon: Icon,
+  title,
+  description,
+  onPress,
+  action,
+  trailingIcon: Trailing,
+  backgroundColor,
+  color,
+  mutedColor,
+  accessibilityLabel,
+  accessibilityHint,
+  testID,
+}: MediaCardProps) {
+  const scheme = useScheme();
+  const muted = mutedColor ?? tokens.color.muted[scheme];
+  const body = (
+    <>
+      <Icon size={18} color={muted} />
+      <View className="min-w-0 flex-1">
+        <Text
+          numberOfLines={1}
+          className="font-instrument-sans-medium"
+          style={[sizeStyle("text-sm"), typeStyle("medium"), color ? { color } : textStyle("foreground", scheme)]}
+        >
+          {title}
+        </Text>
+        {description ? (
+          <Text numberOfLines={1} className="font-instrument-sans" style={[sizeStyle("text-xs"), { color: muted }]}>
+            {description}
+          </Text>
+        ) : null}
+      </View>
+      {Trailing ? <Trailing size={16} color={muted} /> : null}
+    </>
+  );
+  const frame = {
+    minHeight: 56,
+    borderRadius: tokens.radius.lg,
+    backgroundColor: backgroundColor ?? tokens.color.surface[scheme],
+  };
+  if (onPress) {
+    return (
+      <Pressable
+        testID={testID}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? title}
+        accessibilityHint={accessibilityHint}
+        onPress={onPress}
+        className="flex-row items-center gap-3 p-3 active:opacity-70"
+        style={frame}
+      >
+        {body}
+      </Pressable>
+    );
+  }
+  return (
+    <View testID={testID} className="flex-row items-center gap-3 p-3" style={frame}>
+      {body}
+      {action}
+    </View>
+  );
+}

package/src/media/imageGrid.ts

@@ -0,0 +1,51 @@
+import { tokens } from "../tokens";
+
+/** One image in a gallery or the full-screen viewer. */
+export type GalleryImage = { url: string; alt?: string };
+
+/**
+ * The web `ImageGalleryPreview` metrics: the surface radius, a 2 gap between
+ * tiles (`gap-0.5`), 4:3 tiles, a lone image at most 384 high (`max-h-96`) and
+ * the hairline ring (`ring-black/10`, `dark:ring-white/10`).
+ */
+export const MEDIA = {
+  radius: tokens.radius.lg,
+  gap: 2,
+  tileAspect: 4 / 3,
+  singleMaxHeight: 384,
+  outline: { light: "rgba(0, 0, 0, 0.1)", dark: "rgba(255, 255, 255, 0.1)" },
+} as const;
+
+/** One tile of the grid: which image, whether it fills the left column, and the "+N" it carries. */
+export type ImageGridTile = { index: number; spansColumn: boolean; overflow: number };
+
+/**
+ * The web gallery grid for `count` images: up to four tiles in two columns.
+ * With three, the first fills the left column. Past four, the fourth carries
+ * "+N" for the rest. One image is not a grid (see `ImageGallery`).
+ */
+export function imageGridTiles(count: number): ImageGridTile[] {
+  const shown = Math.min(count, 4);
+  const overflow = count - shown;
+  return Array.from({ length: shown }, (_, index) => ({
+    index,
+    spansColumn: count === 3 && index === 0,
+    overflow: index === shown - 1 ? overflow : 0,
+  }));
+}
+
+/**
+ * Width over height of a lone image, from its own size once loaded, kept
+ * between 1:2 and 3:1 so a very tall or wide capture still reads. 4:3 until
+ * the size is known.
+ */
+export function imageAspect(size: { width: number; height: number } | null): number {
+  if (!size || size.width <= 0 || size.height <= 0) return MEDIA.tileAspect;
+  return Math.min(3, Math.max(0.5, size.width / size.height));
+}
+
+/** The viewer's page for a scroll offset, kept in range. */
+export function imageViewerPage(offsetX: number, pageWidth: number, count: number): number {
+  if (pageWidth <= 0 || count <= 0) return 0;
+  return Math.min(count - 1, Math.max(0, Math.round(offsetX / pageWidth)));
+}

package/src/motion.ts

@@ -0,0 +1,33 @@
+import { Easing, ReduceMotion } from "react-native-reanimated";
+import { useReduceMotion } from "./useReduceMotion";
+
+// The kit's motion values, from the `animate-expo` tables, so every part
+// eases and springs in one family.
+
+/** Strong ease-out: things entering or leaving the screen. */
+export const EASE_OUT = Easing.bezier(0.23, 1, 0.32, 1);
+
+/** A sheet opened or closed by a tap: no finger, so no velocity and no bounce. */
+export const SHEET_SPRING = {
+  duration: 300,
+  dampingRatio: 1,
+  overshootClamping: true,
+  reduceMotion: ReduceMotion.System,
+} as const;
+
+/** A dragged sheet that springs home: a little bounce, as the finger applied force. Add the release `velocity`. */
+export const SHEET_SNAP_SPRING = {
+  duration: 300,
+  dampingRatio: 0.8,
+  reduceMotion: ReduceMotion.System,
+} as const;
+
+/**
+ * Press feedback on press-in, as a class for a `Pressable`: the 3% scale the
+ * `animate-expo` press recipe allows for something pressed this often (the
+ * web buttons and composer chips scale by 3-4%). With Reduce Motion, a dim
+ * instead of the scale.
+ */
+export function usePressFeedback(): string {
+  return useReduceMotion() ? "active:opacity-80" : "active:scale-[0.97]";
+}

package/src/pagerSwipe.ts

@@ -0,0 +1,102 @@
+/**
+ * The rules of a swiped `Pager`, as plain numbers, so they stay testable
+ * apart from the gesture. The pager's position is in pages: 0 is the first
+ * page, 1.5 is halfway between the second and the third. Distances are in
+ * points and velocities in points per second (the Gesture Handler units),
+ * positive to the right. Each rule is a worklet, so the drag runs it on the
+ * UI thread.
+ */
+
+/**
+ * Sideways travel (pt) before a drag takes the pager: twice a row swipe's
+ * (`SWIPE_ACTIVE_OFFSET_X`), so a swipeable row under the finger takes its
+ * own swipe first, and only a clearly sideways drag moves the pages.
+ */
+export const PAGER_ACTIVE_OFFSET_X = 24;
+
+/** Vertical travel (pt) that leaves the touch to the page's own scroll. */
+export const PAGER_FAIL_OFFSET_Y = 14;
+
+/** A sideways flick at this speed (pt/s) turns the page, however short the drag. */
+const FLICK_VELOCITY = 500;
+
+/** How far ahead (s) the release velocity carries the pages when deciding where they settle. */
+const PROJECTION_S = 0.2;
+
+/** How far the pages move past the first or last page: less and less the further the finger goes. */
+function rubberband(overshoot: number, dimension: number): number {
+  "worklet";
+  const constant = 0.55;
+  return (overshoot * dimension * constant) / (dimension + constant * overshoot);
+}
+
+/**
+ * Where the pages sit for a finger `dx` points from where the drag caught
+ * them at `start`: they follow the finger 1:1 (a drag left shows the next
+ * page), and past the first or last page they meet growing resistance.
+ */
+export function pagerPosition(start: number, dx: number, width: number, count: number): number {
+  "worklet";
+  if (width <= 0) return start;
+  const raw = start - dx / width;
+  const last = count - 1;
+  if (raw < 0) return -rubberband(-raw * width, width) / width;
+  if (raw > last) return last + rubberband((raw - last) * width, width) / width;
+  return raw;
+}
+
+/**
+ * The page a released drag settles on, from the page it started on
+ * (`from`), where it is (`position`) and the finger's speed (`vx`): a flick
+ * past `FLICK_VELOCITY` the way it moved turns one page; else the position
+ * carried on by its speed rounds to the nearest page. Never more than one
+ * page from `from`, and never past the ends.
+ */
+export function pagerSettle(position: number, vx: number, width: number, from: number, count: number): number {
+  "worklet";
+  const moved = position - from;
+  // A drag left (negative `vx`) moves toward the next page (a larger position).
+  const toward = -Math.sign(vx);
+  let target: number;
+  if (Math.abs(vx) >= FLICK_VELOCITY && moved !== 0 && toward === Math.sign(moved)) {
+    target = from + toward;
+  } else {
+    target = Math.round(width > 0 ? position - (vx * PROJECTION_S) / width : position);
+  }
+  return Math.min(count - 1, Math.max(0, Math.min(from + 1, Math.max(from - 1, target))));
+}
+
+/**
+ * Every page from `from` to `to`, both included: the pages a slide from
+ * outside (a tab press) passes, which the pager draws so it never crosses a
+ * blank page.
+ */
+export function pagesBetween(from: number, to: number): number[] {
+  const low = Math.min(from, to);
+  return Array.from({ length: Math.abs(to - from) + 1 }, (_, step) => low + step);
+}
+
+/**
+ * The scroll offset (pt) of a sideways tab row that centres the tab at
+ * `position` (in pages, as the pager's: 1.5 is halfway between the second
+ * and the third tab), given each tab's `x` and `width` in the row and the
+ * row's visible `viewport` width. Between two tabs it blends their centres;
+ * it never scrolls before the first tab or past the last.
+ */
+export function centredTabScroll(
+  tabs: ReadonlyArray<{ x: number; width: number }>,
+  position: number,
+  viewport: number,
+): number {
+  "worklet";
+  const last = tabs[tabs.length - 1];
+  if (!last || viewport <= 0) return 0;
+  const at = Math.min(tabs.length - 1, Math.max(0, position));
+  const below = Math.floor(at);
+  const left = tabs[below] ?? last;
+  const right = tabs[Math.min(tabs.length - 1, below + 1)] ?? last;
+  const share = at - below;
+  const centre = left.x + left.width / 2 + (right.x + right.width / 2 - (left.x + left.width / 2)) * share;
+  const end = Math.max(0, last.x + last.width - viewport);
+  return Math.min(end, Math.max(0, centre - viewport / 2));
+}

package/src/palette.ts

@@ -2,7 +2,7 @@
  * Web semantic colours for React Native, converted from `@vvedantb/ui`
  * `tokens.css` (oklch → sRGB hex, clipped to sRGB). `tokens.ts` holds the
  * neutrals the native app ships; these are the colours it lacks (primary,
- * danger, success, warning, overlay, segment, field placeholder, backdrop,
+ * danger, success, warning, overlay, segment, tab bar pill, field placeholder, backdrop,
  * dialog description).
  *
  * A test in this package converts `tokens.css` and fails when a value here
@@ -25,6 +25,13 @@ export const palette = {
   overlayForeground: { light: "#181818", dark: "#fcfcfc" },
   segment: { light: "#ffffff", dark: "#474747" },
   segmentForeground: { light: "#181818", dark: "#fcfcfc" },
+  /**
+   * The `FloatingTabBar` active pill: `--default` in light (it shows on the
+   * near-white glass bar) and `--segment` in dark. Its own key, so an app that
+   * themes `segment` for the segmented `Tabs` thumb keeps a pill that shows on
+   * the dark glass bar.
+   */
+  tabBarPill: { light: "#ebebeb", dark: "#474747" },
   surfaceTertiary: { light: "#eaeaea", dark: "#282627" },
   fieldPlaceholder: { light: "#727272", dark: "#a0a0a0" },
   backdrop: { light: "rgba(0, 0, 0, 0.5)", dark: "rgba(0, 0, 0, 0.6)" },

package/src/primitives/button.tsx

@@ -3,10 +3,11 @@ import { cn } from "../cn";
 import { cva, type VariantProps } from "class-variance-authority";
 import * as React from "react";
 import { Platform, Pressable } from "react-native";
+import { usePressFeedback } from "../motion";
 
 const buttonVariants = cva(
   cn(
-    "group flex-row items-center justify-center gap-2 shadow-none active:opacity-80",
+    "group flex-row items-center justify-center gap-2 shadow-none",
     Platform.select({
       web: "outline-none transition-all",
     }),
@@ -88,12 +89,14 @@ const Button = React.forwardRef<
   React.ElementRef<typeof Pressable>,
   ButtonProps
 >(({ className, variant, size, shape, ...props }, ref) => {
+  const pressed = usePressFeedback();
   return (
     <TextClassContext.Provider value={buttonTextVariants({ variant, size })}>
       <Pressable
         ref={ref}
         className={cn(
           buttonVariants({ variant, size, shape }),
+          pressed,
           props.disabled && "opacity-45",
           className,
         )}