@bunli/tui

bun add @bunli/tui @bunli/runtime

import { Form, TextField, SelectField, NumberField } from "@bunli/tui";
import { z } from "zod";

const schema = z.object({
  name: z.string().min(1),
  age: z.number().int().positive(),
  role: z.enum(["admin", "user", "guest"]),
});

function UserForm({ onSubmit }) {
  return (
    <Form title="User Registration" schema={schema} onSubmit={(values) => onSubmit(values)}>
      <TextField name="name" label="Name" />
      <NumberField name="age" label="Age" />
      <SelectField
        name="role"
        label="Role"
        options={[
          { label: "Admin", value: "admin" },
          { label: "User", value: "user" },
          { label: "Guest", value: "guest" },
        ]}
      />
    </Form>
  );
}

import { Container, Stack, Grid, Panel, Card } from "@bunli/tui";

function Dashboard() {
  return (
    <Container>
      <Stack direction="column" gap={1}>
        <Panel title="Header" />
        <Grid columns={2} gap={1}>
          <Card title="Metric 1" />
          <Card title="Metric 2" />
        </Grid>
        <Panel title="Details" footer="Footer" />
      </Stack>
    </Container>
  );
}

import { Tabs, Menu, NavList, CommandPalette } from "@bunli/tui";

// Tabbed navigation
function TabExample() {
  return (
    <Tabs
      tabs={[
        { key: "overview", label: "Overview", content: <div>...</div> },
        { key: "settings", label: "Settings", content: <div>...</div> },
      ]}
    />
  );
}

// Command palette
function CommandExample({ commands }) {
  return (
    <CommandPalette
      items={commands.map((cmd) => ({
        key: cmd.id,
        label: cmd.title,
        hint: cmd.hint,
      }))}
      onSelect={(key) => runCommand(key)}
    />
  );
}

import { Alert, Badge, ProgressBar, Spinner, Toast, EmptyState } from "@bunli/tui";

// Status display
function StatusPanel() {
  return (
    <Stack gap={1}>
      <Alert tone="success" message="Deployment complete!" />
      <ProgressBar value={75} label="Uploading..." />
      <Spinner variant="dots" title="Loading..." />
      <Badge label="Active" tone="success" />
    </Stack>
  );
}

import { BarChart, LineChart, Sparkline } from "@bunli/tui/charts";

// Bar chart
function Metrics() {
  return (
    <BarChart
      series={{
        name: "Revenue",
        points: [
          { label: "Jan", value: 100 },
          { label: "Feb", value: 150 },
          { label: "Mar", value: 120 },
        ],
      }}
      width={40}
    />
  );
}

// Inline sparkline
function Trend({ values }) {
  return <Sparkline values={values} width={20} />;
}

import { useKeyboard, useTerminalDimensions, useTimeline } from "@opentui/react";
import { useTuiTheme } from "@bunli/runtime/app";
import { useFormField } from "@bunli/tui";

function KeyboardExample() {
  useKeyboard({
    "Ctrl+C": () => exit(),
    "Ctrl+S": () => save(),
    "g h": () => goHome(),
    "g g": () => goTop(),
  });

  const { width, height } = useTerminalDimensions();
  console.log(`Terminal: ${width}x${height}`);
}

function FormFieldExample() {
  const field = useFormField("name");
  return (
    <TextField label="Name" value={field.value} onChange={field.setValue} error={field.error} />
  );
}

import { ThemeProvider, createTheme, darkThemeTokens, lightThemeTokens } from "@bunli/runtime/app";

// Dark theme (default)
const dark = createTheme({ preset: "dark" });

// Light theme
const light = createTheme({
  preset: "light",
  tokens: {
    ...lightThemeTokens,
    accent: "#0066cc",
  },
});

// Custom theme
const custom = createTheme({
  tokens: {
    bg: "#1a1a2e",
    fg: "#eaeaea",
    accent: "#00d4aa",
  },
});

function App() {
  return (
    <ThemeProvider theme={custom}>
      <YourUI />
    </ThemeProvider>
  );
}