@kud/ink-ui 0.8.0 → 0.9.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type BannerProps = {
     title: string;
@@ -54,6 +54,38 @@ 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;
+    /** Accent colour for the border + title when focused. Defaults to the info token. */
+    color?: string;
+    /** When true the border brightens to `color` and the title gains a ● marker. */
+    focused?: boolean;
+    width?: number;
+    height?: number;
+    flexGrow?: number;
+    children: ReactNode;
+};
+declare const Panel: ({ title, color, focused, width, height, flexGrow, children, }: PanelProps) => React.JSX.Element;
+
+type ColumnsProps = {
+    /** Horizontal gap between columns (character cells). Defaults to 1. */
+    gap?: number;
+    children: ReactNode;
+};
+declare const Columns: ({ gap, children }: ColumnsProps) => React.JSX.Element;
+
 type SelectableRowProps = {
     active?: boolean;
     marker?: string;
@@ -248,4 +280,4 @@ declare const spacing: {
 };
 type Spacing = (typeof spacing)[keyof typeof 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 };
+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 };

package/dist/index.js

@@ -1,6 +1,6 @@
-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 React9, { createContext, useContext, useState, useEffect, useRef, useLayoutEffect } from 'react';
 import cliSpinners from 'cli-spinners';
 import { glyphs } from '@kud/glyphs';
 import { spawn } from 'child_process';
@@ -73,6 +73,55 @@ 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,
+  focused = false,
+  width,
+  height,
+  flexGrow,
+  children
+}) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    flexDirection: "column",
+    width,
+    height,
+    flexGrow,
+    borderStyle: "round",
+    borderColor: focused ? color : colors.muted,
+    overflow: "hidden",
+    children: [
+      title && /* @__PURE__ */ jsx(Text, { color: focused ? color : colors.muted, bold: true, children: focused ? `${title} \u25CF` : title }),
+      children
+    ]
+  }
+);
+var Columns = ({ gap = 1, children }) => /* @__PURE__ */ jsx(Box, { flexDirection: "row", gap, flexGrow: 1, children });
 var isTextValue2 = (value) => typeof value === "string" || typeof value === "number";
 var SelectableRow = ({
   active = false,
@@ -423,10 +472,10 @@ var OrderedListItem = ({ children, _index = 1 }) => /* @__PURE__ */ jsxs(Box, {
 ] });
 var OrderedListRoot = ({ children }) => {
   let n = 0;
-  const numbered = React8.Children.map(children, (child) => {
-    if (React8.isValidElement(child) && child.type === OrderedListItem) {
+  const numbered = React9.Children.map(children, (child) => {
+    if (React9.isValidElement(child) && child.type === OrderedListItem) {
       n += 1;
-      return React8.cloneElement(child, {
+      return React9.cloneElement(child, {
         _index: n
       });
     }
@@ -667,4 +716,4 @@ var notify = (message, options = {}) => {
   child.unref();
 };
 
-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 };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",