ariadne_view_components 0.0.4 → 0.0.5

data/app/components/ariadne/tooltip_component.rb

@@ -24,82 +24,85 @@ module Ariadne
   #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
   #   This type is usually only appropriate for an icon-only control.
   class TooltipComponent < Ariadne::Component
-    DIRECTION_DEFAULT = :s
-    DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
+    DEFAULT_TAG = :tooltip
+    DEFAULT_PLACEMENT = :top
+    VALID_PLACEMENTS = [DEFAULT_PLACEMENT, :right, :bottom, :left].freeze
+
+    DEFAULT_CLASSES = "invisible absolute bg-slate-900 text-white font-semibold max-w-xs py-1 px-2 rounded z-max"
+
+    DATA_CONTROLLER = "tooltip-component"
+    DATA_ACTION = "mouseover->tooltip-component#show mouseout->tooltip-component#hide"
 
     TYPE_DEFAULT = :description
     TYPE_OPTIONS = [:label, TYPE_DEFAULT].freeze
+
+    # DEFAULT_DATA_ATTRIBUTES = {
+    #   "data-controller": DATA_CONTROLLER,
+    #   "data-action": "mouseover->tooltip-component#show mouseout->tooltip-component#hide",
+    #   "data-tooltip-component-placement": DEFAULT_PLACEMENT,
+    # }
+
     # @example As a description for an icon-only button
     #   @description
     #     If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
     #     The trigger element should also have a _concise_ accessible label via `aria-label`.
     #   @code
     #     <%= render(Ariadne::HeroiconComponent.new(icon: :moon, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE, attributes: { id: "bold-button-0" })) %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for: "bold-button-0" }, type: :description, text: "Add bold text", direction: :ne)) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :top)) %>
     # @example As a label for an icon-only button
     #   @description
     #     If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
     #   @code
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "like-button"})) { "👍" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "like-button" }, type: :label, text: "Like", direction: :n)) %>
+    #     <%= render(Ariadne::ButtonComponent.new(attributes: { id: "like-button" })) { "👍" } %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "like-button", type: :label, text: "Like", direction: :top)) %>
     #
     # @example As a description for a button with visible label
     #   @description
     #     If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
     #   @code
     #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "save-button"}, scheme: :success)) { "Save" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "save-button"}, type: :description, text: "This will immediately impact all organization members", direction: :ne)) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :right)) %>
     # @example With direction
     #   @description
     #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
     #   @code
     #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "North", m: 2})) { "North" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "North"}, type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :n)) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :top)) %>
     #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "South", m: 2})) { "South" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "South"}, type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :s)) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :bottom)) %>
     #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "East", m: 2})) { "East" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "East"}, type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :e)) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :right)) %>
     #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "West", m: 2})) { "West" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "West"}, type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :w)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Northeast", m: 2})) { "Northeast" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Northeast"}, type: :description, text: "This is a Northeast-facing tooltip and is responsive.", direction: :ne)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Southeast", m: 2})) { "Southeast" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Southeast"}, type: :description, text: "This is a Southeast-facing tooltip and is responsive.", direction: :se)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Northwest", m: 2})) { "Northwest" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Northwest"}, type: :description, text: "This is a Northwest-facing tooltip and is responsive.", direction: :nw)) %>
-    #     <%= render(Ariadne::ButtonComponent.new(attributes: {id: "Southwest", m: 2})) { "Southwest" } %>
-    #     <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "Southwest"}, type: :description, text: "This is a Southwest-facing tooltip and is responsive.", direction: :sw)) %>
+    #     <%= render(Ariadne::TooltipComponent.new(for_id: "West""", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :left)) %>
     # @example With relative parent
     #   @description
     #     When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
     #   @code
     #     <span style="position: relative;">
     #       <%= render(Ariadne::ButtonComponent.new(attributes: {id: "test-button"}, scheme: :info)) { "Test" } %>
