@lotics/ui 4.7.0 → 4.8.0

package/AGENTS.md

@@ -56,7 +56,9 @@ Pick by capability, not by name. (→ the source file for the API.)
   with `Pagination`). Never an HTML `<table>` or a `.map` of rows.
 - **Numbers & charts** — `KPIStrip` / `KPICard` / `Metric` (headline figures), `TrendChip`
   (delta), `Sparkline`, `BarChart` / `LineChart` / `PieChart` (the canonical SVG set — no
-  recharts), `RingGauge`, `ProgressBar` / `StackedProgressBar` / `StepProgress`, `Breakdown`,
+  recharts), `RingGauge`, `ProgressBar` / `StackedProgressBar` / `StepProgress`, `Breakdown`
+  (a stacked bar + ranked share rows, pressable to drill; `maxRows` folds the long tail behind a
+  "Show N more" toggle — `labels` to localize — so several facet cards align to one height in a row),
   `StatusGrid` + `StatusLegend`, `Heatmap`.
 - **Surfaces & layout** — `Card` (+ `CardHeader`/`CardHeaderTitle`/`CardHeaderMeta`/`CardBody`/
   `CardFooter`), `SectionCard`, `SectionHeading` (+ `SectionHeadingTitle`), `PageHeader` /

package/examples/tpl_stock.tsx

@@ -56,6 +56,11 @@ const DEPOTS = [
   { key: "northgate", label: "Northgate" },
   { key: "riverside", label: "Riverside" },
   { key: "southbay", label: "Southbay" },
+  { key: "westpoint", label: "Westpoint" },
+  { key: "harborview", label: "Harborview" },
+  { key: "lakeside", label: "Lakeside" },
+  { key: "midvale", label: "Midvale" },
+  { key: "fairlawn", label: "Fairlawn" },
 ] as const;
 const DEPOT_RAMP = ramp("violet", DEPOTS.length);
 
