@lotics/ui 47.2.1 → 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/docs/reviewing.md

@@ -10,6 +10,24 @@ Everything here is about a screen **that already renders**. Building one starts
 
 ---
 
+## The kit's peer ranges are a resolution contract, not a floor
+
+`lucide-react-native` sat at `>=0.460.0` — unbounded — while `icon.tsx` deep-imports
+`lucide-react-native/dist/esm/icons/<name>` to keep the ~1650-icon barrel out of the
+Metro bundle. lucide later shipped an `exports` map listing only `.` and `./icons`, so
+that path stopped being publicly exported, and every resolver that honours `exports`
+(Vite's dep optimizer among them) began refusing it. Nothing in this repo changed; the
+range simply accepted the version that changed the rules.
+
+It surfaced late and looked intermittent because a warm `.vite` cache never re-resolves
+— only a fresh install hits it, which is why it kept coming back and kept getting
+patched as a symptom (clear the cache, add a local `exclude`).
+
+**A peer range with no upper bound on a package we deep-import is a standing invitation
+for this.** When the kit reaches past a package's public entry points, bound the range,
+and say in the code why the deep path is being used at all.
+
+
 ## The method
 
 **"Looks off" is where a finding starts.** Trust the impression and use measurement to say

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "47.2.1",
+  "version": "47.4.0",
   "type": "module",
   "exports": {
     "./accordion": "./src/accordion.tsx",
@@ -355,7 +355,7 @@
     "@react-native-picker/picker": ">=2.0.0",
     "expo-image": ">=3.0.0",
     "lucide-react": ">=0.460.0",
-    "lucide-react-native": ">=0.460.0",
+    "lucide-react-native": "^0.562.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-native": ">=0.85.0",

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

package/src/vite.mjs

@@ -102,11 +102,44 @@ export const loticsOptimizeDeps = [
  *   const base = loticsResolve();
  *   resolve: { ...base, alias: [...base.alias, { find: "x", replacement: "y" }] }
  */
+/**
+ * Absolute path to lucide's ESM icon directory, or null when it isn't installed.
+ *
+ * `icon.tsx` deep-imports `lucide-react-native/dist/esm/icons/<name>` to keep the
+ * ~1650-icon barrel out of the Metro bundle. lucide 0.562 ships an `exports` map
+ * listing only `.` and `./icons`, so that specifier is not publicly exported —
+ * and Vite's dep optimizer, which honours `exports`, refuses it outright:
+ * `Missing "./dist/esm/icons/activity" specifier`. The rollup build resolves it
+ * anyway, so the failure is dev-only, and it stayed hidden because a warm
+ * `.vite` cache never re-resolves. Any app installing fresh hits it immediately.
+ *
+ * Resolving the package's own ESM entry and walking to its sibling `icons/`
+ * gives the optimizer a real path, so no consumer has to touch its vite config
+ * and no bundle changes. `import.meta.resolve` (not `createRequire`) because we
+ * need the ESM condition — the require condition lands in `dist/cjs`.
+ */
+function lucideIconsDir() {
+  try {
+    // `import.meta.resolve`, and string-slicing rather than `node:path` /
+    // `node:url`, because this module must stay a zero-import leaf — see the
+    // header. The ESM condition matters: the require condition lands in
+    // `dist/cjs`, whose icons are CJS and would defeat the point.
+    const url = import.meta.resolve("lucide-react-native");
+    if (!url.startsWith("file://")) return null;
+    const file = decodeURIComponent(url.slice("file://".length));
+    return `${file.slice(0, file.lastIndexOf("/"))}/icons`;
+  } catch {
+    return null;
+  }
+}
+
 export function loticsResolve() {
   const uiSrc = process.env.LOTICS_UI_SRC;
+  const icons = lucideIconsDir();
   return {
     alias: [
       ...(uiSrc ? [{ find: /^@lotics\/ui\/(.+)$/, replacement: `${uiSrc}/$1` }] : []),
+      ...(icons ? [{ find: /^lucide-react-native\/dist\/esm\/icons\/(.+)$/, replacement: `${icons}/$1` }] : []),
       { find: "react-native", replacement: "react-native-web" },
     ],
     extensions: [".web.tsx", ".web.ts", ".web.js", ".tsx", ".ts", ".jsx", ".js", ".mjs", ".mts"],