@kud/ink-ui 0.1.0 → 0.3.0

package/README.md

@@ -1,284 +1,74 @@
 <div align="center">
 
-[![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
-[![Node.js](https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/)
-[![npm](https://img.shields.io/badge/npm-%40kud%2Fink--ui-CB3837?style=flat-square&logo=npm&logoColor=white)](https://www.npmjs.com/package/@kud/ink-ui)
-[![MIT](https://img.shields.io/badge/licence-MIT-22C55E?style=flat-square)](./LICENSE)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
+![Node.js](https://img.shields.io/badge/Node.js-339933?style=flat-square&logo=node.js&logoColor=white)
+![npm](https://img.shields.io/npm/v/%40kud%2Fink-ui?style=flat-square&color=CB3837)
+![MIT](https://img.shields.io/badge/licence-MIT-22C55E?style=flat-square)
 
-**Opinionated design-system library for Ink CLIs — pre-styled components and design tokens for a consistent terminal UI.**
+**React component library for Ink CLIs**
 
-[Features](#-features) • [Quick Start](#-quick-start) • [Components](#-components) • [Tokens](#-design-tokens) • [Development](#-development)
+<a href="https://kud.io/projects/ink-ui">Website</a> · <a href="https://kud.io/projects/ink-ui/docs">Documentation</a>
 
 </div>
 
----
+## Features
 
-## ✨ Features
+- **Ten ready-made components** — Banner, Header, Badge, Spinner, Table, Tabs, FooterHints, LoadingScreen, KeyValue, and SelectableRow, pre-styled and ready to drop in
+- **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
 
-- 🧱 **Five ready-made components** — Banner, Header, Badge, Spinner, and Table, all pre-styled and immediately usable
-- 🎨 **Design tokens included** — a shared colour palette and spacing scale to keep every screen consistent
-- 🟠 **Accent-driven style** — a warm `#FF8C00` accent colour gives your CLI a distinctive, coherent identity
-- ⚡ **ESM only, zero config** — ships compiled TypeScript with full type definitions; just import and render
-- 🔒 **Peer-dep friendly** — works with any Ink ≥ 4 and React ≥ 18 setup, no version lock-in
-- 🧩 **Composable** — every component accepts standard Ink primitives so you can mix them with your own layouts freely
-- 🏷 **Typed throughout** — exported types (`BadgeVariant`, `Column`, `Color`, `Spacing`) make props self-documenting in any IDE
-
----
-
-## 🚀 Quick Start
-
-### Install
+## Install
 
 ```sh
 npm install @kud/ink-ui
 ```
 
-`ink` and `react` are peer dependencies — add them if you haven't already:
+`ink` and `react` are peer dependencies and must be installed separately:
 
 ```sh
 npm install ink react
 ```
 
-### Usage
+## Usage
 
 ```tsx
 import React from "react"
 import { render } from "ink"
-import { Banner, Header, Badge, Spinner, Table } from "@kud/ink-ui"
+import { Banner, Header, Badge, Spinner, colors } from "@kud/ink-ui"
 
 const App = () => (
   <>
-    <Banner title="My CLI" subtitle="v1.0.0" icon="◆" />
-
-    <Header subtitle="Fetching packages…">Dependencies</Header>
-
-    <Badge variant="success">installed</Badge>
-    <Badge variant="warning">outdated</Badge>
-
+    <Banner title="my-tool" subtitle="v1.0.0" />
+    <Header subtitle="Synchronising files…">Status</Header>
+    <Badge variant="success">done</Badge>
     <Spinner label="Loading…" />
-
-    <Table
-      columns={[
-        { key: "name", header: "Package", width: 20 },
-        { key: "version", header: "Version", width: 10 },
-      ]}
-      data={[
-        { name: "ink", version: "5.0.0" },
-        { name: "react", version: "18.3.1" },
-      ]}
-    />
   </>
 )
 
 render(<App />)
 ```
 
-Expected output (approximate terminal rendering):
-
-```
-◆ My CLI v1.0.0
-
-Dependencies
-Fetching packages…
-
-[installed] [outdated]
-
-⠋ Loading…
-
-Package              Version
-ink                  5.0.0
-react                18.3.1
-```
-
----
-
-## 🧩 Components
-
-### `<Banner>`
-
-Full-width title block — ideal as an app header at the top of a screen.
-
-| Prop       | Type     | Default | Description                              |
-| ---------- | -------- | ------- | ---------------------------------------- |
-| `title`    | `string` | —       | Bold title text                          |
-| `subtitle` | `string` | —       | Optional dimmed subtitle rendered inline |
-| `icon`     | `string` | `"◆"`   | Leading icon rendered in accent colour   |
-
-```tsx
-<Banner title="Deploy Tool" subtitle="production" icon="🚀" />
-```
-
----
-
-### `<Header>`
-
-Bold, underlined section heading. Use it to separate logical groups within a screen.
-
-| Prop       | Type     | Default | Description                                |
-| ---------- | -------- | ------- | ------------------------------------------ |
-| `children` | `string` | —       | The heading text                           |
-| `subtitle` | `string` | —       | Optional dimmed subtitle below the heading |
-
-```tsx
-<Header subtitle="3 items">Results</Header>
-```
-
----
-
-### `<Badge>`
-
-Inline `[label]` tag with semantic colour variants.
-
-| Prop       | Type           | Default  | Description                          |
-| ---------- | -------------- | -------- | ------------------------------------ |
-| `children` | `string`       | —        | Label text displayed inside brackets |
-| `variant`  | `BadgeVariant` | `"info"` | Colour variant (see table below)     |
-
-| Variant   | Colour |
-| --------- | ------ |
-| `success` | green  |
-| `error`   | red    |
-| `warning` | yellow |
-| `info`    | cyan   |
-
-```tsx
-<Badge variant="error">failed</Badge>
-```
-
----
-
-### `<Spinner>`
-
-Animated dots spinner in accent colour, with an optional dimmed label.
-
-| Prop    | Type     | Default | Description                               |
-| ------- | -------- | ------- | ----------------------------------------- |
-| `label` | `string` | —       | Optional text rendered beside the spinner |
-
-```tsx
-<Spinner label="Building…" />
-```
-
----
-
-### `<Table>`
-
-Structured data grid with bold muted column headers. Supports optional fixed column widths and truncates long values cleanly.
-
-| Prop      | Type          | Description                    |
-| --------- | ------------- | ------------------------------ |
-| `data`    | `T[]`         | Array of row objects           |
-| `columns` | `Column<T>[]` | Column definitions (see below) |
-
-**`Column<T>` shape:**
-
-| Field    | Type      | Description                        |
-| -------- | --------- | ---------------------------------- |
-| `key`    | `keyof T` | Object key to read for this column |
-| `header` | `string`  | Column heading text                |
-| `width`  | `number`  | Optional fixed character width     |
-
-```tsx
-<Table
-  columns={[
-    { key: "name", header: "Name", width: 16 },
-    { key: "status", header: "Status" },
-  ]}
-  data={[
-    { name: "api", status: "ok" },
-    { name: "db", status: "degraded" },
-  ]}
-/>
-```
-
----
-
-## 🎨 Design Tokens
-
-Import `colors` and `spacing` to keep your own components aligned with the design system.
+All components accept only the props they need — no theme provider or context required. Design tokens are plain objects:
 
 ```ts
 import { colors, spacing } from "@kud/ink-ui"
-```
-
-### Colours
-
-| Token            | Value     | Semantic use                       |
-| ---------------- | --------- | ---------------------------------- |
-| `colors.accent`  | `#FF8C00` | Primary highlight, icons, spinners |
-| `colors.muted`   | `gray`    | Dimmed text, table headers         |
-| `colors.success` | `green`   | Positive states                    |
-| `colors.error`   | `red`     | Failures and errors                |
-| `colors.warning` | `yellow`  | Caution states                     |
-| `colors.info`    | `cyan`    | Neutral informational              |
-
-### Spacing
-
-| Token        | Value | Description                        |
-| ------------ | ----- | ---------------------------------- |
-| `spacing.xs` | `1`   | Tight gap between inline elements  |
-| `spacing.sm` | `2`   | Small margin between grouped items |
-| `spacing.md` | `3`   | Standard section margin            |
-| `spacing.lg` | `4`   | Large gap between major sections   |
 
----
-
-## 🔧 Development
-
-### Project structure
-
-```
-ink-ui/
-├── src/
-│   ├── components/
-│   │   ├── Badge.tsx
-│   │   ├── Banner.tsx
-│   │   ├── Header.tsx
-│   │   ├── Spinner.tsx
-│   │   └── Table.tsx
-│   ├── index.ts        # public API
-│   └── tokens.ts       # colours + spacing
-├── dist/               # compiled output (git-ignored)
-├── tsconfig.json
-└── package.json
+// colors.accent   → "#FF8C00"
+// colors.success  → "green"
+// spacing.md      → 3
 ```
 
-### Scripts
-
-| Script  | Command       | Description                          |
-| ------- | ------------- | ------------------------------------ |
-| `build` | `tsc`         | Compile TypeScript to `dist/`        |
-| `dev`   | `tsc --watch` | Watch mode — recompile on every save |
-
-### Local setup
+## Development
 
 ```sh
 git clone https://github.com/kud/ink-ui.git
 cd ink-ui
 npm install
-npm run build
+npm run dev
 ```
 
-To develop against a local project, link the package:
-
-```sh
-npm link
-cd ../your-project
-npm link @kud/ink-ui
-```
-
----
-
-## 🏗 Tech Stack
-
-| Technology                                                 | Purpose                                |
-| ---------------------------------------------------------- | -------------------------------------- |
-| [TypeScript](https://www.typescriptlang.org/)              | Strict typing, declaration file output |
-| [Ink](https://github.com/vadimdemedes/ink)                 | React renderer for the terminal        |
-| [React](https://react.dev/)                                | Component model and JSX                |
-| [ink-spinner](https://github.com/vadimdemedes/ink-spinner) | Animated spinner primitive             |
-| ESM                                                        | Modern module format, no CommonJS      |
-
----
+`npm run build` compiles TypeScript to `dist/`. `npm run dev` runs the compiler in watch mode.
 
-MIT © [kud](https://github.com/kud) — Made with ❤️
+📚 **Full documentation → [ink-ui/docs](https://kud.io/projects/ink-ui/docs)**

package/dist/index.d.ts

@@ -1,10 +1,189 @@
-export { Banner } from "./components/Banner.js";
-export { Badge } from "./components/Badge.js";
-export type { BadgeVariant } from "./components/Badge.js";
-export { Header } from "./components/Header.js";
-export { Spinner } from "./components/Spinner.js";
-export { Table } from "./components/Table.js";
-export type { Column } from "./components/Table.js";
-export { colors, spacing } from "./tokens.js";
-export type { Color, Spacing } from "./tokens.js";
-//# sourceMappingURL=index.d.ts.map
+import React from 'react';
+
+type BannerProps = {
+    title: string;
+    subtitle?: string;
+    icon?: string;
+};
+declare const Banner: ({ title, subtitle, icon }: BannerProps) => React.JSX.Element;
+
+type BadgeVariant = "success" | "error" | "warning" | "info";
+type BadgeProps = {
+    children: string;
+    variant?: BadgeVariant;
+};
+declare const Badge: ({ children, variant }: BadgeProps) => React.JSX.Element;
+
+type HeaderProps = {
+    children: string;
+    subtitle?: string;
+};
+declare const Header: ({ children, subtitle }: HeaderProps) => React.JSX.Element;
+
+type SpinnerProps = {
+    label?: string;
+};
+declare const Spinner: ({ label }: SpinnerProps) => React.JSX.Element;
+
+type Column<T extends Record<string, unknown>> = {
+    key: keyof T & string;
+    header: string;
+    width?: number;
+};
+type TableProps<T extends Record<string, unknown>> = {
+    data: T[];
+    columns: Column<T>[];
+};
+declare const Table: <T extends Record<string, unknown>>({ data, columns, }: TableProps<T>) => React.JSX.Element;
+
+type Hint = [key: string, label: string];
+type FooterHintsProps = {
+    hints: Hint[];
+};
+declare const FooterHints: ({ hints }: FooterHintsProps) => React.JSX.Element;
+
+type KeyValueProps = {
+    label: string;
+    value: React.ReactNode;
+    labelWidth?: number;
+};
+declare const KeyValue: ({ label, value, labelWidth }: KeyValueProps) => React.JSX.Element;
+
+type LoadingScreenProps = {
+    label: string;
+};
+declare const LoadingScreen: ({ label }: LoadingScreenProps) => React.JSX.Element;
+
+type SelectableRowProps = {
+    active?: boolean;
+    marker?: string;
+    children: React.ReactNode;
+};
+declare const SelectableRow: ({ active, marker, children, }: SelectableRowProps) => React.JSX.Element;
+
+type SelectOption<T extends string = string> = {
+    label: string;
+    value: T;
+};
+type SelectProps<T extends string> = {
+    options: SelectOption<T>[];
+    onChange?: (value: T) => void;
+    onSubmit?: (value: T) => void;
+    defaultValue?: T;
+    isDisabled?: boolean;
+    visibleOptionCount?: number;
+};
+declare const Select: <T extends string>({ options, onChange, onSubmit, defaultValue, isDisabled, visibleOptionCount, }: SelectProps<T>) => React.JSX.Element;
+
+type MultiSelectProps<T extends string> = {
+    options: SelectOption<T>[];
+    onChange?: (values: T[]) => void;
+    onSubmit?: (values: T[]) => void;
+    defaultValue?: T[];
+    isDisabled?: boolean;
+    visibleOptionCount?: number;
+};
+declare const MultiSelect: <T extends string>({ options, onChange, onSubmit, defaultValue, isDisabled, visibleOptionCount, }: MultiSelectProps<T>) => React.JSX.Element;
+
+type TextInputProps = {
+    placeholder?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    isDisabled?: boolean;
+};
+declare const TextInput: ({ placeholder, defaultValue, onChange, onSubmit, isDisabled, }: TextInputProps) => React.JSX.Element;
+
+type ConfirmInputProps = {
+    defaultChoice?: "confirm" | "cancel";
+    onConfirm?: () => void;
+    onCancel?: () => void;
+    isDisabled?: boolean;
+};
+declare const ConfirmInput: ({ defaultChoice, onConfirm, onCancel, isDisabled, }: ConfirmInputProps) => React.JSX.Element;
+
+type Span = {
+    text: string;
+    color?: string;
+    bold?: boolean;
+    dim?: boolean;
+    italic?: boolean;
+};
+type StyledLine = {
+    text: string;
+    color?: string;
+    bold?: boolean;
+    dim?: boolean;
+    spans?: Span[];
+};
+type ScrollViewProps = {
+    lines: StyledLine[];
+    showIndicator?: boolean;
+};
+declare const ScrollView: ({ lines, showIndicator, }: ScrollViewProps) => React.JSX.Element;
+
+type TabItem<T extends string = string> = {
+    value: T;
+    label: string;
+    count?: number;
+};
+type TabsProps<T extends string> = {
+    active: T;
+    items: TabItem<T>[];
+};
+declare const Tabs: <T extends string>({ active, items }: TabsProps<T>) => React.JSX.Element;
+
+type ProgressBarProps = {
+    value: number;
+    width?: number;
+};
+declare const ProgressBar: ({ value, width }: ProgressBarProps) => React.JSX.Element;
+
+type StatusVariant = "success" | "error" | "warning" | "info";
+
+type StatusMessageProps = {
+    variant?: StatusVariant;
+    children: React.ReactNode;
+};
+declare const StatusMessage: ({ variant, children, }: StatusMessageProps) => React.JSX.Element;
+
+type AlertProps = {
+    variant?: StatusVariant;
+    title?: string;
+    children: React.ReactNode;
+};
+declare const Alert: ({ variant, title, children }: AlertProps) => React.JSX.Element;
+
+type ToastProps = {
+    message: string;
+    variant?: StatusVariant;
+    duration?: number;
+    onDone?: () => void;
+};
+declare const Toast: ({ message, variant, duration, onDone, }: ToastProps) => React.JSX.Element | null;
+
+type NotifyOptions = {
+    title?: string;
+    subtitle?: string;
+    sound?: boolean | string;
+};
+declare const notify: (message: string, options?: NotifyOptions) => void;
+
+declare const colors: {
+    readonly accent: "#FF8C00";
+    readonly muted: "gray";
+    readonly success: "green";
+    readonly error: "red";
+    readonly warning: "yellow";
+    readonly info: "cyan";
+};
+type Color = (typeof colors)[keyof typeof colors];
+declare const spacing: {
+    readonly xs: 1;
+    readonly sm: 2;
+    readonly md: 3;
+    readonly lg: 4;
+};
+type Spacing = (typeof spacing)[keyof typeof spacing];
+
+export { Alert, Badge, type BadgeVariant, Banner, type Color, type Column, ConfirmInput, FooterHints, Header, type Hint, KeyValue, LoadingScreen, MultiSelect, type NotifyOptions, ProgressBar, ScrollView, Select, type SelectOption, SelectableRow, type Spacing, type Span, Spinner, StatusMessage, type StatusVariant, type StyledLine, type TabItem, Table, Tabs, TextInput, Toast, colors, notify, spacing };

package/dist/index.js

@@ -1,7 +1,414 @@
-export { Banner } from "./components/Banner.js";
-export { Badge } from "./components/Badge.js";
-export { Header } from "./components/Header.js";
-export { Spinner } from "./components/Spinner.js";
-export { Table } from "./components/Table.js";
-export { colors, spacing } from "./tokens.js";
-//# sourceMappingURL=index.js.map
+import { Box, Text, useInput, measureElement } from 'ink';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useRef, useLayoutEffect } from 'react';
+import cliSpinners from 'cli-spinners';
+import { spawn } from 'child_process';
+
+// src/components/Banner.tsx
+
+// src/tokens.ts
+var colors = {
+  accent: "#FF8C00",
+  muted: "gray",
+  success: "green",
+  error: "red",
+  warning: "yellow",
+  info: "cyan"
+};
+var spacing = {
+  xs: 1,
+  sm: 2,
+  md: 3,
+  lg: 4
+};
+var Banner = ({ title, subtitle, icon = "\u25C6" }) => /* @__PURE__ */ jsxs(Box, { gap: 1, marginBottom: 1, children: [
+  /* @__PURE__ */ jsx(Text, { color: colors.accent, children: icon }),
+  /* @__PURE__ */ jsx(Text, { bold: true, children: title }),
+  subtitle && /* @__PURE__ */ jsx(Text, { dimColor: true, children: subtitle })
+] });
+var variantColor = {
+  success: colors.success,
+  error: colors.error,
+  warning: colors.warning,
+  info: colors.info
+};
+var Badge = ({ children, variant = "info" }) => /* @__PURE__ */ jsxs(Text, { color: variantColor[variant], children: [
+  "[",
+  children,
+  "]"
+] });
+var Header = ({ children, subtitle }) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [
+  /* @__PURE__ */ jsx(Text, { bold: true, underline: true, children }),
+  subtitle && /* @__PURE__ */ jsx(Text, { dimColor: true, children: subtitle })
+] });
+var dots = cliSpinners.dots;
+var Spinner = ({ label }) => {
+  const [frame, setFrame] = useState(0);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame((prev) => (prev + 1) % dots.frames.length);
+    }, dots.interval);
+    return () => clearInterval(timer);
+  }, []);
+  return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Text, { color: colors.accent, children: dots.frames[frame] }),
+    label && /* @__PURE__ */ jsx(Text, { dimColor: true, children: label })
+  ] });
+};
+var Table = ({
+  data,
+  columns
+}) => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+  /* @__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: [
+  /* @__PURE__ */ jsx(Text, { color: "white", children: key }),
+  /* @__PURE__ */ jsx(Text, { dimColor: true, children: " " + label })
+] }, key)) });
+var isTextValue = (value) => typeof value === "string" || typeof value === "number";
+var KeyValue = ({ label, value, labelWidth = 12 }) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Box, { width: labelWidth, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: label }) }),
+  isTextValue(value) ? /* @__PURE__ */ jsx(Text, { children: value }) : value
+] });
+var LoadingScreen = ({ label }) => /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Spinner, { label }) });
+var isTextValue2 = (value) => typeof value === "string" || typeof value === "number";
+var SelectableRow = ({
+  active = false,
+  marker = "\u276F",
+  children
+}) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Text, { color: colors.info, children: active ? `  ${marker} ` : "    " }),
+  isTextValue2(children) ? /* @__PURE__ */ jsx(Text, { bold: active, children }) : children
+] });
+var windowStart = (cursor, total, count) => {
+  if (total <= count) return 0;
+  return Math.max(0, Math.min(cursor - Math.floor(count / 2), total - count));
+};
+var Select = ({
+  options,
+  onChange,
+  onSubmit,
+  defaultValue,
+  isDisabled = false,
+  visibleOptionCount
+}) => {
+  const initial = options.findIndex((o) => o.value === defaultValue);
+  const [cursor, setCursor] = useState(initial === -1 ? 0 : initial);
+  const move = (delta) => {
+    const next = (cursor + delta + options.length) % options.length;
+    setCursor(next);
+    onChange?.(options[next].value);
+  };
+  useInput(
+    (_input, key) => {
+      if (key.upArrow) move(-1);
+      if (key.downArrow) move(1);
+      if (key.return) onSubmit?.(options[cursor].value);
+    },
+    { isActive: !isDisabled && options.length > 0 }
+  );
+  const count = visibleOptionCount ?? options.length;
+  const start = windowStart(cursor, options.length, count);
+  const visible = options.slice(start, start + count);
+  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);
+    }),
+    options.length > count && /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  \u2026 ${options.length} total` })
+  ] });
+};
+var windowStart2 = (cursor, total, count) => {
+  if (total <= count) return 0;
+  return Math.max(0, Math.min(cursor - Math.floor(count / 2), total - count));
+};
+var MultiSelect = ({
+  options,
+  onChange,
+  onSubmit,
+  defaultValue = [],
+  isDisabled = false,
+  visibleOptionCount
+}) => {
+  const [cursor, setCursor] = useState(0);
+  const [selected, setSelected] = useState(new Set(defaultValue));
+  useInput(
+    (input, key) => {
+      if (key.upArrow)
+        setCursor((i) => (i - 1 + options.length) % options.length);
+      if (key.downArrow) setCursor((i) => (i + 1) % options.length);
+      if (input === " ") {
+        const value = options[cursor].value;
+        const next = new Set(selected);
+        if (next.has(value)) next.delete(value);
+        else next.add(value);
+        setSelected(next);
+        onChange?.([...next]);
+      }
+      if (key.return) onSubmit?.([...selected]);
+    },
+    { isActive: !isDisabled && options.length > 0 }
+  );
+  const count = visibleOptionCount ?? options.length;
+  const start = windowStart2(cursor, options.length, count);
+  const visible = options.slice(start, start + count);
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    visible.map((option, i) => {
+      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 })
+      ] }, option.value);
+    }),
+    options.length > count && /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  \u2026 ${options.length} total` })
+  ] });
+};
+var TextInput = ({
+  placeholder = "",
+  defaultValue = "",
+  onChange,
+  onSubmit,
+  isDisabled = false
+}) => {
+  const [value, setValue] = useState(defaultValue);
+  const [cursor, setCursor] = useState(defaultValue.length);
+  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 before = value.slice(0, cursor);
+  const at = value.slice(cursor, cursor + 1) || " ";
+  const after = value.slice(cursor + 1);
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    before,
+    /* @__PURE__ */ jsx(Text, { inverse: true, children: at }),
+    after
+  ] });
+};
+var ConfirmInput = ({
+  defaultChoice = "confirm",
+  onConfirm,
+  onCancel,
+  isDisabled = false
+}) => {
+  useInput(
+    (input, key) => {
+      if (input.toLowerCase() === "y") {
+        onConfirm?.();
+        return;
+      }
+      if (input.toLowerCase() === "n") {
+        onCancel?.();
+        return;
+      }
+      if (key.return) {
+        if (defaultChoice === "confirm") onConfirm?.();
+        else onCancel?.();
+      }
+    },
+    { isActive: !isDisabled }
+  );
+  const hint = defaultChoice === "confirm" ? "(Y/n)" : "(y/N)";
+  return /* @__PURE__ */ jsx(Text, { dimColor: true, children: hint });
+};
+var ScrollView = ({
+  lines,
+  showIndicator = true
+}) => {
+  const ref = useRef(null);
+  const [height, setHeight] = useState(1);
+  const [start, setStart] = useState(0);
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+    const { height: h } = measureElement(ref.current);
+    if (h > 0 && h !== height) setHeight(h);
+  });
+  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);
+  });
+  const visible = lines.slice(clamped, clamped + height);
+  const hasMore = lines.length > height;
+  const atEnd = clamped >= maxStart;
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [
+    /* @__PURE__ */ jsx(Box, { ref, flexDirection: "column", flexGrow: 1, overflow: "hidden", children: visible.map(
+      (l, i) => l.spans ? /* @__PURE__ */ jsxs(Text, { wrap: "truncate-end", children: [
+        l.spans.map((s, j) => /* @__PURE__ */ jsx(
+          Text,
+          {
+            color: s.color,
+            bold: s.bold,
+            dimColor: s.dim,
+            italic: s.italic,
+            children: s.text
+          },
+          j
+        )),
+        l.spans.length === 0 ? " " : ""
+      ] }, i) : /* @__PURE__ */ jsx(
+        Text,
+        {
+          color: l.color,
+          bold: l.bold,
+          dimColor: l.dim,
+          wrap: "truncate-end",
+          children: l.text || " "
+        },
+        i
+      )
+    ) }),
+    showIndicator && hasMore && /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  ${clamped + 1}\u2013${clamped + visible.length} / ${lines.length}` + (atEnd ? "  (end)" : "  \u2193 j/space") })
+  ] });
+};
+var Tabs = ({ active, items }) => {
+  const cells = items.map((item) => ({
+    key: item.value,
+    text: item.count !== void 0 ? `${item.label} (${item.count})` : item.label,
+    isActive: item.value === active
+  }));
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        bold: cell.isActive,
+        color: cell.isActive ? colors.accent : void 0,
+        dimColor: !cell.isActive,
+        children: cell.text
+      },
+      cell.key
+    )) }),
+    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(Text, { color: colors.accent, children: cell.isActive ? "\u2500".repeat(cell.text.length) : " ".repeat(cell.text.length) }, cell.key)) })
+  ] });
+};
+var ProgressBar = ({ value, width = 20 }) => {
+  const clamped = Math.max(0, Math.min(100, value));
+  const filled = Math.round(clamped / 100 * width);
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    /* @__PURE__ */ jsx(Text, { color: colors.accent, children: "\u2588".repeat(filled) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2591".repeat(width - filled) })
+  ] });
+};
+
+// src/components/status-variants.ts
+var STATUS_VARIANTS = {
+  success: { icon: "\u2713", color: colors.success },
+  error: { icon: "\u2717", color: colors.error },
+  warning: { icon: "\u26A0", color: colors.warning },
+  info: { icon: "\u2139", color: colors.info }
+};
+var StatusMessage = ({
+  variant = "info",
+  children
+}) => {
+  const { icon, color } = STATUS_VARIANTS[variant];
+  return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Text, { color, children: icon }),
+    /* @__PURE__ */ jsx(Text, { children })
+  ] });
+};
+var Alert = ({ variant = "info", title, children }) => {
+  const { icon, color } = STATUS_VARIANTS[variant];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      borderStyle: "round",
+      borderColor: color,
+      paddingX: 1,
+      flexDirection: "column",
+      children: [
+        /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+          /* @__PURE__ */ jsx(Text, { color, children: icon }),
+          title ? /* @__PURE__ */ jsx(Text, { bold: true, color, children: title }) : null
+        ] }),
+        /* @__PURE__ */ jsx(Text, { children })
+      ]
+    }
+  );
+};
+var Toast = ({
+  message,
+  variant = "info",
+  duration = 2e3,
+  onDone
+}) => {
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+      onDone?.();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration]);
+  if (!visible) return null;
+  const { icon, color } = STATUS_VARIANTS[variant];
+  return /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+    /* @__PURE__ */ jsx(Text, { color, children: icon }),
+    /* @__PURE__ */ jsx(Text, { children: message })
+  ] });
+};
+var escape = (value) => value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+var buildAppleScript = (message, options = {}) => {
+  const clauses = [
+    options.title && `title "${escape(options.title)}"`,
+    options.subtitle && `subtitle "${escape(options.subtitle)}"`,
+    options.sound && `sound name "${escape(typeof options.sound === "string" ? options.sound : "default")}"`
+  ].filter(Boolean);
+  const suffix = clauses.length > 0 ? ` with ${clauses.join(" ")}` : "";
+  return `display notification "${escape(message)}"${suffix}`;
+};
+var notify = (message, options = {}) => {
+  if (process.platform !== "darwin") return;
+  const child = spawn("osascript", ["-e", buildAppleScript(message, options)], {
+    stdio: "ignore"
+  });
+  child.on("error", () => {
+  });
+  child.unref();
+};
+
+export { Alert, Badge, Banner, ConfirmInput, FooterHints, Header, KeyValue, LoadingScreen, MultiSelect, ProgressBar, ScrollView, Select, SelectableRow, Spinner, StatusMessage, Table, Tabs, TextInput, Toast, colors, notify, spacing };

package/package.json

@@ -1,35 +1,47 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
   "files": [
     "dist"
   ],
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch"
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "peerDependencies": {
-    "ink": ">=4.0.0",
-    "react": ">=18.0.0"
+    "ink": ">=7",
+    "react": ">=19"
   },
   "dependencies": {
-    "ink-spinner": "^5.0.0"
+    "cli-spinners": "3.4.0",
+    "figures": "6.1.0"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "ink": "^5.0.0",
-    "react": "^18.0.0",
-    "typescript": "^5.0.0"
+    "@types/node": "22.20.1",
+    "@types/react": "19.2.17",
+    "ink": "7.1.0",
+    "ink-testing-library": "4.0.0",
+    "react": "19.2.7",
+    "react-devtools-core": "7.0.1",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3",
+    "vitest": "4.1.10"
   },
   "keywords": [
     "ink",

package/dist/components/Badge.d.ts

@@ -1,8 +0,0 @@
-export type BadgeVariant = "success" | "error" | "warning" | "info";
-type BadgeProps = {
-    children: string;
-    variant?: BadgeVariant;
-};
-export declare const Badge: ({ children, variant }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAA;AAEnE,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB,CAAA;AASD,eAAO,MAAM,KAAK,GAAI,uBAAgC,UAAU,4CAE/D,CAAA"}

package/dist/components/Badge.js

@@ -1,11 +0,0 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Text } from "ink";
-import { colors } from "../tokens.js";
-const variantColor = {
-    success: colors.success,
-    error: colors.error,
-    warning: colors.warning,
-    info: colors.info,
-};
-export const Badge = ({ children, variant = "info" }) => (_jsxs(Text, { color: variantColor[variant], children: ["[", children, "]"] }));
-//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AASrC,MAAM,YAAY,GAAiC;IACjD,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,OAAO,EAAE,MAAM,CAAC,OAAO;IACvB,IAAI,EAAE,MAAM,CAAC,IAAI;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,EAAc,EAAE,EAAE,CAAC,CACnE,MAAC,IAAI,IAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,kBAAI,QAAQ,SAAS,CACxD,CAAA"}

package/dist/components/Banner.d.ts

@@ -1,8 +0,0 @@
-type BannerProps = {
-    title: string;
-    subtitle?: string;
-    icon?: string;
-};
-export declare const Banner: ({ title, subtitle, icon }: BannerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Banner.d.ts.map

package/dist/components/Banner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../src/components/Banner.tsx"],"names":[],"mappings":"AAIA,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,MAAM,GAAI,2BAAiC,WAAW,4CAMlE,CAAA"}

package/dist/components/Banner.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
-import { colors } from "../tokens.js";
-export const Banner = ({ title, subtitle, icon = "◆" }) => (_jsxs(Box, { gap: 1, marginBottom: 1, children: [_jsx(Text, { color: colors.accent, children: icon }), _jsx(Text, { bold: true, children: title }), subtitle && _jsx(Text, { dimColor: true, children: subtitle })] }));
-//# sourceMappingURL=Banner.js.map

package/dist/components/Banner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Banner.js","sourceRoot":"","sources":["../../src/components/Banner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAQrC,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,GAAG,EAAe,EAAE,EAAE,CAAC,CACtE,MAAC,GAAG,IAAC,GAAG,EAAE,CAAC,EAAE,YAAY,EAAE,CAAC,aAC1B,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,YAAG,IAAI,GAAQ,EACzC,KAAC,IAAI,IAAC,IAAI,kBAAE,KAAK,GAAQ,EACxB,QAAQ,IAAI,KAAC,IAAI,IAAC,QAAQ,kBAAE,QAAQ,GAAQ,IACzC,CACP,CAAA"}

package/dist/components/Header.d.ts

@@ -1,7 +0,0 @@
-type HeaderProps = {
-    children: string;
-    subtitle?: string;
-};
-export declare const Header: ({ children, subtitle }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,MAAM,GAAI,wBAAwB,WAAW,4CAOzD,CAAA"}

package/dist/components/Header.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
-export const Header = ({ children, subtitle }) => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { bold: true, underline: true, children: children }), subtitle && _jsx(Text, { dimColor: true, children: subtitle })] }));
-//# sourceMappingURL=Header.js.map

package/dist/components/Header.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/components/Header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAO/B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAe,EAAE,EAAE,CAAC,CAC7D,MAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,EAAC,YAAY,EAAE,CAAC,aACzC,KAAC,IAAI,IAAC,IAAI,QAAC,SAAS,kBACjB,QAAQ,GACJ,EACN,QAAQ,IAAI,KAAC,IAAI,IAAC,QAAQ,kBAAE,QAAQ,GAAQ,IACzC,CACP,CAAA"}

package/dist/components/Spinner.d.ts

@@ -1,6 +0,0 @@
-type SpinnerProps = {
-    label?: string;
-};
-export declare const Spinner: ({ label }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAKA,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,WAAW,YAAY,4CAO9C,CAAA"}

package/dist/components/Spinner.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
-import InkSpinner from "ink-spinner";
-import { colors } from "../tokens.js";
-export const Spinner = ({ label }) => (_jsxs(Box, { gap: 1, children: [_jsx(Text, { color: colors.accent, children: _jsx(InkSpinner, { type: "dots" }) }), label && _jsx(Text, { dimColor: true, children: label })] }));
-//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,UAAU,MAAM,aAAa,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAMrC,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAgB,EAAE,EAAE,CAAC,CAClD,MAAC,GAAG,IAAC,GAAG,EAAE,CAAC,aACT,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,MAAM,YACxB,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,GAAG,GACrB,EACN,KAAK,IAAI,KAAC,IAAI,IAAC,QAAQ,kBAAE,KAAK,GAAQ,IACnC,CACP,CAAA"}

package/dist/components/Table.d.ts

@@ -1,12 +0,0 @@
-export type Column<T extends Record<string, unknown>> = {
-    key: keyof T & string;
-    header: string;
-    width?: number;
-};
-type TableProps<T extends Record<string, unknown>> = {
-    data: T[];
-    columns: Column<T>[];
-};
-export declare const Table: <T extends Record<string, unknown>>({ data, columns, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=Table.d.ts.map

package/dist/components/Table.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAIA,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACtD,GAAG,EAAE,MAAM,CAAC,GAAG,MAAM,CAAA;IACrB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACnD,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,oBAGtD,UAAU,CAAC,CAAC,CAAC,4CAqBf,CAAA"}

package/dist/components/Table.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from "ink";
-import { colors } from "../tokens.js";
-export const Table = ({ data, columns, }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { gap: 2, children: columns.map((col) => (_jsx(Box, { width: col.width, minWidth: col.width, children: _jsx(Text, { bold: true, color: colors.muted, children: col.header }) }, col.key))) }), data.map((row, i) => (_jsx(Box, { gap: 2, children: columns.map((col) => (_jsx(Box, { width: col.width, minWidth: col.width, children: _jsx(Text, { wrap: "truncate-end", children: String(row[col.key] ?? "") }) }, col.key))) }, i)))] }));
-//# sourceMappingURL=Table.js.map

package/dist/components/Table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAarC,MAAM,CAAC,MAAM,KAAK,GAAG,CAAoC,EACvD,IAAI,EACJ,OAAO,GACO,EAAE,EAAE,CAAC,CACnB,MAAC,GAAG,IAAC,aAAa,EAAC,QAAQ,aACzB,KAAC,GAAG,IAAC,GAAG,EAAE,CAAC,YACR,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,KAAC,GAAG,IAAe,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,KAAK,YACtD,KAAC,IAAI,IAAC,IAAI,QAAC,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3B,GAAG,CAAC,MAAM,GACN,IAHC,GAAG,CAAC,GAAG,CAIX,CACP,CAAC,GACE,EACL,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,KAAC,GAAG,IAAS,GAAG,EAAE,CAAC,YAChB,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,KAAC,GAAG,IAAe,KAAK,EAAE,GAAG,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,KAAK,YACtD,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,YAAE,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAQ,IADrD,GAAG,CAAC,GAAG,CAEX,CACP,CAAC,IALM,CAAC,CAML,CACP,CAAC,IACE,CACP,CAAA"}

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAC7C,YAAY,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA;AAC7C,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAA;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/tokens.d.ts

@@ -1,17 +0,0 @@
-export declare const colors: {
-    readonly accent: "#FF8C00";
-    readonly muted: "gray";
-    readonly success: "green";
-    readonly error: "red";
-    readonly warning: "yellow";
-    readonly info: "cyan";
-};
-export type Color = (typeof colors)[keyof typeof colors];
-export declare const spacing: {
-    readonly xs: 1;
-    readonly sm: 2;
-    readonly md: 3;
-    readonly lg: 4;
-};
-export type Spacing = (typeof spacing)[keyof typeof spacing];
-//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;CAOT,CAAA;AAEV,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,OAAO,MAAM,CAAC,CAAA;AAExD,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAEV,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAA"}

package/dist/tokens.js

@@ -1,15 +0,0 @@
-export const colors = {
-    accent: "#FF8C00",
-    muted: "gray",
-    success: "green",
-    error: "red",
-    warning: "yellow",
-    info: "cyan",
-};
-export const spacing = {
-    xs: 1,
-    sm: 2,
-    md: 3,
-    lg: 4,
-};
-//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,OAAO;IAChB,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,MAAM;CACJ,CAAA;AAIV,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACG,CAAA"}