@vvedantb/native-ui 0.8.0 → 0.9.0

package/src/ai/trace.tsx

@@ -7,7 +7,7 @@ import { palette } from "../palette";
 import { useLargerText } from "../theme";
 import { tokens } from "../tokens";
 import { useScheme } from "../useScheme";
-import { chatTextSize } from "./chat-text";
+import { chatTextSize, formatElapsed } from "./chat-text";
 import {
   Collapsible,
   CollapsibleChevron,
@@ -232,3 +232,34 @@ export function AgentTraceCollapsibleContent({
     </CollapsibleContent>
   );
 }
+
+export type AgentTraceFoldProps = Omit<CollapsibleProps, "children"> & {
+  /** How long the turn ran, in seconds. The title reads "Worked for 1m 5s". */
+  seconds: number;
+  /** The settled turn's steps, shown in an `AgentTrace` when open. */
+  children: ReactNode;
+};
+
+/**
+ * A settled turn folded behind one line, as the web `ActivityTasks` in its
+ * folded (Codex-style) mode: "Worked for …" over a hairline
+ * (`border-b border-border pb-1.5`), closed by default, and the steps in an
+ * `AgentTrace` 8 below when open.
+ */
+export function AgentTraceFold({ seconds, children, defaultOpen = false, className, ...props }: AgentTraceFoldProps) {
+  const scheme = useScheme();
+  return (
+    <Collapsible className={cn("w-full min-w-0", className)} defaultOpen={defaultOpen} {...props}>
+      <View style={{ borderBottomWidth: 1, borderBottomColor: tokens.color.border[scheme], paddingBottom: 6 }}>
+        <AgentTraceCollapsibleTrigger>
+          <AgentTraceLine>
+            <AgentTraceTitle>{`Worked for ${formatElapsed(seconds)}`}</AgentTraceTitle>
+          </AgentTraceLine>
+        </AgentTraceCollapsibleTrigger>
+      </View>
+      <CollapsibleContent>
+        <AgentTrace className="mt-2">{children}</AgentTrace>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/configureTheme.ts

@@ -0,0 +1,60 @@
+import { palette, type Palette } from "./palette";
+import { tokens, type Tokens } from "./tokens";
+
+/** `tokens` and `palette` value types with the literal hex widened to `string` and `readonly` dropped. */
+type Widen<T> = T extends string ? string : { -readonly [K in keyof T]: Widen<T[K]> };
+
+/** The `tokens.color` shape: each key a `{ light, dark }` pair, except `white` and `black`. */
+export type ThemeColors = Widen<Tokens["color"]>;
+
+/** The `palette` shape: each key a `{ light, dark }` pair, except `destructive`. */
+export type ThemePalette = Widen<Palette>;
+
+export type ThemeConfig = {
+  /** Overrides for `tokens.color` (neutrals and surfaces). Keys not given keep the package value. */
+  color?: Partial<ThemeColors>;
+  /** Overrides for `palette` (primary, danger, overlay and the other web semantic colours). */
+  palette?: Partial<ThemePalette>;
+};
+
+type ColorValue = string | { light: string; dark: string };
+
+/**
+ * Copies each given key onto `target`. A `{ light, dark }` pair is copied into
+ * the existing pair object, so values that hold the pair (`floatingFill`,
+ * `floatingHairline`, `floatingSolidFill`) follow it.
+ */
+function assignColors(
+  target: { readonly [key: string]: ColorValue },
+  source: { readonly [key: string]: ColorValue | undefined },
+) {
+  for (const [key, value] of Object.entries(source)) {
+    if (value === undefined) continue;
+    const current = target[key];
+    if (typeof current === "object" && typeof value === "object") Object.assign(current, value);
+    else Object.assign(target, { [key]: value });
+  }
+}
+
+/**
+ * Sets the app's own colours. It writes into the shared `tokens.color` and
+ * `palette` objects, which every component reads at render, so call it once at
+ * app start, before the first render (for example at the top of the root
+ * `_layout.tsx`, outside the component). A call after the first render does not
+ * redraw mounted components. Each pair gives both schemes:
+ *
+ * ```ts
+ * configureTheme({
+ *   color: { background: { light: "#f4f5f6", dark: "#020202" } },
+ *   palette: { primary: { light: "#09090b", dark: "#fafafa" } },
+ * });
+ * ```
+ *
+ * Only the JS colours change. NativeWind classes keep the app's Tailwind theme
+ * (`tailwind-preset` reads the package values from source), and constants copied
+ * out before the call (`NEUTRAL_500`) keep the package value.
+ */
+export function configureTheme(config: ThemeConfig): void {
+  if (config.color) assignColors(tokens.color, config.color);
+  if (config.palette) assignColors(palette, config.palette);
+}

package/src/entries/markdown.ts

@@ -0,0 +1,5 @@
+// `@vvedantb/native-ui/markdown`: `Markdown`, chat markdown styled as the web
+// `.markdown` block. Not on the root entry: it imports the optional peer
+// `react-native-marked`, and Metro does not tree-shake.
+export { Markdown, markdownStyles, inlineCodeStyle, MARKDOWN_SCALE, MARKDOWN_LIST } from "../markdown/Markdown";
+export type { MarkdownProps } from "../markdown/Markdown";

package/src/entries/primitives.ts

@@ -59,6 +59,8 @@ export type {
   TabsContentProps,
 } from "../Tabs";
 export { ListRow } from "../ListRow";
+export { DividedList } from "../DividedList";
+export type { DividedListProps } from "../DividedList";
 export type { ListRowProps } from "../ListRow";
 export { HeaderIconButton } from "../HeaderIconButton";
 export { ThemeToggle } from "../ThemeToggle";
@@ -100,6 +102,26 @@ export {
 } from "../AlertDialog";
 export type { AlertDialogProps, AlertDialogContentProps } from "../AlertDialog";
 export { ConfirmDialog } from "../ConfirmDialog";
+export { BulkActionBar, BULK_BAR_LABEL_MIN_WIDTH } from "../BulkActionBar";
+export type { BulkActionBarProps, BulkBarAction } from "../BulkActionBar";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+} from "../DropdownMenu";
+export type {
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuContentProps,
+  DropdownMenuAlign,
+  DropdownMenuLabelProps,
+  DropdownMenuItemProps,
+  DropdownMenuRadioItemProps,
+} from "../DropdownMenu";
 export type { ConfirmDialogProps } from "../ConfirmDialog";
 export {
   Sheet,

package/src/entries/theme.ts

@@ -11,5 +11,7 @@ export {
 export type { NativeUiTheme } from "../theme";
 export { palette, withAlpha } from "../palette";
 export type { Palette } from "../palette";
+export { configureTheme } from "../configureTheme";
+export type { ThemeConfig, ThemeColors, ThemePalette } from "../configureTheme";
 export { fontClass } from "../typography";
 export { PINK_50, PINK_100, PINK_600, PINK_700, NEUTRAL_100, NEUTRAL_500, NEUTRAL_900, Colors } from "../colors";

package/src/examples/ParityGallery.tsx

@@ -7,7 +7,9 @@ import { useState, type ReactNode } from "react";
 import { ScrollView, Text, View, type TextProps } from "react-native";
 import {
   IconCopy,
+  IconDots,
   IconInbox,
+  IconPencil,
   IconPhoto,
   IconRefresh,
   IconTrash,
@@ -28,6 +30,14 @@ import {
   AmbientBackground,
   AppMark,
   AppWordmark,
+  BulkActionBar,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Avatar,
   AvatarFallback,
   Badge,
@@ -226,6 +236,8 @@ function GalleryScreen() {
   const [muted, setMuted] = useState(false);
   const [sort, setSort] = useState<"newest" | "name">("newest");
   const [page, setPage] = useState(0);
+  const [menuSort, setMenuSort] = useState<"newest" | "oldest">("newest");
+  const [picked, setPicked] = useState(2);
   const scheme = useScheme();
 
   return (
@@ -563,6 +575,50 @@ function GalleryScreen() {
           </View>
         </Section>
 
+        <Section title="DropdownMenu and BulkActionBar">
+          <View className="flex-row justify-end">
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                accessibilityLabel="List options"
+                hitSlop={6}
+                className="h-8 w-8 items-center justify-center"
+              >
+                <IconDots size={18} color={tokens.color.muted[scheme]} />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuLabel>Sort</DropdownMenuLabel>
+                <DropdownMenuRadioItem checked={menuSort === "newest"} onSelect={() => setMenuSort("newest")}>
+                  Newest first
+                </DropdownMenuRadioItem>
+                <DropdownMenuRadioItem checked={menuSort === "oldest"} onSelect={() => setMenuSort("oldest")}>
+                  Oldest first
+                </DropdownMenuRadioItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem icon={IconPencil} onSelect={() => toast("Rename")}>
+                  Rename
+                </DropdownMenuItem>
+                <DropdownMenuItem icon={IconTrash} destructive onSelect={() => toast.error("Deleted")}>
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </View>
+          <View style={{ height: 88 }}>
+            <BulkActionBar
+              isSelecting
+              selectedCount={picked}
+              totalCount={5}
+              bottomOffset={0}
+              onExitSelect={() => setPicked(0)}
+              onSelectAll={() => setPicked(5)}
+              onClearSelection={() => setPicked(0)}
+              primaryActions={[{ key: "copy", label: "Copy items", shortLabel: "Copy", icon: IconCopy, onClick: () => toast("Copied") }]}
+              moreActions={[{ key: "rename", label: "Rename", icon: IconPencil, onClick: () => toast("Rename") }]}
+              destructiveAction={{ key: "delete", label: "Delete items", shortLabel: "Delete", icon: IconTrash, destructive: true, onClick: () => toast.error("Deleted") }}
+            />
+          </View>
+        </Section>
+
         <Section title="EmptyState">
           <EmptyState title="Nothing yet" description="Items you add show here." compact />
           <EmptyState.Root variant="panel">

package/src/floating.ts

@@ -45,10 +45,8 @@ export const floatingHairline = tokens.color.hairline;
 
 export const floatingFill = tokens.color.fill;
 
-export const floatingSolidFill = {
-  light: tokens.color.surface.light,
-  dark: tokens.color.surface.dark,
-} as const;
+/** The `tokens.color.surface` pair itself, so `configureTheme` reaches it. */
+export const floatingSolidFill = tokens.color.surface;
 
 export function tabBarReserve(largerText: boolean, bottomInset: number) {
   const bar = largerText

package/src/highlight.ts

@@ -0,0 +1,117 @@
+import type * as PrismReactRenderer from "prism-react-renderer";
+
+export type PrismReactRendererModule = typeof PrismReactRenderer;
+
+let prismReactRenderer: PrismReactRendererModule | null | undefined;
+
+/**
+ * `prism-react-renderer`, or `null` when the optional peer is not installed.
+ * `CodeBlock` highlights with it. Metro bundles a `require` placed directly in
+ * a `try` block as an optional dependency, so a missing peer does not break
+ * the bundle.
+ */
+export function loadPrismReactRenderer(): PrismReactRendererModule | null {
+  if (prismReactRenderer === undefined) {
+    try {
+      prismReactRenderer = require("prism-react-renderer");
+    } catch {
+      prismReactRenderer = null;
+    }
+  }
+  // `?? null`: with the real peer types installed, TypeScript keeps `undefined`
+  // in the type after the `try` (the package typecheck only sees a stub).
+  return prismReactRenderer ?? null;
+}
+
+export type CodeColorRole =
+  | "plain"
+  | "comment"
+  | "keyword"
+  | "string"
+  | "constant"
+  | "function"
+  | "tag"
+  | "variable"
+  | "inserted"
+  | "deleted";
+
+/**
+ * The shiki `github-light` and `github-dark` colours the web `CodeBlock`
+ * uses, by role. Plain text is the theme foreground.
+ */
+export const GITHUB_CODE_COLORS: Record<"light" | "dark", Record<CodeColorRole, string>> = {
+  light: {
+    plain: "#24292e",
+    comment: "#6a737d",
+    keyword: "#d73a49",
+    string: "#032f62",
+    constant: "#005cc5",
+    function: "#6f42c1",
+    tag: "#22863a",
+    variable: "#e36209",
+    inserted: "#22863a",
+    deleted: "#b31d28",
+  },
+  dark: {
+    plain: "#e1e4e8",
+    comment: "#6a737d",
+    keyword: "#f97583",
+    string: "#9ecbff",
+    constant: "#79b8ff",
+    function: "#b392f0",
+    tag: "#85e89d",
+    variable: "#ffab70",
+    inserted: "#85e89d",
+    deleted: "#fdaeb7",
+  },
+};
+
+/** Prism token types to their GitHub role. Types not listed are plain. */
+const PRISM_ROLE: Record<string, CodeColorRole> = {
+  comment: "comment",
+  prolog: "comment",
+  doctype: "comment",
+  cdata: "comment",
+  keyword: "keyword",
+  operator: "keyword",
+  atrule: "keyword",
+  important: "keyword",
+  rule: "keyword",
+  string: "string",
+  char: "string",
+  "attr-value": "string",
+  regex: "string",
+  url: "string",
+  "template-string": "string",
+  number: "constant",
+  boolean: "constant",
+  constant: "constant",
+  property: "constant",
+  "attr-name": "constant",
+  symbol: "constant",
+  builtin: "constant",
+  entity: "constant",
+  function: "function",
+  "function-variable": "function",
+  "class-name": "function",
+  maybe_class_name: "function",
+  tag: "tag",
+  selector: "tag",
+  variable: "variable",
+  parameter: "variable",
+  inserted: "inserted",
+  deleted: "deleted",
+  punctuation: "plain",
+  plain: "plain",
+};
+
+/**
+ * The colour of a Prism token from its types. Later types win, as in
+ * `prism-react-renderer`'s theme lookup: the `<` of a tag (`["tag",
+ * "punctuation"]`) is plain.
+ */
+export function codeTokenColor(types: readonly string[], scheme: "light" | "dark"): string {
+  let role: CodeColorRole = "plain";
+  for (const type of types) role = PRISM_ROLE[type] ?? role;
+  return GITHUB_CODE_COLORS[scheme][role];
+}

package/src/index.ts

@@ -10,6 +10,8 @@ export {
 export type { NativeUiTheme } from "./theme";
 export { palette, withAlpha } from "./palette";
 export type { Palette } from "./palette";
+export { configureTheme } from "./configureTheme";
+export type { ThemeConfig, ThemeColors, ThemePalette } from "./configureTheme";
 export { fontClass } from "./typography";
 export {
   FLOATING_INSET,
@@ -93,6 +95,8 @@ export type {
   TabsContentProps,
 } from "./Tabs";
 export { ListRow } from "./ListRow";
+export { DividedList } from "./DividedList";
+export type { DividedListProps } from "./DividedList";
 export type { ListRowProps } from "./ListRow";
 export { HeaderIconButton } from "./HeaderIconButton";
 export { ThemeToggle } from "./ThemeToggle";
@@ -134,6 +138,26 @@ export {
 } from "./AlertDialog";
 export type { AlertDialogProps, AlertDialogContentProps } from "./AlertDialog";
 export { ConfirmDialog } from "./ConfirmDialog";
+export { BulkActionBar, BULK_BAR_LABEL_MIN_WIDTH } from "./BulkActionBar";
+export type { BulkActionBarProps, BulkBarAction } from "./BulkActionBar";
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+} from "./DropdownMenu";
+export type {
+  DropdownMenuProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuContentProps,
+  DropdownMenuAlign,
+  DropdownMenuLabelProps,
+  DropdownMenuItemProps,
+  DropdownMenuRadioItemProps,
+} from "./DropdownMenu";
 export type { ConfirmDialogProps } from "./ConfirmDialog";
 export {
   Sheet,

package/src/markdown/Markdown.tsx

@@ -0,0 +1,191 @@
+import { useContext, type ReactNode } from "react";
+import { Text, View, type TextStyle, type ViewStyle } from "react-native";
+import { Renderer, useMarkdown, type MarkedStyles } from "react-native-marked";
+import { CodeBlock } from "../ai/code-block";
+import { MONO_FONT, chatTextSize } from "../ai/chat-text";
+import { ChatTextColorContext } from "../ai/response-text";
+import { sizeStyle } from "../controlStyles";
+import { palette, withAlpha } from "../palette";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+
+/** Instrument Sans faces, as the app loads them (see `INSTRUMENT_SANS` in tailwind-preset.cjs). */
+const FONT = {
+  regular: "InstrumentSans_400Regular",
+  semibold: "InstrumentSans_600SemiBold",
+} as const;
+
+/**
+ * Sizes from the web `markdown.css` (`@vvedantb/ui/tokens/css/markdown.css`),
+ * in em of the body size: h1 1.43, h2 1.29, h3 1.14, h4-h6 1; inline code
+ * 0.86. Headings line-height 1.3; blocks 0.65rem apart.
+ */
+export const MARKDOWN_SCALE = {
+  h1: 1.43,
+  h2: 1.29,
+  h3: 1.14,
+  h4: 1,
+  inlineCode: 0.86,
+  headingLineHeight: 1.3,
+  blockGap: 10,
+} as const;
+
+export type MarkdownProps = {
+  /** The markdown source. */
+  children: string;
+  /** With it, fenced code blocks get a copy button (native-ui adds no clipboard package). */
+  onCopyCode?: (code: string) => void | Promise<void>;
+};
+
+/**
+ * Markdown at chat size, styled as the web `.markdown` (Streamdown) block:
+ * compact headings, primary links underlined at 30%, inline code on a 6%
+ * foreground wash at radius 6, and fenced code as `CodeBlock` (the flat
+ * `surface-secondary` panel with a language and copy header). Text takes the
+ * enclosing `MessageContent` colour, like `ResponseText`.
+ *
+ * Needs the optional peer `react-native-marked` (it renders through
+ * `useMarkdown`, so it nests in a `ScrollView` without a `FlatList`).
+ */
+export function Markdown({ children, onCopyCode }: MarkdownProps) {
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  const body = sizeStyle(chatTextSize("body", largerText));
+  const color = inherited ?? tokens.color.foreground[scheme];
+  const renderer = new NativeUiMarkdownRenderer(scheme, body.fontSize, onCopyCode);
+  const elements = useMarkdown(children, {
+    colorScheme: scheme,
+    renderer,
+    theme: {
+      colors: {
+        text: color,
+        link: palette.primary[scheme],
+        code: tokens.color.surfaceSecondary[scheme],
+        border: tokens.color.border[scheme],
+      },
+    },
+    styles: markdownStyles(scheme, body, color),
+  });
+  return <>{elements}</>;
+}
+
+/** The style map `useMarkdown` takes, from the web scale. Exported for tests. */
+export function markdownStyles(
+  scheme: "light" | "dark",
+  body: { fontSize: number; lineHeight: number },
+  color: string,
+): MarkedStyles {
+  const heading = (scale: number): TextStyle => ({
+    fontFamily: FONT.semibold,
+    fontWeight: "600",
+    fontSize: Math.round(body.fontSize * scale),
+    lineHeight: Math.round(body.fontSize * scale * MARKDOWN_SCALE.headingLineHeight),
+    letterSpacing: -0.01 * body.fontSize * scale,
+    color,
+    marginTop: 20,
+    marginBottom: 8,
+  });
+  const gap = { marginVertical: MARKDOWN_SCALE.blockGap / 2 };
+  return {
+    text: { fontFamily: FONT.regular, fontSize: body.fontSize, lineHeight: body.lineHeight, color },
+    paragraph: { ...gap, paddingVertical: 0 },
+    strong: { fontFamily: FONT.semibold, fontWeight: "600" },
+    em: { fontStyle: "italic" },
+    link: {
+      color: palette.primary[scheme],
+      textDecorationLine: "underline",
+      textDecorationColor: withAlpha(palette.primary[scheme], 0.3),
+    },
+    h1: heading(MARKDOWN_SCALE.h1),
+    h2: heading(MARKDOWN_SCALE.h2),
+    h3: heading(MARKDOWN_SCALE.h3),
+    h4: heading(MARKDOWN_SCALE.h4),
+    h5: heading(MARKDOWN_SCALE.h4),
+    h6: { ...heading(MARKDOWN_SCALE.h4), color: tokens.color.muted[scheme] },
+    li: { fontFamily: FONT.regular, fontSize: body.fontSize, lineHeight: body.lineHeight, color },
+    blockquote: {
+      ...gap,
+      paddingLeft: 13,
+      borderLeftWidth: 2,
+      borderLeftColor: tokens.color.border[scheme],
+      backgroundColor: "transparent",
+    },
+    hr: { marginVertical: 20, height: 1, backgroundColor: tokens.color.border[scheme] },
+    codespan: inlineCodeStyle(scheme, body.fontSize),
+  };
+}
+
+/** Web `.markdown-inline-code`: 0.86em mono on a 6% foreground wash, radius 6. */
+export function inlineCodeStyle(scheme: "light" | "dark", fontSize: number): TextStyle {
+  return {
+    fontFamily: MONO_FONT,
+    fontStyle: "normal",
+    fontSize: Math.round(fontSize * MARKDOWN_SCALE.inlineCode),
+    backgroundColor: withAlpha(tokens.color.foreground[scheme], 0.06),
+    borderRadius: 6,
+  };
+}
+
+/** Web `.markdown` lists: 1.25rem (20) indent, 0.25rem (4) between items, muted markers (a 5-wide disc). */
+export const MARKDOWN_LIST = { indent: 20, itemGap: 4, disc: 5 } as const;
+
+/**
+ * `react-native-marked`'s renderer with native-ui code and lists: `CodeBlock`
+ * panels, inline-code chips, and lists drawn as the web `.markdown` lists
+ * (the library's own markers apply its marker style to every item).
+ */
+class NativeUiMarkdownRenderer extends Renderer {
+  constructor(
+    private readonly scheme: "light" | "dark",
+    private readonly fontSize: number,
+    private readonly onCopyCode: MarkdownProps["onCopyCode"],
+  ) {
+    super();
+  }
+
+  override code(text: string, language?: string): ReactNode {
+    return <CodeBlock key={this.getKey()} code={text} language={language || undefined} onCopy={this.onCopyCode} />;
+  }
+
+  override codespan(text: string): ReactNode {
+    // Text in Text takes no padding: no-break spaces pad the chip and keep it on one line.
+    return (
+      <Text key={this.getKey()} selectable style={inlineCodeStyle(this.scheme, this.fontSize)}>
+        {`\u00A0${text}\u00A0`}
+      </Text>
+    );
+  }
+
+  override list(
+    ordered: boolean,
+    li: ReactNode[],
+    _listStyle?: ViewStyle,
+    textStyle?: TextStyle,
+    startIndex = 1,
+  ): ReactNode {
+    const muted = tokens.color.muted[this.scheme];
+    const lineHeight = typeof textStyle?.lineHeight === "number" ? textStyle.lineHeight : 24;
+    // A drawn disc: the font's bullet glyph is far smaller than the web `disc` marker.
+    const disc = MARKDOWN_LIST.disc;
+    return (
+      <View key={this.getKey()} style={{ marginVertical: MARKDOWN_SCALE.blockGap / 2, gap: MARKDOWN_LIST.itemGap }}>
+        {li.map((item, index) => (
+          <View key={index} style={{ flexDirection: "row" }}>
+            {ordered ? (
+              <Text style={[textStyle, { width: MARKDOWN_LIST.indent, color: muted, fontVariant: ["tabular-nums"] }]}>
+                {`${startIndex + index}.`}
+              </Text>
+            ) : (
+              <View style={{ width: MARKDOWN_LIST.indent, paddingTop: (lineHeight - disc) / 2 }}>
+                <View style={{ width: disc, height: disc, borderRadius: disc / 2, backgroundColor: muted }} />
+              </View>
+            )}
+            <View style={{ flex: 1 }}>{item}</View>
+          </View>
+        ))}
+      </View>
+    );
+  }
+}