fernandes-ui 0.1.0

data/app/behaviors/ui/collapsible_content_behavior.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      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

data/app/behaviors/ui/collapsible_trigger_behavior.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+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(" ")
+
+      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
+
+        # 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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      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

@@ -0,0 +1,30 @@
+# 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

data/app/behaviors/ui/command_empty_behavior.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      def command_empty_base_classes
+        "py-6 text-center text-sm hidden"
+      end
+    end

data/app/behaviors/ui/command_group_behavior.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+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
+
+      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_heading_classes
+        "px-2 py-1.5 text-xs font-medium text-muted-foreground"
+      end
+
+      private
+
+      def command_group_base_classes
+        "overflow-hidden p-1 text-foreground"
+      end
+    end

data/app/behaviors/ui/command_input_behavior.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+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
+
+      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_data_attributes
+        {
+          slot: "command-input",
+          ui__command_target: "input",
+          action: "input->ui--command#filter keydown->ui--command#handleKeydown"
+        }
+      end
+
+      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

data/app/behaviors/ui/command_item_behavior.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      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

data/app/behaviors/ui/command_list_behavior.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      private
+
+      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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      def command_separator_base_classes
+        "-mx-1 h-px bg-border"
+      end
+    end

data/app/behaviors/ui/command_shortcut_behavior.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+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
+
+      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
+
+      def command_shortcut_base_classes
+        "ml-auto text-xs tracking-widest text-muted-foreground"
+      end
+    end

data/app/behaviors/ui/context_menu_behavior.rb

@@ -0,0 +1,32 @@
+# 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
+
+      # 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

data/app/behaviors/ui/context_menu_checkbox_item_behavior.rb

@@ -0,0 +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
+
+      # 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
+
+      # 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

data/app/behaviors/ui/context_menu_content_behavior.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+    # ContextMenuContentBehavior
+    #
+    # Shared behavior for ContextMenuContent component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuContentBehavior
+      # Returns HTML attributes for the context menu content
+      def context_menu_content_html_attributes
+        {
+          class: context_menu_content_classes,
+          data: context_menu_content_data_attributes,
+          role: "menu",
+          tabindex: "-1"
+        }
+      end
+
+      # Returns combined CSS classes for the content
+      def context_menu_content_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md"
+
+        TailwindMerge::Merger.new.merge([
+          "hidden",
+          base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus target
+      def context_menu_content_data_attributes
+        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+        (attributes_value&.fetch(:data, {}) || {}).merge({
+          "ui--context-menu-target": "content",
+          state: "closed"
+        })
+      end
+    end

data/app/behaviors/ui/context_menu_item_behavior.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+    # ContextMenuItemBehavior
+    #
+    # Shared behavior for ContextMenuItem component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuItemBehavior
+      # Returns HTML attributes for the context menu item
+      def context_menu_item_html_attributes
+        {
+          class: context_menu_item_classes,
+          data: context_menu_item_data_attributes,
+          role: "menuitem",
+          tabindex: "-1"
+        }.tap do |attrs|
+          attrs[:href] = @href if @href
+        end
+      end
+
+      # Returns combined CSS classes for the menu item
+      def context_menu_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 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset=true]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+
+        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus target and actions
+      def context_menu_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,
+          inset: @inset,
+          variant: @variant
+        })
+      end
+    end

data/app/behaviors/ui/context_menu_label_behavior.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+    # ContextMenuLabelBehavior
+    #
+    # Shared behavior for ContextMenuLabel component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuLabelBehavior
+      # Returns HTML attributes for the context menu label
+      def context_menu_label_html_attributes
+        {
+          class: context_menu_label_classes,
+          data: context_menu_label_data_attributes
+        }
+      end
+
+      # Returns combined CSS classes for the label
+      def context_menu_label_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        base_classes = "text-foreground px-2 py-1.5 text-sm font-medium"
+
+        TailwindMerge::Merger.new.merge([
+          base_classes,
+          @inset ? "pl-8" : nil,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for the label
+      def context_menu_label_data_attributes
+        {
+          inset: @inset
+        }
+      end
+    end

data/app/behaviors/ui/context_menu_radio_group_behavior.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+    # ContextMenuRadioGroupBehavior
+    #
+    # Shared behavior for ContextMenuRadioGroup component across ERB, ViewComponent, and Phlex implementations.
+    module UI::ContextMenuRadioGroupBehavior
+      # Returns HTML attributes for the radio group
+      def context_menu_radio_group_html_attributes
+        {
+          class: context_menu_radio_group_classes,
+          role: "group"
+        }
+      end
+
+      # Returns combined CSS classes for the radio group
+      def context_menu_radio_group_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
+      end
+    end