Clipboard

<div class="max-w-md w-full flex flex-col gap-3">
  <input id="mvui-clipboard-copy-value-input" type="text" class="mv-input" value="Hello from input">
  <p class="text-end">
    <button id="mvui-clipboard-btn-copy-value" type="button" class="mv-btn mv-btn-primary mv-btn-sm" data-mv-clipboard="true" data-mv-clipboard-target="#mvui-clipboard-copy-value-input" data-mv-clipboard-action="copy">
      Copy value
    </button>
  </p>
  <script>
    (function () {
      var btn = document.getElementById("mvui-clipboard-btn-copy-value");
      if (!btn) return;

      if (!btn.dataset.originalText) {
        btn.dataset.originalText = btn.textContent || "Copy value";
      }

      btn.addEventListener(
        "click",
        function () {
          btn.textContent = btn.dataset.originalText || "Copy value";
        },
        { capture: true },
      );

      btn.addEventListener("mv.clipboard.success", function () {
        btn.textContent = "Copied";
      });

      btn.addEventListener("mv.clipboard.error", function () {
        btn.textContent = "Error";
      });
    })();
  </script>
</div>

<div class="inline-flex items-center gap-3">
  <input id="mvui-clipboard-inline-input" type="text" class="mv-input shrink-0" style="width: 22rem; min-width: 22rem" value="npm i @keenthemes/MVui"><button id="mvui-clipboard-btn-inline" type="button" class="mv-btn mv-btn-outline mv-btn-sm" data-mv-clipboard="true" data-mv-clipboard-target="#mvui-clipboard-inline-input" data-mv-clipboard-action="copy">
    Copy
  </button>
  <script>
    (function () {
      var btn = document.getElementById("mvui-clipboard-btn-inline");
      if (!btn) return;

      if (!btn.dataset.originalText) {
        btn.dataset.originalText = btn.textContent || "Copy";
      }

      btn.addEventListener(
        "click",
        function () {
          btn.textContent = btn.dataset.originalText || "Copy";
        },
        { capture: true },
      );

      btn.addEventListener("mv.clipboard.success", function () {
        btn.textContent = "Copied";
      });

      btn.addEventListener("mv.clipboard.error", function () {
        btn.textContent = "Error";
      });
    })();
  </script>
</div>

<div class="max-w-md w-full flex flex-col gap-3">
  <div id="mvui-clipboard-predefined-target" class="mv-alert mv-alert-info">
    This target exists, but the predefined text wins.
  </div>
  <p class="text-end">
    <button id="mvui-clipboard-btn-predefined" type="button" class="mv-btn mv-btn-primary mv-btn-sm" data-mv-clipboard="true" data-mv-clipboard-text="Predefined clipboard text" data-mv-clipboard-target="#mvui-clipboard-predefined-target" data-mv-clipboard-action="copy">
      Copy predefined text
    </button>
  </p>
  <script>
    (function () {
      var btn = document.getElementById("mvui-clipboard-btn-predefined");
      if (!btn) return;

      if (!btn.dataset.originalText) {
        btn.dataset.originalText = btn.textContent || "Copy predefined text";
      }

      btn.addEventListener(
        "click",
        function () {
          btn.textContent = btn.dataset.originalText || "Copy predefined text";
        },
        { capture: true },
      );

      btn.addEventListener("mv.clipboard.success", function () {
        btn.textContent = "Copied";
      });

      btn.addEventListener("mv.clipboard.error", function () {
        btn.textContent = "Error";
      });
    })();
  </script>
</div>

<div class="flex items-center justify-between gap-3 max-w-md w-full">
  <div class="text-sm text-foreground" id="mvui-clipboard-icon-swap-text">
    npm install @keenthemes/MVui
  </div>
  <button id="mvui-clipboard-btn-icon-swap" type="button" class="mv-btn mv-btn-outline mv-btn-sm inline-flex items-center gap-2" data-mv-clipboard="true" data-mv-clipboard-text="npm install @keenthemes/MVui" data-mv-clipboard-action="copy">
    <span data-role="icon-default" class="inline-flex"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
        <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path></svg></span><span data-role="icon-success" class="hidden text-primary inline-flex"><svg class="size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <polyline points="20 6 9 17 4 12"></polyline></svg></span><span data-role="text">Copy</span>
  </button>
  <script>
    (function () {
      var btn = document.getElementById("mvui-clipboard-btn-icon-swap");
      if (!btn) return;

      var defaultIcon = btn.querySelector("[data-role="icon-default"]");
      var successIcon = btn.querySelector("[data-role="icon-success"]");
      var textEl = btn.querySelector("[data-role="text"]");

      var reset = function () {
        if (defaultIcon) defaultIcon.classList.remove("hidden");
        if (successIcon) successIcon.classList.add("hidden");
        if (textEl) textEl.textContent = "Copy";
      };

      btn.addEventListener("click", reset, { capture: true });

      btn.addEventListener("mv.clipboard.success", function () {
        if (defaultIcon) defaultIcon.classList.add("hidden");
        if (successIcon) successIcon.classList.remove("hidden");
        if (textEl) textEl.textContent = "Copied";
      });

      btn.addEventListener("mv.clipboard.error", function () {
        if (textEl) textEl.textContent = "Error";
      });
    })();
  </script>
