ariadne_view_components 0.0.59 → 0.0.64

data/app/components/ariadne/form/text_field/component.html.erb

@@ -0,0 +1,25 @@
+<div class="ariadne-space-y-2">
+  <label
+    class="<%= style(:label) %>"
+    for="<%= @name %>"><%= @label %></label>
+  <% if required? %>
+    <span aria-hidden="true">*</span>
+  <% end %>
+
+  <%= content_tag(
+    :input,
+    nil,
+    class: html_attrs[:class],
+    **html_attrs.except(:class)
+  ) %>
+
+  <% if @validation_message %>
+    <%= render(Primer::BaseComponent.new(tag: :div, **@validation_arguments)) do %>
+      <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+      <span><%= @validation_message %></span>
+    <% end %>
+  <% end %>
+  <% if caption? %>
+   <p id="<%= @name %>-description" class="<%= style(:caption, theme:, size:, width:) %>"><%= @caption %></p>
+  <% end %>
+</div>

data/app/components/ariadne/form/text_field/component.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module Form
+    module TextField
+      class Component < Ariadne::Form::BaseInputComponent
+        option :name
+        option :label
+        option :type, default: proc { :text }
+
+        # renders_one :leading_visual, ACCEPT_ANYTHING
+        # renders_one :trailing_visual, ACCEPT_ANYTHING
+
+        option :theme, default: proc { :primary }
+        option :size, default: proc { :base }
+        option :width, default: proc { :narrow }
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = style(theme:, size:, width:)
+          html_attrs[:type] = @type
+        end
+
+        def type
+          :text_field
+        end
+
+        def focusable?
+          true
+        end
+
+        style do
+          base do
+            [
+              "focus:ariadne-border-blue-300",
+              "focus:ariadne-bg-blue-300/20",
+              "dark:focus:ariadne-border-blue-600",
+              "dark:focus:ariadne-bg-blue-600/20",
+
+              "placeholder:ariadne-text-zinc-600",
+              "dark:placeholder:ariadne-text-zinc-400",
+
+              "disabled:ariadne-bg-zinc-200",
+              "disabled:ariadne-text-zinc-400",
+              "dark:disabled:ariadne-bg-zinc-800",
+              "dark:disabled:ariadne-text-zinc-600",
+              "disabled:ariadne-cursor-not-allowed",
+
+              "ariadne-bg-white",
+              "dark:ariadne-bg-zinc-900",
+
+              "ariadne-border",
+              "ariadne-border-solid",
+              "ariadne-border-zinc-200",
+              "ariadne-dark:border-zinc-700",
+
+              "[&:not(:focus)]:enabled:hover:ariadne-border-zinc-300",
+              "[&:not(:focus)]:enabled:hover:ariadne-bg-zinc-200/20",
+              "[&:not(:focus)]:dark:enabled:hover:ariadne-border-zinc-600",
+              "[&:not(:focus)]:dark:enabled:hover:ariadne-bg-zinc-700/20",
+
+              "focus:ariadne-border-blue-300",
+              "focus:ariadne-bg-blue-300/20",
+              "dark:focus:ariadne-border-blue-600",
+              "dark:focus:ariadne-bg-blue-600/20",
+            ]
+          end
+
+          variants do
+            theme do
+              primary do
+                []
+              end
+
+              error do
+                [
+                  "ariadne-border",
+                  "ariadne-border-solid",
+                  "ariadne-border-red-600",
+                  "ariadne-bg-red-200",
+                  "dark:ariadne-bg-red-900",
+                  "[&:not(:focus)]:enabled:hover:ariadne-border-red-700",
+                  "[&:not(:focus)]:enabled:hover:ariadne-bg-red-300/80",
+                  "[&:not(:focus)]:dark:enabled:hover:ariadne-border-red-700",
+                  "[&:not(:focus)]:dark:enabled:hover:ariadne-bg-red-900/80",
+                ]
+              end
+            end
+
+            size do
+              sm { "ariadne-text-sm ariadne-px-1 ariadne-leading-5 ariadne-rounded" }
+              base { "ariadne-text-base ariadne-px-1.5 ariadne-leading-7 ariadne-rounded-md" }
+              lg { "ariadne-text-lg ariadne-leading-10 ariadne-px-2.5 ariadne-rounded-lg" }
+            end
+
+            width do
+              narrow { "" }
+              full { "ariadne-w-full" }
+            end
+          end
+        end
+
+        style(:label) do
+          base do
+            [
+              "peer-disabled:ariadne-cursor-not-allowed",
+              "peer-disabled:ariadne-opacity-70",
+              "ariadne-leading-none",
+              "ariadne-font-medium",
+            ]
+          end
+
+          variants do
+            size do
+              sm { "ariadne-px-1 ariadne-rounded" }
+              base { "ariadne-px-1.5 ariadne-rounded-md" }
+              md { "ariadne-px-1.5 ariadne-rounded-md" }
+              lg { "ariadne-px-2.5 ariadne-rounded-lg" }
+            end
+          end
+        end
+
+        style(:caption) do
+          [
+            "ariadne-mt-2",
+            "ariadne-text-sm",
+            "ariadne-text-gray-500",
+          ]
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/form/validation_message/component.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag(:div, **@input.validation_arguments) do %>
+  <span class="FormControl-inlineValidation--visual" data-target="<%= @input.validation_success_icon_target %>" hidden><%= render(Ariadne::UI::Heroicon::Component.new(icon: :"check-circle", variant: HeroiconsHelper::Icon::VARIANT_SOLID, size: :xs, html_attrs: { aria: { hidden: true }})) %></span>
+  <span class=" FormControl-inlineValidation--visual" data-target="<%= @input.validation_error_icon_target %>"><%= render(Ariadne::UI::Heroicon::Component.new(icon: :"exclamation-triangle", variant: HeroiconsHelper::Icon::VARIANT_SOLID, size: :xs, html_attrs: { aria: { hidden: true }})) %></span>
+  <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
+<% end %>

