@kud/ink-ui 0.9.0 → 0.10.1

package/README.md

@@ -13,12 +13,12 @@
 
 ## Features
 
-- **25 ready-made components**, pre-styled and ready to drop in:
+- **27 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`
+  - **Layout & chrome** — `Banner`, `Header`, `Panel` (bordered pane, optional focus state), `Columns`, `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

package/dist/index.d.ts

@@ -54,17 +54,6 @@ type LoadingScreenProps = {
 };
 declare const LoadingScreen: ({ label }: LoadingScreenProps) => React.JSX.Element;
 
-type ScreenProps = {
-    children: ReactNode;
-    /**
-     * Enter the terminal's alternate buffer so the app owns the whole screen and
-     * the previous scrollback is restored on exit. Defaults to true. Set false to
-     * render full-height inline instead.
-     */
-    altScreen?: boolean;
-};
-declare const Screen: ({ children, altScreen }: ScreenProps) => React.JSX.Element;
-
 type PanelProps = {
     /** Optional title shown in the panel's header row. */
     title?: string;
@@ -280,4 +269,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, Screen, 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 };
+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, UnorderedList, colors, getIconMode, notify, setIconMode, spacing };

package/dist/index.js

@@ -1,6 +1,6 @@
-import { Box, Text, useStdout, useInput, measureElement } from 'ink';
+import { Box, Text, useInput, measureElement } from 'ink';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React9, { createContext, useContext, useState, useEffect, useRef, useLayoutEffect } from 'react';
+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';
@@ -63,7 +63,7 @@ var Table = ({
   /* @__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))
 ] });
-var FooterHints = ({ hints }) => /* @__PURE__ */ jsx(Box, { gap: 2, flexWrap: "wrap", children: hints.map(([key, label]) => /* @__PURE__ */ jsxs(Box, { children: [
+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 })
 ] }, key)) });
@@ -73,30 +73,6 @@ var KeyValue = ({ label, value, labelWidth = 12 }) => /* @__PURE__ */ jsxs(Box,
   isTextValue(value) ? /* @__PURE__ */ jsx(Text, { children: value }) : value
 ] });
 var LoadingScreen = ({ label }) => /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Spinner, { label }) });
-var ENTER_ALT = "\x1B[?1049h";
-var LEAVE_ALT = "\x1B[?1049l";
-var Screen = ({ children, altScreen = true }) => {
-  const { stdout } = useStdout();
-  const [size, setSize] = useState({
-    columns: stdout.columns || 80,
-    rows: stdout.rows || 24
-  });
-  useEffect(() => {
-    const restore = () => {
-      if (altScreen) stdout.write(LEAVE_ALT);
-    };
-    if (altScreen) stdout.write(ENTER_ALT);
-    const onResize = () => setSize({ columns: stdout.columns || 80, rows: stdout.rows || 24 });
-    stdout.on("resize", onResize);
-    process.on("exit", restore);
-    return () => {
-      stdout.off("resize", onResize);
-      process.off("exit", restore);
-      restore();
-    };
-  }, [stdout, altScreen]);
-  return /* @__PURE__ */ jsx(Box, { width: size.columns, height: size.rows, flexDirection: "column", children });
-};
 var Panel = ({
   title,
   color = colors.info,
@@ -472,10 +448,10 @@ var OrderedListItem = ({ children, _index = 1 }) => /* @__PURE__ */ jsxs(Box, {
 ] });
 var OrderedListRoot = ({ children }) => {
   let n = 0;
-  const numbered = React9.Children.map(children, (child) => {
-    if (React9.isValidElement(child) && child.type === OrderedListItem) {
+  const numbered = React8.Children.map(children, (child) => {
+    if (React8.isValidElement(child) && child.type === OrderedListItem) {
       n += 1;
-      return React9.cloneElement(child, {
+      return React8.cloneElement(child, {
         _index: n
       });
     }
@@ -716,4 +692,4 @@ var notify = (message, options = {}) => {
   child.unref();
 };
 
-export { Alert, Badge, Banner, Columns, ConfirmInput, EmailInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, OrderedList, Panel, PasswordInput, ProgressBar, Screen, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Switch, Table, Tabs, TextInput, Toast, Toggle, UnorderedList, colors, getIconMode, notify, setIconMode, spacing };
+export { Alert, Badge, Banner, Columns, ConfirmInput, EmailInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, OrderedList, Panel, 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.9.0",
+  "version": "0.10.1",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",