@jakubmazanec/cli 0.3.1 → 0.3.2-next.c370ab6

package/build/ui/form/SelectInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../source/ui/form/SelectInput.tsx"],
-  "sourcesContent": ["import {Box, type BoxProps, type Key, Text, useInput} from 'ink';\nimport _ from 'lodash';\nimport {useEffect, useRef, useState} from 'react';\n\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\nimport {rotate} from '../internals.js';\nimport {type SelectInputItem} from './SelectInputItem.js';\n\n/**\n * {@linkcode SelectInput} component props.\n */\ntype SelectInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Items to display in a list. */\n  items: SelectInputItem[];\n\n  /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n  focus?: boolean | undefined;\n\n  /** Index of initially selected item. */\n  initialIndex?: number | undefined;\n\n  /** Number of items to display. */\n  limit?: number | undefined;\n\n  /** Handler function that is called when item is selected. */\n  onSelect?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Handler function that is called when item is highlighted. */\n  onHighlight?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Select input component.\n */\nexport function SelectInput({\n  label,\n  items,\n  focus = true,\n  initialIndex = 0,\n  limit: userDefinedLimit,\n  onSelect,\n  onHighlight,\n  isComplete,\n  ...boxProps\n}: SelectInputProps): JSX.Element {\n  let [rotatedIndex, setRotatedIndex] = useState(0);\n  let [selectedIndex, setSelectedIndex] = useState(initialIndex);\n  let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;\n  let limit = hasLimit ? Math.min(userDefinedLimit as number, items.length) : items.length;\n  let previousItems = useRef<SelectInputItem[]>(items);\n\n  useEffect(() => {\n    if (\n      !_.isEqual(\n        previousItems.current.map((item) => item.value),\n        items.map((item) => item.value),\n      )\n    ) {\n      setRotatedIndex(0);\n      setSelectedIndex(0);\n    }\n\n    previousItems.current = items;\n  }, [items]);\n\n  useInput(\n    (input: string, key: Key) => {\n      if (input === 'k' || key.upArrow) {\n        let lastIndex = (hasLimit ? limit : items.length) - 1;\n        let isAtFirstIndex = selectedIndex === 0;\n        let nextIndex = hasLimit ? selectedIndex : lastIndex;\n        let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;\n        let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;\n\n        setRotatedIndex(nextRotatedIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (input === 'j' || key.downArrow) {\n        let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;\n        let nextIndex = hasLimit ? selectedIndex : 0;\n        let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;\n        let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;\n\n        setRotatedIndex(nextRotatedIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (key.return) {\n        let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;\n\n        if (typeof onSelect === 'function') {\n          onSelect(slicedItems[selectedIndex] as SelectInputItem);\n        }\n      }\n    },\n    {isActive: focus},\n  );\n\n  let visibleItems: SelectInputItem[] =\n    hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ?\n          <Text color={colors.body}>\n            {items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)}\n          </Text>\n        : <Box flexDirection=\"column\">\n            {visibleItems.map((item, index) => {\n              let isSelected = index === selectedIndex;\n\n              return (\n                <Box key={item.value}>\n                  <Box marginRight={1}>\n                    {isSelected ?\n                      <Text color={colors.selected}>{icons.selectedCircle}</Text>\n                    : <Text color={colors.unselected}>{icons.unselectedCircle}</Text>}\n                  </Box>\n                  <Text color={isSelected ? colors.highlighted : colors.muted}>{item.label}</Text>\n                </Box>\n              );\n            })}\n          </Box>\n        }\n      </Box>\n    </Box>\n  );\n}\n"],
+  "sourcesContent": ["import {Box, type BoxProps, type Key, Text, useInput} from 'ink';\nimport _ from 'lodash';\nimport {useEffect, useRef, useState} from 'react';\n\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\nimport {rotate} from '../internals.js';\nimport {type SelectInputItem} from './SelectInputItem.js';\n\n/**\n * {@linkcode SelectInput} component props.\n */\ntype SelectInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Items to display in a list. */\n  items: SelectInputItem[];\n\n  /** Should component listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n  focus?: boolean | undefined;\n\n  /** Index of initially selected item. */\n  initialIndex?: number | undefined;\n\n  /** Number of items to display. */\n  limit?: number | undefined;\n\n  /** Handler function that is called when item is selected. */\n  onSelect?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Handler function that is called when item is highlighted. */\n  onHighlight?: ((item: SelectInputItem) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Select input component.\n */\nexport function SelectInput({\n  label,\n  items,\n  focus = true,\n  initialIndex = 0,\n  limit: userDefinedLimit,\n  onSelect,\n  onHighlight,\n  isComplete,\n  ...boxProps\n}: SelectInputProps): JSX.Element {\n  let [rotatedIndex, setRotatedIndex] = useState(0);\n  let [selectedIndex, setSelectedIndex] = useState(initialIndex);\n  let hasLimit = typeof userDefinedLimit === 'number' && items.length > userDefinedLimit;\n  let limit = hasLimit ? Math.min(userDefinedLimit as number, items.length) : items.length;\n  let previousItems = useRef<SelectInputItem[]>(items);\n\n  useEffect(() => {\n    if (\n      !_.isEqual(\n        previousItems.current.map((item) => item.value),\n        items.map((item) => item.value),\n      )\n    ) {\n      setRotatedIndex(0);\n      setSelectedIndex(0);\n    }\n\n    previousItems.current = items;\n  }, [items]);\n\n  useInput(\n    (input: string, key: Key) => {\n      if (input === 'k' || key.upArrow) {\n        let lastIndex = (hasLimit ? limit : items.length) - 1;\n        let isAtFirstIndex = selectedIndex === 0;\n        let nextIndex = hasLimit ? selectedIndex : lastIndex;\n        let nextRotatedIndex = isAtFirstIndex ? rotatedIndex + 1 : rotatedIndex;\n        let nextSelectedIndex = isAtFirstIndex ? nextIndex : selectedIndex - 1;\n\n        setRotatedIndex(nextRotatedIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (input === 'j' || key.downArrow) {\n        let isAtLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;\n        let nextIndex = hasLimit ? selectedIndex : 0;\n        let nextRotatedIndex = isAtLastIndex ? rotatedIndex - 1 : rotatedIndex;\n        let nextSelectedIndex = isAtLastIndex ? nextIndex : selectedIndex + 1;\n\n        setRotatedIndex(nextRotatedIndex);\n        setSelectedIndex(nextSelectedIndex);\n\n        let slicedItems = hasLimit ? rotate(items, nextRotatedIndex).slice(0, limit) : items;\n\n        if (typeof onHighlight === 'function') {\n          onHighlight(slicedItems[nextSelectedIndex] as SelectInputItem);\n        }\n      }\n\n      if (key.return) {\n        let slicedItems = hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;\n\n        if (typeof onSelect === 'function') {\n          onSelect(slicedItems[selectedIndex] as SelectInputItem);\n        }\n      }\n    },\n    {isActive: focus},\n  );\n\n  let visibleItems: SelectInputItem[] =\n    hasLimit ? rotate(items, rotatedIndex).slice(0, limit) : items;\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ?\n          <Text color={colors.body}>\n            {items[selectedIndex]?.label ?? String(items[selectedIndex]?.value)}\n          </Text>\n        : <Box flexDirection=\"column\">\n            {visibleItems.map((item, index) => {\n              let isSelected = index === selectedIndex;\n\n              return (\n                <Box key={item.value}>\n                  <Box marginRight={1}>\n                    {isSelected ?\n                      <Text color={colors.selected}>{icons.selectedCircle}</Text>\n                    : <Text color={colors.unselected}>{icons.unselectedCircle}</Text>}\n                  </Box>\n                  <Text color={isSelected ? colors.highlighted : colors.muted}>{item.label}</Text>\n                </Box>\n              );\n            })}\n          </Box>\n        }\n      </Box>\n    </Box>\n  );\n}\n\n// partially based on https://github.com/vadimdemedes/ink-select-input/tree/309497ca641f55d8df0083ec2d07264f101358e4 (see https://github.com/vadimdemedes/ink-select-input/blob/309497ca641f55d8df0083ec2d07264f101358e4/license for license)\n"],
   "mappings": "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",
   "names": []
 }

