ink-cartridge 3.6.1

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

@@ -0,0 +1,287 @@
+import React, { useState, useEffect, useMemo, useCallback, useRef, } from 'react';
+import { Box, Text } from 'ink';
+import { useKeyboard, useFocusState } from '../../keyboard/hook.js';
+/**
+ * Default indicator: shows a blue ❯ pointer when highlighted,
+ * otherwise a blank space.
+ */
+function defaultIndicator({ isHighlighted }) {
+    return React.createElement(Box, { marginRight: 1 }, isHighlighted
+        ? React.createElement(Text, { color: 'blue' }, '\u276F')
+        : React.createElement(Text, null, ' '));
+}
+/**
+ * Default checkbox: shows a green ◉ when selected,
+ * otherwise a plain ○.
+ */
+function defaultCheckbox({ isSelected }) {
+    return React.createElement(Box, { marginRight: 1 }, React.createElement(Text, { color: 'green' }, isSelected ? '\u25C9' : '\u25CB'));
+}
+/**
+ * Default item renderer: blue label when highlighted,
+ * default color otherwise.
+ */
+function defaultItem(props) {
+    return React.createElement(Text, { color: props.isHighlighted ? 'blue' : undefined }, props.label);
+}
+function clamp(n, min, max) {
+    return Math.max(min, Math.min(n, max));
+}
+/**
+ * Multi-select list component integrated with the ink-cartridge keyboard and
+ * focus system.
+ *
+ * Users navigate with arrow keys (or vim-style j/k), toggle items with
+ * Space, and confirm with Enter. Number keys 1-9 toggle the corresponding
+ * visible item directly.
+ *
+ * When the component is not the active focus target, its highlight is
+ * hidden but selection checkboxes remain visible.
+ *
+ * Supports both **controlled** (`selected` prop) and **uncontrolled**
+ * (`defaultSelected` prop) usage.
+ *
+ * @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>.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <MultiSelectInput
+ *   focusId="colors"
+ *   items={[
+ *     { label: 'Red',  value: 'red' },
+ *     { label: 'Blue', value: 'blue' },
+ *   ]}
+ *   defaultSelected={['red']}
+ *   onSubmit={(vals) => console.log('Confirmed:', vals)}
+ * />
+ *
+ * // Controlled
+ * const [sel, setSel] = useState<string[]>([]);
+ * <MultiSelectInput
+ *   focusId="colors"
+ *   items={items}
+ *   selected={sel}
+ *   onChange={setSel}
+ * />
+ * ```
+ */
+export function MultiSelectInput({ items = [], selected: controlledSelected, defaultSelected = [], onChange, onSubmit, onSelect, onUnselect, onHighlight, indicatorComponent, checkboxComponent, itemComponent, focusId, limit: limitProp = 10, initialIndex = 0, storage, storageKey, }) {
+    const isFocused = useFocusState(focusId);
+    const { boundKeyboard, focusUnregister } = useKeyboard();
+    const IndicatorComp = indicatorComponent ?? defaultIndicator;
+    const CheckboxComp = checkboxComponent ?? defaultCheckbox;
+    const ItemComp = (itemComponent ??
+        defaultItem);
+    const isControlled = controlledSelected !== undefined;
+    const persistKey = storageKey ?? `multi:${focusId}`;
+    const [internalSelected, setInternalSelected] = useState(defaultSelected);
+    useEffect(() => {
+        if (!storage)
+            return;
+        let cancelled = false;
+        storage.read.arr(persistKey, defaultSelected).then((v) => {
+            if (!cancelled)
+                setInternalSelected(v);
+        });
+        return () => { cancelled = true; };
+    }, [storage, persistKey, defaultSelected]);
+    const selectedValues = isControlled
+        ? controlledSelected
+        : internalSelected;
+    const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+    const hasLimit = items.length > limitProp;
+    const limit = hasLimit ? limitProp : items.length;
+    const [highlightedIndex, setHighlightedIndex] = useState(initialIndex);
+    const [scrollOffset, setScrollOffset] = useState(0);
+    const visibleItems = useMemo(() => {
+        if (!hasLimit)
+            return items;
+        return items.slice(scrollOffset, scrollOffset + limit);
+    }, [items, hasLimit, limit, scrollOffset]);
+    // 用 ref 保存最新值，避免键盘回调中的闭包过期
+    const highlightedIndexRef = useRef(highlightedIndex);
+    highlightedIndexRef.current = highlightedIndex;
+    const selectedValuesRef = useRef(selectedValues);
+    selectedValuesRef.current = selectedValues;
+    const selectedSetRef = useRef(selectedSet);
+    selectedSetRef.current = selectedSet;
+    const visibleItemsRef = useRef(visibleItems);
+    visibleItemsRef.current = visibleItems;
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onSubmitRef = useRef(onSubmit);
+    onSubmitRef.current = onSubmit;
+    const onSelectRef = useRef(onSelect);
+    onSelectRef.current = onSelect;
+    const onUnselectRef = useRef(onUnselect);
+    onUnselectRef.current = onUnselect;
+    const onHighlightRef = useRef(onHighlight);
+    onHighlightRef.current = onHighlight;
+    const isControlledRef = useRef(isControlled);
+    isControlledRef.current = isControlled;
+    const allItemsRef = useRef(items);
+    allItemsRef.current = items;
+    const storageRef = useRef(storage);
+    storageRef.current = storage;
+    const persistKeyRef = useRef(persistKey);
+    persistKeyRef.current = persistKey;
+    // items 变化时修正 scroll / highlight 溢出
+    useEffect(() => {
+        if (items.length === 0) {
+            setHighlightedIndex(0);
+            setScrollOffset(0);
+            return;
+        }
+        if (scrollOffset + limit > items.length) {
+            setScrollOffset(Math.max(0, items.length - limit));
+        }
+        if (highlightedIndex >= limit ||
+            highlightedIndex >= visibleItems.length) {
+            setHighlightedIndex(clamp(items.length > 0 ? items.length - 1 : 0, 0, limit - 1));
+        }
+    }, [
+        items.length,
+        scrollOffset,
+        limit,
+        highlightedIndex,
+        visibleItems.length,
+    ]);
+    // 高亮变化时通知外部
+    useEffect(() => {
+        const item = visibleItems[highlightedIndex];
+        if (item && onHighlightRef.current) {
+            onHighlightRef.current(item);
+        }
+    }, [highlightedIndex, visibleItems]);
+    // 移动高亮光标
+    const moveHighlight = useCallback((delta) => {
+        setHighlightedIndex((prev) => {
+            if (!hasLimit) {
+                return clamp(prev + delta, 0, Math.max(0, items.length - 1));
+            }
+            const absIdx = scrollOffset + prev;
+            const newAbs = clamp(absIdx + delta, 0, Math.max(0, items.length - 1));
+            if (newAbs < scrollOffset) {
+                setScrollOffset(newAbs);
+                return 0;
+            }
+            if (newAbs >= scrollOffset + limit) {
+                setScrollOffset(newAbs - limit + 1);
+                return limit - 1;
+            }
+            return newAbs - scrollOffset;
+        });
+    }, [hasLimit, items.length, limit, scrollOffset]);
+    // 切换选中状态
+    const toggleItem = useCallback((item) => {
+        const isCurrentlySelected = selectedSetRef.current.has(item.value);
+        let newSelected;
+        if (isCurrentlySelected) {
+            newSelected = selectedValuesRef.current.filter((v) => v !== item.value);
+            onUnselectRef.current?.(item);
+        }
+        else {
+            newSelected = [
+                ...selectedValuesRef.current,
+                item.value,
+            ];
+            onSelectRef.current?.(item);
+        }
+        onChangeRef.current?.(newSelected);
+        if (!isControlledRef.current) {
+            setInternalSelected(newSelected);
+            storageRef.current?.write.arr(persistKeyRef.current, newSelected);
+        }
+    }, []);
+    // 提交
+    const handleSubmit = useCallback(() => {
+        onSubmitRef.current?.(selectedValuesRef.current);
+    }, []);
+    // Unregister old focus target when focusId changes
+    useEffect(() => {
+        return () => focusUnregister(focusId);
+    }, [focusId]);
+    // 注册键盘绑定
+    useEffect(() => {
+        const fid = focusId;
+        const unUp = boundKeyboard(['up', 'k'], () => moveHighlight(-1), { focusId: fid });
+        const unDown = boundKeyboard(['down', 'j'], () => moveHighlight(1), { focusId: fid });
+        // 空格键在 Ink 中规范化后是 ' '（非 'space'）
+        const unSpace = boundKeyboard([' '], () => {
+            const item = visibleItemsRef.current[highlightedIndexRef.current];
+            if (item)
+                toggleItem(item);
+        }, { focusId: fid });
+        const unReturn = boundKeyboard(['return'], () => handleSubmit(), { focusId: fid });
+        // a 全选
+        const unSelectAll = boundKeyboard(['a'], () => {
+            const allItems = allItemsRef.current;
+            const allValues = allItems.map((item) => item.value);
+            for (const item of allItems) {
+                if (!selectedSetRef.current.has(item.value)) {
+                    onSelectRef.current?.(item);
+                }
+            }
+            onChangeRef.current?.(allValues);
+            if (!isControlledRef.current) {
+                setInternalSelected(allValues);
+                storageRef.current?.write.arr(persistKeyRef.current, allValues);
+            }
+        }, { focusId: fid });
+        // q 取消全选
+        const unDeselectAll = boundKeyboard(['q'], () => {
+            const allItems = allItemsRef.current;
+            for (const item of allItems) {
+                if (selectedSetRef.current.has(item.value)) {
+                    onUnselectRef.current?.(item);
+                }
+            }
+            onChangeRef.current?.([]);
+            if (!isControlledRef.current) {
+                setInternalSelected([]);
+                storageRef.current?.write.arr(persistKeyRef.current, []);
+            }
+        }, { focusId: fid });
+        // 数字键 1-9 直接切换对应可见项
+        const numUnbinds = [];
+        for (let i = 1; i <= Math.min(9, visibleItems.length); i++) {
+            const idx = i - 1;
+            numUnbinds.push(boundKeyboard([String(i)], () => {
+                const item = visibleItemsRef.current[idx];
+                if (item)
+                    toggleItem(item);
+            }, { focusId: fid }));
+        }
+        return () => {
+            unUp();
+            unDown();
+            unSpace();
+            unReturn();
+            unSelectAll();
+            unDeselectAll();
+            numUnbinds.forEach((fn) => fn());
+        };
+    }, [
+        focusId,
+        boundKeyboard,
+        moveHighlight,
+        toggleItem,
+        handleSubmit,
+        visibleItems.length,
+    ]);
+    return React.createElement(Box, { flexDirection: 'column' }, ...visibleItems.map((item, index) => {
+        const isItemHighlighted = index === highlightedIndex && isFocused;
+        const isItemSelected = selectedSet.has(item.value);
+        return React.createElement(Box, { key: item.Key ?? String(item.value) }, React.createElement(IndicatorComp, {
+            isHighlighted: isItemHighlighted,
+        }), React.createElement(CheckboxComp, {
+            isSelected: isItemSelected,
+        }), React.createElement(ItemComp, {
+            ...item,
+            isHighlighted: isItemHighlighted,
+        }));
+    }));
+}

