@lotics/ui 44.7.1 → 44.9.0

package/src/tabs.tsx

@@ -12,6 +12,19 @@ export interface TabOption<T extends string> {
   /** A small status dot before the label — set only when the tab's area needs
    *  attention (a blocker / missing item). Omit for the resting state. */
   status?: ColorName;
+  /** How many rows the tab's band holds, shown after the label.
+   *
+   *  A PROP, never a count formatted into `label`. A tab band partitions a
+   *  register exactly as `TableGroup` does, and that component states its size
+   *  the same way for the same reason: a hand-built `"Trên tàu (4)"` is a second
+   *  copy of a number the screen already computes, and it is the copy that goes
+   *  stale. Pressing the tab is the filter, so the count is also the reason to
+   *  press it.
+   *
+   *  Yours to pass because it is rarely the child count — a paged or filtered
+   *  band counts what matched, not what rendered. Omit when every band is
+   *  always whole. */
+  count?: number;
 }
 
 interface TabsProps<T extends string> {
@@ -113,6 +126,12 @@ function TabButton<T extends string>(props: TabButtonProps<T>) {
       >
         {option.label}
       </Text>
+      {option.count != null ? (
+        <Text color="zinc-500" tabular userSelect="none">
+          {option.count}
+        </Text>
+      ) : null}
+
     </View>
   );
 

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",