@kud/ink-ui 0.6.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

@@ -94,6 +94,25 @@ type TextInputProps = {
 };
 declare const TextInput: ({ placeholder, defaultValue, onChange, onSubmit, isDisabled, }: TextInputProps) => React.JSX.Element;
 
+type EmailInputProps = {
+    placeholder?: string;
+    defaultValue?: string;
+    domains?: string[];
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    isDisabled?: boolean;
+};
+declare const EmailInput: ({ placeholder, defaultValue, domains, onChange, onSubmit, isDisabled, }: EmailInputProps) => React.JSX.Element;
+
+type PasswordInputProps = {
+    placeholder?: string;
+    mask?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    isDisabled?: boolean;
+};
+declare const PasswordInput: ({ placeholder, mask, onChange, onSubmit, isDisabled, }: PasswordInputProps) => React.JSX.Element;
+
 type ConfirmInputProps = {
     defaultChoice?: "confirm" | "cancel";
     onConfirm?: () => void;
@@ -102,6 +121,27 @@ type ConfirmInputProps = {
 };
 declare const ConfirmInput: ({ defaultChoice, onConfirm, onCancel, isDisabled, }: ConfirmInputProps) => React.JSX.Element;
 
+type ItemProps$1 = {
+    children: React.ReactNode;
+};
+type UnorderedListProps = {
+    children: React.ReactNode;
+};
+declare const UnorderedList: (({ children }: UnorderedListProps) => React.JSX.Element) & {
+    Item: ({ children }: ItemProps$1) => React.JSX.Element;
+};
+
+type ItemProps = {
+    children: React.ReactNode;
+    _index?: number;
+};
+type OrderedListProps = {
+    children: React.ReactNode;
+};
+declare const OrderedList: (({ children }: OrderedListProps) => React.JSX.Element) & {
+    Item: ({ children, _index }: ItemProps) => React.JSX.Element;
+};
+
 type Span = {
     text: string;
     color?: string;
@@ -120,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;
@@ -207,4 +248,4 @@ declare const spacing: {
 };
 type Spacing = (typeof spacing)[keyof typeof spacing];
 
-export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, ConfirmInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, 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, colors, getIconMode, notify, setIconMode, spacing };
+export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, ConfirmInput, EmailInput, FooterHints, Header, type Hint, type IconMode, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, OrderedList, 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, UnorderedList, colors, getIconMode, notify, setIconMode, spacing };

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Box, Text, useInput, measureElement } from 'ink';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useRef, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React8, { createContext, useContext, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import cliSpinners from 'cli-spinners';
 import { glyphs } from '@kud/glyphs';
 import { spawn } from 'child_process';
@@ -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` })
@@ -223,6 +226,148 @@ var TextInput = ({
     after
   ] });
 };
+var defaultDomains = [
+  "gmail.com",
+  "outlook.com",
+  "hotmail.com",
+  "yahoo.com",
+  "icloud.com",
+  "proton.me"
+];
+var EmailInput = ({
+  placeholder = "",
+  defaultValue = "",
+  domains = defaultDomains,
+  onChange,
+  onSubmit,
+  isDisabled = false
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [cursor, setCursor] = useState(defaultValue.length);
+  const at = value.indexOf("@");
+  const domainFragment = at === -1 ? "" : value.slice(at + 1);
+  const match = at !== -1 && domainFragment.length > 0 ? domains.find(
+    (d) => d.startsWith(domainFragment) && d !== domainFragment
+  ) : void 0;
+  const suggestion = match ? match.slice(domainFragment.length) : "";
+  const showSuggestion = suggestion.length > 0 && cursor === value.length;
+  const update = (nextValue, nextCursor) => {
+    setValue(nextValue);
+    setCursor(nextCursor);
+    onChange?.(nextValue);
+  };
+  useInput(
+    (input, key) => {
+      if (key.return) {
+        onSubmit?.(value);
+        return;
+      }
+      if (key.tab && showSuggestion) {
+        update(value + suggestion, value.length + suggestion.length);
+        return;
+      }
+      if (key.leftArrow) {
+        setCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.rightArrow) {
+        setCursor((c) => Math.min(value.length, c + 1));
+        return;
+      }
+      if (key.backspace || key.delete) {
+        if (cursor === 0) return;
+        update(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1);
+        return;
+      }
+      if (input && !key.ctrl && !key.meta && !key.tab) {
+        update(
+          value.slice(0, cursor) + input + value.slice(cursor),
+          cursor + input.length
+        );
+      }
+    },
+    { isActive: !isDisabled }
+  );
+  if (value.length === 0) {
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: " " }),
+      placeholder ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: placeholder }) : null
+    ] });
+  }
+  if (showSuggestion) {
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      value,
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: suggestion.slice(0, 1) }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: suggestion.slice(1) })
+    ] });
+  }
+  const before = value.slice(0, cursor);
+  const atChar = value.slice(cursor, cursor + 1) || " ";
+  const after = value.slice(cursor + 1);
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    before,
+    /* @__PURE__ */ jsx(Text, { inverse: true, children: atChar }),
+    after
+  ] });
+};
+var PasswordInput = ({
+  placeholder = "",
+  mask = "*",
+  onChange,
+  onSubmit,
+  isDisabled = false
+}) => {
+  const [value, setValue] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const update = (nextValue, nextCursor) => {
+    setValue(nextValue);
+    setCursor(nextCursor);
+    onChange?.(nextValue);
+  };
+  useInput(
+    (input, key) => {
+      if (key.return) {
+        onSubmit?.(value);
+        return;
+      }
+      if (key.leftArrow) {
+        setCursor((c) => Math.max(0, c - 1));
+        return;
+      }
+      if (key.rightArrow) {
+        setCursor((c) => Math.min(value.length, c + 1));
+        return;
+      }
+      if (key.backspace || key.delete) {
+        if (cursor === 0) return;
+        update(value.slice(0, cursor - 1) + value.slice(cursor), cursor - 1);
+        return;
+      }
+      if (input && !key.ctrl && !key.meta && !key.tab) {
+        update(
+          value.slice(0, cursor) + input + value.slice(cursor),
+          cursor + input.length
+        );
+      }
+    },
+    { isActive: !isDisabled }
+  );
+  if (value.length === 0) {
+    return /* @__PURE__ */ jsxs(Text, { children: [
+      /* @__PURE__ */ jsx(Text, { inverse: true, children: " " }),
+      placeholder ? /* @__PURE__ */ jsx(Text, { dimColor: true, children: placeholder }) : null
+    ] });
+  }
+  const masked = mask.repeat(value.length);
+  const before = masked.slice(0, cursor);
+  const at = masked.slice(cursor, cursor + 1) || " ";
+  const after = masked.slice(cursor + 1);
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    before,
+    /* @__PURE__ */ jsx(Text, { inverse: true, children: at }),
+    after
+  ] });
+};
 var ConfirmInput = ({
   defaultChoice = "confirm",
   onConfirm,
@@ -249,10 +394,54 @@ var ConfirmInput = ({
   const hint = defaultChoice === "confirm" ? "(Y/n)" : "(y/N)";
   return /* @__PURE__ */ jsx(Text, { dimColor: true, children: hint });
 };
+var markers = ["\u25CF", "\u25CB", "\u25AA", "\u25AB"];
+var DepthContext = createContext(0);
+var UnorderedListItem = ({ children }) => {
+  const depth = useContext(DepthContext);
+  const marker = markers[Math.max(0, depth - 1) % markers.length];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+    /* @__PURE__ */ jsxs(Text, { children: [
+      marker,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx(Box, { flexDirection: "column", children })
+  ] });
+};
+var UnorderedListRoot = ({ children }) => {
+  const depth = useContext(DepthContext);
+  return /* @__PURE__ */ jsx(DepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(Box, { flexDirection: "column", children }) });
+};
+var UnorderedList = Object.assign(UnorderedListRoot, {
+  Item: UnorderedListItem
+});
+var OrderedListItem = ({ children, _index = 1 }) => /* @__PURE__ */ jsxs(Box, { flexDirection: "row", children: [
+  /* @__PURE__ */ jsxs(Text, { children: [
+    _index,
+    ". "
+  ] }),
+  /* @__PURE__ */ jsx(Box, { flexDirection: "column", children })
+] });
+var OrderedListRoot = ({ children }) => {
+  let n = 0;
+  const numbered = React8.Children.map(children, (child) => {
+    if (React8.isValidElement(child) && child.type === OrderedListItem) {
+      n += 1;
+      return React8.cloneElement(child, {
+        _index: n
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsx(Box, { flexDirection: "column", children: numbered });
+};
+var OrderedList = Object.assign(OrderedListRoot, {
+  Item: OrderedListItem
+});
 var ScrollView = ({
   lines,
   showIndicator = true,
-  initialStart = 0
+  initialStart = 0,
+  isActive = true
 }) => {
   const ref = useRef(null);
   const [height, setHeight] = useState(1);
@@ -265,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;
@@ -475,4 +667,4 @@ var notify = (message, options = {}) => {
   child.unref();
 };
 
-export { Alert, Badge, Banner, ConfirmInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Switch, Table, Tabs, TextInput, Toast, Toggle, colors, getIconMode, notify, setIconMode, spacing };
+export { Alert, Badge, Banner, ConfirmInput, EmailInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, OrderedList, PasswordInput, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Switch, Table, Tabs, TextInput, Toast, Toggle, UnorderedList, colors, getIconMode, notify, setIconMode, spacing };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.6.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"
   },