@@ -101,7 +106,7 @@ const TYPE_BASE_VALUE: Record<TypeKey, number> = {
 const UNITS: Unit[] = Array.from({ length: 10_482 }, (_, i) => {
   const type = pick<TypeKey>(i, 1, [["dry40", 34], ["dry20", 26], ["hc40", 18], ["reefer", 12], ["opentop", 7], ["tank", 3]]);
   const status = pick<StatusKey>(i, 2, [["leased", 52], ["yard", 18], ["transit", 14], ["repair", 9], ["idle", 7]]);
-  const depot = pick<DepotKey>(i, 3, [["eastport", 38], ["northgate", 27], ["riverside", 21], ["southbay", 14]]);
+  const depot = pick<DepotKey>(i, 3, [["eastport", 26], ["northgate", 19], ["riverside", 15], ["southbay", 11], ["westpoint", 9], ["harborview", 7], ["lakeside", 5], ["midvale", 4], ["fairlawn", 4]]);
   const ageYears = 1 + (hash(i, 4) % 12);
   const day = 1 + (hash(i, 5) % 28);
   const month = status === "idle" ? 1 + (hash(i, 6) % 4) : 4 + (hash(i, 6) % 3);
@@ -241,10 +246,13 @@ export function TplStock() {
               </CardHeaderTitle>
             </CardHeader>
             <View style={{ paddingHorizontal: 20, paddingVertical: 16 }}>
+              {/* maxRows caps the long tail behind a "Show N more" toggle, so a
+                  many-depot facet stays the same height as its neighbours. */}
               <Breakdown
                 items={DEPOTS.map((d, i) => ({ key: d.key, label: d.label, value: byDepot.get(d.key) ?? 0, color: DEPOT_RAMP[i] }))}
                 selectedKey={depot}
                 onSelect={setFacet(setDepot)}
+                maxRows={5}
               />
             </View>
           </Card>

package/package.json

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

package/src/breakdown.tsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors, withAlpha } from "./colors";
+import { Icon } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
 import { StackedProgressBar } from "./stacked_progress_bar";
 import { Text } from "./text";
@@ -12,6 +14,15 @@ export interface BreakdownItem {
   color: string;
 }
 
+/** Expand/collapse labels for a capped breakdown (`maxRows`). Localized
+ *  downstream — the kit ships English defaults. */
+export interface BreakdownLabels {
+  /** The expand affordance, given how many rows are currently hidden. */
+  more: (hidden: number) => string;
+  /** The collapse affordance. */
+  less: string;
+}
+
 export interface BreakdownProps {
   items: BreakdownItem[];
   /** The drilled-in segment. While set, the other segments dim. */
@@ -20,9 +31,17 @@ export interface BreakdownProps {
    * render an informational breakdown. */
   onSelect?: (key: string | null) => void;
   formatValue?: (n: number) => string;
+  /** Cap the visible rows; the rest fold behind a "show more" toggle. Keeps a
+   *  long-tail breakdown a fixed height (so several align in a row) while staying
+   *  fully drillable on expand. The stacked bar always reflects ALL items. Omit
+   *  to show every row. */
+  maxRows?: number;
+  /** Expand/collapse labels (defaults to English). */
+  labels?: BreakdownLabels;
 }
 
 const defaultFormat = (n: number): string => n.toLocaleString("en-US");
+const DEFAULT_LABELS: BreakdownLabels = { more: (hidden) => `Show ${hidden} more`, less: "Show less" };
 
 /**
  * Composition browser for LARGE populations — the answer to "what is my
@@ -34,8 +53,15 @@ const defaultFormat = (n: number): string => n.toLocaleString("en-US");
  * full faceted overview; selections combine in the host's filter state.
  */
 export function Breakdown(props: BreakdownProps) {
-  const { items, selectedKey = null, onSelect, formatValue = defaultFormat } = props;
+  const { items, selectedKey = null, onSelect, formatValue = defaultFormat, maxRows, labels = DEFAULT_LABELS } = props;
   const total = items.reduce((sum, item) => sum + item.value, 0);
+  const [expanded, setExpanded] = useState(false);
+  // Cap the rows when `maxRows` is set and the tail is longer; the bar still
+  // reflects every item, only the ranked list folds.
+  const cap = maxRows ?? items.length;
+  const collapsible = items.length > cap;
+  const hidden = items.length - cap;
+  const visible = collapsible && !expanded ? items.slice(0, cap) : items;
 
   return (
     <View style={styles.container}>
@@ -49,7 +75,7 @@ export function Breakdown(props: BreakdownProps) {
         }))}
       />
       <View>
-        {items.map((item) => {
+        {visible.map((item) => {
           const share = total > 0 ? Math.round((item.value / total) * 100) : 0;
           const selected = selectedKey === item.key;
           const dimmed = selectedKey !== null && !selected;
@@ -84,6 +110,20 @@ export function Breakdown(props: BreakdownProps) {
             </View>
           );
         })}
+        {collapsible ? (
+          <PressableHighlight
+            accessibilityRole="button"
+            accessibilityState={{ expanded }}
+            accessibilityLabel={expanded ? labels.less : labels.more(hidden)}
+            onPress={() => setExpanded((e) => !e)}
+            style={[styles.row, styles.pressable, styles.toggle]}
+          >
+            <Text size="sm" weight="medium" color="muted">
+              {expanded ? labels.less : labels.more(hidden)}
+            </Text>
+            <Icon name={expanded ? "chevron-up" : "chevron-down"} size={16} color={colors.zinc[400]} />
+          </PressableHighlight>
+        ) : null}
       </View>
     </View>
   );
@@ -96,7 +136,7 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 10,
+    gap: 8,
     minHeight: 36,
   },
   pressable: {
@@ -116,6 +156,10 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   share: {
-    width: 36,
+    width: 30,
+  },
+  toggle: {
+    gap: 4,
+    minHeight: 32,
   },
 });