ariadne_view_components 0.0.93.2 → 0.0.94

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

@@ -9,24 +9,20 @@
       <div class="" role="menuitem"><%= link %></div>
     <% end %>
     <% checkboxes.each do |checkbox| %>
-      <div
-            class="<%= style(:item) %>"
-            data-<%= stimulus_name %>-target="searchString">
+      <div class="<%= style(:item) %>" data-<%= stimulus_name %>-target="searchString">
         <div class="ariadne-truncate ariadne-w-full" role="menuitemcheckbox"><%= checkbox %></div>
       </div>
     <% end %>
     <% radio_buttons.each do |radio_button| %>
-      <div
-            class="<%= style(:item) %>"
-            data-<%= stimulus_name %>-target="searchString">
+      <div class="<%= style(:item) %>" data-<%= stimulus_name %>-target="searchString">
         <div class="ariadne-truncate" role="menuitemradiobutton"><%= radio_button %></div>
       </div>
     <% end %>
     <% items.each do |item| %>
       <%= item %>
     <% end %>
-    <div class="ariadne-text-center ariadne-hidden" data-<%= stimulus_name %>-target="emptyRoot">
-      <span class="ariadne-py-3 ariadne-text-md ariadne-text-zinc-600 dark:ariadne-text-zinc-400"><%= @empty_placeholder %> </span>
-    </div>
+  </div>
+  <div class="ariadne-text-center ariadne-hidden" data-<%= stimulus_name %>-target="emptyRoot">
+    <span class="ariadne-py-3 ariadne-text-md ariadne-text-zinc-600 dark:ariadne-text-zinc-400"><%= @empty_placeholder %> </span>
   </div>
 </div>

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

@@ -4,9 +4,18 @@
 module Ariadne
   module UI
     module List
+      # Use this for a vertical list of interactive actions or options.
+      # It's composed of items presented in a consistent, single-column format,  with room for icons, descriptions, side information, and other visuals.
       class Component < Ariadne::BaseComponent
-        option :size, default: proc { :md }
+        DEFAULT_SIZE = :md
 
+        # @param [Symbol] size (Ariadne::UI::List::DEFAULT_SIZE) The size of the badge. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
+
+        # Renders a filter field for the list. You will need to provide an option for `empty_placeholder`, which is a string
+        # that will be displayed when the results of the filter is empty.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::Form::TextField::Component) %>.
         renders_one :filter_field, lambda { |**options|
           raise ArgumentError, "Must provide text for `empty_placeholder`" if options[:empty_placeholder].blank?
 
@@ -22,17 +31,28 @@ module Ariadne
             autocomplete: "off",
             autofocus: true,
             type: "search",
-            data: {
-              "#{stimulus_name}-target": "input",
-              action: "#{stimulus_name}#handleInput",
-            },
           })
 
+          component_data_attrs = {
+            "#{stimulus_name}-target": "input",
+            action: "#{stimulus_name}#handleInput",
+          }
+          options[:html_attrs][:data] = merge_data_attributes(options[:html_attrs], component_data_attrs)
+
           Ariadne::Form::TextField::Component.new(**options)
         }
 
+        # Renders a checkbox in the list.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::Form::Checkbox::Component) %>.
         renders_many :checkboxes, Ariadne::Form::Checkbox::Component
+        # Renders a radiobutton in the list.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::Form::RadioButton::Component) %>.
         renders_many :radio_buttons, Ariadne::Form::RadioButton::Component
+        # Renders a link in the list.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Link::Component) %>.
         renders_many :links, lambda { |**options|
           options[:theme] = :nude
           options[:"data-#{stimulus_name}-target"] = "searchString"
@@ -57,13 +77,17 @@ module Ariadne
           Ariadne::UI::Link::Component.new(**options)
         }
 
+        # Renders an item in the list. Use this slot for custom items, or items which ought to be displayed rather than interacted with.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::List::Item::Component) %>.
         renders_many :items, Ariadne::UI::List::Item::Component
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
-          html_attrs[:data] = {
+          html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
+          component_data_attrs = {
             controller: stimulus_name,
           }
+          html_attrs[:data] = merge_data_attributes(html_attrs, component_data_attrs)
         end
 
         SHARED_BACKGROUND_COLORS = [

data/app/components/ariadne/ui/list/item/component.rb

@@ -5,16 +5,17 @@ module Ariadne
   module UI
     module List
       module Item
+        # Use this class as a wrapper for any custom content you wish to insert into the list.
         class Component < Ariadne::BaseComponent
           option :as_menu, default: proc { false }
 
           accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:item), html_attrs[:class]].join(" "))
