Specialized Inputs

import { PasswordInput } from '@termuijs/ui'

function LoginForm() {
    return (
        <PasswordInput
            placeholder="Password"
            onSubmit={(value) => authenticate(value)}
        />
    )
}

import { NumberInput } from '@termuijs/ui'

function PortField() {
    return (
        <NumberInput
            value={8080}
            min={1}
            max={65535}
            step={1}
            onChange={(n) => setPort(n)}
        />
    )
}

import { PathInput } from '@termuijs/ui'

function FileSelector() {
    return (
        <PathInput
            placeholder="/path/to/file"
            cwd={process.cwd()}
            onSubmit={(path) => openFile(path)}
        />
    )
}

import { KeyboardShortcuts } from '@termuijs/ui'
import type { KeyBinding } from '@termuijs/jsx'

const bindings: KeyBinding[] = [
    { key: 'q',      description: 'Quit',         category: 'General' },
    { key: 'ctrl+c', description: 'Force quit',    category: 'General' },
    { key: '?',      description: 'Show this help', category: 'General' },
    { key: 'up/down', description: 'Navigate',     category: 'Navigation' },
    { key: 'enter',  description: 'Select',        category: 'Navigation' },
    { key: 'tab',    description: 'Next panel',    category: 'Navigation' },
    { key: '/',      description: 'Search',        category: 'Actions' },
    { key: 'r',      description: 'Refresh',       category: 'Actions' },
]

function HelpScreen() {
    return <KeyboardShortcuts bindings={bindings} columns={2} />
}

import type { KeyBinding } from '@termuijs/jsx'

const binding: KeyBinding = {
    key: 'ctrl+s',
    description: 'Save file',
    category: 'File',         // optional grouping
}

import { Drawer } from '@termuijs/ui'

function App() {
    const [open, setOpen] = useState(false)
    return <Drawer edge="right" size={40} open={open} onClose={() => setOpen(false)}>{settingsPanel}</Drawer>
}

import { Wizard } from '@termuijs/ui'

function Setup() {
    return (
        <Wizard steps={['Account', 'Preferences', 'Confirm']} onComplete={handleDone}>
            <AccountStep />
            <PreferencesStep />
            <ConfirmStep />
        </Wizard>
    )
}

import { RadioGroup } from '@termuijs/ui'

function ThemePicker() {
    const [theme, setTheme] = useState('dark')
    return (
        <RadioGroup
            value={theme}
            onChange={setTheme}
            options={[{ label: 'Light', value: 'light' }, { label: 'Dark', value: 'dark' }]}
        />
    )
}

import { TreeSelect } from '@termuijs/ui'

function CategoryPicker() {
    return (
        <TreeSelect
            nodes={[{ label: 'Frontend', value: 'fe', children: [{ label: 'React', value: 'react' }] }]}
            onChange={setCategory}
        />
    )
}

import { TextArea } from '@termuijs/ui'

function NoteEditor() {
    return <TextArea placeholder="Write your note..." onSubmit={saveNote} />
}

import { ButtonGroup } from '@termuijs/ui'

function ViewToggle() {
    return (
        <ButtonGroup
            buttons={[{ label: 'List', value: 'list' }, { label: 'Grid', value: 'grid' }]}
            value={view}
            onChange={setView}
        />
    )
}

import { FilePicker } from '@termuijs/ui'

function OpenDialog() {
    return <FilePicker cwd={process.cwd()} onSelect={openFile} />
}

import { SegmentedControl } from '@termuijs/ui'

function SortControl() {
    return <SegmentedControl segments={['Name', 'Date', 'Size']} value={sort} onChange={setSort} />
}

import { MenuBar } from '@termuijs/ui'

function AppMenu() {
    return (
        <MenuBar
            menus={[
                { label: 'File', items: [{ id: 'new', label: 'New' }, { id: 'open', label: 'Open' }] },
                { label: 'Edit', items: [{ id: 'undo', label: 'Undo' }] },
            ]}
            onSelect={handleMenuAction}
        />
    )
}

import { MaskedInput } from '@termuijs/ui'

function DateField() {
    return <MaskedInput mask="99/99/9999" onChange={setDate} />
}

import { Disclosure } from '@termuijs/ui'

function AdvancedSection() {
    return (
        <Disclosure label="Advanced options">
            <AdvancedForm />
        </Disclosure>
    )
}

import { TagInput } from '@termuijs/ui'

function LabelInput() {
    return <TagInput tags={labels} placeholder="Add a label..." onChange={setLabels} />
}

import { Popover } from '@termuijs/ui'

function InfoButton() {
    const [open, setOpen] = useState(false)
    return (
        <Popover open={open} onClose={() => setOpen(false)}>
            <Text>More details here.</Text>
        </Popover>
    )
}

import { Combobox } from '@termuijs/ui'

function CitySearch() {
    return <Combobox options={cities} value={query} onChange={setQuery} onSelect={setCity} />
}

import { Slider } from '@termuijs/ui'

function VolumeControl() {
    return <Slider value={volume} min={0} max={100} step={5} onChange={setVolume} />
}

import { Switch } from '@termuijs/ui'

function AutoSaveToggle() {
    return <Switch label="Auto-save" checked={autoSave} onChange={setAutoSave} />
}

import { Rating } from '@termuijs/ui'

function Feedback() {
    return <Rating value={rating} max={5} onChange={setRating} />
}

import { SearchInput } from '@termuijs/ui'

function SearchBar() {
    return <SearchInput placeholder="Search..." value={query} onChange={setQuery} onSubmit={runSearch} />
}

import { Checkbox } from '@termuijs/ui'

function AgreementField() {
    return <Checkbox label="I agree to the terms" checked={agreed} onChange={setAgreed} />
}

import { CheckboxGroup } from '@termuijs/ui'

function FeatureFlags() {
    return (
        <CheckboxGroup
            options={[{ label: 'Hot reload', value: 'hmr' }, { label: 'Source maps', value: 'maps' }]}
            value={enabled}
            onChange={setEnabled}
        />
    )
}