fernandes-ui 0.1.0 → 0.1.2

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,68 +1,89 @@
 # 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
-  # Returns HTML attributes for the switch button element
-  def switch_html_attributes
-    {
-      class: switch_classes,
-      role: "switch",
-      type: "button",
-      tabindex: @disabled ? -1 : 0,
-      "aria-checked": switch_aria_checked,
-      "data-state": switch_state,
-      "data-slot": "switch",
-      data: switch_data_attributes
-    }.tap do |attrs|
-      if @disabled
-        attrs[:disabled] = true
-        attrs["aria-disabled"] = "true"
-      end
+# 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
+  {
+    class: switch_classes,
+    role: "switch",
+    type: "button",
+    tabindex: @disabled ? -1 : 0,
+    "aria-checked": switch_aria_checked,
+    "data-state": switch_state,
+    "data-slot": "switch",
+    data: switch_data_attributes
+  }.tap do |attrs|
+    if @disabled
+      attrs[:disabled] = true
+      attrs["aria-disabled"] = "true"
     end
   end
+end
 
-  # Returns combined CSS classes for the switch
-  def switch_classes
-    classes_value = respond_to?(:classes, true) ? classes : @classes
-    TailwindMerge::Merger.new.merge([
-      switch_base_classes,
-      classes_value
-    ].compact.join(" "))
-  end
+# Returns combined CSS classes for the switch
+def switch_classes
+  classes_value = respond_to?(:classes, true) ? classes : @classes
+  TailwindMerge::Merger.new.merge([
+    switch_base_classes,
+    classes_value
+  ].compact.join(" "))
+end
 
-  # Returns CSS classes for the thumb element
-  def switch_thumb_classes
-    "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-  end
+# Returns CSS classes for the thumb element
+def switch_thumb_classes
+  "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+end
 
-  private
+private
 
-  # Base classes applied to all switches
-  def switch_base_classes
-    "peer data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-  end
+# Base classes applied to all switches
+def switch_base_classes
+  "peer data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+end
 
-  # Returns the switch state (checked or unchecked)
-  def switch_state
-    @checked ? "checked" : "unchecked"
-  end
+# Returns the switch state (checked or unchecked)
+def switch_state
+  @checked ? "checked" : "unchecked"
+end
 
-  # Returns aria-checked attribute value
-  def switch_aria_checked
-    @checked.to_s
-  end
+# Returns aria-checked attribute value
+def switch_aria_checked
+  @checked.to_s
+end
 
-  # Returns data attributes for Stimulus controller
-  def switch_data_attributes
-    {
-      controller: "ui--switch",
-      ui__switch_checked_value: @checked,
-      action: "click->ui--switch#toggle keydown->ui--switch#handleKeydown"
-    }
-  end
-  end
+# Returns data attributes for Stimulus controller
+def switch_data_attributes
+  {
+    controller: "ui--switch",
+    ui__switch_checked_value: @checked,
+    action: "click->ui--switch#toggle keydown->ui--switch#handleKeydown"
+  }
+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