data/app/components/ariadne/form/validation_message/component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Ariadne
+  module Form
+    # :nodoc:
+    class ValidationMessage < BaseComponent
+      attr_reader :input
+
+      def initialize(input:)
+        @input = input
+      end
+    end
+  end
+end

data/app/components/ariadne/layout/narrow/component.html.erb

@@ -0,0 +1,10 @@
+<main class="ariadne-grow ariadne-py-6 ariadne-px-1">
+    <div class="ariadne-mt-10 sm:ariadne-mx-auto sm:ariadne-w-full sm:ariadne-max-w-[480px]">
+        <div class="ariadne-bg-white ariadne-px-6 ariadne-py-12 ariadne-shadow sm:ariadne-rounded-lg sm:ariadne-px-12">
+            <%= content %>
+        </div>
+        <% if footer? %>
+            <%= footer %>
+        <% end %>
+    </div>
+</main>

data/app/components/ariadne/layout/narrow/component.rb

@@ -0,0 +1,24 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module Narrow
+      class Component < BaseComponent
+        renders_one :footer, Ariadne::BaseComponent::ACCEPT_ANYTHING
+
+        style do
+          base do
+            [
+              "ariadne-grow",
+              "ariadne-bg-zinc-50",
+              "dark:ariadne-bg-zinc-900",
+              "ariadne-py-6",
+              "ariadne-px-1",
+            ]
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/layout/nav_bar/component.html.erb

