{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "one-click-dns-setup",
  "title": "One-click DNS Setup",
  "description": "A controlled Domain Connect handoff with manual DNS fallback.",
  "dependencies": ["@hugeicons/core-free-icons", "@hugeicons/react", "@opencoredev/domain-sdk"],
  "registryDependencies": ["button", "separator"],
  "files": [
    {
      "path": "registry/domain/one-click-dns-setup.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport type { Domain } from \"@opencoredev/domain-sdk\";\nimport {\n  Alert02Icon,\n  ArrowUpRight01Icon,\n  CheckmarkCircle02Icon,\n  Loading03Icon,\n  SecurityCheckIcon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Separator } from \"@/components/ui/separator\";\n\nexport interface OneClickDnsSetupProps {\n  domain: Domain;\n  dnsProvider: string;\n  onConnect(domain: Domain): void | Promise<void>;\n  onManualSetup?(domain: Domain): void;\n  isConnecting?: boolean;\n  isConnected?: boolean;\n  error?: string;\n}\n\nexport function OneClickDnsSetup({\n  domain,\n  dnsProvider,\n  onConnect,\n  onManualSetup,\n  isConnecting = false,\n  isConnected = false,\n  error,\n}: OneClickDnsSetupProps) {\n  const headingId = React.useId();\n  const requiredRecords = domain.records.filter((record) => record.required).length;\n  const description = isConnected\n    ? `${dnsProvider} accepted the DNS changes for ${domain.hostname}. Propagation may still take a few minutes.`\n    : `Authorize ${dnsProvider} to add ${requiredRecords} required DNS ${requiredRecords === 1 ? \"record\" : \"records\"} for ${domain.hostname}.`;\n\n  return (\n    <section\n      aria-labelledby={headingId}\n      aria-busy={isConnecting}\n      className=\"min-w-0 overflow-hidden rounded-lg border bg-background text-foreground\"\n    >\n      <div className=\"flex flex-col gap-4 px-4 py-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex min-w-0 gap-3\">\n          <span className=\"mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted/30\">\n            {isConnected ? (\n              <HugeiconsIcon icon={CheckmarkCircle02Icon} className=\"size-4\" aria-hidden=\"true\" />\n            ) : error ? (\n              <HugeiconsIcon\n                icon={Alert02Icon}\n                className=\"size-4 text-destructive\"\n                aria-hidden=\"true\"\n              />\n            ) : (\n              <HugeiconsIcon icon={SecurityCheckIcon} className=\"size-4\" aria-hidden=\"true\" />\n            )}\n          </span>\n          <div className=\"flex min-w-0 flex-col gap-1\">\n            <h2 id={headingId} className=\"text-sm font-semibold\">\n              {isConnected ? \"DNS changes approved\" : \"Set up DNS automatically\"}\n            </h2>\n            <p className=\"max-w-2xl break-words text-sm text-muted-foreground\">{description}</p>\n            {error ? (\n              <p className=\"text-sm text-destructive\">\n                Automatic setup did not finish: {error} Try again or use the manual records.\n              </p>\n            ) : null}\n          </div>\n        </div>\n\n        <Button\n          type=\"button\"\n          className=\"w-full sm:w-auto sm:shrink-0\"\n          variant={isConnected ? \"outline\" : \"default\"}\n          disabled={isConnecting || isConnected}\n          onClick={() => void onConnect(domain)}\n        >\n          {isConnecting ? (\n            <HugeiconsIcon\n              icon={Loading03Icon}\n              data-icon=\"inline-start\"\n              className=\"animate-spin motion-reduce:animate-none\"\n              aria-hidden=\"true\"\n            />\n          ) : isConnected ? (\n            <HugeiconsIcon\n              icon={CheckmarkCircle02Icon}\n              data-icon=\"inline-start\"\n              aria-hidden=\"true\"\n            />\n          ) : (\n            <HugeiconsIcon icon={ArrowUpRight01Icon} data-icon=\"inline-start\" aria-hidden=\"true\" />\n          )}\n          {isConnecting\n            ? `Opening ${dnsProvider}…`\n            : isConnected\n              ? \"Approved\"\n              : `Continue to ${dnsProvider}`}\n        </Button>\n      </div>\n\n      <Separator />\n\n      <div className=\"flex flex-col gap-2 bg-muted/20 px-4 py-3 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between\">\n        <p>You will review every DNS change at {dnsProvider} before anything is applied.</p>\n        {onManualSetup && !isConnected ? (\n          <Button\n            type=\"button\"\n            variant=\"link\"\n            size=\"xs\"\n            className=\"h-auto justify-start px-0 sm:shrink-0 sm:justify-center\"\n            onClick={() => onManualSetup(domain)}\n          >\n            Use manual records\n          </Button>\n        ) : null}\n      </div>\n\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {isConnecting\n          ? `Opening ${dnsProvider} to authorize DNS changes.`\n          : isConnected\n            ? `DNS changes were approved for ${domain.hostname}.`\n            : error\n              ? `Automatic DNS setup failed for ${domain.hostname}. ${error}`\n              : \"\"}\n      </span>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/domain/one-click-dns-setup.tsx"
    }
  ],
  "type": "registry:ui"
}