@vvedantb/native-ui 0.13.0 → 0.17.0

package/src/ai/icon-button.tsx

@@ -10,17 +10,44 @@ import { useScheme } from "../useScheme";
 /** The web `icon-sm` button: 32 square with a 16 icon. */
 export const CHAT_ICON_BUTTON_SIZE = 32;
 
+/**
+ * Side and icon per size: `sm` is the web `icon-sm` (32, 16 icon), `xs` the
+ * web `icon-xs` (28, 14 icon) and `md` the web `size-9` (36, 16 icon), Eva's
+ * composer send button. `touch` has no web twin: a 44 square with a 16 icon,
+ * for a row of ghost buttons a thumb taps (the message actions), where the
+ * web 28 squares 2 apart are a mouse's density.
+ */
+const CHAT_ICON_BUTTON = {
+  xs: { side: 28, icon: 14, className: "h-7 w-7" },
+  sm: { side: CHAT_ICON_BUTTON_SIZE, icon: 16, className: "h-8 w-8" },
+  md: { side: 36, icon: 16, className: "h-9 w-9" },
+  touch: { side: MIN_TOUCH_TARGET, icon: 16, className: "h-11 w-11" },
+} as const;
+
+export type ChatIconButtonSize = keyof typeof CHAT_ICON_BUTTON;
+
 export type ChatIconButtonProps = Omit<ButtonProps, "children" | "size" | "icon"> & {
   icon: ComponentType<IconProps>;
   /** Names the button for VoiceOver and TalkBack; it has no text. */
   label: string;
   /** Default: the variant's label colour. */
   iconColor?: string;
+  /** Default `sm`. Larger text paints each 44 with a 20 icon. */
+  size?: ChatIconButtonSize;
+  /**
+   * `"square"` (default) slops to 44 on every side. `"vertical"` slops only
+   * the height to 44, for a dense row (the message actions sit 2 to 4 apart),
+   * where sideways slop would overlap the next button and steal its taps.
+   * `{ left, right }` is `"vertical"` plus that much on each side, for the
+   * outer side of a button at the end of such a row.
+   */
+  slop?: "square" | "vertical" | { left: number; right: number };
 };
 
 /**
- * A round `Button` at the web `icon-sm` size (32), with the slop to 44. With
- * larger text it is painted 44 with a 20 icon. The message
+ * A round `Button` at the web `icon-sm` size (32), or another
+ * `ChatIconButtonSize`, with the slop to 44. With larger text it is painted
+ * 44 with a 20 icon. The message
  * actions, the composer tools and its send button, and the code copy button.
  * Round from the `Button` pill default; `shape="rounded"` gives radius 16.
  */
@@ -29,23 +56,31 @@ export function ChatIconButton({
   label,
   iconColor,
   variant = "ghost",
+  size = "sm",
+  slop = "square",
   className,
   ...props
 }: ChatIconButtonProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
-  const size = largerText ? MIN_TOUCH_TARGET : CHAT_ICON_BUTTON_SIZE;
+  const metrics = largerText
+    ? { side: MIN_TOUCH_TARGET, icon: 20, className: "h-11 w-11" }
+    : CHAT_ICON_BUTTON[size];
   const color = iconColor ?? buttonColors(variant, scheme)?.color ?? tokens.color.foreground[scheme];
   return (
     <Button
       variant={variant}
       size="icon"
       accessibilityLabel={label}
-      hitSlop={touchSlop(size)}
-      className={cn(largerText ? "h-11 w-11" : "h-8 w-8", className)}
+      hitSlop={
+        slop === "square"
+          ? touchSlop(metrics.side)
+          : { ...touchSlop(MIN_TOUCH_TARGET, metrics.side), ...(slop === "vertical" ? null : slop) }
+      }
+      className={cn(metrics.className, className)}
       {...props}
     >
-      <Icon size={largerText ? 20 : 16} color={color} />
+      <Icon size={metrics.icon} color={color} />
     </Button>
   );
 }

package/src/ai/index.ts

@@ -2,7 +2,7 @@
 // `@vvedantb/native-ui/ai` entry only, so apps without a chat do not bundle
 // them. Generic: no model names and no app logic.
 export { useStreamingDisclosure } from "./use-streaming-disclosure";
