fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/field_legend_behavior.rb

@@ -1,28 +1,32 @@
 # 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
+# UI::FieldLegendBehavior
+#
+# @ui_component Field Legend
+# @ui_description Legend - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Field Legend - Legend element for FieldSet with variant support. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::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"
+  # 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
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
   end
 end

data/app/behaviors/ui/field_separator_behavior.rb

@@ -1,33 +1,31 @@
 # 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
+# FieldSeparatorBehavior
+#
+# Shared behavior for FieldSeparator component across ERB, ViewComponent, and Phlex implementations.
+# FieldSeparator provides visual divider to separate sections inside FieldGroup.
+module UI::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"
+  # 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
+    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
+  # Returns true if separator has content (text/label)
+  def has_content?
+    @content.present? || (@block_given if defined?(@block_given))
   end
 end

data/app/behaviors/ui/field_set_behavior.rb

@@ -1,26 +1,30 @@
 # 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
+# UI::FieldSetBehavior
+#
+# @ui_component Field Set
+# @ui_description Set - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Field Set - Semantic fieldset container for grouped fields. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::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"
+  # 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
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
   end
 end

data/app/behaviors/ui/field_title_behavior.rb

@@ -1,26 +1,24 @@
 # 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
+# FieldTitleBehavior
+#
+# Shared behavior for FieldTitle component across ERB, ViewComponent, and Phlex implementations.
+# FieldTitle provides title with label styling inside FieldContent.
+module UI::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"
+  # 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
+    TailwindMerge::Merger.new.merge([base, classes_value].compact.join(" "))
   end
 end

data/app/behaviors/ui/h1_behavior.rb

@@ -2,22 +2,30 @@
 
 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
+# UI::H1Behavior
+#
+# @ui_component H1
+# @ui_category typography
+#
+# @ui_anatomy H1 - H1 component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+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
+  # 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
+  # Build complete HTML attributes hash
+  def h1_html_attributes
+    {
+      class: h1_classes
+    }
+  end
+end

data/app/behaviors/ui/h2_behavior.rb

@@ -2,22 +2,30 @@
 
 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
+# UI::H2Behavior
+#
+# @ui_component H2
+# @ui_category typography
+#
+# @ui_anatomy H2 - H2 component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+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
+  # 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
+  # Build complete HTML attributes hash
+  def h2_html_attributes
+    {
+      class: h2_classes
+    }
+  end
+end

data/app/behaviors/ui/h3_behavior.rb

@@ -2,22 +2,30 @@
 
 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
+# UI::H3Behavior
+#
+# @ui_component H3
+# @ui_category typography
+#
+# @ui_anatomy H3 - H3 component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+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
+  # 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
+  # Build complete HTML attributes hash
+  def h3_html_attributes
+    {
+      class: h3_classes
+    }
+  end
+end

