{
  "name": "mask-input-form-demo",
  "type": "registry:example",
  "dependencies": [
    "@hookform/resolvers/zod",
    "react-hook-form",
    "zod"
  ],
  "registryDependencies": [
    "button",
    "form",
    "mask-input"
  ],
  "files": [
    {
      "path": "examples/mask-input-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 * as 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 { MaskInput } from \"@/registry/bases/radix/ui/mask-input\";\n\nconst formSchema = z.object({\n  phone: z.string().min(10, \"Phone number must be at least 10 digits\"),\n  ssn: z.string().min(9, \"SSN must be 9 digits\"),\n  birthDate: z.string().min(8, \"Birth date is required\"),\n  emergencyContact: z.string().min(10, \"Emergency contact is required\"),\n});\n\ntype FormSchema = z.infer<typeof formSchema>;\n\nexport default function MaskInputFormDemo() {\n  const form = useForm<FormSchema>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      phone: \"\",\n      ssn: \"\",\n      birthDate: \"\",\n      emergencyContact: \"\",\n    },\n  });\n\n  function onSubmit(values: FormSchema) {\n    toast.success(\"Form submitted successfully!\");\n    console.log(values);\n  }\n\n  return (\n    <Form {...form}>\n      <form\n        onSubmit={form.handleSubmit(onSubmit)}\n        className=\"grid gap-6 md:grid-cols-2\"\n      >\n        <FormField\n          control={form.control}\n          name=\"phone\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Phone Number</FormLabel>\n              <FormControl>\n                <MaskInput\n                  mask=\"phone\"\n                  value={field.value}\n                  onValueChange={(_maskedValue, unmaskedValue) => {\n                    field.onChange(unmaskedValue);\n                  }}\n                  placeholder=\"Enter phone number\"\n                  invalid={!!form.formState.errors.phone}\n                />\n              </FormControl>\n              <FormDescription>Enter your primary phone number</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"ssn\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Social Security Number</FormLabel>\n              <FormControl>\n                <MaskInput\n                  mask=\"ssn\"\n                  value={field.value}\n                  onValueChange={(_maskedValue, unmaskedValue) => {\n                    field.onChange(unmaskedValue);\n                  }}\n                  placeholder=\"Enter SSN\"\n                  invalid={!!form.formState.errors.ssn}\n                />\n              </FormControl>\n              <FormDescription>\n                Enter your social security number\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"birthDate\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Birth Date</FormLabel>\n              <FormControl>\n                <MaskInput\n                  mask=\"date\"\n                  value={field.value}\n                  onValueChange={(_maskedValue, unmaskedValue) => {\n                    field.onChange(unmaskedValue);\n                  }}\n                  placeholder=\"Enter birth date\"\n                  invalid={!!form.formState.errors.birthDate}\n                />\n              </FormControl>\n              <FormDescription>Enter your date of birth</FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n\n        <FormField\n          control={form.control}\n          name=\"emergencyContact\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Emergency Contact</FormLabel>\n              <FormControl>\n                <MaskInput\n                  mask=\"phone\"\n                  value={field.value}\n                  onValueChange={(_maskedValue, unmaskedValue) => {\n                    field.onChange(unmaskedValue);\n                  }}\n                  placeholder=\"Enter emergency contact\"\n                  invalid={!!form.formState.errors.emergencyContact}\n                />\n              </FormControl>\n              <FormDescription>\n                Enter emergency contact phone number\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <div className=\"flex w-full justify-end gap-2 md:col-span-2\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\">Submit</Button>\n        </div>\n      </form>\n    </Form>\n  );\n}\n",
      "target": ""
    }
  ]
}