@kud/ink-ui 0.8.0 → 0.10.0

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type BannerProps = {
     title: string;
@@ -54,6 +54,27 @@ type LoadingScreenProps = {
 };
 declare const LoadingScreen: ({ label }: LoadingScreenProps) => 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 +269,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, 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

@@ -73,6 +73,31 @@ 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 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,
@@ -667,4 +692,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, 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.10.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",