@lotics/ui 47.3.0 → 47.4.0

package/docs/catalog.md

@@ -1125,8 +1125,14 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   choice. → `data_entry.md` §"Choosing a CHOICE control" — and check the states really ARE
   exclusive: independent capabilities that happen to be exclusive today bake today's
   combinations into the type.
-- **`chip_group`** — `ChipGroup`: pill single-select over a small visible set. → `data_entry.md`
-  §"Choosing a CHOICE control" for which control the count and the job call for.
+- **`chip_group`** — `ChipGroup`: pill single-select over a small visible set. The row wraps by
+  default; `overflow="scroll"` keeps it to ONE row for a register FILTER, where six options
+  carrying counts wrap to three rows — 136px on a phone, more than the search band and the view
+  switcher combined. Deliberately NOT a screen-width branch: width is not the question, the job
+  is, and both jobs occur at every width. Never `scroll` on a form field or a view control —
+  chips are worth more than a `Picker` there only because every option is visible, and a swipe
+  is exactly what takes that away. → `data_entry.md` §"Choosing a CHOICE control" for which
+  control the count and the job call for.
 - **`checkbox`** — `Checkbox`: the bare square check control. Bare means UNLABELLED — reach for
   `CheckboxInput` unless something else already names it (a table's select-all, a row's
   leading slot). A square means CHOSEN; a ring means DONE, and spending the wrong one teaches a

package/docs/composition.md

@@ -1015,7 +1015,9 @@ by what KIND of thing they are.
   stays one consistent band. Never a bare `TextInputField` + search icon.
 - **`ChipGroup`** is THE one-of-N lens (≤ ~10 options the user flips between; include "All";
   counts in the label). Filters ONE list to a SUBSET — including by process stage / lifecycle
-  state.
+  state. As a FILTER above a register it takes `overflow="scroll"` and costs one row on a phone
+  instead of three; a VIEW CONTROL ("how are they arranged") and a form field keep the default
+  wrap. The line is the toolbar's own — which rows vs how they are arranged — not a width.
 - **`FilterChip`** is THE secondary-dimension filter — a compact chip that opens a composed
   popover editor (`OptionList` multi / `Slider range` / `Counter` / date range). Single-select
   closes on pick via the `{({ close }) => …}` render prop.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.3.0",
+  "version": "47.4.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",

package/src/chip_group.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View, type ViewStyle } from "react-native";
+import { ScrollView, StyleSheet, View, type ViewStyle } from "react-native";
 import { colors } from "./colors";
 import { Icon, type IconName } from "./icon";
 import { solid, type ColorName } from "./colors";
@@ -6,8 +6,9 @@ import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
 import { chipSurfaceStyle } from "./control_surface";
 
-// One-of-N chips: every option visible, one tap to switch, the row wraps on
-// narrow widths. Quiet zinc styling — bordered white at rest, and the active one
+// One-of-N chips: every option visible, one tap to switch. The row WRAPS by
+// default; a hot filter with many options passes `overflow="scroll"` to keep
+// itself to one row. Quiet zinc styling — bordered white at rest, and the active one
 // keeps that same ground and takes a doubled zinc-900 EDGE instead, so a
 // selection never spends the brand and never speaks the row's language (the
 // reasoning is on `chipSurfaceStyle`). Colour stays reserved for status +
@@ -76,12 +77,34 @@ export interface ChipGroupProps<T extends string = string> {
    *  yet) is valid. */
   value: T;
   onValueChange: (value: T) => void;
+  /**
+   * What the row does when it runs out of width.
+   *
+   * `"wrap"` (the default) keeps EVERY option on screen, which is the whole
+   * reason a form field or a composer reaches for chips instead of a `Picker` —
+   * a required single-select that hides half its values behind a swipe is a
+   * worse `Picker`, not a better one. Those sets are 2-3 short options and fit
+   * a phone anyway.
+   *
+   * `"scroll"` is for the other job: a HOT FILTER above a register, where the
+   * set is long enough and the labels carry counts. Six status options wrap to
+   * THREE ROWS at 390px — 136px, more than the search band and the view
+   * switcher combined, and the largest single block above the first record.
+   * One row costs 40px; the leading options stay a tap away and the tail is a
+   * swipe.
+   *
+   * Not derived from screen width, because width is not the question — the JOB
+   * is, and both jobs occur at every width. A `ScrollView` whose content fits
+   * does not scroll, so this is a no-op on a desktop either way.
+   */
+  overflow?: "wrap" | "scroll";
 }
 
 export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
-  const { accessibilityLabel, options, value, onValueChange } = props;
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
+  const { accessibilityLabel, options, value, onValueChange, overflow = "wrap" } = props;
+
+  const inner = (
+    <>
       {options.map((option) => {
         const active = option.value === value;
         return (
@@ -140,11 +163,22 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
           </PressableHighlight>
         );
       })}
-    </View>
+    </>
+  );
+
+  return overflow === "scroll" ? (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.scrollRow}>
+      {inner}
+    </ScrollView>
+  ) : (
+    <View style={styles.wrapRow}>{inner}</View>
   );
 }
 
 const styles = StyleSheet.create({
+  wrapRow: { flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 },
+  // paddingRight so the last chip does not sit flush against the edge mid-scroll
+  scrollRow: { flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 8 },
   dot: { width: 6, height: 6, borderRadius: 3 },
   chip: {
     flexDirection: "row",