Widget API Reference

import { ui } from "@rezi-ui/core";

app.view((state) =>
  ui.column({ p: 1, gap: 1 }, [
    ui.text("Hello, World!"),
    ui.button({ id: "ok", label: "OK" }),
  ])
);

ui.column({ p: 1, gap: 1 }, [
  ui.text("Title", { variant: "heading" }),
  ui.row({ gap: 2 }, [
    ui.button({ id: "ok", label: "OK" }),
    ui.button({ id: "cancel", label: "Cancel" }),
  ]),
])

ui.column({ gap: 1 }, [
  ui.richText([
    { text: "Error: ", style: { fg: { r: 255, g: 0, b: 0 }, bold: true } },
    { text: "File not found" },
  ]),
  ui.callout("This action cannot be undone", { variant: "warning" }),
  ui.badge("New", { variant: "info" }),
])

ui.column({ gap: 1 }, [
  ui.spinner({ variant: "dots", label: "Loading..." }),
  ui.progress(0.75, { showPercent: true }),
  ui.gauge(0.42, { label: "CPU" }),
])

ui.row({ gap: 2 }, [
  ui.sparkline([10, 20, 15, 30, 25], { width: 10 }),
  ui.barChart([
    { label: "TypeScript", value: 60 },
    { label: "JavaScript", value: 30 },
    { label: "Python", value: 10 },
  ], { showValues: true }),
])

ui.form([
  ui.field({
    label: "Username",
    required: true,
    error: errors.username,
    children: ui.input("username", state.username, {
      onInput: (v) => app.update({ username: v }),
    }),
  }),
  ui.checkbox({
    id: "remember",
    checked: state.remember,
    label: "Remember me",
    onChange: (c) => app.update({ remember: c }),
  }),
  ui.actions([
    ui.button("submit", "Submit", {
      onPress: () => handleSubmit(),
    }),
  ]),
])

ui.tabs({
  id: "main-tabs",
  tabs: [
    { key: "overview", label: "Overview", content: OverviewPanel() },
    { key: "details", label: "Details", content: DetailsPanel() },
    { key: "logs", label: "Logs", content: LogsPanel() },
  ],
  activeTab: state.activeTab,
  onChange: (tab) => app.update({ activeTab: tab }),
})

ui.table({
  id: "files",
  columns: [
    { key: "name", header: "Name", flex: 1, sortable: true },
    { key: "size", header: "Size", width: 10, align: "right" },
  ],
  data: files,
  getRowKey: (f) => f.id,
  selection: state.selected,
  selectionMode: "multi",
  onSelectionChange: (keys) => app.update({ selected: keys }),
})

ui.layers([
  MainContent(),
  state.showConfirm && ui.dialog({
    id: "confirm",
    title: "Confirm Delete",
    message: "Are you sure you want to delete this item?",
    actions: [
      { label: "Delete", intent: "danger", onPress: () => deleteItem() },
      { label: "Cancel", onPress: () => app.update({ showConfirm: false }) },
    ],
    onClose: () => app.update({ showConfirm: false }),
  }),
])

ui.codeEditor({
  id: "editor",
  lines: state.lines,
  cursor: state.cursor,
  selection: state.selection,
  scrollTop: state.scrollTop,
  scrollLeft: state.scrollLeft,
  lineNumbers: true,
  tabSize: 2,
  onChange: (lines, cursor) => app.update({ lines, cursor }),
  onScroll: (top, left) => app.update({ scrollTop: top, scrollLeft: left }),
})

ui.canvas({
  width: 40,
  height: 20,
  draw: (ctx) => {
    ctx.fillRect(0, 0, 40, 20, "#000000");
    ctx.line(0, 0, 39, 19, "#ffffff");
  },
})

ui.page({
  header: ui.text("My App", { style: { bold: true } }),
  body: ui.panel("Content", [
    ui.text("Main content goes here"),
    ui.form([
      ui.field({ label: "Name", children: ui.input("name", state.name) }),
      ui.actions([
        ui.button("save", "Save"),
        ui.button("cancel", "Cancel"),
      ]),
    ]),
  ]),
  footer: ui.text("Press Ctrl+Q to quit", { dim: true }),
})

import { each } from "@rezi-ui/core";

each(
  state.items,
  (item, index) => ui.text(`${index + 1}. ${item.name}`),
  {
    key: (item) => item.id,
    container: "column",  // default; also accepts "row"
    empty: () => ui.text("No items yet", { dim: true }),
  },
)

