eve 0.74.0 → 0.75.1

package/dist/src/setup/scaffold/create/web-template.js

@@ -322,11 +322,9 @@ import type {
   EveMessageInputRequest,
   EveMessagePart,
 } from "eve/react";
-import { useState } from "react";
+import type { FormEvent } from "react";
 import {
-  ArrowRightIcon,
   CheckCircleIcon,
-  CheckIcon,
   ExternalLinkIcon,
   FileIcon,
   ImageIcon,
@@ -334,16 +332,6 @@ import {
   XCircleIcon,
 } from "lucide-react";
 import { Message, MessageContent, MessageResponse } from "@/components/ai-elements/message";
-import {
-  Question,
-  QuestionInput,
-  QuestionOption,
-  QuestionOptions,
-  QuestionPrompt,
-  type QuestionResponse,
-  QuestionSubmit,
-  type QuestionValue,
-} from "@/components/ai-elements/question";
 import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
 import {
   BashToolContent,
@@ -354,6 +342,18 @@ import {
   ToolOutput,
 } from "@/components/ai-elements/tool";
 import { Button } from "@/components/ui/button";
+import {
+  Questionnaire,
+  QuestionnaireActions,
+  QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
+  QuestionnaireChoices,
+  QuestionnaireError,
+  QuestionnaireInput,
+  QuestionnaireItem,
+  QuestionnaireSubmit,
+  QuestionnaireTitle,
+} from "@/components/ui/questionnaire";
 import { cn } from "@/lib/utils";
 
 export type AgentInputResponse = {
@@ -506,90 +506,73 @@ function QuestionRequest({
   readonly inputResponse?: AgentInputResponse;
   readonly onInputResponses: (responses: readonly AgentInputResponse[]) => void | Promise<void>;
 }) {
-  const hasOptions = (inputRequest.options?.length ?? 0) > 0;
-  const acceptsFreeform = inputRequest.allowFreeform === true || !hasOptions;
-  const [questionValue, setQuestionValue] = useState<QuestionValue>({
-    selectedValues: inputResponse?.optionId ? [inputResponse.optionId] : [],
-    text: inputResponse?.text ?? "",
-  });
+  const options = inputRequest.options ?? [];
+  const acceptsFreeform = inputRequest.allowFreeform === true || options.length === 0;
+  const disabled = !canRespond || inputResponse !== undefined;
+
+  const submitResponse = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const answer = new FormData(event.currentTarget).get(inputRequest.requestId);
+    if (typeof answer !== "string") {
+      return;
+    }
 
-  const submitOption = (optionId: string) => {
-    setQuestionValue((value) => ({ ...value, selectedValues: [optionId] }));
-    return onInputResponses([
-      {
-        optionId,
-        requestId: inputRequest.requestId,
-      },
+    const option = options.find(({ id }) => id === answer);
+    void onInputResponses([
+      option === undefined
+        ? { requestId: inputRequest.requestId, text: answer.trim() }
+        : { optionId: option.id, requestId: inputRequest.requestId },
     ]);
   };
 
-  const submitResponse = ({ selectedValues, text }: QuestionResponse) =>
-    onInputResponses([
-      {
-        optionId: selectedValues[0],
-        requestId: inputRequest.requestId,
-        text,
-      },
-    ]);
-
   return (
-    <Question
-      disabled={!canRespond || inputResponse !== undefined}
+    <Questionnaire
+      className="gap-4 rounded-xl border bg-card p-4"
+      // Validation reads disabled answers as missing, so locking a submitted form in place would
+      // flag it invalid. Remounting restores the answer from the response instead.
+      key={disabled ? "locked" : "open"}
       onSubmit={submitResponse}
-      onValueChange={setQuestionValue}
-      value={questionValue}
+      shortcuts="numbers"
     >
-      <QuestionPrompt>{inputRequest.prompt}</QuestionPrompt>
-      {hasOptions ? (
-        <QuestionOptions className="flex-col items-stretch" aria-label={inputRequest.prompt}>
-          {inputRequest.options?.map((option, index) => (
-            <QuestionOption
-              className="justify-start px-3 py-2 text-left"
+      <QuestionnaireItem name={inputRequest.requestId} required>
+        <QuestionnaireTitle className="text-sm font-medium">
+          {inputRequest.prompt}
+        </QuestionnaireTitle>
+        <QuestionnaireChoices>
+          {options.map((option) => (
+            <QuestionnaireChoice
+              className={cn(inputResponse?.optionId === option.id && "data-disabled:opacity-100")}
+              defaultChecked={inputResponse?.optionId === option.id}
+              disabled={disabled}
               key={option.id}
-              onClick={() => void submitOption(option.id)}
               value={option.id}
             >
-              <span className="min-w-0 flex-1">
-                <span className="block text-foreground text-sm leading-tight">{option.label}</span>
-                {option.description ? (
-                  <span className="block text-sm text-muted-foreground leading-tight">
-                    {option.description}
-                  </span>
-                ) : null}
-              </span>
-              {inputResponse === undefined ? (
-                <span aria-hidden="true" className="relative size-6 shrink-0">
-                  <span className="absolute inset-0 flex items-center justify-center rounded-full bg-foreground/8 text-xs text-muted-foreground transition-opacity group-hover/option:opacity-0 group-focus-visible/option:opacity-0">
-                    {index + 1}
-                  </span>
-                  <ArrowRightIcon className="absolute top-1/2 left-1/2 size-4 -translate-x-1/2 -translate-y-1/2 text-muted-foreground opacity-0 transition-[color,opacity] group-hover/option:text-foreground group-hover/option:opacity-100 group-focus-visible/option:opacity-100" />
-                </span>
-              ) : (
-                <CheckIcon className="size-4 shrink-0 opacity-0 transition-opacity group-data-[state=checked]/option:opacity-100" />
-              )}
-            </QuestionOption>
+              {option.label}
+              {option.description ? (
+                <QuestionnaireChoiceDescription>
+                  {option.description}
+                </QuestionnaireChoiceDescription>
+              ) : null}
+            </QuestionnaireChoice>
           ))}
-        </QuestionOptions>
-      ) : null}
-      {acceptsFreeform ? (
-        <div className="relative">
-          <QuestionInput
-            aria-label="Answer"
-            className={inputResponse === undefined ? "pr-12 pb-12" : undefined}
-            placeholder="Type your answer…"
-          />
-          {inputResponse === undefined && questionValue.text.trim().length > 0 ? (
-            <QuestionSubmit
+          {acceptsFreeform ? (
+            <QuestionnaireInput
               aria-label="Answer"
-              className="absolute right-2 bottom-2"
-              size="icon-sm"
-            >
-              <ArrowRightIcon />
-            </QuestionSubmit>
+              className={cn(inputResponse?.text !== undefined && "disabled:opacity-100")}
+              defaultValue={inputResponse?.text}
+              disabled={disabled}
+              placeholder="Type your answer…"
+            />
           ) : null}
-        </div>
-      ) : null}
-    </Question>
+        </QuestionnaireChoices>
+        <QuestionnaireError />
+      </QuestionnaireItem>
+      {disabled ? null : (
+        <QuestionnaireActions>
+          <QuestionnaireSubmit size="sm">Answer</QuestionnaireSubmit>
+        </QuestionnaireActions>
+      )}
+    </Questionnaire>
   );
 }
 
@@ -3624,332 +3607,6 @@ export const PromptInputCommandSeparator = ({
   className,
   ...props
 }: PromptInputCommandSeparatorProps) => <CommandSeparator className={cn(className)} {...props} />;
-`,"components/ai-elements/question.tsx":`"use client";
-
-import type {
-  ChangeEvent,
-  ComponentProps,
-  FormEvent,
-  HTMLAttributes,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
-} from "react";
-
-import { Button } from "@/components/ui/button";
-import { Textarea } from "@/components/ui/textarea";
-import { cn } from "@/lib/utils";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
-
-export interface QuestionValue {
-  selectedValues: readonly string[];
-  text: string;
-}
-
-export interface QuestionResponse {
-  selectedValues: readonly string[];
-  text?: string;
-}
-
-type SelectionMode = "multiple" | "single";
-
-interface QuestionContextValue {
-  disabled: boolean;
-  selectedValues: readonly string[];
-  selectionMode: SelectionMode;
-  setText: (text: string) => void;
-  text: string;
-  toggleValue: (value: string) => void;
-}
-
-const QuestionContext = createContext<QuestionContextValue | null>(null);
-
-const useQuestion = () => {
-  const context = useContext(QuestionContext);
-
-  if (!context) {
-    throw new Error("Question components must be used within Question");
-  }
-
-  return context;
-};
-
-export type QuestionProps = Omit<ComponentProps<"form">, "defaultValue" | "onSubmit" | "value"> & {
-  defaultValue?: QuestionValue;
-  disabled?: boolean;
-  onSubmit?: (
-    response: QuestionResponse,
-    event: FormEvent<HTMLFormElement>,
-  ) => void | Promise<void>;
-  onValueChange?: (value: QuestionValue) => void;
-  selectionMode?: SelectionMode;
-  value?: QuestionValue;
-};
-
-const EMPTY_VALUE: QuestionValue = { selectedValues: [], text: "" };
-
-const getSelectedValues = (
-  currentValues: readonly string[],
-  optionValue: string,
-  selectionMode: SelectionMode,
-): readonly string[] => {
-  const isSelected = currentValues.includes(optionValue);
-
-  if (selectionMode === "single") {
-    return isSelected ? [] : [optionValue];
-  }
-
-  if (isSelected) {
-    return currentValues.filter((item) => item !== optionValue);
-  }
-
-  return [...currentValues, optionValue];
-};
-
-export const Question = ({
-  children,
-  className,
-  defaultValue = EMPTY_VALUE,
-  disabled = false,
-  onSubmit,
-  onValueChange,
-  selectionMode = "single",
-  value: controlledValue,
-  ...props
-}: QuestionProps) => {
-  const [internalValue, setInternalValue] = useState(defaultValue);
-  const value = controlledValue ?? internalValue;
-
-  const setValue = useCallback(
-    (nextValue: QuestionValue) => {
-      if (controlledValue === undefined) {
-        setInternalValue(nextValue);
-      }
-      onValueChange?.(nextValue);
-    },
-    [controlledValue, onValueChange],
-  );
-
-  const setText = useCallback(
-    (text: string) => {
-      setValue({ ...value, text });
-    },
-    [setValue, value],
-  );
-
-  const toggleValue = useCallback(
-    (optionValue: string) => {
-      const selectedValues = getSelectedValues(value.selectedValues, optionValue, selectionMode);
-      setValue({ ...value, selectedValues });
-    },
-    [selectionMode, setValue, value],
-  );
-
-  const contextValue = useMemo(
-    () => ({
-      disabled,
-      selectedValues: value.selectedValues,
-      selectionMode,
-      setText,
-      text: value.text,
-      toggleValue,
-    }),
-    [disabled, selectionMode, setText, toggleValue, value],
-  );
-
-  const handleSubmit = useCallback(
-    async (event: FormEvent<HTMLFormElement>) => {
-      event.preventDefault();
-      if (disabled) {
-        return;
-      }
-
-      const text = value.text.trim();
-      if (value.selectedValues.length === 0 && text.length === 0) {
-        return;
-      }
-
-      await onSubmit?.(
-        {
-          selectedValues: value.selectedValues,
-          text: text.length > 0 ? text : undefined,
-        },
-        event,
-      );
-    },
-    [disabled, onSubmit, value],
-  );
-
-  return (
-    <QuestionContext.Provider value={contextValue}>
-      <form
-        className={cn("space-y-3 rounded-xl border bg-card p-4", className)}
-        onSubmit={handleSubmit}
-        {...props}
-      >
-        {children}
-      </form>
-    </QuestionContext.Provider>
-  );
-};
-
-export type QuestionPromptProps = HTMLAttributes<HTMLParagraphElement>;
-
-export const QuestionPrompt = ({ className, ...props }: QuestionPromptProps) => (
-  <p className={cn("font-medium text-sm leading-snug", className)} {...props} />
-);
-
-export type QuestionDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
-
-export const QuestionDescription = ({ className, ...props }: QuestionDescriptionProps) => (
-  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
-);
-
-export type QuestionOptionsProps = HTMLAttributes<HTMLDivElement>;
-
-export const QuestionOptions = ({ className, ...props }: QuestionOptionsProps) => {
-  const { selectionMode } = useQuestion();
-
-  return (
-    <div
-      className={cn("flex flex-wrap gap-1.5", className)}
-      role={selectionMode === "single" ? "radiogroup" : "group"}
-      {...props}
-    />
-  );
-};
-
-export type QuestionOptionProps = Omit<ComponentProps<typeof Button>, "value"> & {
-  value: string;
-};
-
-export const QuestionOption = ({
-  children,
-  className,
-  disabled,
-  onClick,
-  value,
-  variant,
-  ...props
-}: QuestionOptionProps) => {
-  const question = useQuestion();
-  const isSelected = question.selectedValues.includes(value);
-  const role = question.selectionMode === "single" ? "radio" : "checkbox";
-  const handleClick = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      question.toggleValue(value);
-      onClick?.(event);
-    },
-    [onClick, question, value],
-  );
-
-  return (
-    <Button
-      aria-checked={isSelected}
-      // Selection only changes colors: the border is always present so the
-      // layout never shifts when an option is picked.
-      className={cn(
-        "group/option h-auto whitespace-normal border border-input font-normal shadow-none transition-colors",
-        isSelected
-          ? "border-foreground/20 bg-accent text-accent-foreground disabled:opacity-100"
-          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
-        className,
-      )}
-      data-state={isSelected ? "checked" : "unchecked"}
-      disabled={question.disabled || disabled}
-      onClick={handleClick}
-      role={role}
-      type="button"
-      variant={variant ?? "ghost"}
-      {...props}
-    >
-      {children ?? value}
-    </Button>
-  );
-};
-
-export type QuestionInputProps = Omit<ComponentProps<typeof Textarea>, "defaultValue" | "value">;
-
-export const QuestionInput = ({
-  className,
-  disabled,
-  onChange,
-  onKeyDown,
-  ...props
-}: QuestionInputProps) => {
-  const question = useQuestion();
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLTextAreaElement>) => {
-      question.setText(event.currentTarget.value);
-      onChange?.(event);
-    },
-    [onChange, question],
-  );
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      onKeyDown?.(event);
-      if (
-        event.defaultPrevented ||
-        event.key !== "Enter" ||
-        event.shiftKey ||
-        event.nativeEvent.isComposing
-      ) {
-        return;
-      }
-
-      event.preventDefault();
-      event.currentTarget.form?.requestSubmit();
-    },
-    [onKeyDown],
-  );
-
-  return (
-    <Textarea
-      className={cn(
-        "min-h-16 resize-none rounded-lg text-base md:text-sm shadow-none focus-visible:border-foreground!",
-        className,
-      )}
-      disabled={question.disabled || disabled}
-      onChange={handleChange}
-      onKeyDown={handleKeyDown}
-      value={question.text}
-      {...props}
-    />
-  );
-};
-
-export type QuestionActionsProps = HTMLAttributes<HTMLDivElement>;
-
-export const QuestionActions = ({ className, ...props }: QuestionActionsProps) => (
-  <div className={cn("flex items-center justify-end gap-2", className)} {...props} />
-);
-
-export type QuestionSubmitProps = ComponentProps<typeof Button> & {
-  children?: ReactNode;
-};
-
-export const QuestionSubmit = ({
-  children = "Submit",
-  className,
-  disabled,
-  size = "sm",
-  ...props
-}: QuestionSubmitProps) => {
-  const question = useQuestion();
-  const hasResponse = question.selectedValues.length > 0 || question.text.trim().length > 0;
-
-  return (
-    <Button
-      className={cn("text-sm! shadow-none", className)}
-      disabled={question.disabled || disabled || !hasResponse}
-      size={size}
-      type="submit"
-      {...props}
-    >
-      {children}
-    </Button>
-  );
-};
 `,"components/ai-elements/reasoning.tsx":`"use client";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
@@ -5392,6 +5049,321 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 }
 
 export { Input };
+`,"components/ui/questionnaire.tsx":`"use client";
+
+import * as React from "react";
+import { Questionnaire as QuestionnairePrimitive } from "@shadcn/react/questionnaire";
+import { CheckIcon } from "lucide-react";
+
+import { buttonVariants, type Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function Questionnaire({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Root>) {
+  return (
+    <QuestionnairePrimitive.Root
+      data-slot="questionnaire"
+      className={cn("flex w-full min-w-0 flex-col gap-6", className)}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireProgress({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Progress>) {
+  return (
+    <QuestionnairePrimitive.Progress
+      data-slot="questionnaire-progress"
+      className={cn(
+        "min-h-[1lh] w-fit min-w-[14ch] text-xs font-medium text-muted-foreground tabular-nums",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Item>) {
+  return (
+    <QuestionnairePrimitive.Item
+      data-slot="questionnaire-item"
+      className={cn("flex min-w-0 flex-col gap-5 border-0 p-0 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Title>) {
+  return (
+    <QuestionnairePrimitive.Title
+      data-slot="questionnaire-title"
+      className={cn(
+        "text-base font-semibold text-pretty [&:not(:has(~[data-slot=questionnaire-description]))]:mb-5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Description>) {
+  return (
+    <QuestionnairePrimitive.Description
+      data-slot="questionnaire-description"
+      className={cn("text-sm text-pretty text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireChoices({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Choices>) {
+  return (
+    <QuestionnairePrimitive.Choices
+      data-slot="questionnaire-choices"
+      className={cn("group/questionnaire-choices grid min-w-0 gap-3", className)}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireChoice({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Choice>) {
+  return (
+    <QuestionnairePrimitive.Choice
+      data-slot="questionnaire-choice"
+      className={cn(
+        "group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start gap-3 rounded-md border border-input bg-transparent px-4 py-3.5 text-start text-sm shadow-xs transition-colors outline-none select-none hover:bg-muted/50 has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-3 has-[>input:focus-visible]:ring-ring/50 data-invalid:border-destructive dark:bg-input/20 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted",
+        "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <QuestionnairePrimitive.ChoiceInput
+        data-slot="questionnaire-choice-input"
+        className="absolute inset-0 z-10 size-full cursor-pointer opacity-0"
+      />
+      <span
+        aria-hidden="true"
+        data-slot="questionnaire-choice-indicator"
+        className="pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[type=radio]/questionnaire-choice:rounded-full group-data-checked/questionnaire-choice:border-primary group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground dark:bg-input/30 dark:group-data-checked/questionnaire-choice:bg-primary"
+      >
+        <span
+          data-slot="questionnaire-choice-indicator-dot"
+          className="hidden size-2 rounded-full bg-primary-foreground group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+        />
+        <CheckIcon
+          data-slot="questionnaire-choice-indicator-check"
+          className="hidden size-3.5 group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block"
+        />
+      </span>
+      <QuestionnairePrimitive.ChoiceLabel
+        data-slot="questionnaire-choice-label"
+        className="flex min-w-0 flex-1 flex-col gap-1 leading-snug"
+      >
+        {children}
+      </QuestionnairePrimitive.ChoiceLabel>
+      <QuestionnairePrimitive.ChoiceShortcut
+        data-slot="questionnaire-choice-shortcut"
+        className="pointer-events-none ms-auto hidden size-5 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-md border border-input bg-background font-mono text-[0.625rem] leading-none font-medium text-muted-foreground shadow-xs group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex"
+      />
+    </QuestionnairePrimitive.Choice>
+  );
+}
+
+function QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="questionnaire-choice-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Input>) {
+  return (
+    <div
+      data-slot="questionnaire-input-wrapper"
+      className="group/questionnaire-input relative w-full min-w-0"
+    >
+      <QuestionnairePrimitive.Input
+        data-slot="questionnaire-input"
+        className={cn(
+          "h-9 min-h-11 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow,background-color] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+          "selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function QuestionnaireError({
+  className,
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Error>) {
+  return (
+    <QuestionnairePrimitive.Error
+      data-slot="questionnaire-error"
+      className={cn("text-sm text-destructive", className)}
+      {...props}
+    />
+  );
+}
+
+function QuestionnaireActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="questionnaire-actions"
+      className={cn(
+        "grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-9",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function QuestionnairePrevious({
+  children,
+  className,
+  size = "default",
+  variant = "outline",
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Previous> &
+  Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+  return (
+    <QuestionnairePrimitive.Previous
+      data-slot="questionnaire-previous"
+      data-size={size}
+      data-variant={variant}
+      className={cn(
+        buttonVariants({ size, variant }),
+        "col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "Previous"}
+    </QuestionnairePrimitive.Previous>
+  );
+}
+
+function QuestionnaireSkip({
+  children,
+  className,
+  size = "default",
+  variant = "outline",
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Skip> &
+  Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+  return (
+    <QuestionnairePrimitive.Skip
+      data-slot="questionnaire-skip"
+      data-size={size}
+      data-variant={variant}
+      className={cn(
+        buttonVariants({ size, variant }),
+        "col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "Skip"}
+    </QuestionnairePrimitive.Skip>
+  );
+}
+
+function QuestionnaireNext({
+  children,
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Next> &
+  Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+  return (
+    <QuestionnairePrimitive.Next
+      data-slot="questionnaire-next"
+      data-size={size}
+      data-variant={variant}
+      className={cn(
+        buttonVariants({ size, variant }),
+        "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "Next"}
+    </QuestionnairePrimitive.Next>
+  );
+}
+
+function QuestionnaireSubmit({
+  children,
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof QuestionnairePrimitive.Submit> &
+  Pick<React.ComponentProps<typeof Button>, "size" | "variant">) {
+  return (
+    <QuestionnairePrimitive.Submit
+      data-slot="questionnaire-submit"
+      data-size={size}
+      data-variant={variant}
+      className={cn(
+        buttonVariants({ size, variant }),
+        "col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "Submit"}
+    </QuestionnairePrimitive.Submit>
+  );
+}
+
+export {
+  Questionnaire,
+  QuestionnaireActions,
+  QuestionnaireChoice,
+  QuestionnaireChoiceDescription,
+  QuestionnaireChoices,
+  QuestionnaireDescription,
+  QuestionnaireError,
+  QuestionnaireInput,
+  QuestionnaireItem,
+  QuestionnaireNext,
+  QuestionnairePrevious,
+  QuestionnaireProgress,
+  QuestionnaireSkip,
+  QuestionnaireSubmit,
+  QuestionnaireTitle,
+};
 `,"components/ui/select.tsx":`"use client";
 
 import * as React from "react";
@@ -6143,4 +6115,4 @@ export const auth = betterAuth({
     },
   },
 });
-`},WEB_APP_TEMPLATE_PACKAGE_JSON={scripts:{build:`next build`,"build:eve":`eve build`,dev:`next dev`,"dev:eve":`eve dev`,start:`next start`,"start:eve":`eve start`,typecheck:`tsc --noEmit -p tsconfig.json`},dependencies:{"@radix-ui/react-use-controllable-state":`1.2.2`,"@shikijs/core":`3.23.0`,"@shikijs/engine-javascript":`3.23.0`,"@shikijs/engine-oniguruma":`3.23.0`,"@streamdown/cjk":`1.0.3`,"@streamdown/code":`1.1.1`,"@streamdown/math":`1.0.2`,"@streamdown/mermaid":`1.0.2`,"@tailwindcss/postcss":`4.3.0`,"class-variance-authority":`0.7.1`,clsx:`2.1.1`,cmdk:`1.1.1`,"lucide-react":`1.16.0`,motion:`12.40.0`,nanoid:`5.1.11`,next:`16.3.6`,"radix-ui":`1.4.3`,react:`19.2.6`,"react-dom":`19.2.6`,shiki:`3.23.0`,streamdown:`2.5.0`,"tailwind-merge":`3.6.0`,tailwindcss:`4.3.0`,"use-stick-to-bottom":`1.1.4`,zod:`4.5.4`},devDependencies:{"@types/node":`26`,"@types/react":`19.2.15`,"@types/react-dom":`19.2.3`,typescript:`6.0.3`}};export{WEB_APP_SIGN_IN_WITH_VERCEL_TEMPLATE_FILES,WEB_APP_TEMPLATE_FILES,WEB_APP_TEMPLATE_PACKAGE_JSON,WEB_CHANNEL_TEMPLATES};
+`},WEB_APP_TEMPLATE_PACKAGE_JSON={scripts:{build:`next build`,"build:eve":`eve build`,dev:`next dev`,"dev:eve":`eve dev`,start:`next start`,"start:eve":`eve start`,typecheck:`tsc --noEmit -p tsconfig.json`},dependencies:{"@radix-ui/react-use-controllable-state":`1.2.2`,"@shadcn/react":`0.3.1`,"@shikijs/core":`3.23.0`,"@shikijs/engine-javascript":`3.23.0`,"@shikijs/engine-oniguruma":`3.23.0`,"@streamdown/cjk":`1.0.3`,"@streamdown/code":`1.1.1`,"@streamdown/math":`1.0.2`,"@streamdown/mermaid":`1.0.2`,"@tailwindcss/postcss":`4.3.0`,"class-variance-authority":`0.7.1`,clsx:`2.1.1`,cmdk:`1.1.1`,"lucide-react":`1.16.0`,motion:`12.40.0`,nanoid:`5.1.11`,next:`16.3.6`,"radix-ui":`1.4.3`,react:`19.2.6`,"react-dom":`19.2.6`,shiki:`3.23.0`,streamdown:`2.5.0`,"tailwind-merge":`3.6.0`,tailwindcss:`4.3.0`,"use-stick-to-bottom":`1.1.4`,zod:`4.5.4`},devDependencies:{"@types/node":`26`,"@types/react":`19.2.15`,"@types/react-dom":`19.2.3`,typescript:`6.0.3`}};export{WEB_APP_SIGN_IN_WITH_VERCEL_TEMPLATE_FILES,WEB_APP_TEMPLATE_FILES,WEB_APP_TEMPLATE_PACKAGE_JSON,WEB_CHANNEL_TEMPLATES};