fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/spinner_behavior.rb

@@ -1,50 +1,55 @@
 # frozen_string_literal: true
 
-module UI
-  # SpinnerBehavior
-  #
-  # Shared behavior for Spinner component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent size variants and HTML attribute generation.
-  module SpinnerBehavior
-    # Returns HTML attributes for the spinner element
-    def spinner_html_attributes
-      {
-        class: spinner_classes,
-        role: "status",
-        "aria-label": "Loading",
-        data: { slot: "spinner" }
-      }
-    end
+# UI::SpinnerBehavior
+#
+# @ui_component Spinner
+# @ui_description Spinner - Phlex implementation
+# @ui_category feedback
+#
+# @ui_anatomy Spinner - A loading indicator component using an animated spinner icon. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature ARIA attributes for accessibility
+#
+module UI::SpinnerBehavior
+  # Returns HTML attributes for the spinner element
+  def spinner_html_attributes
+    {
+      class: spinner_classes,
+      role: "status",
+      "aria-label": "Loading",
+      data: {slot: "spinner"}
+    }
+  end
 
-    # Returns combined CSS classes for the spinner
-    def spinner_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        spinner_base_classes,
-        spinner_size_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes for the spinner
+  def spinner_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      spinner_base_classes,
+      spinner_size_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all spinners
-    def spinner_base_classes
-      "animate-spin"
-    end
+  # Base classes applied to all spinners
+  def spinner_base_classes
+    "animate-spin"
+  end
 
-    # Size-specific classes based on @size
-    def spinner_size_classes
-      case @size.to_s
-      when "sm"
-        "size-3"
-      when "lg"
-        "size-6"
-      when "xl"
-        "size-8"
-      else # default
-        "size-4"
-      end
+  # Size-specific classes based on @size
+  def spinner_size_classes
+    case @size.to_s
+    when "sm"
+      "size-3"
+    when "lg"
+      "size-6"
+    when "xl"
+      "size-8"
+    else # default
+      "size-4"
     end
   end
 end

data/app/behaviors/ui/switch_behavior.rb

@@ -1,11 +1,33 @@
 # frozen_string_literal: true
 
-module UI
-  # SwitchBehavior
-  #
-  # Shared behavior for Switch component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent styling and HTML attribute generation for toggle switches.
-  module SwitchBehavior
+# UI::SwitchBehavior
+#
+# @ui_component Switch
+# @ui_description Switch - Phlex implementation
+# @ui_category forms
+#
+# @ui_anatomy Switch - A toggle control that allows the user to switch between checked and unchecked states. (required)
+#
+# @ui_feature Keyboard navigation
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Form integration
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+# @ui_feature Animation support
+#
+# @ui_aria_pattern Switch
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/switch/
+# @ui_aria_attr aria-checked
+# @ui_aria_attr aria-disabled
+# @ui_aria_attr role="switch"
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard Space Activates the focused element
+#
+# @ui_related checkbox
+# @ui_related toggle
+#
+module UI::SwitchBehavior
   # Returns HTML attributes for the switch button element
   def switch_html_attributes
     {
@@ -64,5 +86,4 @@ module UI
       action: "click->ui--switch#toggle keydown->ui--switch#handleKeydown"
     }
   end
-  end
 end

data/app/behaviors/ui/table_behavior.rb

@@ -1,28 +1,36 @@
 # frozen_string_literal: true
 
-    # TableBehavior
-    #
-    # Shared behavior for Table component across ERB, ViewComponent, and Phlex implementations.
-    module UI::TableBehavior
-      def render_table(&content_block)
-        all_attributes = table_html_attributes.deep_merge(@attributes)
-        content_tag(:table, **all_attributes, &content_block)
-      end
+# UI::TableBehavior
+#
+# @ui_component Table
+# @ui_category data-display
+#
+# @ui_anatomy Table - Root container for table (required)
+# @ui_anatomy Footer - Footer section with actions
+# @ui_anatomy Header - Header section with title and controls
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::TableBehavior
+  def render_table(&content_block)
+    all_attributes = table_html_attributes.deep_merge(@attributes)
+    content_tag(:table, **all_attributes, &content_block)
+  end
 
-      def table_html_attributes
-        { class: table_classes }
-      end
+  def table_html_attributes
+    {class: table_classes}
+  end
 
