@lotics/ui 44.7.0 → 44.8.0

package/src/text_input_field.tsx

@@ -45,6 +45,24 @@ interface TextInputFieldProps extends RNTextInputProps {
    *  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;
+  /**
+   * Frameless at rest — no ground, no visible edge — for a field that must read
+   * as its own value until touched: a table cell, a title in place. The edge
+   * arrives on hover and the ring on focus, exactly as in the framed variant.
+   *
+   * It is a PROP rather than a `style` the caller passes because of the order
+   * below. Hover is applied before `style`, so a caller-supplied
+   * `borderColor: "transparent"` landed on top of it and erased the hover edge
+   * on every bare field in the kit — leaving a control whose entire affordance
+   * was that edge with no affordance at all, and no way to discover it was a
+   * control short of clicking. Nothing measured wrong: the field had a real
+   * focus ring, a real role, correct type and spacing, and the hover rule was
+   * right there in the array being silently overwritten one line later.
+   *
+   * Distinct from `seamless`, which surrenders the surface to a HOST that draws
+   * it. Bare has no host — it draws its own frame, just not at rest.
+   */
+  variant?: "framed" | "bare";
   // DOM-only ARIA attrs not declared on React Native's TextInputProps. They
   // are forwarded verbatim to the underlying web input.
   "aria-controls"?: string;
@@ -63,6 +81,7 @@ export function TextInputField(props: TextInputFieldProps) {
   const {
     style,
     seamless,
+    variant = "framed",
     icon,
     clearable,
     onClear,
@@ -202,8 +221,20 @@ export function TextInputField(props: TextInputFieldProps) {
           icon && styles.withIcon,
           showClear && styles.withClear,
           showShortcut && shortcutWidth > 0 && { paddingRight: SHORTCUT_INSET + shortcutWidth },
-          hovered && editable && { borderColor: HOVER_BORDER },
+          // RESTING FRAME first, so a caller's `style` can still override it.
+          variant === "bare" && styles.bare,
           style,
+          // ...and HOVER after `style`, which is the grammar's rule for fields
+          // (composition.md § the surface table) and was inverted here. A caller
+          // passing a resting `borderColor` — which is exactly how `bare` used
+          // to be expressed — silently erased the hover edge one line after it
+          // was computed. Order is the whole bug: every property was correct.
+          //
+          // Still BEFORE the last two. The ring is a shadow, so it does not
+          // compete; `seamless` must outrank hover, because there the border
+          // belongs to the host shell and the input drawing its own would put
+          // two edges on one field.
+          hovered && editable && { borderColor: HOVER_BORDER },
           focusVisible && !seamless && { boxShadow: FOCUS_RING },
           seamless && styles.seamless,
         ]}
@@ -277,6 +308,9 @@ const styles = StyleSheet.create({
   // Safe for height because the box is `border-box`: dropping the border changes
   // the content box, never the field's 40px outer size.
   seamless: { borderColor: "transparent", borderWidth: 0, backgroundColor: "transparent", paddingHorizontal: 0 },
+  // Nothing at rest — but the 1px border STAYS, transparent, so the hover edge
+  // costs no reflow when it arrives.
+  bare: { borderColor: "transparent", backgroundColor: "transparent" },
   disabled: {
     color: colors.zinc["400"],
     outlineStyle: "none" as unknown as "solid",