fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/item_title_behavior.rb

@@ -1,31 +1,32 @@
 # frozen_string_literal: true
-    # ItemTitleBehavior
-    #
-    # Shared behavior for Item title text across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemTitleBehavior
-      # Returns HTML attributes for the item title element
-      def item_title_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_title_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_title_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_title_base_classes,
-          classes_value
+# ItemTitleBehavior
+#
+# Shared behavior for Item title text across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ItemTitleBehavior
+  # Returns HTML attributes for the item title element
+  def item_title_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_title_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_title_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_title_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item title (from shadcn/ui v4)
-      def item_title_base_classes
-        "flex w-fit items-center gap-2 text-sm leading-snug font-medium"
-      end
-    end
+  private
+
+  # Base classes for item title (from shadcn/ui v4)
+  def item_title_base_classes
+    "flex w-fit items-center gap-2 text-sm leading-snug font-medium"
+  end
+end

data/app/behaviors/ui/kbd_behavior.rb

@@ -1,28 +1,34 @@
 # frozen_string_literal: true
 
-module UI
-  # KbdBehavior
-  #
-  # Shared behavior for Kbd component across ERB, ViewComponent, and Phlex implementations.
-  # Displays textual user input from keyboard, helping users understand keyboard shortcuts.
-  module KbdBehavior
-    # Returns HTML attributes for the kbd element
-    def kbd_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        class: kbd_classes,
-        "data-slot": "kbd"
-      }.merge(attributes_value).compact
-    end
+# UI::KbdBehavior
+#
+# @ui_component Kbd
+# @ui_description Kbd - Phlex implementation
+# @ui_category data-display
+#
+# @ui_anatomy Kbd - Displays textual user input from keyboard, helping users understand (required)
+# @ui_anatomy Group - Groups multiple keyboard keys together with consistent spacing.
+#
+# @ui_feature Keyboard navigation
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::KbdBehavior
+  # Returns HTML attributes for the kbd element
+  def kbd_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: kbd_classes,
+      "data-slot": "kbd"
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the kbd element
-    def kbd_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none"
-      svg_sizing = "[&_svg:not([class*='size-'])]:size-3"
-      tooltip_styling = "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10"
+  # Returns combined CSS classes for the kbd element
+  def kbd_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none"
+    svg_sizing = "[&_svg:not([class*='size-'])]:size-3"
+    tooltip_styling = "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10"
 
-      TailwindMerge::Merger.new.merge([base, svg_sizing, tooltip_styling, classes_value].compact.join(" "))
-    end
+    TailwindMerge::Merger.new.merge([base, svg_sizing, tooltip_styling, classes_value].compact.join(" "))
   end
 end

data/app/behaviors/ui/kbd_group_behavior.rb

@@ -1,26 +1,24 @@
 # frozen_string_literal: true
 
-module UI
-  # KbdGroupBehavior
-  #
-  # Shared behavior for KbdGroup component across ERB, ViewComponent, and Phlex implementations.
-  # Groups multiple keyboard keys together with consistent spacing.
-  module KbdGroupBehavior
-    # Returns HTML attributes for the kbd group element
-    def kbd_group_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        class: kbd_group_classes,
-        "data-slot": "kbd-group"
-      }.merge(attributes_value).compact
-    end
+# KbdGroupBehavior
+#
+# Shared behavior for KbdGroup component across ERB, ViewComponent, and Phlex implementations.
+# Groups multiple keyboard keys together with consistent spacing.
+module UI::KbdGroupBehavior
+  # Returns HTML attributes for the kbd group element
+  def kbd_group_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: kbd_group_classes,
+      "data-slot": "kbd-group"
+    }.merge(attributes_value).compact
+  end
 
-    # Returns combined CSS classes for the kbd group element
-    def kbd_group_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      base = "inline-flex items-center gap-1"
+  # Returns combined CSS classes for the kbd group element
+  def kbd_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base = "inline-flex items-center gap-1"
 
-      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/label_behavior.rb

@@ -2,34 +2,43 @@
 
 require "tailwind_merge"
 
-module UI
-  # LabelBehavior
-  #
-  # Shared behavior for Label component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent styling and HTML attribute generation for form labels.
-  module LabelBehavior
-    # Returns HTML attributes for the label element
-    def label_html_attributes
-      {
-        for: @for_id,
-        class: label_classes
-      }.compact
-    end
+# UI::LabelBehavior
+#
+# @ui_component Label
+# @ui_description Label - Phlex implementation
+# @ui_category forms
+#
+# @ui_anatomy Label - Accessible label for form inputs following shadcn/ui design patterns. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Form integration
+# @ui_feature Disabled state support
+#
+# @ui_related field
+# @ui_related input
+#
+module UI::LabelBehavior
+  # Returns HTML attributes for the label element
+  def label_html_attributes
+    {
+      for: @for_id,
+      class: label_classes
+    }.compact
+  end
 
