ink-cartridge 3.7.1 → 3.8.0

package/README.md

@@ -1,249 +1,164 @@
 # ink-cartridge
 
-> Ready-to-use Ink components and tools for building terminal UI applications.
+> A component kit for rapidly building complex, multi-page, interaction-heavy terminal applications — filling the critical gaps Ink leaves open.
 
 [![CI](https://github.com/BAIGAOa/ink-cartridge/actions/workflows/ci.yml/badge.svg)](https://github.com/BAIGAOa/ink-trc/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/ink-cartridge.svg)](https://www.npmjs.com/package/ink-cartridge)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
+## Table of Contents
 
----
-
-## Getting Started
-
-### Quick Start (scaffold a new project)
-
-```bash
-npx ink-cartridge init my-tui
-cd my-tui
-npm start
-```
-
-### Install in existing project
-
-```bash
-npm install ink-cartridge
-```
-
-### Requirements
-
-| Dependency | Minimum Version |
-| ---------- | --------------- |
-| Node.js    | 22              |
-| ink        | 5               |
-| react      | 18              |
-
----
+- [Design Philosophy](#design-philosophy)
+- [Installation](#installation)
+- [Scaffold](#scaffold)
+- [Documentation](#documentation)
+- [Other](#other)
+- [License](#license)
 
 ## Design Philosophy
 
-ink-cartridge aims to make **screen management** and **keyboard event handling** in Ink applications composable, maintainable, and type-safe.
-
-### Screen as Component
-
-In ink-cartridge, **every React component is a "screen"**. Register them into a **screen tree** via `registerComponent`, then navigate the tree with `skip` / `back` / `gotoScreen`. This design makes screen navigation predictable and eliminates the chaos of hand-written conditional rendering (`if-else` / `switch`).
-
-### Layered Keyboard Events
-
-No more global `useInput` cluttered with `if-else` chains. ink-cartridge's keyboard system maintains **per-screen-layer** key bindings. Events bubble from **top to bottom** through the stack, with four key mechanisms:
-
-- **Sequence (`boundSequence`)** — Multi-key chords (e.g. `gg`, `dd`, `cw`) with timeout and exclusive/non-exclusive modes. Sequences take priority over ordinary bindings.
-- **Blocked Key (`blockedKey`)** — Let a key pass through the current layer to be handled below
-- **Stop (`stop`)** — Prevent a key from propagating to lower layers. Supports `stopAction` mode to block by shortcut action ID instead of literal key name
-- **Global Key (`globalKeys`)** — Shortcuts independent of the screen stack
-
-#### Finer-grained partitioning
-
-Within the same level, identical keys are also in competition. To address this, we have a complete **focus system**.  
-Each level maintains a set of focus targets, and only one focus is active at any given time within a level. Each focus target has its own bound keyboard operations. Only the activated focus target is eligible to execute them during event dispatching in **useInput**.  
-
-**For more details, please refer to the API documentation.**
-
-### Shortcut Actions
+Ink gives you `useInput` and `render`. Everything else — screen navigation, layered keyboard events, focus management, cross-component communication — you build yourself. ink-cartridge provides all of that, designed for **multi-page, interaction-dense terminal apps** where a single global `useInput` with `if-else` chains breaks down.
 
-Decouple operation definition from key binding with `defineShortcutAction`. Register named operations once, then reference them by string ID in `boundKeyboard`, `globalKeys`, and `stop`:
+Three pillars:
 
-```tsx
-defineShortcutAction([
-  { actionId: 'quit', action: () => process.exit() },
-]);
-boundKeyboard(['q'], 'quit');
-globalKeys([{ key: 'escape', operate: 'quit' }]);
-stop(['quit'], { stopAction: true });
-```
-
-### Sequence Actions
-
-Decouple sequence operation definition from key binding with `defineSequenceAction`. Register named sequence operations once, then reference them by string ID in `globalSequence` and `boundSequence`:
+- **Screen as component** — Every React component is a screen. Register them into a tree, navigate with `skip` / `back` / `gotoScreen`. No hand-written conditional rendering.
+- **Layered keyboard engine** — Each screen owns its key bindings. A 7-stage pipeline resolves conflicts between modals, overlays, global keys, and the screen stack. Focus system partitions keys within the same layer.
+- **Event bus** — Decoupled cross-component communication. Global keys emit events; any component subscribes. Zero prop drilling.
 
-```tsx
-defineSequenceAction([
-  { sequenceActionId: 'save', action: () => saveFile(), keys: ['ctrl+s'] },
-]);
+## Installation
 
-// Global sequence referencing the action
-globalSequence([{ keys: ['ctrl+s'], operate: 'save' }]);
-
-// Screen-level sequence using the action's predefined keys
-boundSequence('save');
-
-// Modify an existing action's keys dynamically
-modifySequenceAction('save', ['ctrl+shift+s']);
+```bash
+npm install ink-cartridge
 ```
 
-### Overlay System
-
-`openOverlay()` and `closeOverlay()` provide floating dialogs on top of the screen stack. Combined with the keyboard system, overlays intercept keys before they reach the underlying screen — ideal for confirmation dialogs, modals, and pop-up menus.
-
-### Module-Level Functions
-
-Navigation functions (`skip`, `back`, `gotoScreen`, `openOverlay`, `closeOverlay`) work both inside React components (via hooks) and as **module-level imports** in any `.ts` / `.tsx` file. This allows non-UI layers — game engines, state managers, etc. — to trigger screen transitions.
-
-### Type Safety
-
-Every API provides full TypeScript type inference. Functions like `skip`, `gotoScreen`, and `openOverlay` automatically infer parameter types from your component's props, catching errors at compile time.
+## Scaffold
 
----
-
-## ⚠️ Important: Component Nesting Order
-
-`KeyboardProvider` **must** be nested inside `ScenarioManagementProvider`, because it depends on the screen context to obtain the current screen stack.
-
-```tsx
-{/* ❌ Wrong: KeyboardProvider outside screen context */}
-<KeyboardProvider>
-  <ScenarioManagementProvider defaultScreen={Menu}>
-    ...
-  </ScenarioManagementProvider>
-</KeyboardProvider>
-
-{/* ✅ Correct: KeyboardProvider inside screen context */}
-<ScenarioManagementProvider defaultScreen={Menu}>
-  <KeyboardProvider>
-    ...
-  </KeyboardProvider>
-</ScenarioManagementProvider>
+```bash
+npx ink-cartridge init my-tui
 ```
 
-> The screen system can be used independently without `KeyboardProvider`; but the keyboard system requires the screen context.
-
----
-
 ## Documentation
 
-- **[Screen Management System](docs/screen.md)** — `registerComponent`, `ScenarioManagementProvider`, `CurrentScreen`, `useScreenSystem`, `skip` / `back` / `gotoScreen` / `openOverlay` / `closeOverlay`
-- **[Keyboard System](docs/keyboard.md)** — `KeyboardProvider`, `useKeyboard`, `boundKeyboard`, `boundSequence`, `blockedKey`, `stop`, `globalKeys`, `defineShortcutAction`, focus management
-- **[Internationalization](docs/language.md)** — `LanguageProvider`, `useI18n`, `t()` translation with interpolation, language switching, **`ink-cartridge makeLanguageType`** CLI for compile-time type-safe translation keys
-- **[Theme System](docs/theme.md)** — `ThemeProvider`, `useTheme`, There is also a companion type generator and theme profile generator
-- **[Persistence System](docs/storage.md)** — `createStorage`, typed key-value JSON storage with automatic type validation, atomic writes, and zero config
-- **[Binary Storage System](docs/binary-storage.md)** — `createBinaryStorage` for sequential typed binary streams with positional cursors, and `createStreamingReader` for memory-efficient streaming of large files (500 MB+) with backpressure support
-
----
-
-## Components
-
-### Selection & Input
-- **[SelectInput](src/components/select/README.md)** — Single-select list with focus-aware keyboard navigation
-- **[MultiSelectInput](src/components/multi-select/README.md)** — Multi-select list with checkbox toggling (Space to toggle, Enter to submit)
-- **[TextInput](src/components/text/README.md)** — Text input with cursor, mask, and focus system integration
-- **[SearchInput](src/components/search-input/README.md)** — Search field with 🔍 icon and Esc-to-clear
-- **[NumberInput](src/components/number-input/README.md)** — Numeric stepper with min/max/step and keyboard controls
-
-### Display & Feedback
-- **[Spinner](src/components/spinner/README.md)** — Animated spinner with multiple preset styles
-- **[ProgressBar](src/components/progress-bar/README.md)** — Customizable progress bar with percentage display
-- **[Badge](src/components/badge/README.md)** — Colored label/tag component
-- **[KeyHint](src/components/key-hint/README.md)** — Keyboard shortcut hint bar (`[S] Save`)
-
-### Navigation
-- **[Tabs](src/components/tabs/README.md)** — Tabbed panel with keyboard navigation and focus system integration
-- **[Fold](src/components/fold/README.md)** — Collapsible panel with preview and Space-toggle, integrated with focus system
-
-### Layout
-- **[Divider](src/components/divider/README.md)** — Horizontal separator with optional centered label
-
-### Form
-- **[Form & Field](src/components/form/README.md)** — Context‑based form system with validation, error focus, and Ctrl+Enter submit
-
-### Dialog
-- **[ConfirmDialog](src/components/dialog/README.md)** — Modal confirmation dialog with two buttons, designed for the overlay system
-
----
-
-## Quick Overview
-
-```tsx
-import React, { useEffect } from 'react';
-import { Box, Text, render } from 'ink';
-import {
-  registerComponent,
-  ScenarioManagementProvider,
-  CurrentScreen,
-  useScreenSystem,
-  KeyboardProvider,
-  useKeyboard,
-  ConfirmDialog,
-} from 'ink-cartridge';
-
-// ── Register screens ──
-function Menu() {
-  const { skip } = useScreenSystem();
-  const { boundKeyboard } = useKeyboard();
-  useEffect(() => {
-    boundKeyboard(['s'], () => skip(Game, { level: 1 }));
-  }, []);
-  return (
-    <Box>
-      <Text>Main Menu — Press S to start</Text>
-    </Box>
-  );
-}
-registerComponent(Menu, {});
-
-function Game({ level }: { level: number }) {
-  const { back } = useScreenSystem();
-  const { boundKeyboard } = useKeyboard();
-  useEffect(() => {
-    boundKeyboard(['b'], () => back());
-  }, []);
-  return (
-    <Box>
-      <Text>Level {level} — Press B to go back</Text>
-    </Box>
-  );
-}
-registerComponent(Game, { level: 1 }, { parent: Menu });
-
-// Register the dialog so it can be used with openOverlay()
-registerComponent(ConfirmDialog, {
-  title: '', message: '', onConfirm: () => {}, onCancel: () => {},
-});
-
-// ── Wire up ──
-function App() {
-  return (
-    <KeyboardProvider>
-      <CurrentScreen />
-    </KeyboardProvider>
-  );
-}
-
-render(
-  <ScenarioManagementProvider defaultScreen={Menu}>
-    <App />
-  </ScenarioManagementProvider>,
-);
-```
-
----
-
+<details>
+<summary><b>keyboard/</b> — Architecture &amp; API index</summary>
+
+- [README](docs/keyboard/README.md) — Architecture &amp; API index
+- [KeyboardProvider](docs/keyboard/KeyboardProvider-API.md)
+- [useKeyboard](docs/keyboard/useKeyboard-API.md)
+- [boundKeyboard](docs/keyboard/boundKeyboard-API.md)
+- [boundSequence](docs/keyboard/boundSequence-API.md)
+- [blockedKey](docs/keyboard/blockedKey-API.md)
+- [stop](docs/keyboard/stop-API.md)
+- [globalKeys](docs/keyboard/globalKeys-API.md)
+- [globalSequence](docs/keyboard/globalSequence-API.md)
+- [focus system](docs/keyboard/focus-system-API.md)
+- [shortcut actions](docs/keyboard/shortcut-actions-API.md)
+- [sequence actions](docs/keyboard/sequence-actions-API.md)
+- [allowModal](docs/keyboard/allowModal-API.md)
+- [useModalMissListener](docs/keyboard/useModalMissListener-API.md)
+- [enableWildcardPriority](docs/keyboard/enableWildcardPriority-API.md)
+- [advanced](docs/keyboard/advanced.md)
+</details>
+
+<details>
+<summary><b>screen/</b> — Architecture &amp; API index</summary>
+
+- [README](docs/screen/README.md) — Architecture &amp; API index
+- [registerComponent](docs/screen/registerComponent-API.md)
+- [ScenarioManagementProvider](docs/screen/ScenarioManagementProvider-API.md)
+- [CurrentScreen](docs/screen/CurrentScreen-API.md)
+- [useScreenSystem](docs/screen/useScreenSystem-API.md)
+- [skip](docs/screen/skip-API.md)
+- [back](docs/screen/back-API.md)
+- [gotoScreen](docs/screen/gotoScreen-API.md)
+- [overlay](docs/screen/overlay-API.md)
+- [modal](docs/screen/modal-API.md)
+- [ModalContext](docs/screen/ModalContext-API.md)
+- [advanced](docs/screen/advanced.md)
+</details>
+
+<details>
+<summary><b>event/</b> — Architecture &amp; API index</summary>
+
+- [README](docs/event/README.md) — Architecture &amp; API index
+- [createEventBus](docs/event/createEventBus-API.md)
+- [EventProvider](docs/event/EventProvider-API.md)
+- [useEmitter](docs/event/useEmitter-API.md)
+- [useSubscribe](docs/event/useSubscribe-API.md)
+- [useEventBus](docs/event/useEventBus-API.md)
+- [EventBus](docs/event/EventBus-API.md)
+- [advanced](docs/event/advanced.md)
+</details>
+
+<details>
+<summary><b>components/</b> — Component index</summary>
+
+- [README](docs/components/README.md) — Component index
+- [SelectInput](docs/components/SelectInput/SelectInput-API.md)
+- [SelectRow](docs/components/SelectRow/SelectRow-API.md)
+- [MultiSelectInput](docs/components/MultiSelectInput/MultiSelectInput-API.md)
+- [TextInput](docs/components/TextInput/TextInput-API.md)
+- [UncontrolledTextInput](docs/components/TextInput/UncontrolledTextInput-API.md)
+- [NumberInput](docs/components/NumberInput/NumberInput-API.md)
+- [SearchInput](docs/components/SearchInput/SearchInput-API.md)
+- [ConfirmDialog](docs/components/ConfirmDialog/ConfirmDialog-API.md)
+- [Spinner](docs/components/Spinner/Spinner-API.md)
+- [ProgressBar](docs/components/ProgressBar/ProgressBar-API.md)
+- [Divider](docs/components/Divider/Divider-API.md)
+- [Badge](docs/components/Badge/Badge-API.md)
+- [KeyHint](docs/components/KeyHint/KeyHint-API.md)
+- [Tabs](docs/components/Tabs/Tabs-API.md)
+- [Fold](docs/components/Fold/Fold-API.md)
+- [Form](docs/components/Form/Form-API.md)
+- [Field](docs/components/Form/Field-API.md)
+- [useFormContext](docs/components/Form/useFormContext-API.md)
+</details>
+
+<details>
+<summary><b>theme/</b></summary>
+
+- [README](docs/theme/README.md)
+- [ThemeProvider](docs/theme/ThemeProvider-API.md)
+- [useTheme](docs/theme/useTheme-API.md)
+- [advanced](docs/theme/advanced.md)
+</details>
+
+<details>
+<summary><b>language/</b></summary>
+
+- [README](docs/language/README.md)
+- [LanguageProvider](docs/language/LanguageProvider-API.md)
+- [useI18n](docs/language/useI18n-API.md)
+- [advanced](docs/language/advanced.md)
+</details>
+
+<details>
+<summary><b>storage/</b></summary>
+
+- [README](docs/storage/README.md)
+- [createStorage](docs/storage/createStorage-API.md)
+</details>
+
+<details>
+<summary><b>binary-storage/</b></summary>
+
+- [README](docs/binary-storage/README.md)
+- [createBinaryStorage](docs/binary-storage/createBinaryStorage-API.md)
+- [createStreamingReader](docs/binary-storage/createStreamingReader-API.md)
+</details>
+
+<details>
+<summary><b>dev-tool/</b></summary>
+
+- [README](docs/dev-tool/README.md)
+- [openDevTool](docs/dev-tool/openDevTool-API.md)
+- [closeDevTool](docs/dev-tool/closeDevTool-API.md)
+</details>
 
 ## Other
 
-I admit I thought about some things too quickly at the beginning of the project.
-For example, the method of **blockedKeys**. Why is it called that? I don't know. Maybe I didn't think about it at that time.
-Actually, it should be called **penetration**, but I don't want to change it.
+The method `blockedKey` is poorly named — it means *pass-through*, not "block." The internal name is `penetration`. Too late to rename now.
 
 ## License
 
-[MIT](LICENSE)
+[MIT](LICENSE)

package/dist/binary-storage/StreamingReader.js

@@ -182,6 +182,9 @@ class StreamingReader {
         return waiter.deferred.promise;
     }
     [Symbol.asyncIterator]() {
+        // Aliasing `this` for use inside the returned iterator object's methods
+        // is a standard pattern for async iterators; the iterator is a plain
+        // object, not an arrow function, so `this` would be lost otherwise.
         const reader = this;
         return {
             async next() {

package/dist/components/dialog/ConfirmDialog.js

@@ -43,7 +43,7 @@ export function ConfirmDialog({ title, message, confirmLabel = '确认', cancelL
             focusUnregister('dialog-confirm');
             focusUnregister('dialog-cancel');
         };
-    }, []);
+    }, [boundKeyboard, focusSet, focusUnregister]);
     return (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 2, paddingY: 1 },
         React.createElement(Box, { marginBottom: 1 },
             React.createElement(Text, { bold: true, color: "yellow" }, '⚠ ' + title)),

package/dist/components/fold/Fold.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Box, Text } from 'ink';
 import { useKeyboard, useFocusState } from '../../keyboard/index.js';
 export function Fold({ focusId, label, preview, children, expanded, onToggle, defaultExpanded, storage, storageKey, }) {
@@ -18,7 +18,7 @@ export function Fold({ focusId, label, preview, children, expanded, onToggle, de
         });
         return () => { cancelled = true; };
     }, [storage, persistKey, defaultExpanded]);
-    const toggle = () => {
+    const toggle = useCallback(() => {
         if (isControlled) {
             onToggle?.();
         }
@@ -29,11 +29,11 @@ export function Fold({ focusId, label, preview, children, expanded, onToggle, de
                 return next;
             });
         }
-    };
+    }, [isControlled, onToggle, storage, persistKey]);
     useEffect(() => {
         const unSpace = boundKeyboard([' '], () => toggle(), { focusId });
         return () => { unSpace(); focusUnregister(focusId); };
-    }, [focusId]);
+    }, [focusId, boundKeyboard, focusUnregister, toggle]);
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Box, null,
             React.createElement(Text, { color: isFocused ? 'cyan' : 'grey' }, isExpanded ? '▼ ' : '▶ '),

package/dist/components/form/Field.js

@@ -35,7 +35,7 @@ export function Field({ name, children, rules, defaultValue, focusId }) {
     useEffect(() => {
         registerField(name, defaultValue, rules, effectiveFocusId);
         return () => unregisterField(name);
-    }, [name, registerField, unregisterField]);
+    }, [name, defaultValue, rules, effectiveFocusId, registerField, unregisterField]);
     /**
      * Stable onChange handler — calls Form's setFieldValue,
      * which updates the value and clears any validation error.
@@ -48,12 +48,13 @@ export function Field({ name, children, rules, defaultValue, focusId }) {
      * components on the initial render.
      */
     const resolvedValue = values[name] !== undefined ? values[name] : (defaultValue ?? '');
+    const error = errors[name];
     /** Memoize the render props to avoid unnecessary re-renders. */
     const fieldProps = useMemo(() => ({
         value: resolvedValue,
-        error: errors[name],
+        error,
         onChange,
         focusId: effectiveFocusId,
-    }), [resolvedValue, errors[name], onChange, effectiveFocusId]);
+    }), [resolvedValue, error, onChange, effectiveFocusId]);
     return React.createElement(React.Fragment, null, children(fieldProps));
 }