package/dist/components/multi-select/types.d.ts

@@ -0,0 +1,100 @@
+import React from 'react';
+import type { Item } from '../select/types.js';
+import type { StorageAPI } from '../../storage/index.js';
+export type { Item };
+/**
+ * Props for the MultiSelectInput component.
+ *
+ * @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 interface MultiSelectInputProps<T, I extends Item<T> = Item<T>> {
+    /**
+     * Items to display in the list.
+     * Each item must have `label` and `value`, and optionally a `Key` for React key.
+     */
+    readonly items: I[];
+    /**
+     * Controlled mode: currently selected values.
+     * When provided, the component defers selection state to the parent.
+     * When `undefined`, the component manages its own state (uncontrolled).
+     */
+    readonly selected?: T[];
+    /**
+     * Uncontrolled mode: initially selected values.
+     * Only used when `selected` is `undefined`.
+     *
+     * @default []
+     */
+    readonly defaultSelected?: T[];
+    /**
+     * Called whenever the set of selected values changes.
+     * Receives the full array of currently selected values.
+     */
+    readonly onChange?: (selected: T[]) => void;
+    /**
+     * Called when the user presses Enter to confirm their selection.
+     * Receives the full array of currently selected values.
+     */
+    readonly onSubmit?: (selected: T[]) => void;
+    /**
+     * Called when an individual item is selected (toggled on).
+     */
+    readonly onSelect?: (item: I) => void;
+    /**
+     * Called when an individual item is unselected (toggled off).
+     */
+    readonly onUnselect?: (item: I) => void;
+    /**
+     * Called when the highlight cursor moves to a different item.
+     */
+    readonly onHighlight?: (item: I) => void;
+    /**
+     * Custom indicator component rendered before the checkbox.
+     * Receives `isHighlighted` to show which item the cursor is on.
+     */
+    readonly indicatorComponent?: React.ComponentType<{
+        isHighlighted: boolean;
+    }>;
+    /**
+     * Custom checkbox component rendered between indicator and item.
+     * Receives `isSelected` to show whether the item is checked.
+     */
+    readonly checkboxComponent?: React.ComponentType<{
+        isSelected: boolean;
+    }>;
+    /**
+     * Custom item renderer.
+     * Receives all item properties plus `isHighlighted`.
+     */
+    readonly itemComponent?: React.ComponentType<I & {
+        isHighlighted: boolean;
+    }>;
+    /**
+     * Focus identifier used by the keyboard system.
+     * Must be unique on the current screen.
+     */
+    readonly focusId: string;
+    /**
+     * Maximum number of visible items before enabling scroll.
+     *
+     * @default 10
+     */
+    readonly limit?: number;
+    /**
+     * Index of the initially highlighted item (0-based).
+     *
+     * @default 0
+     */
+    readonly initialIndex?: number;
+    /**
+     * Optional persistence instance. When provided, the selected values are
+     * automatically saved and restored across sessions.
+     */
+    readonly storage?: StorageAPI;
+    /**
+     * Storage key used for persistence. Defaults to `"multi:<focusId>"` when
+     * not provided.
+     */
+    readonly storageKey?: string;
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/components/number-input/NumberInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface NumberInputProps {
+    focusId: string;
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+export declare function NumberInput({ focusId, value, onChange, min, max, step, }: NumberInputProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import { Text } from 'ink';
+import { useKeyboard, useFocusState } from '../../keyboard/index.js';
+export function NumberInput({ focusId, value, onChange, min = -Infinity, max = Infinity, step = 1, }) {
+    const isFocused = useFocusState(focusId);
+    const { boundKeyboard, focusUnregister } = useKeyboard();
+    // Unregister old focus target when focusId changes
+    useEffect(() => {
+        return () => focusUnregister(focusId);
+    }, [focusId]);
+    useEffect(() => {
+        const up = boundKeyboard(['up', 'right'], () => {
+            const next = Math.min(value + step, max);
+            if (next !== value)
+                onChange(next);
+        }, { focusId });
+        const down = boundKeyboard(['down', 'left'], () => {
+            const next = Math.max(value - step, min);
+            if (next !== value)
+                onChange(next);
+        }, { focusId });
+        // Capture digit input so number keys don't leak to other
+        // focus targets (e.g. SelectInput's 1-9 bindings).
+        // Guard: skip non-digit input and reject NaN propagation
+        const wildcard = boundKeyboard(['*'], (input) => {
+            if (isNaN(value))
+                return;
+            const digit = parseInt(input, 10);
+            if (isNaN(digit))
+                return;
+            // Append digit: 25 + '3' → 253, clamped to [min, max]
+            const next = Math.min(Math.max(Number(String(value) + String(digit)), min), max);
+            if (next !== value)
+                onChange(next);
+        }, { focusId });
+        return () => {
+            up();
+            down();
+            wildcard();
+        };
+    }, [focusId, value, min, max, step, onChange]);
+    const text = isFocused ? `${value}█` : String(value);
+    return React.createElement(Text, null, text);
+}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ProgressBarProps {
+    percent?: number;
+    width?: number;
+    color?: string;
+    showPercent?: boolean;
+    char?: string;
+    emptyChar?: string;
+}
+export declare function ProgressBar({ percent, width, color, showPercent, char, emptyChar, }: ProgressBarProps): React.JSX.Element;
+export {};

package/dist/components/progress-bar/ProgressBar.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Text } from 'ink';
+export function ProgressBar({ percent = 0, width = 20, color = 'cyan', showPercent = true, char = '█', emptyChar = '░', }) {
+    const clamped = Math.max(0, Math.min(100, percent));
+    const filled = Math.round((clamped / 100) * width);
+    const bar = char.repeat(filled) + emptyChar.repeat(width - filled);
+    const content = showPercent ? `[${bar}] ${clamped}%` : `[${bar}]`;
+    return React.createElement(Text, { color: color }, content);
+}

package/dist/components/search-input/SearchInput.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SearchInputProps {
+    focusId: string;
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    onSubmit?: (value: string) => void;
+}
+export declare function SearchInput({ focusId, value, onChange, placeholder, onSubmit, }: SearchInputProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+import React, { useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { TextInput } from '../text/TextInput.js';
+import { useKeyboard } from '../../keyboard/index.js';
+export function SearchInput({ focusId, value, onChange, placeholder, onSubmit, }) {
+    const { boundKeyboard } = useKeyboard();
+    useEffect(() => {
+        const unEsc = boundKeyboard(['escape'], () => onChange(''), { focusId });
+        return () => { unEsc(); };
+    }, [focusId, onChange]);
+    return (React.createElement(Box, null,
+        React.createElement(Text, { color: "blue" }, "Search "),
+        React.createElement(TextInput, { focusId: focusId, value: value, onChange: onChange, placeholder: placeholder, onSubmit: onSubmit }),
+        value ? React.createElement(Text, { color: "grey" }, " \u2573") : null));
+}

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import type { SelectInputProps, Item } from './types.js';
+/**
+ * A single-select list component integrated with the ink-cartridge keyboard and
+ * focus system.
+ *
+ * Each instance registers a focus target identified by {@link SelectInputProps.focusId}
+ * on the current screen's keyboard layer. Users navigate between multiple
+ * SelectInputs on the same screen with Tab / Shift+Tab. Within the active
+ * component, arrow keys (or vim-style j/k) move the highlight, and Enter
+ * confirms the selection. Number keys 1-9 directly select an item.
+ *
+ * When the component is not the active focus target, its items are visually
+ * dimmed and no key events are delivered to it.
+ *
+ * @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>>;