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

2026-09-15 22:44:43 +05:00
commit 1416db152c
5727 changed files with 630238 additions and 0 deletions
--- a/apps/v4/examples/aria/questionnaire-validation.tsx
+++ b/apps/v4/examples/aria/questionnaire-validation.tsx
@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import { toast } from "sonner"
+import { z } from "zod"
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/styles/aria-nova/ui/card"
+import {
+  Questionnaire,
+  QuestionnaireActions,
+  QuestionnaireChoice,
+  QuestionnaireChoices,
+  QuestionnaireDescription,
+  QuestionnaireError,
+  QuestionnaireItem,
+  QuestionnaireNext,
+  QuestionnairePrevious,
+  QuestionnaireProgress,
+  QuestionnaireSubmit,
+  QuestionnaireTitle,
+} from "@/styles/aria-nova/ui/questionnaire"
+
+const items = [
+  { name: "detail", required: true },
+  { name: "audience", required: true },
+] as const
+
+const questionnaireSchema = z
+  .object({
+    detail: z.enum(["summary", "complete"]),
+    audience: z.enum(["team", "public"]),
+  })
+  .superRefine((answers, context) => {
+    if (answers.audience === "public" && answers.detail === "summary") {
+      context.addIssue({
+        code: z.ZodIssueCode.custom,
+        message:
+          "Public answers need enough context. Choose a complete answer.",
+        path: ["detail"],
+      })
+    }
+  })
+
+type QuestionnaireItemName = keyof z.infer<typeof questionnaireSchema>
+type QuestionnaireErrors = Partial<Record<QuestionnaireItemName, string>>
+
+function ValidationProgress() {
+  return (
+    <QuestionnaireProgress
+      className="min-w-0"
+      render={(props, state) => (
+        <div {...props}>
+          {state.current} / {state.total}
+        </div>
+      )}
+    />
+  )
+}
+
+export function QuestionnaireValidation() {
+  const [item, setItem] = React.useState("detail")
+  const [errors, setErrors] = React.useState<QuestionnaireErrors>({})
+
+  function clearError(name: QuestionnaireItemName) {
+    setErrors((currentErrors) => {
+      if (!currentErrors[name]) {
+        return currentErrors
+      }
+
+      const nextErrors = { ...currentErrors }
+      delete nextErrors[name]
+      return nextErrors
+    })
+  }
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const result = questionnaireSchema.safeParse(
+      Object.fromEntries(new FormData(event.currentTarget))
+    )
+
+    if (result.success) {
+      setErrors({})
+      toast("Agent response configured", {
+        description: `Detail: ${result.data.detail} · Audience: ${result.data.audience}`,
+      })
+      return
+    }
+
+    const nextErrors: QuestionnaireErrors = {}
+
+    for (const issue of result.error.issues) {
+      const name = issue.path[0]
+
+      if ((name === "detail" || name === "audience") && !nextErrors[name]) {
+        nextErrors[name] = issue.message
+      }
+    }
+
+    const firstInvalidItem = result.error.issues[0]?.path[0]
+
+    setErrors(nextErrors)
+
+    if (firstInvalidItem === "detail" || firstInvalidItem === "audience") {
+      setItem(firstInvalidItem)
+    }
+  }
+
+  return (
+    <Questionnaire
+      className="mx-auto max-w-md"
+      item={item}
+      items={items}
+      onItemChange={setItem}
+      onSubmit={handleSubmit}
+    >
+      <Card className="w-full">
+        <QuestionnaireItem
+          invalid={Boolean(errors.detail)}
+          name="detail"
+          required
+        >
+          <CardHeader>
+            <QuestionnaireTitle>
+              How much detail should the answer include?
+            </QuestionnaireTitle>
+            <QuestionnaireDescription>
+              Choose the response depth.
+            </QuestionnaireDescription>
+            <CardAction>
+              <ValidationProgress />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <QuestionnaireChoices>
+              <QuestionnaireChoice
+                value="summary"
+                onChange={() => clearError("detail")}
+              >
+                Concise summary
+              </QuestionnaireChoice>
+              <QuestionnaireChoice
+                value="complete"
+                onChange={() => clearError("detail")}
+              >
+                Complete answer
+              </QuestionnaireChoice>
+            </QuestionnaireChoices>
+            <QuestionnaireError>{errors.detail}</QuestionnaireError>
+          </CardContent>
+        </QuestionnaireItem>
+
+        <QuestionnaireItem
+          invalid={Boolean(errors.audience)}
+          name="audience"
+          required
+        >
+          <CardHeader>
+            <QuestionnaireTitle>Who will read the answer?</QuestionnaireTitle>
+            <QuestionnaireDescription>
+              Public answers require complete context.
+            </QuestionnaireDescription>
+            <CardAction>
+              <ValidationProgress />
+            </CardAction>
+          </CardHeader>
+          <CardContent>
+            <QuestionnaireChoices>
+              <QuestionnaireChoice
+                value="team"
+                onChange={() => clearError("audience")}
+              >
+                My team
+              </QuestionnaireChoice>
+              <QuestionnaireChoice
+                value="public"
+                onChange={() => clearError("audience")}
+              >
+                Public audience
+              </QuestionnaireChoice>
+            </QuestionnaireChoices>
+            <QuestionnaireError>{errors.audience}</QuestionnaireError>
+          </CardContent>
+        </QuestionnaireItem>
+
+        <CardFooter>
+          <QuestionnaireActions>
+            <QuestionnairePrevious />
+            <QuestionnaireNext>Next</QuestionnaireNext>
+            <QuestionnaireSubmit>Validate answers</QuestionnaireSubmit>
+          </QuestionnaireActions>
+        </CardFooter>
+      </Card>
+    </Questionnaire>
+  )
+}