package/dist/components/multi-select/MultiSelectInput.js

@@ -203,7 +203,7 @@ export function MultiSelectInput({ items = [], selected: controlledSelected, def
     // Unregister old focus target when focusId changes
     useEffect(() => {
         return () => focusUnregister(focusId);
-    }, [focusId]);
+    }, [focusId, focusUnregister]);
     // 注册键盘绑定
     useEffect(() => {
         const fid = focusId;

package/dist/components/number-input/NumberInput.js

@@ -7,7 +7,7 @@ export function NumberInput({ focusId, value, onChange, min = -Infinity, max = I
     // Unregister old focus target when focusId changes
     useEffect(() => {
         return () => focusUnregister(focusId);
-    }, [focusId]);
+    }, [focusId, focusUnregister]);
     useEffect(() => {
         const up = boundKeyboard(['up', 'right'], () => {
             const next = Math.min(value + step, max);
@@ -38,7 +38,7 @@ export function NumberInput({ focusId, value, onChange, min = -Infinity, max = I
             down();
             wildcard();
         };
-    }, [focusId, value, min, max, step, onChange]);
+    }, [focusId, value, min, max, step, onChange, boundKeyboard]);
     const text = isFocused ? `${value}█` : String(value);
     return React.createElement(Text, null, text);
 }

package/dist/components/search-input/SearchInput.js

@@ -7,7 +7,7 @@ export function SearchInput({ focusId, value, onChange, placeholder, onSubmit, }
     useEffect(() => {
         const unEsc = boundKeyboard(['escape'], () => onChange(''), { focusId });
         return () => { unEsc(); };
-    }, [focusId, onChange]);
+    }, [focusId, onChange, boundKeyboard]);
     return (React.createElement(Box, null,
         React.createElement(Text, { color: "blue" }, "Search "),
         React.createElement(TextInput, { focusId: focusId, value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit }),

package/dist/components/select/SelectInput.d.ts

@@ -16,85 +16,4 @@ import type { SelectInputProps, Item } from './types.js';
  * @typeParam T - The type of the value associated with each item.
  * @typeParam I - The extended item type, must extend Item<T>. Defaults to Item<T>.
  */
-export declare function SelectInput<T, I extends Item<T> = Item<T>>({ items, onSelect, itemComponent, indicatorComponent, focusId, limit: limitProp, storage, storageKey, }: SelectInputProps<T, I>): React.FunctionComponentElement<{
-    readonly position?: "absolute" | "relative" | "static" | undefined;
-    readonly top?: number | string | undefined;
-    readonly right?: number | string | undefined;
-    readonly bottom?: number | string | undefined;
-    readonly left?: number | string | undefined;
-    readonly columnGap?: number | undefined;
-    readonly rowGap?: number | undefined;
-    readonly gap?: number | undefined;
-    readonly margin?: number | undefined;
-    readonly marginX?: number | undefined;
-    readonly marginY?: number | undefined;
-    readonly marginTop?: number | undefined;
-    readonly marginBottom?: number | undefined;
-    readonly marginLeft?: number | undefined;
-    readonly marginRight?: number | undefined;
-    readonly padding?: number | undefined;
-    readonly paddingX?: number | undefined;
-    readonly paddingY?: number | undefined;
-    readonly paddingTop?: number | undefined;
-    readonly paddingBottom?: number | undefined;
-    readonly paddingLeft?: number | undefined;
-    readonly paddingRight?: number | undefined;
-    readonly flexGrow?: number | undefined;
-    readonly flexShrink?: number | undefined;
-    readonly flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | undefined;
-    readonly flexBasis?: number | string | undefined;
-    readonly flexWrap?: "nowrap" | "wrap" | "wrap-reverse" | undefined;
-    readonly alignItems?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline" | undefined;
-    readonly alignSelf?: "flex-start" | "center" | "flex-end" | "auto" | "stretch" | "baseline" | undefined;
-    readonly alignContent?: "flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
-    readonly justifyContent?: "flex-start" | "flex-end" | "space-between" | "space-around" | "space-evenly" | "center" | undefined;
-    readonly width?: number | string | undefined;
-    readonly height?: number | string | undefined;
-    readonly minWidth?: number | string | undefined;
-    readonly minHeight?: number | string | undefined;
-    readonly maxWidth?: number | string | undefined;
-    readonly maxHeight?: number | string | undefined;
-    readonly aspectRatio?: number | undefined;
-    readonly display?: "flex" | "none" | undefined;
-    readonly borderStyle?: (keyof import("cli-boxes").Boxes | import("cli-boxes").BoxStyle) | undefined;
-    readonly borderTop?: boolean | undefined;
-    readonly borderBottom?: boolean | undefined;
-    readonly borderLeft?: boolean | undefined;
-    readonly borderRight?: boolean | undefined;
-    readonly borderColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderTopColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderBottomColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderLeftColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderRightColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderDimColor?: boolean | undefined;
-    readonly borderTopDimColor?: boolean | undefined;
-    readonly borderBottomDimColor?: boolean | undefined;
-    readonly borderLeftDimColor?: boolean | undefined;
-    readonly borderRightDimColor?: boolean | undefined;
-    readonly borderBackgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderTopBackgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderBottomBackgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderLeftBackgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly borderRightBackgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-    readonly overflow?: "visible" | "hidden" | undefined;
-    readonly overflowX?: "visible" | "hidden" | undefined;
-    readonly overflowY?: "visible" | "hidden" | undefined;
-    readonly backgroundColor?: import("type-fest").LiteralUnion<import("ansi-styles").ForegroundColorName, string> | undefined;
-} & {
-    readonly 'aria-label'?: string;
-    readonly 'aria-hidden'?: boolean;
-    readonly 'aria-role'?: "button" | "checkbox" | "combobox" | "list" | "listbox" | "listitem" | "menu" | "menuitem" | "option" | "progressbar" | "radio" | "radiogroup" | "tab" | "tablist" | "table" | "textbox" | "timer" | "toolbar";
-    readonly 'aria-state'?: {
-        readonly busy?: boolean;
-        readonly checked?: boolean;
-        readonly disabled?: boolean;
-        readonly expanded?: boolean;
-        readonly multiline?: boolean;
-        readonly multiselectable?: boolean;
-        readonly readonly?: boolean;
-        readonly required?: boolean;
-        readonly selected?: boolean;
-    };
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<import("ink").DOMElement>>;
+export declare function SelectInput<T, I extends Item<T> = Item<T>>({ items, onSelect, itemComponent, indicatorComponent, focusId, limit: limitProp, storage, storageKey, }: SelectInputProps<T, I>): React.JSX.Element;