+            html_attrs[:class] = merge_tailwind_classes([style(:item), html_attrs[:class]].join(" "))
 
-            html_attrs[:data] ||= {}
-            html_attrs[:data] = {
-              "#{stimulus_name}-target": "searchString",
-            }.merge(html_attrs[:data])
+            component_data_attrs = {
+              "#{stimulus_name.sub("-item", "")}-target": "searchString",
+            }
+            html_attrs[:data] = merge_data_attributes(html_attrs, component_data_attrs)
           end
 
           style :item do

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

@@ -4,6 +4,7 @@
 module Ariadne
   module UI
     module Pagination
+      # Pagination is a horizontal set of links to navigate paginated content.
       class Component < Ariadne::BaseComponent
         option :label
         option :goto_label
@@ -13,8 +14,6 @@ module Ariadne
 
         option :callback_page_url
 
-        option :page_size_options, default: proc { [10, 25, 50, 100] }
-
         def page_links
           (1..pages_count).each_with_object([]) do |page, list|
             if [1, pages_count].include?(page) || page.between?(current_page - 2, current_page + 2)

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

@@ -1,5 +1,5 @@
 <div data-controller="<%= @stimulus_controllers %>">
-  <%= button %>
+  <%= reveal_button %>
   <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
     <%= content %>
   </div>

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

@@ -4,6 +4,8 @@
 module Ariadne
   module UI
     module Popover
+      # A component that displays rich content in a card, triggered by a button. Typically
+      # you would use this component to display a menu, a form, or any other card within a hover or trigger.
       class Component < Ariadne::BaseComponent
         ALIGNMENT_DEFAULT = :center
         ALIGNMENT_OPTIONS = [:left, :right, ALIGNMENT_DEFAULT]
@@ -11,41 +13,48 @@ module Ariadne
         POSITION_DEFAULT = :auto
         POSITION_OPTIONS = [POSITION_DEFAULT, :above, :below]
 
-        option :target_id, optional: true
+        # @param [String] target_id (Ariadne::UI::Popover::Component.generate_id) The ID of the element that triggers the popover.
+        option :target_id, default: -> { self.class.generate_id }
 
-        option :position, default: proc { POSITION_DEFAULT }
-        option :alignment, default: proc { ALIGNMENT_DEFAULT }
+        # @param [Symbol] position (:auto) The position of the popover. <%= one_of(Ariadne::UI::Popover::Component::POSITION_OPTIONS) %>
+        option :position, default: -> { POSITION_DEFAULT }
+        # @param [Symbol] alignment (:center) The alignment of the popover. <%= one_of(Ariadne::UI::Popover::Component::ALIGNMENT_OPTIONS) %>
+        option :alignment, default: -> { ALIGNMENT_DEFAULT }
 
-        renders_one :button, lambda { |**options|
-                               options[:html_attrs] ||= {}
-                               options[:html_attrs] = {
-                                 popovertarget: target_id,
-                                 popovertargetaction: "toggle",
-                               }.merge(options[:html_attrs])
+        # The button which reveals the popover.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::Button::Component) %>.
+        renders_one :reveal_button, lambda { |**options|
+          options[:html_attrs] ||= {}
 
-                               # requires CSS Anchor Positioning
-                               #  options[:html_attrs][:style] = "anchor-name: --popover-#{target_id};"
+          options[:html_attrs] = {
+            popovertarget: target_id,
+            popovertargetaction: "toggle",
+          }.merge(options[:html_attrs])
 
-                               options[:html_attrs][:data] ||= {}
-                               options[:html_attrs][:data] = {
-                                 "#{stimulus_name}-target" => ["button", html_attrs.fetch(:data, {}).fetch(:target, nil)].compact.join(" "),
-                               }.merge(options[:html_attrs][:data])
+          # requires CSS Anchor Positioning
+          #  options[:html_attrs][:style] = "anchor-name: --popover-#{target_id};"
+
+          component_data_attrs = {
+            "#{stimulus_name}-target" => "button",
+            action: "click->#{stimulus_name}#toggle",
+          }
+          options[:html_attrs][:data] = merge_data_attributes(options[:html_attrs], component_data_attrs)
 
-                               Ariadne::UI::Button::Component.new(**options)
-                             }
+          Ariadne::UI::Button::Component.new(**options)
+        }
 
         accepts_html_attributes do |html_attrs|
           html_attrs[:id] ||= target_id
           html_attrs[:popover] = ""
 
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style, html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
 
           # requires CSS Anchor Positioning
           # as a `style` to account for future feature where the popover can be moved
           # html_attrs[:style] = "inset: unset; top: anchor(--popover-#{target_id} bottom); right: anchor(--popover-#{target_id} left, -1rem);"
 
