@lotics/ui 5.8.0 → 5.10.0

package/src/file_thumbnail_grid.tsx

@@ -1,8 +1,9 @@
 // Pure, reusable thumbnail-grid layout + a file-specific specialization.
 //
-// `ThumbnailGrid<T>` is the layout engine (three mutually-exclusive modes:
-// compact / fixed-columns / auto-columns, with `maxVisible` overflow). It is
-// item-agnostic — pass `renderItem`. `FileThumbnailGrid` is the common case:
+// `ThumbnailGrid<T>` is the layout engine — a flat wrap with two sizing models:
+// EXACT (`itemSize`, fixed small tiles) or FILL (default / `columns`, uniform
+// tiles that span the container width, short last row left-aligned), plus
+// `maxVisible` overflow. It is item-agnostic — pass `renderItem`. `FileThumbnailGrid` is the common case:
 // a grid of `DisplayFile`s rendered with `FileThumbnail` (any file type —
 // image/video/audio/doc — via FileThumbnail's own type handling).
 //
@@ -10,27 +11,38 @@
 // upload-progress thumbnails) composes `ThumbnailGrid` with its own renderItem,
 // so the layout lives in exactly one place.
 import React, { useState } from "react";
-import { View, StyleSheet, type ViewStyle } from "react-native";
+import { View, Pressable, StyleSheet, type ViewStyle } from "react-native";
 import { Text } from "./text";
