fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/command_empty_behavior.rb

@@ -2,35 +2,35 @@
 
 require "tailwind_merge"
 
-    # EmptyBehavior
-    #
-    # Shared behavior for CommandEmpty component.
-    module UI::CommandEmptyBehavior
-      def command_empty_html_attributes
-        {
-          class: command_empty_classes,
-          data: command_empty_data_attributes
-        }
-      end
+# EmptyBehavior
+#
+# Shared behavior for CommandEmpty component.
+module UI::CommandEmptyBehavior
+  def command_empty_html_attributes
+    {
+      class: command_empty_classes,
+      data: command_empty_data_attributes
+    }
+  end
 
-      def command_empty_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_empty_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_empty_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_empty_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def command_empty_data_attributes
-        {
-          slot: "command-empty",
-          ui__command_target: "empty"
-        }
-      end
+  def command_empty_data_attributes
+    {
+      slot: "command-empty",
+      ui__command_target: "empty"
+    }
+  end
 
-      private
+  private
 
-      def command_empty_base_classes
-        "py-6 text-center text-sm hidden"
-      end
-    end
+  def command_empty_base_classes
+    "py-6 text-center text-sm hidden"
+  end
+end

data/app/behaviors/ui/command_group_behavior.rb

@@ -2,42 +2,42 @@
 
 require "tailwind_merge"
 
-    # GroupBehavior
-    #
-    # Shared behavior for CommandGroup component.
-    module UI::CommandGroupBehavior
-      def command_group_html_attributes
-        attrs = {
-          class: command_group_classes,
-          data: command_group_data_attributes,
-          role: "group"
-        }
-        attrs["aria-labelledby"] = @heading_id if @heading.present?
-        attrs
-      end
+# GroupBehavior
+#
+# Shared behavior for CommandGroup component.
+module UI::CommandGroupBehavior
+  def command_group_html_attributes
+    attrs = {
+      class: command_group_classes,
+      data: command_group_data_attributes,
+      role: "group"
+    }
+    attrs["aria-labelledby"] = @heading_id if @heading.present?
+    attrs
+  end
 
-      def command_group_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_group_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_group_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def command_group_data_attributes
-        {
-          slot: "command-group",
-          ui__command_target: "group"
-        }
-      end
+  def command_group_data_attributes
+    {
+      slot: "command-group",
+      ui__command_target: "group"
+    }
+  end
 
-      def command_group_heading_classes
-        "px-2 py-1.5 text-xs font-medium text-muted-foreground"
-      end
+  def command_group_heading_classes
+    "px-2 py-1.5 text-xs font-medium text-muted-foreground"
+  end
 
-      private
+  private
 
-      def command_group_base_classes
-        "overflow-hidden p-1 text-foreground"
-      end
-    end
+  def command_group_base_classes
+    "overflow-hidden p-1 text-foreground"
+  end
+end

data/app/behaviors/ui/command_input_behavior.rb

@@ -2,48 +2,48 @@
 
 require "tailwind_merge"
 
-    # InputBehavior
-    #
-    # Shared behavior for CommandInput component.
-    module UI::CommandInputBehavior
-      def command_input_wrapper_classes
-        "flex items-center border-b px-3"
-      end
+# InputBehavior
+#
+# Shared behavior for CommandInput component.
+module UI::CommandInputBehavior
+  def command_input_wrapper_classes
+    "flex items-center border-b px-3"
+  end
 
-      def command_input_html_attributes
-        {
-          class: command_input_classes,
-          data: command_input_data_attributes,
-          type: "text",
-          placeholder: @placeholder || "Type a command or search...",
-          autocomplete: "off",
-          autocorrect: "off",
-          spellcheck: "false",
-          role: "combobox",
-          "aria-expanded": "true",
-          "aria-autocomplete": "list"
-        }
-      end
+  def command_input_html_attributes
+    {
+      class: command_input_classes,
+      data: command_input_data_attributes,
+      type: "text",
+      placeholder: @placeholder || "Type a command or search...",
+      autocomplete: "off",
+      autocorrect: "off",
+      spellcheck: "false",
+      role: "combobox",
+      "aria-expanded": "true",
+      "aria-autocomplete": "list"
+    }
+  end
 
-      def command_input_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_input_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_input_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_input_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def command_input_data_attributes
-        {
-          slot: "command-input",
-          ui__command_target: "input",
-          action: "input->ui--command#filter keydown->ui--command#handleKeydown"
-        }
-      end
+  def command_input_data_attributes
+    {
+      slot: "command-input",
+      ui__command_target: "input",
+      action: "input->ui--command#filter keydown->ui--command#handleKeydown"
+    }
+  end
 
-      private
+  private
 
-      def command_input_base_classes
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-      end
-    end
+  def command_input_base_classes
+    "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+  end
+end

data/app/behaviors/ui/command_item_behavior.rb

@@ -2,46 +2,46 @@
 
 require "tailwind_merge"
 
