lightning_ui_kit 0.3.5 → 0.4.0

data/app/components/lightning_ui_kit/chart_component.html.erb

@@ -0,0 +1,80 @@
+<%= tag.div(class: classes, data: stimulus_data) do %>
+  <% if empty? %>
+    <div class="lui:flex lui:h-40 lui:items-center lui:justify-center lui:rounded-lg lui:border lui:border-dashed lui:border-border lui:text-sm lui:text-foreground-muted">
+      No data to display
+    </div>
+  <% else %>
+    <% if show_legend? %>
+      <div class="lui:mb-3 lui:flex lui:flex-wrap lui:items-center lui:gap-4">
+        <% series.each do |s| %>
+          <div class="lui:flex lui:items-center lui:gap-1.5 lui:text-xs lui:text-foreground-muted">
+            <span class="lui:size-2.5 lui:rounded-sm" style="background-color: <%= s[:color] %>;"></span>
+            <%= s[:label] %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <svg viewBox="0 0 <%= view_width %> <%= view_height %>" class="lui:w-full lui:overflow-visible" style="height: <%= height %>px;" role="img" aria-label="Chart">
+      <% if area? %>
+        <defs>
+          <% series.each_with_index do |s, i| %>
+            <linearGradient id="<%= gradient_id(i) %>" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="<%= s[:color] %>" stop-opacity="0.35" />
+              <stop offset="100%" stop-color="<%= s[:color] %>" stop-opacity="0.02" />
+            </linearGradient>
+          <% end %>
+        </defs>
+      <% end %>
+
+      <% if show_grid? %>
+        <% y_ticks.each do |tick| %>
+          <line x1="<%= plot_left %>" y1="<%= tick[:y].round(2) %>" x2="<%= plot_right %>" y2="<%= tick[:y].round(2) %>" stroke="var(--lui-theme-border)" stroke-width="1" stroke-dasharray="3 3" />
+        <% end %>
+      <% end %>
+
+      <% if show_axis? %>
+        <% y_ticks.each do |tick| %>
+          <text x="<%= plot_left - 8 %>" y="<%= (tick[:y] + 4).round(2) %>" text-anchor="end" font-size="11" fill="var(--lui-theme-foreground-muted)"><%= tick[:label] %></text>
+        <% end %>
+        <% x_positions.each do |pos| %>
+          <text x="<%= pos[:x].round(2) %>" y="<%= view_height - 8 %>" text-anchor="middle" font-size="11" fill="var(--lui-theme-foreground-muted)"><%= pos[:label] %></text>
+        <% end %>
+      <% end %>
+
+      <% if bar? %>
+        <% bars.each do |bar| %>
+          <path d="<%= bar_path(bar) %>" fill="<%= bar[:color] %>" data-role="bar" />
+        <% end %>
+      <% else %>
+        <% series.each_with_index do |s, i| %>
+          <% points = line_points(s) %>
+          <% if area? %>
+            <path d="<%= area_path(points) %>" fill="url(#<%= gradient_id(i) %>)" data-role="area" />
+          <% end %>
+          <polyline points="<%= polyline(points) %>" fill="none" stroke="<%= s[:color] %>" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-role="line" />
+          <% points.each do |x, y| %>
+            <circle cx="<%= x.round(2) %>" cy="<%= y.round(2) %>" r="3" fill="var(--lui-theme-surface)" stroke="<%= s[:color] %>" stroke-width="2" data-role="point" />
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <% hover_columns.each do |col| %>
+        <rect
+          x="<%= col[:x].round(2) %>"
+          y="<%= plot_top %>"
+          width="<%= col[:width].round(2) %>"
+          height="<%= (plot_bottom - plot_top).round(2) %>"
+          fill="transparent"
+          pointer-events="all"
+          data-role="column"
+          data-label="<%= col[:label] %>"
+          data-payload="<%= col[:payload] %>"
+          data-action="mouseenter->lui-chart#show mousemove->lui-chart#move mouseleave->lui-chart#hide"
+        />
+      <% end %>
+    </svg>
+
+    <div data-lui-chart-target="tooltip" class="lui:hidden lui:pointer-events-none lui:absolute lui:z-50 lui:flex lui:min-w-[8rem] lui:flex-col lui:gap-1 lui:rounded-lg lui:border lui:border-border lui:bg-surface lui:px-2.5 lui:py-1.5 lui:text-xs lui:shadow-md"></div>
+  <% end %>
+<% end %>