@@ -0,0 +1,123 @@
+<header class="<%= style %>">
+  <div class="ariadne-mx-auto ariadne-px-2 sm:ariadne-px-4 lg:ariadne-px-8">
+    <nav class="ariadne-flex ariadne-h-16 ariadne-justify-between">
+      <div class="ariadne-flex ariadne-w-16 ariadne-px-2 lg:ariadne-px-0">
+        <% leading_items.each_with_index do |leading_item, idx| %>
+        <div class="<%= style(:leading_item, initial: initial?(idx)) %>">
+          <%= leading_item %>
+        </div>
+      <% end %>
+      </div>
+      <%# <div class="flex flex-1 items-center justify-center px-2 lg:ml-6 lg:justify-end">
+        <div class="w-full max-w-lg lg:max-w-xs">
+          <label for="search" class="sr-only">Search</label>
+          <div class="relative">
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              Heroicon(icon: :search)
+            </div>
+            <input id="search" name="search" class="block w-full rounded-md border-0 bg-white py-1.5 pl-10 pr-3 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" placeholder="Search" type="search">
+          </div>
+        </div>
+      </div> %>
+      <%# <div class="flex items-center lg:hidden">
+        <!-- Mobile menu button -->
+        <button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500" aria-controls="mobile-menu" aria-expanded="false">
+          <span class="absolute -inset-0.5"></span>
+          <span class="sr-only">Open main menu</span>
+          <!--
+            Icon when menu is closed.
+
+            Menu open: "hidden", Menu closed: "block"
+          -->
+          <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+          </svg>
+          <!--
+            Icon when menu is open.
+
+            Menu open: "block", Menu closed: "hidden"
+          -->
+          <svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div> %>
+      <div class="ariadne-hidden lg:ariadne-ml-4 lg:ariadne-flex lg:ariadne-items-center">
+        <% trailing_items.each_with_index do |trailing_item, idx| %>
+          <div class="<%= style(:trailing_item, initial: final?(idx)) %>">
+            <%= trailing_item %>
+          </div>
+        <% end %>
+        <%# <button type="button" class="relative flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          <span class="absolute -inset-1.5"></span>
+          <span class="sr-only">View notifications</span>
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+          </svg>
+        </button> %>
+
+        <!-- Profile dropdown -->
+        <%# <div class="relative ml-4 flex-shrink-0">
+          <div>
+            <button type="button" class="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
+              <span class="absolute -inset-1.5"></span>
+              <span class="sr-only">Open user menu</span>
+              <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
+            </button>
+          </div>
+
+          <!--
+            Dropdown menu, show/hide based on menu state.
+
+            Entering: "transition ease-out duration-100"
+              From: "transform opacity-0 scale-95"
+              To: "transform opacity-100 scale-100"
+            Leaving: "transition ease-in duration-75"
+              From: "transform opacity-100 scale-100"
+              To: "transform opacity-0 scale-95"
+          -->
+          <div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
+            <!-- Active: "bg-gray-100", Not Active: "" -->
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
+            <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
+          </div>
+        </div> %>
+      </div>
+    </nav>
+  </div>
+
+  <!-- Mobile menu, show/hide based on menu state. -->
+  <%# <div class="lg:hidden" id="mobile-menu">
+    <div class="space-y-1 pb-3 pt-2">
+      <!-- Current: "bg-indigo-50 border-indigo-500 text-indigo-700", Default: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800" -->
+      <a href="#" class="block border-l-4 border-indigo-500 bg-indigo-50 py-2 pl-3 pr-4 text-base font-medium text-indigo-700">Dashboard</a>
+      <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Team</a>
+      <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Projects</a>
+      <a href="#" class="block border-l-4 border-transparent py-2 pl-3 pr-4 text-base font-medium text-gray-600 hover:border-gray-300 hover:bg-gray-50 hover:text-gray-800">Calendar</a>
+    </div>
+    <div class="border-t border-gray-200 pb-3 pt-4">
+      <div class="flex items-center px-4">
+        <div class="flex-shrink-0">
+          <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
+        </div>
+        <div class="ml-3">
+          <div class="text-base font-medium text-gray-800">Tom Cook</div>
+          <div class="text-sm font-medium text-gray-500">tom@example.com</div>
+        </div>
+        <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+          <span class="absolute -inset-1.5"></span>
+          <span class="sr-only">View notifications</span>
+          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
+          </svg>
+        </button>
+      </div>
+      <div class="mt-3 space-y-1">
+        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Your Profile</a>
+        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Settings</a>
+        <a href="#" class="block px-4 py-2 text-base font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-800">Sign out</a>
+      </div>
+    </div>
+  </div> %>
+</header>

