{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "qr-code",
  "title": "QR Code",
  "description": "Renders a QR code from a string value as a theme-aware SVG.",
  "dependencies": [
    "@vllnt/ui@^0.2.1",
    "qrcode"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/qr-code/qr-code.tsx",
      "content": "import { create } from \"qrcode\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/**\n * Error-correction level. Higher levels tolerate more damage/occlusion at the\n * cost of denser codes: `L` ~7%, `M` ~15%, `Q` ~25%, `H` ~30%.\n */\nexport type QrCodeLevel = \"H\" | \"L\" | \"M\" | \"Q\";\n\n/** Props for the {@link QrCode} component. */\nexport type QrCodeProps = {\n  /** Error-correction level. Defaults to `M`. */\n  level?: QrCodeLevel;\n  /** Quiet-zone margin in modules. Defaults to `4`, the smallest the spec allows. */\n  margin?: number;\n  /** Rendered width/height in pixels. Defaults to `160`. */\n  size?: number;\n  /** Accessible label for the code. Defaults to `\"QR code\"`. */\n  title?: string;\n  /** The string to encode (URL, text, etc.). */\n  value: string;\n} & Omit<React.SVGAttributes<SVGSVGElement>, \"title\">;\n\nfunction buildPath(data: Uint8Array, count: number, margin: number): string {\n  return Array.from({ length: count * count }).reduce<string>(\n    (path, _cell, index) => {\n      if (data[index] !== 1) return path;\n      const x = (index % count) + margin;\n      const y = Math.floor(index / count) + margin;\n      return `${path}M${x} ${y}h1v1h-1z`;\n    },\n    \"\",\n  );\n}\n\n/**\n * Renders a QR code as a single, theme-aware SVG path. Modules use\n * `currentColor` (inherits `text-foreground`) so the code adapts to the\n * surrounding surface — place it on a high-contrast background to keep it\n * scannable. Encoding is pure and runs during render (no client hooks).\n * @example\n * <QrCode value=\"https://vllnt.com\" />\n * <QrCode value=\"WIFI:S:home;T:WPA;P:secret;;\" level=\"H\" size={200} />\n */\nconst QrCode = ({\n  className,\n  level = \"M\",\n  margin = 4,\n  ref,\n  size = 160,\n  title = \"QR code\",\n  value,\n  ...props\n}: QrCodeProps & { ref?: React.Ref<SVGSVGElement> }) => {\n  const modules = value\n    ? create(value, { errorCorrectionLevel: level }).modules\n    : null;\n  const count = modules?.size ?? 0;\n  const dimension = count + margin * 2;\n  const path = modules ? buildPath(modules.data, count, margin) : \"\";\n\n  return (\n    <svg\n      aria-label={title}\n      className={cn(\"text-foreground\", className)}\n      height={size}\n      ref={ref}\n      role=\"img\"\n      shapeRendering=\"crispEdges\"\n      viewBox={`0 0 ${dimension} ${dimension}`}\n      width={size}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d={path} fill=\"currentColor\" />\n    </svg>\n  );\n};\nQrCode.displayName = \"QrCode\";\n\nexport { QrCode };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}