-    #       <%= render(Ariadne::TooltipComponent.new(attributes: { for:  "test-button" }, type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
+    #       <%= render(Ariadne::TooltipComponent.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :bottom)) %>
     #     </span>
     # @param tag [Symbol, String] The rendered tag name
-    # @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::TYPE_OPTIONS) %>
+    # @param for_id [String] The ID of the element that the tooltip should be attached to.
     # @param text [String] The text content of the tooltip. This should be brief and no longer than a sentence.
-    # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::DIRECTION_OPTIONS) %>
+    # @param type [Symbol] <%= one_of(Ariadne::TooltipComponent::TYPE_OPTIONS) %>
+    # @param direction [Symbol] <%= one_of(Ariadne::TooltipComponent::VALID_PLACEMENTS) %>
     # @param classes [String] <%= link_to_classes_docs %>
     # @param attributes [Hash] <%= link_to_attributes_docs %>
-    def initialize(tag: :"tool-tip", type: TYPE_DEFAULT, text:, direction: DIRECTION_DEFAULT, classes: "", attributes: {})
+    def initialize(tag: DEFAULT_TAG, for_id:, text:, type: TYPE_DEFAULT, direction: DEFAULT_PLACEMENT, classes: "", attributes: {})
       raise TypeError, "tooltip text must be a string" unless text.is_a?(String)
 
-      @tag = check_incoming_tag(:"tool-tip", tag)
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
 
       @text = text
-      @classes = classes
+      @classes = class_names(DEFAULT_CLASSES, classes)
 
       @attributes = attributes
-      @attributes[:hidden] = true
-      @attributes[:visible] ||= false
-      @attributes[:"data-direction"] = fetch_or_raise(DIRECTION_OPTIONS, direction)
-      @attributes[:"data-type"] = fetch_or_raise(TYPE_OPTIONS, type)
-    end
+      @attributes[:for] = for_id
 
-    def call
-      render(Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes)) { @text }
+      @attributes[:"data-tooltip-component-placement"] = fetch_or_raise(VALID_PLACEMENTS, direction)
+      @attributes[:"data-type"] = fetch_or_raise(TYPE_OPTIONS, type)
+      @attributes[:"data-tooltip-component-target"] = "tooltip"
     end
   end
 end

data/app/lib/ariadne/form_builder.rb

@@ -5,7 +5,7 @@ module Ariadne
   class FormBuilder < ActionView::Helpers::FormBuilder
     include ClassNameHelper
 
-    DEFAULT_SECTION_CLASSES = "divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5"
+    DEFAULT_SECTION_CLASSES = "pt-8 space-y-6 sm:pt-10 sm:space-y-5"
     def section(classes: "", attributes: {}, &block)
       actual_classes = class_names(DEFAULT_SECTION_CLASSES, classes)
       options = { class: actual_classes, **attributes }
@@ -13,10 +13,10 @@ module Ariadne
     end
 
     DEFAULT_SECTION_HEADING_CLASSES = "text-lg leading-6 font-medium text-gray-900"
-    def heading(classes: "", attributes: {}, &block)
+    def heading(tag: :h3, classes: "", attributes: {}, &block)
       actual_classes = class_names(DEFAULT_SECTION_HEADING_CLASSES, classes)
       options = { class: actual_classes, **attributes }
-      @template.content_tag(:h3, **options, &block)
+      @template.content_tag(tag, **options, &block)
     end
 
     DEFAULT_SECTION_SUBHEADING_CLASSES = "mt-1 max-w-2xl text-sm text-gray-500"
@@ -26,45 +26,45 @@ module Ariadne
       @template.content_tag(:p, **options, &block)
     end
 
