{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "passkey-verify",
  "dependencies": [
    "@laravel/passkeys",
    "@inertiajs/react"
  ],
  "registryDependencies": [
    "@craft/use-error-toast",
    "button"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/components/passkey-verify.tsx",
      "content": "import type { UrlMethodPair } from \"@inertiajs/core\";\nimport { router } from \"@inertiajs/react\";\nimport { usePasskeyVerify } from \"@laravel/passkeys/react\";\nimport { KeyRound } from \"lucide-react\";\nimport InputError from \"@/components/input-error\";\nimport { useErrorToast } from \"@/hooks/use-error-toast\";\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Spinner } from \"@/components/ui/spinner\";\n\ntype Props = {\n    routes?: {\n        options: UrlMethodPair;\n        submit: UrlMethodPair;\n    };\n    label?: string;\n    loadingLabel?: string;\n    separator?: string;\n};\n\nexport default function PasskeyVerify({ routes, label, loadingLabel, separator }: Props = {}) {\n    const { verify, isLoading, error, isSupported } = usePasskeyVerify({\n        ...(routes && {\n            routes: {\n                options: routes.options.url,\n                submit: routes.submit.url,\n            },\n        }),\n        onSuccess: (response) => {\n            router.visit(response.redirect ?? \"/dashboard\");\n        },\n    });\n\n    useErrorToast(error);\n\n    if (!isSupported) {\n        return null;\n    }\n\n    return (\n        <>\n            <div className=\"grid gap-2\">\n                <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    className=\"w-full\"\n                    onClick={verify}\n                    disabled={isLoading}\n                >\n                    {isLoading ? <Spinner /> : <KeyRound className=\"h-4 w-4\" />}\n                    {isLoading\n                        ? (loadingLabel ?? \"Authenticating...\")\n                        : (label ?? \"Sign in with a passkey\")}\n                </Button>\n                {error && <InputError message={error} className=\"text-center\" />}\n            </div>\n\n            <div className=\"relative my-6\">\n                <div className=\"absolute inset-0 flex items-center\">\n                    <Separator className=\"w-full\" />\n                </div>\n                <div className=\"relative flex justify-center text-xs uppercase\">\n                    <span className=\"bg-background px-2 text-muted-foreground\">\n                        {separator ?? \"Or continue with email\"}\n                    </span>\n                </div>\n            </div>\n        </>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}