-    # ItemBehavior
-    #
-    # Shared behavior for CommandItem component.
-    module UI::CommandItemBehavior
-      def command_item_html_attributes
-        attrs = {
-          class: command_item_classes,
-          data: command_item_data_attributes,
-          role: "option",
-          "aria-selected": "false"
-        }
-        attrs["aria-disabled"] = "true" if @disabled
-        attrs
-      end
+# ItemBehavior
+#
+# Shared behavior for CommandItem component.
+module UI::CommandItemBehavior
+  def command_item_html_attributes
+    attrs = {
+      class: command_item_classes,
+      data: command_item_data_attributes,
+      role: "option",
+      "aria-selected": "false"
+    }
+    attrs["aria-disabled"] = "true" if @disabled
+    attrs
+  end
 
-      def command_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_item_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_item_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def command_item_data_attributes
-        attrs = {
-          slot: "command-item",
-          ui__command_target: "item",
-          action: "click->ui--command#select",
-          value: @value || ""
-        }
-        attrs[:disabled] = "" if @disabled
-        attrs
-      end
+  def command_item_data_attributes
+    attrs = {
+      slot: "command-item",
+      ui__command_target: "item",
+      action: "click->ui--command#select",
+      value: @value || ""
+    }
+    attrs[:disabled] = "" if @disabled
+    attrs
+  end
 
-      private
+  private
 
-      def command_item_base_classes
-        "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none " \
-        "hover:bg-accent hover:text-accent-foreground " \
-        "data-[disabled]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground " \
-        "data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
-      end
-    end
+  def command_item_base_classes
+    "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none " \
+    "hover:bg-accent hover:text-accent-foreground " \
+    "data-[disabled]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground " \
+    "data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  end
+end

data/app/behaviors/ui/command_list_behavior.rb

@@ -2,37 +2,37 @@
 
 require "tailwind_merge"
 
-    # ListBehavior
-    #
-    # Shared behavior for CommandList component.
-    module UI::CommandListBehavior
-      def command_list_html_attributes
-        {
-          class: command_list_classes,
-          data: command_list_data_attributes,
-          role: "listbox",
-          tabindex: "-1" # Not focusable via Tab - navigation is via arrows in combobox input
-        }
-      end
+# ListBehavior
+#
+# Shared behavior for CommandList component.
+module UI::CommandListBehavior
+  def command_list_html_attributes
+    {
+      class: command_list_classes,
+      data: command_list_data_attributes,
+      role: "listbox",
+      tabindex: "-1" # Not focusable via Tab - navigation is via arrows in combobox input
+    }
+  end
 
-      def command_list_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_list_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_list_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_list_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def command_list_data_attributes
-        {
-          slot: "command-list",
-          ui__command_target: "list"
-        }
-      end
+  def command_list_data_attributes
+    {
+      slot: "command-list",
+      ui__command_target: "list"
+    }
+  end
 
-      private
+  private
 
-      def command_list_base_classes
-        "max-h-[300px] overflow-x-hidden overflow-y-auto outline-none"
-      end
-    end
+  def command_list_base_classes
+    "max-h-[300px] overflow-x-hidden overflow-y-auto outline-none"
+  end
+end

data/app/behaviors/ui/command_separator_behavior.rb

@@ -2,29 +2,29 @@
 
 require "tailwind_merge"
 
-    # SeparatorBehavior
-    #
-    # Shared behavior for CommandSeparator component.
-    module UI::CommandSeparatorBehavior
-      def command_separator_html_attributes
-        {
-          class: command_separator_classes,
-          data: { slot: "command-separator" },
-          role: "separator"
-        }
-      end
+# SeparatorBehavior
+#
+# Shared behavior for CommandSeparator component.
+module UI::CommandSeparatorBehavior
+  def command_separator_html_attributes
+    {
+      class: command_separator_classes,
+      data: {slot: "command-separator"},
+      role: "separator"
+    }
+  end
 
-      def command_separator_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_separator_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_separator_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_separator_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def command_separator_base_classes
-        "-mx-1 h-px bg-border"
-      end
-    end
+  def command_separator_base_classes
+    "-mx-1 h-px bg-border"
+  end
+end

data/app/behaviors/ui/command_shortcut_behavior.rb

@@ -2,28 +2,28 @@
 
 require "tailwind_merge"
 
-    # ShortcutBehavior
-    #
-    # Shared behavior for CommandShortcut component.
-    module UI::CommandShortcutBehavior
-      def command_shortcut_html_attributes
-        {
-          class: command_shortcut_classes,
-          data: { slot: "command-shortcut" }
-        }
-      end
+# ShortcutBehavior
+#
+# Shared behavior for CommandShortcut component.
+module UI::CommandShortcutBehavior
+  def command_shortcut_html_attributes
+    {
+      class: command_shortcut_classes,
+      data: {slot: "command-shortcut"}
+    }
+  end
 