package/build/ui/form/TextInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../source/ui/form/TextInput.tsx"],
-  "sourcesContent": ["// TODO: resolve\n/* eslint-disable complexity -- TODO */\nimport chalk from 'chalk';\nimport {Box, type BoxProps, Text, useInput} from 'ink';\nimport {useEffect, useState} from 'react';\n\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\n\n/**\n * Text input component props.\n */\nexport type TextInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Text to display when `value` is empty. */\n  placeholder?: string | undefined;\n\n  /** Value. */\n  value: string;\n\n  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n  focus?: boolean | undefined;\n\n  /** Replace all chars and mask the value. Useful for password inputs. */\n  mask?: string | undefined;\n\n  /** Show cursor and allow navigation using arrow keys. */\n  showCursor?: boolean | undefined;\n\n  /** Validation function that is called when value changes. If this function throws an error*/\n  validate?: ((value: string) => void) | undefined;\n\n  /** Handler function that is called when value changes. */\n  onChange: (value: string) => void;\n\n  /** Handler function that is called when enter is pressed. */\n  onSubmit?: ((value: string) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Text input component.\n */\nexport function TextInput({\n  label,\n  validate,\n  isComplete,\n  value: originalValue,\n  placeholder = '',\n  focus = true,\n  mask,\n  showCursor = true,\n  onChange,\n  onSubmit,\n  ...boxProps\n}: TextInputProps) {\n  let [validationError, setValidationError] = useState('');\n  let [state, setState] = useState({\n    cursorOffset: (originalValue || '').length,\n    cursorWidth: 0,\n  });\n\n  useEffect(() => {\n    setState((previousState) => {\n      if (!focus || !showCursor) {\n        return previousState;\n      }\n\n      let newValue = originalValue || '';\n\n      if (previousState.cursorOffset > newValue.length - 1) {\n        return {\n          cursorOffset: newValue.length,\n          cursorWidth: 0,\n        };\n      }\n\n      return previousState;\n    });\n  }, [originalValue, focus, showCursor]);\n\n  let value = mask ? mask.repeat(originalValue.length) : originalValue;\n  let renderedValue = value;\n  let renderedPlaceholder = placeholder ? chalk[colors.muted](placeholder) : undefined;\n\n  if (showCursor && focus) {\n    renderedPlaceholder =\n      placeholder.length > 0 ?\n        chalk.inverse(placeholder[0]) + chalk[colors.muted](placeholder.slice(1))\n      : chalk.inverse(' ');\n\n    renderedValue = value.length > 0 ? '' : chalk.inverse(' ');\n\n    for (let [i, character] of Object.entries(value)) {\n      if (Number(i) >= state.cursorOffset && Number(i) <= state.cursorOffset) {\n        renderedValue += chalk.inverse(character);\n      } else {\n        renderedValue += character;\n      }\n    }\n\n    if (value.length > 0 && state.cursorOffset === value.length) {\n      renderedValue += chalk.inverse(' ');\n    }\n  }\n\n  useInput(\n    (input, key) => {\n      if (\n        key.upArrow ||\n        key.downArrow ||\n        (key.ctrl && input === 'c') ||\n        (key.shift && key.tab) ||\n        key.tab\n      ) {\n        return;\n      }\n\n      if (key.return) {\n        if (onSubmit) {\n          if (validate) {\n            try {\n              validate(originalValue);\n            } catch (error: unknown) {\n              setValidationError((error as Error).message);\n\n              return;\n            }\n          }\n\n          if (validationError) {\n            setValidationError('');\n          } else {\n            onSubmit(originalValue);\n          }\n        }\n\n        return;\n      }\n\n      let nextCursorOffset = state.cursorOffset;\n      let nextValue = originalValue;\n      let nextCursorWidth = 0;\n\n      if (key.leftArrow) {\n        if (showCursor) {\n          nextCursorOffset -= 1;\n        }\n      } else if (key.rightArrow) {\n        if (showCursor) {\n          nextCursorOffset += 1;\n        }\n      } else if (key.backspace || key.delete) {\n        if (state.cursorOffset > 0) {\n          nextValue =\n            originalValue.slice(0, state.cursorOffset - 1) +\n            originalValue.slice(state.cursorOffset, originalValue.length);\n\n          nextCursorOffset -= 1;\n        }\n      } else {\n        nextValue =\n          originalValue.slice(0, state.cursorOffset) +\n          input +\n          originalValue.slice(state.cursorOffset, originalValue.length);\n\n        nextCursorOffset += input.length;\n\n        if (input.length > 1) {\n          nextCursorWidth = input.length;\n        }\n      }\n\n      if (state.cursorOffset < 0) {\n        nextCursorOffset = 0;\n      }\n\n      if (state.cursorOffset > originalValue.length) {\n        nextCursorOffset = originalValue.length;\n      }\n\n      setState({\n        cursorOffset: nextCursorOffset,\n        cursorWidth: nextCursorWidth,\n      });\n\n      if (nextValue !== originalValue) {\n        onChange(nextValue);\n      }\n    },\n    {isActive: focus},\n  );\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ?\n          <Text color={colors.body}>{value}</Text>\n        : <Text color={colors.highlighted}>\n            {placeholder ?\n              value.length > 0 ?\n                renderedValue\n              : renderedPlaceholder\n            : renderedValue}\n          </Text>\n        }\n        {validationError ?\n          <Box marginTop={0}>\n            <Text color={colors.warning}>{validationError}</Text>\n          </Box>\n        : null}\n      </Box>\n    </Box>\n  );\n}\n"],
+  "sourcesContent": ["// TODO: resolve\n/* eslint-disable complexity -- TODO */\nimport chalk from 'chalk';\nimport {Box, type BoxProps, Text, useInput} from 'ink';\nimport {useEffect, useState} from 'react';\n\nimport * as colors from '../colors.js';\nimport * as icons from '../icons.js';\n\n/**\n * Text input component props.\n */\nexport type TextInputProps = BoxProps & {\n  /** Text to display as a label. */\n  label: string;\n\n  /** Text to display when `value` is empty. */\n  placeholder?: string | undefined;\n\n  /** Value. */\n  value: string;\n\n  /** Should component listen to Listen to user's input? Useful in case there are multiple input components at the same time and input must be handled only by a specific component. */\n  focus?: boolean | undefined;\n\n  /** Replace all chars and mask the value. Useful for password inputs. */\n  mask?: string | undefined;\n\n  /** Show cursor and allow navigation using arrow keys. */\n  showCursor?: boolean | undefined;\n\n  /** Validation function that is called when value changes. If this function throws an error*/\n  validate?: ((value: string) => void) | undefined;\n\n  /** Handler function that is called when value changes. */\n  onChange: (value: string) => void;\n\n  /** Handler function that is called when enter is pressed. */\n  onSubmit?: ((value: string) => void) | undefined;\n\n  /** Indicates whether value has been accepted. Component then doesn't accept more input. */\n  isComplete?: boolean | undefined;\n};\n\n/**\n * Text input component.\n */\nexport function TextInput({\n  label,\n  validate,\n  isComplete,\n  value: originalValue,\n  placeholder = '',\n  focus = true,\n  mask,\n  showCursor = true,\n  onChange,\n  onSubmit,\n  ...boxProps\n}: TextInputProps) {\n  let [validationError, setValidationError] = useState('');\n  let [state, setState] = useState({\n    cursorOffset: (originalValue || '').length,\n    cursorWidth: 0,\n  });\n\n  useEffect(() => {\n    setState((previousState) => {\n      if (!focus || !showCursor) {\n        return previousState;\n      }\n\n      let newValue = originalValue || '';\n\n      if (previousState.cursorOffset > newValue.length - 1) {\n        return {\n          cursorOffset: newValue.length,\n          cursorWidth: 0,\n        };\n      }\n\n      return previousState;\n    });\n  }, [originalValue, focus, showCursor]);\n\n  let value = mask ? mask.repeat(originalValue.length) : originalValue;\n  let renderedValue = value;\n  let renderedPlaceholder = placeholder ? chalk[colors.muted](placeholder) : undefined;\n\n  if (showCursor && focus) {\n    renderedPlaceholder =\n      placeholder.length > 0 ?\n        chalk.inverse(placeholder[0]) + chalk[colors.muted](placeholder.slice(1))\n      : chalk.inverse(' ');\n\n    renderedValue = value.length > 0 ? '' : chalk.inverse(' ');\n\n    for (let [i, character] of Object.entries(value)) {\n      if (Number(i) >= state.cursorOffset && Number(i) <= state.cursorOffset) {\n        renderedValue += chalk.inverse(character);\n      } else {\n        renderedValue += character;\n      }\n    }\n\n    if (value.length > 0 && state.cursorOffset === value.length) {\n      renderedValue += chalk.inverse(' ');\n    }\n  }\n\n  useInput(\n    (input, key) => {\n      if (\n        key.upArrow ||\n        key.downArrow ||\n        (key.ctrl && input === 'c') ||\n        (key.shift && key.tab) ||\n        key.tab\n      ) {\n        return;\n      }\n\n      if (key.return) {\n        if (onSubmit) {\n          if (validate) {\n            try {\n              validate(originalValue);\n            } catch (error: unknown) {\n              setValidationError((error as Error).message);\n\n              return;\n            }\n          }\n\n          if (validationError) {\n            setValidationError('');\n          } else {\n            onSubmit(originalValue);\n          }\n        }\n\n        return;\n      }\n\n      let nextCursorOffset = state.cursorOffset;\n      let nextValue = originalValue;\n      let nextCursorWidth = 0;\n\n      if (key.leftArrow) {\n        if (showCursor) {\n          nextCursorOffset -= 1;\n        }\n      } else if (key.rightArrow) {\n        if (showCursor) {\n          nextCursorOffset += 1;\n        }\n      } else if (key.backspace || key.delete) {\n        if (state.cursorOffset > 0) {\n          nextValue =\n            originalValue.slice(0, state.cursorOffset - 1) +\n            originalValue.slice(state.cursorOffset, originalValue.length);\n\n          nextCursorOffset -= 1;\n        }\n      } else {\n        nextValue =\n          originalValue.slice(0, state.cursorOffset) +\n          input +\n          originalValue.slice(state.cursorOffset, originalValue.length);\n\n        nextCursorOffset += input.length;\n\n        if (input.length > 1) {\n          nextCursorWidth = input.length;\n        }\n      }\n\n      if (state.cursorOffset < 0) {\n        nextCursorOffset = 0;\n      }\n\n      if (state.cursorOffset > originalValue.length) {\n        nextCursorOffset = originalValue.length;\n      }\n\n      setState({\n        cursorOffset: nextCursorOffset,\n        cursorWidth: nextCursorWidth,\n      });\n\n      if (nextValue !== originalValue) {\n        onChange(nextValue);\n      }\n    },\n    {isActive: focus},\n  );\n\n  return (\n    <Box {...boxProps}>\n      <Box marginRight={1}>\n        <Text>{isComplete ? icons.success : icons.question}</Text>\n      </Box>\n\n      <Box flexDirection=\"column\">\n        <Box marginRight={1}>\n          <Text color={colors.highlighted}>{label}</Text>\n        </Box>\n        {isComplete ?\n          <Text color={colors.body}>{value}</Text>\n        : <Text color={colors.highlighted}>\n            {placeholder ?\n              value.length > 0 ?\n                renderedValue\n              : renderedPlaceholder\n            : renderedValue}\n          </Text>\n        }\n        {validationError ?\n          <Box marginTop={0}>\n            <Text color={colors.warning}>{validationError}</Text>\n          </Box>\n        : null}\n      </Box>\n    </Box>\n  );\n}\n\n// partially based on https://github.com/vadimdemedes/ink-text-input/tree/0787c505415f0d059801d80600e4ccb0651385f3 (see https://github.com/vadimdemedes/ink-text-input/blob/0787c505415f0d059801d80600e4ccb0651385f3/license for license)\n"],
   "mappings": ";AAwMQ,cAGF,YAHE;AAtMR,OAAO,WAAW;AAClB,SAAQ,KAAoB,MAAM,gBAAe;AACjD,SAAQ,WAAW,gBAAe;AAElC,YAAY,YAAY;AACxB,YAAY,WAAW;AAwChB,gBAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,MAAI,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,EAAE;AACvD,MAAI,CAAC,OAAO,QAAQ,IAAI,SAAS;AAAA,IAC/B,eAAe,iBAAiB,IAAI;AAAA,IACpC,aAAa;AAAA,EACf,CAAC;AAED,YAAU,MAAM;AACd,aAAS,CAAC,kBAAkB;AAC1B,UAAI,CAAC,SAAS,CAAC,YAAY;AACzB,eAAO;AAAA,MACT;AAEA,UAAI,WAAW,iBAAiB;AAEhC,UAAI,cAAc,eAAe,SAAS,SAAS,GAAG;AACpD,eAAO;AAAA,UACL,cAAc,SAAS;AAAA,UACvB,aAAa;AAAA,QACf;AAAA,MACF;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,eAAe,OAAO,UAAU,CAAC;AAErC,MAAI,QAAQ,OAAO,KAAK,OAAO,cAAc,MAAM,IAAI;AACvD,MAAI,gBAAgB;AACpB,MAAI,sBAAsB,cAAc,MAAM,OAAO,KAAK,EAAE,WAAW,IAAI;AAE3E,MAAI,cAAc,OAAO;AACvB,0BACE,YAAY,SAAS,IACnB,MAAM,QAAQ,YAAY,CAAC,CAAC,IAAI,MAAM,OAAO,KAAK,EAAE,YAAY,MAAM,CAAC,CAAC,IACxE,MAAM,QAAQ,GAAG;AAErB,oBAAgB,MAAM,SAAS,IAAI,KAAK,MAAM,QAAQ,GAAG;AAEzD,aAAS,CAAC,GAAG,SAAS,KAAK,OAAO,QAAQ,KAAK,GAAG;AAChD,UAAI,OAAO,CAAC,KAAK,MAAM,gBAAgB,OAAO,CAAC,KAAK,MAAM,cAAc;AACtE,yBAAiB,MAAM,QAAQ,SAAS;AAAA,MAC1C,OAAO;AACL,yBAAiB;AAAA,MACnB;AAAA,IACF;AAEA,QAAI,MAAM,SAAS,KAAK,MAAM,iBAAiB,MAAM,QAAQ;AAC3D,uBAAiB,MAAM,QAAQ,GAAG;AAAA,IACpC;AAAA,EACF;AAEA;AAAA,IACE,CAAC,OAAO,QAAQ;AACd,UACE,IAAI,WACJ,IAAI,aACH,IAAI,QAAQ,UAAU,OACtB,IAAI,SAAS,IAAI,OAClB,IAAI,KACJ;AACA;AAAA,MACF;AAEA,UAAI,IAAI,QAAQ;AACd,YAAI,UAAU;AACZ,cAAI,UAAU;AACZ,gBAAI;AACF,uBAAS,aAAa;AAAA,YACxB,SAAS,OAAgB;AACvB,iCAAoB,MAAgB,OAAO;AAE3C;AAAA,YACF;AAAA,UACF;AAEA,cAAI,iBAAiB;AACnB,+BAAmB,EAAE;AAAA,UACvB,OAAO;AACL,qBAAS,aAAa;AAAA,UACxB;AAAA,QACF;AAEA;AAAA,MACF;AAEA,UAAI,mBAAmB,MAAM;AAC7B,UAAI,YAAY;AAChB,UAAI,kBAAkB;AAEtB,UAAI,IAAI,WAAW;AACjB,YAAI,YAAY;AACd,8BAAoB;AAAA,QACtB;AAAA,MACF,WAAW,IAAI,YAAY;AACzB,YAAI,YAAY;AACd,8BAAoB;AAAA,QACtB;AAAA,MACF,WAAW,IAAI,aAAa,IAAI,QAAQ;AACtC,YAAI,MAAM,eAAe,GAAG;AAC1B,sBACE,cAAc,MAAM,GAAG,MAAM,eAAe,CAAC,IAC7C,cAAc,MAAM,MAAM,cAAc,cAAc,MAAM;AAE9D,8BAAoB;AAAA,QACtB;AAAA,MACF,OAAO;AACL,oBACE,cAAc,MAAM,GAAG,MAAM,YAAY,IACzC,QACA,cAAc,MAAM,MAAM,cAAc,cAAc,MAAM;AAE9D,4BAAoB,MAAM;AAE1B,YAAI,MAAM,SAAS,GAAG;AACpB,4BAAkB,MAAM;AAAA,QAC1B;AAAA,MACF;AAEA,UAAI,MAAM,eAAe,GAAG;AAC1B,2BAAmB;AAAA,MACrB;AAEA,UAAI,MAAM,eAAe,cAAc,QAAQ;AAC7C,2BAAmB,cAAc;AAAA,MACnC;AAEA,eAAS;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,MACf,CAAC;AAED,UAAI,cAAc,eAAe;AAC/B,iBAAS,SAAS;AAAA,MACpB;AAAA,IACF;AAAA,IACA,EAAC,UAAU,MAAK;AAAA,EAClB;AAEA,SACE,qBAAC,OAAK,GAAG,UACP;AAAA,wBAAC,OAAI,aAAa,GAChB,8BAAC,QAAM,uBAAa,MAAM,UAAU,MAAM,UAAS,GACrD;AAAA,IAEA,qBAAC,OAAI,eAAc,UACjB;AAAA,0BAAC,OAAI,aAAa,GAChB,8BAAC,QAAK,OAAO,OAAO,aAAc,iBAAM,GAC1C;AAAA,MACC,aACC,oBAAC,QAAK,OAAO,OAAO,MAAO,iBAAM,IACjC,oBAAC,QAAK,OAAO,OAAO,aACjB,wBACC,MAAM,SAAS,IACb,gBACA,sBACF,eACJ;AAAA,MAED,kBACC,oBAAC,OAAI,WAAW,GACd,8BAAC,QAAK,OAAO,OAAO,SAAU,2BAAgB,GAChD,IACA;AAAA,OACJ;AAAA,KACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jakubmazanec/cli",