data/app/components/ariadne/layout/nav_bar/component.rb

@@ -0,0 +1,77 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module Layout
+    module NavBar
+      class Component < Ariadne::BaseComponent
+        # Leading items at the far left of the header.
+        renders_many :leading_items, BaseComponent::ACCEPT_ANYTHING
+
+        # Leading items at the far left of the header.
+        renders_many :trailing_items, lambda { |static_content = nil, &block|
+          next static_content if static_content.present?
+
+          view_context.capture { block&.call }
+        }
+
+        renders_many :navigation_items, lambda { |static_content = nil, &block|
+          next static_content if static_content.present?
+
+          view_context.capture { block&.call }
+        }
+
+        def initial?(position)
+          position.zero?
+        end
+
+        def final?(position)
+          position == (leading_items.size - 1)
+        end
+
+        style do
+          base do
+            [
+              "ariadne-bg-white",
+              "ariadne-border-b",
+              "ariadne-z-50",
+              "ariadne-overflow-hidden",
+              "ariadne-border-zinc-100",
+              "dark:ariadne-border-zinc-900",
+            ]
+          end
+        end
+
+        style(:leading_item) do
+          base do
+            [
+              "",
+            ]
+          end
+
+          variants do
+            initial do
+              yes { "ariadne-flex ariadne-flex-shrink-0 ariadne-items-center" }
+              no { "ariadne-hidden lg:ariadne-ml-6 lg:ariadne-flex lg:ariadne-space-x-8" }
+            end
+          end
+        end
+
+        style(:trailing_item) do
+          base do
+            [
+              "ariadne-flex",
+              "ariadne-flex-1",
+              "ariadne-items-center",
+              "ariadne-justify-end",
+              "ariadne-gap-x-1",
+            ]
+          end
+
+          variants do
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/button/component.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag(button? ? :button : :a, class: html_attrs[:class], **html_attrs.except(:class)) do %>
+  <span class="ariadne-flex ariadne-display-grid ariadne-gap-x-1.5">
+  <%= leading_visual_icon %><%= content %>
+  </span>
+<% end %>

data/app/components/ariadne/ui/button/component.rb