-export { chatTextSize, formatElapsed, MONO_FONT } from "./chat-text";
+export { chatTextSize, formatElapsed, META_TEXT_STYLE, MONO_FONT } from "./chat-text";
 export type { ChatTextKind } from "./chat-text";
 export { Shimmer, SHIMMER_LOW_OPACITY } from "./shimmer";
 export type { ShimmerProps } from "./shimmer";
@@ -17,8 +17,10 @@ export type { CollapsibleProps, CollapsibleTriggerProps } from "./collapsible";
 export {
   Conversation,
   ConversationContent,
+  ConversationList,
   ConversationEmptyState,
   ConversationScrollButton,
+  ConversationDock,
   useConversation,
   isScrolledToBottom,
   AT_BOTTOM_THRESHOLD,
@@ -26,8 +28,11 @@ export {
 export type {
   ConversationProps,
   ConversationContentProps,
+  ConversationListProps,
+  ConversationScroller,
   ConversationEmptyStateProps,
   ConversationScrollButtonProps,
+  ConversationDockProps,
 } from "./conversation";
 export {
   Message,
@@ -102,18 +107,48 @@ export type {
 } from "./chain-of-thought";
 export { ActivityStep } from "./activity-step";
 export type { ActivityStepProps, ActivityStepStatus } from "./activity-step";
+// The web timeline's pure logic (byte-identical copies) and its folded rules.
+// The step type is `ActivityTimelineStep` here: `ActivityStep` is the line above.
+export { activityStepHasRichDetail } from "./activity-step-types";
+export type {
+  ActivityStep as ActivityTimelineStep,
+  ActivityStepEdit,
+  ActivityStepOutput,
+  ActivityTodoItem,
+} from "./activity-step-types";
+export {
+  deriveActionGroupSummary,
+  deriveReadableCommandDisplay,
+  deriveStepRowPresentation,
+  resolveCommandVisualKind,
+} from "./activity-step-label";
+export type { CommandVisualKind, StepRowPresentation } from "./activity-step-label";
+export { activityRowKey, activitySegmentKey, buildActivityRows, groupActivityRows } from "./activity-tasks-utils";
+export type { ActivityRow, ActivitySegment } from "./activity-tasks-utils";
+export {
+  ACTIVITY_MAX_VISIBLE_BLOCKS,
+  ACTIVITY_MAX_VISIBLE_CHILDREN,
+  activityChildRows,
+  activityStepSeconds,
+  foldedActivitySegments,
+} from "./activity-timeline";
 export {
   PromptInput,
   PromptInputButton,
+  PromptInputChip,
   PromptInputSubmit,
+  PROMPT_INPUT_CHIP,
   isGenerating,
 } from "./prompt-input";
 export type {
   ChatStatus,
+  PromptInputChipProps,
   PromptInputProps,
   PromptInputButtonProps,
   PromptInputSubmitProps,
 } from "./prompt-input";
+export { PromptInputMenu, PromptInputMenuItem, PROMPT_INPUT_MENU, promptInputMenuHeight } from "./prompt-input-menu";
+export type { PromptInputMenuProps, PromptInputMenuItemProps } from "./prompt-input-menu";
 export { Suggestions, Suggestion } from "./suggestion";
 export type { SuggestionsProps, SuggestionProps } from "./suggestion";
 export { Sources, SourcesTrigger, SourcesContent, Source, sourcesLabel } from "./sources";
@@ -146,6 +181,8 @@ export { ChoiceQuestion, choiceAnswers } from "./choice-question";
 export type { ChoiceQuestionProps, ChoiceQuestionItem } from "./choice-question";
 export { ActivityStepDetail } from "./activity-step-detail";
 export type { ActivityStepDetailProps, ActivityStepDetailStep } from "./activity-step-detail";
+export { UnifiedDiff, DiffStat, UNIFIED_DIFF } from "./unified-diff";
+export type { UnifiedDiffProps, UnifiedDiffLine, DiffStatProps } from "./unified-diff";
 export { ToolApprovalCard, ToolDraftCard, summarizeArgs, ARGS_MAX_CHARS } from "./tool-approval-card";
 export type { ToolApprovalCardProps, ToolDraftCardProps, ToolDecision } from "./tool-approval-card";
 export { SubagentRunCard, SubagentResultCard, subagentStatusColors } from "./subagent-cards";

package/src/ai/message-action-sheet.tsx

@@ -22,6 +22,9 @@ export type MessageSheetAction = {
   onPress: () => void;
 };
 
+/** The sheet's default title, also the message's `longpress` action label. */
+export const MESSAGE_ACTIONS_TITLE = "Message actions";
+
 export type MessageActionSheetProps = {
   open: boolean;
   /** Called on a backdrop tap, Cancel, Android back and after an action runs. */
@@ -45,7 +48,7 @@ export function MessageActionSheet({
   open,
   onClose,
   actions,
-  title = "Message actions",
+  title = MESSAGE_ACTIONS_TITLE,
   cancelLabel = "Cancel",
   testID = "message-action-sheet",
 }: MessageActionSheetProps) {

package/src/ai/message.tsx

@@ -16,9 +16,9 @@ import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useReduceMotion } from "../useReduceMotion";
 import { useScheme } from "../useScheme";
-import { chatTextSize } from "./chat-text";
-import { ChatIconButton } from "./icon-button";
-import { MessageActionSheet, type MessageSheetAction } from "./message-action-sheet";
+import { META_TEXT_STYLE, chatTextSize } from "./chat-text";
+import { ChatIconButton, type ChatIconButtonSize } from "./icon-button";
+import { MESSAGE_ACTIONS_TITLE, MessageActionSheet, type MessageSheetAction } from "./message-action-sheet";
 import { ChatTextColorContext, ResponseText } from "./response-text";
 
 export type MessageRole = "user" | "assistant" | "system";
@@ -68,13 +68,13 @@ function MessageHighlight() {
   const wash = useSharedValue(reduceMotion ? 0.5 : 1);
   useEffect(() => {
     if (reduceMotion) {
-      wash.value = 0.5;
+      wash.set(0.5);
       return;
     }
-    wash.value = 1;
-    wash.value = withTiming(0, { duration: MESSAGE_HIGHLIGHT_MS });
+    wash.set(1);
+    wash.set(withTiming(0, { duration: MESSAGE_HIGHLIGHT_MS }));
   }, [wash, reduceMotion]);
-  const animatedStyle = useAnimatedStyle(() => ({ opacity: wash.value }));
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: wash.get() }));
   return (
     <Animated.View
       testID="message-highlight"
@@ -100,9 +100,9 @@ function MessageHighlight() {
  *
  * With `onLongPress` or `actions` the message is a `Pressable` (same layout,
  * `className`, `style` and view props) and a long press opens the
- * `MessageActionSheet`. It stays a non-accessible container so its buttons and
- * links keep their own focus: also offer the actions in a `MessageActionsBar`
- * for screen reader users. `highlighted` draws the quote-jump highlight.
+ * `MessageActionSheet`; TalkBack reaches it as the `longpress` action. It stays
+ * a non-accessible container so its buttons and links keep their own focus:
+ * also offer the actions in a `MessageActionsBar` for screen reader users. `highlighted` draws the quote-jump highlight.
  */
 export function Message({
   from,
@@ -120,10 +120,14 @@ export function Message({
   const [sheetOpen, setSheetOpen] = useState(false);
   const hasActions = actions != null && actions.length > 0;
   const longPressable = onLongPress != null || hasActions;
-  const layout = [
+  const longPress = () => {
+    onLongPress?.();
+    if (hasActions) setSheetOpen(true);
+  };
+  const layout: ViewProps["style"] = [
     { alignSelf: user ? "flex-end" : "flex-start", alignItems: user ? "flex-end" : "stretch" },
     style,
-  ] as const;
+  ];
   const merged = cn("w-full max-w-[95%] gap-2", className);
   const parts = (
     <>
@@ -139,10 +143,12 @@ export function Message({
           <Pressable
             accessible={false}
             className={merged}
-            style={layout as never}
-            onLongPress={() => {
-              onLongPress?.();
-              if (hasActions) setSheetOpen(true);
+            style={layout}
+            onLongPress={longPress}
+            // TalkBack's actions menu reaches the same sheet as a long press.
+            accessibilityActions={[{ name: "longpress", label: actionSheetTitle ?? MESSAGE_ACTIONS_TITLE }]}
+            onAccessibilityAction={(event) => {
+              if (event.nativeEvent.actionName === "longpress") longPress();
             }}
             {...props}
           >
@@ -181,8 +187,8 @@ export function userBubbleStyle(scheme: "light" | "dark") {
 /**
  * A user bubble's look. `primary` is the web default (`bg-primary` with the
  * label colour). `tint` is the chat override Eva uses (`rounded-surface
- * bg-primary/10 px-3 py-2 text-foreground`): a 10% wash of the primary colour
- * with foreground text and every corner at 16.
+ * bg-primary/10 text-foreground`, still `px-4 py-3`): a 10% wash of the
+ * primary colour with foreground text and every corner at 16.
  */
 export type MessageBubble = "primary" | "tint";
 
@@ -239,9 +245,9 @@ export type MessageContentProps = ViewProps & {
 };
 
 /**
- * The message body. A user message is a filled bubble: by default `px-4 py-3`
- * with the primary fill and label colour, or with `bubble="tint"` `px-3 py-2`
- * on a 10% primary wash with the foreground colour. An assistant message has
+ * The message body. A user message is a filled bubble, `px-4 py-3`: by
+ * default with the primary fill and label colour, or with `bubble="tint"` on
+ * a 10% primary wash with the foreground colour. An assistant message has
  * no fill and the foreground colour. A string child is drawn as
  * `ResponseText`, and `ResponseText` inside takes the colour.
  */
@@ -256,7 +262,7 @@ export function MessageContent({ children, bubble = "primary", quote, className,
   return (
     <ChatTextColorContext.Provider value={color}>
       <View
-        className={cn("min-w-0 max-w-full gap-2", user && (tint ? "px-3 py-2" : "px-4 py-3"), className)}
+        className={cn("min-w-0 max-w-full gap-2", user && "px-4 py-3", className)}
         style={[bubbleStyle, style]}
         {...props}
       >
@@ -273,21 +279,33 @@ export function MessageContent({ children, bubble = "primary", quote, className,
   );
 }
 
-export type MessageMetaProps = { children: ReactNode; className?: string };
+export type MessageMetaProps = {
+  children: ReactNode;
+  /**
+   * Default `caption` (`text-xs`, 12 / 16). `2xs` is the web `text-2xs` token
+   * (11 / 16), as Eva's web chat. Larger text draws both at the caption step.
+   */
+  size?: "caption" | "2xs";
+  className?: string;
+};
 
 /**
  * The muted clock and duration after a message's actions, as Eva's web chat
- * (`text-2xs tabular-nums text-muted-foreground/60`, "10:21 PM · 1m"): the
- * caption size on phones, the muted colour at 60%, tabular figures.
+ * (`tabular-nums text-muted-foreground/60`, "10:21 PM · 1m"): the caption
+ * size (or `size="2xs"`), the muted colour at 60%, tabular figures.
  */
-export function MessageMeta({ children, className }: MessageMetaProps) {
+export function MessageMeta({ children, size = "caption", className }: MessageMetaProps) {
   const scheme = useScheme();
   const largerText = useLargerText();
-  const size = chatTextSize("caption", largerText);
+  const caption = chatTextSize("caption", largerText);
+  const tiny = size === "2xs" && !largerText;
   return (
     <Text
-      className={cn(size, "font-instrument-sans", className)}
-      style={[sizeStyle(size), { color: withAlpha(tokens.color.muted[scheme], 0.6), fontVariant: ["tabular-nums"] }]}
+      className={cn(!tiny && caption, "font-instrument-sans", className)}
+      style={[
+        tiny ? META_TEXT_STYLE : sizeStyle(caption),
+        { color: withAlpha(tokens.color.muted[scheme], 0.6), fontVariant: ["tabular-nums"] },
+      ]}
     >
       {children}
     </Text>
@@ -325,12 +343,20 @@ export type MessageActionProps = {
    */
   selected?: boolean;
   disabled?: boolean;
+  /**
+   * Default `sm`, the web `icon-sm` (32, 16 icon). `xs` is the web `icon-xs`
+   * (28, 14 icon), as Eva's web chat; `touch` is a whole 44 square (16 icon)
+   * for a phone, so the row needs no slop.
+   */
+  size?: ChatIconButtonSize;
   testID?: string;
 };
 
 /**
- * A ghost icon button under a message: the web `icon-sm` (32, 16 icon) with
- * the slop to 44. Copying is up to the app (`onPress`): React Native's own
+ * A ghost icon button under a message: the web `icon-sm` (32, 16 icon), or
+ * `icon-xs` with `size="xs"`, with the slop to 44 high. It has no sideways
+ * slop: the actions sit 2 to 4 apart, and slop there would overlap the next
+ * one, so a tap on Copy could fork or rate instead. Copying is up to the app (`onPress`): React Native's own
  * `Clipboard` is deprecated, and native-ui adds no clipboard package.
  */
 export function MessageAction({
@@ -340,6 +366,7 @@ export function MessageAction({
   onPress,
   selected = false,
   disabled,
+  size,
   testID,
 }: MessageActionProps) {
   const scheme = useScheme();
@@ -353,6 +380,8 @@ export function MessageAction({
       accessibilityState={{ selected }}
       onPress={onPress}
       disabled={disabled}
+      size={size}
+      slop="vertical"
       testID={testID}
     />
   );

package/src/ai/prompt-input-menu.tsx

@@ -0,0 +1,197 @@
+import { Children, useEffect, type ReactNode } from "react";
+import { BackHandler, Pressable, ScrollView, Text, View, useWindowDimensions } from "react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, sizeStyle, textStyle, touchSlop, typeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+/**
+ * The web panel picker height (`computePanelPopupPlacement`): at most 340 and
+ * at least 160, here a share of the window, as a phone has the keyboard up.
+ */
+export const PROMPT_INPUT_MENU = { maxHeight: 340, minHeight: 160, windowShare: 0.35 } as const;
+
+/** Menu height for a window height: the share, kept inside the web's 160 to 340. */
+export function promptInputMenuHeight(windowHeight: number): number {
+  return Math.round(
+    Math.max(PROMPT_INPUT_MENU.minHeight, Math.min(PROMPT_INPUT_MENU.maxHeight, windowHeight * PROMPT_INPUT_MENU.windowShare)),
+  );
+}
+
+export type PromptInputMenuProps = {
+  /** Names the list for VoiceOver and TalkBack, as the web listbox `aria-label` (such as "Mentions" or "Skills"). */
+  title: string;
+  /** `PromptInputMenuItem`s. With none, `empty` shows instead. */
+  children?: ReactNode;
+  /** Shown when there are no rows. Default "No matches.", as the web. */
+  empty?: ReactNode;
+  /**
+   * Closes the picker, as Escape does on the web. Android back calls it while
+   * the picker is mounted, before the screen behind gets the press.
+   */
+  onDismiss?: () => void;
+  testID?: string;
+};
+
+/**
+ * The web `@` / `/` picker (`MentionPickerPopup`, `panel` layout) for touch:
+ * the composer's full width, docked right above the field, so it rides the
+ * keyboard with it. Give it to `PromptInput` as `menu`. The popover surface
+ * (`rounded-surface bg-popover`, the field border in place of the web shadow
+ * ring, as the AI parts draw no shadow) holds a `py-1` list that scrolls past
+ * `promptInputMenuHeight`. Taps reach a row while the keyboard
+ * is up, so picking never drops the keyboard.
+ */
+export function PromptInputMenu({ title, children, empty = "No matches.", onDismiss, testID }: PromptInputMenuProps) {
+  const scheme = useScheme();
+  // Back closes the picker first. An effect: the subscription is a native one.
+  useEffect(() => {
+    if (!onDismiss) return;
+    const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+      onDismiss();
+      return true;
+    });
+    return () => subscription.remove();
+  }, [onDismiss]);
+  const { height } = useWindowDimensions();
+  const hasRows = Children.toArray(children).length > 0;
+  return (
+    <View
+      testID={testID}
+      className="overflow-hidden border"
+      style={{
+        backgroundColor: palette.overlay[scheme],
+        borderColor: tokens.color.border[scheme],
+        borderRadius: tokens.radius.lg,
+        maxHeight: promptInputMenuHeight(height),
+      }}
+    >
+      {hasRows ? (
+        <ScrollView
+          accessibilityRole="list"
+          accessibilityLabel={title}
+          keyboardShouldPersistTaps="always"
+          contentContainerClassName="py-1"
+        >
+          {children}
+        </ScrollView>
+      ) : (
+        // Web: `px-3 py-2.5 text-xs leading-relaxed text-muted-foreground`.
+        <Text
+          className="px-3 py-2.5 font-instrument-sans text-xs"
+          style={[sizeStyle("text-xs", "relaxed"), textStyle("muted", scheme)]}
+        >
+          {empty}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+/** Web badge chip: `rounded-md bg-muted px-1.5 py-0.5 text-3xs font-medium` (10). */
+const BADGE_TEXT = { fontSize: 10, lineHeight: 12 } as const;
+
+export type PromptInputMenuItemProps = {
+  /** The character that inserts this row, muted before the label: `@` or `/`. Left out when `leading` names a person. */
+  prefix?: string;
+  label: string;
+  /** One muted line under the label, such as a skill's description. */
+  description?: string;
+  /** Before the text, such as a teammate's `Avatar` (24). */
+  leading?: ReactNode;
+  /** At the end in place of `badge`, such as a 16 kind icon. */
+  trailing?: ReactNode;
+  /** A small source chip at the end (such as "Eva" or "Claude"), with an optional 11 `badgeIcon`. */
+  badge?: string;
+  badgeIcon?: ReactNode;
+  /** The row Return picks, tinted as the web's keyboard-selected row. */
+  selected?: boolean;
+  onPress?: () => void;
+  testID?: string;
+};
+
+/** A description longer than this is cut with "…", as the web `previewOneLine`. */
+const DESCRIPTION_MAX = 72;
+
+function oneLine(text: string): string {
+  const line = text.replace(/\s+/g, " ").trim();
+  return line.length <= DESCRIPTION_MAX ? line : `${line.slice(0, DESCRIPTION_MAX - 1)}…`;
+}
+
+/**
+ * One picker row, the web `MentionRow` in its option button
+ * (`mx-1 rounded-lg px-2 text-sm`), at least 44 high. `selected` takes the
+ * web `bg-primary/15` (`/25` dark) and a medium label; a press fades to 70%,
+ * as the composer chips, in place of the web hover fill.
+ */
+export function PromptInputMenuItem({
+  prefix,
+  label,
+  description,
+  leading,
+  trailing,
+  badge,
+  badgeIcon,
+  selected = false,
+  onPress,
+  testID,
+}: PromptInputMenuItemProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = textStyle("muted", scheme);
+  const labelSize = sizeStyle(largerText ? "text-lg" : "text-sm");
+  const detail = description ? oneLine(description) : undefined;
+  const end =
+    trailing ??
+    (badge ? (
+      <View
+        className="shrink-0 flex-row items-center gap-1 px-1.5 py-0.5"
+        style={{ backgroundColor: tokens.color.surfaceSecondary[scheme], borderRadius: 6 }}
+      >
+        {badgeIcon}
+        <Text className="font-instrument-sans-medium" style={[BADGE_TEXT, muted, typeStyle("medium")]}>
+          {badge}
+        </Text>
+      </View>
+    ) : null);
+  return (
+    <Pressable
+      testID={testID}
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      accessibilityLabel={[`${prefix ?? ""}${label}`, detail, badge].filter(Boolean).join(", ")}
+      onPress={onPress}
+      // Already 44 high and the list's width: no slop past the row.
+      hitSlop={touchSlop(MIN_TOUCH_TARGET)}
+      // A plain style: NativeWind drops a function `style` beside `className`.
+      className={cn("mx-1 flex-row items-center gap-2 px-2 py-1.5 active:opacity-70", largerText && "py-2")}
+      style={{
+        minHeight: MIN_TOUCH_TARGET,
+        borderRadius: 8,
+        backgroundColor: selected ? withAlpha(palette.primary[scheme], scheme === "dark" ? 0.25 : 0.15) : "transparent",
+      }}
+    >
+      {leading}
+      <View className="min-w-0 flex-1 gap-0.5">
+        <View className="min-w-0 flex-row items-center gap-1.5">
+          <Text
+            numberOfLines={1}
+            className={cn("min-w-0 flex-1", selected ? "font-instrument-sans-medium" : "font-instrument-sans")}
+            style={[labelSize, textStyle("foreground", scheme), selected ? typeStyle("medium") : null]}
+          >
+            {prefix ? <Text style={muted}>{prefix}</Text> : null}
+            {label}
+          </Text>
+          {end}
+        </View>
+        {detail ? (
+          <Text numberOfLines={1} className="font-instrument-sans text-xs" style={[sizeStyle("text-xs"), muted]}>
+            {detail}
+          </Text>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}