@lotics/ui 2.4.1 → 2.5.0

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@lotics/ui",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
     "./colors": "./src/colors.ts",
     "./mime": "./src/mime.ts",
     "./download": "./src/download.ts",
+    "./file_picker": "./src/file_picker.ts",
     "./comments_thread": "./src/comments_thread.tsx",
     "./file_badge": "./src/file_badge.tsx",
+    "./file_dropzone": "./src/file_dropzone.tsx",
     "./file_thumbnail": "./src/file_thumbnail.tsx",
     "./file_preview": {
       "react-native": "./src/file_preview.tsx",
@@ -27,13 +29,18 @@
     "./trend_chip": "./src/trend_chip.tsx",
     "./section_card": "./src/section_card.tsx",
     "./kpi_card": "./src/kpi_card.tsx",
+    "./kpi_strip": "./src/kpi_strip.tsx",
+    "./empty_state": "./src/empty_state.tsx",
+    "./format_money": "./src/format_money.ts",
     "./kanban": "./src/kanban/index.ts",
     "./calendar": "./src/calendar/index.ts",
     "./gantt": "./src/gantt/index.ts",
     "./ring_gauge": "./src/ring_gauge.tsx",
-    "./alert_row": "./src/alert_row.tsx",
     "./stacked_progress_bar": "./src/stacked_progress_bar.tsx",
     "./legend_item": "./src/legend_item.tsx",
+    "./breakdown": "./src/breakdown.tsx",
+    "./status_grid": "./src/status_grid.tsx",
+    "./heatmap": "./src/heatmap.tsx",
     "./trend_footer": "./src/trend_footer.tsx",
     "./spacing": "./src/spacing.ts",
     "./theme": "./src/theme.tsx",
@@ -64,8 +71,12 @@
     "./menu_button": "./src/menu_button.tsx",
     "./menu_list_item": "./src/menu_list_item.tsx",
     "./pressable_highlight": "./src/pressable_highlight.tsx",
+    "./pressable_row": "./src/pressable_row.tsx",
+    "./floating_action_bar": "./src/floating_action_bar.tsx",
     "./icon_button": "./src/icon_button.tsx",
     "./info_popover": "./src/info_popover.tsx",
+    "./peek": "./src/peek.tsx",
+    "./action_menu": "./src/action_menu.tsx",
     "./card_select_item": "./src/card_select_item.tsx",
     "./badge": "./src/badge.tsx",
     "./divider": "./src/divider.tsx",
@@ -86,6 +97,18 @@
     "./form_text_input": "./src/form_text_input.tsx",
     "./form_switch": "./src/form_switch.tsx",
     "./pill_button": "./src/pill_button.tsx",
+    "./filter_pill": "./src/filter_pill.tsx",
+    "./range_slider": "./src/range_slider.tsx",
+    "./counter": "./src/counter.tsx",
+    "./link_button": "./src/link_button.tsx",
+    "./sort_header": "./src/sort_header.tsx",
+    "./table": "./src/table.tsx",
+    "./detail_row": "./src/detail_row.tsx",
+    "./scan_field": "./src/scan_field.tsx",
+    "./step_list": "./src/step_list.tsx",
+    "./completion_state": "./src/completion_state.tsx",
+    "./remainder_meter": "./src/remainder_meter.tsx",
+    "./allocation_row": "./src/allocation_row.tsx",
     "./back_button": "./src/back_button.tsx",
     "./container": "./src/container.tsx",
     "./count": "./src/count.tsx",
@@ -101,12 +124,8 @@
     "./card": "./src/card.tsx",
     "./accordion": "./src/accordion.tsx",
     "./stepper": "./src/stepper.tsx",
+    "./step_progress": "./src/step_progress.tsx",
     "./tabs": "./src/tabs.tsx",
-    "./table": {
-      "react-native": "./src/table.tsx",
-      "default": "./src/table.web.tsx"
-    },
-    "./table_types": "./src/table_types.ts",
     "./auto_sizer": "./src/auto_sizer.tsx",
     "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",
@@ -158,7 +177,7 @@
     "./grid/data_grid_context": "./src/grid/data_grid_context.ts",
     "./grid/search_highlight": "./src/grid/search_highlight.ts",
     "./column_filter": "./src/column_filter.tsx",
-    "./table_picker": "./src/table_picker.tsx"
+    "./chip_group": "./src/chip_group.tsx"
   },
   "files": [
     "src"

package/src/accordion.tsx

@@ -1,56 +1,63 @@
-import { ReactNode, useState } from "react";
+import { Children, createContext, isValidElement, ReactNode, useContext, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { AnimationFadeIn } from "./animation_fade_in";
 import { colors } from "./colors";
-import { Icon } from "./icon";
+import { Icon, type IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
+import { Text } from "./text";
+
+interface AccordionContextValue {
+  expanded: boolean;
+  toggle: () => void;
+  /** Whether this Accordion has an `AccordionContent` child — without one
+   * the header renders as a plain (non-pressable, chevron-less) row. */
+  hasContent: boolean;
+}
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+
+function useAccordionContext() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error("Accordion components must be used within an Accordion");
+  }
+  return context;
+}
 
 export interface AccordionProps {
-  /** Content of the clickable header (the main area); a chevron is appended. */
-  header: ReactNode;
-  /** Collapsible body, revealed when expanded. */
+  /** `AccordionHeader` (+ optionally `AccordionContent`). Content is
+   * optional — a header-only Accordion is a plain row, letting a list mix
+   * expandable and static rows with identical rhythm. */
   children: ReactNode;
-  /** Rendered after the chevron, OUTSIDE the toggle — e.g. an action button
-   *  that must stay clickable without expanding the panel. */
-  headerRight?: ReactNode;
   /** Uncontrolled initial state. Ignored when `expanded` is provided. */
   defaultExpanded?: boolean;
   /** Controlled open state — provide together with `onToggle`. */
   expanded?: boolean;
   onToggle?: (expanded: boolean) => void;
-  /** Container style, always applied. */
   style?: StyleProp<ViewStyle>;
-  /** Merged onto the container while open — e.g. an accent border. */
-  expandedStyle?: StyleProp<ViewStyle>;
-  /** Merged onto the clickable trigger (after the comfortable-tap-target
-   *  defaults). Use to bleed the hover highlight full-width while keeping the
-   *  header label aligned with surrounding content — e.g.
-   *  `{ marginHorizontal: -12, paddingHorizontal: 12 }` inside a 12px-padded
-   *  container — or to widen the tap target. */
-  triggerStyle?: StyleProp<ViewStyle>;
-  accessibilityLabel?: string;
 }
 
 /**
- * A single expand/collapse disclosure. The header is a caller-supplied node
- * (so it can be as rich as a row of metrics), the chevron is added
- * automatically, and `headerRight` holds an action that stays clickable
- * without toggling. Controlled via `expanded`/`onToggle`, or uncontrolled via
- * `defaultExpanded`. Compose several to build an accordion list.
+ * A single expand/collapse disclosure, composable like the Card/Dialog
+ * families:
+ *
+ *   <Accordion expanded={open} onToggle={...}>
+ *     <AccordionHeader>
+ *       <AccordionTitle icon="circle-alert" iconColor={colors.red[500]}>
+ *         Công nợ quá hạn trên 30 ngày
+ *       </AccordionTitle>
+ *       <AccordionMeta>286.500.000 ₫</AccordionMeta>
+ *       <Badge label="6" color="red" />
+ *     </AccordionHeader>
+ *     <AccordionContent>…the records behind the number…</AccordionContent>
+ *   </Accordion>
+ *
+ * The chevron and press handling come from `AccordionHeader` automatically
+ * when content exists. Controlled via `expanded`/`onToggle`, or uncontrolled
+ * via `defaultExpanded`. Compose several (with Dividers) to build a list.
  */
 export function Accordion(props: AccordionProps) {
-  const {
-    header,
-    children,
-    headerRight,
-    defaultExpanded = false,
-    expanded: controlled,
-    onToggle,
-    style,
-    expandedStyle,
-    triggerStyle,
-    accessibilityLabel,
-  } = props;
+  const { children, defaultExpanded = false, expanded: controlled, onToggle, style } = props;
   const [internal, setInternal] = useState(defaultExpanded);
   const expanded = controlled ?? internal;
 
@@ -60,51 +67,127 @@ export function Accordion(props: AccordionProps) {
     onToggle?.(next);
   };
 
+  const hasContent = Children.toArray(children).some((c) => isValidElement(c) && c.type === AccordionContent);
+
+  return (
+    <AccordionContext.Provider value={{ expanded, toggle, hasContent }}>
+      <View style={style}>{children}</View>
+    </AccordionContext.Provider>
+  );
+}
+
+export interface AccordionHeaderProps {
+  /** Usually `AccordionTitle` (+ optionally `AccordionMeta`, a Badge, or any
+   * right-side node). The band is a layout slot. */
+  children: ReactNode;
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * The always-visible row. Pressable with an auto chevron (down/up) when the
+ * Accordion has `AccordionContent`; a plain row with identical rhythm when
+ * it doesn't.
+ */
+export function AccordionHeader(props: AccordionHeaderProps) {
+  const { children, accessibilityLabel, style } = props;
+  const { expanded, toggle, hasContent } = useAccordionContext();
+
+  if (!hasContent) {
+    return <View style={[styles.headerRow, style]}>{children}</View>;
+  }
+
+  return (
+    <PressableHighlight
+      onPress={toggle}
+      accessibilityRole="button"
+      accessibilityState={{ expanded }}
+      accessibilityLabel={accessibilityLabel}
+      style={[styles.headerRow, styles.pressable, style]}
+    >
+      {children}
+      <Icon name={expanded ? "chevron-up" : "chevron-down"} size={16} color={colors.zinc[400]} />
+    </PressableHighlight>
+  );
+}
+
+export interface AccordionTitleProps {
+  children: ReactNode;
+  /** Leading glyph — the row's category/severity marker. */
+  icon?: IconName;
+  /** Full-strength accent for the icon (e.g. colors.red[500]). */
+  iconColor?: string;
+}
+
+/** Title slot for AccordionHeader — optional leading icon + sm label. Grows
+ * to push siblings (meta, badges) to the right edge. */
+export function AccordionTitle(props: AccordionTitleProps) {
   return (
-    <View style={[styles.container, style, expanded ? expandedStyle : null]}>
-      <View style={styles.headerRow}>
-        <PressableHighlight
-          onPress={toggle}
-          accessibilityRole="button"
-          accessibilityState={{ expanded }}
-          accessibilityLabel={accessibilityLabel}
-          style={[styles.trigger, triggerStyle]}
-        >
-          <View style={styles.headerContent}>{header}</View>
-          <Icon name={expanded ? "chevron-up" : "chevron-down"} size={18} color={colors.zinc[400]} />
-        </PressableHighlight>
-        {headerRight}
-      </View>
-      {expanded ? <AnimationFadeIn style={styles.body}>{children}</AnimationFadeIn> : null}
+    <View style={styles.title}>
+      {props.icon ? <Icon name={props.icon} size={16} color={props.iconColor ?? colors.zinc[500]} /> : null}
+      <Text size="sm" numberOfLines={1} style={styles.titleText}>
+        {props.children}
+      </Text>
     </View>
   );
 }
 
+export interface AccordionMetaProps {
+  children: ReactNode;
+}
+
+/** Right-side context for AccordionHeader — an amount, date, or short hint.
+ * xs muted, tabular for numerals. */
+export function AccordionMeta(props: AccordionMetaProps) {
+  return (
+    <Text size="xs" color="muted" tabular>
+      {props.children}
+    </Text>
+  );
+}
+
+export interface AccordionContentProps {
+  /** Anything — record rows, key-value pairs, free text, actions. */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** The collapsible body, revealed in place under the header. Plain by
+ * design — content indents to align under the title, no tinted well; the
+ * chevron + position already say "inside". Compose rows/dividers/actions
+ * directly. */
+export function AccordionContent(props: AccordionContentProps) {
+  const { expanded } = useAccordionContext();
+  if (!expanded) return null;
+  return <AnimationFadeIn style={[styles.content, props.style]}>{props.children}</AnimationFadeIn>;
+}
+
 const styles = StyleSheet.create({
-  container: {
-    borderRadius: 12,
-  },
   headerRow: {
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
+    paddingVertical: 12,
+    // ≥40px press target; the height doubles as the list's row rhythm.
+    minHeight: 44,
   },
-  trigger: {
+  pressable: {
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    marginHorizontal: -8,
+  },
+  title: {
     flex: 1,
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
-    // A bare row is a too-small tap target and gives PressableHighlight's
-    // hover/press tint no room to read as a button. Pad vertically for a
-    // comfortable target and round the corners so the tint is a pill.
-    paddingVertical: 8,
-    borderRadius: 8,
   },
-  headerContent: {
+  titleText: {
     flex: 1,
   },
-  body: {
-    // The trigger's own bottom padding contributes ~8 of the header→body gap.
-    marginTop: 4,
+  // Aligns under the title text (16px icon + 12px gap = 28).
+  content: {
+    paddingLeft: 28,
+    paddingBottom: 10,
   },
 });

package/src/action_menu.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { IconButton } from "./icon_button";
+import { MenuButton } from "./menu_button";
+import { Popover, PopoverTrigger, PopoverContent } from "./popover";
+import type { PopoverAlign, PopoverSide } from "./popover";
+import type { IconName } from "./icon";
+
+export interface ActionMenuItem {
+  key: string;
+  label: string;
+  icon?: IconName;
+  /** Destructive styling — still confirm destructive actions per the
+   * Action Layout rules before executing. */
+  danger?: boolean;
+  disabled?: boolean;
+  onPress: () => void;
+}
+
+export interface ActionMenuProps {
+  /** The row's actions, in priority order. Destructive items last. */
+  items: ActionMenuItem[];
+  /** Announced name for the ⋯ trigger ("Hành động cho SR-2026-0081"). */
+  accessibilityLabel: string;
+  side?: PopoverSide;
+  align?: PopoverAlign;
+}
+
+/**
+ * The ⋯ overflow menu for a list row — the MINIMUM door a row may have.
+ * Every listed record must be actionable somehow: primary press → workspace
+ * Drawer; read-only drill → Accordion/Peek; everything else → this menu.
+ * A row with none of those is furniture.
+ */
+export function ActionMenu(props: ActionMenuProps) {
+  const { items, accessibilityLabel, side = "bottom", align = "end" } = props;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} side={side} align={align}>
+      <PopoverTrigger>
+        <IconButton icon="ellipsis" accessibilityLabel={accessibilityLabel} />
+      </PopoverTrigger>
+      <PopoverContent style={styles.content} disableBodyScroll>
+        <View style={styles.list}>
+          {items.map((item) => (
+            <MenuButton
+              key={item.key}
+              icon={item.icon}
+              title={item.label}
+              danger={item.danger}
+              disabled={item.disabled}
+              onPress={() => {
+                setOpen(false);
+                item.onPress();
+              }}
+            />
+          ))}
+        </View>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+const styles = StyleSheet.create({
+  content: {
+    minWidth: 200,
+  },
+  list: {
+    gap: 2,
+  },
+});

package/src/allocation_row.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from "react";
+import { View } from "react-native";
+import { Text } from "./text";
+import { Button } from "./button";
+import { NumberInput } from "./number_input";
+
+export interface AllocationRowProps {
+  /** The target's primary line — an invoice no., an order, a cost centre. */
+  label: string;
+  /** Secondary muted line — an issue date, a reference. */
+  sublabel?: string;
+  /** The most that can be allocated here — the target's outstanding amount. The
+   *  input clamps to [0, cap]. */
+  cap: number;
+  value: number;
+  onValueChange: (n: number) => void;
+  /** Format the cap display (the raw input shows numbers). */
+  format?: (n: number) => string;
+  /** Right-of-label node — an age `Badge`, a status. */
+  trailing?: ReactNode;
+}
+
+/**
+ * One target in an allocation — its label, the cap it can absorb, and a bounded
+ * input for how much to put here with an "apply in full" shortcut. The atom of
+ * cash application / stock allocation / cost distribution: a source amount is
+ * split across many of these until a `RemainderMeter` reads zero.
+ */
+export function AllocationRow(props: AllocationRowProps) {
+  const { label, sublabel, cap, value, onValueChange, format = (n) => n.toLocaleString(), trailing } = props;
+  const full = value >= cap;
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, minHeight: 60 }}>
+      <View style={{ flex: 1, gap: 0 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Text size="sm" weight="medium" numberOfLines={1}>{label}</Text>
+          {trailing}
+        </View>
+        {sublabel ? <Text size="xs" color="muted">{sublabel}</Text> : null}
+      </View>
+      <Text size="sm" color="muted" tabular style={{ width: 128, textAlign: "right" }}>{`${format(cap)} due`}</Text>
+      <View style={{ width: 150 }}>
+        <NumberInput
+          value={value || null}
+          onValueChange={(n) => onValueChange(Math.max(0, Math.min(cap, n ?? 0)))}
+          min={0}
+          max={cap}
+          accessibilityLabel={`Allocate to ${label}`}
+        />
+      </View>
+      <Button title={full ? "Clear" : "Full"} color="muted" onPress={() => onValueChange(full ? 0 : cap)} />
+    </View>
+  );
+}

package/src/badge.tsx

@@ -1,38 +1,59 @@
 import React from "react";
 import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import { Text } from "./text";
-import { colors } from "./colors";
+import { colors, type ColorName } from "./colors";
 import { useTooltip } from "./tooltip";
 
-/** Only palette colors with shade scales (exclude border, shadow, etc.) */
-export type BadgeColor = Exclude<keyof typeof colors, "border" | "border_shadow" | "background" | "shadow" | "black" | "white">;
-
 interface BadgeProps {
   label?: string;
-  color?: BadgeColor;
+  color?: ColorName;
+  /**
+   * The status-indicator weight:
+   * - "tonal" (default): a filled pill — a record's prominent STATUS field (a
+   *   register's Status column, a drawer header). For categorical status, not
+   *   a metric value: a percentage/amount is a number, never a chip.
+   * - "dot": pill-less — a colored dot + label, the LIGHT indicator for
+   *   legends, secondary/inline status, or a metric's quality cue (a
+   *   healthy-vs-thin margin) where a filled chip would be too heavy.
+   * (StatusGrid/StatusLegend keep their own dot — their color is raw hex,
+   * coupled to the grid cells' tint, a separate data-viz concern.)
+   */
+  variant?: "tonal" | "dot";
   style?: StyleProp<ViewStyle>;
   tooltip?: string;
   userSelect?: "none" | "auto";
 }
 
 export function Badge(props: BadgeProps) {
-  const { label, color, style, tooltip, userSelect = "none" } = props;
+  const { label, color, variant = "tonal", style, tooltip, userSelect = "none" } = props;
   const tooltipProps = useTooltip(tooltip);
+  const hue = color && colors[color] ? colors[color] : null;
+
+  if (variant === "dot") {
+    return (
+      <View style={[styles.dotRow, style]} {...tooltipProps}>
+        <View style={[styles.dot, { backgroundColor: hue ? hue[500] : colors.zinc[400] }]} />
+        <Text size="sm" numberOfLines={1} userSelect={userSelect} weight="medium">
+          {label}
+        </Text>
+      </View>
+    );
+  }
 
   return (
     <View
       style={[
         styles.base,
         {
-          backgroundColor: color && colors[color] ? colors[color][50] : colors.zinc[100],
-          borderColor: color && colors[color] ? colors[color][100] : colors.zinc[200],
+          backgroundColor: hue ? hue[50] : colors.zinc[100],
+          borderColor: hue ? hue[100] : colors.zinc[200],
           borderWidth: 1,
         },
         style,
       ]}
       {...tooltipProps}
     >
-      <Text numberOfLines={1} userSelect={userSelect} weight="medium" style={{ color: color && colors[color] ? colors[color][900] : undefined }}>
+      <Text numberOfLines={1} userSelect={userSelect} weight="medium" style={{ color: hue ? hue[900] : undefined }}>
         {label}
       </Text>
     </View>
@@ -48,4 +69,14 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 4,
   },
+  dotRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 999,
+  },
 });

package/src/breakdown.tsx

@@ -0,0 +1,121 @@
+import { StyleSheet, View } from "react-native";
+import { colors, withAlpha } from "./colors";
+import { PressableHighlight } from "./pressable_highlight";
+import { StackedProgressBar } from "./stacked_progress_bar";
+import { Text } from "./text";
+
+export interface BreakdownItem {
+  key: string;
+  label: string;
+  value: number;
+  /** Segment accent — one hue family per dimension reads best. */
+  color: string;
+}
+
+export interface BreakdownProps {
+  items: BreakdownItem[];
+  /** The drilled-in segment. While set, the other segments dim. */
+  selectedKey?: string | null;
+  /** Press a segment to drill into it (press again to clear). Omit to
+   * render an informational breakdown. */
+  onSelect?: (key: string | null) => void;
+  formatValue?: (n: number) => string;
+}
+
+const defaultFormat = (n: number): string => n.toLocaleString("en-US");
+
+/**
+ * Composition browser for LARGE populations — the answer to "what is my
+ * stock made of, and let me drill into a slice". A stacked bar shows the
+ * shares; below it, one pressable row per segment (swatch · label · count ·
+ * share). Selecting a segment dims the rest and (in the host) filters the
+ * register underneath — the facet pattern for 10,000-record monitoring.
+ * Several Breakdowns side by side (by type, by status, by site) compose a
+ * full faceted overview; selections combine in the host's filter state.
+ */
+export function Breakdown(props: BreakdownProps) {
+  const { items, selectedKey = null, onSelect, formatValue = defaultFormat } = props;
+  const total = items.reduce((sum, item) => sum + item.value, 0);
+
+  return (
+    <View style={styles.container}>
+      <StackedProgressBar
+        height={10}
+        total={total}
+        segments={items.map((item) => ({
+          key: item.key,
+          value: item.value,
+          color: selectedKey && selectedKey !== item.key ? withAlpha(item.color, 0.25) : item.color,
+        }))}
+      />
+      <View>
+        {items.map((item) => {
+          const share = total > 0 ? Math.round((item.value / total) * 100) : 0;
+          const selected = selectedKey === item.key;
+          const dimmed = selectedKey !== null && !selected;
+          const row = (
+            <>
+              <View style={[styles.swatch, { backgroundColor: dimmed ? withAlpha(item.color, 0.3) : item.color }]} />
+              <Text size="sm" color={dimmed ? "muted" : "default"} numberOfLines={1} style={styles.label}>
+                {item.label}
+              </Text>
+              <Text size="sm" weight={selected ? "semibold" : "regular"} color={dimmed ? "muted" : "default"} tabular>
+                {formatValue(item.value)}
+              </Text>
+              <Text size="xs" color="muted" tabular align="right" style={styles.share}>
+                {share}%
+              </Text>
+            </>
+          );
+          return onSelect ? (
+            <PressableHighlight
+              key={item.key}
+              accessibilityRole="button"
+              accessibilityState={{ selected }}
+              accessibilityLabel={`${item.label}: ${formatValue(item.value)}`}
+              onPress={() => onSelect(selected ? null : item.key)}
+              style={[styles.row, styles.pressable, selected ? styles.selected : null]}
+            >
+              {row}
+            </PressableHighlight>
+          ) : (
+            <View key={item.key} style={styles.row}>
+              {row}
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 12,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    minHeight: 36,
+  },
+  pressable: {
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    marginHorizontal: -8,
+  },
+  selected: {
+    backgroundColor: colors.zinc[100],
+  },
+  swatch: {
+    width: 8,
+    height: 8,
+    borderRadius: 999,
+  },
+  label: {
+    flex: 1,
+  },
+  share: {
+    width: 36,
+  },
+});