@@ -0,0 +1,184 @@
+# typed: false
+# frozen_string_literal: true
+
+module Ariadne
+  module UI
+    module Button
+      class Component < Ariadne::BaseComponent
+        include Ariadne::Behaviors::Tooltipable
+
+        option :as, default: proc { :button }
+        option :href, default: proc { nil }
+
+        option :type, default: proc { "button" }
+        option :state, default: proc { "" }
+        option :theme, default: proc { :primary }
+        option :size, default: proc { :base }
+        option :icon_only, default: proc { :no }
+        option :width, default: proc { :narrow }
+
+        renders_one :leading_visual_icon, lambda { |**attrs|
+          Ariadne::UI::Heroicon::Component.new(**attrs)
+        }
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(theme:, size:, icon_only:, width:), html_attrs[:class]].join(" "))
+
+          if link?
+            html_attrs[:href] = href
+            html_attrs.delete(:disabled)
+          else
+            html_attrs[:type] = type
+            html_attrs[:disabled] ||= false
+          end
+        end
+
+        style do
+          base do
+            [
+              "ariadne-inline-flex",
+              "ariadne-items-center",
+              "ariadne-justify-center",
+              "ariadne-gap-x-1.5",
+              "ariadne-rounded",
+              "ariadne-px-2",
+              "ariadne-py-1",
+              "ariadne-font-semibold",
+              "ariadne-shadow-sm",
+              "ariadne-text-black",
+              "focus-visible:ariadne-outline",
+              "focus-visible:ariadne-outline-2",
+              "focus-visible:ariadne-outline-offset-2",
+
+              "disabled:ariadne-border-transparent",
+              "disabled:ariadne-cursor-not-allowed",
+            ]
+          end
+
+          variants do
+            theme do
+              primary do
+                [
+                  "ariadne-text-white",
+
+                  "ariadne-bg-emerald-600",
+                  "hover:ariadne-bg-emerald-700",
+                  "active:ariadne-bg-emerald-800",
+
+                  "disabled:ariadne-bg-emerald-100",
+                  "disabled:ariadne-text-emerald-400",
+                  "disabled:dark:ariadne-bg-emerald-900",
+                  "disabled:dark:ariadne-text-emerald-600",
+                ]
+              end
+              secondary do
+                [
+                  "ariadne-text-black",
+
+                  "ariadne-bg-zinc-100",
+                  "hover:ariadne-bg-zinc-300/20",
+                  "active:ariadne-bg-zinc-200/80",
+
+                  "dark:ariadne-text-slate-100",
+                  "dark:ariadne-bg-zinc-900",
+                  "dark:ariadne-hover:bg-zinc-800/80",
+                  "dark:active:ariadne-bg-zinc-700/20",
+                ]
+              end
+              ghost do
+                [
+                  "ariadne-text-black",
+                  "dark:ariadne-text-white",
+                  "ariadne-shadow-none",
+
+                  "hover:ariadne-bg-zinc-200/20",
+                  "active:ariadne-bg-zinc-500/10",
+                  "active:ariadne-border-transparent",
+                  "dark:hover:ariadne-bg-zinc-600/20",
+                  "dark:active:ariadne-bg-zinc-500/10",
+                ]
+              end
+              danger do
+                [
+                  "ariadne-border",
+                  "ariadne-border-solid",
+                  "ariadne-border-red-600",
+                  "ariadne-bg-transparent",
+                  "ariadne-text-red-600",
+                  "hover:ariadne-bg-red-500",
+                  "hover:ariadne-text-white",
+                  "active:ariadne-text-white",
+                  "active:ariadne-bg-red-600",
+                  "dark:active:ariadne-bg-red-400",
+                ]
+              end
+            end
+
+            size do
+              xs do
+                [
+                  "ariadne-text-xs",
+                ]
+              end
+              sm do
+                [
+                  "ariadne-text-sm",
+                  "ariadne-leading-5",
+                ]
+              end
+              base do
+                [
+                  "ariadne-rounded-md",
+                  "ariadne-px-2.5",
+                  "ariadne-py-1.5",
+                  "ariadne-text-base",
+                  "ariadne-leading-7",
+                ]
+              end
+              lg do
+                [
+                  "ariadne-rounded-md",
+                  "ariadne-px-3",
+                  "ariadne-py-2",
+                  "ariadne-text-lg",
+                  "ariadne-leading-8",
+                ]
+              end
+              xl do
+                [
+                  "ariadne-rounded-md",
+                  "ariadne-px-3.5",
+                  "ariadne-py-2.5",
+                  "ariadne-text-xl",
+                  "ariadne-leading-10",
+                ]
+              end
+            end
+
+            icon_only do
+              yes {}
+              no {}
+            end
+            width do
+              narrow {}
+              full { "ariadne-w-full ariadne-justify-between" }
+            end
+          end
+        end
+
+        private
+
+        def button_tag
+          if link?
+            "a"
+          else
+            "button"
+          end
+        end
+
+        def link? = as == :link
+        def button? = as == :button
+      end
+    end
+  end
+end

data/app/components/ariadne/ui/clipboard_copy/component.html.erb

@@ -0,0 +1,8 @@
+<clipboard-copy class="<%= style(size:) %>" <%= html_attributes %>>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <%= render Ariadne::UI::Heroicon::Component.new(icon: :"document-duplicate", variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, html_attrs: { data: { "ariadne-ui-clipboard-copy-target" => "initial" }}) %>
+    <%= render Ariadne::UI::Heroicon::Component.new(icon: :check, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, html_attrs: { class: "text-green-600 hidden", data: { "ariadne-ui-clipboard-copy-target" => "confirmed" }}) %>
+  <% end %>
+</clipboard-copy>