fernandes-ui 0.1.0 → 0.1.2

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

data/app/behaviors/ui/tabs_behavior.rb

@@ -1,32 +1,57 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Tabs container component
-    # Handles Stimulus controller setup and data attributes
-    module UI::TabsBehavior
-      # Generate Stimulus controller data attributes
-      def tabs_data_attributes
-        {
-          controller: "ui--tabs",
-          ui__tabs_default_value_value: @default_value || "",
-          ui__tabs_orientation_value: @orientation || "horizontal",
-          ui__tabs_activation_mode_value: @activation_mode || "automatic"
-        }
-      end
+# UI::TabsBehavior
+#
+# @ui_component Tabs
+# @ui_description Tabs container component (Phlex) Root component for tabbed interface with keyboard navigation
+# @ui_category navigation
+#
+# @ui_anatomy Tabs - Root container with state management (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy List - Container for list items
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Keyboard navigation with arrow keys
+#
+# @ui_aria_pattern Tabs
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+#
+# @ui_keyboard ArrowDown Moves focus to next item
+# @ui_keyboard ArrowUp Moves focus to previous item
+# @ui_keyboard ArrowLeft Moves focus left or decreases value
+# @ui_keyboard ArrowRight Moves focus right or increases value
+# @ui_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+# @ui_keyboard Tab Moves focus to next focusable element
+#
+# @ui_related navigation_menu
+# @ui_related accordion
+#
+module UI::TabsBehavior
+  # Generate Stimulus controller data attributes
+  def tabs_data_attributes
+    {
+      controller: "ui--tabs",
+      ui__tabs_default_value_value: @default_value || "",
+      ui__tabs_orientation_value: @orientation || "horizontal",
+      ui__tabs_activation_mode_value: @activation_mode || "automatic"
+    }
+  end
 
-      # Merge user-provided data attributes with tabs controller data
-      def merged_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(tabs_data_attributes)
-      end
+  # Merge user-provided data attributes with tabs controller data
+  def merged_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(tabs_data_attributes)
+  end
 
-      # Build complete HTML attributes hash for tabs container
-      def tabs_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: "flex flex-col gap-2 #{@classes}".strip,
-          "data-orientation": @orientation || "horizontal",
-          "data-slot": "tabs",
-          data: merged_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash for tabs container
+  def tabs_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: "flex flex-col gap-2 #{@classes}".strip,
+      "data-orientation": @orientation || "horizontal",
+      "data-slot": "tabs",
+      data: merged_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/tabs_content_behavior.rb

@@ -1,38 +1,38 @@
 # frozen_string_literal: true
 
-    # Shared behavior for TabsContent component
-    # Panel displaying content for active tab
-    module UI::TabsContentBehavior
-      # Determine initial state based on value
-      def content_state
-        if @value == @default_value
-          "active"
-        else
-          "inactive"
-        end
-      end
+# Shared behavior for TabsContent component
+# Panel displaying content for active tab
+module UI::TabsContentBehavior
+  # Determine initial state based on value
+  def content_state
+    if @value == @default_value
+      "active"
+    else
+      "inactive"
+    end
+  end
 
-      # Build complete HTML attributes hash for content
-      def content_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+  # Build complete HTML attributes hash for content
+  def content_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        content_data = {
-          ui__tabs_target: "content",
-          value: @value
-        }.merge(user_data)
+    content_data = {
+      ui__tabs_target: "content",
+      value: @value
+    }.merge(user_data)
 
-        base_attrs.merge(
-          class: "flex-1 outline-none #{@classes}".strip,
-          id: "tabs-content-#{@value}",
-          role: "tabpanel",
-          "aria-labelledby": "tabs-trigger-#{@value}",
-          "data-state": content_state,
-          "data-orientation": @orientation || "horizontal",
-          "data-slot": "tabs-content",
-          tabindex: "0",
-          hidden: content_state == "inactive",
-          data: content_data
-        )
-      end
-    end
+    base_attrs.merge(
+      class: "flex-1 outline-none #{@classes}".strip,
+      id: "tabs-content-#{@value}",
+      role: "tabpanel",
+      "aria-labelledby": "tabs-trigger-#{@value}",
+      "data-state": content_state,
+      "data-orientation": @orientation || "horizontal",
+      "data-slot": "tabs-content",
+      tabindex: "0",
+      hidden: content_state == "inactive",
+      data: content_data
+    )
+  end
+end

data/app/behaviors/ui/tabs_list_behavior.rb

@@ -1,20 +1,20 @@
 # frozen_string_literal: true
 
