1  import figures from 'figures'
 2  import { Box, Text } from 'ink'
 3  import React, { type ReactNode } from 'react'
 4  import { type Theme } from './theme.js'
 5  import { useComponentTheme } from '@inkjs/ui'
 6  
 7  export type SelectOptionProps = {
 8    /**
 9     * Determines if option is focused.
10     */
11    readonly isFocused: boolean
12  
13    /**
14     * Determines if option is selected.
15     */
16    readonly isSelected: boolean
17  
18    /**
19     * Determines if pointer is shown when selected
20     */
21    readonly smallPointer?: boolean
22  
23    /**
24     * Option label.
25     */
26    readonly children: ReactNode
27  }
28  
29  export function SelectOption({
30    isFocused,
31    isSelected,
32    smallPointer,
33    children,
34  }: SelectOptionProps) {
35    const { styles } = useComponentTheme<Theme>('Select')
36  
37    return (
38      <Box {...styles.option({ isFocused })}>
39        {isFocused && (
40          <Text {...styles.focusIndicator()}>
41            {smallPointer ? figures.triangleDownSmall : figures.pointer}
42          </Text>
43        )}
44  
45        <Text {...styles.label({ isFocused, isSelected })}>{children}</Text>
46  
47        {isSelected && (
48          <Text {...styles.selectedIndicator()}>{figures.tick}</Text>
49        )}
50      </Box>
51    )
52  }