snapshot of https://github.com/shadcn-ui/ui.git (main, 2026-09-15; blobs > 131072B omitted)

apps/v4/examples/base/questionnaire-shortcuts.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { toast } from "sonner"
+
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/styles/base-nova/ui/native-select"
+import {
+  Questionnaire,
+  QuestionnaireActions,
+  QuestionnaireChoice,
+  QuestionnaireChoices,
+  QuestionnaireDescription,
+  QuestionnaireError,
+  QuestionnaireItem,
+  QuestionnaireSubmit,
+  QuestionnaireTitle,
+} from "@/styles/base-nova/ui/questionnaire"
+
+const items = [
+  {
+    choices: [{ value: "inspect" }, { value: "tests" }, { value: "patch" }],
+    name: "action",
+    required: true,
+  },
+] as const
+
+type ShortcutMode = React.ComponentProps<typeof Questionnaire>["shortcuts"]
+
+export function QuestionnaireShortcuts() {
+  const [shortcuts, setShortcuts] = React.useState<ShortcutMode>("letters")
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const action = new FormData(event.currentTarget).get("action")
+
+    toast("Next action selected", {
+      description: `Action: ${action ?? "None"} · Shortcuts: ${shortcuts ?? "none"}`,
+    })
+  }
+
+  return (
+    <div className="relative mx-auto flex h-full w-full max-w-md flex-col">
+      <NativeSelect
+        aria-label="Shortcut style"
+        className="absolute end-0 top-0"
+        value={shortcuts ?? "none"}
+        onChange={(event) => {
+          const value = event.target.value
+          setShortcuts(
+            value === "letters" || value === "numbers" ? value : undefined
+          )
+        }}
+      >
+        <NativeSelectOption value="none">No shortcuts</NativeSelectOption>
+        <NativeSelectOption value="letters">Letters</NativeSelectOption>
+        <NativeSelectOption value="numbers">Numbers</NativeSelectOption>
+      </NativeSelect>
+
+      <Questionnaire
+        className="mt-auto"
+        items={items}
+        shortcuts={shortcuts}
+        onSubmit={handleSubmit}
+      >
+        <QuestionnaireItem name="action" required>
+          <QuestionnaireTitle>
+            What should the agent do next?
+          </QuestionnaireTitle>
+          <QuestionnaireDescription>
+            Use the displayed shortcut or navigate with the keyboard.
+          </QuestionnaireDescription>
+          <QuestionnaireChoices>
+            <QuestionnaireChoice value="inspect">
+              Inspect the implementation
+            </QuestionnaireChoice>
+            <QuestionnaireChoice value="tests">
+              Run the relevant tests
+            </QuestionnaireChoice>
+            <QuestionnaireChoice value="patch">
+              Prepare the patch
+            </QuestionnaireChoice>
+          </QuestionnaireChoices>
+          <QuestionnaireError />
+        </QuestionnaireItem>
+
+        <QuestionnaireActions>
+          <QuestionnaireSubmit>Confirm action</QuestionnaireSubmit>
+        </QuestionnaireActions>
+      </Questionnaire>
+    </div>
+  )
+}