bin/cli/tui-components/MenuSelect.jsx

import React, { useState } from "react";
import { Box, Text, useInput } from "ink";

export function MenuSelect({ items = [], onSelect, initial = 0 }) {
  const [idx, setIdx] = useState(Math.min(initial, Math.max(0, items.length - 1)));

  useInput((input, key) => {
    if (items.length === 0) return;
    if (key.upArrow) setIdx((i) => (i - 1 + items.length) % items.length);
    if (key.downArrow) setIdx((i) => (i + 1) % items.length);
    if (key.return && onSelect) onSelect(items[idx]);
    const n = parseInt(input, 10);
    if (!isNaN(n) && n >= 1 && n <= items.length) {
      const newIdx = n - 1;
      setIdx(newIdx);
      if (onSelect) onSelect(items[newIdx]);
    }
  });

  return (
    <Box flexDirection="column">

      {items.map((item, i) => (

        <Box key={i}>

          <Text bold={i === idx} color={i === idx ? "yellow" : undefined} dimColor={item.disabled}>

            {i === idx ? "▶ " : "  "}

            {item.label}

          </Text>

          {item.hint && (

            <Text dimColor>

              {"  "}

              {item.hint}

            </Text>

          )}

        </Box>

      ))}

    </Box>
  );
}