@lotics/ui 22.3.0 → 23.0.0

package/src/text_input_field.tsx

@@ -34,6 +34,17 @@ interface TextInputFieldProps extends RNTextInputProps {
   /** Accessible name for the clear button. Defaults to the locale's
    *  `textInputField.clear` ("Clear" / "Xóa"). */
   clearLabel?: string;
+  /** The HOST paints the surface — drop this input's own border, fill, focus ring
+   *  AND horizontal padding, so the page draws one box and the text lands on the
+   *  host's inset rather than 8px further in. Set by an inline editor whose field
+   *  carries `actions`: the field's shell owns the surface (so the verbs never
+   *  move between modes) and owns the ring with it.
+   *
+   *  HEIGHT and VERTICAL padding stay — those are what keep the field the same
+   *  size in both modes; the horizontal inset is what has to be surrendered,
+   *  because the host already spent `CONTROL_TEXT_INSET` on it and two insets
+   *  stacked is a visible jump to the right on focus. */
+  seamless?: boolean;
   // DOM-only ARIA attrs not declared on React Native's TextInputProps. They
   // are forwarded verbatim to the underlying web input.
   "aria-controls"?: string;
@@ -45,6 +56,7 @@ export function TextInputField(props: TextInputFieldProps) {
   const locale = useLoticsLocale();
   const {
     style,
+    seamless,
     icon,
     clearable,
     onClear,
@@ -167,7 +179,8 @@ export function TextInputField(props: TextInputFieldProps) {
           showShortcut && shortcutWidth > 0 && { paddingRight: SHORTCUT_INSET + shortcutWidth },
           hovered && editable && { borderColor: HOVER_BORDER },
           style,
-          focusVisible && { boxShadow: FOCUS_RING },
+          focusVisible && !seamless && { boxShadow: FOCUS_RING },
+          seamless && styles.seamless,
         ]}
         multiline={(numberOfLines && numberOfLines > 1) || multiline}
         focusable={editable}
@@ -227,6 +240,11 @@ const styles = StyleSheet.create({
     fontFamily: fontFamilyRegular,
     letterSpacing: -0.4,
   },
+  // The HOST paints the surface AND owns the text inset. Height and vertical
+  // padding stay (they hold the field's size); the horizontal padding goes,
+  // because the host already spent CONTROL_TEXT_INSET and two insets stacked
+  // shift the text 8px right the moment the field focuses.
+  seamless: { borderColor: "transparent", backgroundColor: "transparent", paddingHorizontal: 0 },
   disabled: {
     color: colors.zinc["400"],
     outlineStyle: "none" as unknown as "solid",

package/src/text_utils.ts

@@ -26,7 +26,7 @@ export function getTextColor(color?: TextColor): string {
     case "zinc-500":
       return colors.zinc["500"];
     // The disabled ink — light enough that a control reads inert at a glance
-    // (muted/600 still reads as body ink on a zinc-50 chip).
+    // (muted/600 still reads as body ink on the control's resting surface).
     case "zinc-400":
       return colors.zinc["400"];
     case "inverted":

package/src/linked_record_box.tsx

@@ -1,157 +0,0 @@
-import { type ReactNode } from "react";
-import { View, StyleSheet } from "react-native";
-import { PressableRow } from "./pressable_row";
-import { PressDoor } from "./press_door";
-import { Text } from "./text";
-import { Icon, type IconName } from "./icon";
-import { colors } from "./colors";
-import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
-
-/** One reference fact. `V` is the value the variant admits — text under a door, any node without one. */
-interface LinkedRecordFact<V = ReactNode> {
-  label: string;
-  value: V;
-}
-
-interface LinkedRecordBoxBaseProps {
-  /** The linked record's kind glyph (building-2 for a company, file-text for a record…). */
-  icon: IconName;
-  /** The linked record's display name. */
-  name: string;
-  /** A secondary identity line — a code, tax id, country, or "<desk> record". */
-  subtitle?: string;
-  /** Width of the facts' label column (default 80). Widen for longer labels. */
-  factLabelWidth?: number;
-  /** The verbs, in a hairline-fenced footer at the bottom of the box, lifted above the door's
-   *  hit area. Convention: destructive LEFT, go-to RIGHT (a `<View style={{ flex: 1 }} />`
-   *  spacer between). The divider is drawn automatically when actions are present. Supplied by
-   *  the consumer so the labels stay localized and the verb set fits the link. */
-  actions?: ReactNode;
-}
-
-/** The box that OPENS — the whole surface is the door into the linked record's own detail. */
-interface LinkedRecordBoxDoorProps extends LinkedRecordBoxBaseProps {
-  /** Opens the linked record's detail (drawer/page) — the WHOLE box presses this. */
-  onOpen: () => void;
-  /** Accessible name for opening the record (e.g. "Acme Corp — details"). */
-  doorLabel: string;
-  /** Reference facts, stacked VERTICALLY (legible at any width, never squeezed). TEXT only
-   *  (`""` renders "—"): the box is one press target, so the only controls it may hold are the
-   *  `actions` verbs, which the footer fences off and lifts above the door. A fact the reader
-   *  must EDIT belongs on the linked record's own page — that is what the door is for. */
-  facts?: LinkedRecordFact<string>[];
-}
-
-/** The box with nothing to open — the linked record has no detail surface of its own. */
-interface LinkedRecordBoxStaticProps extends LinkedRecordBoxBaseProps {
-  /** Absent by construction. Typed `never` rather than left off so `doorLabel` can never arrive
-   *  without a handler — a named door that goes nowhere. */
-  onOpen?: never;
-  doorLabel?: never;
-  /** Reference facts, stacked VERTICALLY. A string renders as text (`""` → "—"); a NODE renders
-   *  as given (no placeholder), so a fact can carry its own inline editor — safe here precisely
-   *  because nothing about this box presses. */
-  facts?: LinkedRecordFact[];
-}
-
-type LinkedRecordBoxProps = LinkedRecordBoxDoorProps | LinkedRecordBoxStaticProps;
-
-/**
- * A LINKED RECORD shown for reference — a bordered box scoping ANOTHER record's data
- * (identity glyph · name · facts). Use it wherever one record points at another (a shipment's
- * customer, an invoice's party, a case's sibling); the picker / empty-state that REASSIGNS the
- * link is the consumer's, shown in place of the box.
- *
- * `onOpen` picks the variant:
- *
- * - **With `onOpen`** (+ `doorLabel`) the WHOLE box is a keyboard-accessible door into the
- *   record's detail. Its facts are TEXT, and the `actions` footer is the one place a control
- *   may live — everything else is press-through to the door.
- * - **Without it** the box is a STATIC reference card: no door, no tab stop, no pointer, nothing
- *   announced as a button; the only interactive parts are `actions` and whatever a fact node
- *   holds. This is the shape for a record with NO page of its own — there is nothing to open, so
- *   the box IS where its values are read and edited, and an inline editor in a fact is honest.
- *
- * The a11y contract the door variant enforces (the error-prone part, hence a primitive): a
- * container with interactive descendants must NEVER be `role="button"` (invalid HTML). So the
- * box is a role-less `PressableRow`, a `PressDoor` sibling carries the tab stop / accessible
- * name / focus ring, and the interior verbs lift above it via `zIndex`.
- */
-export function LinkedRecordBox(props: LinkedRecordBoxProps) {
-  const { icon, name, subtitle, factLabelWidth = 80, actions } = props;
-  // A door box's facts are strings, and a string IS a ReactNode — so both variants render
-  // through one path typed at the wider value.
-  const facts: LinkedRecordFact[] = props.facts ?? [];
-  const body = (
-    <>
-      <View style={styles.identity}>
-        <View style={styles.glyph}>
-          <Icon name={icon} size={17} color={colors.zinc[600]} />
-        </View>
-        <View style={{ flex: 1, minWidth: 0 }}>
-          <Text size="sm" weight="medium" numberOfLines={1}>{name}</Text>
-          {subtitle ? <Text size="xs" color="muted" numberOfLines={1}>{subtitle}</Text> : null}
-        </View>
-      </View>
-      {facts.length > 0 ? (
-        <View style={{ gap: 6 }}>
-          {facts.map((f) => {
-            // THE ALIGNMENT LAW, the same one `DetailRow` runs on: the fact TOP-aligns and each
-            // cell centres within the first CONTROL LINE. A node value brings the kit's control
-            // band (an inline editor is 40 tall, a chip less), so both cells claim it — without
-            // it the label `Text`, stretched to the row, printed its words at the band's TOP,
-            // a half-band above the value it names. A STRING value has no band: label and value
-            // are the same 20px line, so they sit at the row's top and a long value that wraps
-            // still tops out level with its label.
-            const banded = typeof f.value !== "string";
-            return (
-              <View key={f.label} style={styles.fact}>
-                <View style={[{ width: factLabelWidth }, banded && styles.bandedCell]}>
-                  <Text size="sm" color="muted">{f.label}</Text>
-                </View>
-                {banded ? (
-                  // A node prints as authored — the "—" placeholder is a TEXT affordance, and a
-                  // control renders its own empty state.
-                  <View style={[{ flex: 1, minWidth: 0 }, styles.bandedCell]}>{f.value}</View>
-                ) : (
-                  <Text size="sm" style={{ flex: 1 }}>{f.value || "—"}</Text>
-                )}
-              </View>
-            );
-          })}
-        </View>
-      ) : null}
-      {actions ? (
-        <>
-          {/* full-bleed hairline fencing the verb footer off from the facts */}
-          <View style={styles.divider} />
-          <View style={styles.actions}>{actions}</View>
-        </>
-      ) : null}
-    </>
-  );
-
-  // Nothing to open → a plain View, so the box takes no tab stop, announces no role, and paints
-  // no pointer/hover promise of a destination it doesn't have.
-  if (!props.onOpen) return <View style={styles.box}>{body}</View>;
-
-  return (
-    <PressableRow onPress={props.onOpen} style={styles.box}>
-      <PressDoor accessibilityLabel={props.doorLabel} onPress={props.onOpen} />
-      {body}
-    </PressableRow>
-  );
-}
-
-const styles = StyleSheet.create({
-  box: { flexDirection: "column", alignItems: "stretch", borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, paddingHorizontal: 16, paddingTop: 14, paddingBottom: 10, gap: 12 },
-  identity: { flexDirection: "row", alignItems: "center", gap: 10 },
-  glyph: { width: 34, height: 34, borderRadius: 8, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" },
-  fact: { flexDirection: "row", gap: 10, alignItems: "flex-start" },
-  // A cell on the control band: exactly `minHeight` tall for a one-line label / a short chip,
-  // and taller content (a wrapped label, a stack of controls) tops out level instead of being
-  // dragged toward the block's centre.
-  bandedCell: { minHeight: INLINE_CONTROL_HEIGHT, justifyContent: "center" },
-  divider: { height: 1, backgroundColor: colors.zinc[100], marginHorizontal: -16 },
-  actions: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 8, zIndex: 1 },
-});