-          @stimulus_controllers =
-            [stimulus_name, html_attrs.fetch(:data, {}).delete(:controller)].compact.join(" ")
+          @stimulus_controllers = [stimulus_name, html_attrs.fetch(:data, {}).delete(:controller)].compact.join(" ")
 
           html_attrs[:data] ||= {}
           html_attrs[:data] = {
@@ -67,10 +76,6 @@ module Ariadne
           placement
         end
 
-        def target_id
-          @target_id ||= ::Ariadne::ViewHelper.generate_id
-        end
-
         style do
           base do
             [
@@ -78,8 +83,8 @@ module Ariadne
               "ariadne-z-20",
               "ariadne-rounded-lg",
               "ariadne-shadow-lg",
-              "ariadne-bg-foreground",
-              "dark:ariadne-bg-foreground-dark",
+              "ariadne-bg-popover",
+              "dark:ariadne-bg-popover-dark",
             ]
           end
         end

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

@@ -0,0 +1 @@
+<relative-time <%= html_attributes %>><%= @datetime.strftime("%B %-d, %Y %H:%M") %></relative-time>

data/app/components/ariadne/ui/{time_ago → relative_time}/component.rb

@@ -3,7 +3,7 @@
 
 module Ariadne
   module UI
-    module TimeAgo
+    module RelativeTime
       # Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.
       class Component < Ariadne::BaseComponent
         include FetchOrFallbackHelper
@@ -88,33 +88,33 @@ module Ariadne
 
         # @param datetime [Time] The time to be formatted.
         option :datetime
-        # @param tense [Symbol] Which tense to use. <%= one_of(Primer::Beta::RelativeTime::TENSE_OPTIONS) %>
+        # @param tense [Symbol] (TENSE_DEFAULT) Which tense to use. <%= one_of(Ariadne::UI::RelativeTime::Component::TENSE_OPTIONS) %>
         option :tense, default: -> { TENSE_DEFAULT }
-        # @param prefix [sring] What to prefix the relative time display with.
+        # @param prefix [String] What to prefix the relative time display with.
         option :prefix, default: -> { nil }
-        # @param second [Symbol] What format seconds should take. <%= one_of(Primer::Beta::RelativeTime::SECOND_OPTIONS) %>
+        # @param second [Symbol] (SECOND_DEFAULT) What format seconds should take. <%= one_of(Ariadne::UI::RelativeTime::Component::SECOND_OPTIONS) %>
         option :second, default: -> { SECOND_DEFAULT }
-        # @param minute [Symbol] What format minues should take. <%= one_of(Primer::Beta::RelativeTime::MINUTE_OPTIONS) %>
+        # @param minute [Symbol] (MINUTE_DEFAULT) What format minues should take. <%= one_of(Ariadne::UI::RelativeTime::Component::MINUTE_OPTIONS) %>
         option :minute, default: -> { MINUTE_DEFAULT }
-        # @param hour [Symbol] What format hours should take. <%= one_of(Primer::Beta::RelativeTime::HOUR_OPTIONS) %>
+        # @param hour [Symbol] (HOUR_DEFAULT) What format hours should take. <%= one_of(Ariadne::UI::RelativeTime::Component::HOUR_OPTIONS) %>
         option :hour, default: -> { HOUR_DEFAULT }
-        # @param weekday [Symbol] What format weekdays should take. <%= one_of(Primer::Beta::RelativeTime::WEEKDAY_OPTIONS) %>
+        # @param weekday [Symbol] (WEEKDAY_DEFAULT) What format weekdays should take. <%= one_of(Ariadne::UI::RelativeTime::Component::WEEKDAY_OPTIONS) %>
         option :weekday, default: -> { WEEKDAY_DEFAULT }
-        # @param day [Symbol] What format days should take. <%= one_of(Primer::Beta::RelativeTime::DAY_OPTIONS) %>
+        # @param day [Symbol] (DAY_DEFAULT) What format days should take. <%= one_of(Ariadne::UI::RelativeTime::Component::DAY_OPTIONS) %>
         option :day, default: -> { DAY_DEFAULT }
-        # @param month [Symbol] What format months should take. <%= one_of(Primer::Beta::RelativeTime::MONTH_OPTIONS) %>
+        # @param month [Symbol] (MONTH_DEFAULT) What format months should take. <%= one_of(Ariadne::UI::RelativeTime::Component::MONTH_OPTIONS) %>
         option :month, default: -> { MONTH_DEFAULT }
-        # @param year [Symbol] What format years should take. <%= one_of(Primer::Beta::RelativeTime::YEAR_OPTIONS) %>
+        # @param year [Symbol] (YEAR_DEFAULT) What format years should take. <%= one_of(Ariadne::UI::RelativeTime::Component::YEAR_OPTIONS) %>
         option :year, default: -> { YEAR_DEFAULT }
-        # @param time_zone_name [Symbol] What format the time zone should take. <%= one_of(Primer::Beta::RelativeTime::TIMEZONENAME_OPTIONS) %>
+        # @param time_zone_name [Symbol] (TIMEZONENAME_DEFAULT) What format the time zone should take. <%= one_of(Ariadne::UI::RelativeTime::Component::TIMEZONENAME_OPTIONS) %>
         option :time_zone_name, default: -> { TIMEZONENAME_DEFAULT }
         # @param threshold [String] The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute.
         option :threshold, default: -> { nil }
-        # @param precision [Symbol] The precision elapsed time should display. <%= one_of(Primer::Beta::RelativeTime::PRECISION_OPTIONS) %>
+        # @param precision [Symbol] (PRECISION_DEFAULT) The precision elapsed time should display. <%= one_of(Ariadne::UI::RelativeTime::Component::PRECISION_OPTIONS) %>
         option :precision, default: -> { PRECISION_DEFAULT }
-        # @param format [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_OPTIONS) %>
+        # @param format [Symbol] (FORMAT_DEFAULT) The format the display should take. <%= one_of(Ariadne::UI::RelativeTime::Component::FORMAT_OPTIONS) %>
         option :format, default: -> { FORMAT_DEFAULT }
-        # @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
+        # @param format_style [Symbol] (FORMAT_STYLE_DEFAULT) The format the display should take. <%= one_of(Ariadne::UI::RelativeTime::Component::FORMAT_STYLE_OPTIONS) %>
         option :format_style, default: -> { FORMAT_STYLE_DEFAULT }
         # @param lang [String] The language to use.
         option :lang, default: -> { nil }
@@ -144,7 +144,7 @@ module Ariadne
           if datetime.respond_to?(:iso8601)
             @datetime = datetime
             html_attrs[:datetime] = datetime.iso8601
-          elsif datetime.present?
+          else
             @datetime = Time.iso8601(datetime)
             html_attrs[:datetime] = @datetime
           end

data/app/components/ariadne/ui/{time_ago → relative_time}/component.ts

@@ -1,6 +1,6 @@
 import '@github/relative-time-element'
 import {controllerFactory} from '@utils/createController'
 
-export default class TimeAgoController extends controllerFactory<HTMLDetailsElement>()({
+export default class RealativeTimeController extends controllerFactory<HTMLDetailsElement>()({
   targets: {},
 }) {}

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

@@ -1,5 +1,4 @@
 <span class="ariadne-inline-flex ariadne-items-center ariadne-gap-2">
-  <span><%= text %></span>
   <kbd data-controller='<%= stimulus_name %>' <%= html_attributes %>>
   <% keys.each_with_index do |key, index| %>
     <% if special_keys.include? key.downcase %>

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

@@ -4,17 +4,21 @@
 module Ariadne
   module UI
     module Shortcut
+      # This component stylizes a keyboard shortcut.
       class Component < Ariadne::BaseComponent
+        DEFAULT_SIZE = :md
         SPECIAL_KEYS = ["alt", "shift", "ctrl"]
 
-        option :text, default: proc { "" }
+        # @param keys [Array<String>] The keys to display as a shortcut.
         option :keys
-        option :size, default: proc { :base }
+
+        # @param [Symbol] size (Ariadne::UI::Shortcut::DEFAULT_SIZE) The size of the shortcut. <%= one_of(Ariadne::SizeHelper::VALID_SIZES) %>
+        option :size, default: proc { DEFAULT_SIZE }
 
         def special_keys = SPECIAL_KEYS
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:key, size:), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(:key, size:), html_attrs[:class]].join(" "))
         end
 
         style do