import { eachInline } from "@rezi-ui/core";

ui.column({ gap: 1 }, [
  ui.text("Items:"),
  ...eachInline(
    state.items,
    (item) => ui.text(item.name),
    { key: (item) => item.id },
  ),
])

import { show, when, maybe, match } from "@rezi-ui/core";

ui.column({}, [
  // show(condition, vnode, fallback?) -- eagerly evaluated
  show(state.isLoggedIn, ui.text("Welcome back!")),
  show(state.isLoggedIn, ui.text("Welcome!"), ui.text("Please log in")),

  // when(condition, trueFn, falseFn?) -- lazily evaluated
  when(
    state.items.length > 0,
    () => ItemList(),
    () => ui.empty("No items"),
  ),

  // maybe(value, render) -- null-safe rendering
  maybe(state.currentUser, (user) =>
    ui.text(`Logged in as ${user.name}`),
  ),

  // match(value, cases) -- pattern matching with _ default
  match(state.status, {
    loading: () => ui.spinner(),
    error: () => ui.errorDisplay("Something went wrong"),
    _: () => ui.text("Ready"),
  }),
])

ui.column({}, [
  ui.text("Always visible"),
  state.showDetails && ui.text("Conditionally visible"),
])

import { defineWidget, ui } from "@rezi-ui/core";

const Counter = defineWidget<{ initial: number; key?: string }>(
  (props, ctx) => {
    const [count, setCount] = ctx.useState(props.initial);

    ctx.useEffect(() => {
      console.log(`Counter mounted with initial=${props.initial}`);
      return () => console.log("Counter unmounted");
    }, []);

    return ui.row({ gap: 1 }, [
      ui.text(`Count: ${count}`),
      ui.button({
        id: ctx.id("inc"),
        label: "+",
        onPress: () => setCount((c) => c + 1),
      }),
      ui.button({
        id: ctx.id("dec"),
        label: "-",
        onPress: () => setCount((c) => c - 1),
      }),
    ]);
  },
  { name: "Counter" },
);

// Usage in a view:
ui.column([
  Counter({ initial: 0 }),
  Counter({ initial: 10, key: "counter-2" }),
]);

// Unique key for reconciliation (required for dynamic lists)
key?: string

// Interactive widget ID (required for all focusable widgets)
id: string

// Optional semantic label for accessibility / focus announcements
accessibleLabel?: string

// Whether this widget can receive focus (default depends on widget kind)
focusable?: boolean

// Padding
p?: SpacingValue    // All sides
px?: SpacingValue   // Horizontal (left + right)
py?: SpacingValue   // Vertical (top + bottom)
pt?: SpacingValue   // Top
pr?: SpacingValue   // Right
pb?: SpacingValue   // Bottom
pl?: SpacingValue   // Left

// Margin
m?: SpacingValue
mx?: SpacingValue
my?: SpacingValue
mt?: SpacingValue
mr?: SpacingValue
mb?: SpacingValue
ml?: SpacingValue

ui.box({ p: "md" }, [...])   // 2 cells of padding on all sides
ui.column({ p: 2, gap: 1 }, [...])  // equivalent numeric form

// Dimensions
width?: number | string    // Fixed width or percentage ("100%")
height?: number | string   // Fixed height or percentage
minWidth?: number
maxWidth?: number
minHeight?: number
maxHeight?: number
flex?: number              // Flex grow factor

// Gap between children (row, column, hstack, vstack)
gap?: SpacingValue

// Alignment
align?: "start" | "center" | "end" | "stretch"
justify?: "start" | "end" | "center" | "between" | "around" | "evenly"
items?: "start" | "center" | "end" | "stretch"

// Border style (box)
border?: "none" | "single" | "double" | "rounded" | "heavy" | "dashed"

// Box title (displayed in border)
title?: string
titleAlign?: "left" | "center" | "right"

// Text style (text, richText)
style?: TextStyle

ui.grid({
  columns: 3,           // Number of columns or explicit sizes
  rows: 2,              // Number of rows or explicit sizes
  gap: 1,               // Uniform gap
  rowGap: 1,            // Row-specific gap
  columnGap: 2,         // Column-specific gap
}, child1, child2, child3, child4, child5, child6)

ui.button({
  id: "submit",
  label: "Submit",
  onPress: () => handleSubmit(),   // Fires on Enter, Space, or mouse click
})

ui.input({
  id: "name",
  value: state.name,
  onInput: (value) => app.update({ name: value }),
  onBlur: () => validateField("name"),
})