{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autosize-textarea-customize",
  "title": "Autosize Textarea Customize",
  "description": "component for the Autosize Textarea Customize",
  "registryDependencies": [
    "@spectrumui/autosize-textarea-dependecies"
  ],
  "files": [
    {
      "path": "app/registry/autosize-textarea/usage/autosize-textarea-customize.tsx",
      "content": "\"use client\";\n\nimport { zodResolver } from \"@hookform/resolvers/zod\";\nimport { useForm } from \"react-hook-form\";\nimport * as z from \"zod\";\nimport * as React from \"react\";\nimport {\n  Form,\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/components/ui/form\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport { toast } from \"@/components/ui/use-toast\";\nimport { useAutosizeTextArea } from \"@/components/ui/autosize-textarea\";\nimport { LoadingButton } from \"@/components/ui/loading-button\";\n\nconst FormSchema = z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: \"Bio must be at least 10 characters.\",\n    })\n    .max(160, {\n      message: \"Bio must not be longer than 30 characters.\",\n    }),\n});\n\nconst AutosizeTextareaCustomize = () => {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  });\n\n  const [loading, setLoading] = React.useState(false);\n\n  const textAreaRef = React.useRef<HTMLTextAreaElement>(null);\n  const [triggerAutoSize, setTriggerAutoSize] = React.useState(\"\");\n  useAutosizeTextArea({\n    textAreaRef: textAreaRef?.current,\n    triggerAutoSize: triggerAutoSize,\n    minHeight: 52,\n    maxHeight: 200,\n  });\n\n  /** You can use `form.watch` to trigger auto sizing. */\n  const bio = form.watch(\"bio\");\n  React.useEffect(() => {\n    if (textAreaRef.current) {\n      setTriggerAutoSize(bio);\n    }\n  }, [bio]);\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n      toast({\n        title: \"Your submitted data\",\n        description: (\n          <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n            <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n          </pre>\n        ),\n      });\n    }, 500);\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"w-2/3 space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"bio\"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Bio</FormLabel>\n              <FormControl>\n                <Textarea\n                  placeholder=\"Tell us a little bit about yourself\"\n                  {...field}\n                  ref={textAreaRef}\n                />\n              </FormControl>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <LoadingButton loading={loading} type=\"submit\">\n          Submit\n        </LoadingButton>\n      </form>\n    </Form>\n  );\n};\nexport default AutosizeTextareaCustomize;\n",
      "type": "registry:component",
      "target": "components/spectrumui/autosize-textarea-customize.tsx"
    }
  ],
  "type": "registry:component"
}