{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "two-factor-setup-1",
  "title": "Authenticator App",
  "description": "Authenticator App for Two-Factor Setup.",
  "dependencies": [
    "lucide-react",
    "input-otp"
  ],
  "registryDependencies": [
    "button",
    "card",
    "input-otp"
  ],
  "files": [
    {
      "path": "registry/intents/auth/two-factor-setup/two-factor-setup-1.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { ShieldCheckIcon } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from '@/components/ui/input-otp'\n\nexport function TwoFactorSetup1() {\n  const [code, setCode] = useState('')\n\n  return (\n    <Card size=\"sm\">\n      <CardHeader>\n        <div className=\"bg-primary/10 mb-1 flex size-10 items-center justify-center rounded-full\">\n          <ShieldCheckIcon className=\"text-primary size-5\" />\n        </div>\n        <CardTitle>Set up authenticator</CardTitle>\n        <p className=\"text-muted-foreground text-xs\">\n          Scan the QR code with your authenticator app, then enter the 6-digit\n          code it shows.\n        </p>\n      </CardHeader>\n\n      <CardContent className=\"flex flex-col gap-4\">\n        <div className=\"flex justify-center\">\n          <div className=\"border-border grid size-28 grid-cols-7 grid-rows-7 gap-px rounded-md border p-2\">\n            {Array.from({ length: 49 }).map((_, i) => (\n              <span\n                key={i}\n                className={\n                  (i * 7 + 3) % 5 < 2 || i % 3 === 0\n                    ? 'bg-foreground rounded-[1px]'\n                    : 'bg-transparent'\n                }\n              />\n            ))}\n          </div>\n        </div>\n\n        <div className=\"flex justify-center\">\n          <InputOTP maxLength={6} value={code} onChange={setCode}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </div>\n      </CardContent>\n\n      <CardFooter>\n        <Button className=\"w-full\" disabled={code.length < 6}>\n          Verify & enable\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/two-factor-setup/two-factor-setup-1.tsx"
    }
  ],
  "type": "registry:block"
}