fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/menubar_content_behavior.rb

@@ -1,53 +1,53 @@
 # frozen_string_literal: true
 
-    # MenubarContentBehavior
-    #
-    # Shared behavior for MenubarContent component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarContentBehavior
-      # Returns HTML attributes for the content container
-      def menubar_content_html_attributes
-        {
-          class: menubar_content_classes,
-          data: menubar_content_data_attributes,
-          role: "menu",
-          tabindex: "-1"
-        }
-      end
+# MenubarContentBehavior
+#
+# Shared behavior for MenubarContent component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarContentBehavior
+  # Returns HTML attributes for the content container
+  def menubar_content_html_attributes
+    {
+      class: menubar_content_classes,
+      data: menubar_content_data_attributes,
+      role: "menu",
+      tabindex: "-1"
+    }
+  end
 
-      # Returns combined CSS classes for the content
-      def menubar_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-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
-          "hidden absolute"
-        ].join(" ")
+  # Returns combined CSS classes for the content
+  def menubar_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-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
+      "hidden absolute"
+    ].join(" ")
 
-        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 Stimulus target
-      def menubar_content_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+  # Returns data attributes for Stimulus target
+  def menubar_content_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
 
-        align_value = defined?(@align) ? @align : "start"
-        side_value = defined?(@side) ? @side : "bottom"
+    align_value = defined?(@align) ? @align : "start"
+    side_value = defined?(@side) ? @side : "bottom"
 
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          "ui--menubar-target": "content",
-          state: "closed",
-          side: side_value,
-          align: align_value
-        })
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      "ui--menubar-target": "content",
+      state: "closed",
+      side: side_value,
+      align: align_value
+    })
+  end
+end

data/app/behaviors/ui/menubar_item_behavior.rb

@@ -1,78 +1,78 @@
 # frozen_string_literal: true
 
-    # MenubarItemBehavior
-    #
-    # Shared behavior for MenubarItem component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarItemBehavior
-      # Returns HTML attributes for the menu item
-      def menubar_item_html_attributes
-        attrs = {
-          class: menubar_item_classes,
-          data: menubar_item_data_attributes,
-          role: "menuitem",
-          tabindex: "-1"
-        }
+# MenubarItemBehavior
+#
+# Shared behavior for MenubarItem component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarItemBehavior
+  # Returns HTML attributes for the menu item
+  def menubar_item_html_attributes
+    attrs = {
+      class: menubar_item_classes,
+      data: menubar_item_data_attributes,
+      role: "menuitem",
+      tabindex: "-1"
+    }
 
-        # Add disabled attribute if specified
-        attrs[:"data-disabled"] = "" if disabled?
+    # Add disabled attribute if specified
+    attrs[:"data-disabled"] = "" if disabled?
 
-        attrs
-      end
+    attrs
+  end
 
-      # Returns combined CSS classes for the item
-      def menubar_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        variant_classes = variant_class
-        inset_class = inset? ? "pl-8" : ""
+  # Returns combined CSS classes for the item
+  def menubar_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    variant_classes = variant_class
+    inset_class = inset? ? "pl-8" : ""
 
-        TailwindMerge::Merger.new.merge([
-          "focus:bg-accent focus:text-accent-foreground",
-          "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 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",
-          variant_classes,
-          inset_class,
-          classes_value
-        ].compact.join(" "))
-      end
+    TailwindMerge::Merger.new.merge([
+      "focus:bg-accent focus:text-accent-foreground",
+      "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 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",
+      variant_classes,
+      inset_class,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the item
-      def menubar_item_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          "ui--menubar-target": "item",
-          action: "click->ui--menubar#selectItem mouseenter->ui--menubar#trackHoveredItem"
-        }
+  # Returns data attributes for the item
+  def menubar_item_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      "ui--menubar-target": "item",
+      action: "click->ui--menubar#selectItem mouseenter->ui--menubar#trackHoveredItem"
+    }
 
-        # Add variant if destructive
-        base_data[:variant] = "destructive" if destructive?
+    # Add variant if destructive
+    base_data[:variant] = "destructive" if destructive?
 
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
 
-      private
+  private
 
-      def variant_class
-        return "" unless destructive?
+  def variant_class
+    return "" unless destructive?
 
-        [
-          "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"
-        ].join(" ")
-      end
+    [
+      "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"
+    ].join(" ")
+  end
 