-    # Shared behavior for TabsList component
-    # Container for tab triggers
-    module UI::TabsListBehavior
-      # Build complete HTML attributes hash for tabs list
-      def list_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+# Shared behavior for TabsList component
+# Container for tab triggers
+module UI::TabsListBehavior
+  # Build complete HTML attributes hash for tabs list
+  def list_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        base_attrs.merge(
-          class: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] #{@classes}".strip,
-          "data-orientation": @orientation || "horizontal",
-          "data-slot": "tabs-list",
-          role: "tablist",
-          "aria-orientation": @orientation || "horizontal",
-          data: user_data
-        )
-      end
-    end
+    base_attrs.merge(
+      class: "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] #{@classes}".strip,
+      "data-orientation": @orientation || "horizontal",
+      "data-slot": "tabs-list",
+      role: "tablist",
+      "aria-orientation": @orientation || "horizontal",
+      data: user_data
+    )
+  end
+end

data/app/behaviors/ui/tabs_trigger_behavior.rb

@@ -1,47 +1,47 @@
 # frozen_string_literal: true
 
-    # Shared behavior for TabsTrigger component
-    # Button that activates associated content
-    module UI::TabsTriggerBehavior
-      # Determine initial state based on value
-      def trigger_state
-        if @value == @default_value
-          "active"
-        else
-          "inactive"
-        end
-      end
+# Shared behavior for TabsTrigger component
+# Button that activates associated content
+module UI::TabsTriggerBehavior
+  # Determine initial state based on value
+  def trigger_state
+    if @value == @default_value
+      "active"
+    else
+      "inactive"
+    end
+  end
 
-      # Build complete HTML attributes hash for trigger
-      def trigger_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+  # Build complete HTML attributes hash for trigger
+  def trigger_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        trigger_data = {
-          ui__tabs_target: "trigger",
-          value: @value,
-          action: "click->ui--tabs#selectTab"
-        }.merge(user_data)
+    trigger_data = {
+      ui__tabs_target: "trigger",
+      value: @value,
+      action: "click->ui--tabs#selectTab"
+    }.merge(user_data)
 
-        base_attrs.merge(
-          class: [
-            "focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground",
-            "dark:data-[state=active]:text-foreground inline-flex cursor-default items-center justify-center gap-2",
-            "whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium outline-none transition-all",
-            "focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-            "[&_svg]:pointer-events-none [&_svg]:shrink-0",
-            @classes
-          ].join(" ").strip,
-          type: "button",
-          role: "tab",
-          "aria-selected": trigger_state == "active" ? "true" : "false",
-          "aria-controls": "tabs-content-#{@value}",
-          "data-state": trigger_state,
-          "data-orientation": @orientation || "horizontal",
-          "data-slot": "tabs-trigger",
-          tabindex: trigger_state == "active" ? "0" : "-1",
-          disabled: @disabled || false,
-          data: trigger_data
-        )
-      end
-    end
+    base_attrs.merge(
+      class: [
+        "focus-visible:ring-ring/50 data-[state=active]:bg-background data-[state=active]:text-foreground",
+        "dark:data-[state=active]:text-foreground inline-flex cursor-default items-center justify-center gap-2",
+        "whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium outline-none transition-all",
+        "focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        @classes
+      ].join(" ").strip,
+      type: "button",
+      role: "tab",
+      "aria-selected": (trigger_state == "active") ? "true" : "false",
+      "aria-controls": "tabs-content-#{@value}",
+      "data-state": trigger_state,
+      "data-orientation": @orientation || "horizontal",
+      "data-slot": "tabs-trigger",
+      tabindex: (trigger_state == "active") ? "0" : "-1",
+      disabled: @disabled || false,
+      data: trigger_data
+    )
+  end
+end

data/app/behaviors/ui/textarea_behavior.rb

@@ -1,36 +1,44 @@
 # frozen_string_literal: true
 
-module UI
-  # TextareaBehavior
-  #
-  # Shared behavior for Textarea component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent styling and HTML attribute generation for textarea elements.
-  module TextareaBehavior
-    # Returns HTML attributes for the textarea element
-    def textarea_html_attributes
-      {
-        class: textarea_classes,
-        placeholder: @placeholder,
-        name: @name,
-        rows: @rows
-      }.compact
-    end
+# UI::TextareaBehavior
+#
+# @ui_component Textarea
+# @ui_category forms
+#
+# @ui_anatomy Textarea - Root textarea element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_related input
+# @ui_related field
+#
+module UI::TextareaBehavior
+  # Returns HTML attributes for the textarea element
+  def textarea_html_attributes
+    {
+      class: textarea_classes,
+      placeholder: @placeholder,
+      name: @name,
+      rows: @rows
+    }.compact
+  end
 
-    # Returns combined CSS classes for the textarea
-    def textarea_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        textarea_base_classes,
-        classes_value
+  # Returns combined CSS classes for the textarea
+  def textarea_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      textarea_base_classes,
+      classes_value
 
