{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "passkey-register",
  "dependencies": [
    "@laravel/passkeys",
    "@inertiajs/react"
  ],
  "registryDependencies": [
    "@craft/action-confirmation-provider",
    "@craft/use-error-toast",
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/components/passkey-register.tsx",
      "content": "import { Passkeys } from \"@laravel/passkeys\";\nimport { useState } from \"react\";\nimport InputError from \"@/components/input-error\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport { useErrorToast } from \"@/hooks/use-error-toast\";\nimport { useActionConfirmation } from \"@/components/action-confirmation-provider\";\n\ntype Props = {\n    onSuccess: () => void;\n};\n\nconst isActionConfirmationCancelled = (error: unknown): boolean => {\n    return error instanceof Error && error.name === \"ActionConfirmationCancelledError\";\n};\n\nexport default function PasskeyRegistration({ onSuccess }: Props) {\n    const { confirmSensitiveAction } = useActionConfirmation();\n    const [name, setName] = useState(() => {\n        const ua = navigator.userAgent;\n\n        const browser = [\n            { pattern: /Edg|Edge/, name: \"Edge\" },\n            { pattern: /OPR|Opera|OPiOS/, name: \"Opera\" },\n            { pattern: /Firefox|FxiOS/, name: \"Firefox\" },\n            { pattern: /Chrome|CriOS/, name: \"Chrome\" },\n            { pattern: /Safari/, name: \"Safari\" },\n        ].find(({ pattern }) => pattern.test(ua))?.name;\n\n        const os = [\n            { pattern: /iPhone/, name: \"iPhone\" },\n            { pattern: /iPad|Macintosh(?=.*Mobile)/, name: \"iPad\" },\n            { pattern: /Android/, name: \"Android\" },\n            { pattern: /Mac/, name: \"Mac\" },\n            { pattern: /Windows/, name: \"Windows\" },\n        ].find(({ pattern }) => pattern.test(ua))?.name;\n\n        return [browser, os].filter(Boolean).join(\" on \") || \"\";\n    });\n\n    const [showForm, setShowForm] = useState(false);\n    const [isLoading, setIsLoading] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n    const isSupported = Passkeys.isSupported();\n\n    useErrorToast(error);\n\n    const handleSubmit = async (e: React.FormEvent) => {\n        e.preventDefault();\n\n        if (!name.trim()) {\n            return;\n        }\n\n        setIsLoading(true);\n        setError(null);\n\n        try {\n            await confirmSensitiveAction(() => Passkeys.register({ name }));\n            setName(\"\");\n            setShowForm(false);\n            onSuccess();\n        } catch (error) {\n            if (!isActionConfirmationCancelled(error)) {\n                setError(error instanceof Error ? error.message : \"Unable to register passkey.\");\n            }\n        } finally {\n            setIsLoading(false);\n        }\n    };\n\n    const handleCancel = () => {\n        setShowForm(false);\n        setName(\"\");\n        setError(null);\n    };\n\n    if (!isSupported) {\n        return (\n            <div className=\"text-sm text-muted-foreground\">\n                Passkeys are not supported in this browser.\n            </div>\n        );\n    }\n\n    if (!showForm) {\n        return (\n            <Button variant=\"outline\" onClick={() => setShowForm(true)}>\n                Add passkey\n            </Button>\n        );\n    }\n\n    return (\n        <form\n            onSubmit={handleSubmit}\n            className=\"space-y-4 rounded-lg border border-border bg-muted/50 p-4\"\n        >\n            <div className=\"grid gap-2\">\n                <Label htmlFor=\"passkey-name\">Passkey name</Label>\n                <Input\n                    id=\"passkey-name\"\n                    type=\"text\"\n                    value={name}\n                    onChange={(e) => setName(e.target.value)}\n                    placeholder=\"e.g., MacBook Pro, iPhone\"\n                    className=\"mt-1 block w-full border-foreground/20\"\n                    autoFocus\n                />\n                <p className=\"text-xs text-muted-foreground\">\n                    A name helps you identify this passkey later.\n                </p>\n            </div>\n\n            {error && <InputError message={error} />}\n\n            <div className=\"flex gap-2\">\n                <Button type=\"submit\" disabled={isLoading || !name.trim()}>\n                    {isLoading ? \"Registering...\" : \"Register passkey\"}\n                </Button>\n                <Button type=\"button\" variant=\"ghost\" onClick={handleCancel}>\n                    Cancel\n                </Button>\n            </div>\n        </form>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}