-    DEFAULT_LABEL_CLASSES = "block text-sm font-medium text-gray-700"
-    def label(method, text = nil, options = {}, &block)
-      options[:class] = class_names(DEFAULT_LABEL_CLASSES, options[:class])
-      super(method, **options)
+    DEFAULT_LABEL_CLASSES = "block text-sm font-medium text-gray-700 pl-2"
+    def label(object_name, content, ptions = {}, &block)
+      options[:class] = class_names(DEFAULT_LABEL_CLASSES, options.delete(:classes))
+      super(object_name, content, options, &block)
     end
 
     DEFAULT_TEXT_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
     def text_field(method, options = {})
-      options[:class] = class_names(DEFAULT_TEXT_CLASSES, options[:class])
+      options[:class] = class_names(DEFAULT_TEXT_CLASSES, options.delete(:classes))
       super(method, **options)
     end
 
     DEFAULT_CHECKBOX_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
     def check_box(method, options = {}, checked_value = "1", unchecked_value = "0")
-      options[:class] = class_names(DEFAULT_TEXT_CLASSES, options[:class])
-      super(method, **options)
+      options[:class] = class_names(DEFAULT_CHECKBOX_CLASSES, options.delete(:classes))
+      super(method, options, checked_value, unchecked_value)
     end
 
     DEFAULT_RADIO_CLASSES = "focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
     def radio_button(method, tag_value, options = {})
-      options[:class] = class_names(DEFAULT_RADIO_CLASSES, options[:class])
+      options[:class] = class_names(DEFAULT_RADIO_CLASSES, options.delete(:classes))
       super(method, tag_value, **options)
     end
 
     DEFAULT_TEXTAREA_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border border-gray-300 rounded-md"
     def text_area(method, options = {})
-      options[:class] = class_names(DEFAULT_TEXTAREA_CLASSES, options[:class])
+      options[:class] = class_names(DEFAULT_TEXTAREA_CLASSES, options.delete(:classes))
       super(method, **options)
     end
 
     DEFAULT_EMAIL_CLASSES = "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
     def email_field(method, options = {})
-      options[:class] = class_names(DEFAULT_EMAIL_CLASSES, options[:class])
+      options[:class] = class_names(DEFAULT_EMAIL_CLASSES, options.delete(:classes))
       super(method, **options)
     end
 
     DEFAULT_PASSWORD_CLASSES = "appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
     def password_field(method, options = {})
-      options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options[:class])
+      options[:class] = class_names(DEFAULT_PASSWORD_CLASSES, options.delete(:classes))
       super(method, **options)
     end
   end

data/lib/ariadne/classify.rb

@@ -3,6 +3,8 @@
 require_relative "classify/utilities"
 require_relative "classify/validation"
 
+require "tailwind_merge"
+
 module Ariadne
   # :nodoc:
   class Classify
@@ -110,104 +112,8 @@ module Ariadne
       private def validated_class_names(classes)
         return if classes.blank?
 
