{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "survey-2",
  "title": "Net Promoter Score Survey",
  "description": "Net promoter survey with a zero to ten rating scale and number-key shortcuts, followed by a required freeform question about the score.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "questionnaire",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/survey/2/survey-block.tsx",
      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\nimport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoices,\n  QuestionnaireDescription,\n  QuestionnaireError,\n  QuestionnaireInput,\n  QuestionnaireItem,\n  QuestionnaireNext,\n  QuestionnairePrevious,\n  QuestionnaireProgress,\n  QuestionnaireSubmit,\n  QuestionnaireTitle,\n} from \"@/components/ui/questionnaire\"\nimport { Toaster } from \"@/components/ui/sonner\"\n\nconst SCORES = Array.from({ length: 11 }, (_, index) => String(index))\n\nconst ITEMS = [\n  {\n    name: \"score\",\n    required: true,\n    choices: SCORES.map((value) => ({ value })),\n  },\n  { name: \"reason\", required: true },\n]\n\n/** Standard net promoter buckets. */\nfunction bucket(score: number) {\n  if (score >= 9) return \"a promoter\"\n  if (score >= 7) return \"passive\"\n  return \"a detractor\"\n}\n\nexport default function SurveyBlock() {\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const answers = new FormData(event.currentTarget)\n    const score = Number(answers.get(\"score\"))\n\n    toast.success(\"Thanks For Rating Acme\", {\n      description: `You scored us ${score} out of 10, which counts as ${bucket(\n        score\n      )}. Your reason goes straight to the product team.`,\n    })\n  }\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-4 py-12 text-foreground sm:px-6 sm:py-16\">\n      <Questionnaire\n        items={ITEMS}\n        onSubmit={handleSubmit}\n        className=\"w-full max-w-2xl gap-6\"\n      >\n        <div className=\"flex items-center justify-between gap-4\">\n          <p className=\"text-xs font-medium text-muted-foreground\">\n            Acme Product Survey\n          </p>\n          <QuestionnaireProgress />\n        </div>\n\n        {/* Floored to the tallest question so the actions row stays put. */}\n        <div className=\"min-h-44\">\n          <QuestionnaireItem name=\"score\" required>\n            <QuestionnaireTitle className=\"text-lg\">\n              How Likely Are You To Recommend Acme?\n            </QuestionnaireTitle>\n            <QuestionnaireDescription>\n              Zero means not at all likely, ten means extremely likely.\n            </QuestionnaireDescription>\n            <QuestionnaireChoices className=\"grid-cols-6 gap-1.5 sm:grid-cols-11\">\n              {SCORES.map((score) => (\n                <QuestionnaireChoice\n                  key={score}\n                  value={score}\n                  className=\"justify-center px-0 text-center tabular-nums [&_[data-slot=questionnaire-choice-indicator]]:hidden [&_[data-slot=questionnaire-choice-label]]:flex-none [&_[data-slot=questionnaire-choice-label]]:items-center\"\n                >\n                  <span className=\"font-medium\">{score}</span>\n                </QuestionnaireChoice>\n              ))}\n            </QuestionnaireChoices>\n            <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n              <span>Not At All Likely</span>\n              <span>Extremely Likely</span>\n            </div>\n            <QuestionnaireError />\n          </QuestionnaireItem>\n\n          <QuestionnaireItem name=\"reason\" required>\n            <QuestionnaireTitle className=\"text-lg\">\n              What Is The Main Reason For Your Score?\n            </QuestionnaireTitle>\n            <QuestionnaireDescription>\n              A sentence or two is plenty. It is the part the team reads first.\n            </QuestionnaireDescription>\n            <QuestionnaireChoices>\n              <QuestionnaireInput\n                aria-label=\"Reason for your score\"\n                placeholder=\"Tell us what drove that number\"\n              />\n            </QuestionnaireChoices>\n            <QuestionnaireError />\n          </QuestionnaireItem>\n        </div>\n\n        <QuestionnaireActions>\n          <QuestionnairePrevious />\n          <QuestionnaireNext />\n          <QuestionnaireSubmit />\n        </QuestionnaireActions>\n      </Questionnaire>\n      <Toaster />\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/survey-2.tsx"
    }
  ],
  "meta": {
    "height": "408px",
    "tier": "free"
  },
  "categories": [
    "survey"
  ],
  "type": "registry:block"
}