{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "support-ticket-form",
  "description": "Support ticket submission form",
  "dependencies": [
    "react-hook-form",
    "@hookform/resolvers",
    "zod",
    "sonner"
  ],
  "registryDependencies": [
    "https://formscn.space/r/button.json",
    "https://formscn.space/r/card.json",
    "https://formscn.space/r/input.json",
    "https://formscn.space/r/textarea.json",
    "https://formscn.space/r/label.json",
    "https://formscn.space/r/select.json"
  ],
  "files": [
    {
      "path": "src/registry/default/templates/support-ticket-form.tsx",
      "content": "\"use client\";\n\nimport { useForm, Controller } from \"react-hook-form\";\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as z from \"zod\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { toast } from \"sonner\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\n\nconst formSchema = z.object({\n  email: z.string().email(\"Invalid email address\").min(1, \"Contact Email is required\"),\n  category: z.enum([\"bug\", \"feature\", \"billing\", \"other\"]),\n  priority: z.enum([\"low\", \"medium\", \"high\", \"urgent\"]),\n  subject: z.string().min(1, \"Subject is required\"),\n  description: z.string().min(1, \"Description is required\"),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\nexport function SupportTicketForm() {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      email: \"\",\n      category: \"bug\",\n      priority: \"low\",\n      subject: \"\",\n      description: \"\",\n    },\n  });\n\n  const onSubmit = async (data: FormValues) => {\n    console.log(\"Form submitted:\", data);\n    toast.success(\"Form submitted successfully!\");\n  };\n\n  return (\n    <Card className=\"w-full max-w-md mx-auto\">\n      <CardHeader>\n        <CardTitle>Support Ticket</CardTitle>\n        <CardDescription>Submit a support request or bug report</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"email\">Contact Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"you@company.com\"\n              {...form.register(\"email\")}\n            />\n            {form.formState.errors.email && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.email.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"category\">Issue Category</Label>\n            <Controller\n              control={form.control}\n              name=\"category\"\n              render={({ field }) => (\n                <Select onValueChange={field.onChange} defaultValue={field.value}>\n                  <SelectTrigger id=\"category\">\n                    <SelectValue placeholder=\"Select an option\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"bug\">Bug Report</SelectItem>\n                    <SelectItem value=\"feature\">Feature Request</SelectItem>\n                    <SelectItem value=\"billing\">Billing</SelectItem>\n                    <SelectItem value=\"other\">Other</SelectItem>\n                  </SelectContent>\n                </Select>\n              )}\n            />\n            {form.formState.errors.category && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.category.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label>Priority Level</Label>\n            <Controller\n              control={form.control}\n              name=\"priority\"\n              render={({ field }) => (\n                <RadioGroup\n                  onValueChange={field.onChange}\n                  defaultValue={field.value}\n                  className=\"flex flex-col space-y-1\"\n                >\n                  <div className=\"flex items-center space-x-2\">\n                    <RadioGroupItem value=\"low\" id=\"priority-low\" />\n                    <Label htmlFor=\"priority-low\">Low</Label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <RadioGroupItem value=\"medium\" id=\"priority-medium\" />\n                    <Label htmlFor=\"priority-medium\">Medium</Label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <RadioGroupItem value=\"high\" id=\"priority-high\" />\n                    <Label htmlFor=\"priority-high\">High</Label>\n                  </div>\n                  <div className=\"flex items-center space-x-2\">\n                    <RadioGroupItem value=\"urgent\" id=\"priority-urgent\" />\n                    <Label htmlFor=\"priority-urgent\">Urgent</Label>\n                  </div>\n                </RadioGroup>\n              )}\n            />\n            {form.formState.errors.priority && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.priority.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"subject\">Subject</Label>\n            <Input\n              id=\"subject\"\n              type=\"text\"\n              placeholder=\"Brief summary of the issue\"\n              {...form.register(\"subject\")}\n            />\n            {form.formState.errors.subject && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.subject.message}</p>\n          )}\n          </div>\n\n          <div className=\"space-y-2\">\n            <Label htmlFor=\"description\">Description</Label>\n            <Textarea\n              id=\"description\"\n              placeholder=\"Please describe the issue in detail...\"\n              {...form.register(\"description\")}\n            />\n            {form.formState.errors.description && (\n            <p className=\"text-sm text-destructive\">{form.formState.errors.description.message}</p>\n          )}\n          <p className=\"text-sm text-muted-foreground\">Include steps to reproduce if applicable</p>\n          </div>\n\n          <Button type=\"submit\" className=\"w-full\">Submit</Button>\n        </form>\n      </CardContent>\n    </Card>\n  );\n}",
      "type": "registry:block",
      "target": "components/forms/support-ticket-form.tsx"
    }
  ],
  "type": "registry:block"
}