API

    <div class="flex flex-wrap items-center gap-space">
  <.action phx-click={Corex.Clipboard.set_value("clipboard-api", "Hello, World!")} class="button ui-size-sm">
    Set to "Hello, World!"
  </.action>
  <.action phx-click={Corex.Clipboard.set_value("clipboard-api", "info@netoum.com")} class="button ui-size-sm">
    Set to "info@netoum.com"
  </.action>
  <.action phx-click={Corex.Clipboard.copy("clipboard-api")} class="button ui-size-sm">
    Copy
  </.action>
</div>

<.clipboard
  id="clipboard-api"
  value="info@netoum.com"
  trigger_aria_label="Copy to clipboard"
  input_aria_label="Value to copy"
  class="clipboard"
>
  <:copy>
    <.heroicon name="hero-clipboard" />
  </:copy>
  <:copied>
    <.heroicon name="hero-check" />
  </:copied>
</.clipboard>

  

    # Optional: handle on_copy (id + value from the hook)
def handle_event("clipboard_copied", %{"id" => id, "value" => value}, socket) do
  {:noreply, socket}
end

  

    <.action phx-click="clipboard_api_server_copy" class="button ui-size-sm">Push copy</.action>
<.action phx-click="clipboard_api_server_set" class="button ui-size-sm">Push set value</.action>
<.clipboard id="clipboard-api-server" class="clipboard" value="server-push@example.com">
  <:copy><.heroicon name="hero-clipboard" /></:copy>
  <:copied><.heroicon name="hero-check" /></:copied>
</.clipboard>

  

    def handle_event("api_clipboard_copy", _params, socket) do
  {:noreply, Corex.Clipboard.copy(socket, "clipboard-api-server")}
end


def handle_event("api_clipboard_set", _params, socket) do
  {:noreply, Corex.Clipboard.set_value(socket, "clipboard-api-server", "pasted-value")}
end

  

    <div class="flex flex-wrap gap-space-sm mb-space-lg">
  <.action phx-click={Corex.Clipboard.copy("clipboard-api-dispatch")} class="button ui-size-sm">
    Copy
  </.action>
</div>
<.clipboard
  id="clipboard-api-dispatch"
  class="clipboard"
  value="dispatch@example.com"
  trigger_aria_label="Copy"
  input_aria_label="Value"
>
  <:copy>
    <.heroicon name="hero-clipboard" />
  </:copy>
  <:copied>
    <.heroicon name="hero-check" />
  </:copied>
</.clipboard>

  

    document.getElementById("clipboard-api-dispatch")?.dispatchEvent(
  new CustomEvent("corex:clipboard:copy", { bubbles: true })
);