fernandes-ui 0.1.0

data/app/behaviors/ui/dropdown_menu_sub_behavior.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+    # DropdownMenuSubBehavior
+    #
+    # Shared behavior for DropdownMenuSub component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuSubBehavior
+      # Returns HTML attributes for the submenu container
+      def dropdown_menu_sub_html_attributes
+        {
+          class: dropdown_menu_sub_classes
+        }
+      end
+
+      # Returns combined CSS classes for the submenu container
+      def dropdown_menu_sub_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "relative"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/dropdown_menu_sub_content_behavior.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+    # DropdownMenuSubContentBehavior
+    #
+    # Shared behavior for DropdownMenuSubContent component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuSubContentBehavior
+      # Returns HTML attributes for the sub content
+      def dropdown_menu_sub_content_html_attributes
+        {
+          class: dropdown_menu_sub_content_classes,
+          data: dropdown_menu_sub_content_data_attributes,
+          role: "menu",
+          tabindex: "-1"
+        }
+      end
+
+      # Returns combined CSS classes for the sub content
+      def dropdown_menu_sub_content_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[11rem] origin-(--ui-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg absolute"
+
+        TailwindMerge::Merger.new.merge([
+          "hidden absolute",
+          base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus
+      def dropdown_menu_sub_content_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          state: "closed",
+          side: @side || "right",
+          align: @align || "start"
+        })
+      end
+    end

data/app/behaviors/ui/dropdown_menu_sub_trigger_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+    # DropdownMenuSubTriggerBehavior
+    #
+    # Shared behavior for DropdownMenuSubTrigger component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuSubTriggerBehavior
+      # Returns HTML attributes for the submenu trigger
+      def dropdown_menu_sub_trigger_html_attributes
+        {
+          class: dropdown_menu_sub_trigger_classes,
+          data: dropdown_menu_sub_trigger_data_attributes,
+          role: "menuitem",
+          tabindex: "-1"
+        }
+      end
+
+      # Returns combined CSS classes for the submenu trigger
+      def dropdown_menu_sub_trigger_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[state=open]:bg-accent data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus
+      def dropdown_menu_sub_trigger_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--dropdown-target": "item",
+          action: "mouseenter->ui--dropdown#openSubmenu mouseleave->ui--dropdown#closeSubmenu",
+          inset: @inset,
+          state: "closed"
+        })
+      end
+    end

data/app/behaviors/ui/dropdown_menu_trigger_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+    # DropdownMenuTriggerBehavior
+    #
+    # Shared behavior for DropdownMenuTrigger component across ERB, ViewComponent, and Phlex implementations.
+    module UI::DropdownMenuTriggerBehavior
+      # Returns HTML attributes for the trigger
+      # When as_child is true, only data attributes are returned to avoid overriding child's classes
+      def dropdown_menu_trigger_html_attributes
+        attrs = {
+          data: dropdown_menu_trigger_data_attributes,
+          tabindex: "0",
+          role: "button",
+          "aria-haspopup": "menu"
+        }
+
+        # Only include class if it's not empty (to avoid overriding child component's classes)
+        trigger_classes = dropdown_menu_trigger_classes
+        attrs[:class] = trigger_classes unless trigger_classes.blank?
+
+        attrs
+      end
+
+      # Returns combined CSS classes for the trigger
+      def dropdown_menu_trigger_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          dropdown_menu_trigger_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Base classes for trigger (focus styles)
+      def dropdown_menu_trigger_base_classes
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
+      end
+
+      # Returns data attributes for Stimulus
+      def dropdown_menu_trigger_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--dropdown-target": "trigger",
+          action: "click->ui--dropdown#toggle keydown.enter->ui--dropdown#toggle keydown.space->ui--dropdown#toggle"
+        })
+      end
+    end

