@kud/ink-ui 0.7.0 → 0.8.0

package/README.md

@@ -13,11 +13,18 @@
 
 ## Features
 
-- **Ten ready-made components** — Banner, Header, Badge, Spinner, Table, Tabs, FooterHints, LoadingScreen, KeyValue, and SelectableRow, pre-styled and ready to drop in
+- **25 ready-made components**, pre-styled and ready to drop in:
+  - **Inputs** — `TextInput`, `EmailInput` (domain completion), `PasswordInput` (masked), `ConfirmInput`
+  - **Lists** — `UnorderedList`, `OrderedList` (both nestable), `Table`
+  - **Selection & navigation** — `Select`, `MultiSelect`, `Tabs`, `Switch`, `Toggle`, `SelectableRow`
+  - **Status & feedback** — `Spinner`, `ProgressBar`, `StatusMessage`, `Alert`, `Badge`, `Toast`
+  - **Layout & chrome** — `Banner`, `Header`, `FooterHints`, `KeyValue`, `LoadingScreen`, `ScrollView`
+- **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
 - **Full TypeScript support** — ships compiled output with `.d.ts` declarations for every component and token type
 - **ESM only, zero config** — no runtime bundling step; just import and render
-- **Peer-dependency light** — only requires `ink ≥ 4` and `react ≥ 18`; `ink-spinner` is the sole production dependency
+- **Peer-dependency light** — only requires `ink ≥ 7` and `react ≥ 19`
 
 ## Install
 
@@ -50,6 +57,33 @@ const App = () => (
 render(<App />)
 ```
 
+Inputs report their value through `onChange`/`onSubmit`, and lists nest with a shape-distinct marker per level:
+
+```tsx
+import { Text } from "ink"
+import { EmailInput, PasswordInput, UnorderedList } from "@kud/ink-ui"
+
+const SignUp = () => (
+  <>
+    <EmailInput placeholder="you@example.com" onSubmit={setEmail} />
+    <PasswordInput placeholder="Password" onSubmit={setPassword} />
+    <UnorderedList>
+      <UnorderedList.Item>
+        <Text>Choose a plan</Text>
+        <UnorderedList>
+          <UnorderedList.Item>
+            <Text>Free</Text>
+          </UnorderedList.Item>
+          <UnorderedList.Item>
+            <Text>Pro</Text>
+          </UnorderedList.Item>
+        </UnorderedList>
+      </UnorderedList.Item>
+    </UnorderedList>
+  </>
+)
+```
+
 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

@@ -160,8 +160,9 @@ type ScrollViewProps = {
     lines: StyledLine[];
     showIndicator?: boolean;
     initialStart?: number;
+    isActive?: boolean;
 };
-declare const ScrollView: ({ lines, showIndicator, initialStart, }: ScrollViewProps) => React.JSX.Element;
+declare const ScrollView: ({ lines, showIndicator, initialStart, isActive, }: ScrollViewProps) => React.JSX.Element;
 
 type TabItem<T extends string = string> = {
     value: T;

package/dist/index.js

@@ -115,7 +115,10 @@ var Select = ({
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
     visible.map((option, i) => {
       const active = start + i === cursor;
-      return /* @__PURE__ */ jsx(SelectableRow, { active, children: /* @__PURE__ */ jsx(Text, { bold: active, color: active ? colors.accent : void 0, children: option.label }) }, option.value);
+      return /* @__PURE__ */ jsxs(SelectableRow, { active, children: [
+        /* @__PURE__ */ jsx(Text, { bold: active, color: active ? colors.info : void 0, children: option.label }),
+        active ? /* @__PURE__ */ jsx(Text, { color: colors.success, children: " \u2713" }) : null
+      ] }, option.value);
     }),
     options.length > count && /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  \u2026 ${options.length} total` })
   ] });
@@ -159,8 +162,8 @@ var MultiSelect = ({
       const active = start + i === cursor;
       const on = selected.has(option.value);
       return /* @__PURE__ */ jsxs(SelectableRow, { active, children: [
-        /* @__PURE__ */ jsx(Text, { color: on ? colors.success : void 0, children: on ? "\u25C9" : "\u25CB" }),
-        /* @__PURE__ */ jsx(Text, { bold: active, color: active ? colors.accent : void 0, children: " " + option.label })
+        /* @__PURE__ */ jsx(Text, { bold: active, color: active ? colors.info : void 0, children: option.label }),
+        on ? /* @__PURE__ */ jsx(Text, { color: colors.success, children: " \u2713" }) : null
       ] }, option.value);
     }),
     options.length > count && /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  \u2026 ${options.length} total` })
@@ -437,7 +440,8 @@ var OrderedList = Object.assign(OrderedListRoot, {
 var ScrollView = ({
   lines,
   showIndicator = true,
-  initialStart = 0
+  initialStart = 0,
+  isActive = true
 }) => {
   const ref = useRef(null);
   const [height, setHeight] = useState(1);
@@ -450,16 +454,19 @@ var ScrollView = ({
   });
   const maxStart = Math.max(0, lines.length - height);
   const clamped = Math.min(start, maxStart);
-  useInput((input, key) => {
-    if (key.downArrow || input === "j")
-      setStart((s) => Math.min(maxStart, s + 1));
-    if (key.upArrow || input === "k") setStart((s) => Math.max(0, s - 1));
-    if (input === " " || key.pageDown || input === "f")
-      setStart((s) => Math.min(maxStart, s + height));
-    if (key.pageUp || input === "b") setStart((s) => Math.max(0, s - height));
-    if (input === "g") setStart(0);
-    if (input === "G") setStart(maxStart);
-  });
+  useInput(
+    (input, key) => {
+      if (key.downArrow || input === "j")
+        setStart((s) => Math.min(maxStart, s + 1));
+      if (key.upArrow || input === "k") setStart((s) => Math.max(0, s - 1));
+      if (input === " " || key.pageDown || input === "f")
+        setStart((s) => Math.min(maxStart, s + height));
+      if (key.pageUp || input === "b") setStart((s) => Math.max(0, s - height));
+      if (input === "g") setStart(0);
+      if (input === "G") setStart(maxStart);
+    },
+    { isActive }
+  );
   const visible = lines.slice(clamped, clamped + height);
   const hasMore = lines.length > height;
   const atEnd = clamped >= maxStart;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",
@@ -20,6 +20,7 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
+    "demo": "tsx src/demo/index.tsx",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest"
@@ -41,6 +42,7 @@
     "react": "19.2.7",
     "react-devtools-core": "7.0.1",
     "tsup": "8.5.1",
+    "tsx": "4.23.1",
     "typescript": "5.9.3",
     "vitest": "4.1.10"
   },