data/app/behaviors/ui/h4_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for H4 component
-    module UI::H4Behavior
-      # Base CSS classes for H4
-      def h4_base_classes
-        "scroll-m-20 text-xl font-semibold tracking-tight"
-      end
+# UI::H4Behavior
+#
+# @ui_component H4
+# @ui_category typography
+#
+# @ui_anatomy H4 - H4 component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::H4Behavior
+  # Base CSS classes for H4
+  def h4_base_classes
+    "scroll-m-20 text-xl font-semibold tracking-tight"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def h4_classes
-        TailwindMerge::Merger.new.merge([h4_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def h4_classes
+    TailwindMerge::Merger.new.merge([h4_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def h4_html_attributes
-        {
-          class: h4_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def h4_html_attributes
+    {
+      class: h4_classes
+    }
+  end
+end

data/app/behaviors/ui/hover_card_behavior.rb

@@ -1,29 +1,45 @@
 # frozen_string_literal: true
 
-    # Shared behavior for HoverCard component
-    # Provides HTML attributes and styling for the root container
-    module UI::HoverCardBehavior
-      # Returns HTML attributes for the hover card container element
-      def hover_card_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: hover_card_classes,
-          data: hover_card_data_attributes
-        }.merge(attributes_value)
-      end
+# UI::HoverCardBehavior
+#
+# @ui_component Hover Card
+# @ui_description HoverCard - Phlex implementation
+# @ui_category overlay
+#
+# @ui_anatomy Hover Card - Container for hover card trigger and content. (required)
+# @ui_anatomy Content - The content that appears on hover. (required)
+# @ui_anatomy Trigger - Element that triggers the hover card on hover. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_aria_pattern Tooltip
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+#
+# @ui_related popover
+# @ui_related tooltip
+#
+module UI::HoverCardBehavior
+  # Returns HTML attributes for the hover card container element
+  def hover_card_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: hover_card_classes,
+      data: hover_card_data_attributes
+    }.merge(attributes_value)
+  end
 
-      # Returns combined CSS classes for the hover card
-      def hover_card_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the hover card
+  def hover_card_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the hover card controller
-      def hover_card_data_attributes
-        {
-          controller: "ui--hover-card"
-        }
-      end
-    end
+  # Returns data attributes for the hover card controller
+  def hover_card_data_attributes
+    {
+      controller: "ui--hover-card"
+    }
+  end
+end

data/app/behaviors/ui/hover_card_content_behavior.rb

@@ -1,41 +1,41 @@
 # frozen_string_literal: true
 
-    # Shared behavior for HoverCardContent component
-    # Provides HTML attributes and styling for the content element
-    module UI::HoverCardContentBehavior
-      # Returns HTML attributes for the hover card content element
-      def content_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: content_classes,
-          data: content_data_attributes
-        }.merge(attributes_value)
-      end
+# Shared behavior for HoverCardContent component
+# Provides HTML attributes and styling for the content element
+module UI::HoverCardContentBehavior
+  # Returns HTML attributes for the hover card content element
+  def content_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: content_classes,
+      data: content_data_attributes
+    }.merge(attributes_value)
+  end
 
-      # Returns combined CSS classes for the hover card content
-      def content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the hover card content
+  def content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the hover card content
-      def content_data_attributes
-        {
-          "ui__hover_card_target": "content",
-          "align": @align,
-          "side_offset": @side_offset,
-          "action": "mouseenter->ui--hover-card#keepOpen mouseleave->ui--hover-card#scheduleHide"
-        }
-      end
+  # Returns data attributes for the hover card content
+  def content_data_attributes
+    {
+      ui__hover_card_target: "content",
+      align: @align,
+      side_offset: @side_offset,
+      action: "mouseenter->ui--hover-card#keepOpen mouseleave->ui--hover-card#scheduleHide"
+    }
+  end
 
-      private
+  private
 
-      # Base classes from shadcn/ui - exact match for hover card content
-      # These match the Hover Card content styling from shadcn
-      def content_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 w-64 rounded-md border p-4 shadow-md outline-hidden invisible"
-      end
-    end
+  # Base classes from shadcn/ui - exact match for hover card content
+  # These match the Hover Card content styling from shadcn
+  def content_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 w-64 rounded-md border p-4 shadow-md outline-hidden invisible"
+  end
+end

data/app/behaviors/ui/hover_card_trigger_behavior.rb

@@ -1,44 +1,44 @@
 # frozen_string_literal: true
 
-    # Shared behavior for HoverCardTrigger component
-    # Provides HTML attributes and styling for the trigger element
-    # Supports asChild pattern for composition
-    module UI::HoverCardTriggerBehavior
-      # Returns HTML attributes for the hover card trigger element
-      def trigger_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: trigger_classes,
-          data: trigger_data_attributes
-        }.merge(attributes_value)
-      end
+# Shared behavior for HoverCardTrigger component
+# Provides HTML attributes and styling for the trigger element
+# Supports asChild pattern for composition
+module UI::HoverCardTriggerBehavior
+  # Returns HTML attributes for the hover card trigger element
+  def trigger_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: trigger_classes,
+      data: trigger_data_attributes
+    }.merge(attributes_value)
+  end
 
-      # Returns combined CSS classes for the hover card trigger
-      def trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          trigger_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the hover card trigger
+  def trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      trigger_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the hover card trigger
-      def trigger_data_attributes
-        {
-          "ui__hover_card_target": "trigger",
-          "action": "mouseenter->ui--hover-card#show mouseleave->ui--hover-card#hide"
-        }
-      end
+  # Returns data attributes for the hover card trigger
+  def trigger_data_attributes
+    {
+      ui__hover_card_target: "trigger",
+      action: "mouseenter->ui--hover-card#show mouseleave->ui--hover-card#hide"
+    }
+  end
 
-      private
+  private
 
-      # Base classes applied to all hover card triggers
-      # Includes inline-flex for alignment and focus ring for keyboard navigation
-      def trigger_base_classes
-        [
-          "inline-flex",
-          "rounded-sm",
-          "outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-        ].join(" ")
-      end
-    end
+  # Base classes applied to all hover card triggers
+  # Includes inline-flex for alignment and focus ring for keyboard navigation
+  def trigger_base_classes
+    [
+      "inline-flex",
+      "rounded-sm",
+      "outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+    ].join(" ")
+  end
+end