@kud/ink-ui 0.14.0 → 0.15.0

package/README.md

@@ -19,6 +19,7 @@
   - **Selection & navigation** — `Select`, `MultiSelect`, `Tabs`, `Switch`, `Toggle`, `SelectableRow`
   - **Status & feedback** — `Spinner`, `ProgressBar`, `StatusMessage`, `Alert`, `Badge`, `Toast`
   - **Layout & chrome** — `Banner`, `Header`, `Panel` (bordered pane, optional focus state), `Columns`, `FooterHints`, `KeyValue`, `LoadingScreen`, `ScrollView`
+- **Behaviour hooks** — `useTabs` and `useListCursor` own the keyboard state that every consumer used to hand-roll, so Tab/Shift+Tab and arrow/vim navigation behave the same everywhere
 - **Full [@inkjs/ui](https://github.com/vadimdemedes/ink-ui) parity** — every upstream component has an equivalent, plus a dozen more the design system adds on top
 - **Colourblind-safe by design** — state is signalled by shape, case, and glyph, never colour alone
 - **Design tokens included** — a shared colour palette (`colors`) and spacing scale (`spacing`) to keep every screen consistent
@@ -84,6 +85,25 @@ const SignUp = () => (
 )
 ```
 
+Components stay presentational and controlled — they take `active`/`value` and render. The behaviour hooks supply the keyboard state to drive them, so the two compose without either forcing the other:
+
+```tsx
+import { Tabs, useTabs, useListCursor } from "@kud/ink-ui"
+
+const items = [
+  { value: "open", label: "Open", count: 3 },
+  { value: "done", label: "Done" },
+]
+
+const Inbox = ({ rows }) => {
+  const { active } = useTabs(items) // Tab forward, Shift+Tab back, wraps
+  const { cursor } = useListCursor(rows.length) // ↑/↓ and k/j, clamps at the ends
+  return <Tabs active={active} items={items} />
+}
+```
+
+Both take `{ isActive }` so a screen with several focus regions can gate them, and `useListCursor` takes `{ wrap }` for genuinely circular lists. `useTabs` wraps by default because a tab bar is a ring; `useListCursor` clamps because a list has ends.
+
 All components accept only the props they need — no theme provider or context required. Design tokens are plain objects:
 
 ```ts

package/dist/index.d.ts

@@ -26,16 +26,25 @@ type SpinnerProps = {
 };
 declare const Spinner: ({ label }: SpinnerProps) => React__default.JSX.Element;
 
+type ColumnAlign = "left" | "center" | "right";
+type ColumnOverflow = "wrap" | "truncate";
+
 type Column<T extends Record<string, unknown>> = {
     key: keyof T & string;
     header: string;
     width?: number;
+    minWidth?: number;
+    align?: ColumnAlign;
+    overflow?: ColumnOverflow;
 };
 type TableProps<T extends Record<string, unknown>> = {
     data: T[];
     columns: Column<T>[];
+    gap?: number;
+    maxWidth?: number;
+    headerColor?: string;
 };
-declare const Table: <T extends Record<string, unknown>>({ data, columns, }: TableProps<T>) => React__default.JSX.Element;
+declare const Table: <T extends Record<string, unknown>>({ data, columns, gap, maxWidth, headerColor, }: TableProps<T>) => React__default.JSX.Element;
 
 type Hint = [key: string, label: string];
 type FooterHintsProps = {
@@ -312,4 +321,4 @@ declare const spacing: {
 };
 type Spacing = (typeof spacing)[keyof typeof spacing];
 
-export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, Columns, ConfirmInput, EmailInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, OrderedList, Panel, PasswordInput, ProgressBar, ScrollView, Select, type SelectOption, SelectableRow, type Spacing, type Span, Spinner, StatusMessage, type StatusVariant, type StyledLine, Switch, type SwitchValue, type TabItem, Table, Tabs, TextInput, Toast, Toggle, ToggleSwitch, UnorderedList, UpdateBanner, colors, getIconMode, notify, setIconMode, spacing, useListCursor, useTabs };
+export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, type ColumnAlign, type ColumnOverflow, Columns, ConfirmInput, EmailInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, OrderedList, Panel, PasswordInput, ProgressBar, ScrollView, Select, type SelectOption, SelectableRow, type Spacing, type Span, Spinner, StatusMessage, type StatusVariant, type StyledLine, Switch, type SwitchValue, type TabItem, Table, Tabs, TextInput, Toast, Toggle, ToggleSwitch, UnorderedList, UpdateBanner, colors, getIconMode, notify, setIconMode, spacing, useListCursor, useTabs };

package/dist/index.js