-      def command_shortcut_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_shortcut_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_shortcut_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_shortcut_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def command_shortcut_base_classes
-        "ml-auto text-xs tracking-widest text-muted-foreground"
-      end
-    end
+  def command_shortcut_base_classes
+    "ml-auto text-xs tracking-widest text-muted-foreground"
+  end
+end

data/app/behaviors/ui/context_menu_behavior.rb

@@ -1,32 +1,59 @@
 # frozen_string_literal: true
 
-    # ContextMenuBehavior
-    #
-    # Shared behavior for ContextMenu component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation.
-    module UI::ContextMenuBehavior
-      # Returns HTML attributes for the context menu container
-      def context_menu_html_attributes
-        {
-          class: context_menu_classes,
-          data: context_menu_data_attributes
-        }
-      end
+# UI::ContextMenuBehavior
+#
+# @ui_component Context Menu
+# @ui_description ContextMenu - Phlex implementation
+# @ui_category overlay
+#
+# @ui_anatomy Context Menu - Container for context menus triggered by right-click. (required)
+# @ui_anatomy Content - Menu items container with animations and positioning. (required)
+# @ui_anatomy Item - Individual menu item that can be rendered as a link or div.
+# @ui_anatomy Label - Non-interactive label for grouping menu items.
+# @ui_anatomy Separator - A visual divider between menu items.
+# @ui_anatomy Shortcut - Displays keyboard shortcut text for a menu item.
+# @ui_anatomy Trigger - The element that triggers the context menu on right-click. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Click outside to close
+#
+# @ui_aria_pattern Menu
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/menu/
+#
+# @ui_keyboard Enter 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 Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+#
+# @ui_related dropdown_menu
+# @ui_related menubar
+#
+module UI::ContextMenuBehavior
+  # Returns HTML attributes for the context menu container
+  def context_menu_html_attributes
+    {
+      class: context_menu_classes,
+      data: context_menu_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the context menu
-      def context_menu_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "relative inline-block",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the context menu
+  def context_menu_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "relative inline-block",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus controller
-      def context_menu_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          controller: "ui--context-menu"
-        })
-      end
-    end
+  # Returns data attributes for Stimulus controller
+  def context_menu_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      controller: "ui--context-menu"
+    })
+  end
+end

data/app/behaviors/ui/context_menu_checkbox_item_behavior.rb

@@ -1,38 +1,38 @@
 # frozen_string_literal: true
 
-    # ContextMenuCheckboxItemBehavior
-    #
-    # Shared behavior for ContextMenuCheckboxItem component across ERB, ViewComponent, and Phlex implementations.
-    module UI::ContextMenuCheckboxItemBehavior
-      # Returns HTML attributes for the checkbox item
-      def context_menu_checkbox_item_html_attributes
-        {
-          class: context_menu_checkbox_item_classes,
-          data: context_menu_checkbox_item_data_attributes,
-          role: "menuitemcheckbox",
-          "aria-checked": @checked.to_s,
-          tabindex: "-1"
-        }
-      end
+# ContextMenuCheckboxItemBehavior
+#
+# Shared behavior for ContextMenuCheckboxItem component across ERB, ViewComponent, and Phlex implementations.
+module UI::ContextMenuCheckboxItemBehavior
+  # Returns HTML attributes for the checkbox item
+  def context_menu_checkbox_item_html_attributes
+    {
+      class: context_menu_checkbox_item_classes,
+      data: context_menu_checkbox_item_data_attributes,
+      role: "menuitemcheckbox",
+      "aria-checked": @checked.to_s,
+      tabindex: "-1"
+    }
+  end
 
-      # Returns combined CSS classes for the checkbox item
-      def context_menu_checkbox_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        base_classes = "hover:bg-accent hover:text-accent-foreground 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  # Returns combined CSS classes for the checkbox item
+  def context_menu_checkbox_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base_classes = "hover:bg-accent hover:text-accent-foreground 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 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 
-        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
-      end
+    TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+  end
 
-      # Returns data attributes for the checkbox item
-      def context_menu_checkbox_item_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        existing_action = (attributes_value&.fetch(:data, {}) || {}).fetch(:action, "")
-        combined_action = [existing_action, "mouseenter->ui--context-menu#trackHoveredItem"].reject(&:empty?).join(" ")
+  # Returns data attributes for the checkbox item
+  def context_menu_checkbox_item_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    existing_action = (attributes_value&.fetch(:data, {}) || {}).fetch(:action, "")
+    combined_action = [existing_action, "mouseenter->ui--context-menu#trackHoveredItem"].reject(&:empty?).join(" ")
 
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          "ui--context-menu-target": "item",
-          action: combined_action,
-          state: @checked ? "checked" : "unchecked"
-        })
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      "ui--context-menu-target": "item",
+      action: combined_action,
+      state: @checked ? "checked" : "unchecked"
+    })
+  end
+end