{
  "name": "key-value-form-demo",
  "type": "registry:example",
  "dependencies": [
    "@hookform/resolvers",
    "react-hook-form",
    "zod",
    "sonner"
  ],
  "registryDependencies": [
    "key-value",
    "button",
    "form",
    "input"
  ],
  "files": [
    {
      "path": "examples/key-value-form-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport * as React from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport { toast } from \"sonner\";\nimport { z } from \"zod\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/bases/radix/ui/form\";\nimport { Input } from \"@/registry/bases/radix/ui/input\";\nimport {\n  KeyValue,\n  KeyValueAdd,\n  KeyValueItem,\n  KeyValueKeyInput,\n  KeyValueList,\n  KeyValueRemove,\n  KeyValueValueInput,\n} from \"@/registry/bases/radix/ui/key-value\";\n\nconst formSchema = z.object({\n  projectName: z.string().min(1, \"Project name is required\"),\n  envVariables: z\n    .array(\n      z.object({\n        id: z.string(),\n        key: z.string().min(1, \"Key is required\"),\n        value: z.string(),\n      }),\n    )\n    .min(1, \"At least one environment variable is required\"),\n});\n\ntype FormValues = z.infer<typeof formSchema>;\n\nexport default function KeyValueFormDemo() {\n  const form = useForm<FormValues>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      projectName: \"\",\n      envVariables: [{ id: \"1\", key: \"\", value: \"\" }],\n    },\n  });\n\n  const onSubmit = React.useCallback((data: FormValues) => {\n    toast.success(\"Submitted values:\", {\n      description: (\n        <pre className=\"mt-2 w-full rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    });\n  }, []);\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(onSubmit)}\n        className=\"flex flex-col gap-6\"\n      >\n        <FormField\n          control={form.control}\n          name=\"projectName\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Project Name</FormLabel>\n              <FormControl>\n                <Input placeholder=\"my-awesome-project\" {...field} />\n              </FormControl>\n              <FormDescription>The name of your project</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"envVariables\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Environment Variables</FormLabel>\n              <FormControl>\n                <KeyValue\n                  value={field.value}\n                  onValueChange={field.onChange}\n                  keyPlaceholder=\"KEY\"\n                  valuePlaceholder=\"value\"\n                  onKeyValidate={(key) => {\n                    if (!key) return \"Key is required\";\n                    if (!/^[A-Z_][A-Z0-9_]*$/.test(key)) {\n                      return \"Key must be uppercase with underscores\";\n                    }\n                    return undefined;\n                  }}\n                  allowDuplicateKeys={false}\n                >\n                  <KeyValueList>\n                    <KeyValueItem>\n                      <KeyValueKeyInput className=\"flex-1\" />\n                      <KeyValueValueInput className=\"flex-1\" />\n                      <KeyValueRemove />\n                    </KeyValueItem>\n                  </KeyValueList>\n                  <KeyValueAdd />\n                </KeyValue>\n              </FormControl>\n              <FormDescription>\n                Add environment variables for your project. Supports pasting\n                multiple lines in KEY=VALUE format.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}