@@ -1,7 +1,8 @@
-import { Box, Text, useInput, measureElement } from 'ink';
+import { Box, Text, useStdout, useInput, measureElement } from 'ink';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React8, { createContext, useContext, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import cliSpinners from 'cli-spinners';
+import stringWidth from 'string-width';
 import { glyphs } from '@kud/glyphs';
 import { spawn } from 'child_process';
 
@@ -56,13 +57,100 @@ var Spinner = ({ label }) => {
     label && /* @__PURE__ */ jsx(Text, { dimColor: true, children: label })
   ] });
 };
+var DEFAULT_MIN_WIDTH = 3;
+var widestLine = (value) => value.split("\n").reduce((widest, line) => Math.max(widest, stringWidth(line)), 0);
+var naturalWidth = (column, cells) => cells.reduce(
+  (widest, cell) => Math.max(widest, widestLine(cell)),
+  widestLine(column.header)
+);
+var floorFor = (column, width) => column.width !== void 0 ? width : Math.min(width, column.minWidth ?? DEFAULT_MIN_WIDTH);
+var widestShrinkable = (widths, floors) => widths.reduce(
+  (best, width, index) => width > floors[index] && (best === -1 || width > widths[best]) ? index : best,
+  -1
+);
+var shrinkToFit = (widths, floors, excess) => {
+  const shrunk = [...widths];
+  let remaining = excess;
+  while (remaining > 0) {
+    const target = widestShrinkable(shrunk, floors);
+    if (target === -1) break;
+    shrunk[target] = shrunk[target] - 1;
+    remaining -= 1;
+  }
+  return shrunk;
+};
+var resolveColumnWidths = ({
+  columns,
+  rows,
+  gap,
+  maxWidth
+}) => {
+  const widths = columns.map(
+    (column, index) => column.width ?? naturalWidth(
+      column,
+      rows.map((row) => row[index] ?? "")
+    )
+  );
+  const gaps = gap * Math.max(columns.length - 1, 0);
+  const excess = widths.reduce((total, width) => total + width, gaps) - maxWidth;
+  return excess > 0 ? shrinkToFit(
+    widths,
+    columns.map((column, index) => floorFor(column, widths[index])),
+    excess
+  ) : widths;
+};
+var FALLBACK_TERMINAL_WIDTH = 80;
+var justification = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+var cellText = (value) => String(value ?? "");
 var Table = ({
   data,
-  columns
-}) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-  /* @__PURE__ */ jsx(Box, { gap: 2, children: columns.map((col) => /* @__PURE__ */ jsx(Box, { width: col.width, minWidth: col.width, children: /* @__PURE__ */ jsx(Text, { bold: true, color: colors.muted, children: col.header }) }, col.key)) }),
-  data.map((row, i) => /* @__PURE__ */ jsx(Box, { gap: 2, children: columns.map((col) => /* @__PURE__ */ jsx(Box, { width: col.width, minWidth: col.width, children: /* @__PURE__ */ jsx(Text, { wrap: "truncate-end", children: String(row[col.key] ?? "") }) }, col.key)) }, i))
-] });
+  columns,
+  gap = 2,
+  maxWidth,
+  headerColor = colors.muted
+}) => {
+  const { stdout } = useStdout();
+  const rows = data.map(
+    (row) => columns.map((column) => cellText(row[column.key]))
+  );
+  const widths = resolveColumnWidths({
+    columns,
+    rows,
+    gap,
+    maxWidth: maxWidth ?? stdout?.columns ?? FALLBACK_TERMINAL_WIDTH
+  });
+  const cell = (column, index, content) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      width: widths[index],
+      flexShrink: 0,
+      flexGrow: 0,
+      justifyContent: justification[column.align ?? "left"],
+      children: content
+    },
+    column.key
+  );
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Box, { gap, children: columns.map(
+      (column, index) => cell(
+        column,
+        index,
+        /* @__PURE__ */ jsx(Text, { bold: true, color: headerColor, wrap: "truncate-end", children: column.header })
+      )
+    ) }),
+    rows.map((cells, rowIndex) => /* @__PURE__ */ jsx(Box, { gap, children: columns.map(
+      (column, index) => cell(
+        column,
+        index,
+        /* @__PURE__ */ jsx(Text, { wrap: column.overflow === "wrap" ? "wrap" : "truncate-end", children: cells[index] })
+      )
+    ) }, rowIndex))
+  ] });
+};
 var FooterHints = ({ hints }) => /* @__PURE__ */ jsx(Box, { columnGap: 2, rowGap: 0, flexWrap: "wrap", children: hints.map(([key, label]) => /* @__PURE__ */ jsxs(Box, { children: [
   /* @__PURE__ */ jsx(Text, { color: "white", children: key }),
   /* @__PURE__ */ jsx(Text, { dimColor: true, children: " " + label })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",
@@ -32,7 +32,8 @@
   "dependencies": {
     "@kud/glyphs": "0.1.1",
     "cli-spinners": "3.4.0",
-    "figures": "6.1.0"
+    "figures": "6.1.0",
+    "string-width": "8.2.2"
   },
   "devDependencies": {
     "@types/node": "22.20.1",