{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invite-members",
  "type": "registry:ui",
  "title": "Invite Members Dialog",
  "description": "A responsive dialog for inviting team members with email inputs and magic link - drawer on mobile, modal on desktop.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "label",
    "tooltip",
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/revola/examples/origin-ui/management/invite-members.tsx",
      "content": "\"use client\";\n\nimport { useId, useRef, useState } from \"react\";\n\nimport { CheckIcon, CopyIcon, UserRoundPlusIcon } from \"lucide-react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\nimport {\n  ResponsiveDialog,\n  ResponsiveDialogContent,\n  ResponsiveDialogDescription,\n  ResponsiveDialogHeader,\n  ResponsiveDialogTitle,\n  ResponsiveDialogTrigger,\n} from \"@/components/ui/revola\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\n\nexport default function InviteMembersDialog() {\n  const id = useId();\n  const [emails, setEmails] = useState([\"mark@yourcompany.com\", \"jane@yourcompany.com\", \"\"]);\n  const [copied, setCopied] = useState<boolean>(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const lastInputRef = useRef<HTMLInputElement>(null);\n\n  const addEmail = () => {\n    setEmails([...emails, \"\"]);\n  };\n\n  const handleEmailChange = (index: number, value: string) => {\n    const newEmails = [...emails];\n    newEmails[index] = value;\n    setEmails(newEmails);\n  };\n\n  const handleCopy = () => {\n    if (inputRef.current) {\n      navigator.clipboard.writeText(inputRef.current.value);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 1500);\n    }\n  };\n\n  return (\n    <ResponsiveDialog>\n      <ResponsiveDialogTrigger asChild>\n        <Button variant=\"outline\" className=\"h-12 rounded-full px-6 capitalize\">\n          Invite Members\n        </Button>\n      </ResponsiveDialogTrigger>\n      <ResponsiveDialogContent\n        className=\"sm:max-w-sm\"\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n          lastInputRef.current?.focus();\n        }}\n      >\n        <div className=\"space-y-4 overflow-y-auto p-6 max-sm:pt-4\">\n          <div className=\"flex flex-col gap-2\">\n            <div className=\"flex size-11 shrink-0 items-center justify-center rounded-full border\" aria-hidden=\"true\">\n              <UserRoundPlusIcon className=\"opacity-80\" size={16} />\n            </div>\n            <ResponsiveDialogHeader className=\"text-left\">\n              <ResponsiveDialogTitle>Invite team members</ResponsiveDialogTitle>\n              <ResponsiveDialogDescription>Invite teammates to earn free components.</ResponsiveDialogDescription>\n            </ResponsiveDialogHeader>\n          </div>\n          <form className=\"space-y-5\">\n            <div className=\"space-y-4\">\n              <div className=\"space-y-2\">\n                <Label>Invite via email</Label>\n                <div className=\"space-y-3\">\n                  {emails.map((email, index) => (\n                    <Input\n                      key={index}\n                      id={`team-email-${index + 1}`}\n                      placeholder=\"hi@yourcompany.com\"\n                      type=\"email\"\n                      value={email}\n                      onChange={(e) => handleEmailChange(index, e.target.value)}\n                      ref={index === emails.length - 1 ? lastInputRef : undefined}\n                    />\n                  ))}\n                </div>\n              </div>\n              <button\n                type=\"button\"\n                onClick={addEmail}\n                className=\"text-sm underline underline-offset-2 hover:no-underline\"\n              >\n                + Add another\n              </button>\n            </div>\n            <Button type=\"button\" className=\"w-full\">\n              Send invites\n            </Button>\n          </form>\n          <hr className=\"my-1 border-t\" />\n          <div className=\"space-y-2\">\n            <Label htmlFor={id}>Invite via magic link</Label>\n            <div className=\"relative\">\n              <Input\n                id={id}\n                readOnly\n                type=\"text\"\n                ref={inputRef}\n                className=\"pe-9\"\n                defaultValue=\"https://sameerjs.com/refer/69469\"\n              />\n              <TooltipProvider delayDuration={0}>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <button\n                      onClick={handleCopy}\n                      className=\"absolute inset-y-0 end-0 flex h-full w-9 items-center justify-center rounded-e-md text-muted-foreground/80 outline-none transition-[color,box-shadow] hover:text-foreground focus:z-10 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed\"\n                      aria-label={copied ? \"Copied\" : \"Copy to clipboard\"}\n                      disabled={copied}\n                    >\n                      <div className={cn(\"transition-all\", copied ? \"scale-100 opacity-100\" : \"scale-0 opacity-0\")}>\n                        <CheckIcon className=\"stroke-emerald-500\" size={16} aria-hidden=\"true\" />\n                      </div>\n                      <div\n                        className={cn(\n                          \"absolute transition-all\",\n                          copied ? \"scale-0 opacity-0\" : \"scale-100 opacity-100\"\n                        )}\n                      >\n                        <CopyIcon size={16} aria-hidden=\"true\" />\n                      </div>\n                    </button>\n                  </TooltipTrigger>\n                  <TooltipContent className=\"z-[9999] px-2 py-1 text-xs\">Copy to clipboard</TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n            </div>\n          </div>\n        </div>\n      </ResponsiveDialogContent>\n    </ResponsiveDialog>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}