-        corrected_classes = correct_classes(classes)
-
-        if raise_on_invalid_options? && !ENV["ARIADNE_WARNINGS_DISABLED"]
-          invalid_class_names =
-            corrected_classes.each_with_object([]) do |class_name, memo|
-              memo << class_name if Ariadne::Classify::Validation.invalid?(class_name)
-            end
-
-          # TODO: implement this
-          if invalid_class_names.any?
-            # raise ArgumentError, <<~MSG
-            #   Use Tailwind CSS class names instead of your own #{"name".pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}.
-            #   Set ARIADNE_WARNINGS_DISABLED=1 to disable this warning.
-            # MSG
-          end
-        end
-
-        corrected_classes.join(" ")
-      end
-
-      # TODO: automate this, ugh. peek at utilities.yml
-      BG_PREFIX = /^bg-/.freeze
-      BG_PSEUDO_PREFIX = /^\S+:bg-/.freeze
-      BORDER_PREFIX = /^border-/.freeze
-      BORDER_PSEUDO_PREFIX = /^\S+:border-/.freeze
-      TEXT_ASPECT_PREFIX = /^text-\S+-/.freeze
-      TEXT_ASPECT_PSEUDO_PREFIX = /^\S+:text-\S+-/.freeze
-      TEXT_PREFIX = /^text-/.freeze
-      TEXT_PSEUDO_PREFIX = /^\S+:text-/.freeze
-
-      BORDER_STATE_PREFIX = /^border-state-/.freeze
-      BORDER_SIDE_PREFIX = /^border-.(?:-)?/.freeze
-
-      # TODO: TEST!
-      private def correct_classes(classes)
-        matched_bg = ""
-        matched_bg_pseudo = {}
-        matched_border = ""
-        matched_border_pseudo = {}
-        matched_text_aspect = {}
-        matched_text_aspect_pseudo = {}
-        matched_text = ""
-        matched_text_pseudo = {}
-
-        classes.split(" ").reverse.each_with_object([]) do |c, memo|
-          next if c.blank?
-
-          class_name = c.strip
-
-          if class_name.match(BG_PREFIX)
-            next if matched_bg.present?
-
-            memo << matched_bg = class_name
-          elsif class_name.match(BG_PSEUDO_PREFIX)
-            next if matched_bg_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_bg_pseudo[class_name] = true
-            memo << class_name
-
-          elsif class_name.match(BORDER_PREFIX)
-            next if matched_border.present?
-
-            if class_name.match(BORDER_STATE_PREFIX) || class_name.match(BORDER_SIDE_PREFIX)
-              memo << class_name
-              next
-            end
-
-            memo << matched_border = class_name
-          elsif class_name.match(BORDER_PSEUDO_PREFIX)
-            next if matched_border_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_border_pseudo[class_name] = true
-            memo << class_name
-
-          elsif class_name.match(TEXT_ASPECT_PREFIX)
-            next if matched_text_aspect.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_text_aspect[class_name] = true
-            memo << class_name
-          elsif class_name.match(TEXT_ASPECT_PSEUDO_PREFIX)
-            next if matched_text_aspect_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_text_aspect_pseudo[class_name] = true
-            memo << class_name
-
-          elsif class_name.match(TEXT_PREFIX)
-            next if matched_text.present?
-
-            memo << matched_text = class_name
-          elsif class_name.match(TEXT_PSEUDO_PREFIX)
-            next if matched_text_pseudo.keys.any? { |m| m.start_with?(class_name.split(":").first) }
-
-            matched_text_pseudo[class_name] = true
-            memo << class_name
-          else
-            memo << class_name
-          end
-        end.uniq.reverse
+        # TODO: obviously instantiate this
+        TailwindMerge::Merger.new.merge(classes)
       end
 
       private def raise_on_invalid_options?

data/lib/ariadne/view_components/version.rb

@@ -2,6 +2,6 @@
 
 module Ariadne
   module ViewComponents
-    VERSION = "0.0.4"
+    VERSION = "0.0.5"
   end
 end

data/lib/ariadne/view_components.rb

@@ -15,45 +15,47 @@ module Ariadne
       audited_at: "audited_at.json",
     }.freeze
 
-    # generate_statuses returns a hash mapping component name to
-    # the component's status sorted alphabetically by the component name.
-    def self.generate_statuses
-      Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
-        mem[component.to_s] = component.status.to_s
+    class << self
+      # generate_statuses returns a hash mapping component name to
+      # the component's status sorted alphabetically by the component name.
+      def generate_statuses
+        Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+          mem[component.to_s] = component.status.to_s
+        end
       end
-    end
 
-    # generate_audited_at returns a hash mapping component name to
-    # the day the component has passed an accessibility audit.
-    def self.generate_audited_at
-      Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
-        mem[component.to_s] = component.audited_at.to_s
+      # generate_audited_at returns a hash mapping component name to
+      # the day the component has passed an accessibility audit.
+      def generate_audited_at
+        Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+          mem[component.to_s] = component.audited_at.to_s
+        end
       end
