{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "qr-code",
  "title": "Qr Code",
  "description": "A shadcn-style qr code component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/qr-code.tsx",
      "content": "\"use client\";\n\nimport {\n  QrCode as QrCodePrimitive,\n  useQrCode,\n  useQrCodeContext,\n} from \"@ark-ui/react/qr-code\";\nimport type { CSSProperties } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type QrCodeOwnProps = {\n  /** Square display size in CSS pixels. Default 100. Ignored when both `width` and `height` are set. */\n  size?: number;\n  /** Display width in CSS pixels. Use with `height` for a non-square frame. */\n  width?: number;\n  /** Display height in CSS pixels. Use with `width`. */\n  height?: number;\n};\n\nconst qrCodeLayoutStyle = ({\n  size = 100,\n  width,\n  height,\n}: QrCodeOwnProps): CSSProperties => {\n  if (width !== undefined && height !== undefined) {\n    return {\n      \"--qr-code-width\": `${width}px`,\n      \"--qr-code-height\": `${height}px`,\n      \"--qr-code-overlay-size\": `calc(min(${width}px, ${height}px) / 3)`,\n    } as CSSProperties;\n  }\n  return {\n    \"--qr-code-size\": `${size}px`,\n    \"--qr-code-overlay-size\": \"calc(var(--qr-code-size) / 3)\",\n  } as CSSProperties;\n};\n\nexport type QrCodeProps = QrCodePrimitive.RootProps & QrCodeOwnProps;\n\nexport const QrCode = ({\n  className,\n  size,\n  width,\n  height,\n  style,\n  ...props\n}: QrCodeProps) => (\n  <QrCodePrimitive.Root\n    className={cn(\n      \"relative flex w-fit flex-col gap-2 text-foreground\",\n      className,\n    )}\n    data-slot=\"qr-code\"\n    style={{ ...qrCodeLayoutStyle({ size, width, height }), ...style }}\n    {...props}\n  />\n);\n\nexport type QrCodeFrameProps = QrCodePrimitive.FrameProps;\n\nexport const QrCodeFrame = ({ className, ...props }: QrCodeFrameProps) => (\n  <QrCodePrimitive.Frame\n    className={cn(\n      \"block h-(--qr-code-height,var(--qr-code-size)) w-(--qr-code-width,var(--qr-code-size)) max-w-full shrink-0 fill-current text-foreground\",\n      className,\n    )}\n    data-slot=\"qr-code-frame\"\n    {...props}\n  />\n);\n\nexport type QrCodePatternProps = QrCodePrimitive.PatternProps;\n\nexport const QrCodePattern = ({ className, ...props }: QrCodePatternProps) => (\n  <QrCodePrimitive.Pattern\n    className={cn(\"fill-inherit\", className)}\n    data-slot=\"qr-code-pattern\"\n    {...props}\n  />\n);\n\nexport type QrCodeOverlayProps = QrCodePrimitive.OverlayProps;\n\nexport const QrCodeOverlay = ({ className, ...props }: QrCodeOverlayProps) => (\n  <QrCodePrimitive.Overlay\n    className={cn(\n      \"flex size-(--qr-code-overlay-size) items-center justify-center rounded-md bg-popover p-1\",\n      \"[&_img]:size-full [&_img]:object-contain [&_svg]:size-full [&_svg]:object-contain\",\n      className,\n    )}\n    data-slot=\"qr-code-overlay\"\n    {...props}\n  />\n);\n\nexport type QrCodeDownloadTriggerProps = QrCodePrimitive.DownloadTriggerProps;\n\nexport const QrCodeDownloadTrigger = ({\n  className,\n  ...props\n}: QrCodeDownloadTriggerProps) => (\n  <QrCodePrimitive.DownloadTrigger\n    className={cn(\n      \"inline-flex h-8 min-w-8 shrink-0 items-center justify-center rounded-md border-0 bg-muted px-3 font-medium text-foreground text-sm transition-[background-color,color] hover:bg-foreground hover:text-background\",\n      className,\n    )}\n    data-slot=\"qr-code-download-trigger\"\n    {...props}\n  />\n);\n\nexport type QrCodeRootProviderProps = QrCodePrimitive.RootProviderProps &\n  QrCodeOwnProps;\n\nexport const QrCodeRootProvider = ({\n  className,\n  size,\n  width,\n  height,\n  style,\n  ...props\n}: QrCodeRootProviderProps) => (\n  <QrCodePrimitive.RootProvider\n    className={cn(\n      \"relative flex w-fit flex-col gap-2 text-foreground\",\n      className,\n    )}\n    data-slot=\"qr-code-provider\"\n    style={{ ...qrCodeLayoutStyle({ size, width, height }), ...style }}\n    {...props}\n  />\n);\n\nexport const QrCodeContext = QrCodePrimitive.Context;\n\nexport type { QrCodeGenerateOptions } from \"@ark-ui/react/qr-code\";\nexport { useQrCode, useQrCodeContext };\n",
      "type": "registry:ui",
      "target": "src/components/ui/qr-code.tsx"
    }
  ],
  "type": "registry:ui"
}