{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "confirm-passphrase",
  "title": "Confirm Passphrase",
  "description": "A callable dialog that checks an exact phrase.",
  "dependencies": [
    "react-call"
  ],
  "registryDependencies": [
    "dialog",
    "button",
    "input",
    "label"
  ],
  "files": [
    {
      "path": "ui/confirm-passphrase.tsx",
      "content": "'use client'\n\n\nimport { useId, useState } from 'react'\nimport { createCallable } from 'react-call'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/ui/dialog'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\n\nexport interface ConfirmPassphraseProps {\n  title: string\n  description?: string\n  phrase: string\n  confirmLabel?: string\n  cancelLabel?: string\n  variant?: 'default' | 'destructive'\n}\n\nexport const ConfirmPassphrase = createCallable<ConfirmPassphraseProps, boolean>(\n  ({\n    call,\n    title,\n    description,\n    phrase,\n    confirmLabel = 'Confirm',\n    cancelLabel = 'Cancel',\n    variant = 'destructive',\n  }) => {\n    const id = useId()\n    const [value, setValue] = useState('')\n    const matches = value === phrase\n\n    return (\n      <Dialog open={!call.ended} onOpenChange={(open) => !open && call.end(false)}>\n        <DialogContent showCloseButton={false}>\n          <form\n            className=\"grid gap-6\"\n            onSubmit={(event) => {\n              event.preventDefault()\n              if (matches) call.end(true)\n            }}\n          >\n            <DialogHeader>\n              <DialogTitle>{title}</DialogTitle>\n              {description && <DialogDescription>{description}</DialogDescription>}\n            </DialogHeader>\n            <div className=\"grid gap-2\">\n              <Label htmlFor={id}>\n                Type <span className=\"font-medium text-foreground\">{phrase}</span> to continue\n              </Label>\n              <Input\n                id={id}\n                autoComplete=\"off\"\n                // biome-ignore lint/a11y/noAutofocus: focus the field the dialog exists for\n                autoFocus\n                value={value}\n                onChange={(event) => setValue(event.target.value)}\n              />\n            </div>\n            <DialogFooter>\n              <Button type=\"button\" variant=\"outline\" onClick={() => call.end(false)}>\n                {cancelLabel}\n              </Button>\n              <Button type=\"submit\" variant={variant} disabled={!matches}>\n                {confirmLabel}\n              </Button>\n            </DialogFooter>\n          </form>\n        </DialogContent>\n      </Dialog>\n    )\n  },\n  200,\n)\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:component"
}