data/app/behaviors/ui/empty_behavior.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+module UI
+  # EmptyBehavior - Shared behavior for Empty component
+  module EmptyBehavior
+    def empty_html_attributes
+      {
+        class: empty_classes,
+        data: { slot: "empty" }
+      }
+    end
+
+    def empty_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyHeaderBehavior - Shared behavior for EmptyHeader sub-component
+  module EmptyHeaderBehavior
+    def empty_header_html_attributes
+      {
+        class: empty_header_classes,
+        data: { slot: "empty-header" }
+      }
+    end
+
+    def empty_header_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyMediaBehavior - Shared behavior for EmptyMedia sub-component
+  module EmptyMediaBehavior
+    def empty_media_html_attributes
+      {
+        class: empty_media_classes,
+        data: { slot: "empty-media" }
+      }
+    end
+
+    def empty_media_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      variant_value = @variant.to_s
+
+      TailwindMerge::Merger.new.merge([
+        "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        empty_media_variant_classes(variant_value),
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    def empty_media_variant_classes(variant)
+      case variant
+      when "icon"
+        "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+      else # "default"
+        "bg-transparent"
+      end
+    end
+  end
+
+  # EmptyTitleBehavior - Shared behavior for EmptyTitle sub-component
+  module EmptyTitleBehavior
+    def empty_title_html_attributes
+      {
+        class: empty_title_classes,
+        data: { slot: "empty-title" }
+      }
+    end
+
+    def empty_title_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "font-semibold tracking-tight text-base",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyDescriptionBehavior - Shared behavior for EmptyDescription sub-component
+  module EmptyDescriptionBehavior
+    def empty_description_html_attributes
+      {
+        class: empty_description_classes,
+        data: { slot: "empty-description" }
+      }
+    end
+
+    def empty_description_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        "text-sm text-muted-foreground",
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+
+  # EmptyContentBehavior - Shared behavior for EmptyContent sub-component
+  module EmptyContentBehavior
+    def empty_content_html_attributes
+      {
+        class: empty_content_classes,
+        data: { slot: "empty-content" }
+      }
+    end
+
+    def empty_content_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        classes_value
+      ].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/field_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldBehavior
+  #
+  # Shared behavior for Field component across ERB, ViewComponent, and Phlex implementations.
+  # Field is the core wrapper for a single form field with support for different orientations.
+  module FieldBehavior
+    # Returns HTML attributes for the field wrapper element
+    def field_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        role: "group",
+        class: field_classes,
+        "data-slot": "field",
+        "data-orientation": @orientation,
+        "data-invalid": @data_invalid
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field
+    def field_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "group/field flex w-full gap-3 data-[invalid=true]:text-destructive"
+      orientation = field_orientation_classes
+
+      TailwindMerge::Merger.new.merge([base, orientation, classes_value].compact.join(" "))
+    end
+
+    private
+
+    # Returns orientation-specific classes
+    def field_orientation_classes
+      case @orientation.to_s
+      when "vertical"
+        "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
+      when "horizontal"
+        "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      when "responsive"
+        "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      else
+        "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
+      end
+    end
+  end
+end

data/app/behaviors/ui/field_content_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldContentBehavior
+  #
+  # Shared behavior for FieldContent component across ERB, ViewComponent, and Phlex implementations.
+  # FieldContent is a flex column that groups control and descriptions.
+  module FieldContentBehavior
+    # Returns HTML attributes for the field content wrapper element
+    def field_content_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        "data-slot": "field-content",
+        class: field_content_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field content
+    def field_content_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "group/field-content flex flex-1 flex-col gap-1.5 leading-snug"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/field_description_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldDescriptionBehavior
+  #
+  # Shared behavior for FieldDescription component across ERB, ViewComponent, and Phlex implementations.
+  # FieldDescription provides helper text for form fields.
+  module FieldDescriptionBehavior
+    # Returns HTML attributes for the field description element
+    def field_description_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        "data-slot": "field-description",
+        class: field_description_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field description
+    def field_description_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5 [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/field_error_behavior.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldErrorBehavior
+  #
+  # Shared behavior for FieldError component across ERB, ViewComponent, and Phlex implementations.
+  # FieldError displays error messages for form fields with accessibility support.
+  module FieldErrorBehavior
+    # Returns HTML attributes for the field error element
+    def field_error_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        "data-slot": "field-error",
+        class: field_error_classes,
+        role: "alert"
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field error
+    def field_error_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "text-destructive text-sm font-normal"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+
+    # Returns true if errors should be displayed
+    def has_errors?
+      @errors.is_a?(Array) && @errors.any?
+    end
+
+    # Returns true if displaying a single error
+    def single_error?
+      has_errors? && @errors.length == 1
+    end
+
+    # Returns true if displaying multiple errors
+    def multiple_errors?
+      has_errors? && @errors.length > 1
+    end
+
+    # Returns error message from error object (supports Hash or String)
+    def error_message(error)
+      error.is_a?(Hash) ? error[:message] : error
+    end
+  end
+end

data/app/behaviors/ui/field_group_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldGroupBehavior
+  #
+  # Shared behavior for FieldGroup component across ERB, ViewComponent, and Phlex implementations.
+  # FieldGroup is a layout wrapper that stacks Field components.
+  module FieldGroupBehavior
+    # Returns HTML attributes for the field group wrapper element
+    def field_group_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        "data-slot": "field-group",
+        class: field_group_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field group
+    def field_group_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/field_label_behavior.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldLabelBehavior
+  #
+  # Shared behavior for FieldLabel component across ERB, ViewComponent, and Phlex implementations.
+  # FieldLabel provides styled labels for form fields with disability states.
+  module FieldLabelBehavior
+    # Returns HTML attributes for the field label element
+    def field_label_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        for: @for_id,
+        "data-slot": "field-label",
+        class: field_label_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field label
+    def field_label_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/field_legend_behavior.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldLegendBehavior
+  #
+  # Shared behavior for FieldLegend component across ERB, ViewComponent, and Phlex implementations.
+  # FieldLegend provides legend element for FieldSet with variant support.
+  module FieldLegendBehavior
+    # Returns HTML attributes for the field legend element
+    def field_legend_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      variant_value = @variant.to_s.presence || "legend"
+      {
+        "data-slot": "field-legend",
+        "data-variant": variant_value,
+        class: field_legend_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field legend
+    def field_legend_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "mb-3 font-medium data-[variant=legend]:text-base data-[variant=label]:text-sm"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/field_separator_behavior.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldSeparatorBehavior
+  #
+  # Shared behavior for FieldSeparator component across ERB, ViewComponent, and Phlex implementations.
+  # FieldSeparator provides visual divider to separate sections inside FieldGroup.
+  module FieldSeparatorBehavior
+    # Returns HTML attributes for the field separator element
+    def field_separator_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      has_content = has_content?
+      {
+        "data-slot": "field-separator",
+        "data-content": has_content ? "true" : nil,
+        class: field_separator_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field separator
+    def field_separator_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+
+    # Returns true if separator has content (text/label)
+    def has_content?
+      @content.present? || (@block_given if defined?(@block_given))
+    end
+  end
+end

data/app/behaviors/ui/field_set_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldSetBehavior
+  #
+  # Shared behavior for FieldSet component across ERB, ViewComponent, and Phlex implementations.
+  # FieldSet provides semantic fieldset container for grouped fields.
+  module FieldSetBehavior
+    # Returns HTML attributes for the field set element
+    def field_set_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        "data-slot": "field-set",
+        class: field_set_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field set
+    def field_set_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/field_title_behavior.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module UI
+  # FieldTitleBehavior
+  #
+  # Shared behavior for FieldTitle component across ERB, ViewComponent, and Phlex implementations.
+  # FieldTitle provides title with label styling inside FieldContent.
+  module FieldTitleBehavior
+    # Returns HTML attributes for the field title element
+    def field_title_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        "data-slot": "field-label",
+        class: field_title_classes
+      }.merge(attributes_value).compact
+    end
+
+    # Returns combined CSS classes for the field title
+    def field_title_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      base = "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50"
+
+      TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
+    end
+  end
+end

data/app/behaviors/ui/h1_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for H1 component
+    module UI::H1Behavior
+      # Base CSS classes for H1
+      def h1_base_classes
+        "scroll-m-20 text-4xl font-extrabold tracking-tight text-balance"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def h1_classes
+        TailwindMerge::Merger.new.merge([h1_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def h1_html_attributes
+        {
+          class: h1_classes
+        }
+      end
+    end

data/app/behaviors/ui/h2_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for H2 component
+    module UI::H2Behavior
+      # Base CSS classes for H2
+      def h2_base_classes
+        "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def h2_classes
+        TailwindMerge::Merger.new.merge([h2_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def h2_html_attributes
+        {
+          class: h2_classes
+        }
+      end
+    end

data/app/behaviors/ui/h3_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for H3 component
+    module UI::H3Behavior
+      # Base CSS classes for H3
+      def h3_base_classes
+        "scroll-m-20 text-2xl font-semibold tracking-tight"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def h3_classes
+        TailwindMerge::Merger.new.merge([h3_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def h3_html_attributes
+        {
+          class: h3_classes
+        }
+      end
+    end