50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T1606,/* @jsxImportSource @opentui/react */ import { readdirSync, statSync } from "node:fs"; import { join, resolve } from "node:path"; import { useKeyboard } from "@opentui/react"; import { useState } from "react"; import { useTheme } from "@/hooks/use-theme"; export interface FilePickerProps { value?: string; onChange?: (path: string) => void; onSubmit?: (path: string) => void; label?: string; startDir?: string; extensions?: string[]; dirsOnly?: boolean; autoFocus?: boolean; id?: string; width?: number; maxVisible?: number; } interface FileEntry { name: string; path: string; isDir: boolean; } const readDir = ( dir: string, extensions?: string[], dirsOnly?: boolean ): FileEntry[] => { try { const entries = readdirSync(dir).filter((e) => !e.startsWith(".")); const result: FileEntry[] = []; for (const name of entries) { const fullPath = join(dir, name); try { const stat = statSync(fullPath); const isDir = stat.isDirectory(); if (dirsOnly && !isDir) { continue; } if ( extensions && !isDir && !extensions.some((ext) => name.endsWith(ext)) ) { continue; } result.push({ isDir, name, path: fullPath }); } catch { /* noop */ } } result.sort((a, b) => { if (a.isDir && !b.isDir) { return -1; } if (!a.isDir && b.isDir) { return 1; } return a.name.localeCompare(b.name); }); return result; } catch { return []; } }; export const FilePicker = ({ value: controlledValue, onChange, onSubmit, label, startDir = process.cwd(), extensions, dirsOnly = false, autoFocus: _autoFocus = false, id: _id, width = 50, maxVisible = 8, }: FilePickerProps) => { const theme = useTheme(); const [isFocused] = useState(true); const [currentDir, setCurrentDir] = useState(resolve(startDir)); const [cursor, setCursor] = useState(0); const [internalValue, setInternalValue] = useState(""); const selected = controlledValue ?? internalValue; const entries = readDir(currentDir, extensions, dirsOnly); const parentEntry: FileEntry = { isDir: true, name: "..", path: resolve(currentDir, ".."), }; const allEntries: FileEntry[] = [parentEntry, ...entries]; const visibleStart = Math.max(0, cursor - maxVisible + 1); const visible = allEntries.slice(visibleStart, visibleStart + maxVisible); useKeyboard((key) => { if (!isFocused) { return; } if (key.name === "up") { setCursor((c) => Math.max(0, c - 1)); } else if (key.name === "down") { setCursor((c) => Math.min(allEntries.length - 1, c + 1)); } else if (key.name === "return") { const entry = allEntries[cursor]; if (!entry) { return; } if (entry.isDir) { setCurrentDir(entry.path); setCursor(0); } else { if (onChange) { onChange(entry.path); } else { setInternalValue(entry.path); } onSubmit?.(entry.path); } } else if (key.name === " ") { const entry = allEntries[cursor]; if (entry && !entry.isDir) { if (onChange) { onChange(entry.path); } else { setInternalValue(entry.path); } } } else if (key.name === "escape") { setCurrentDir((d) => resolve(d, "..")); setCursor(0); } }); return ( {label && ( {label} )} {currentDir} {visible.map((entry, idx) => { const absIdx = visibleStart + idx; const isCursor = absIdx === cursor; const isSelected = entry.path === selected; let entryColor: string; if (entry.isDir) { entryColor = theme.colors.primary; } else if (isSelected) { entryColor = theme.colors.accent; } else { entryColor = theme.colors.foreground; } return ( {entry.isDir ? ( {"▶ "} {entry.name}/ ) : ( `· ${entry.name}` )} ); })} {allEntries.length > maxVisible && ( {`... ${allEntries.length - maxVisible} more`} )} {selected && ( {"Selected: "} {selected} )} {isFocused && ( ↑↓: navigate · Enter: open/select · Esc: up )} ); }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","@opentui/react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/%40opentui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","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":"text-xs font-medium","children":"@opentui/react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":["https://termcn.dev/r/opentui/use-theme.json"]}]]}],["$","$L51",null,{"sourceUrl":"https://termcn.vercel.app/r/opentui/file-picker.json","proxyUrl":"https://shadcnregistry.com/r/termcn/opentui-file-picker","itemId":"@termcn/opentui-file-picker"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/opentui/ui/file-picker.tsx","content":"$53","type":"registry:ui","target":"components/ui/file-picker.tsx"}]}]]}],"$L54"]}]

File Picker

Installation

Files

components

Styles