{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "wifi-qr-code",
  "type": "registry:component",
  "title": "Wi-Fi QR Code",
  "description": "A QR code that joins a Wi-Fi network when scanned, with a typed, escaped payload builder.",
  "author": "bucharitesh <https://qrdx.dev>",
  "dependencies": ["qrdx", "lucide-react"],
  "files": [
    {
      "path": "registry/qrdx/wifi-qr-code.tsx",
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { Wifi } from \"lucide-react\";\nimport { QRCode } from \"qrdx\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** qrdx style options: colors, gradients, patterns, logo, template. */\nexport type QrCodeStyle = Omit<ComponentProps<typeof QRCode>, \"value\" | \"size\">;\n\nexport type WifiEncryption = \"WPA\" | \"WEP\" | \"nopass\";\n\nexport interface WifiNetwork {\n  /** Network name (SSID). */\n  ssid: string;\n  /** Network password. Ignored when `encryption` is \"nopass\". */\n  password?: string;\n  /**\n   * \"WPA\" covers WPA, WPA2 and WPA3. Use \"nopass\" for open networks.\n   * @default \"WPA\"\n   */\n  encryption?: WifiEncryption;\n  /**\n   * Set when the network does not broadcast its name.\n   * @default false\n   */\n  hidden?: boolean;\n}\n\n/** Escapes the characters the Wi-Fi QR format reserves. */\nfunction escapeWifi(value: string) {\n  return value.replace(/([\\\\;,:\"])/g, \"\\\\$1\");\n}\n\n/**\n * Builds the `WIFI:` payload that iOS and Android cameras read to join a\n * network, e.g. `WIFI:T:WPA;S:Cafe;P:secret;;`.\n */\nexport function buildWifiPayload({\n  ssid,\n  password = \"\",\n  encryption = \"WPA\",\n  hidden = false,\n}: WifiNetwork): string {\n  const fields = [`T:${encryption}`, `S:${escapeWifi(ssid)}`];\n  if (encryption !== \"nopass\") fields.push(`P:${escapeWifi(password)}`);\n  if (hidden) fields.push(\"H:true\");\n  return `WIFI:${fields.join(\";\")};;`;\n}\n\nexport type WifiQrCodeProps = WifiNetwork &\n  Omit<ComponentProps<\"figure\">, \"children\" | \"hidden\"> & {\n    /**\n     * Width and height of the code in pixels.\n     * @default 180\n     */\n    size?: number;\n    /** qrdx style options for the code. */\n    qr?: QrCodeStyle;\n    /**\n     * Show the network name under the code.\n     * @default true\n     */\n    showDetails?: boolean;\n    /**\n     * Also print the password, for guests who type it in.\n     * @default false\n     */\n    showPassword?: boolean;\n  };\n\nexport function WifiQrCode({\n  ssid,\n  password,\n  encryption = \"WPA\",\n  hidden,\n  size = 180,\n  qr,\n  showDetails = true,\n  showPassword = false,\n  className,\n  ...props\n}: WifiQrCodeProps) {\n  const payload = buildWifiPayload({ ssid, password, encryption, hidden });\n\n  return (\n    <figure\n      className={cn(\"inline-flex flex-col items-center gap-3\", className)}\n      data-slot=\"wifi-qr-code\"\n      {...props}\n    >\n      <div\n        aria-label={`QR code to join the Wi-Fi network ${ssid}`}\n        className=\"overflow-hidden rounded-[10px] border\"\n        role=\"img\"\n        style={{ width: size, height: size }}\n      >\n        <QRCode margin={2} {...qr} size={size} value={payload} />\n      </div>\n      {showDetails ? (\n        <figcaption className=\"flex flex-col items-center gap-0.5 text-center text-sm\">\n          <span className=\"inline-flex items-center gap-1.5 font-medium\">\n            <Wifi aria-hidden=\"true\" className=\"size-4 text-muted-foreground\" />\n            {ssid}\n          </span>\n          {showPassword && encryption !== \"nopass\" && password ? (\n            <span className=\"text-muted-foreground\">\n              Password: <span className=\"font-mono\">{password}</span>\n            </span>\n          ) : (\n            <span className=\"text-muted-foreground\">\n              Scan with your camera to join\n            </span>\n          )}\n        </figcaption>\n      ) : null}\n    </figure>\n  );\n}\n"
    }
  ],
  "docs": "Import it with `import { WifiQrCode } from \"@/components/wifi-qr-code\"`. Props and examples: https://qrdx.dev/docs/components/wifi-qr-code",
  "categories": ["qr-code"]
}