@@ -30,7 +34,21 @@ module Ariadne
 
         style :key do
           base do
-            ["ariadne-font-mono"]
+            [
+              "ariadne-font-mono",
+              "ariadne-px-2",
+              "ariadne-py-1.5",
+              "ariadne-text-xs",
+              "ariadne-font-semibold",
+              "ariadne-text-gray-800",
+              "ariadne-bg-neutral-50",
+              "ariadne-border",
+              "ariadne-border-gray-200",
+              "ariadne-rounded-lg",
+              "ariadne-dark:bg-neutral-600",
+              "ariadne-dark:text-gray-100",
+              "ariadne-dark:border-gray-500",
+            ]
           end
 
           variants do
@@ -43,9 +61,17 @@ module Ariadne
                 ["ariadne-text-sm", "ariadne-px-1.5", "ariadne-rounded"]
               end
 
-              base do
+              md do
                 ["ariadne-text-base", "ariadne-px-1.5", "ariadne-rounded-md"]
               end
+
+              lg do
+                ["ariadne-text-base", "ariadne-px-2", "ariadne-rounded-lg"]
+              end
+
+              xl do
+                ["ariadne-text-base", "ariadne-px-3", "ariadne-rounded-xl"]
+              end
             end
           end
         end

data/app/components/ariadne/ui/shortcut/component.ts

