fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/collapsible_behavior.rb

@@ -2,41 +2,56 @@
 
 require "tailwind_merge"
 
-    # CollapsibleBehavior
-    #
-    # Shared behavior for Collapsible root component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CollapsibleBehavior
-      def collapsible_html_attributes
-        attrs = {
-          data: collapsible_data_attributes
-        }
-        unless @as_child
-          attrs[:class] = collapsible_classes
-        end
-        attrs
-      end
+# UI::CollapsibleBehavior
+#
+# @ui_component Collapsible
+# @ui_category data-display
+#
+# @ui_anatomy Collapsible - Root container with state management (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature Animation support
+#
+# @ui_aria_pattern Disclosure
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+#
+# @ui_related accordion
+#
+module UI::CollapsibleBehavior
+  def collapsible_html_attributes
+    attrs = {
+      data: collapsible_data_attributes
+    }
+    unless @as_child
+      attrs[:class] = collapsible_classes
+    end
+    attrs
+  end
 
-      def collapsible_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          collapsible_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def collapsible_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      collapsible_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def collapsible_data_attributes
-        {
-          controller: "ui--collapsible",
-          slot: "collapsible",
-          state: @open ? "open" : "closed",
-          ui__collapsible_open_value: @open.to_s,
-          ui__collapsible_disabled_value: @disabled.to_s
-        }
-      end
+  def collapsible_data_attributes
+    {
+      controller: "ui--collapsible",
+      slot: "collapsible",
+      state: @open ? "open" : "closed",
+      ui__collapsible_open_value: @open.to_s,
+      ui__collapsible_disabled_value: @disabled.to_s
+    }
+  end
 
-      private
+  private
 
-      def collapsible_base_classes
-        "group/collapsible"
-      end
-    end
+  def collapsible_base_classes
+    "group/collapsible"
+  end
+end

data/app/behaviors/ui/collapsible_content_behavior.rb

@@ -2,38 +2,38 @@
 
 require "tailwind_merge"
 
-    # ContentBehavior
-    #
-    # Shared behavior for CollapsibleContent component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CollapsibleContentBehavior
-      def collapsible_content_html_attributes
-        attrs = {
-          class: collapsible_content_classes,
-          data: collapsible_content_data_attributes
-        }
-        attrs[:hidden] = true unless @force_mount
-        attrs
-      end
+# ContentBehavior
+#
+# Shared behavior for CollapsibleContent component across ERB, ViewComponent, and Phlex implementations.
+module UI::CollapsibleContentBehavior
+  def collapsible_content_html_attributes
+    attrs = {
+      class: collapsible_content_classes,
+      data: collapsible_content_data_attributes
+    }
+    attrs[:hidden] = true unless @force_mount
+    attrs
+  end
 
-      def collapsible_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          collapsible_content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def collapsible_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      collapsible_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def collapsible_content_data_attributes
-        {
-          slot: "collapsible-content",
-          state: "closed",
-          ui__collapsible_target: "content"
-        }
-      end
+  def collapsible_content_data_attributes
+    {
+      slot: "collapsible-content",
+      state: "closed",
+      ui__collapsible_target: "content"
+    }
+  end
 
-      private
+  private
 
-      def collapsible_content_base_classes
-        "overflow-hidden transition-[height] duration-[var(--duration-collapsible)] ease-[var(--ease-collapsible)] data-[state=closed]:h-0"
-      end
-    end
+  def collapsible_content_base_classes
+    "overflow-hidden transition-[height] duration-[var(--duration-collapsible)] ease-[var(--ease-collapsible)] data-[state=closed]:h-0"
+  end
+end

data/app/behaviors/ui/collapsible_trigger_behavior.rb

@@ -2,54 +2,54 @@
 
 require "tailwind_merge"
 
-    # TriggerBehavior
-    #
-    # Shared behavior for CollapsibleTrigger component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CollapsibleTriggerBehavior
-      # Base classes for standalone trigger (when not using as_child with Button)
-      # Includes focus ring, sizing, and ghost-like hover styles
-      # Matches Button with variant: :ghost, size: :sm, classes: "w-9 p-0"
-      TRIGGER_BASE_CLASSES = [
-        # Focus styles
-        "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        # Base button styles (rounded-lg to match Button)
-        "inline-flex items-center justify-center rounded-lg",
-        # Size (h-8 from size: :sm, w-9 and p-0 from custom classes)
-        "h-8 w-9 p-0",
-        # Ghost variant hover
-        "hover:bg-accent hover:text-accent-foreground",
-        # Transition
-        "transition-colors"
-      ].join(" ")
+# TriggerBehavior
+#
+# Shared behavior for CollapsibleTrigger component across ERB, ViewComponent, and Phlex implementations.
+module UI::CollapsibleTriggerBehavior
+  # Base classes for standalone trigger (when not using as_child with Button)
+  # Includes focus ring, sizing, and ghost-like hover styles
+  # Matches Button with variant: :ghost, size: :sm, classes: "w-9 p-0"
+  TRIGGER_BASE_CLASSES = [
+    # Focus styles
+    "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    # Base button styles (rounded-lg to match Button)
+    "inline-flex items-center justify-center rounded-lg",
+    # Size (h-8 from size: :sm, w-9 and p-0 from custom classes)
+    "h-8 w-9 p-0",
+    # Ghost variant hover
+    "hover:bg-accent hover:text-accent-foreground",
+    # Transition
+    "transition-colors"
+  ].join(" ")
 
