@lotics/ui 7.11.0 → 7.12.0

package/AGENTS.md

@@ -867,7 +867,7 @@ inline_text_input · inline_number_input · inline_select · inline_member_selec
 inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
 `InlineEditView`; `InlineSelect`/`InlineMemberSelect` render the resting value like its option — `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not just text) ·
 inline_static (InlineStatic — a READ-ONLY value matching the Inline* box metrics EXACTLY (height, padding, 1px transparent border) so a non-editable field — a computed total, a system ID, a synced/locked value — aligns pixel-for-pixel in the same column; non-interactive, NOT a disabled input; `muted`/`tabular`/`align="right"` for a number column, `weight="medium"` to emphasise a total among plain rows) ·
-list · list_item · menu_button · menu_list_item · detail_row (DetailRow — label+value row for drawer/peek detail; optional `trailing` slot renders a right-side action/badge/unit after the value) · danger_zone (DangerZone — the destructive section: a soft danger-tinted frame (`tint`/`solid`, never raw hex) + a danger heading + a description + a destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a record/settings surface) · pressable_row ·
+list · list_item · menu_button · menu_list_item · detail_row (DetailRow — label+value row for drawer/peek detail; in FORM mode (`labelWidth` set) the value column FILLS the row so a stack of inline editors all span the same width + none jumps wider on edit; optional `trailing` slot renders a right-side action/badge/unit after the value) · danger_zone (DangerZone — the destructive section: a soft danger-tinted frame (`tint`/`solid`, never raw hex) + a danger heading + a description + a destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a record/settings surface) · pressable_row ·
 check_circle (CheckCircle — the completion ring: an empty ring that springs to a filled check when done, distinct from the square checkbox; the task/to-do/checklist toggle. Compose task rows directly, no Task component) · action_menu ·
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.11.0",
+  "version": "7.12.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/detail_row.tsx

@@ -9,9 +9,8 @@ export interface DetailRowProps {
   children: ReactNode;
   /** An optional right-side slot, rendered as the LAST child of the row (after
    *  `children`) — a small action `Button`, a status `Badge`, a unit label, an
-   *  `IconButton`. For it to sit at the right edge, wrap the value/editor in a
-   *  `flex:1` View so the value takes the slack and the trailing pins right (the
-   *  inline-record templates do this). */
+   *  `IconButton`. In form mode (`labelWidth` set) the value column already fills
+   *  the row, so the trailing pins to the right edge automatically. */
   trailing?: ReactNode;
   /** Fixed label-column width (px) to align labels in a left column — for a peek
    *  or form-like stack. Omit for a spread row: the label takes the slack and the
@@ -26,17 +25,19 @@ export interface DetailRowProps {
 /**
  * One label + value line for a drawer / peek detail view — NOT a list row (that's
  * `PressableRow` / `TableRow`). Spread by default (muted label left, value pushed
- * to the right edge); pass `labelWidth` to align labels in a fixed left column
- * with the values flowing immediately after instead.
+ * to the right edge); pass `labelWidth` to align labels in a fixed left column —
+ * the value column then FILLS the rest of the row, so a stack of inline editors
+ * all span the same width (none jumps wider on edit).
  */
 export function DetailRow(props: DetailRowProps) {
   const { label, children, trailing, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  const form = labelWidth != null;
   return (
     <View style={[styles.row, { minHeight }]}>
-      <Text size={labelSize} color="muted" style={labelWidth != null ? { width: labelWidth } : styles.flexLabel}>
+      <Text size={labelSize} color="muted" style={form ? { width: labelWidth } : styles.flexLabel}>
         {label}
       </Text>
-      {children}
+      {form ? <View style={styles.value}>{children}</View> : children}
       {trailing != null ? trailing : null}
     </View>
   );
@@ -49,4 +50,10 @@ const styles = StyleSheet.create({
     gap: 12,
   },
   flexLabel: { flex: 1 },
+  // Form mode (labelWidth set): the value column FILLS the row so every inline
+  // editor spans the SAME width — and none jumps wider when it swaps to the
+  // (flex:1) edit control. A stretch column, so an InlineEditView / InlineStatic
+  // child fills it edge-to-edge. A status Badge or action is NOT a value — pass
+  // it as `trailing` (pins right); one placed here would stretch full-width.
+  value: { flex: 1 },
 });