nick-skriabin/glyph: A React-based framework for building modern, composable terminal UIs.

import React from "react";
import { render, Box, Text, Keybind, useApp } from "@nick-skriabin/glyph";

function App() {
  const { exit } = useApp();

  return (
    Box style={{ border: "round", borderColor: "cyan", padding: 1 }}>
      Text style={{ bold: true, color: "green" }}>Hello, Glyph!Text>
      Keybind keypress="q" onPress={() => exit()} />
    Box>
  );
}

render(App />);

Box style={{ flexDirection: "row", gap: 2, border: "single", padding: 1 }}>
  Box style={{ flexGrow: 1, bg: "blue" }}>
    Text>LeftText>
  Box>
  Box style={{ flexGrow: 1, bg: "red" }}>
    Text>RightText>
  Box>
Box>

Text style={{ color: "yellowBright", bold: true, textAlign: "center" }}>
  Warning: something happened
Text>

Input
  value={text}
  onChange={setText}
  placeholder="Type here..."
  style={{ bg: "blackBright", paddingX: 1 }}
  focusedStyle={{ bg: "white", color: "black" }}
/>

// Text input (default) - accepts any character
Input type="text" value={name} onChange={setName} />

// Number input - only accepts digits, decimal point, minus sign
Input type="number" value={age} onChange={setAge} placeholder="0" />

import { createMask, masks } from "@nick-skriabin/glyph";

// Pre-built masks
Input onBeforeChange={masks.usPhone} placeholder="(___) ___-____" />
Input onBeforeChange={masks.creditCard} placeholder="____ ____ ____ ____" />

// Custom masks: 9=digit, a=letter, *=alphanumeric
const licensePlate = createMask("aaa-9999");
Input onBeforeChange={licensePlate} placeholder="___-____" />

Button
  onPress={() => console.log("clicked")}
  style={{ border: "single", borderColor: "cyan", paddingX: 2 }}
  focusedStyle={{ borderColor: "yellowBright", bold: true }}
>
  Text>SubmitText>
Button>

const [agreed, setAgreed] = useState(false);

Checkbox
  checked={agreed}
  onChange={setAgreed}
  label="I agree to the terms"
  focusedStyle={{ color: "cyan" }}
/>

const [theme, setTheme] = useStatestring>("dark");

Radio
  items={[
    { label: "Light", value: "light" },
    { label: "Dark", value: "dark" },
    { label: "System", value: "system" },
  ]}
  value={theme}
  onChange={setTheme}
  focusedItemStyle={{ color: "cyan" }}
  selectedItemStyle={{ bold: true }}
/>

ScrollView style={{ flexGrow: 1, border: "single" }}>
  {items.map((item, i) => (
    Box key={i}>
      Text>{item}Text>
    Box>
  ))}
ScrollView>

ScrollView focusable={false} style={{ flexGrow: 1 }}>
  Input ... />  {/* ScrollView scrolls only when Input is focused */}
ScrollView>

List
  count={items.length}
  onSelect={(index) => handleSelect(items[index])}
  disabledIndices={new Set([2, 5])}
  renderItem={({ index, selected, focused }) => (
    Box style={selected && focused ? { bg: "cyan" } : {}}>
      Text style={selected ? { bold: true } : {}}>
        {selected ? "> " : "  "}{items[index]}
      Text>
    Box>
  )}
/>

Menu
  items={[
    { label: "New File", value: "new" },
    { label: "Open File", value: "open" },
    { label: "Export", value: "export", disabled: true },
    { label: "Quit", value: "quit" },
  ]}
  onSelect={(value) => handleAction(value)}
  highlightColor="yellow"
/>

const [lang, setLang] = useStatestring | undefined>();

Select
  items={[
    { label: "TypeScript", value: "ts" },
    { label: "JavaScript", value: "js" },
    { label: "Rust", value: "rust" },
    { label: "Go", value: "go" },
    { label: "COBOL", value: "cobol", disabled: true },
  ]}
  value={lang}
  onChange={setLang}
  placeholder="Pick a language..."
  maxVisible={6}
  highlightColor="yellow"
/>

FocusScope trap>
  Input value={v} onChange={setV} />
  Button onPress={submit}>
    Text>OKText>
  Button>