-      def collapsible_trigger_html_attributes
-        attrs = {
-          data: collapsible_trigger_data_attributes
-        }
-        trigger_classes = collapsible_trigger_classes
-        attrs[:class] = trigger_classes unless trigger_classes.blank?
-        attrs
-      end
+  def collapsible_trigger_html_attributes
+    attrs = {
+      data: collapsible_trigger_data_attributes
+    }
+    trigger_classes = collapsible_trigger_classes
+    attrs[:class] = trigger_classes unless trigger_classes.blank?
+    attrs
+  end
 
-      def collapsible_trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        as_child_value = respond_to?(:as_child, true) ? as_child : @as_child
+  def collapsible_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    as_child_value = respond_to?(:as_child, true) ? as_child : @as_child
 
-        # Only apply base classes when NOT using as_child mode
-        # When as_child is true, the parent component provides its own styling
-        if as_child_value
-          return nil if classes_value.blank?
-          TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
-        else
-          TailwindMerge::Merger.new.merge([TRIGGER_BASE_CLASSES, classes_value].compact.join(" "))
-        end
-      end
-
-      def collapsible_trigger_data_attributes
-        {
-          slot: "collapsible-trigger",
-          ui__collapsible_target: "trigger",
-          action: "click->ui--collapsible#toggle"
-        }
-      end
+    # Only apply base classes when NOT using as_child mode
+    # When as_child is true, the parent component provides its own styling
+    if as_child_value
+      return nil if classes_value.blank?
+      TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
+    else
+      TailwindMerge::Merger.new.merge([TRIGGER_BASE_CLASSES, classes_value].compact.join(" "))
     end
+  end
+
+  def collapsible_trigger_data_attributes
+    {
+      slot: "collapsible-trigger",
+      ui__collapsible_target: "trigger",
+      action: "click->ui--collapsible#toggle"
+    }
+  end
+end

data/app/behaviors/ui/command_behavior.rb

@@ -2,36 +2,63 @@
 
 require "tailwind_merge"
 
-    # CommandBehavior
-    #
-    # Shared behavior for Command root component.
-    module UI::CommandBehavior
-      def command_html_attributes
-        {
-          class: command_classes,
-          data: command_data_attributes
-        }
-      end
+# UI::CommandBehavior
+#
+# @ui_component Command
+# @ui_category data-display
+#
+# @ui_anatomy Command - Root container for command palette (required)
+# @ui_anatomy Empty - Content shown when no items
+# @ui_anatomy Group - Container for grouping related items
+# @ui_anatomy Input - Text input field
+# @ui_anatomy Item - Individual item element
+# @ui_anatomy List - Container for list items
+# @ui_anatomy Separator - Visual divider between sections
+# @ui_anatomy Shortcut - Keyboard shortcut indicator
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Keyboard navigation with arrow keys
+#
+# @ui_aria_pattern Listbox
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+#
+# @ui_keyboard Enter Activates the focused element
+# @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 combobox
+# @ui_related dialog
+#
+module UI::CommandBehavior
+  def command_html_attributes
+    {
+      class: command_classes,
+      data: command_data_attributes
+    }
+  end
 
-      def command_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          command_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def command_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      command_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      def command_data_attributes
-        {
-          controller: "ui--command",
-          slot: "command",
-          ui__command_loop_value: @loop.to_s
-        }
-      end
+  def command_data_attributes
+    {
+      controller: "ui--command",
+      slot: "command",
+      ui__command_loop_value: @loop.to_s,
+      ui__command_autofocus_value: @autofocus.to_s
+    }
+  end
 
-      private
+  private
 
-      def command_base_classes
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md"
-      end
-    end
+  def command_base_classes
+    "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md"
+  end
+end

data/app/behaviors/ui/command_dialog_behavior.rb

@@ -1,30 +1,46 @@
 # frozen_string_literal: true
 
-    module UI::CommandDialogBehavior
-      def command_dialog_base_classes
-        ""
-      end
-
-      def command_dialog_classes
-        UI::TailwindMerge.merge([command_dialog_base_classes, @classes].compact.join(" "))
-      end
-
-      def command_dialog_html_attributes
-        {
-          data: {
-            controller: "ui--command-dialog",
-            ui__command_dialog_shortcut_value: @shortcut,
-            action: "keydown.#{shortcut_action}@document->ui--command-dialog#toggle"
-          }
-        }
-      end
-
-      def shortcut_action
-        # Convert "meta+j" to Stimulus format "meta+j"
-        @shortcut.downcase
-      end
-
-      def command_dialog_content_classes
-        "overflow-hidden p-0"
-      end
-    end
+# UI::CommandDialogBehavior
+
+# @ui_component Command Dialog
+
+# @ui_category other
+
+# @ui_anatomy Command Dialog - Root container with state management (required)
+
+# @ui_feature Keyboard navigation
+
+# @ui_feature Custom styling with Tailwind classes
+
+# @ui_feature Form integration
+
+# @ui_feature Animation support
+
+module UI::CommandDialogBehavior
+  def command_dialog_base_classes
+    ""
+  end
+
+  def command_dialog_classes
+    UI::TailwindMerge.merge([command_dialog_base_classes, @classes].compact.join(" "))
+  end
+
+  def command_dialog_html_attributes
+    {
+      data: {
+        controller: "ui--command-dialog",
+        ui__command_dialog_shortcut_value: @shortcut,
+        action: "keydown.#{shortcut_action}@document->ui--command-dialog#toggle"
+      }
+    }
+  end
+
+  def shortcut_action
+    # Convert "meta+j" to Stimulus format "meta+j"
+    @shortcut.downcase
+  end
+
+  def command_dialog_content_classes
+    "overflow-hidden p-0"
+  end
+end

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