-    end
 
-    # generate_constants returns a hash mapping component name to
-    # all of its constants.
-    def self.generate_constants
-      Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
-        mem[component.to_s] = component.constants(false).sort.each_with_object({}) do |constant, h|
-          h[constant] = component.const_get(constant)
+      # generate_constants returns a hash mapping component name to
+      # all of its constants.
+      def generate_constants
+        Ariadne::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+          mem[component.to_s] = component.constants(false).sort.each_with_object({}) do |constant, h|
+            h[constant] = component.const_get(constant)
+          end
         end
       end
-    end
 
-    # dump generates the requested stat hash and outputs it to a file.
-    def self.dump(stats)
-      require "json"
+      # dump generates the requested stat hash and outputs it to a file.
+      def dump(stats)
+        require "json"
 
-      File.open(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]), "w") do |f|
-        f.write(JSON.pretty_generate(send("generate_#{stats}")))
-        f.write($INPUT_RECORD_SEPARATOR)
+        File.open(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]), "w") do |f|
+          f.write(JSON.pretty_generate(send("generate_#{stats}")))
+          f.write($INPUT_RECORD_SEPARATOR)
+        end
       end
-    end
 
-    # read returns a JSON string matching the output of the corresponding stat.
-    def self.read(stats)
-      File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
+      # read returns a JSON string matching the output of the corresponding stat.
+      def read(stats)
+        File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
+      end
     end
   end
 end

data/lib/rubocop/cop/ariadne/ariadne_heroicon.rb

@@ -113,7 +113,7 @@ module RuboCop
             if size.between?(10, 16)
               ""
             elsif size.between?(22, 26)
-              ":m"
+              :md
             else
               size
             end
@@ -209,7 +209,7 @@ module RuboCop
           # No arguments if they map to the default size
           return if size_attributes.blank? || size_attributes.values.all?(&:blank?)
           # Return mapped argument to `size`
-          return "size: :m" if size_attributes.values.any?(":m")
+          return "size: :md" if size_attributes.values.any?(:md)
 
           size_attributes.map do |key, value|
             "#{key}: #{value}"

data/lib/tasks/docs.rake

@@ -47,6 +47,9 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
+      Ariadne::FlexComponent,
+      Ariadne::CommentComponent,
+      Ariadne::BodyComponent,
       Ariadne::BlankslateComponent,
       Ariadne::BaseButton,
       Ariadne::ButtonComponent,
@@ -63,6 +66,7 @@ namespace :docs do
       Ariadne::InlineFlexComponent,
       Ariadne::LinkComponent,
       Ariadne::ListComponent,
+      Ariadne::MainComponent,
       Ariadne::PillComponent,
       Ariadne::SlideoverComponent,
       Ariadne::Text,

data/static/arguments.yml

@@ -12,8 +12,8 @@
     description: One of `:button`, `:reset`, or `:submit`.
   - name: size
     type: Symbol
-    default: "`:m`"
-    description: One of `:l`, `:m`, `:s`, `:xl`, or `:xs`.
+    default: "`:md`"
+    description: One of `:lg`, `:md`, `:sm`, `:xl`, or `:xs`.
   - name: classes
     type: String
     default: '`""`'
@@ -37,6 +37,17 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: Body
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/body_component.rb
+  parameters:
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Button
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/button_component.rb
   parameters:
@@ -55,7 +66,7 @@
   - name: size
     type: Symbol
     default: "`BaseButton::DEFAULT_SIZE`"
-    description: One of `:l`, `:m`, `:s`, `:xl`, or `:xs`.
+    description: One of `:lg`, `:md`, `:sm`, `:xl`, or `:xs`.
   - name: type
     type: Symbol
     default: "`:button`"
@@ -83,6 +94,10 @@
     type: String
     default: '`""`'
     description: Text to copy into the users clipboard when they click the component.
