{
  "$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.",
  "dependencies": [
    "@shadcn/react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/ui/questionnaire.tsx",
      "content": "'use client'\n\nimport { Questionnaire as QuestionnairePrimitive } from '@shadcn/react/questionnaire'\nimport { IconCheck } from '@tabler/icons-react'\nimport type * as React from 'react'\n\nimport { cn } from '@/lib/cn'\n\nimport { type Button, buttonVariants } from '@/components/ui/button'\n\nfunction Questionnaire({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Root>) {\n  return (\n    <QuestionnairePrimitive.Root\n      data-slot='questionnaire'\n      className={cn('flex w-full min-w-0 flex-col gap-4', className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireProgress({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Progress>) {\n  return (\n    <QuestionnairePrimitive.Progress\n      data-slot='questionnaire-progress'\n      className={cn('min-h-[1lh] w-fit min-w-[14ch] font-medium text-muted-foreground text-xs tabular-nums', className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireItem({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Item>) {\n  return (\n    <QuestionnairePrimitive.Item\n      data-slot='questionnaire-item'\n      className={cn('flex min-w-0 flex-col gap-4 border-0 p-0 outline-none', className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireTitle({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Title>) {\n  return (\n    <QuestionnairePrimitive.Title\n      data-slot='questionnaire-title'\n      className={cn(\n        'cn-font-heading text-pretty font-medium text-base leading-snug [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4',\n        className\n      )}\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-pretty text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireChoices({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Choices>) {\n  return (\n    <QuestionnairePrimitive.Choices\n      data-slot='questionnaire-choices'\n      className={cn('group/questionnaire-choices grid min-w-0 gap-2', className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireChoice({\n  children,\n  className,\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 min-h-11 cursor-pointer select-none items-start gap-2.5 rounded-lg border border-input bg-transparent px-3 py-2.5 text-start text-sm outline-none transition-colors hover:bg-muted/50 has-[>input:focus-visible]:border-ac has-[>input:focus-visible]:ring-2 has-[>input:focus-visible]:ring-ac/30 data-checked:border-ac/40 data-invalid:border-destructive data-checked:bg-ac/5',\n        'data-disabled:pointer-events-none 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='absolute inset-0 z-10 size-full cursor-pointer opacity-0'\n      />\n      <span\n        aria-hidden='true'\n        data-slot='questionnaire-choice-indicator'\n        className='pointer-events-none relative flex size-4 shrink-0 translate-y-[--spacing(0.45)] items-center justify-center rounded-[4px] border border-input transition-colors group-[[data-type=checkbox][data-checked]]/questionnaire-choice:bg-ac group-[[data-type=checkbox][data-checked]]/questionnaire-choice:text-bg 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-ac'\n      >\n        <span\n          data-slot='questionnaire-choice-indicator-dot'\n          className='hidden size-2 rounded-full bg-ac group-data-checked/questionnaire-choice:block group-data-[type=checkbox]/questionnaire-choice:hidden'\n        />\n        <IconCheck\n          data-slot='questionnaire-choice-indicator-check'\n          className='hidden size-3.5 group-data-checked/questionnaire-choice:block group-data-[type=radio]/questionnaire-choice:hidden'\n        />\n      </span>\n      <QuestionnairePrimitive.ChoiceLabel\n        data-slot='questionnaire-choice-label'\n        className='flex min-w-0 flex-1 flex-col gap-0.5 leading-snug'\n      >\n        {children}\n      </QuestionnairePrimitive.ChoiceLabel>\n      <QuestionnairePrimitive.ChoiceShortcut\n        data-slot='questionnaire-choice-shortcut'\n        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-medium font-mono text-[0.625rem] text-muted-foreground leading-none group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 group-data-[shortcut]/questionnaire-choice:inline-flex'\n      />\n    </QuestionnairePrimitive.Choice>\n  )\n}\n\nfunction QuestionnaireChoiceDescription({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span data-slot='questionnaire-choice-description' className={cn('text-muted-foreground', className)} {...props} />\n  )\n}\n\nfunction QuestionnaireInput({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Input>) {\n  return (\n    <div data-slot='questionnaire-input-wrapper' className='group/questionnaire-input relative w-full min-w-0'>\n      <QuestionnairePrimitive.Input\n        data-slot='questionnaire-input'\n        className={cn(\n          'focus-ring h-8 min-h-11 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base outline-none transition-[color,box-shadow,background-color] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 sm:min-h-0 md:text-sm',\n          'selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground',\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction QuestionnaireError({ className, ...props }: React.ComponentProps<typeof QuestionnairePrimitive.Error>) {\n  return (\n    <QuestionnairePrimitive.Error\n      data-slot='questionnaire-error'\n      className={cn('mt-2 text-destructive text-sm', className)}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnaireActions({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='questionnaire-actions'\n      className={cn(\n        'grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2 sm:min-h-8',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction QuestionnairePrevious({\n  children,\n  className,\n  size = 'default',\n  variant = 'outline',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Previous> &\n  Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {\n  return (\n    <QuestionnairePrimitive.Previous\n      data-slot='questionnaire-previous'\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        buttonVariants({ size, variant }),\n        'col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? 'Previous'}\n    </QuestionnairePrimitive.Previous>\n  )\n}\n\nfunction QuestionnaireSkip({\n  children,\n  className,\n  size = 'default',\n  variant = 'outline',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Skip> &\n  Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {\n  return (\n    <QuestionnairePrimitive.Skip\n      data-slot='questionnaire-skip'\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        buttonVariants({ size, variant }),\n        'col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? 'Skip'}\n    </QuestionnairePrimitive.Skip>\n  )\n}\n\nfunction QuestionnaireNext({\n  children,\n  className,\n  size = 'default',\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Next> &\n  Pick<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {\n  return (\n    <QuestionnairePrimitive.Next\n      data-slot='questionnaire-next'\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        buttonVariants({ size, variant }),\n        'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? 'Next'}\n    </QuestionnairePrimitive.Next>\n  )\n}\n\nfunction QuestionnaireSubmit({\n  children,\n  className,\n  size = 'default',\n  tint = 'default',\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof QuestionnairePrimitive.Submit> &\n  Pick<React.ComponentProps<typeof Button>, 'size' | 'tint' | 'variant'>) {\n  return (\n    <QuestionnairePrimitive.Submit\n      data-slot='questionnaire-submit'\n      data-size={size}\n      data-tint={tint}\n      data-variant={variant}\n      className={cn(\n        buttonVariants({ size, tint, variant }),\n        'col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0',\n        className\n      )}\n      {...props}\n    >\n      {children ?? 'Submit'}\n    </QuestionnairePrimitive.Submit>\n  )\n}\n\nexport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoiceDescription,\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:component"
    },
    {
      "path": "lib/cn.ts",
      "content": "import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
      "type": "registry:lib"
    }
  ],
  "type": "registry:component"
}