@@ -16,10 +16,10 @@ export default class extends controllerFactory()({
   }
 
   connect() {
+    this.replaceSymbol(this.shiftTargets, '⇧')
     if (isMac()) {
       this.replaceSymbol(this.ctrlTargets, '⌘')
       this.replaceSymbol(this.altTargets, '⌥')
-      this.replaceSymbol(this.shiftTargets, '⇧')
     }
   }
 }

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

@@ -4,11 +4,10 @@
 module Ariadne
   module UI
     module Skeleton
+      # Use this to show a placeholder while content is loading.
       class Component < Ariadne::BaseComponent
-        option :size, default: proc { :base }
-
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(size:), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
         end
 
         def before_render
@@ -32,11 +31,6 @@ module Ariadne
           end
 
           variants do
-            size do
-              base do
-                []
-              end
-            end
           end
         end
       end

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

@@ -1,7 +1,7 @@
-<dl class="flex flex-wrap space-x-2 divide-x divide-slate-100 dark:divide-slate-800">
-  <% stats.each_with_index do |stat, index| %>
+<dl class="<%= html_attrs[:class]%>" <%= html_attributes %>>
+  <% stat_items.each_with_index do |stat_item, index| %>
     <span class="flex-1 <%= 'pl-2' if index > 0 %>">
-      <%= render stat %>
+      <%= render stat_item %>
     </span>
   <% end %>
 </dl>

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

@@ -4,8 +4,32 @@
 module Ariadne
   module UI
     module StatsPanel
+      # Arranges a collection of stats in a horizontal grid.
       class Component < Ariadne::BaseComponent
-        renders_many :stats, Item::Component
+        # Renders a stat item.
+        #
+        # @param options [Hash] Same arguments as <%= link_to_component(Ariadne::UI::StatsPanel::Item::Component) %>.
+        renders_many :stat_items, Item::Component
+
+        accepts_html_attributes do |html_attrs|
+          html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
+        end
+
+        style do
+          base do
+            [
+              "ariadne-flex",
+              "ariadne-flex-wrap",
+              "ariadne-space-x-2",
+              "ariadne-divide-x",
+              "ariadne-divide-slate-100",
+              "dark:ariadne-divide-slate-800",
+            ]
+          end
+
+          variants do
+          end
+        end
       end
     end
   end

data/app/components/ariadne/ui/stats_panel/item/component.html.erb

