Components

import { button, row } from "spearkit";

const vote = button({
  id: "vote:{choice}",
  label: "Yes",
  style: "Success",
  run: (ctx) => ctx.update(`You chose ${ctx.params.choice}`), // ctx.params.choice: string
});

client.register(vote); // or client.components.add(vote)

await channel.send({
  content: "Cast your vote:",
  components: [row(vote.build({ choice: "yes" }))], // build() requires { choice }
});

const page = button({
  id: "page:{id}:{dir}",
  label: "Next",
  run: (ctx) => ctx.update(`item ${ctx.params.id}, going ${ctx.params.dir}`),
});

page.build({ id: "42", dir: "next" }); // custom-id "page:42:next"

import { button, linkButton, ButtonStyle } from "spearkit";

const confirm = button({
  id: "confirm:{action}",
  label: "Confirm",
  style: ButtonStyle.Danger,     // or the string "Danger"
  emoji: "⚠️",
  disabled: false,
  run: (ctx) => ctx.update(`Confirmed: ${ctx.params.action}`),
});

// Link buttons have no handler and no custom-id:
const docs = linkButton({ url: "https://example.com", label: "Docs" });

import { stringSelect, channelSelect, ChannelType } from "spearkit";

const colour = stringSelect({
  id: "colour",
  placeholder: "Pick a colour",
  minValues: 1,
  maxValues: 1,
  options: [
    { label: "Red", value: "red" },
    { label: "Green", value: "green", description: "the calm one" },
    { label: "Blue", value: "blue", default: true },
  ],
  run: (ctx) => ctx.reply({ content: `You picked ${ctx.values.join(", ")}`, ephemeral: true }),
});

const pickChannel = channelSelect({
  id: "pick-channel",
  channelTypes: [ChannelType.GuildText],
  run: (ctx) => ctx.reply({ content: `${ctx.values.length} channel(s)`, ephemeral: true }),
});

import { modal, textInput } from "spearkit";

const feedback = modal({
  id: "feedback:{ticket}",
  title: "Feedback",
  fields: {
    summary: textInput({ label: "Summary", required: true }),
    detail: textInput({ label: "Details", style: "Paragraph", maxLength: 2000 }),
  },
  run: (ctx) =>
    ctx.reply({
      // ctx.params.ticket: string, ctx.fields.summary / ctx.fields.detail: string
      content: `#${ctx.params.ticket}: ${ctx.fields.summary}`,
      ephemeral: true,
    }),
});

import {
  checkbox,
  checkboxGroup,
  fileUpload,
  modal,
  radioGroup,
  textInput,
} from "spearkit";

const report = modal({
  id: "report:{userId}",
  title: "Report",
  fields: {
    reason: textInput({ label: "Why", style: "Paragraph", required: true }),
    kind: radioGroup({
      label: "Type",
      description: "What is this?",
      options: [
        { label: "Spam", value: "spam" },
        { label: "Abuse", value: "abuse" },
      ],
    }),
    extras: checkboxGroup({
      label: "Also",
      minValues: 0,
      maxValues: 2,
      options: [
        { label: "Ban", value: "ban" },
        { label: "Delete", value: "delete" },
      ],
    }),
    agree: checkbox({ label: "I understand" }),
    proof: fileUpload({ label: "Screenshots", minValues: 0, maxValues: 5 }),
  },
  run: (ctx) => {
    ctx.params.userId;   // string
    ctx.fields.reason;   // string
    ctx.fields.kind;     // "spam" | "abuse"
    ctx.fields.extras;   // ("ban" | "delete")[]
    ctx.fields.agree;    // boolean
    ctx.fields.proof;    // Attachment[]
  },
});

import { command } from "spearkit";

const ask = command({
  name: "ask",
  description: "Open the feedback form",
  run: (ctx) => ctx.showModal(feedback.build({ ticket: "1234" })),
});

import { row } from "spearkit";

const components = [
  row(confirm.build({ action: "delete" }), docs),
  row(colour.build()),
];
await channel.send({ content: "Choose:", components });

import {
  MessageFlags,
  button,
  container,
  row,
  section,
  separator,
  textDisplay,
} from "spearkit";

const skip = button({
  id: "player-skip",
  label: "Skip",
  run: (ctx) => ctx.update("Skipped."),
});

await ctx.reply({
  // flags: MessageFlags.IsComponentsV2,  <- optional; spearkit ORs it for you
  components: [
    textDisplay("## Queue"),
    container({
      accentColor: 0x5865f2,
      children: [
        section({
          children: ["**Now playing** — Song", "by Artist"],
          thumbnail: { url: "https://cdn.example/art.png" },
        }),
        separator(),
        row(skip.build()),
      ],
    }),
  ],
});

client.register(vote, colour, feedback);
// equivalently:
client.components.add(vote, colour, feedback);

client.components.onError((error, interaction) => {
  console.error("component failed", error);
});

import {
  SpearClient,
  Intents,
  command,
  button,
  stringSelect,
  modal,
  textInput,
  row,
} from "spearkit";

const client = new SpearClient({ intents: Intents.default });

const open = button({
  id: "open-form:{topic}",
  label: "Open form",
  style: "Primary",
  run: (ctx) => ctx.showModal(form.build({ topic: ctx.params.topic })),
});

const rating = stringSelect({
  id: "rating",
  placeholder: "Rate us",
  options: [
    { label: "Good", value: "good" },
    { label: "Bad", value: "bad" },
  ],
  run: (ctx) => ctx.reply({ content: `Thanks: ${ctx.value}`, ephemeral: true }),
});

const form = modal({
  id: "form:{topic}",
  title: "Tell us more",
  fields: { body: textInput({ label: "Message", style: "Paragraph", required: true }) },
  run: (ctx) => ctx.reply({ content: `[${ctx.params.topic}] ${ctx.fields.body}`, ephemeral: true }),
});

const panel = command({
  name: "panel",
  description: "Show the panel",
  run: (ctx) =>
    ctx.reply({
      content: "How was it?",
      components: [row(open.build({ topic: "support" })), row(rating.build())],
    }),
});

client.register(panel, open, rating, form);