</div>

<div class="max-w-md w-full flex flex-col gap-3">
  <input id="mvui-clipboard-cut-input" type="text" class="mv-input" value="Cut me">
  <p class="text-end">
    <button id="mvui-clipboard-btn-cut" type="button" class="mv-btn mv-btn-danger mv-btn-sm" data-mv-clipboard="true" data-mv-clipboard-target="#mvui-clipboard-cut-input" data-mv-clipboard-action="cut">
      Cut value
    </button>
  </p>
  <script>
    (function () {
      var btn = document.getElementById("mvui-clipboard-btn-cut");
      if (!btn) return;

      if (!btn.dataset.originalText) {
        btn.dataset.originalText = btn.textContent || "Cut value";
      }

      btn.addEventListener(
        "click",
        function () {
          btn.textContent = btn.dataset.originalText || "Cut value";
        },
        { capture: true },
      );

      btn.addEventListener("mv.clipboard.success", function () {
        btn.textContent = "Copied";
      });

      btn.addEventListener("mv.clipboard.error", function () {
        btn.textContent = "Error";
      });
    })();
  </script>
</div>

<div class="max-w-md w-full flex flex-col gap-3">
  <div id="mvui-clipboard-copy-target" class="mv-alert mv-alert-light">
    Copy target text content
  </div>
  <p class="text-end">
    <button id="mvui-clipboard-btn-copy-target" type="button" class="mv-btn mv-btn-primary mv-btn-sm" data-mv-clipboard="true" data-mv-clipboard-target="#mvui-clipboard-copy-target" data-mv-clipboard-action="copy">
      Copy from target
    </button>
  </p>
  <script>
    (function () {
      var btn = document.getElementById("mvui-clipboard-btn-copy-target");
      if (!btn) return;

      if (!btn.dataset.originalText) {
        btn.dataset.originalText = btn.textContent || "Copy from target";
      }

      btn.addEventListener(
        "click",
        function () {
          btn.textContent = btn.dataset.originalText || "Copy from target";
        },
        { capture: true },
      );

      btn.addEventListener("mv.clipboard.success", function () {
        btn.textContent = "Copied";
      });

      btn.addEventListener("mv.clipboard.error", function () {
        btn.textContent = "Error";
      });
    })();
  </script>
</div>

<div class="max-w-xl w-full">
  <div class="relative">
    <pre id="mvui-clipboard-code-block" class="mv-code-block overflow-auto rounded-lg p-4 bg-base-200"><code>// Click to copy this block (plain text)
const answer = 42;
console.log(answer);</code></pre>
    <p class="text-end mt-3">
      <button id="mvui-clipboard-btn-code" type="button" class="mv-btn mv-btn-primary mv-btn-sm" data-mv-clipboard="true" data-mv-clipboard-target="#mvui-clipboard-code-block" data-mv-clipboard-action="copy">
        Copy code
      </button>
    </p>
    <script>
      (function () {
        var btn = document.getElementById("mvui-clipboard-btn-code");
        if (!btn) return;

        if (!btn.dataset.originalText) {
          btn.dataset.originalText = btn.textContent || "Copy code";
        }

        btn.addEventListener(
          "click",
          function () {
            btn.textContent = btn.dataset.originalText || "Copy code";
          },
          { capture: true },
        );

        btn.addEventListener("mv.clipboard.success", function () {
          btn.textContent = "Copied";
        });

        btn.addEventListener("mv.clipboard.error", function () {
          btn.textContent = "Error";
        });
      })();
    </script>
  </div>
</div>

<div class="max-w-md w-full">
  <div class="flex items-center gap-2">
    <input type="hidden" id="mvui-clipboard-tooltip-input" value="npm install @keenthemes/MVui"><button id="mvui-clipboard-btn-tooltip" type="button" class="mv-btn mv-btn-primary mv-btn-sm" data-mv-clipboard="true" data-mv-clipboard-target="#mvui-clipboard-tooltip-input" data-mv-clipboard-action="copy" data-mv-tooltip="true" data-mv-tooltip-placement="top">
      <span>Copy command</span><span data-role="tooltip" data-mv-tooltip-content="true" class="mv-tooltip">Copy</span></button><span class="text-sm text-muted-foreground"><span class="font-mono">npm install @Maverickui/MVui</span></span>
    <script>
      (function () {
        var btn = document.getElementById("mvui-clipboard-btn-tooltip");
        if (!btn) return;
        var tooltip = btn.querySelector("[data-role="tooltip"]");
        var setText = function (text) {
          if (!tooltip) return;
          tooltip.textContent = text;
          clearTimeout(setText._t);
          setText._t = setTimeout(function () {
            tooltip.textContent = "Copy";
          }, 1200);
        };

        btn.addEventListener("mv.clipboard.success", function () {
          setText("Copied");
        });
        btn.addEventListener("mv.clipboard.error", function () {
          setText("Error");
        });
      })();
    </script>
  </div>
</div>