51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T149e,/* @jsxImportSource @opentui/react */ import { useKeyboard } from "@opentui/react"; import { useEffect, useState } from "react"; import { useTheme } from "@/hooks/use-theme"; import type { BorderStyle } from "@/components/ui/types"; export interface TextInputProps { value?: string; onChange?: (value: string) => void; onSubmit?: (value: string) => void; placeholder?: string; mask?: string; showCursor?: boolean; highlightPastedText?: boolean; validate?: (value: string) => string | null; width?: number; label?: string; autoFocus?: boolean; id?: string; bordered?: boolean; borderStyle?: BorderStyle; paddingX?: number; cursor?: string; } export const TextInput = ({ value: controlledValue, onChange, onSubmit, placeholder = "", mask, showCursor = true, highlightPastedText = false, validate, width = 40, label, autoFocus: _autoFocus = false, id: _id, bordered = true, borderStyle = "rounded", paddingX = 1, cursor = "█", }: TextInputProps) => { const [internalValue, setInternalValue] = useState(""); const [cursorOffset, setCursorOffset] = useState(0); const [cursorWidth, setCursorWidth] = useState(0); const [error, setError] = useState(null); const theme = useTheme(); const [isFocused] = useState(true); const value = controlledValue ?? internalValue; useEffect(() => { if (cursorOffset > value.length) { setCursorOffset(value.length); } }, [value, cursorOffset]); const setValue = (next: string) => { if (onChange) { onChange(next); } else { setInternalValue(next); } }; useKeyboard((key) => { if (!isFocused) { return; } if ( key.name === "up" || key.name === "down" || (key.ctrl && key.name === "c") || key.name === "tab" ) { return; } if (key.name === "return") { const err = validate ? validate(value) : null; if (err) { setError(err); return; } setError(null); onSubmit?.(value); return; } if (key.name === "escape") { return; } let nextOffset = cursorOffset; let nextValue = value; let nextCursorWidth = 0; if (key.name === "left") { if (showCursor) { nextOffset = Math.max(0, nextOffset - 1); } } else if (key.name === "right") { if (showCursor) { nextOffset = Math.min(value.length, nextOffset + 1); } } else if (key.name === "backspace" || key.name === "delete") { if (cursorOffset > 0) { nextValue = value.slice(0, cursorOffset - 1) + value.slice(cursorOffset); nextOffset = cursorOffset - 1; } } else if (key.name.length === 1) { nextValue = value.slice(0, cursorOffset) + key.name + value.slice(cursorOffset); nextOffset = cursorOffset + key.name.length; if (key.name.length > 1) { nextCursorWidth = key.name.length; } } setCursorOffset(nextOffset); setCursorWidth(nextCursorWidth); if (nextValue !== value) { setValue(nextValue); } }); const displayValue = mask ? mask.repeat(value.length) : value; let borderColor: string; if (error) { borderColor = theme.colors.error; } else if (isFocused) { borderColor = theme.colors.focusRing; } else { borderColor = theme.colors.border; } const pasteWidth = highlightPastedText ? cursorWidth : 0; const renderValue = () => { if (!value && placeholder) { if (showCursor && isFocused) { return ( <> {placeholder[0] ?? " "} {placeholder.slice(1)} ); } return {placeholder}; } if (!showCursor || !isFocused) { return {displayValue}; } const before = displayValue.slice(0, cursorOffset - pasteWidth); const highlighted = displayValue.slice( cursorOffset - pasteWidth, cursorOffset ); const cursorChar = cursorOffset < displayValue.length ? displayValue[cursorOffset] : cursor; const after = displayValue.slice(cursorOffset + 1); return ( <> {before && {before}} {highlighted && ( {highlighted} )} {cursorChar} {after && {after}} ); }; const boxProps = bordered ? { borderColor, borderStyle, paddingLeft: paddingX, paddingRight: paddingX, width, } : { paddingLeft: paddingX, paddingRight: paddingX, width }; return ( {label && ( {label} )} {renderValue()} {error && {error}} ); }; 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@opentui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40opentui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@opentui/react"}]]}]}]]}],["$","$L51",null,{"namespace":"@termcn","registryDependencies":["https://termcn.dev/r/opentui/use-theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/opentui/ui/text-input.tsx","content":"$53","type":"registry:ui","target":"components/ui/text-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]