{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "qr-code",
  "title": "QR Code",
  "description": "QR code generator with rounded finder patterns and dot-style data modules.",
  "dependencies": [
    "qrcode"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/spell-ui/qr-code.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport QRCodeLib from \"qrcode\";\nimport { cn } from \"@/lib/utils\";\n\ninterface QRCodeProps extends React.SVGProps<SVGSVGElement> {\n  value: string;\n  size?: number;\n  fgColor?: string;\n  bgColor?: string;\n  errorCorrectionLevel?: \"L\" | \"M\" | \"Q\" | \"H\";\n  className?: string;\n}\n\nfunction isInFinderPattern(row: number, col: number, size: number): boolean {\n  return (\n    (row < 7 && col < 7) ||\n    (row < 7 && col >= size - 7) ||\n    (row >= size - 7 && col < 7)\n  );\n}\n\nexport function QRCode({\n  value,\n  size = 268,\n  fgColor = \"var(--foreground)\",\n  bgColor = \"var(--background)\",\n  errorCorrectionLevel = \"M\",\n  className,\n  ...props\n}: QRCodeProps) {\n  const qrData = React.useMemo(() => {\n    try {\n      return QRCodeLib.create(value, { errorCorrectionLevel });\n    } catch {\n      return null;\n    }\n  }, [value, errorCorrectionLevel]);\n\n  if (!qrData) {\n    return null;\n  }\n\n  const moduleCount = qrData.modules.size;\n  const moduleSize = size / moduleCount;\n  const totalSize = size;\n  const circleRadius = moduleSize * (1 / 3);\n\n  const finderPositions: [number, number][] = [\n    [0, 0],\n    [0, moduleCount - 7],\n    [moduleCount - 7, 0],\n  ];\n\n  const finderSize = 7 * moduleSize;\n  const innerPadding = moduleSize;\n  const innerWhiteSize = 5 * moduleSize;\n  const innerBlackSize = 3 * moduleSize;\n\n  const circles: { cx: number; cy: number }[] = [];\n\n  for (let row = 0; row < moduleCount; row++) {\n    for (let col = 0; col < moduleCount; col++) {\n      if (qrData.modules.get(row, col) && !isInFinderPattern(row, col, moduleCount)) {\n        circles.push({\n          cx: (col + 0.5) * moduleSize,\n          cy: (row + 0.5) * moduleSize,\n        });\n      }\n    }\n  }\n\n  return (\n    <svg\n      width={totalSize}\n      height={totalSize}\n      viewBox={`0 0 ${totalSize} ${totalSize}`}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-label={`QR code for ${value}`}\n      className={cn(\"block\", className)}\n      {...props}\n    >\n      <rect width={totalSize} height={totalSize} fill={bgColor} rx=\"12\" ry=\"12\" />\n      {finderPositions.map(([r, c]) => {\n        const x = c * moduleSize;\n        const y = r * moduleSize;\n        return (\n          <g key={`${r}-${c}`}>\n            <rect\n              x={x}\n              y={y}\n              width={finderSize}\n              height={finderSize}\n              fill={fgColor}\n              rx=\"12\"\n              ry=\"12\"\n            />\n            <rect\n              x={x + innerPadding}\n              y={y + innerPadding}\n              width={innerWhiteSize}\n              height={innerWhiteSize}\n              fill={bgColor}\n              rx=\"8\"\n              ry=\"8\"\n            />\n            <rect\n              x={x + innerPadding * 2}\n              y={y + innerPadding * 2}\n              width={innerBlackSize}\n              height={innerBlackSize}\n              fill={fgColor}\n              rx=\"3\"\n              ry=\"3\"\n            />\n          </g>\n        );\n      })}\n      {circles.map(({ cx, cy }, i) => (\n        <circle\n          key={i}\n          cx={cx}\n          cy={cy}\n          r={circleRadius}\n          fill={fgColor}\n        />\n      ))}\n    </svg>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}