FocusScope>

Portal>
  Box style={{ width: "100%", height: "100%", justifyContent: "center", alignItems: "center" }}>
    Box style={{ width: 40, border: "double", bg: "black", padding: 1 }}>
      Text>Modal contentText>
    Box>
  Box>
Portal>

function App() {
  return (
    JumpNav activationKey="ctrl+o">
      Box style={{ flexDirection: "column", gap: 1 }}>
        Input placeholder="Name" />
        Input placeholder="Email" />
        Select items={countries} />
        Button onPress={submit}>SubmitButton>
      Box>
    JumpNav>
  );
}

Keybind keypress="ctrl+s" onPress={save} />
Keybind keypress="escape" onPress={close} />
Keybind keypress="q" onPress={() => exit()} />

Keybind keypress="ctrl+return" onPress={submit} priority />
Keybind keypress="alt+return" onPress={submit} priority />

Progress value={0.65} showPercent />
Progress indeterminate label="Loading" />

Spinner label="Loading..." style={{ color: "green" }} />
Spinner frames={["|", "https://github.com/", "-", "\\"]} intervalMs={100} />

function App() {
  const toast = useToast();
  return Keybind keypress="t" onPress={() =>
    toast({ message: "Saved!", variant: "success" })
  } />;
}

render(ToastHost position="top-right">App />ToastHost>);

function App() {
  const { alert, confirm } = useDialog();

  const handleDelete = async () => {
    const ok = await confirm("Delete this item?", {
      okText: "Delete",
      cancelText: "Keep"
    });
    if (ok) {
      // delete the item
    }
  };

  const handleSave = async () => {
    await saveData();
    await alert("Saved successfully!");
  };

  return Button onPress={handleDelete}>Text>DeleteText>Button>;
}

render(DialogHost>App />DialogHost>);

await alert(
  Box style={{ flexDirection: "column" }}>
    Text style={{ bold: true, color: "green" }}>✓ Success!Text>
    Text>Your changes have been saved.Text>
  Box>,
  { okText: "Got it!" }
);

Box style={{ flexDirection: "row" }}>
  Text>LeftText>
  Spacer />
  Text>RightText>
Box>

useInput((key) => {
  if (key.name === "escape") close();
  if (key.ctrl && key.name === "s") save();
});

const ref = useRef(null);
const { focused, focus } = useFocus(ref);

Box ref={ref} focusable>
  Text style={focused ? { color: "cyan" } : {}}>
    {focused ? "* focused *" : "not focused"}
  Text>
Box>

import { useFocusable, Box, Text } from "@nick-skriabin/glyph";

function CustomPicker({ items, onSelect }) {
  const [selected, setSelected] = useState(0);
  
  const { ref, isFocused } = useFocusable({
    onKeyPress: (key) => {
      if (key.name === "up") {
        setSelected(s => Math.max(0, s - 1));
        return true; // Consume the key
      }
      if (key.name === "down") {
        setSelected(s => Math.min(items.length - 1, s + 1));
        return true;
      }
      if (key.name === "return") {
        onSelect(items[selected]);
        return true;
      }
      return false; // Let other handlers process
    },
    onFocus: () => console.log("Picker focused"),
    onBlur: () => console.log("Picker blurred"),
    disabled: false, // Set to true to skip in tab order
  });

  return (
    Box
      ref={ref}
      focusable
      style={{ 
        border: "round",
        borderColor: isFocused ? "cyan" : "gray",
        padding: 1,
      }}
    >
      {items.map((item, i) => (
        Text key={i} style={{ inverse: i === selected }}>
          {i === selected ? "> " : "  "}{item}
        Text>
      ))}
    Box>
  );
}

const ref = useRef(null);
const layout = useLayout(ref);

// layout: { x, y, width, height, innerX, innerY, innerWidth, innerHeight }

const { exit, columns, rows } = useApp();

const app = render(App />, {
  stdout: process.stdout,
  stdin: process.stdin,
  debug: false,
  useNativeCursor: true, // Use terminal's native cursor (default: true)
});

app.unmount(); // Tear down
app.exit();    // Unmount and exit process

render(App />, { useNativeCursor: false });