{"name":"qr-code","title":"QR Code","description":"Renders a QR code for a given value, with size variants and an optional center logo overlay.","installCommand":"bunx marko-ui add qr-code -y","usageTags":"<QrCode>","importSnippet":"import QrCode from \"@/components/ui/qr-code/qr-code.marko\";","usageSnippet":"<QrCode value=\"https://example.com\"/>","tags":["QrCode"],"parts":[{"name":"overlay","description":"Rendered centered over the code (logo overlay slot)."}],"props":[{"name":"defaultValue","type":"string | undefined","required":false,"description":"The initial value to encode when rendered.\nUse when you don't need to control the value of the qr code."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"encoding","type":"QrCodeGenerateOptions | undefined","required":false,"description":"The qr code encoding options."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The element ids."},{"name":"pixelSize","type":"number | undefined","required":false,"description":"The pixel size of the qr code."},{"name":"size","type":"'default' | 'sm' | 'lg' | null | undefined","required":false,"default":"default"},{"name":"value","type":"string | undefined","required":false,"description":"The controlled value to encode."}],"events":[{"name":"onValueChange","arg":"ValueChangeDetails","description":"Callback fired when the value changes."},{"name":"valueChange","arg":"string"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"qr-code-demo","title":"Basic","source":"import QrCode from \"@marko-ui/shadcn/ui/qr-code/qr-code.marko\";\n\n<QrCode defaultValue=\"https://example.com\"/>","description":"A QR code rendered for a given `value`."},{"id":"qr-code-sizes","title":"Sizes","source":"import QrCode from \"@marko-ui/shadcn/ui/qr-code/qr-code.marko\";\n\n<div class=\"flex items-end gap-6\">\n  <QrCode value=\"https://example.com\" size=\"sm\"/>\n  <QrCode value=\"https://example.com\" size=\"default\"/>\n  <QrCode value=\"https://example.com\" size=\"lg\"/>\n</div>","description":"Pass `size` (`sm`, `default`, `lg`) to scale the rendered frame."},{"id":"qr-code-overlay","title":"With center logo overlay","source":"import QrCode from \"@marko-ui/shadcn/ui/qr-code/qr-code.marko\";\n\n<QrCode value=\"https://example.com\" size=\"lg\">\n  <@overlay>\n    <div class=\"flex size-8 items-center justify-center rounded-sm bg-primary text-xs font-bold text-primary-foreground\">\n      UI\n    </div>\n  </@overlay>\n</QrCode>","description":"Fill the `@overlay` slot to place a logo or mark at the center of the code."},{"id":"qr-code-download","title":"Download as PNG","source":"import QrCode from \"@marko-ui/shadcn/ui/qr-code/qr-code.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div class=\"flex flex-col items-start gap-4\">\n  <QrCode/qrCodeApi value=\"https://example.com\" size=\"lg\">\n    <@overlay>\n      <div class=\"flex size-8 items-center justify-center rounded-sm bg-primary text-xs font-bold text-primary-foreground\">\n        UI\n      </div>\n    </@overlay>\n  </QrCode>\n  <Button type=\"button\"\n    size=\"sm\"\n    variant=\"outline\"\n    onClick() {\n      qrCodeApi()\n        .getDataUrl(\"image/png\")\n        .then((dataUrl: string) => {\n          const anchor = document.createElement(\"a\");\n          anchor.href = dataUrl;\n          anchor.download = \"qr-code.png\";\n          anchor.click();\n        });\n    }\n  >\n    Download PNG\n  </Button>\n</div>","description":"Pass a ref-like binding (`<QrCode/qrCodeApi>`) to reach the live API and call `getDataUrl` for a downloadable image."},{"id":"qr-code-controlled","title":"Controlled value","source":"import QrCode from \"@marko-ui/shadcn/ui/qr-code/qr-code.marko\";\n\n<let/controlledValue=\"https://example.com\"/>\n<let/lastValue=\"—\"/>\n\n<div class=\"flex flex-col items-start gap-3\">\n  <QrCode\n    value=controlledValue\n    valueChange(value) { lastValue = value; }\n  />\n  <div class=\"flex gap-2\">\n    <button type=\"button\"\n      class=\"rounded-md border border-input px-2 py-1 text-sm\"\n      onClick() { controlledValue = \"https://example.com\"; }\n    >\n      example.com\n    </button>\n    <button type=\"button\"\n      class=\"rounded-md border border-input px-2 py-1 text-sm\"\n      onClick() { controlledValue = \"https://zagjs.com\"; }\n    >\n      zagjs.com\n    </button>\n  </div>\n  <p class=\"text-sm text-muted-foreground\">Last valueChange: ${lastValue}</p>\n</div>","description":"Zag machines are controlled: a `value` prop without a change handler never moves. Pair it with `valueChange`."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"div"}