-    # Returns combined CSS classes for the label
-    def label_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        label_base_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes for the label
+  def label_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      label_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all labels (from shadcn/ui)
-    def label_base_classes
-      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
-    end
+  # Base classes applied to all labels (from shadcn/ui)
+  def label_base_classes
+    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
   end
 end

data/app/behaviors/ui/large_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Large component
-    module UI::LargeBehavior
-      # Base CSS classes for Large
-      def large_base_classes
-        "text-lg font-semibold"
-      end
+# UI::LargeBehavior
+#
+# @ui_component Large
+# @ui_category typography
+#
+# @ui_anatomy Large - Large component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::LargeBehavior
+  # Base CSS classes for Large
+  def large_base_classes
+    "text-lg font-semibold"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def large_classes
-        TailwindMerge::Merger.new.merge([large_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def large_classes
+    TailwindMerge::Merger.new.merge([large_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def large_html_attributes
-        {
-          class: large_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def large_html_attributes
+    {
+      class: large_classes
+    }
+  end
+end

data/app/behaviors/ui/lead_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Lead component
-    module UI::LeadBehavior
-      # Base CSS classes for Lead
-      def lead_base_classes
-        "text-xl text-muted-foreground"
-      end
+# UI::LeadBehavior
+#
+# @ui_component Lead
+# @ui_category typography
+#
+# @ui_anatomy Lead - Lead component part (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::LeadBehavior
+  # Base CSS classes for Lead
+  def lead_base_classes
+    "text-xl text-muted-foreground"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def lead_classes
-        TailwindMerge::Merger.new.merge([lead_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def lead_classes
+    TailwindMerge::Merger.new.merge([lead_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def lead_html_attributes
-        {
-          class: lead_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def lead_html_attributes
+    {
+      class: lead_classes
+    }
+  end
+end

data/app/behaviors/ui/list_behavior.rb

@@ -2,22 +2,30 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for List component
-    module UI::ListBehavior
-      # Base CSS classes for List (ul)
-      def list_base_classes
-        "my-6 ml-6 list-disc [&>li]:mt-2"
-      end
+# UI::ListBehavior
+#
+# @ui_component List
+# @ui_category typography
+#
+# @ui_anatomy List - Container for list items (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::ListBehavior
+  # Base CSS classes for List (ul)
+  def list_base_classes
+    "my-6 ml-6 list-disc [&>li]:mt-2"
+  end
 
-      # Merge base classes with custom classes using TailwindMerge
-      def list_classes
-        TailwindMerge::Merger.new.merge([list_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes using TailwindMerge
+  def list_classes
+    TailwindMerge::Merger.new.merge([list_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def list_html_attributes
-        {
-          class: list_classes
-        }
-      end
-    end
+  # Build complete HTML attributes hash
+  def list_html_attributes
+    {
+      class: list_classes
+    }
+  end
+end

data/app/behaviors/ui/menubar_behavior.rb

@@ -1,43 +1,81 @@
 # frozen_string_literal: true
 
-    # MenubarBehavior
-    #
-    # Shared behavior for Menubar component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation.
-    module UI::MenubarBehavior
-      # Returns HTML attributes for the menubar container
-      def menubar_html_attributes
-        attrs = {
-          class: menubar_classes,
-          data: menubar_data_attributes,
-          role: "menubar"
-        }
+# UI::MenubarBehavior
+#
+# @ui_component Menubar
+# @ui_description Menubar - Phlex implementation
+# @ui_category navigation
+#
+# @ui_anatomy Menubar - Container for horizontal menu bar with Stimulus controller for interactivity. (required)
+# @ui_anatomy Content - Container for menu items that appears when trigger is activated. (required)
+# @ui_anatomy Item - A selectable menu item.
+# @ui_anatomy Label - Non-interactive label/header for menu sections.
+# @ui_anatomy Separator - Visual divider between menu items.
+# @ui_anatomy Shortcut - Displays keyboard shortcut hint for menu items.
+# @ui_anatomy Sub - Container for submenu within the menubar menu.
+# @ui_anatomy Sub Content - Container for submenu items. (required)
+# @ui_anatomy Sub Trigger - Menu item that opens a submenu. (required)
+# @ui_anatomy Trigger - Button that toggles the menu content open/closed. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature ARIA attributes for accessibility
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Click outside to close
+#
+# @ui_aria_pattern Menu Bar
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
+# @ui_aria_attr aria-label
+# @ui_aria_attr role="menubar"
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard Space Activates the focused element
+# @ui_keyboard Escape Closes the component
+# @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 dropdown_menu
+# @ui_related context_menu
+# @ui_related navigation_menu
+#
+module UI::MenubarBehavior
+  # Returns HTML attributes for the menubar container
+  def menubar_html_attributes
+    attrs = {
+      class: menubar_classes,
+      data: menubar_data_attributes,
+      role: "menubar"
+    }
 
-        # Add aria-label if provided
-        attrs[:"aria-label"] = @aria_label if defined?(@aria_label) && @aria_label
+    # Add aria-label if provided
+    attrs[:"aria-label"] = @aria_label if defined?(@aria_label) && @aria_label
 
-        attrs
-      end
+    attrs
+  end
 
-      # Returns combined CSS classes for the menubar
-      def menubar_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the menubar
+  def menubar_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus controller
-      def menubar_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          controller: "ui--menubar"
-        }
+  # Returns data attributes for Stimulus controller
+  def menubar_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      controller: "ui--menubar"
+    }
 
-        # Add loop value if specified
-        base_data[:"ui--menubar-loop-value"] = @loop if defined?(@loop) && @loop
+    # Add loop value if specified
+    base_data[:"ui--menubar-loop-value"] = @loop if defined?(@loop) && @loop
 
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end

data/app/behaviors/ui/menubar_checkbox_item_behavior.rb

@@ -1,56 +1,56 @@
 # frozen_string_literal: true
 
-    # MenubarCheckboxItemBehavior
-    #
-    # Shared behavior for MenubarCheckboxItem component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarCheckboxItemBehavior
-      # Returns HTML attributes for the checkbox item
-      def menubar_checkbox_item_html_attributes
-        attrs = {
-          class: menubar_checkbox_item_classes,
-          data: menubar_checkbox_item_data_attributes,
-          role: "menuitemcheckbox",
-          "aria-checked": checked?.to_s,
-          tabindex: "-1"
-        }
-
-        # Add disabled attribute if specified
-        attrs[:"data-disabled"] = "" if disabled?
-
-        attrs
-      end
-
-      # Returns combined CSS classes for the checkbox item
-      def menubar_checkbox_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-
-        TailwindMerge::Merger.new.merge([
-          "focus:bg-accent focus:text-accent-foreground",
-          "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm",
-          "outline-hidden select-none whitespace-nowrap",
-          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-          "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-          classes_value
-        ].compact.join(" "))
-      end
-
-      # Returns data attributes for the checkbox item
-      def menubar_checkbox_item_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          "ui--menubar-target": "item",
-          action: "click->ui--menubar#toggleCheckbox mouseenter->ui--menubar#trackHoveredItem",
-          state: checked? ? "checked" : "unchecked"
-        })
-      end
-
-      private
-
-      def checked?
-        defined?(@checked) && @checked
-      end
-
-      def disabled?
-        defined?(@disabled) && @disabled
-      end
-    end
+# MenubarCheckboxItemBehavior
+#
+# Shared behavior for MenubarCheckboxItem component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarCheckboxItemBehavior
+  # Returns HTML attributes for the checkbox item
+  def menubar_checkbox_item_html_attributes
+    attrs = {
+      class: menubar_checkbox_item_classes,
+      data: menubar_checkbox_item_data_attributes,
+      role: "menuitemcheckbox",
+      "aria-checked": checked?.to_s,
+      tabindex: "-1"
+    }
+
+    # Add disabled attribute if specified
+    attrs[:"data-disabled"] = "" if disabled?
+
+    attrs
+  end
+
+  # Returns combined CSS classes for the checkbox item
+  def menubar_checkbox_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+
+    TailwindMerge::Merger.new.merge([
+      "focus:bg-accent focus:text-accent-foreground",
+      "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm",
+      "outline-hidden select-none whitespace-nowrap",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      classes_value
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the checkbox item
+  def menubar_checkbox_item_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      "ui--menubar-target": "item",
+      action: "click->ui--menubar#selectItem mouseenter->ui--menubar#trackHoveredItem",
+      state: checked? ? "checked" : "unchecked"
+    })
+  end
+
+  private
+
+  def checked?
+    defined?(@checked) && @checked
+  end
+
+  def disabled?
+    defined?(@disabled) && @disabled
+  end
+end