-      ].compact.join(" "))
-    end
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all textareas (from shadcn/ui)
-    def textarea_base_classes
-      "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
-    end
+  # Base classes applied to all textareas (from shadcn/ui)
+  def textarea_base_classes
+    "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
   end
 end

data/app/behaviors/ui/toggle_behavior.rb

@@ -2,84 +2,99 @@
 
 require "tailwind_merge"
 
-module UI
-  # ToggleBehavior
-  #
-  # Shared behavior for Toggle component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent variant and size styling, along with HTML attribute generation.
-  module ToggleBehavior
-    # Renders the toggle HTML
-    # This method can be used by both ERB partials and ViewComponents
-    # @param content_block [Proc] Block that returns the toggle content
-    # @return [String] HTML string for the toggle
-    def render_toggle(&content_block)
-      all_attributes = toggle_html_attributes.deep_merge(@attributes)
-      content_tag(:button, **all_attributes, &content_block)
-    end
+# UI::ToggleBehavior
+#
+# @ui_component Toggle
+# @ui_description Toggle - Phlex implementation
+# @ui_category forms
+#
+# @ui_anatomy Toggle - A two-state button that can be either on or off. (required)
+# @ui_anatomy Group - A container for a set of toggle items that can be toggled on or off.
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_aria_pattern Button
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/button/
+# @ui_aria_attr aria-pressed
+#
+# @ui_related checkbox
+# @ui_related switch
+# @ui_related toggle_group
+#
+module UI::ToggleBehavior
+  # Renders the toggle HTML
+  # This method can be used by both ERB partials and ViewComponents
+  # @param content_block [Proc] Block that returns the toggle content
+  # @return [String] HTML string for the toggle
+  def render_toggle(&content_block)
+    all_attributes = toggle_html_attributes.deep_merge(@attributes)
+    content_tag(:button, **all_attributes, &content_block)
+  end
 
-    # Returns HTML attributes for the toggle element
-    def toggle_html_attributes
-      attrs = {
-        class: toggle_classes,
-        type: @type || "button",
-        disabled: @disabled ? true : nil,
-        "aria-pressed": @pressed ? "true" : "false",
-        data: {
-          controller: "ui--toggle",
-          action: "click->ui--toggle#toggle",
-          "ui--toggle-pressed-value": @pressed ? "true" : "false"
-        }
+  # Returns HTML attributes for the toggle element
+  def toggle_html_attributes
+    attrs = {
+      class: toggle_classes,
+      type: @type || "button",
+      disabled: @disabled ? true : nil,
+      "aria-pressed": @pressed ? "true" : "false",
+      data: {
+        controller: "ui--toggle",
+        action: "click->ui--toggle#toggle",
+        "ui--toggle-pressed-value": @pressed ? "true" : "false"
       }
+    }
 
-      # Add state attribute for CSS targeting
-      attrs[:"data-state"] = @pressed ? "on" : "off"
-      attrs[:"data-disabled"] = "" if @disabled
+    # Add state attribute for CSS targeting
+    attrs[:"data-state"] = @pressed ? "on" : "off"
+    attrs[:"data-disabled"] = "" if @disabled
 
-      attrs.compact
-    end
+    attrs.compact
+  end
 
-    # Returns combined CSS classes for the toggle
-    def toggle_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        toggle_base_classes,
-        toggle_variant_classes,
-        toggle_size_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes for the toggle
+  def toggle_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      toggle_base_classes,
+      toggle_variant_classes,
+      toggle_size_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all toggles
-    def toggle_base_classes
-      "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap"
-    end
+  # Base classes applied to all toggles
+  def toggle_base_classes
+    "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap"
+  end
 
-    # Variant-specific classes based on @variant
-    def toggle_variant_classes
-      case @variant.to_s
-      when "default"
-        "bg-transparent"
-      when "outline"
-        "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
-      else
-        "bg-transparent"
-      end
+  # Variant-specific classes based on @variant
+  def toggle_variant_classes
+    case @variant.to_s
+    when "default"
+      "bg-transparent"
+    when "outline"
+      "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+    else
+      "bg-transparent"
     end
+  end
 
-    # Size-specific classes based on @size
-    def toggle_size_classes
-      case @size.to_s
-      when "default"
-        "h-9 px-2 min-w-9"
-      when "sm"
-        "h-8 px-1.5 min-w-8"
-      when "lg"
-        "h-10 px-2.5 min-w-10"
-      else
-        "h-9 px-2 min-w-9"
-      end
+  # Size-specific classes based on @size
+  def toggle_size_classes
+    case @size.to_s
+    when "default"
+      "h-9 px-2 min-w-9"
+    when "sm"
+      "h-8 px-1.5 min-w-8"
+    when "lg"
+      "h-10 px-2.5 min-w-10"
+    else
+      "h-9 px-2 min-w-9"
     end
   end
 end