@lotics/ui 12.1.1 → 13.7.0

package/src/inline_edit.tsx

@@ -7,7 +7,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
-import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, getTextColor, type TextColor } from "./text_utils";
 import { getInteractionModality } from "./interaction_modality";
 import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
 
@@ -85,12 +85,15 @@ export function useInlineEdit<T>(opts: {
   return { editing, draft, setDraft, saving, error, begin, cancel, commit };
 }
 
-/** The resting surface of an inline editor. "tint" (default) is the zinc-50
- *  chip — THE editability affordance on surfaces that MIX editable and static
- *  values. "transparent" drops it for DENSE, uniformly-editable surfaces (a
- *  task list/board where every cell edits — the chip repeated everywhere is
- *  noise, and hover/focus still reveal the input). */
-export type InlineEditBackground = "tint" | "transparent";
+/** Which surface an inline editor lives on — the ONE axis that separates a FORM
+ *  field from a data-grid CELL:
+ *  - `"form"` (default): the zinc-50 chip at rest + a hover-BORDER. THE editability
+ *    affordance on surfaces that MIX editable and static values (a `DetailTable`).
+ *  - `"cell"`: transparent at rest + a background-tint WASH on hover (the same
+ *    `PressableHighlight` language as the row/cell it sits in). For DENSE,
+ *    uniformly-editable surfaces where every cell edits — a register/`DataGrid`
+ *    column, a task row — where the repeated chip + per-field border are noise. */
+export type InlineEditVariant = "form" | "cell";
 
 interface InlineEditFrameProps {
   editing: boolean;
@@ -112,8 +115,8 @@ interface InlineEditFrameProps {
   accessibilityLabel?: string;
   /** Strike + mute the resting value (a completed item that stays editable). */
   struck?: boolean;
-  /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
-  background?: InlineEditBackground;
+  /** Form field or grid cell — see {@link InlineEditVariant}. Default "form". */
+  variant?: InlineEditVariant;
   /** Right-aligned rest affordance shown in VIEW mode (e.g. a clock for a time
    *  field) — a hover-independent cue the field opens a picker. Omit for plain
    *  text/number inputs (typing IS the affordance). */
@@ -125,7 +128,9 @@ interface InlineEditViewProps {
    *  rendered as-is — e.g. a `MemberChip` / `OptionBadge` for a rich resting
    *  value. A node takes the flex slot; the trailing adornment still right-aligns. */
   display: string | ReactNode;
-  placeholder?: string;
+  /** Empty-state content. A string reads as muted placeholder text; a NODE (a dashed
+   *  avatar "add" ghost, a placeholder chip) renders as-is in the value slot. */
+  placeholder?: string | ReactNode;
   onPress?: () => void;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -141,8 +146,12 @@ interface InlineEditViewProps {
   onFocus?: () => void;
   /** Strike + mute the resting value (a completed/superseded item that stays editable). */
   struck?: boolean;
-  /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
-  background?: InlineEditBackground;
+  /** Form field or grid cell — see {@link InlineEditVariant}. Default "form". */
+  variant?: InlineEditVariant;
+  /** Colours the resting VALUE by semantic state — an overdue date red, a soon-due
+   *  amber (the caller owns the rule). Applies only to a set, non-struck string value;
+   *  the placeholder + struck styles win. Default: the standard value ink. */
+  tone?: TextColor;
   ref?: Ref<View>;
 }
 
@@ -157,7 +166,8 @@ interface InlineEditViewProps {
  * select/date inline editors (it forwards ref + onPress to a `PopoverTrigger`).
  */
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, background = "tint", onFocus, ref } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, variant = "form", tone, onFocus, ref } = props;
+  const isEmptyString = typeof display === "string" && display === "";
   // Stop the press here so an inline editor nested in a pressable row (a task
   // row that expands on press) edits the field instead of triggering the row.
   const handlePress = onPress
@@ -175,14 +185,19 @@ export function InlineEditView(props: InlineEditViewProps) {
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
-      // An inline-edit field is an input — it hovers via its BORDER, not a grey
-      // wash: the transparent edge reveals on hover (the kit's hover-border),
-      // then fills + rings when open. Suppressed while open (the ring leads).
-      style={(state) => [styles.view, (background === "transparent" || disabled) && styles.viewTransparent, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && styles.viewHovered]}
+      // Hover language follows the variant: a `form` field reveals its BORDER
+      // (an input's edge); a `cell` field lives in a dense grid/row/task context,
+      // so it takes the background-tint WASH — the same `PressableHighlight`
+      // language as the cells beside it. Both suppressed while open (fill + ring lead).
+      style={(state) => [styles.view, (variant === "cell" || disabled) && styles.viewTransparent, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && (variant === "cell" ? styles.viewHoveredWash : styles.viewHovered)]}
     >
-      {typeof display === "string" ? (
-        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null]}>
-          {display || placeholder || "—"}
+      {/* Empty string display → the placeholder (a node renders as-is, a string reads muted);
+          a node display renders as-is; a value string wears the value style (+ tone). */}
+      {isEmptyString && placeholder != null && typeof placeholder !== "string" ? (
+        <View style={styles.viewNode}>{placeholder}</View>
+      ) : typeof display === "string" ? (
+        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null, tone && display && !struck ? { color: getTextColor(tone) } : null]}>
+          {display || (typeof placeholder === "string" ? placeholder : "") || "—"}
         </Text>
       ) : (
         <View style={styles.viewNode}>{display}</View>
@@ -217,7 +232,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     disabled,
     accessibilityLabel,
     struck,
-    background,
+    variant,
     affordance,
   } = props;
 
@@ -266,7 +281,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     return (
       <InlineEditView
         ref={viewRef}
-        background={background}
+        variant={variant}
         display={display}
         placeholder={placeholder}
         onPress={onBegin}
@@ -357,11 +372,15 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
     boxShadow: FOCUS_RING,
   },
-  // Hover (not open): reveal the kit hover-border on the chip — the input-family
-  // affordance.
+  // Hover (not open): a tint FORM field reveals the kit hover-border (input family);
+  // a transparent CELL/dense field takes the background-tint wash (zinc-100), the
+  // same language as the cells beside it.
   viewHovered: {
     borderColor: HOVER_BORDER,
   },
+  viewHoveredWash: {
+    backgroundColor: colors.zinc[100],
+  },
   placeholder: { color: colors.zinc[400] },
   struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
   viewNode: { flex: 1, minWidth: 0 },

package/src/inline_member_select.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useMemo } from "react";
-import type { InlineEditBackground } from "./inline_edit";
+import { View, StyleSheet } from "react-native";
+import type { InlineEditVariant } from "./inline_edit";
 import { InlineSelect } from "./inline_select";
 import { MemberChip } from "./member_chip";
+import { Avatar } from "./avatar";
+import { Icon } from "./icon";
+import { colors } from "./colors";
 import type { MemberSelectMember } from "./member_select";
 import type { PickerOption } from "./picker";
 
@@ -23,19 +27,25 @@ interface InlineMemberSelectProps {
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
-  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  /** Form field (default) or grid cell — see {@link InlineEditVariant}. */
+  variant?: InlineEditVariant;
   /** Show an in-menu search box to filter the roster; default false. */
   searchable?: boolean;
+  /** Resting display = the bare AVATAR only (no name), a dashed "add" ghost when
+   *  empty — for a DENSE row/cell where the name won't fit (a task-row assignee).
+   *  The dropdown rows still show avatar + name. Default false (avatar + name). */
+  avatarOnly?: boolean;
 }
 
+const AVATAR_ONLY_SIZE = 24;
+
 /**
  * Edit a `select_member` field in place: the assigned member shows as a
- * {@link MemberChip} (avatar + name) at the kit's control height; clicking it
- * floats a member picker (every option a `MemberChip`) and picking commits — no
- * layout shift. The inline-edit twin of {@link MemberSelect} (use that in a
- * form); built on {@link InlineSelect}. PURE: pass the candidate `members` (an
- * app feeds `useMembers`); this fetches nothing.
+ * {@link MemberChip} (avatar + name) — or the bare avatar with `avatarOnly` for a
+ * dense cell — at the kit's control height; clicking floats a member picker (every
+ * option a `MemberChip`) and picking commits, no layout shift. The inline-edit twin
+ * of {@link MemberSelect} (use that in a form); built on {@link InlineSelect}. PURE:
+ * pass the candidate `members` (an app feeds `useMembers`); this fetches nothing.
  *
  * ```tsx
  * const { members } = useMembers();
@@ -43,7 +53,7 @@ interface InlineMemberSelectProps {
  * ```
  */
 export function InlineMemberSelect(props: InlineMemberSelectProps) {
-  const { members, ...inline } = props;
+  const { members, avatarOnly, placeholder, ...inline } = props;
 
   const byId = useMemo(() => new Map(members.map((m) => [m.id, m])), [members]);
   const options = useMemo<PickerOption<string>[]>(
@@ -60,12 +70,35 @@ export function InlineMemberSelect(props: InlineMemberSelectProps) {
     [byId],
   );
 
+  const renderAvatar = useCallback(
+    (option: PickerOption<string>) => {
+      const member = byId.get(option.value);
+      if (!member) return null;
+      return <Avatar size={AVATAR_ONLY_SIZE} name={member.name || member.email || member.id} source={member.image ? { uri: member.image } : undefined} announce />;
+    },
+    [byId],
+  );
+
   return (
     <InlineSelect<string>
       options={options}
       renderOptionContent={renderMember}
-      renderSelected={renderMember}
+      renderSelected={avatarOnly ? renderAvatar : renderMember}
+      placeholder={avatarOnly ? <View style={styles.ghost}><Icon name="plus" size={13} color={colors.zinc[400]} /></View> : placeholder}
       {...inline}
     />
   );
 }
+
+const styles = StyleSheet.create({
+  ghost: {
+    width: AVATAR_ONLY_SIZE,
+    height: AVATAR_ONLY_SIZE,
+    borderRadius: AVATAR_ONLY_SIZE / 2,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: colors.zinc[300],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/src/inline_number_input.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { KeyboardEvent } from "react";
 import { NumberInput } from "./number_input";
-import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineNumberInputProps {
   value: number | null;
@@ -16,7 +16,7 @@ export interface InlineNumberInputProps {
   disabled?: boolean;
   accessibilityLabel?: string;
   /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  variant?: InlineEditVariant;
 }
 
 /**
@@ -25,7 +25,7 @@ export interface InlineNumberInputProps {
  * the bare numeric field at the same height, so the form never reflows.
  */
 export function InlineNumberInput(props: InlineNumberInputProps) {
-  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel , background } = props;
+  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel , variant } = props;
   const edit = useInlineEdit<number | null>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -45,7 +45,7 @@ export function InlineNumberInput(props: InlineNumberInputProps) {
 
   return (
     <InlineEditFrame
-      background={background}
+      variant={variant}
       editing={edit.editing}
       display={display}
       placeholder={placeholder}

package/src/inline_select.tsx

@@ -1,125 +1,231 @@
-import { useCallback, useState } from "react";
-import { View } from "react-native";
+import { useState, type ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
 import { Icon } from "./icon";
 import { Text } from "./text";
+import { Badge } from "./badge";
 import { colors } from "./colors";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { OptionList } from "./option_list";
 import type { PickerOption } from "./picker";
 import { ActivityIndicator } from "./activity_indicator";
-import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { type InlineEditVariant, InlineEditView } from "./inline_edit";
 import { useLoticsLocale } from "./locale";
 
-export interface InlineSelectProps<T extends string, D = unknown> {
-  value: T | null;
-  onSave: (next: T) => void | Promise<void>;
-  /** Unset the field to empty. Provide it to make the value clearable: a compact
-   *  "Clear" button appears below the options whenever there IS a value. Kept
-   *  separate from `onSave` (whose next is a non-null `T`) so an app opts in
-   *  without every caller having to handle null. */
-  onClear?: () => void | Promise<void>;
+interface InlineSelectBaseProps<T extends string, D = unknown> {
   options: PickerOption<T, D>[];
   /** Custom option content in the dropdown (icon + label, two-line, a badge…).
    *  Omit for a plain label list — both render through the same `OptionList`. */
-  renderOptionContent?: (option: PickerOption<T, D>) => React.ReactNode;
-  /** Render the SELECTED value in the resting view as a node (an avatar chip, a
-   *  colored badge) instead of its plain label. Falls back to `renderOptionContent`
-   *  (so the trigger renders like the options), then the plain label, when omitted;
-   *  the empty state always shows the placeholder. */
-  renderSelected?: (selected: PickerOption<T, D>) => React.ReactNode;
-  placeholder?: string;
+  renderOptionContent?: (option: PickerOption<T, D>) => ReactNode;
+  /** Render ONE selected option as its resting chip — single: the value; multi:
+   *  each tag. Falls back to `renderOptionContent`, then the plain label (single) /
+   *  a zinc `Badge` (multi). The one seam for "how the selection looks". */
+  renderSelected?: (option: PickerOption<T, D>) => ReactNode;
+  /** Empty-state content: a string reads as muted placeholder text, a NODE renders
+   *  as-is (e.g. an avatar "add" ghost for an `avatarOnly` member cell). */
+  placeholder?: string | ReactNode;
   disabled?: boolean;
   accessibilityLabel?: string;
-  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  /** Form field (default) or grid cell — see {@link InlineEditVariant}. */
+  variant?: InlineEditVariant;
   /** Show an in-menu search box; default false. */
   searchable?: boolean;
+  /** Offer a "create" row when the query matches no option — picking it commits the
+   *  typed value (single) / adds it to the set (multi). Implies `searchable`. */
+  allowCustom?: boolean;
+  /** Label for the create row (default: `Add "<query>"`). */
+  customOptionLabel?: (query: string) => string | null;
 }
 
 /**
- * An inline-editable single-select. The selected value renders like its option
- * (`renderOptionContent`) — a badge stays a badge in the resting trigger, not just
- * text; clicking it floats the option list (an `OptionList`) in a popover anchored
- * to the view, so the row never changes height. Picking commits; dismissing reverts.
- * Pass `renderOptionContent` for rich options, or omit it for a plain label list.
+ * The inline-editable select — single by default, `multi` for a tag SET. Mirrors
+ * `Select`'s one-component/`multi` axis (there is no separate tag component). Value
+ * + `onSave` are typed by the mode: single is `T | null` and commits on pick; multi
+ * is `T[]` and commits the new set when the popover CLOSES (the inline blur-commit,
+ * applied to a set).
  */
-export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { value, onSave, onClear, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, background } = props;
-  const labels = useLoticsLocale().inline;
-  const [open, setOpen] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const selected = options.find((o) => o.value === value);
-
-  const pick = useCallback(
-    async (next: T) => {
-      setOpen(false);
-      if (next === value) return;
-      setSaving(true);
-      setError(null);
-      try {
-        await onSave(next);
-      } catch (e) {
-        setError(e instanceof Error && e.message ? e.message : labels.saveError);
-      } finally {
-        setSaving(false);
-      }
-    },
-    [value, onSave],
-  );
-
-  const clear = useCallback(async () => {
-    setOpen(false);
-    if (value == null || !onClear) return;
-    setSaving(true);
-    setError(null);
-    try {
-      await onClear();
-    } catch (e) {
-      setError(e instanceof Error && e.message ? e.message : labels.saveError);
-    } finally {
-      setSaving(false);
-    }
-  }, [value, onClear]);
+export type InlineSelectProps<T extends string, D = unknown> =
+  | (InlineSelectBaseProps<T, D> & {
+      multi?: false;
+      value: T | null;
+      onSave: (next: T) => void | Promise<void>;
+      /** Unset the field. Provide it for a "Clear" row whenever there IS a value —
+       *  kept separate from `onSave` (whose next is a non-null `T`). Single only. */
+      onClear?: () => void | Promise<void>;
+    })
+  | (InlineSelectBaseProps<T, D> & {
+      multi: true;
+      value: T[];
+      onSave: (next: T[]) => void | Promise<void>;
+    });
 
+/** The shared shell: the resting view (a `Popover` trigger) that floats an
+ *  `OptionList` — identical for single and multi; only the display + list differ. */
+function InlineSelectShell(props: {
+  open: boolean;
+  onOpenChange: (next: boolean) => void;
+  disabled?: boolean;
+  display: string | ReactNode;
+  placeholder?: string | ReactNode;
+  accessibilityLabel?: string;
+  variant?: InlineEditVariant;
+  saving: boolean;
+  error: string | null;
+  children: ReactNode;
+}) {
   return (
     <View>
-      <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
+      <Popover open={props.open && !props.disabled} onOpenChange={props.onOpenChange} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
-            background={background}
-            display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
-            placeholder={placeholder}
-            disabled={disabled}
-            active={open && !disabled}
-            accessibilityLabel={accessibilityLabel}
+            variant={props.variant}
+            display={props.display}
+            placeholder={props.placeholder}
+            disabled={props.disabled}
+            active={props.open && !props.disabled}
+            accessibilityLabel={props.accessibilityLabel}
+            // A `cell` reads value-first: it drops the resting chevron (the column
+            // header + the uniformly-editable grid are the affordance), like the date
+            // cell drops its calendar glyph. A `form` field keeps the chevron. The
+            // saving spinner shows in both.
             trailing={
-              saving ? (
+              props.saving ? (
                 <ActivityIndicator size={16} color={colors.zinc[400]} />
-              ) : (
+              ) : props.variant === "cell" ? undefined : (
                 <Icon name="chevron-down" size={18} color={colors.zinc[400]} />
               )
             }
           />
         </PopoverTrigger>
-        <PopoverContent disableBodyScroll>
-          <OptionList
-            search={{ mode: searchable ? "internal" : "none" }}
-            options={options}
-            value={value}
-            onValueChange={(next) => void pick(next)}
-            onClear={onClear ? () => void clear() : undefined}
-            onRequestClose={() => setOpen(false)}
-            renderOptionContent={renderOptionContent}
-          />
-        </PopoverContent>
+        <PopoverContent disableBodyScroll>{props.children}</PopoverContent>
       </Popover>
-      {error ? (
-        <Text size="xs" color="danger" style={{ marginTop: 4 }}>
-          {error}
+      {props.error ? (
+        <Text size="xs" color="danger" style={styles.error}>
+          {props.error}
         </Text>
       ) : null}
     </View>
   );
 }
+
+export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
+  const { options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, variant, searchable = false, allowCustom = false, customOptionLabel } = props;
+  const labels = useLoticsLocale().inline;
+  const [open, setOpen] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [draft, setDraft] = useState<T[]>(props.multi ? props.value : []);
+
+  const runSave = async (fn: () => void | Promise<void>) => {
+    setSaving(true);
+    setError(null);
+    try {
+      await fn();
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : labels.saveError);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const searchMode = searchable || allowCustom ? "internal" : "none";
+
+  if (props.multi) {
+    const { value, onSave } = props;
+    // Resolve each value to its option IN SELECTION ORDER; an `allowCustom` value not in
+    // `options` (a just-created tag) renders from a {value,label} fallback so it still shows
+    // (mirrors `Select`). Without allowCustom, an unknown value is dropped (→ nothing), as before.
+    const selected = value
+      .map((v) => options.find((o) => o.value === v) ?? (allowCustom ? { value: v, label: v } : null))
+      .filter((o): o is PickerOption<T, D> => o != null);
+    const chip = (o: PickerOption<T, D>) =>
+      renderSelected ? renderSelected(o) : renderOptionContent ? renderOptionContent(o) : <Badge label={o.label ?? String(o.value)} color="zinc" />;
+    const onOpenChange = (next: boolean) => {
+      if (next) {
+        setDraft(value);
+        setOpen(true);
+        return;
+      }
+      setOpen(false);
+      const changed = draft.length !== value.length || draft.some((v) => !value.includes(v));
+      if (changed) void runSave(() => onSave(draft));
+    };
+    return (
+      <InlineSelectShell
+        open={open}
+        onOpenChange={onOpenChange}
+        disabled={disabled}
+        display={selected.length > 0 ? <View style={styles.tags}>{selected.map((o) => <View key={o.value}>{chip(o)}</View>)}</View> : ""}
+        placeholder={placeholder}
+        accessibilityLabel={accessibilityLabel}
+        variant={variant}
+        saving={saving}
+        error={error}
+      >
+        <OptionList<T, true, D>
+          multi
+          search={{ mode: searchMode }}
+          options={options}
+          value={draft}
+          onValueChange={setDraft}
+          onRequestClose={() => onOpenChange(false)}
+          allowCustom={allowCustom}
+          customOptionLabel={customOptionLabel}
+          onCustomCommit={(raw) => {
+            const created = raw.trim() as T;
+            if (created && !draft.includes(created)) setDraft([...draft, created]);
+          }}
+          renderOptionContent={renderOptionContent ?? renderSelected}
+        />
+      </InlineSelectShell>
+    );
+  }
+
+  const { value, onSave, onClear } = props;
+  // An `allowCustom` value not in `options` renders from a fallback (like `Select`); a plain
+  // unknown value (a removed member/status) resolves to nothing → the placeholder shows.
+  const selected = options.find((o) => o.value === value) ?? (allowCustom && value != null ? { value, label: value } : undefined);
+  const pick = (next: T) => {
+    setOpen(false);
+    if (next === value) return;
+    void runSave(() => onSave(next));
+  };
+  const clear = () => {
+    setOpen(false);
+    if (value == null || !onClear) return;
+    void runSave(() => onClear());
+  };
+  return (
+    <InlineSelectShell
+      open={open}
+      onOpenChange={setOpen}
+      disabled={disabled}
+      display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
+      placeholder={placeholder}
+      accessibilityLabel={accessibilityLabel}
+      variant={variant}
+      saving={saving}
+      error={error}
+    >
+      <OptionList<T, false, D>
+        search={{ mode: searchMode }}
+        options={options}
+        value={value}
+        onValueChange={(next) => pick(next)}
+        onClear={onClear ? () => clear() : undefined}
+        onRequestClose={() => setOpen(false)}
+        allowCustom={allowCustom}
+        customOptionLabel={customOptionLabel}
+        onCustomCommit={(raw) => {
+          const created = raw.trim() as T;
+          if (created) pick(created);
+        }}
+        renderOptionContent={renderOptionContent}
+      />
+    </InlineSelectShell>
+  );
+}
+
+const styles = StyleSheet.create({
+  tags: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 4, rowGap: 2 },
+  error: { marginTop: 4 },
+});

package/src/inline_text_input.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { NativeSyntheticEvent, TextInputKeyPressEventData } from "react-native";
 import { TextInputField } from "./text_input_field";
-import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTextInputProps {
   value: string;
@@ -16,7 +16,7 @@ export interface InlineTextInputProps {
   /** Strike + mute the resting value (a completed item that stays editable). */
   struck?: boolean;
   /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  variant?: InlineEditVariant;
   accessibilityLabel?: string;
 }
 
@@ -27,7 +27,7 @@ export interface InlineTextInputProps {
  * value in a dense record / detail surface.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , background } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
@@ -49,7 +49,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
 
   return (
     <InlineEditFrame
-      background={background}
+      variant={variant}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}