-      def table_classes
-        TailwindMerge::Merger.new.merge([
-          table_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def table_classes
+    TailwindMerge::Merger.new.merge([
+      table_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def table_base_classes
-        "w-full caption-bottom text-sm"
-      end
-    end
+  def table_base_classes
+    "w-full caption-bottom text-sm"
+  end
+end

data/app/behaviors/ui/table_body_behavior.rb

@@ -1,28 +1,34 @@
 # frozen_string_literal: true
 
-    # BodyBehavior
-    #
-    # Shared behavior for Table Body (tbody) component.
-    module UI::TableBodyBehavior
-      def render_body(&content_block)
-        all_attributes = body_html_attributes.deep_merge(@attributes)
-        content_tag(:tbody, **all_attributes, &content_block)
-      end
+# UI::TableBodyBehavior
+#
+# @ui_component Table Body
+# @ui_category other
+#
+# @ui_anatomy Table Body - Main body content area (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::TableBodyBehavior
+  def render_body(&content_block)
+    all_attributes = body_html_attributes.deep_merge(@attributes)
+    content_tag(:tbody, **all_attributes, &content_block)
+  end
 
-      def body_html_attributes
-        { class: body_classes }
-      end
+  def body_html_attributes
+    {class: body_classes}
+  end
 
-      def body_classes
-        TailwindMerge::Merger.new.merge([
-          body_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def body_classes
+    TailwindMerge::Merger.new.merge([
+      body_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def body_base_classes
-        "[&_tr:last-child]:border-0"
-      end
-    end
+  def body_base_classes
+    "[&_tr:last-child]:border-0"
+  end
+end

data/app/behaviors/ui/table_caption_behavior.rb

@@ -1,28 +1,34 @@
 # frozen_string_literal: true
 
-    # CaptionBehavior
-    #
-    # Shared behavior for Table Caption component.
-    module UI::TableCaptionBehavior
-      def render_caption(&content_block)
-        all_attributes = caption_html_attributes.deep_merge(@attributes)
-        content_tag(:caption, **all_attributes, &content_block)
-      end
+# UI::TableCaptionBehavior
+#
+# @ui_component Table Caption
+# @ui_category other
+#
+# @ui_anatomy Table Caption - Caption text element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::TableCaptionBehavior
+  def render_caption(&content_block)
+    all_attributes = caption_html_attributes.deep_merge(@attributes)
+    content_tag(:caption, **all_attributes, &content_block)
+  end
 
-      def caption_html_attributes
-        { class: caption_classes }
-      end
+  def caption_html_attributes
+    {class: caption_classes}
+  end
 
-      def caption_classes
-        TailwindMerge::Merger.new.merge([
-          caption_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def caption_classes
+    TailwindMerge::Merger.new.merge([
+      caption_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def caption_base_classes
-        "mt-4 text-sm text-muted-foreground"
-      end
-    end
+  def caption_base_classes
+    "mt-4 text-sm text-muted-foreground"
+  end
+end

data/app/behaviors/ui/table_cell_behavior.rb

@@ -1,28 +1,34 @@
 # frozen_string_literal: true
 
-    # CellBehavior
-    #
-    # Shared behavior for Table Cell (td) component.
-    module UI::TableCellBehavior
-      def render_cell(&content_block)
-        all_attributes = cell_html_attributes.deep_merge(@attributes)
-        content_tag(:td, **all_attributes, &content_block)
-      end
+# UI::TableCellBehavior
+#
+# @ui_component Table Cell
+# @ui_category other
+#
+# @ui_anatomy Table Cell - Table cell element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::TableCellBehavior
+  def render_cell(&content_block)
+    all_attributes = cell_html_attributes.deep_merge(@attributes)
+    content_tag(:td, **all_attributes, &content_block)
+  end
 
-      def cell_html_attributes
-        { class: cell_classes }
-      end
+  def cell_html_attributes
+    {class: cell_classes}
+  end
 
-      def cell_classes
-        TailwindMerge::Merger.new.merge([
-          cell_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def cell_classes
+    TailwindMerge::Merger.new.merge([
+      cell_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def cell_base_classes
-        "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
-      end
-    end
+  def cell_base_classes
+    "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+  end
+end

data/app/behaviors/ui/table_footer_behavior.rb

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
-    # FooterBehavior
-    #
-    # Shared behavior for Table Footer (tfoot) component.
-    module UI::TableFooterBehavior
-      def render_footer(&content_block)
-        all_attributes = footer_html_attributes.deep_merge(@attributes)
-        content_tag(:tfoot, **all_attributes, &content_block)
-      end
+# FooterBehavior
+#
+# Shared behavior for Table Footer (tfoot) component.
+module UI::TableFooterBehavior
+  def render_footer(&content_block)
+    all_attributes = footer_html_attributes.deep_merge(@attributes)
+    content_tag(:tfoot, **all_attributes, &content_block)
+  end
 
-      def footer_html_attributes
-        { class: footer_classes }
-      end
+  def footer_html_attributes
+    {class: footer_classes}
+  end
 
-      def footer_classes
-        TailwindMerge::Merger.new.merge([
-          footer_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def footer_classes
+    TailwindMerge::Merger.new.merge([
+      footer_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def footer_base_classes
-        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0"
-      end
-    end
+  def footer_base_classes
+    "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0"
+  end
+end

data/app/behaviors/ui/table_head_behavior.rb

@@ -1,28 +1,34 @@
 # frozen_string_literal: true
 
-    # HeadBehavior
-    #
-    # Shared behavior for Table Head (th) component.
-    module UI::TableHeadBehavior
-      def render_head(&content_block)
-        all_attributes = head_html_attributes.deep_merge(@attributes)
-        content_tag(:th, **all_attributes, &content_block)
-      end
+# UI::TableHeadBehavior
+#
+# @ui_component Table Head
+# @ui_category other
+#
+# @ui_anatomy Table Head - Table header element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::TableHeadBehavior
+  def render_head(&content_block)
+    all_attributes = head_html_attributes.deep_merge(@attributes)
+    content_tag(:th, **all_attributes, &content_block)
+  end
 
-      def head_html_attributes
-        { class: head_classes }
-      end
+  def head_html_attributes
+    {class: head_classes}
+  end
 
-      def head_classes
-        TailwindMerge::Merger.new.merge([
-          head_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def head_classes
+    TailwindMerge::Merger.new.merge([
+      head_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def head_base_classes
-        "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
-      end
-    end
+  def head_base_classes
+    "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+  end
+end

data/app/behaviors/ui/table_header_behavior.rb

@@ -1,28 +1,28 @@
 # frozen_string_literal: true
 
-    # HeaderBehavior
-    #
-    # Shared behavior for Table Header (thead) component.
-    module UI::TableHeaderBehavior
-      def render_header(&content_block)
-        all_attributes = header_html_attributes.deep_merge(@attributes)
-        content_tag(:thead, **all_attributes, &content_block)
-      end
+# HeaderBehavior
+#
+# Shared behavior for Table Header (thead) component.
+module UI::TableHeaderBehavior
+  def render_header(&content_block)
+    all_attributes = header_html_attributes.deep_merge(@attributes)
+    content_tag(:thead, **all_attributes, &content_block)
+  end
 
-      def header_html_attributes
-        { class: header_classes }
-      end
+  def header_html_attributes
+    {class: header_classes}
+  end
 
-      def header_classes
-        TailwindMerge::Merger.new.merge([
-          header_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def header_classes
+    TailwindMerge::Merger.new.merge([
+      header_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def header_base_classes
-        "[&_tr]:border-b"
-      end
-    end
+  def header_base_classes
+    "[&_tr]:border-b"
+  end
+end

data/app/behaviors/ui/table_row_behavior.rb

@@ -1,28 +1,34 @@
 # frozen_string_literal: true
 
-    # RowBehavior
-    #
-    # Shared behavior for Table Row (tr) component.
-    module UI::TableRowBehavior
-      def render_row(&content_block)
-        all_attributes = row_html_attributes.deep_merge(@attributes)
-        content_tag(:tr, **all_attributes, &content_block)
-      end
+# UI::TableRowBehavior
+#
+# @ui_component Table Row
+# @ui_category other
+#
+# @ui_anatomy Table Row - Table row element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::TableRowBehavior
+  def render_row(&content_block)
+    all_attributes = row_html_attributes.deep_merge(@attributes)
+    content_tag(:tr, **all_attributes, &content_block)
+  end
 
-      def row_html_attributes
-        { class: row_classes }
-      end
+  def row_html_attributes
+    {class: row_classes}
+  end
 
-      def row_classes
-        TailwindMerge::Merger.new.merge([
-          row_base_classes,
-          @classes
-        ].compact.join(" "))
-      end
+  def row_classes
+    TailwindMerge::Merger.new.merge([
+      row_base_classes,
+      @classes
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def row_base_classes
-        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
-      end
-    end
+  def row_base_classes
+    "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+  end
+end