data/app/components/lightning_ui_kit/chart_component.rb

@@ -0,0 +1,263 @@
+class LightningUiKit::ChartComponent < LightningUiKit::BaseComponent
+  TYPES = %i[bar line area].freeze
+
+  VIEW_WIDTH = 640
+  PAD_RIGHT = 16
+  PAD_TOP = 12
+  AXIS_PAD_LEFT = 44
+
+  def initialize(data:, type: :bar, series: nil, x_key: :label, height: 260, show_grid: true, show_legend: true, show_axis: true, **options)
+    @data = Array(data).map { |row| row.respond_to?(:to_h) ? row.to_h.symbolize_keys : row }
+    @type = TYPES.include?(type) ? type : :bar
+    @x_key = x_key.to_sym
+    @height = height.to_i
+    @show_grid = show_grid
+    @show_legend = show_legend
+    @show_axis = show_axis
+    @series = build_series(series)
+    @options = options
+  end
+
+  attr_reader :type, :series, :height
+
+  def bar?
+    @type == :bar
+  end
+
+  def area?
+    @type == :area
+  end
+
+  def empty?
+    @data.empty? || @series.empty?
+  end
+
+  def show_grid?
+    @show_grid
+  end
+
+  def show_axis?
+    @show_axis
+  end
+
+  def show_legend?
+    @show_legend && @series.any?
+  end
+
+  def classes
+    merge_classes([
+      "lui:relative lui:w-full lui:text-foreground",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def chart_id
+    @chart_id ||= "lui-chart-#{object_id}"
+  end
+
+  def gradient_id(index)
+    "#{chart_id}-grad-#{index}"
+  end
+
+  def stimulus_data
+    {controller: "lui-chart"}.merge(data_attrs)
+  end
+
+  def data_attrs
+    @options[:data] || {}
+  end
+
+  # --- geometry ---
+
+  def view_width = VIEW_WIDTH
+
+  def view_height = @height
+
+  def plot_left = @show_axis ? AXIS_PAD_LEFT : 8
+
+  def plot_right = VIEW_WIDTH - PAD_RIGHT
+
+  def plot_top = PAD_TOP
+
+  def plot_bottom = @height - (@show_axis ? 28 : 8)
+
+  def plot_width = plot_right - plot_left
+
+  def plot_height = plot_bottom - plot_top
+
+  def count = @data.size
+
+  def x_label(row) = row[@x_key]
+
+  def value_for(row, series) = row[series[:key]].to_f
+
+  def y_for(value)
+    return plot_bottom if chart_max.zero?
+
+    plot_bottom - (value.to_f / chart_max) * plot_height
+  end
+
+  def point_x(index)
+    return plot_left + plot_width / 2.0 if count <= 1
+
+    plot_left + (index.to_f / (count - 1)) * plot_width
+  end
+
+  def y_ticks(steps = 4)
+    (0..steps).map do |i|
+      value = chart_max * i / steps
+      {label: format_number(value), y: y_for(value)}
+    end
+  end
+
+  def x_positions
+    @data.each_with_index.map do |row, i|
+      x = bar? ? plot_left + i * bar_group_width + bar_group_width / 2.0 : point_x(i)
+      {x: x, label: x_label(row)}
+    end
+  end
+
+  def bars
+    group_width = bar_group_width
+    inner = group_width * 0.2
+    band = group_width - inner
+    bar_width = @series.empty? ? band : band / @series.size
+
+    @data.each_with_index.flat_map do |row, i|
+      group_x = plot_left + i * group_width + inner / 2.0
+      @series.each_with_index.map do |s, si|
+        value = value_for(row, s)
+        y = y_for(value)
+        {
+          x: group_x + si * bar_width,
+          y: y,
+          width: bar_width * 0.9,
+          height: [plot_bottom - y, 0].max,
+          color: s[:color],
+          label: x_label(row),
+          series_label: s[:label],
+          value: format_number(value)
+        }
+      end
+    end
+  end
+
+  def line_points(series)
+    @data.each_with_index.map do |row, i|
+      [point_x(i), y_for(value_for(row, series))]
+    end
+  end
+
+  def polyline(points)
+    points.map { |x, y| "#{x.round(2)},#{y.round(2)}" }.join(" ")
+  end
+
+  def area_path(points)
+    return "" if points.empty?
+
+    segments = ["M #{points.first[0].round(2)} #{plot_bottom.round(2)}"]
+    points.each { |x, y| segments << "L #{x.round(2)} #{y.round(2)}" }
+    segments << "L #{points.last[0].round(2)} #{plot_bottom.round(2)} Z"
+    segments.join(" ")
+  end
+
+  # Path for a bar with rounded top corners and a square base.
+  def bar_path(bar)
+    x = bar[:x]
+    y = bar[:y]
+    w = bar[:width]
+    h = bar[:height]
+    return "" if h <= 0 || w <= 0
+
+    r = [6.0, w / 2.0, h].min
+    x2 = x + w
+    bottom = y + h
+    [
+      "M #{r2(x)} #{r2(bottom)}",
+      "L #{r2(x)} #{r2(y + r)}",
+      "Q #{r2(x)} #{r2(y)} #{r2(x + r)} #{r2(y)}",
+      "L #{r2(x2 - r)} #{r2(y)}",
+      "Q #{r2(x2)} #{r2(y)} #{r2(x2)} #{r2(y + r)}",
+      "L #{r2(x2)} #{r2(bottom)}",
+      "Z"
+    ].join(" ")
+  end
+
+  # Invisible full-height bands (one per category) that drive the hover tooltip.
+  def hover_columns
+    step = (count > 1) ? plot_width.to_f / (count - 1) : plot_width.to_f
+
+    @data.each_with_index.map do |row, i|
+      if bar?
+        x = plot_left + i * bar_group_width
+        w = bar_group_width
+      else
+        x = point_x(i) - step / 2.0
+        w = step
+      end
+      left = [x, plot_left].max
+      right = [x + w, plot_right].min
+      {x: left, width: [right - left, 0].max, label: x_label(row), payload: payload_for(i)}
+    end
+  end
+
+  def payload_for(index)
+    row = @data[index]
+    @series.map do |s|
+      {label: s[:label], value: format_number(value_for(row, s)), color: s[:color]}
+    end.to_json
+  end
+
+  private
+
+  def r2(number)
+    number.round(2)
+  end
+
+  def chart_max
+    @chart_max ||= begin
+      values = @data.flat_map { |row| @series.map { |s| value_for(row, s) } }
+      max = values.max || 0
+      (max <= 0) ? 1.0 : max.to_f
+    end
+  end
+
+  def bar_group_width
+    return plot_width if count.zero?
+
+    plot_width.to_f / count
+  end
+
+  def build_series(series)
+    definitions =
+      if series
+        Array(series).map { |s| s.to_h.symbolize_keys }
+      else
+        numeric_keys.map { |key| {key: key} }
+      end
+
+    definitions.each_with_index.map do |definition, i|
+      key = definition[:key].to_sym
+      {
+        key: key,
+        label: definition[:label] || key.to_s.humanize,
+        color: definition[:color] || "var(--lui-theme-chart-#{(i % 5) + 1})"
+      }
+    end
+  end
+
+  def numeric_keys
+    return [] if @data.empty?
+
+    candidates = @data.first.keys - [@x_key]
+    numeric = candidates.select { |key| @data.all? { |row| row[key].is_a?(Numeric) } }
+    return numeric unless numeric.empty?
+
+    @data.first.key?(:value) ? [:value] : []
+  end
+
+  def format_number(value)
+    rounded = value.to_f.round(2)
+    (rounded % 1).zero? ? rounded.to_i.to_s : rounded.to_s
+  end
+end

data/app/components/lightning_ui_kit/collapsible_component.html.erb

@@ -0,0 +1,10 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div data-action="click->lui-collapsible#toggle" class="lui:cursor-pointer">
+    <%= trigger %>
+  </div>
+  <div data-lui-collapsible-target="content" class="<%= content_classes %>">
+    <div class="lui:overflow-hidden">
+      <%= body %>
+    </div>
+  </div>
+<% end %>

data/app/components/lightning_ui_kit/collapsible_component.rb

@@ -0,0 +1,28 @@
+class LightningUiKit::CollapsibleComponent < LightningUiKit::BaseComponent
+  renders_one :trigger
+  renders_one :body
+
+  def initialize(open: false, **options)
+    @open = open
+    @options = options
+  end
+
+  def classes
+    merge_classes([
+      "lui:flex lui:flex-col lui:gap-2",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def content_classes
+    rows = @open ? "lui:grid-rows-[1fr]" : "lui:grid-rows-[0fr]"
+    "lui:grid lui:transition-all lui:duration-200 lui:ease-out #{rows}"
+  end
+
+  def data
+    {
+      controller: "lui-collapsible",
+      lui_collapsible_open_value: @open
+    }.merge(@options[:data] || {})
+  end
+end

data/app/components/lightning_ui_kit/combobox_component.html.erb

@@ -73,13 +73,13 @@
       data-lui-combobox-target="listbox"
       role="listbox"
       aria-label="<%= effective_label || 'Options' %>"
-      class="lui:hidden lui:absolute lui:z-50 lui:mt-1 lui:w-full lui:max-h-60 lui:overflow-auto lui:rounded-lg lui:bg-surface-secondary lui:shadow-lg lui:ring-1 lui:ring-border"
+      class="lui:hidden lui:absolute lui:z-50 lui:mt-1 lui:w-full lui:max-h-60 lui:overflow-auto lui:rounded-lg lui:bg-surface lui:p-1 lui:shadow-lg lui:ring-1 lui:ring-border"
     >
           <template data-lui-combobox-target="optionTemplate">
             <div
           role="option"
           data-lui-combobox-target="option"
-          class="lui:relative lui:cursor-pointer lui:select-none lui:py-2 lui:px-3 lui:text-foreground lui:hover:bg-surface-tertiary lui:data-[selected]:bg-interactive-subtle lui:data-[highlighted]:bg-surface-tertiary lui:data-[disabled]:opacity-50 lui:data-[disabled]:cursor-not-allowed"
+          class="lui:relative lui:cursor-pointer lui:select-none lui:rounded-md lui:py-1.5 lui:px-3 lui:text-base/6 lui:text-foreground lui:sm:text-sm/6 lui:hover:bg-surface-tertiary lui:data-[selected]:bg-interactive-subtle lui:data-[highlighted]:bg-surface-tertiary lui:data-[disabled]:opacity-50 lui:data-[disabled]:cursor-not-allowed"
           data-action="click->lui-combobox#selectOption mouseenter->lui-combobox#highlightOption"
               >
               <span data-label class="lui:block lui:truncate"></span>
@@ -91,16 +91,16 @@
             </div>
           </template>
           <div data-lui-combobox-target="optionsContainer"></div>
-          <div data-lui-combobox-target="loading" class="lui:hidden lui:py-2 lui:px-3 lui:text-foreground-muted lui:text-sm">
+          <div data-lui-combobox-target="loading" class="lui:hidden lui:py-1.5 lui:px-3 lui:text-base/6 lui:text-foreground-muted lui:sm:text-sm/6">
             Loading...
           </div>
-          <div data-lui-combobox-target="noResults" class="lui:hidden lui:py-2 lui:px-3 lui:text-foreground-muted lui:text-sm">
+          <div data-lui-combobox-target="noResults" class="lui:hidden lui:py-1.5 lui:px-3 lui:text-base/6 lui:text-foreground-muted lui:sm:text-sm/6">
             No results found
           </div>
           <% if @allow_custom %>
             <div
           data-lui-combobox-target="createOption"
-          class="lui:hidden lui:cursor-pointer lui:py-2 lui:px-3 lui:text-interactive lui:hover:bg-interactive-subtle lui:border-t lui:border-border-subtle lui:flex lui:items-center lui:gap-1.5"
+          class="lui:hidden lui:cursor-pointer lui:rounded-md lui:py-1.5 lui:px-3 lui:text-base/6 lui:text-interactive lui:sm:text-sm/6 lui:hover:bg-interactive-subtle lui:border-t lui:border-border-subtle lui:flex lui:items-center lui:gap-1.5"
           data-action="click->lui-combobox#createCustomOption"
               >
               <%= heroicon "plus", variant: :solid, options: { class: "lui:size-4" } %>

data/app/components/lightning_ui_kit/combobox_component.rb

@@ -38,17 +38,17 @@ class LightningUiKit::ComboboxComponent < LightningUiKit::BaseComponent
     @options_hash = options_hash
 
     @association = association
-    @foreign_key = foreign_key
     @nested_model = nested_model
+    @foreign_key = foreign_key || derive_foreign_key
     @collection = collection
     @label_method = label_method
     @value_method = value_method
 
     if association_mode?
-      @name = nested_attributes_name
+      @name = @association ? nested_attributes_name : name
       @multiple = true
-      @options = derive_options_from_collection
-      @selected = derive_selected_from_association
+      @options = @collection ? derive_options_from_collection : options
+      @selected = @association ? derive_selected_from_association : (selected || [])
     else
       @name = name
       @multiple = multiple
@@ -96,8 +96,11 @@ class LightningUiKit::ComboboxComponent < LightningUiKit::BaseComponent
     base.compact
   end
 
+  # Nested-attributes mode: triggered by `foreign_key:` alone so it can be used
+  # without an AR association (options/selected supplied explicitly). Matches the
+  # Stimulus controller, which keys off the foreign-key value.
   def association_mode?
-    @association.present? && @foreign_key.present?
+    @foreign_key.present?
   end
 
   def input_data
@@ -163,6 +166,27 @@ class LightningUiKit::ComboboxComponent < LightningUiKit::BaseComponent
 
   private
 
+  # When `foreign_key:` is omitted, resolve it from the join model's belongs_to
+  # reflection (handles custom foreign keys), falling back to the
+  # "<nested_model>_id" naming convention.
+  def derive_foreign_key
+    return nil unless @nested_model
+
+    reflected_foreign_key || "#{@nested_model}_id"
+  end
+
+  def reflected_foreign_key
+    owner = @form&.object&.class
+    return nil unless @association && owner.respond_to?(:reflect_on_association)
+
+    join_reflection = owner.reflect_on_association(@association)
+    return nil unless join_reflection
+
+    join_reflection.klass.reflect_on_association(@nested_model)&.foreign_key&.to_s
+  rescue NameError
+    nil
+  end
+
   def nested_attributes_name
     "#{@association}_attributes"
   end

data/app/components/lightning_ui_kit/command/item_component.html.erb

@@ -0,0 +1 @@
+<%= content %>

data/app/components/lightning_ui_kit/command/item_component.rb

@@ -0,0 +1,8 @@
+class LightningUiKit::Command::ItemComponent < LightningUiKit::BaseComponent
+  attr_reader :value
+
+  def initialize(value: nil, **options)
+    @value = value
+    @options = options
+  end
+end

data/app/components/lightning_ui_kit/command_component.html.erb

@@ -0,0 +1,25 @@
+<%= tag.div(class: classes, data: data) do %>
+  <div class="lui:flex lui:items-center lui:gap-2 lui:border-b lui:border-border lui:px-3">
+    <%= heroicon("magnifying-glass", variant: :outline, options: {class: "lui:size-4 lui:shrink-0 lui:text-foreground-muted"}) %>
+    <input
+      type="text"
+      placeholder="<%= placeholder %>"
+      data-lui-command-target="input"
+      data-action="input->lui-command#filter keydown->lui-command#onKeydown"
+      class="lui:h-11 lui:w-full lui:bg-transparent lui:text-sm lui:text-foreground lui:outline-none lui:placeholder:text-foreground-muted"
+      autocomplete="off"
+      role="combobox"
+      aria-expanded="true"
+    >
+  </div>
+  <div data-lui-command-target="list" role="listbox" class="lui:max-h-72 lui:overflow-y-auto lui:p-1">
+    <% items.each do |item| %>
+      <div role="option" class="<%= item_classes %>" data-lui-command-target="item" data-value="<%= item.value %>" data-action="click->lui-command#select mouseenter->lui-command#activate">
+        <%= item %>
+      </div>
+    <% end %>
+    <div data-lui-command-target="empty" class="lui:hidden lui:py-6 lui:text-center lui:text-sm lui:text-foreground-muted">
+      <%= empty_text %>
+    </div>
+  </div>
+<% end %>

data/app/components/lightning_ui_kit/command_component.rb

@@ -0,0 +1,26 @@
+class LightningUiKit::CommandComponent < LightningUiKit::BaseComponent
+  renders_many :items, LightningUiKit::Command::ItemComponent
+
+  def initialize(placeholder: "Type a command or search...", empty_text: "No results found.", **options)
+    @placeholder = placeholder
+    @empty_text = empty_text
+    @options = options
+  end
+
+  attr_reader :placeholder, :empty_text
+
+  def classes
+    merge_classes([
+      "lui:flex lui:w-full lui:flex-col lui:overflow-hidden lui:rounded-lg lui:border lui:border-border lui:bg-surface lui:text-foreground lui:shadow-md",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def item_classes
+    "lui:flex lui:cursor-pointer lui:items-center lui:gap-2 lui:rounded-sm lui:px-2 lui:py-1.5 lui:text-sm lui:text-foreground lui:outline-none lui:data-[active]:bg-surface-hover lui:hover:bg-surface-hover"
+  end
+
+  def data
+    {controller: "lui-command"}.merge(@options[:data] || {})
+  end
+end

data/app/components/lightning_ui_kit/context_menu_component.html.erb

@@ -0,0 +1,12 @@
+<%= tag.div(data: data, class: "lui:relative") do %>
+  <div data-action="contextmenu->lui-context-menu#open" class="<%= trigger_classes %>">
+    <%= trigger %>
+  </div>
+  <div data-lui-context-menu-target="content" role="menu" class="<%= content_classes %>">
+    <% items.each do |item| %>
+      <div role="menuitem" class="<%= item_classes %>" data-action="click->lui-context-menu#close">
+        <%= item %>
+      </div>
+    <% end %>
+  </div>
+<% end %>

data/app/components/lightning_ui_kit/context_menu_component.rb

@@ -0,0 +1,27 @@
+class LightningUiKit::ContextMenuComponent < LightningUiKit::BaseComponent
+  renders_one :trigger
+  renders_many :items
+
+  def initialize(**options)
+    @options = options
+  end
+
+  def trigger_classes
+    merge_classes([
+      "lui:flex lui:min-h-[8rem] lui:w-full lui:items-center lui:justify-center lui:rounded-md lui:border lui:border-dashed lui:border-border lui:text-sm lui:text-foreground-muted lui:select-none",
+      @options[:class]
+    ].compact.join(" "))
+  end
+
+  def content_classes
+    "lui:hidden lui:fixed lui:z-50 lui:min-w-[8rem] lui:overflow-hidden lui:rounded-md lui:border lui:border-border lui:bg-surface lui:p-1 lui:text-foreground lui:shadow-md"
+  end
+
+  def item_classes
+    "lui:flex lui:cursor-pointer lui:items-center lui:gap-2 lui:rounded-sm lui:px-2 lui:py-1.5 lui:text-sm lui:text-foreground lui:outline-none lui:hover:bg-surface-hover lui:focus:bg-surface-hover"
+  end
+
+  def data
+    {controller: "lui-context-menu"}.merge(@options[:data] || {})
+  end
+end

data/app/components/lightning_ui_kit/copy_input_component.html.erb

@@ -0,0 +1,37 @@
+<%= tag.div(class: classes, data: data) do %>
+  <%= render_label %>
+  <% if @description %>
+    <%= tag.p(
+      @description,
+      class: "lui:text-base/6 lui:text-foreground-muted lui:sm:text-sm/6",
+      data: { slot: "description" }
+    ) %>
+  <% end %>
+  <span data-slot="control" class="<%= control_classes %>">
+    <input
+      type="<%= input_type %>"
+      value="<%= @value %>"
+      readonly
+      class="<%= input_classes %>"
+      data-lui-clipboard-target="input"
+    />
+    <button type="button" class="<%= copy_button_classes %>" data-action="click->lui-clipboard#copy" aria-label="Copy to clipboard">
+      <span data-lui-clipboard-target="icon">
+        <%= heroicon("clipboard-document", variant: :outline, options: { class: "lui:size-5" }) %>
+      </span>
+      <span data-lui-clipboard-target="successIcon" class="lui:hidden">
+        <%= heroicon("clipboard-document-check", variant: :outline, options: { class: "lui:size-5 lui:text-success-text" }) %>
+      </span>
+    </button>
+    <% if @secret %>
+      <button type="button" class="<%= toggle_button_classes %>" data-action="click->lui-clipboard#toggle" aria-label="Toggle visibility">
+        <span data-lui-clipboard-target="showIcon">
+          <%= heroicon("eye", variant: :outline, options: { class: "lui:size-5" }) %>
+        </span>
+        <span data-lui-clipboard-target="hideIcon" class="lui:hidden">
+          <%= heroicon("eye-slash", variant: :outline, options: { class: "lui:size-5" }) %>
+        </span>
+      </button>
+    <% end %>
+  </span>
+<% end %>