-      def destructive?
-        defined?(@variant) && @variant == :destructive
-      end
+  def destructive?
+    defined?(@variant) && @variant == :destructive
+  end
 
-      def inset?
-        defined?(@inset) && @inset
-      end
+  def inset?
+    defined?(@inset) && @inset
+  end
 
-      def disabled?
-        defined?(@disabled) && @disabled
-      end
-    end
+  def disabled?
+    defined?(@disabled) && @disabled
+  end
+end

data/app/behaviors/ui/menubar_label_behavior.rb

@@ -1,41 +1,41 @@
 # frozen_string_literal: true
 
-    # MenubarLabelBehavior
-    #
-    # Shared behavior for MenubarLabel component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarLabelBehavior
-      # Returns HTML attributes for the label
-      def menubar_label_html_attributes
-        {
-          class: menubar_label_classes,
-          data: menubar_label_data_attributes
-        }
-      end
+# MenubarLabelBehavior
+#
+# Shared behavior for MenubarLabel component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarLabelBehavior
+  # Returns HTML attributes for the label
+  def menubar_label_html_attributes
+    {
+      class: menubar_label_classes,
+      data: menubar_label_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the label
-      def menubar_label_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        inset_class = inset? ? "pl-8" : ""
+  # Returns combined CSS classes for the label
+  def menubar_label_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    inset_class = inset? ? "pl-8" : ""
 
-        TailwindMerge::Merger.new.merge([
-          "px-2 py-1.5 text-sm font-medium",
-          inset_class,
-          classes_value
-        ].compact.join(" "))
-      end
+    TailwindMerge::Merger.new.merge([
+      "px-2 py-1.5 text-sm font-medium",
+      inset_class,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the label
-      def menubar_label_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {}
-        base_data[:inset] = "" if inset?
+  # Returns data attributes for the label
+  def menubar_label_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {}
+    base_data[:inset] = "" if inset?
 
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
 
-      private
+  private
 
-      def inset?
-        defined?(@inset) && @inset
-      end
-    end
+  def inset?
+    defined?(@inset) && @inset
+  end
+end

data/app/behaviors/ui/menubar_menu_behavior.rb

@@ -1,39 +1,43 @@
 # frozen_string_literal: true
 
-    # MenubarMenuBehavior
-    #
-    # Shared behavior for MenubarMenu component across ERB, ViewComponent, and Phlex implementations.
-    # This is a wrapper for each top-level menu in the menubar.
-    module UI::MenubarMenuBehavior
-      # Returns HTML attributes for the menu wrapper
-      def menubar_menu_html_attributes
-        attrs = {
-          class: menubar_menu_classes,
-          data: menubar_menu_data_attributes
-        }
+# UI::MenubarMenuBehavior
+#
+# @ui_component Menubar Menu
+# @ui_description Menu - Phlex implementation
+# @ui_category other
+#
+# @ui_anatomy Menubar Menu - Wrapper for each top-level menu in the menubar. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::MenubarMenuBehavior
+  # Returns HTML attributes for the menu wrapper
+  def menubar_menu_html_attributes
+    {
+      class: menubar_menu_classes,
+      data: menubar_menu_data_attributes
+    }
+  end
 
-        attrs
-      end
+  # Returns combined CSS classes for the menu wrapper
+  def menubar_menu_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "relative",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns combined CSS classes for the menu wrapper
-      def menubar_menu_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "relative",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns data attributes for Stimulus target
+  def menubar_menu_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      "ui--menubar-target": "menu"
+    }
 
-      # Returns data attributes for Stimulus target
-      def menubar_menu_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          "ui--menubar-target": "menu"
-        }
+    # Add value if provided (used to identify which menu is open)
+    base_data[:"ui--menubar-value"] = @value if defined?(@value) && @value
 
-        # Add value if provided (used to identify which menu is open)
-        base_data[:"ui--menubar-value"] = @value if defined?(@value) && @value
-
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end

data/app/behaviors/ui/menubar_radio_group_behavior.rb

@@ -1,34 +1,34 @@
 # frozen_string_literal: true
 
-    # MenubarRadioGroupBehavior
-    #
-    # Shared behavior for MenubarRadioGroup component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarRadioGroupBehavior
-      # Returns HTML attributes for the radio group
-      def menubar_radio_group_html_attributes
-        {
-          class: menubar_radio_group_classes,
-          data: menubar_radio_group_data_attributes,
-          role: "group"
-        }
-      end
+# MenubarRadioGroupBehavior
+#
+# Shared behavior for MenubarRadioGroup component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarRadioGroupBehavior
+  # Returns HTML attributes for the radio group
+  def menubar_radio_group_html_attributes
+    {
+      class: menubar_radio_group_classes,
+      data: menubar_radio_group_data_attributes,
+      role: "group"
+    }
+  end
 
-      # Returns combined CSS classes for the radio group
-      def menubar_radio_group_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the radio group
+  def menubar_radio_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the radio group
-      def menubar_radio_group_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {}
+  # Returns data attributes for the radio group
+  def menubar_radio_group_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {}
 
-        # Store the current value if provided
-        base_data[:"ui--menubar-radio-value"] = @value if defined?(@value) && @value
+    # Store the current value if provided
+    base_data[:"ui--menubar-radio-value"] = @value if defined?(@value) && @value
 
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+end

data/app/behaviors/ui/menubar_radio_item_behavior.rb

@@ -1,61 +1,61 @@
 # frozen_string_literal: true
 
-    # MenubarRadioItemBehavior
-    #
-    # Shared behavior for MenubarRadioItem component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarRadioItemBehavior
-      # Returns HTML attributes for the radio item
-      def menubar_radio_item_html_attributes
-        attrs = {
-          class: menubar_radio_item_classes,
-          data: menubar_radio_item_data_attributes,
-          role: "menuitemradio",
-          "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 radio item
-      def menubar_radio_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 radio item
-      def menubar_radio_item_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = {
-          "ui--menubar-target": "item",
-          action: "click->ui--menubar#selectRadio mouseenter->ui--menubar#trackHoveredItem",
-          state: checked? ? "checked" : "unchecked"
-        }
-
-        # Store the value for this radio item
-        base_data[:"ui--menubar-radio-item-value"] = @value if defined?(@value) && @value
-
-        (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
-      end
-
-      private
-
-      def checked?
-        defined?(@checked) && @checked
-      end
-
-      def disabled?
-        defined?(@disabled) && @disabled
-      end
-    end
+# MenubarRadioItemBehavior
+#
+# Shared behavior for MenubarRadioItem component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarRadioItemBehavior
+  # Returns HTML attributes for the radio item
+  def menubar_radio_item_html_attributes
+    attrs = {
+      class: menubar_radio_item_classes,
+      data: menubar_radio_item_data_attributes,
+      role: "menuitemradio",
+      "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 radio item
+  def menubar_radio_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 radio item
+  def menubar_radio_item_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = {
+      "ui--menubar-target": "item",
+      action: "click->ui--menubar#selectRadio mouseenter->ui--menubar#trackHoveredItem",
+      state: checked? ? "checked" : "unchecked"
+    }
+
+    # Store the value for this radio item
+    base_data[:"ui--menubar-radio-item-value"] = @value if defined?(@value) && @value
+
+    (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+  end
+
+  private
+
+  def checked?
+    defined?(@checked) && @checked
+  end
+
+  def disabled?
+    defined?(@disabled) && @disabled
+  end
+end

data/app/behaviors/ui/menubar_separator_behavior.rb

@@ -1,30 +1,30 @@
 # frozen_string_literal: true
 
-    # MenubarSeparatorBehavior
-    #
-    # Shared behavior for MenubarSeparator component across ERB, ViewComponent, and Phlex implementations.
-    module UI::MenubarSeparatorBehavior
-      # Returns HTML attributes for the separator
-      def menubar_separator_html_attributes
-        {
-          class: menubar_separator_classes,
-          data: menubar_separator_data_attributes,
-          role: "separator"
-        }
-      end
+# MenubarSeparatorBehavior
+#
+# Shared behavior for MenubarSeparator component across ERB, ViewComponent, and Phlex implementations.
+module UI::MenubarSeparatorBehavior
+  # Returns HTML attributes for the separator
+  def menubar_separator_html_attributes
+    {
+      class: menubar_separator_classes,
+      data: menubar_separator_data_attributes,
+      role: "separator"
+    }
+  end
 
-      # Returns combined CSS classes for the separator
-      def menubar_separator_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "bg-border -mx-1 my-1 h-px",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the separator
+  def menubar_separator_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "bg-border -mx-1 my-1 h-px",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for the separator
-      def menubar_separator_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {})
-      end
-    end
+  # Returns data attributes for the separator
+  def menubar_separator_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    attributes_value&.fetch(:data, {}) || {}
+  end
+end