{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "qr-code",
  "title": "QR code",
  "description": "Steeze's QR code artwork with no background of its own: cream modules in dark mode, inverted to dark modules in light mode.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/items/qr-code/qr-code.tsx",
      "content": "/* eslint-disable @next/next/no-img-element -- Portable registry component; the code artwork is passed as an image prop. */\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface QrCodeProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\" | \"width\" | \"height\"> {\n  /** The QR code artwork: light modules on a transparent ground. */\n  src: string;\n  /** What scanning it does, e.g. \"Scan to download the Steeze app\". */\n  alt: string;\n  /** Rendered width and height in pixels. Defaults to 224. */\n  size?: number;\n  /** Invert the artwork in light mode so it reads dark on a light page. Defaults to true. */\n  invertOnLight?: boolean;\n}\n\n/**\n * A QR code shown from its original artwork, with no background of its own:\n * the page shows through around the modules. The artwork is drawn for dark\n * mode, light modules; in light mode it is inverted so the modules read dark.\n */\nexport function QrCode({ src, alt, size = 224, invertOnLight = true, className, ...props }: QrCodeProps) {\n  return (\n    <img\n      src={src}\n      alt={alt}\n      width={size}\n      height={size}\n      loading=\"lazy\"\n      decoding=\"async\"\n      className={cn(\n        \"block aspect-square h-auto max-w-full shrink-0 select-none\",\n        invertOnLight && \"invert dark:invert-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport default QrCode;\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "kind": "widget",
    "whenToUse": "Use to hand a link from a desktop screen to a phone, such as an app download or a sign-up page. Pass your own code artwork as light modules on a transparent ground, leave the page around it clear, and keep it above about 120px so it scans.",
    "origin": {
      "project": "Steeze",
      "path": "src/components/ui/contact-form.jsx (public/assets/branding/qrcode.webp, its charcoal ground made transparent for bash-ui)"
    },
    "credits": []
  },
  "type": "registry:component"
}