@kud/ink-ui 0.14.1 → 0.15.0

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.1",
+  "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",