{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-with-email-spell-checker",
  "type": "registry:component",
  "title": "Input with Email Spell Checker",
  "description": "A component for inputting email addresses with spell checking",
  "dependencies": [
    "lucide-react",
    "@zootools/email-spell-checker",
    "use-debounce"
  ],
  "registryDependencies": [
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/default/components/input/input-with-email-spell-checker.tsx",
      "content": "'use client'\r\n\r\nimport { Input } from '@/registry/default/ui/input'\r\nimport { Label } from '@/registry/default/ui/label'\r\nimport { MailIcon } from 'lucide-react'\r\nimport React, { useId } from 'react'\r\nimport { useDebouncedCallback } from 'use-debounce'\r\nimport emailSpellChecker from '@zootools/email-spell-checker'\r\n\r\nexport default function InputWithEmailSpellChecker() {\r\n    const id = useId()\r\n    const [value, setValue] = React.useState<string>('')\r\n\r\n    const [suggestion, setSuggestion] = React.useState<string | null>(null)\r\n    const debounced = useDebouncedCallback((value) => {\r\n        const suggestion = emailSpellChecker.run({\r\n            email: value,\r\n        })\r\n\r\n        if (suggestion) {\r\n            setSuggestion(suggestion.full)\r\n        }\r\n    }, 500)\r\n\r\n    const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n        const inputValue = e.target.value\r\n        setValue(inputValue)\r\n        debounced(inputValue)\r\n    }\r\n\r\n    return (\r\n        <div className=\"flex w-full max-w-4/5 flex-col gap-2\">\r\n            <Label htmlFor={id}>Input with email spell checker</Label>\r\n\r\n            <div className=\"relative w-full\">\r\n                <MailIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2\" />\r\n\r\n                <Input\r\n                    id={id}\r\n                    type=\"text\"\r\n                    className=\"ps-8\"\r\n                    placeholder=\"ali@gnial.com\"\r\n                    value={value}\r\n                    onChange={handleOnChange}\r\n                />\r\n            </div>\r\n\r\n            {suggestion && (\r\n                <p>\r\n                    <span className=\"text-foreground text-sm\">\r\n                        Did you mean{' '}\r\n                        <button\r\n                            onClick={() => {\r\n                                setValue(suggestion)\r\n                                setSuggestion(null)\r\n                            }}\r\n                            className=\"focus-visible:border-ring focus-visible:ring-ring/50 cursor-pointer font-bold transition-all outline-none hover:underline hover:underline-offset-4 focus-visible:ring-[3px]\"\r\n                            type=\"button\"\r\n                        >\r\n                            {suggestion}\r\n                        </button>\r\n                        ?\r\n                    </span>\r\n                </p>\r\n            )}\r\n\r\n            <p className=\"text-muted-foreground text-sm\">\r\n                Built with{' '}\r\n                <a\r\n                    href=\"https://github.com/smashsend/email-spell-checker\"\r\n                    target=\"_blank\"\r\n                    className=\"underline underline-offset-4\"\r\n                    rel=\"noreferrer\"\r\n                >\r\n                    @zootools/email-spell-checker\r\n                </a>\r\n            </p>\r\n        </div>\r\n    )\r\n}\r\n",
      "type": "registry:component",
      "target": "components/input-with-email-spell-checker.tsx"
    }
  ]
}