-  "version": "0.3.1",
+  "version": "0.3.2-next.c370ab6",
   "description": "TypeScript-first library for building CLIs.",
   "repository": {
     "type": "git",
@@ -27,10 +27,10 @@
     "typecheck": "tsc --project tsconfig.typecheck.json"
   },
   "dependencies": {
-    "@jakubmazanec/args": "^2.0.0",
-    "@jakubmazanec/error": "^3.0.0",
-    "@jakubmazanec/ts-utils": "^3.0.0",
-    "@jakubmazanec/zod-utils": "^2.0.0",
+    "@jakubmazanec/args": "2.0.2-next.c370ab6",
+    "@jakubmazanec/error": "3.0.2-next.c370ab6",
+    "@jakubmazanec/ts-utils": "3.0.2-next.c370ab6",
+    "@jakubmazanec/zod-utils": "2.0.2-next.c370ab6",
     "chalk": "^5.3.0",
     "fs-extra": "^11.2.0",
     "latest-version": "^9.0.0",
@@ -39,7 +39,7 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@jakubmazanec/eslint-config": "^3.0.0",
+    "@jakubmazanec/eslint-config": "3.2.0-next.c370ab6",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.14.202",
     "@types/node": "^20.8.5",
@@ -52,6 +52,7 @@
     "eslint": "^8.56.0",
     "ink": "^4.4.1",
     "ink-testing-library": "^3.0.0",
+    "lodash": "^4.17.21",
     "prettier": "^3.2.5",
     "prettier-plugin-packagejson": "^2.4.12",
     "react": "^18.2.0",

package/source/ui/form/SelectInput.tsx

@@ -154,3 +154,5 @@ export function SelectInput({
     </Box>
   );
 }
+
+// partially based on https://github.com/vadimdemedes/ink-select-input/tree/309497ca641f55d8df0083ec2d07264f101358e4 (see https://github.com/vadimdemedes/ink-select-input/blob/309497ca641f55d8df0083ec2d07264f101358e4/license for license)

package/source/ui/form/TextInput.tsx

@@ -224,3 +224,5 @@ export function TextInput({
     </Box>
   );
 }
+
+// partially based on https://github.com/vadimdemedes/ink-text-input/tree/0787c505415f0d059801d80600e4ccb0651385f3 (see https://github.com/vadimdemedes/ink-text-input/blob/0787c505415f0d059801d80600e4ccb0651385f3/license for license)