{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "questionnaire",
  "title": "Questionnaire",
  "description": "A multi-step questionnaire with single-choice, multiple-choice, freeform, and skippable questions, built on @shadcn/react.",
  "dependencies": [
    "@shadcn/react"
  ],
  "registryDependencies": [
    "utils",
    "@persianlabsui/button"
  ],
  "files": [
    {
      "path": "registry/base/ui/questionnaire.tsx",
      "content": "\"use client\"\n\nimport { Questionnaire as QuestionnairePrimitive } from \"@shadcn/react/questionnaire\"\nimport { CheckIcon, ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\"\nimport type * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nfunction Questionnaire({\n  className,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Root>) {\n  return (\n    <QuestionnairePrimitive.Root\n      data-slot=\"questionnaire\"\n      className={cn(\"flex flex-col gap-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireProgress({\n  className,\n  render,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Progress>) {\n  return (\n    <QuestionnairePrimitive.Progress\n      data-slot=\"questionnaire-progress\"\n      render={\n        render ??\n        ((progressProps, state) => (\n          <div\n            {...progressProps}\n            className={cn(\n              \"h-1.5 w-full overflow-hidden rounded-full bg-primary/15\",\n              className\n            )}\n          >\n            <div\n              data-slot=\"questionnaire-progress-indicator\"\n              className=\"h-full origin-left rounded-full bg-primary transition-transform duration-300 ease-out rtl:origin-right\"\n              style={{\n                transform: `scaleX(${state.total ? state.current / state.total : 0})`,\n              }}\n            />\n          </div>\n        ))\n      }\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Item>) {\n  return (\n    <QuestionnairePrimitive.Item\n      data-slot=\"questionnaire-item\"\n      className={cn(\n        \"m-0 flex min-w-0 flex-col gap-4 border-0 p-0 [&[hidden]]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Title>) {\n  return (\n    <QuestionnairePrimitive.Title\n      data-slot=\"questionnaire-title\"\n      className={cn(\"p-0 text-base font-semibold text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Description>) {\n  return (\n    <QuestionnairePrimitive.Description\n      data-slot=\"questionnaire-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireChoices({\n  className,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Choices>) {\n  return (\n    <QuestionnairePrimitive.Choices\n      data-slot=\"questionnaire-choices\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireChoice({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Choice>) {\n  return (\n    <QuestionnairePrimitive.Choice\n      data-slot=\"questionnaire-choice\"\n      className={cn(\n        \"group/questionnaire-choice relative flex cursor-pointer items-center gap-3 rounded-lg border border-input px-3.5 py-2.5 text-sm shadow-xs transition-[border-color,background-color,box-shadow] outline-none select-none has-focus-visible:border-ring has-focus-visible:ring-3 has-focus-visible:ring-ring/50 data-invalid:border-destructive data-checked:border-primary data-checked:bg-primary/5 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <QuestionnairePrimitive.ChoiceInput\n        data-slot=\"questionnaire-choice-input\"\n        className=\"sr-only\"\n      />\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          \"relative flex size-4 shrink-0 items-center justify-center border border-input transition-colors\",\n          \"group-data-checked/questionnaire-choice:border-primary\",\n          \"group-data-[type=radio]/questionnaire-choice:rounded-full\",\n          \"group-data-[type=checkbox]/questionnaire-choice:rounded-[4px]\",\n          \"group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:bg-primary\"\n        )}\n      >\n        <span className=\"hidden size-2 rounded-full bg-primary group-data-[type=radio]/questionnaire-choice:group-data-checked/questionnaire-choice:block\" />\n        <CheckIcon className=\"hidden size-3 text-primary-foreground group-data-[type=checkbox]/questionnaire-choice:group-data-checked/questionnaire-choice:block\" />\n      </span>\n      <QuestionnairePrimitive.ChoiceLabel\n        data-slot=\"questionnaire-choice-label\"\n        className=\"min-w-0 flex-1\"\n      >\n        {children}\n      </QuestionnairePrimitive.ChoiceLabel>\n      <QuestionnairePrimitive.ChoiceShortcut\n        data-slot=\"questionnaire-choice-shortcut\"\n        className=\"flex size-5 shrink-0 items-center justify-center rounded border border-input text-xs text-muted-foreground group-data-checked/questionnaire-choice:border-primary/40 group-data-checked/questionnaire-choice:text-primary\"\n      />\n    </QuestionnairePrimitive.Choice>\n  )\n}\n\nfunction QuestionnaireInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Input>) {\n  return (\n    <QuestionnairePrimitive.Input\n      data-slot=\"questionnaire-input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-lg border border-input bg-transparent px-3 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground 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 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireError({\n  className,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Error>) {\n  return (\n    <QuestionnairePrimitive.Error\n      data-slot=\"questionnaire-error\"\n      className={cn(\"text-sm text-destructive\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"questionnaire-actions\"\n      className={cn(\"flex items-center justify-between gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnairePrevious({\n  className,\n  children,\n  render,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Previous>) {\n  return (\n    <QuestionnairePrimitive.Previous\n      data-slot=\"questionnaire-previous\"\n      render={render ?? <Button type=\"button\" variant=\"outline\" size=\"sm\" />}\n      className={cn(\"gap-1.5 [&[hidden]]:hidden\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <ChevronLeftIcon className=\"rtl:-scale-x-100\" />\n          Previous\n        </>\n      )}\n    </QuestionnairePrimitive.Previous>\n  )\n}\n\nfunction QuestionnaireSkip({\n  className,\n  children,\n  render,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Skip>) {\n  return (\n    <QuestionnairePrimitive.Skip\n      data-slot=\"questionnaire-skip\"\n      render={render ?? <Button type=\"button\" variant=\"ghost\" size=\"sm\" />}\n      className={cn(\"[&[hidden]]:hidden\", className)}\n      {...props}\n    >\n      {children ?? \"Skip\"}\n    </QuestionnairePrimitive.Skip>\n  )\n}\n\nfunction QuestionnaireNext({\n  className,\n  children,\n  render,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Next>) {\n  return (\n    <QuestionnairePrimitive.Next\n      data-slot=\"questionnaire-next\"\n      render={render ?? <Button type=\"button\" size=\"sm\" />}\n      className={cn(\"gap-1.5 [&[hidden]]:hidden\", className)}\n      {...props}\n    >\n      {children ?? (\n        <>\n          Next\n          <ChevronRightIcon className=\"rtl:-scale-x-100\" />\n        </>\n      )}\n    </QuestionnairePrimitive.Next>\n  )\n}\n\nfunction QuestionnaireSubmit({\n  className,\n  children,\n  render,\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Submit>) {\n  return (\n    <QuestionnairePrimitive.Submit\n      data-slot=\"questionnaire-submit\"\n      render={render ?? <Button type=\"submit\" size=\"sm\" />}\n      className={cn(\"[&[hidden]]:hidden\", className)}\n      {...props}\n    >\n      {children ?? \"Submit\"}\n    </QuestionnairePrimitive.Submit>\n  )\n}\n\nexport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoices,\n  QuestionnaireDescription,\n  QuestionnaireError,\n  QuestionnaireInput,\n  QuestionnaireItem,\n  QuestionnaireNext,\n  QuestionnairePrevious,\n  QuestionnaireProgress,\n  QuestionnaireSkip,\n  QuestionnaireSubmit,\n  QuestionnaireTitle,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}