{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "qr-code-card",
  "type": "registry:component",
  "title": "QR Code Card",
  "description": "A card with a QR code in a \"Scan me\" frame, a title, a description and room for actions.",
  "author": "bucharitesh <https://qrdx.dev>",
  "dependencies": ["qrdx"],
  "registryDependencies": ["card"],
  "files": [
    {
      "path": "registry/qrdx/qr-code-card.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { QRCode } from \"qrdx\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\n\n/** qrdx style options: colors, gradients, patterns, logo, template. */\nexport type QrCodeStyle = Omit<ComponentProps<typeof QRCode>, \"value\" | \"size\">;\n\nexport interface QrCodeCardProps extends Omit<ComponentProps<\"div\">, \"title\"> {\n  /** Text or URL to encode. */\n  value: string;\n  /** Heading under the code. */\n  title?: ReactNode;\n  /** Supporting text under the heading. */\n  description?: ReactNode;\n  /**\n   * Call to action printed on the frame. Pass `\"\"` for a plain frame.\n   * @default \"Scan me\"\n   */\n  cta?: string;\n  /**\n   * Where the frame label sits, or `\"none\"` for no frame.\n   * @default \"bottom\"\n   */\n  frame?: \"bottom\" | \"top\" | \"none\";\n  /** Extra classes for the frame, e.g. `\"bg-primary text-primary-foreground\"`. */\n  frameClassName?: string;\n  /**\n   * Width and height of the code in pixels.\n   * @default 168\n   */\n  size?: number;\n  /** qrdx style options for the code. */\n  qr?: QrCodeStyle;\n  /** Accessible name. Defaults to \"QR code: <value>\". */\n  label?: string;\n  /** Footer content, such as buttons. */\n  children?: ReactNode;\n}\n\nexport function QrCodeCard({\n  value,\n  title,\n  description,\n  cta = \"Scan me\",\n  frame = \"bottom\",\n  frameClassName,\n  size = 168,\n  qr,\n  label,\n  className,\n  children,\n  ...props\n}: QrCodeCardProps) {\n  const code = (\n    <div\n      aria-label={label ?? `QR code: ${value}`}\n      className=\"overflow-hidden rounded-[10px]\"\n      role=\"img\"\n      style={{ width: size, height: size }}\n    >\n      <QRCode margin={2} {...qr} size={size} value={value} />\n    </div>\n  );\n\n  return (\n    <Card\n      className={cn(\"w-full max-w-xs items-center gap-5\", className)}\n      data-slot=\"qr-code-card\"\n      {...props}\n    >\n      <CardContent className=\"flex justify-center\">\n        {frame === \"none\" ? (\n          <div className=\"rounded-[16px] border p-1.5\">{code}</div>\n        ) : (\n          <div\n            className={cn(\n              \"flex flex-col items-center rounded-[16px] bg-foreground p-1.5 text-background\",\n              frame === \"top\" && \"flex-col-reverse\",\n              frameClassName,\n            )}\n          >\n            {code}\n            {cta ? (\n              <span\n                className={cn(\n                  \"px-3 font-semibold text-xs uppercase tracking-[0.2em]\",\n                  frame === \"top\" ? \"pt-1 pb-2\" : \"pt-2 pb-1\",\n                )}\n              >\n                {cta}\n              </span>\n            ) : null}\n          </div>\n        )}\n      </CardContent>\n      {title || description ? (\n        <CardHeader className=\"w-full justify-items-center text-center\">\n          {title ? <CardTitle>{title}</CardTitle> : null}\n          {description ? (\n            <CardDescription className=\"text-balance\">\n              {description}\n            </CardDescription>\n          ) : null}\n        </CardHeader>\n      ) : null}\n      {children ? (\n        <CardFooter className=\"w-full flex-wrap justify-center gap-2\">\n          {children}\n        </CardFooter>\n      ) : null}\n    </Card>\n  );\n}\n"
    }
  ],
  "docs": "Import it with `import { QrCodeCard } from \"@/components/qr-code-card\"`. Props and examples: https://qrdx.dev/docs/components/qr-code-card",
  "categories": ["qr-code"]
}