@lotics/ui 7.19.3 → 9.0.0

package/src/inline_date_picker.tsx

@@ -7,7 +7,8 @@ import { DatePickerPanel } from "./date_picker";
 import { isoHasTime } from "./date_picker_value";
 import { formatDate } from "./format_date";
 import { ActivityIndicator } from "./activity_indicator";
-import { InlineEditView } from "./inline_edit";
+import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { useLoticsLocale } from "./locale";
 
 export interface InlineDatePickerProps {
   /** ISO date (`2026-05-22`) or datetime (`2026-05-22T14:30`). */
@@ -23,6 +24,8 @@ export interface InlineDatePickerProps {
   locale?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
 }
 
 /**
@@ -33,7 +36,8 @@ export interface InlineDatePickerProps {
  * dismissing without a change reverts.
  */
 export function InlineDatePicker(props: InlineDatePickerProps) {
-  const { value, onSave, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel } = props;
+  const { value, onSave, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel , background } = props;
+  const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState<string | null>(value);
   const [saving, setSaving] = useState(false);
@@ -50,7 +54,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
     try {
       await onSave(next);
     } catch (e) {
-      setError(e instanceof Error && e.message ? e.message : "Couldn't save. Try again.");
+      setError(e instanceof Error && e.message ? e.message : labels.saveError);
     } finally {
       setSaving(false);
     }
@@ -81,6 +85,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
       <Popover open={open && !disabled} onOpenChange={onOpenChange} side="bottom" align="start">
         <PopoverTrigger>
           <InlineEditView
+            background={background}
             display={display}
             placeholder={placeholder}
             disabled={disabled}

package/src/inline_edit.tsx

@@ -2,6 +2,7 @@ import { useCallback, useRef, useState, type ReactNode, type Ref } from "react";
 import { View, StyleSheet, type GestureResponderEvent, type TextStyle } from "react-native";
 import { Text } from "./text";
 import { IconButton } from "./icon_button";
+import { useLoticsLocale } from "./locale";
 import { ActivityIndicator } from "./activity_indicator";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
@@ -28,6 +29,7 @@ export function useInlineEdit<T>(opts: {
   equals?: (a: T, b: T) => boolean;
 }) {
   const { value, onSave, equals } = opts;
+  const labels = useLoticsLocale().inline;
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState<T>(value);
   const [saving, setSaving] = useState(false);
@@ -69,7 +71,7 @@ export function useInlineEdit<T>(opts: {
         setEditing(false);
       } catch (e) {
         // Stay in edit mode so the entry isn't lost — show the error, re-arm.
-        setError(e instanceof Error && e.message ? e.message : "Couldn't save. Try again.");
+        setError(e instanceof Error && e.message ? e.message : labels.saveError);
         active.current = true;
       } finally {
         setSaving(false);
@@ -81,6 +83,13 @@ 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";
+
 interface InlineEditFrameProps {
   editing: boolean;
   /** The formatted current value, shown in view mode. Empty → placeholder. */
@@ -101,6 +110,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;
 }
 
 interface InlineEditViewProps {
@@ -119,20 +130,23 @@ interface InlineEditViewProps {
   active?: boolean;
   /** Strike + mute the resting value (a completed/superseded item that stays editable). */
   struck?: boolean;
+  /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
+  background?: InlineEditBackground;
   ref?: Ref<View>;
 }
 
 /**
  * The view-mode box of an inline-editable field: the value as plain text in a
  * `FocusRingPressable` (an input, so it hovers via its BORDER — the transparent
- * edge reveals on hover, never a grey wash; the pointer cursor signals it's
- * editable), at the kit's control height with a transparent border — so
+ * edge reveals on hover, never a grey wash; the cursor stays the default arrow —
+ * the zinc-50 chip + hover-border are the affordance, a pointer would read as a
+ * button), at the kit's control height with a transparent border — so
  * swapping to an input, or floating a dropdown above it, never shifts the
  * layout. Used by `InlineEditFrame`, and as the overlay trigger for the
  * 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, ref } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, background = "tint", ref } = props;
   // 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
@@ -152,7 +166,7 @@ export function InlineEditView(props: InlineEditViewProps) {
       // 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, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && styles.viewHovered]}
+      style={(state) => [styles.view, (background === "transparent" || disabled) && styles.viewTransparent, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && styles.viewHovered]}
     >
       {typeof display === "string" ? (
         <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null]}>
@@ -174,6 +188,7 @@ export function InlineEditView(props: InlineEditViewProps) {
  * directly as a `Popover` trigger instead.)
  */
 export function InlineEditFrame(props: InlineEditFrameProps) {
+  const labels = useLoticsLocale().inline;
   const {
     editing,
     display,
@@ -188,11 +203,13 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     disabled,
     accessibilityLabel,
     struck,
+    background,
   } = props;
 
   if (!editing) {
     return (
       <InlineEditView
+        background={background}
         display={display}
         placeholder={placeholder}
         onPress={onBegin}
@@ -218,8 +235,8 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
         </View>
         {controls === "buttons" ? (
           <View style={styles.buttons}>
-            <IconButton icon="check" color="primary" size="sm" tooltip="Save" onPress={onCommit} disabled={saving} />
-            <IconButton icon="x" color="secondary" size="sm" tooltip="Cancel" onPress={onCancel} disabled={saving} />
+            <IconButton icon="check" color="primary" size="sm" tooltip={labels.save} onPress={onCommit} disabled={saving} />
+            <IconButton icon="x" color="secondary" size="sm" tooltip={labels.cancel} onPress={onCancel} disabled={saving} />
           </View>
         ) : null}
       </View>
@@ -247,24 +264,37 @@ export const inlineValueTextStyle: TextStyle = {
 const viewTextStyle = [inlineValueTextStyle, { flex: 1 }];
 
 const styles = StyleSheet.create({
+  // At REST an editor sits on a zinc-50 chip — THE editability affordance: a
+  // read-only `InlineStatic` stays flat, so editable and static values are
+  // distinguishable without hovering (they were pixel-identical before, and
+  // users could not discover what was editable).
   view: {
     minHeight: INLINE_CONTROL_HEIGHT,
     borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: "transparent",
+    backgroundColor: colors.zinc[50],
     paddingHorizontal: 8,
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
+    // An inline editor is an INPUT, not a button — keep the default arrow
+    // cursor (the chip + hover-border carry the affordance; a pointer reads
+    // as a button press). Overrides the Pressable's pointer default.
+    cursor: "auto",
   },
+  // The transparent opt-out — dense, uniformly-editable surfaces.
+  viewTransparent: { backgroundColor: "transparent" },
   // Open (popover showing): the transparent edge fills in to the kit's 1px border
-  // under the 2px active ring — identical to a focused input.
+  // under the 2px active ring — identical to a focused input; the chip clears to
+  // the input's white surface.
   viewActive: {
     borderColor: colors.border,
+    backgroundColor: colors.white,
     boxShadow: FOCUS_RING,
   },
-  // Hover (not open): reveal the kit hover-border on the transparent edge — the
-  // input-family affordance, no grey wash.
+  // Hover (not open): reveal the kit hover-border on the chip — the input-family
+  // affordance.
   viewHovered: {
     borderColor: HOVER_BORDER,
   },

package/src/inline_member_select.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import type { InlineEditBackground } from "./inline_edit";
 import { InlineSelect } from "./inline_select";
 import { MemberChip } from "./member_chip";
 import type { MemberSelectMember } from "./member_select";
@@ -18,6 +19,8 @@ interface InlineMemberSelectProps {
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
   /** Show an in-menu search box to filter the roster; default false. */
   searchable?: boolean;
 }

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 { InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineNumberInputProps {
   value: number | null;
@@ -15,6 +15,8 @@ export interface InlineNumberInputProps {
   controls?: InlineEditControls;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
 }
 
 /**
@@ -23,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 } = props;
+  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel , background } = props;
   const edit = useInlineEdit<number | null>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -43,6 +45,7 @@ export function InlineNumberInput(props: InlineNumberInputProps) {
 
   return (
     <InlineEditFrame
+      background={background}
       editing={edit.editing}
       display={display}
       placeholder={placeholder}

package/src/inline_select.tsx

@@ -7,7 +7,8 @@ import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { OptionList } from "./option_list";
 import type { PickerOption } from "./picker";
 import { ActivityIndicator } from "./activity_indicator";
-import { InlineEditView } from "./inline_edit";
+import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { useLoticsLocale } from "./locale";
 
 export interface InlineSelectProps<T extends string> {
   value: T | null;
@@ -24,6 +25,8 @@ export interface InlineSelectProps<T extends string> {
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
   /** Show an in-menu search box; default false. */
   searchable?: boolean;
 }
@@ -36,7 +39,8 @@ export interface InlineSelectProps<T extends string> {
  * Pass `renderOptionContent` for rich options, or omit it for a plain label list.
  */
 export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
-  const { value, onSave, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false } = props;
+  const { value, onSave, 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);
@@ -52,7 +56,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       try {
         await onSave(next);
       } catch (e) {
-        setError(e instanceof Error && e.message ? e.message : "Couldn't save. Try again.");
+        setError(e instanceof Error && e.message ? e.message : labels.saveError);
       } finally {
         setSaving(false);
       }
@@ -65,6 +69,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
+            background={background}
             display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
             placeholder={placeholder}
             disabled={disabled}

package/src/inline_tag_select.tsx

@@ -0,0 +1,140 @@
+import { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import { Icon } from "./icon";
+import { Text } from "./text";
+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 { Badge } from "./badge";
+import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { useLoticsLocale } from "./locale";
+
+export interface InlineTagSelectProps<T extends string> {
+  /** The selected tag values. */
+  value: T[];
+  /** Commits the NEW SET when the picker closes (only if it changed). Throwing
+   *  surfaces the inline error, like every inline editor. */
+  onSave: (next: T[]) => void | Promise<void>;
+  options: PickerOption<T>[];
+  /** The resting render of ONE selected tag (an `OptionBadge` dot, a `Chip`).
+   *  Defaults to a plain zinc `Badge` of the label. */
+  renderTag?: (option: PickerOption<T>) => React.ReactNode;
+  /** Rich row content in the dropdown. Falls back to `renderTag`, then label. */
+  renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
+  placeholder?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
+  /** Show an in-menu search box; default false. */
+  searchable?: boolean;
+}
+
+/**
+ * The inline-editable MULTI select — the tag-field member of the `Inline*`
+ * family (`InlineSelect` picks one; this holds a set). At rest the selected
+ * tags render as badges inside the standard inline chip; clicking floats a
+ * multi `OptionList` (checkbox rows) in a popover, toggles edit a local draft,
+ * and CLOSING the popover commits the new set in one `onSave` — the blur-commit
+ * contract of the inline family, applied to a set.
+ */
+export function InlineTagSelect<T extends string>(props: InlineTagSelectProps<T>) {
+  const {
+    value, onSave, options, renderTag, renderOptionContent, placeholder, disabled, accessibilityLabel, background, searchable = false,
+  } = props;
+  const labels = useLoticsLocale().inline;
+  const [open, setOpenState] = useState(false);
+  const [draft, setDraft] = useState<T[]>(value);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const commit = async (next: T[]) => {
+    const changed = next.length !== value.length || next.some((v) => !value.includes(v));
+    if (!changed) return;
+    setSaving(true);
+    setError(null);
+    try {
+      await onSave(next);
+    } catch (e) {
+      setError(e instanceof Error && e.message ? e.message : labels.saveError);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const setOpen = (next: boolean) => {
+    if (next) {
+      setDraft(value);
+      setOpenState(true);
+      return;
+    }
+    setOpenState(false);
+    void commit(draft);
+  };
+
+  const selected = options.filter((o) => value.includes(o.value));
+  const tag = (o: PickerOption<T>) => (renderTag ? renderTag(o) : <Badge label={o.label ?? String(o.value)} color="zinc" />);
+
+  return (
+    <View>
+      <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
+        <PopoverTrigger>
+          <InlineEditView
+            background={background}
+            display={
+              selected.length > 0 ? (
+                <View style={styles.tags}>
+                  {selected.map((o) => (
+                    <View key={o.value}>{tag(o)}</View>
+                  ))}
+                </View>
+              ) : (
+                ""
+              )
+            }
+            placeholder={placeholder}
+            disabled={disabled}
+            active={open && !disabled}
+            accessibilityLabel={accessibilityLabel}
+            trailing={
+              saving ? (
+                <ActivityIndicator size={16} color={colors.zinc[400]} />
+              ) : (
+                <Icon name="chevron-down" size={18} color={colors.zinc[400]} />
+              )
+            }
+          />
+        </PopoverTrigger>
+        <PopoverContent disableBodyScroll>
+          <OptionList<T, true>
+            multi
+            search={{ mode: searchable ? "internal" : "none" }}
+            options={options}
+            value={draft}
+            onValueChange={setDraft}
+            onRequestClose={() => setOpen(false)}
+            renderOptionContent={renderOptionContent ?? renderTag}
+          />
+        </PopoverContent>
+      </Popover>
+      {error ? (
+        <Text size="xs" color="danger" style={styles.error}>
+          {error}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+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 { InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTextInputProps {
   value: string;
@@ -15,6 +15,8 @@ export interface InlineTextInputProps {
   disabled?: boolean;
   /** 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;
   accessibilityLabel?: string;
 }
 
@@ -25,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 } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , background } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
@@ -47,6 +49,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
 
   return (
     <InlineEditFrame
+      background={background}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}

package/src/inline_time_picker.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { KeyboardEvent } from "react";
 import { TimePicker } from "./time_picker";
-import { InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineTimePickerProps {
   /** Canonical 24-hour "HH:mm", "" when empty. */
@@ -13,6 +13,8 @@ export interface InlineTimePickerProps {
   controls?: InlineEditControls;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
 }
 
 /**
@@ -21,7 +23,7 @@ export interface InlineTimePickerProps {
  * field at the same height, so the form never reflows.
  */
 export function InlineTimePicker(props: InlineTimePickerProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, accessibilityLabel , background } = props;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -39,6 +41,7 @@ export function InlineTimePicker(props: InlineTimePickerProps) {
 
   return (
     <InlineEditFrame
+      background={background}
       editing={edit.editing}
       display={value}
       placeholder={placeholder}