@@ -1,4 +1,4 @@
-<span class="flex flex-col-reverse">
-  <dt class="text-zinc-600 dark:text-zinc-400 text-xs"><%= label %></dt>
-  <dd class="<%= style(theme: ) %>"><%= content %></dd>
+<span class="ariadne-flex ariadne-flex-col-reverse">
+  <dt class="ariadne-text-zinc-600 dark:ariadne-text-zinc-400 ariadne-text-xs"><%= label %></dt>
+  <dd class="<%= html_attrs[:class] %>"><%= content %></dd>
 </span>

data/app/components/ariadne/ui/stats_panel/item/component.rb

@@ -5,19 +5,19 @@ module Ariadne
   module UI
     module StatsPanel
       module Item
+        # Renders a stat item.
         class Component < Ariadne::BaseComponent
-          option :theme, default: proc { :default }
+          # @param [String] label Indicates the text to display beneath the stat
           option :label
 
+          accepts_html_attributes do |html_attrs|
+            html_attrs[:class] = merge_tailwind_classes([style, html_attrs[:class]].join(" "))
+          end
+
           style do
             base { ["text-number-lg-smb"] }
 
             variants do
-              theme do
-                default { [] }
-                success { ["ariadne-text-emerald-600", "dark:ariadne-text-emerald-400"] }
-                danger { ["ariadne-text-red-600", "dark:ariadne-text-red-400"] }
-              end
             end
           end
         end

data/app/components/ariadne/ui/table/cell/component.rb

@@ -9,7 +9,7 @@ module Ariadne
           attr_accessor :context
 
           accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:cell), html_attrs[:class]].join(" "))
+            html_attrs[:class] = merge_tailwind_classes([style(:cell), html_attrs[:class]].join(" "))
           end
 
           def tag_name

data/app/components/ariadne/ui/table/row/component.rb

@@ -12,7 +12,7 @@ module Ariadne
           renders_many :cells, Ariadne::UI::Table::Cell::Component
 
           accepts_html_attributes do |html_attrs|
-            html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(:row), html_attrs[:class]].join(" "))
+            html_attrs[:class] = merge_tailwind_classes([style(:row), html_attrs[:class]].join(" "))
           end
 
           style :row do

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

@@ -4,13 +4,15 @@
 module Ariadne
   module UI
     module Typography
+      VALID_TYPES = [:title, :heading, :subheading, :ann, :lede, :code].freeze
+
       class Component < Ariadne::BaseComponent
         option :tag, optional: true
         option :type
         option :size, optional: true
 
         accepts_html_attributes do |html_attrs|
-          html_attrs[:class] = Ariadne::ViewComponents.tailwind_merger.merge([style(type:, size:), html_attrs[:class]].join(" "))
+          html_attrs[:class] = merge_tailwind_classes([style(type:, size:), html_attrs[:class]].join(" "))
         end
 
         def tag_name

data/app/frontend/controllers/tooltip_controller.ts

@@ -1,5 +1,9 @@
 import {controllerFactory} from '@utils/createController'
-import {computePosition, arrow, offset, flip, shift} from '@floating-ui/dom'
+import {computePosition, arrow, offset, flip} from '@floating-ui/dom'
+
+
+const TRIANGLE_HEIGHT = 6
+const DEFAULT_OFFSET = 4;
 
 export default class TooltipController extends controllerFactory<HTMLElement>()({
   targets: {
@@ -7,16 +11,17 @@ export default class TooltipController extends controllerFactory<HTMLElement>()(
     wrapper: HTMLDivElement,
     tooltip: HTMLDivElement,
     arrow: HTMLDivElement,
+    text: HTMLSpanElement,
   },
 }) {
   async update() {
     computePosition(this.activatorTarget, this.tooltipTarget, {
       placement: 'top',
-      middleware: [offset(10), flip(), shift({padding: 5}), arrow({element: this.arrowTarget})],
+      middleware: [flip({ padding: 12 }), offset(TRIANGLE_HEIGHT + DEFAULT_OFFSET), arrow({element: this.arrowTarget})],
       // eslint-disable-next-line github/no-then
     }).then(({x, y, placement, middlewareData}) => {
       Object.assign(this.tooltipTarget.style, {
-        left: `${x}px`,
+        left: `0px`,
         top: `${y}px`,
       })
 

data/app/frontend/stylesheets/ariadne_view_components.css

@@ -1,4 +1,5 @@
 @import 'scrollbar.css';
+@import 'theme.css';
 
 @tailwind base;
 @tailwind components;