-import { FileThumbnail, type DisplayFile, THUMBNAIL_SIZE } from "./file_thumbnail";
+import { colors } from "./colors";
+import { FileThumbnail, type DisplayFile, THUMBNAIL_SIZE, COMPACT_THUMBNAIL_SIZE } from "./file_thumbnail";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing } from "./use_focus_ring";
 
 export interface ThumbnailGridProps<T> {
   items: T[];
   keyExtractor: (item: T) => string;
-  /** Render one item. `size` is passed in compact mode (fixed px); omitted in
-   *  column modes, where the item fills its flex cell. */
+  /** Render one item at the computed tile size (px) — always provided. */
   renderItem: (item: T, size?: number) => React.ReactNode;
-  /** Fixed pixel size per item → flat horizontal wrap. Takes precedence. */
+  /** EXACT tile size (px): tiles are exactly this, flat wrap. May leave space at
+   *  the row's right edge. Use for fixed small tiles; omit to fill the width. */
   itemSize?: number;
-  /** Fixed column count → items fill 1/N of the row width. */
+  /** FILL with a fixed column count: tiles take an equal 1/N share of the width
+   *  (so full rows span the container). Omit `itemSize` to use. */
   columns?: number;
-  /** Minimum item width for auto column count when neither itemSize nor columns
-   *  is set. Default 96. */
+  /** FILL target: when neither `itemSize` nor `columns` is set, the column count
+   *  is derived so each tile is ≥ this width and rows span the container. Default 96. */
   minItemWidth?: number;
   /** Gap between items. Default 8. */
   gap?: number;
-  /** Max items shown before a "+N" overflow indicator. */
+  /** Max items shown before a "+N" overflow indicator (wrap mode). */
   maxVisible?: number;
+  /** SINGLE non-wrapping row that fits as many tiles as the measured width allows,
+   *  reserving the last slot for a "+N" overflow tile. Sizes tiles by `itemSize`
+   *  (else `minItemWidth`). The responsive overflow pattern — never wraps. */
+  singleRow?: boolean;
+  /** Press handler for the "+N" overflow tile (receives the hidden count). When
+   *  omitted the tile is a passive indicator. */
+  onOverflowPress?: (hiddenCount: number) => void;
   /** Alignment of a partial last row. Default "start". */
   partialRowAlign?: "start" | "end";
   style?: ViewStyle;
@@ -50,6 +62,8 @@ export function ThumbnailGrid<T>(props: ThumbnailGridProps<T>) {
     minItemWidth = THUMBNAIL_SIZE,
     gap = 8,
     maxVisible,
+    singleRow,
+    onOverflowPress,
     partialRowAlign = "start",
     style,
     disablePress,
@@ -58,57 +72,79 @@ export function ThumbnailGrid<T>(props: ThumbnailGridProps<T>) {
 
   const [containerWidth, setContainerWidth] = useState(0);
 
-  const isCompact = itemSize !== undefined;
-  const dynamicColumns =
-    !isCompact && columns === undefined && containerWidth > 0
-      ? Math.max(1, Math.floor((containerWidth + gap) / (minItemWidth + gap)))
-      : undefined;
-  const effectiveColumns = columns ?? dynamicColumns;
-
-  const visible = maxVisible ? items.slice(0, maxVisible) : items;
-  const overflow = maxVisible ? Math.max(0, items.length - maxVisible) : 0;
-  const canRender = isCompact || columns !== undefined || containerWidth > 0;
-
   if (items.length === 0) return null;
 
-  const renderRows = (rowItems: T[], cols: number) => {
-    const rows: T[][] = [];
-    for (let i = 0; i < rowItems.length; i += cols) rows.push(rowItems.slice(i, i + cols));
-    return rows.map((row, rowIndex) => {
-      const spacers =
-        row.length < cols
-          ? Array.from({ length: cols - row.length }, (_, i) => (
-              <View key={`spacer-${i}`} style={styles.flexItem} />
-            ))
-          : null;
-      return (
-        <View key={rowIndex} style={[styles.row, { gap }]}>
-          {partialRowAlign === "end" && spacers}
-          {row.map((item) => (
-            <View key={keyExtractor(item)} style={styles.flexItem}>
-              {renderItem(item)}
+  // SINGLE-ROW fit-to-width: one non-wrapping row. Fit as many fixed-size tiles as
+  // the measured width allows, reserving the last slot for a "+N" overflow tile —
+  // the responsive overflow pattern (avatar stack / Finder / Figma). Needs a
+  // measured width pass.
+  if (singleRow) {
+    const size = itemSize ?? minItemWidth;
+    const fit = containerWidth > 0 ? Math.max(1, Math.floor((containerWidth + gap) / (size + gap))) : 0;
+    const hasOverflow = fit > 0 && items.length > fit;
+    const visibleCount = hasOverflow ? Math.max(1, fit - 1) : items.length;
+    const hidden = items.length - visibleCount;
+    return (
+      <View
+        style={[styles.singleRow, { gap }, style]}
+        pointerEvents={disablePress ? "none" : "auto"}
+        onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+      >
+        {fit > 0 &&
+          items.slice(0, visibleCount).map((item) => (
+            <View key={keyExtractor(item)} style={{ width: size }}>
+              {renderItem(item, size)}
             </View>
           ))}
-          {partialRowAlign === "start" && spacers}
-        </View>
-      );
-    });
-  };
+        {fit > 0 && hidden > 0 && (
+          <OverflowTile
+            size={size}
+            count={hidden}
+            onPress={onOverflowPress ? () => onOverflowPress(hidden) : undefined}
+          />
+        )}
+        {footer}
+      </View>
+    );
+  }
+
+  // Two sizing models, both a flat wrap:
+  //  • Exact (`itemSize`): tiles are exactly that size — for fixed small tiles
+  //    (badges). The row may not reach the container's right edge.
+  //  • Fill (default, or `columns`): the column count comes from `columns` or is
+  //    derived from `minItemWidth`, then every tile takes an EQUAL share of the
+  //    width so full rows span the container exactly. A short last row keeps that
+  //    same tile size and is left-/right-aligned — no stretched tiles, no empty
+  //    spacer cells. Needs one measured layout pass before it can render.
+  const isExact = itemSize !== undefined;
+  const autoColumns =
+    containerWidth > 0 ? Math.max(1, Math.floor((containerWidth + gap) / (minItemWidth + gap))) : 0;
+  const cols = columns ?? autoColumns;
+  const fillSize =
+    cols > 0 && containerWidth > 0 ? Math.floor((containerWidth - (cols - 1) * gap) / cols) : 0;
+
+  const tileSize = isExact ? itemSize : fillSize;
+  const canRender = tileSize > 0;
+
+  const visible = maxVisible ? items.slice(0, maxVisible) : items;
+  const overflow = maxVisible ? Math.max(0, items.length - maxVisible) : 0;
 
   return (
     <View
-      style={[isCompact && styles.compactContainer, { gap }, style]}
+      style={[
+        styles.container,
+        { gap, justifyContent: partialRowAlign === "end" ? "flex-end" : "flex-start" },
+        style,
+      ]}
       pointerEvents={disablePress ? "none" : "auto"}
       onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
     >
       {canRender &&
-        (isCompact
-          ? visible.map((item) => (
-              <React.Fragment key={keyExtractor(item)}>{renderItem(item, itemSize)}</React.Fragment>
-            ))
-          : effectiveColumns !== undefined
-            ? renderRows(visible, effectiveColumns)
-            : null)}
+        visible.map((item) => (
+          <View key={keyExtractor(item)} style={{ width: tileSize }}>
+            {renderItem(item, tileSize)}
+          </View>
+        ))}
 
       {overflow > 0 && (
         <Text size="sm" color="muted" userSelect="none">
@@ -128,6 +164,8 @@ export interface FileThumbnailGridProps {
   minItemWidth?: number;
   gap?: number;
   maxVisible?: number;
+  singleRow?: boolean;
+  onOverflowPress?: (hiddenCount: number) => void;
   partialRowAlign?: "start" | "end";
   style?: ViewStyle;
   disablePress?: boolean;
@@ -158,8 +196,50 @@ export function FileThumbnailGrid(props: FileThumbnailGridProps) {
   );
 }
 
+/** The "+N" overflow cell: a same-size tile showing the hidden count. Clickable
+ *  when `onPress` is given (the host opens a gallery / expands), else passive. */
+function OverflowTile({ size, count, onPress }: { size: number; count: number; onPress?: () => void }) {
+  const compact = size <= COMPACT_THUMBNAIL_SIZE;
+  const box = { width: size, height: size, borderRadius: compact ? 7 : 10 };
+  const { focusVisible, focusProps } = useFocusRing();
+  const label = (
+    <Text size={compact ? "xs" : "sm"} weight="medium" color="zinc-700" userSelect="none">
+      +{count}
+    </Text>
+  );
+  if (!onPress) {
+    return <View style={[styles.overflowTile, box]}>{label}</View>;
+  }
+  return (
+    <Pressable
+      onPress={onPress}
+      {...focusProps}
+      accessibilityRole="button"
+      accessibilityLabel={`+${count}`}
+      style={(state) => [
+        styles.overflowTile,
+        box,
+        (state as { hovered?: boolean }).hovered && styles.overflowHovered,
+        state.pressed && styles.overflowPressed,
+        focusVisible && { boxShadow: FOCUS_RING },
+      ]}
+    >
+      {label}
+    </Pressable>
+  );
+}
+
 const styles = StyleSheet.create({
-  compactContainer: { flexDirection: "row", flexWrap: "wrap", userSelect: "none" },
-  row: { flexDirection: "row" },
-  flexItem: { flex: 1 },
+  container: { flexDirection: "row", flexWrap: "wrap", userSelect: "none" },
+  singleRow: { flexDirection: "row", alignItems: "center", userSelect: "none" },
+  overflowTile: {
+    backgroundColor: colors.zinc["100"],
+    borderWidth: 1,
+    borderColor: colors.zinc["200"],
+    alignItems: "center",
+    justifyContent: "center",
+    ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
+  },
+  overflowHovered: { backgroundColor: colors.zinc["200"] },
+  overflowPressed: { backgroundColor: colors.zinc["300"] },
 });

package/src/files_editor.tsx

@@ -0,0 +1,232 @@
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { Button } from "./button";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import { MenuButton } from "./menu_button";
+import { Alert } from "./alert";
+import { FileGrid, type FileUpload } from "./file_grid";
+import { FileGalleryModal } from "./file_gallery_modal";
+import type { GalleryLabels } from "./file_preview_types";
+import { type DisplayFile } from "./file_thumbnail";
+import { pickFiles } from "./file_picker";
+import { downloadFileFromUrl } from "./download";
+
+export interface FilesEditorLabels {
+  upload: string;
+  select: string;
+  selectAll: string;
+  deselectAll: string;
+  done: string;
+  /** The select-mode actions menu trigger. */
+  menu: string;
+  downloadAll: string;
+  /** Download-selected menu item, given the count. */
+  downloadSelected: (n: number) => string;
+  /** Download-as-ZIP menu item (shown when `onDownloadZipSelected` + 2+ selected). */
+  downloadZip: string;
+  share: string;
+  delete: string;
+  removeTitle: string;
+  removeMessage: string;
+  removeCancel: string;
+  removeConfirm: string;
+}
+
+const DEFAULT_LABELS: FilesEditorLabels = {
+  upload: "Upload",
+  select: "Select",
+  selectAll: "Select all",
+  deselectAll: "Deselect all",
+  done: "Done",
+  menu: "Menu",
+  downloadAll: "Download all",
+  downloadSelected: (n) => `Download (${n})`,
+  downloadZip: "Download as ZIP",
+  share: "Share",
+  delete: "Delete",
+  removeTitle: "Remove attachment?",
+  removeMessage: "This removes the file.",
+  removeCancel: "Cancel",
+  removeConfirm: "Remove",
+};
+
+export interface FilesEditorProps {
+  /** Completed/saved files. */
+  files: DisplayFile[];
+  /** The live add-queue (in-flight uploads) — pass through from your upload mechanism. */
+  uploads?: FileUpload[];
+  /** Picked files → the host uploads + appends to `files`. Omit to hide Upload. */
+  onAdd?: (files: File[]) => void;
+  /** Override the Upload action's picker (e.g. a native document picker). When
+   *  set, the Upload button calls this instead of the built-in web `pickFiles`. */
+  onUpload?: () => void;
+  /** Show a "Download as ZIP" action in select mode (2+ selected), given the files. */
+  onDownloadZipSelected?: (files: DisplayFile[]) => void;
+  /** Remove a completed file. Omit (or `readOnly`) for a view-only surface. */
+  onRemove?: (id: string) => void;
+  /** Cancel an in-flight upload / retry a failed one (when using `uploads`). */
+  onUploadRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onRetryAll?: () => void;
+  /** Show a Share action in select mode, given the selected files. Omit to hide it. */
+  onShareSelected?: (files: DisplayFile[]) => void;
+  /** Override the default download (`downloadFileFromUrl`). */
+  onDownload?: (file: DisplayFile) => void;
+  /** Download + preview only (no Upload / Select / remove). */
+  readOnly?: boolean;
+  /** Native `accept` filter for the file picker. */
+  accept?: string;
+  itemSize?: number;
+  minItemWidth?: number;
+  /** Fixed column count for the grid (passed through to `FileGrid`). */
+  columns?: number;
+  /** Translated labels. Defaults to English. */
+  labels?: Partial<FilesEditorLabels>;
+  /** Credentials mode for the built-in gallery's preview fetches — `"include"`
+   *  for the host's auth-gated proxy URLs, omitted for an app's presigned URLs.
+   *  See `FilePreviewProps`. */
+  credentials?: RequestCredentials;
+  /** Translated labels for the built-in full-screen gallery (its toolbar action
+   *  buttons + confirm dialog). Defaults to English. */
+  galleryLabels?: Partial<GalleryLabels>;
+}
+
+/**
+ * The all-in-one attachment surface: an upload-aware thumbnail grid (`FileGrid`)
+ * with a toolbar BELOW it, a batch SELECT mode, full-screen preview
+ * (`FileGalleryModal`), and download / share / Alert-confirmed remove. Agnostic —
+ * the host wires `onAdd` (picked files → its upload) and `onRemove`; select mode,
+ * the gallery, download and the remove confirm are all internal. Mirrors the
+ * frontend `files_editor`. For a plain row list use `FileRows`; for the bare
+ * upload grid use `FileGrid`.
+ */
+export function FilesEditor(props: FilesEditorProps) {
+  const {
+    files,
+    uploads,
+    onAdd,
+    onUpload,
+    onDownloadZipSelected,
+    onRemove,
+    onUploadRemove,
+    onRetry,
+    onRetryAll,
+    onShareSelected,
+    onDownload,
+    readOnly = false,
+    accept,
+    itemSize,
+    minItemWidth,
+    columns,
+    labels,
+    credentials,
+    galleryLabels,
+  } = props;
+  const l = { ...DEFAULT_LABELS, ...labels };
+
+  const [selectMode, setSelectMode] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(() => new Set());
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [galleryIndex, setGalleryIndex] = useState<number | null>(null);
+
+  const hasFiles = files.length > 0;
+  const allSelected = hasFiles && selected.size === files.length;
+  const selectedFiles = files.filter((f) => selected.has(f.id));
+
+  const toggle = (id: string) =>
+    setSelected((s) => { const n = new Set(s); if (n.has(id)) n.delete(id); else n.add(id); return n; });
+  const exitSelect = () => { setSelectMode(false); setSelected(new Set()); };
+  const download = (fs: DisplayFile[]) =>
+    fs.forEach((f) => (onDownload ? onDownload(f) : void downloadFileFromUrl(f.url, f.filename, { credentials })));
+  const confirmRemove = (onConfirm: () => void) =>
+    Alert.alert(l.removeTitle, l.removeMessage, [
+      { text: l.removeCancel, style: "cancel" },
+      { text: l.removeConfirm, style: "destructive", onPress: onConfirm },
+    ]);
+  const upload = () => {
+    if (!onAdd) return;
+    void pickFiles({ multiple: true, accept }).then((picked) => { if (picked.length > 0) onAdd(picked); });
+  };
+
+  return (
+    <View style={styles.root}>
+      <FileGrid
+        files={files}
+        uploads={uploads}
+        itemSize={itemSize}
+        minItemWidth={minItemWidth}
+        columns={columns}
+        selectedIds={selectMode ? selected : undefined}
+        onToggleSelect={selectMode ? toggle : undefined}
+        onFilePress={selectMode ? undefined : (f) => setGalleryIndex(files.findIndex((x) => x.id === f.id))}
+        onDisplayRemove={!readOnly && !selectMode && onRemove ? (id) => confirmRemove(() => onRemove(id)) : undefined}
+        onUploadRemove={onUploadRemove}
+        onRetry={onRetry}
+        onRetryAll={onRetryAll}
+      />
+
+      {readOnly ? (
+        hasFiles ? (
+          <View style={styles.bar}>
+            <View style={styles.spacer} />
+            <Button title={l.downloadAll} color="secondary" onPress={() => download(files)} />
+          </View>
+        ) : null
+      ) : selectMode ? (
+        <View style={styles.bar}>
+          <Button
+            title={allSelected ? l.deselectAll : l.selectAll}
+            color="muted"
+            onPress={() => setSelected(allSelected ? new Set() : new Set(files.map((f) => f.id)))}
+          />
+          <Popover open={menuOpen} onOpenChange={setMenuOpen} align="start">
+            <PopoverTrigger>
+              <Button title={l.menu} color="secondary" disabled={selected.size === 0} onPress={() => setMenuOpen(true)} />
+            </PopoverTrigger>
+            <PopoverContent>
+              <View style={styles.menu}>
+                <MenuButton icon="download" title={l.downloadSelected(selected.size)} onPress={() => { setMenuOpen(false); download(selectedFiles); }} />
+                {onDownloadZipSelected && selected.size > 1 ? (
+                  <MenuButton icon="file-down" title={l.downloadZip} onPress={() => { setMenuOpen(false); onDownloadZipSelected(selectedFiles); }} />
+                ) : null}
+                {onShareSelected ? (
+                  <MenuButton icon="share" title={l.share} onPress={() => { setMenuOpen(false); onShareSelected(selectedFiles); }} />
+                ) : null}
+                {onRemove ? (
+                  <MenuButton icon="trash" title={l.delete} danger onPress={() => { setMenuOpen(false); confirmRemove(() => { selectedFiles.forEach((f) => onRemove(f.id)); exitSelect(); }); }} />
+                ) : null}
+              </View>
+            </PopoverContent>
+          </Popover>
+          <View style={styles.spacer} />
+          <Button title={l.done} color="secondary" onPress={exitSelect} />
+        </View>
+      ) : (
+        <View style={styles.bar}>
+          {onAdd || onUpload ? <Button title={l.upload} color="primary" onPress={onUpload ?? upload} /> : null}
+          {hasFiles ? <Button title={l.select} color="secondary" onPress={() => setSelectMode(true)} /> : null}
+          <View style={styles.spacer} />
+          {hasFiles ? <Button title={l.downloadAll} color="secondary" onPress={() => download(files)} /> : null}
+        </View>
+      )}
+
+      <FileGalleryModal
+        files={files}
+        activeIndex={galleryIndex}
+        onIndexChange={setGalleryIndex}
+        onRemove={!readOnly && onRemove ? onRemove : undefined}
+        onDownload={onDownload}
+        onOpenExternal={(f) => { if (typeof window !== "undefined") window.open(f.url, "_blank"); }}
+        credentials={credentials}
+        labels={galleryLabels}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: { gap: 10 },
+  bar: { flexDirection: "row", alignItems: "center", gap: 8 },
+  spacer: { flex: 1 },
+  menu: { minWidth: 200, gap: 2, padding: 4 },
+});

package/src/filter_chip.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useState } from "react";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
@@ -12,20 +12,21 @@ export interface FilterChipProps {
   /** The dimension name — shown alone when inactive ("Owner"), prefixed when
    *  active ("Owner: Maria, James"). */
   label: string;
-  /** A short human summary of the active selection ("Maria, James", "≥ 10").
-   *  Empty / undefined renders the inactive pill (label + chevron, no clear).
-   *  Build it with `rangeSummary` / `selectSummary` for a consistent preview. */
-  summary?: string;
+  /** The active selection preview, after "Label: ". A string ("Maria, James",
+   *  "≥ 10" — build with `rangeSummary` / `selectSummary`), OR a node to render the
+   *  selection RICHLY in the trigger (member avatars, colour dots). Empty /
+   *  undefined renders the inactive pill (label + chevron, no clear). */
+  summary?: ReactNode;
   /** Clears the dimension — renders the × on the pill AND a Clear in the popover
    *  footer whenever a summary is present. */
   onClear?: () => void;
   /** Label for the clear affordances (pass a translated string). */
   clearLabel?: string;
   /** The editor revealed on press — a premium primitive (`RangeSlider`,
-   *  `Counter`, `PickerMenu` multi) or any composed control. `FilterChip` owns
+   *  `Counter`, `OptionList` multi) or any composed control. `FilterChip` owns
    *  the pill + popover chrome; the consumer owns the value and applies it.
    *  Pass a render function to receive `close` — the one editor that closes on
-   *  action is single-select (`<PickerMenu>` → close on pick); range/counter/
+   *  action is single-select (`<OptionList>` → close on pick); range/counter/
    *  multi stay open and dismiss on outside-press, so they pass a plain node. */
   children: ReactNode | ((api: { close: () => void }) => ReactNode);
   side?: PopoverSide;
@@ -62,14 +63,14 @@ export function selectSummary(
  * × to clear. `FilterChip` bakes the consistent chrome — the preview pill, a
  * padded popover body for the composed editor, and a Clear footer when active —
  * so every filter looks and behaves the same. Drop a premium primitive inside
- * (`RangeSlider`, `Counter`, `PickerMenu` multi). With `footer` (+ controlled
+ * (`RangeSlider`, `Counter`, `OptionList` multi). With `footer` (+ controlled
  * `open`/`onOpenChange`) the same shell wraps a non-filter VALUE pill — a
  * setting gate with Cancel/Save — keeping it on the one pill surface. The table
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
  */
 export function FilterChip(props: FilterChipProps) {
   const { label, summary, onClear, clearLabel = "Clear", children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
-  const active = summary != null && summary.length > 0;
+  const active = summary != null && (typeof summary !== "string" || summary.length > 0);
   // The clear × / Clear footer only when there's a clearable selection AND no
   // custom footer — a valued, non-clearable pill ("Target: 20") keeps its chevron.
   const showClear = active && !!onClear && !footer;
@@ -88,9 +89,16 @@ export function FilterChip(props: FilterChipProps) {
     <Popover side={side} align={align} open={isOpen} onOpenChange={setOpen}>
       <PopoverTrigger>
         <Chip onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
-          <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
-            {active ? `${label}: ${summary}` : label}
-          </Text>
+          {active && typeof summary !== "string" ? (
+            <View style={styles.summaryRow}>
+              <Text size="sm" weight="medium" color="zinc-700">{`${label}:`}</Text>
+              {summary}
+            </View>
+          ) : (
+            <Text size="sm" weight="medium" color={active ? "zinc-900" : "zinc-700"} numberOfLines={1}>
+              {active ? `${label}: ${summary}` : label}
+            </Text>
+          )}
           {!showClear ? <Icon name="chevron-down" size={14} color={colors.zinc["400"]} /> : null}
         </Chip>
       </PopoverTrigger>
@@ -116,4 +124,9 @@ const styles = StyleSheet.create({
   body: {
     gap: 8,
   },
+  summaryRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+  },
 });

package/src/focus_ring_pressable.tsx

@@ -0,0 +1,34 @@
+import { Pressable, type PressableProps, type StyleProp, type View, type ViewStyle } from "react-native";
+import { type Ref } from "react";
+import { FOCUS_RING } from "./control_surface";
+import { useFocusRing, composeHandler } from "./use_focus_ring";
+
+export interface FocusRingPressableProps extends PressableProps {
+  ref?: Ref<View>;
+}
+
+/**
+ * A `Pressable` that paints the kit `FOCUS_RING` on keyboard focus — the raw-control
+ * counterpart to `PressableHighlight`'s `focusRing` prop, for interactive elements
+ * that DON'T want the hover wash (cells, tiles, nav buttons, menu options). Forwards
+ * every `PressableProps` (onPress, accessibilityRole/Label/State, ref, …) and merges
+ * the ring with the caller's `style` (object or state-function) + onFocus/onBlur.
+ * Reach for this before hand-rolling a one-off Pressable + `useFocusRing`.
+ */
+export function FocusRingPressable({ ref, style, onFocus, onBlur, ...rest }: FocusRingPressableProps) {
+  const { focusVisible, focusProps } = useFocusRing();
+  return (
+    <Pressable
+      ref={ref}
+      {...rest}
+      onFocus={composeHandler(onFocus ?? undefined, focusProps.onFocus)}
+      onBlur={composeHandler(onBlur ?? undefined, focusProps.onBlur)}
+      style={(state) =>
+        [
+          typeof style === "function" ? style(state) : style,
+          focusVisible ? { boxShadow: FOCUS_RING } : null,
+        ] as StyleProp<ViewStyle>
+      }
+    />
+  );
+}

package/src/form_picker.tsx

@@ -1,9 +1,9 @@
 import { FormField, FormFieldProps } from "./form_field";
 import { Picker, PickerProps } from "./picker";
 
-/** `FormField` wrapping a `Picker` — one labeled select. */
-export function FormPicker<T extends string, MULTI extends boolean = false>(
-  props: PickerProps<T, MULTI> & FormFieldProps,
+/** `FormField` wrapping a `Picker` — one labeled native select. */
+export function FormPicker<T extends string>(
+  props: PickerProps<T> & FormFieldProps,
 ) {
   const { label, description, optional, optionalLabel, error, ...pickerProps } = props;