added color and layout customization

readme.md

@@ -37,7 +37,7 @@ const Demo = () => {
 		}
 	];
 
-	return <SelectInput items={items} onSelect={handleSelect} />;
+	return <SelectInput items={items} onSelect={handleSelect} defaultColor="green" accentColor="red" displayDirection="column"/>;
 };
 
 render(<Demo />);
@@ -98,3 +98,16 @@ Function to call when user selects an item. Item object is passed to that functi
 Type: `function`
 
 Function to call when user highlights an item. Item object is passed to that function as an argument.
+
+### direction
+
+Type: `argument`<br>
+Default: `column`
+
+Change the direction in which list items are displayed. Possible values are `row` or `column`.
+
+### defaultColor / accentColor
+
+Type: `argument`
+
+Argument that accepts standard colors. `defaultColor` is for the text, and `accentColor` is for the highlighted element.

src/Colors.tsx

@@ -0,0 +1,21 @@
+declare type Colors =
+	| 'black'
+	| 'red'
+	| 'green'
+	| 'yellow'
+	| 'blue'
+	| 'magenta'
+	| 'cyan'
+	| 'white'
+	| 'gray'
+	| 'grey'
+	| 'blackBright'
+	| 'redBright'
+	| 'greenBright'
+	| 'yellowBright'
+	| 'blueBright'
+	| 'magentaBright'
+	| 'cyanBright'
+	| 'whiteBright';
+
+export default Colors;

src/Indicator.tsx

@@ -2,14 +2,16 @@ import * as React from 'react';
 import type {FC} from 'react';
 import {Box, Text} from 'ink';
 import * as figures from 'figures';
+import Colors from './Colors';
 
 export interface Props {
 	isSelected?: boolean;
+	accentColor?: Colors;
 }
 
-const Indicator: FC<Props> = ({isSelected = false}) => (
+const Indicator: FC<Props> = ({isSelected = false, accentColor}) => (
 	<Box marginRight={1}>
-		{isSelected ? <Text color="blue">{figures.pointer}</Text> : <Text> </Text>}
+		{isSelected ? <Text color={accentColor}>{figures.pointer}</Text> : <Text> </Text>}
 	</Box>
 );
 

src/Item.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
 import type {FC} from 'react';
 import {Text} from 'ink';
+import Colors from './Colors';
 
 export interface Props {
 	isSelected?: boolean;
 	label: string;
+	defaultColor?: Colors;
+	accentColor?: Colors;
 }
 
-const Item: FC<Props> = ({isSelected = false, label}) => (
-	<Text color={isSelected ? 'blue' : undefined}>{label}</Text>
+const Item: FC<Props> = ({isSelected = false, label, defaultColor, accentColor}) => (
+	<Text color={isSelected ? accentColor : defaultColor}>{label}</Text>
 );
 
 export default Item;

src/SelectInput.tsx

@@ -8,6 +8,7 @@ import Indicator from './Indicator';
 import type {Props as IndicatorProps} from './Indicator';
 import Item from './Item';
 import type {Props as ItemProps} from './Item';
+import Colors from './Colors';
 
 interface Props<V> {
 	/**
@@ -54,6 +55,15 @@ interface Props<V> {
 	 * Function to call when user highlights an item. Item object is passed to that function as an argument.
 	 */
 	onHighlight?: (item: Item<V>) => void;
+
+	defaultColor?: Colors;
+	// Any color i.e: 'red', 'green' etc
+
+	accentColor?: Colors;
+	// Any color i.e: 'red', 'green' etc
+
+	displayDirection?: 'column' | 'row';
+	// Either 'row' or 'column'
 }
 
 export interface Item<V> {
@@ -71,7 +81,10 @@ function SelectInput<V>({
 	itemComponent = Item,
 	limit: customLimit,
 	onSelect,
-	onHighlight
+	onHighlight,
+	defaultColor,
+	accentColor,
+	displayDirection = 'column'
 }: Props<V>): JSX.Element {
 	const [rotateIndex, setRotateIndex] = useState(0);
 	const [selectedIndex, setSelectedIndex] = useState(initialIndex);
@@ -98,7 +111,7 @@ function SelectInput<V>({
 	useInput(
 		useCallback(
 			(input, key) => {
-				if (input === 'k' || key.upArrow) {
+				if (input === 'k' || key.upArrow || key.leftArrow) {
 					const lastIndex = (hasLimit ? limit : items.length) - 1;
 					const atFirstIndex = selectedIndex === 0;
 					const nextIndex = hasLimit ? selectedIndex : lastIndex;
@@ -119,7 +132,8 @@ function SelectInput<V>({
 					}
 				}
 
-				if (input === 'j' || key.downArrow) {
+				// Allows tabbing through elements
+				if (input === 'j' || key.downArrow || key.tab || key.rightArrow) {
 					const atLastIndex =
 						selectedIndex === (hasLimit ? limit : items.length) - 1;
 					const nextIndex = hasLimit ? selectedIndex : 0;
@@ -166,14 +180,14 @@ function SelectInput<V>({
 		: items;
 
 	return (
-		<Box flexDirection="column">
+		<Box flexDirection={displayDirection}>
 			{slicedItems.map((item, index) => {
 				const isSelected = index === selectedIndex;
 
 				return (
 					<Box key={item.key ?? item.value}>
-						{React.createElement(indicatorComponent, {isSelected})}
-						{React.createElement(itemComponent, {...item, isSelected})}
+						{React.createElement(indicatorComponent, {isSelected, accentColor})}
+						{React.createElement(itemComponent, {...item, isSelected, defaultColor, accentColor})}
 					</Box>
 				);
 			})}