{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog10",
  "title": "Alert dialog",
  "description": "Alert dialog built with shadcn/ui.",
  "files": [
    {
      "path": "contents/components/alert-dialog/10/index.tsx",
      "content": "\"use client\";\n\nimport { OTPInput, type SlotProps } from \"input-otp\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\";\n\nexport default function Component() {\n  const [value, setValue] = useState(\"\");\n  const [hasGuessed, setHasGuessed] = useState<undefined | boolean>(undefined);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (hasGuessed) {\n      closeButtonRef.current?.focus();\n    }\n  }, [hasGuessed]);\n\n  async function onSubmit(e?: React.FormEvent<HTMLFormElement>) {\n    e?.preventDefault?.();\n\n    inputRef.current?.select();\n    await new Promise((r) => setTimeout(r, 1_00));\n\n    setHasGuessed(true);\n\n    setValue(\"\");\n    setTimeout(() => {\n      inputRef.current?.blur();\n    }, 20);\n  }\n\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">OTP code</Button>\n      </DialogTrigger>\n      <DialogContent>\n        <div className=\"flex flex-col items-center gap-2\">\n          <DialogHeader>\n            <DialogTitle className=\"font-normal sm:text-center\">\n              {hasGuessed ? \"Code verified!\" : \"Enter confirmation code\"}\n            </DialogTitle>\n            <DialogDescription className=\"sm:text-center\">\n              {hasGuessed\n                ? \"Your code has been successfully verified.\"\n                : `Check your email and enter the code`}\n            </DialogDescription>\n          </DialogHeader>\n        </div>\n\n        {hasGuessed ? (\n          <div className=\"text-center\">\n            <DialogClose asChild>\n              <Button ref={closeButtonRef} type=\"button\">\n                Close\n              </Button>\n            </DialogClose>\n          </div>\n        ) : (\n          <div className=\"space-y-4\">\n            <div className=\"flex justify-center\">\n              <OTPInput\n                containerClassName=\"flex items-center gap-3 has-disabled:opacity-50\"\n                id=\"cofirmation-code\"\n                maxLength={4}\n                onChange={setValue}\n                onComplete={onSubmit}\n                onFocus={() => setHasGuessed(undefined)}\n                ref={inputRef}\n                render={({ slots }) => (\n                  <div className=\"flex gap-2\">\n                    {slots.map((slot, idx) => (\n                      <Slot key={String(idx)} {...slot} />\n                    ))}\n                  </div>\n                )}\n                value={value}\n              />\n            </div>\n            {hasGuessed === false && (\n              <p\n                aria-live=\"polite\"\n                className=\"text-muted-foreground text-center text-xs\"\n                role=\"alert\"\n              >\n                Invalid code. Please try again.\n              </p>\n            )}\n            <p className=\"text-center text-sm\">\n              <a className=\"underline hover:no-underline\" href=\"#\">\n                Resend code\n              </a>\n            </p>\n          </div>\n        )}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nfunction Slot(props: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"border-input bg-background text-foreground flex size-9 items-center justify-center rounded-md border font-medium shadow-xs transition-[color,box-shadow]\",\n        { \"border-ring ring-ring/50 z-10 ring-[3px]\": props.isActive },\n      )}\n    >\n      {props.char !== null && <div>{props.char}</div>}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/alert-dialog10.tsx"
    }
  ],
  "type": "registry:component"
}