+  - name: for_id
+    type: String
+    default: "`nil`"
+    description: If `value` is not provided, the element with this id will be copied.
   - name: aria_label
     type: String
     default: '`""`'
@@ -92,6 +107,21 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: Comment
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/comment_component.rb
+  parameters:
+  - name: action
+    type: String
+    default: N/A
+    description: The action to take when the form is submitted.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Container
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/container_component.rb
   parameters:
@@ -167,6 +197,25 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: Flex
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/flex_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:div`"
+    description: The rendered tag name.
+  - name: type
+    type: Symbol
+    default: N/A
+    description: One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Footer
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/footer_component.rb
   parameters:
@@ -236,12 +285,20 @@
     description: One of `outline` and `solid`.
   - name: size
     type: Symbol
-    default: "`:s`"
-    description: One of `:s` (`16`) and `:m` (`24`).
+    default: "`:sm`"
+    description: One of `:sm` (`16`), `:md` (`24`), or `:lg` (`128`).
   - name: attributes
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+  - name: text_classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: text_attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Image
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/image_component.rb
   parameters:
@@ -295,6 +352,10 @@
     type: String
     default: N/A
     description: URL to be used for the link.
+  - name: actionable
+    type: Boolean
+    default: "`false`"
+    description: If true, adds additional classes to the link to make it more aware.
   - name: classes
     type: String
     default: '`""`'
@@ -314,6 +375,17 @@
     type: Hash
     default: "`{}`"
     description: "[Classes and attributes](/classes-attributes)"
+- component: Main
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/main_component.rb
+  parameters:
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
 - component: Pill
   source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/pill_component.rb
   parameters:
@@ -343,7 +415,7 @@
   - name: direction
     type: Symbol
     default: N/A
-    description: One of `:x` and `:y`.
+    description: One of `:xl` and `:yd`.
   - name: form_id
     type: String
     default: "`nil`"
@@ -423,21 +495,25 @@
   parameters:
   - name: tag
     type: Symbol, String
-    default: '`:"tool-tip"`'
+    default: "`:tooltip`"
     description: The rendered tag name
-  - name: type
-    type: Symbol
-    default: "`:description`"
-    description: One of `:description` and `:label`.
+  - name: for_id
+    type: String
+    default: N/A
+    description: The ID of the element that the tooltip should be attached to.
   - name: text
     type: String
     default: N/A
     description: The text content of the tooltip. This should be brief and no longer
       than a sentence.
+  - name: type
+    type: Symbol
+    default: "`:description`"
+    description: One of `:description` and `:label`.
   - name: direction
     type: Symbol
-    default: "`:s`"
-    description: One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.
+    default: "`:top`"
+    description: One of `:bottom`, `:left`, `:right`, or `:top`.
   - name: classes
     type: String
     default: '`""`'

data/static/audited_at.json

@@ -2,12 +2,15 @@
   "Ariadne::BaseButton": "",
   "Ariadne::BaseComponent": "",
   "Ariadne::BlankslateComponent": "",
+  "Ariadne::BodyComponent": "",
   "Ariadne::ButtonComponent": "",
   "Ariadne::ClipboardCopyComponent": "",
+  "Ariadne::CommentComponent": "",
   "Ariadne::ContainerComponent": "",
   "Ariadne::Content": "",
   "Ariadne::CounterComponent": "",
   "Ariadne::FlashComponent": "",
+  "Ariadne::FlexComponent": "",
   "Ariadne::FooterComponent": "",
   "Ariadne::GridComponent": "",
   "Ariadne::GridComponent::Item": "",
@@ -19,6 +22,7 @@
   "Ariadne::LinkComponent": "",
   "Ariadne::ListComponent": "",
   "Ariadne::ListComponent::Item": "",
+  "Ariadne::MainComponent": "",
   "Ariadne::PillComponent": "",
   "Ariadne::SlideoverComponent": "",
   "Ariadne::Text": "",