fernandes-ui 0.1.1 → 0.1.2

data/app/behaviors/ui/toggle_group_behavior.rb

@@ -2,67 +2,65 @@
 
 require "tailwind_merge"
 
-module UI
-  # ToggleGroupBehavior
-  #
-  # Shared behavior for ToggleGroup (Root) component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent variant and size styling for the group container.
-  module ToggleGroupBehavior
-    # Returns HTML attributes for the toggle group container element
-    def toggle_group_html_attributes
-      attrs = {
-        class: toggle_group_classes,
-        role: @type == "single" ? "radiogroup" : "group",
-        data: {
-          controller: "ui--toggle-group",
-          "ui--toggle-group-type-value": @type || "single",
-          "ui--toggle-group-value-value": @value&.to_json || (@type == "multiple" ? "[]" : "null")
-        }
+# ToggleGroupBehavior
+#
+# Shared behavior for ToggleGroup (Root) component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent variant and size styling for the group container.
+module UI::ToggleGroupBehavior
+  # Returns HTML attributes for the toggle group container element
+  def toggle_group_html_attributes
+    attrs = {
+      class: toggle_group_classes,
+      role: @type == "single" ? "radiogroup" : "group",
+      data: {
+        controller: "ui--toggle-group",
+        "ui--toggle-group-type-value": @type || "single",
+        "ui--toggle-group-value-value": @value&.to_json || (@type == "multiple" ? "[]" : "null")
       }
+    }
 
-      # Add orientation for accessibility
-      attrs[:"data-orientation"] = @orientation if @orientation
-      attrs[:"data-spacing"] = @spacing.to_s if @spacing
-      attrs[:"data-variant"] = @variant if @variant
+    # Add orientation for accessibility
+    attrs[:"data-orientation"] = @orientation if @orientation
+    attrs[:"data-spacing"] = @spacing.to_s if @spacing
+    attrs[:"data-variant"] = @variant if @variant
 
-      attrs.compact
-    end
+    attrs.compact
+  end
 
-    # Returns combined CSS classes for the toggle group container
-    def toggle_group_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        toggle_group_base_classes,
-        toggle_group_spacing_classes,
-        toggle_group_variant_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes for the toggle group container
+  def toggle_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      toggle_group_base_classes,
+      toggle_group_spacing_classes,
+      toggle_group_variant_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all toggle groups
-    def toggle_group_base_classes
-      "group/toggle-group flex w-fit items-center rounded-md"
-    end
+  # Base classes applied to all toggle groups
+  def toggle_group_base_classes
+    "group/toggle-group flex w-fit items-center rounded-md"
+  end
 
-    # Spacing classes based on @spacing
-    def toggle_group_spacing_classes
-      spacing = @spacing || 0
-      if spacing == 0
-        ""
-      else
-        "gap-#{spacing}"
-      end
+  # Spacing classes based on @spacing
+  def toggle_group_spacing_classes
+    spacing = @spacing || 0
+    if spacing == 0
+      ""
+    else
+      "gap-#{spacing}"
     end
+  end
 
-    # Variant-specific classes (for outline with spacing=0, adds shadow)
-    def toggle_group_variant_classes
-      if @variant == "outline" && (@spacing.nil? || @spacing == 0)
-        "shadow-xs"
-      else
-        ""
-      end
+  # Variant-specific classes (for outline with spacing=0, adds shadow)
+  def toggle_group_variant_classes
+    if @variant == "outline" && (@spacing.nil? || @spacing == 0)
+      "shadow-xs"
+    else
+      ""
     end
   end
 end

data/app/behaviors/ui/toggle_group_item_behavior.rb

@@ -2,87 +2,85 @@
 
 require "tailwind_merge"
 
-module UI
-  # ToggleGroupItemBehavior
-  #
-  # Shared behavior for ToggleGroupItem component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent styling for items within a toggle group, inheriting variant/size from parent.
-  module ToggleGroupItemBehavior
-    # Returns HTML attributes for the toggle group item element
-    def toggle_group_item_html_attributes
-      attrs = {
-        class: toggle_group_item_classes,
-        type: "button",
-        role: @group_type == "single" ? "radio" : "button",
-        disabled: @disabled ? true : nil,
-        "aria-pressed": @group_type == "multiple" ? (@pressed ? "true" : "false") : nil,
-        "aria-checked": @group_type == "single" ? (@pressed ? "true" : "false") : nil,
-        data: {
-          "ui--toggle-group-target": "item",
-          action: "click->ui--toggle-group#toggle",
-          value: @value,
-          state: @pressed ? "on" : "off"
-        }
+# ToggleGroupItemBehavior
+#
+# Shared behavior for ToggleGroupItem component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling for items within a toggle group, inheriting variant/size from parent.
+module UI::ToggleGroupItemBehavior
+  # Returns HTML attributes for the toggle group item element
+  def toggle_group_item_html_attributes
+    attrs = {
+      class: toggle_group_item_classes,
+      type: "button",
+      role: @group_type == "single" ? "radio" : "button",
+      disabled: @disabled ? true : nil,
+      "aria-pressed": @group_type == "multiple" ? (@pressed ? "true" : "false") : nil,
+      "aria-checked": @group_type == "single" ? (@pressed ? "true" : "false") : nil,
+      data: {
+        "ui--toggle-group-target": "item",
+        action: "click->ui--toggle-group#toggle",
+        value: @value,
+        state: @pressed ? "on" : "off"
       }
+    }
 
-      # Add state attribute for CSS targeting
-      attrs[:"data-state"] = @pressed ? "on" : "off"
-      attrs[:"data-disabled"] = "" if @disabled
-      attrs[:"data-spacing"] = @spacing.to_s if @spacing
+    # Add state attribute for CSS targeting
+    attrs[:"data-state"] = @pressed ? "on" : "off"
+    attrs[:"data-disabled"] = "" if @disabled
+    attrs[:"data-spacing"] = @spacing.to_s if @spacing
 
-      attrs.compact
-    end
+    attrs.compact
+  end
 
-    # Returns combined CSS classes for the toggle group item
-    def toggle_group_item_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        toggle_group_item_base_classes,
-        toggle_group_item_variant_classes,
-        toggle_group_item_size_classes,
-        toggle_group_item_spacing_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes for the toggle group item
+  def toggle_group_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      toggle_group_item_base_classes,
+      toggle_group_item_variant_classes,
+      toggle_group_item_size_classes,
+      toggle_group_item_spacing_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all toggle group items
-    def toggle_group_item_base_classes
-      "inline-flex items-center justify-center gap-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:z-10 focus-visible:z-10 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap w-auto min-w-0 shrink-0"
-    end
+  # Base classes applied to all toggle group items
+  def toggle_group_item_base_classes
+    "inline-flex items-center justify-center gap-2 text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] focus:z-10 focus-visible:z-10 outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap w-auto min-w-0 shrink-0"
+  end
 
-    # Variant-specific classes based on @variant
-    def toggle_group_item_variant_classes
-      case @variant.to_s
-      when "default"
-        "bg-transparent"
-      when "outline"
-        "border border-input bg-transparent"
-      else
-        "bg-transparent"
-      end
+  # Variant-specific classes based on @variant
+  def toggle_group_item_variant_classes
+    case @variant.to_s
+    when "default"
+      "bg-transparent"
+    when "outline"
+      "border border-input bg-transparent"
+    else
+      "bg-transparent"
     end
+  end
 
-    # Size-specific classes based on @size
-    def toggle_group_item_size_classes
-      case @size.to_s
-      when "default"
-        "h-9 px-3"
-      when "sm"
-        "h-8 px-2.5 text-xs"
-      when "lg"
-        "h-10 px-3.5"
-      else
-        "h-9 px-3"
-      end
+  # Size-specific classes based on @size
+  def toggle_group_item_size_classes
+    case @size.to_s
+    when "default"
+      "h-9 px-3"
+    when "sm"
+      "h-8 px-2.5 text-xs"
+    when "lg"
+      "h-10 px-3.5"
+    else
+      "h-9 px-3"
     end
+  end
 
-    # Spacing-specific classes for rounded corners and borders
-    def toggle_group_item_spacing_classes
-      # Use data-[spacing=0] prefix to avoid issues with :first/:last pseudo-classes
-      # being affected by ERB comments in the DOM
-      "rounded-md data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md"
-    end
+  # Spacing-specific classes for rounded corners and borders
+  def toggle_group_item_spacing_classes
+    # Use data-[spacing=0] prefix to avoid issues with :first/:last pseudo-classes
+    # being affected by ERB comments in the DOM
+    "rounded-md data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md"
   end
 end

data/app/behaviors/ui/tooltip_behavior.rb

@@ -2,28 +2,42 @@
 
 require "tailwind_merge"
 
-    # TooltipBehavior
-    #
-    # Shared behavior for Tooltip root component.
-    # The Tooltip acts as a container and manages the tooltip state via Stimulus.
-    module UI::TooltipBehavior
-      # Returns HTML attributes for the tooltip root element
-      def tooltip_html_attributes
-        {
-          data: tooltip_data_attributes
-        }.compact
-      end
+# UI::TooltipBehavior
+#
+# @ui_component Tooltip
+# @ui_description Tooltip - Phlex implementation
+# @ui_category overlay
+#
+# @ui_anatomy Tooltip - Root container for tooltip. Manages tooltip state via Stimulus controller. (required)
+# @ui_anatomy Content - The popup content that displays tooltip information. (required)
+# @ui_anatomy Trigger - The interactive element that shows/hides the tooltip on hover/focus. (required)
+#
+# @ui_aria_pattern Tooltip
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+#
+# @ui_keyboard Escape Closes the component
+#
+# @ui_related popover
+# @ui_related hover_card
+#
+module UI::TooltipBehavior
+  # Returns HTML attributes for the tooltip root element
+  def tooltip_html_attributes
+    {
+      data: tooltip_data_attributes
+    }.compact
+  end
 
-      # Returns data attributes for the tooltip controller
-      def tooltip_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = (attributes_value&.fetch(:data, {}) || {})
+  # Returns data attributes for the tooltip controller
+  def tooltip_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = attributes_value&.fetch(:data, {}) || {}
 
-        # Add tooltip controller
-        controllers = [base_data[:controller], "ui--tooltip"].compact.join(" ")
+    # Add tooltip controller
+    controllers = [base_data[:controller], "ui--tooltip"].compact.join(" ")
 
-        base_data.merge({
-          controller: controllers
-        }).compact
-      end
-    end
+    base_data.merge({
+      controller: controllers
+    }).compact
+  end
+end

data/app/behaviors/ui/tooltip_content_behavior.rb

@@ -2,56 +2,56 @@
 
 require "tailwind_merge"
 
-    # TooltipContentBehavior
-    #
-    # Shared behavior for TooltipContent component.
-    # The content is the popup that displays tooltip information.
-    module UI::TooltipContentBehavior
-      # Returns HTML attributes for the tooltip content element
-      def tooltip_content_html_attributes
-        {
-          class: tooltip_content_classes,
-          data: tooltip_content_data_attributes
-        }.compact
-      end
-
-      # Returns combined CSS classes for the tooltip content
-      def tooltip_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          tooltip_content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
-
-      # Returns data attributes for the tooltip content
-      def tooltip_content_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = (attributes_value&.fetch(:data, {}) || {})
-
-        side_value = respond_to?(:side, true) ? side : @side
-        align_value = respond_to?(:align, true) ? align : @align
-        side_offset_value = respond_to?(:side_offset, true) ? side_offset : @side_offset
-
-        base_data.merge({
-          ui__tooltip_target: "content",
-          state: "closed",
-          side: side_value || "top",
-          align: align_value || "center",
-          ui__tooltip_side_offset_value: side_offset_value || 4
-        }).compact
-      end
-
-      private
-
-      # Base classes applied to all tooltip content (from shadcn/ui)
-      def tooltip_content_base_classes
-        "z-50 invisible overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md " \
-        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 " \
-        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 " \
-        "data-[state=closed]:opacity-0 data-[state=open]:opacity-100 " \
-        "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 " \
-        "data-[state=open]:visible"
-      end
-    end
+# TooltipContentBehavior
+#
+# Shared behavior for TooltipContent component.
+# The content is the popup that displays tooltip information.
+module UI::TooltipContentBehavior
+  # Returns HTML attributes for the tooltip content element
+  def tooltip_content_html_attributes
+    {
+      class: tooltip_content_classes,
+      data: tooltip_content_data_attributes
+    }.compact
+  end
+
+  # Returns combined CSS classes for the tooltip content
+  def tooltip_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      tooltip_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the tooltip content
+  def tooltip_content_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = attributes_value&.fetch(:data, {}) || {}
+
+    side_value = respond_to?(:side, true) ? side : @side
+    align_value = respond_to?(:align, true) ? align : @align
+    side_offset_value = respond_to?(:side_offset, true) ? side_offset : @side_offset
+
+    base_data.merge({
+      ui__tooltip_target: "content",
+      state: "closed",
+      side: side_value || "top",
+      align: align_value || "center",
+      ui__tooltip_side_offset_value: side_offset_value || 4
+    }).compact
+  end
+
+  private
+
+  # Base classes applied to all tooltip content (from shadcn/ui)
+  def tooltip_content_base_classes
+    "z-50 invisible overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md " \
+    "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 " \
+    "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 " \
+    "data-[state=closed]:opacity-0 data-[state=open]:opacity-100 " \
+    "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 " \
+    "data-[state=open]:visible"
+  end
+end

data/app/behaviors/ui/tooltip_trigger_behavior.rb

@@ -2,59 +2,59 @@
 
 require "tailwind_merge"
 
-    # TooltipTriggerBehavior
-    #
-    # Shared behavior for TooltipTrigger component.
-    # The trigger activates the tooltip on hover/focus.
-    # Supports asChild pattern for composition.
-    module UI::TooltipTriggerBehavior
-      # Returns HTML attributes for the tooltip trigger element
-      def tooltip_trigger_html_attributes
-        as_child_value = instance_variable_defined?(:@as_child) ? @as_child : false
-
-        attrs = {
-          data: tooltip_trigger_data_attributes
-        }.compact
-
-        # Only add button styling when not using asChild
-        # (asChild delegates styling to the child component)
-        unless as_child_value
-          attrs[:class] = tooltip_trigger_classes
-        end
-
-        attrs
-      end
-
-      # Returns combined CSS classes for the trigger button
-      def tooltip_trigger_classes
-        classes_value = instance_variable_defined?(:@classes) ? @classes : nil
-        TailwindMerge::Merger.new.merge([
-          tooltip_trigger_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
-
-      # Returns data attributes for the tooltip trigger
-      def tooltip_trigger_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        base_data = (attributes_value&.fetch(:data, {}) || {})
-
-        base_data.merge({
-          ui__tooltip_target: "trigger",
-          action: [base_data[:action], "mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focus->ui--tooltip#show blur->ui--tooltip#hide"].compact.join(" ")
-        }).compact
-      end
-
-      private
-
-      # Base classes for trigger button - matches Button styling with focus ring
-      def tooltip_trigger_base_classes
-        [
-          "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium",
-          "transition-all",
-          "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "h-9 px-4 py-2",
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
-        ].join(" ")
-      end
+# TooltipTriggerBehavior
+#
+# Shared behavior for TooltipTrigger component.
+# The trigger activates the tooltip on hover/focus.
+# Supports asChild pattern for composition.
+module UI::TooltipTriggerBehavior
+  # Returns HTML attributes for the tooltip trigger element
+  def tooltip_trigger_html_attributes
+    as_child_value = instance_variable_defined?(:@as_child) ? @as_child : false
+
+    attrs = {
+      data: tooltip_trigger_data_attributes
+    }.compact
+
+    # Only add button styling when not using asChild
+    # (asChild delegates styling to the child component)
+    unless as_child_value
+      attrs[:class] = tooltip_trigger_classes
     end
+
+    attrs
+  end
+
+  # Returns combined CSS classes for the trigger button
+  def tooltip_trigger_classes
+    classes_value = instance_variable_defined?(:@classes) ? @classes : nil
+    TailwindMerge::Merger.new.merge([
+      tooltip_trigger_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
+
+  # Returns data attributes for the tooltip trigger
+  def tooltip_trigger_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    base_data = attributes_value&.fetch(:data, {}) || {}
+
+    base_data.merge({
+      ui__tooltip_target: "trigger",
+      action: [base_data[:action], "mouseenter->ui--tooltip#show mouseleave->ui--tooltip#hide focus->ui--tooltip#show blur->ui--tooltip#hide"].compact.join(" ")
+    }).compact
+  end
+
+  private
+
+  # Base classes for trigger button - matches Button styling with focus ring
+  def tooltip_trigger_base_classes
+    [
+      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium",
+      "transition-all",
+      "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+      "h-9 px-4 py-2",
+      "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
+    ].join(" ")
+  end
+end

data/app/components/ui/accordion.rb

@@ -1,36 +1,36 @@
 # frozen_string_literal: true
 
-    # Accordion container component (Phlex)
-    # Wraps collapsible accordion items with Stimulus controller
-    #
-    # @example Basic usage
-    #   render UI::Accordion.new do
-    #     render UI::Item.new(value: "item-1") do
-    #       render UI::Trigger.new { "Is it accessible?" }
-    #       render UI::Content.new { "Yes. It adheres to the WAI-ARIA design pattern." }
-    #     end
-    #   end
-    #
-    # @example Multiple items open
-    #   render UI::Accordion.new(type: "multiple") do
-    #     # Multiple items can be open at once
-    #   end
-    class UI::Accordion < Phlex::HTML
-      include UI::AccordionBehavior
+# Accordion container component (Phlex)
+# Wraps collapsible accordion items with Stimulus controller
+#
+# @example Basic usage
+#   render UI::Accordion.new do
+#     render UI::Item.new(value: "item-1") do
+#       render UI::Trigger.new { "Is it accessible?" }
+#       render UI::Content.new { "Yes. It adheres to the WAI-ARIA design pattern." }
+#     end
+#   end
+#
+# @example Multiple items open
+#   render UI::Accordion.new(type: "multiple") do
+#     # Multiple items can be open at once
+#   end
+class UI::Accordion < Phlex::HTML
+  include UI::AccordionBehavior
 
-      # @param type [String] "single" (only one item open at a time) or "multiple" (multiple items can be open)
-      # @param collapsible [Boolean] whether the open item can be collapsed in "single" mode
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(type: "single", collapsible: false, classes: "", attributes: {}, **)
-        @type = type
-        @collapsible = collapsible
-        @classes = classes
-        @attributes = attributes
-        super()
-      end
+  # @param type [String] "single" (only one item open at a time) or "multiple" (multiple items can be open)
+  # @param collapsible [Boolean] whether the open item can be collapsed in "single" mode
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(type: "single", collapsible: false, classes: "", attributes: {}, **)
+    @type = type
+    @collapsible = collapsible
+    @classes = classes
+    @attributes = attributes
+    super()
+  end
 
-      def view_template(&block)
-        div(**accordion_html_attributes, &block)
-      end
-    end
+  def view_template(&block)
+    div(**accordion_html_attributes, &block)
+  end
+end