fernandes-ui 0.1.1 → 0.1.2

data/app/behaviors/ui/breadcrumb_behavior.rb

@@ -1,22 +1,38 @@
 # frozen_string_literal: true
 
-    # BreadcrumbBehavior
-    #
-    # Shared behavior for Breadcrumb component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for the breadcrumb container.
-    module UI::BreadcrumbBehavior
-      # Returns HTML attributes for the breadcrumb container element
-      def breadcrumb_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: breadcrumb_classes,
-          "aria-label": "breadcrumb"
-        }.merge(attributes_value || {})
-      end
+# UI::BreadcrumbBehavior
+#
+# @ui_component Breadcrumb
+# @ui_description Breadcrumb - Phlex implementation
+# @ui_category navigation
+#
+# @ui_anatomy Breadcrumb - A navigation breadcrumb component for displaying hierarchical navigation. (required)
+# @ui_anatomy Ellipsis - Indicator for collapsed/hidden breadcrumb items.
+# @ui_anatomy Item - Individual breadcrumb entry within the breadcrumb list.
+# @ui_anatomy Link - Clickable breadcrumb link for navigation.
+# @ui_anatomy List - Container for breadcrumb items, rendered as an ordered list.
+# @ui_anatomy Page - Current page indicator (non-clickable) for breadcrumbs.
+# @ui_anatomy Separator - Visual divider between breadcrumb items with default chevron icon.
+#
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_aria_pattern Breadcrumb
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
+# @ui_aria_attr aria-label
+#
+module UI::BreadcrumbBehavior
+  # Returns HTML attributes for the breadcrumb container element
+  def breadcrumb_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: breadcrumb_classes,
+      "aria-label": "breadcrumb"
+    }.merge(attributes_value || {})
+  end
 
-      # Returns combined CSS classes for the breadcrumb container
-      def breadcrumb_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        classes_value || ""
-      end
-    end
+  # Returns combined CSS classes for the breadcrumb container
+  def breadcrumb_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    classes_value || ""
+  end
+end

data/app/behaviors/ui/breadcrumb_ellipsis_behavior.rb

@@ -1,34 +1,34 @@
 # frozen_string_literal: true
 
-    # BreadcrumbEllipsisBehavior
-    #
-    # Shared behavior for Breadcrumb Ellipsis component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for collapsed items indicator.
-    module UI::BreadcrumbEllipsisBehavior
-      # Returns HTML attributes for the breadcrumb ellipsis element
-      def breadcrumb_ellipsis_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: breadcrumb_ellipsis_classes,
-          role: "presentation",
-          "aria-hidden": "true"
-        }.merge(attributes_value || {})
-      end
+# BreadcrumbEllipsisBehavior
+#
+# Shared behavior for Breadcrumb Ellipsis component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for collapsed items indicator.
+module UI::BreadcrumbEllipsisBehavior
+  # Returns HTML attributes for the breadcrumb ellipsis element
+  def breadcrumb_ellipsis_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: breadcrumb_ellipsis_classes,
+      role: "presentation",
+      "aria-hidden": "true"
+    }.merge(attributes_value || {})
+  end
 
-      # Returns combined CSS classes for the breadcrumb ellipsis
-      def breadcrumb_ellipsis_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          breadcrumb_ellipsis_base_classes,
-          classes_value
+  # Returns combined CSS classes for the breadcrumb ellipsis
+  def breadcrumb_ellipsis_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      breadcrumb_ellipsis_base_classes,
+      classes_value
 
-        ].compact.join(" "))
-      end
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to breadcrumb ellipsis
-      def breadcrumb_ellipsis_base_classes
-        "flex h-9 w-9 items-center justify-center"
-      end
-    end
+  # Base classes applied to breadcrumb ellipsis
+  def breadcrumb_ellipsis_base_classes
+    "flex h-9 w-9 items-center justify-center"
+  end
+end

data/app/behaviors/ui/breadcrumb_item_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # BreadcrumbItemBehavior
-    #
-    # Shared behavior for Breadcrumb Item component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for individual breadcrumb items.
-    module UI::BreadcrumbItemBehavior
-      # Returns HTML attributes for the breadcrumb item element
-      def breadcrumb_item_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: breadcrumb_item_classes
-        }.merge(attributes_value || {})
-      end
+# BreadcrumbItemBehavior
+#
+# Shared behavior for Breadcrumb Item component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for individual breadcrumb items.
+module UI::BreadcrumbItemBehavior
+  # Returns HTML attributes for the breadcrumb item element
+  def breadcrumb_item_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: breadcrumb_item_classes
+    }.merge(attributes_value || {})
+  end
 
-      # Returns combined CSS classes for the breadcrumb item
-      def breadcrumb_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          breadcrumb_item_base_classes,
-          classes_value
+  # Returns combined CSS classes for the breadcrumb item
+  def breadcrumb_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      breadcrumb_item_base_classes,
+      classes_value
 
-        ].compact.join(" "))
-      end
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to breadcrumb item
-      def breadcrumb_item_base_classes
-        "inline-flex items-center gap-1.5"
-      end
-    end
+  # Base classes applied to breadcrumb item
+  def breadcrumb_item_base_classes
+    "inline-flex items-center gap-1.5"
+  end
+end

data/app/behaviors/ui/breadcrumb_link_behavior.rb

@@ -1,33 +1,33 @@
 # frozen_string_literal: true
 
-    # BreadcrumbLinkBehavior
-    #
-    # Shared behavior for Breadcrumb Link component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for breadcrumb links.
-    module UI::BreadcrumbLinkBehavior
-      # Returns HTML attributes for the breadcrumb link element
-      def breadcrumb_link_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: breadcrumb_link_classes,
-          href: @href || "#"
-        }.merge(attributes_value || {})
-      end
+# BreadcrumbLinkBehavior
+#
+# Shared behavior for Breadcrumb Link component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for breadcrumb links.
+module UI::BreadcrumbLinkBehavior
+  # Returns HTML attributes for the breadcrumb link element
+  def breadcrumb_link_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: breadcrumb_link_classes,
+      href: @href || "#"
+    }.merge(attributes_value || {})
+  end
 
-      # Returns combined CSS classes for the breadcrumb link
-      def breadcrumb_link_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          breadcrumb_link_base_classes,
-          classes_value
+  # Returns combined CSS classes for the breadcrumb link
+  def breadcrumb_link_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      breadcrumb_link_base_classes,
+      classes_value
 
-        ].compact.join(" "))
-      end
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to breadcrumb link
-      def breadcrumb_link_base_classes
-        "transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
-      end
-    end
+  # Base classes applied to breadcrumb link
+  def breadcrumb_link_base_classes
+    "transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-sm"
+  end
+end

data/app/behaviors/ui/breadcrumb_list_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # BreadcrumbListBehavior
-    #
-    # Shared behavior for Breadcrumb List component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for the breadcrumb list container.
-    module UI::BreadcrumbListBehavior
-      # Returns HTML attributes for the breadcrumb list element
-      def breadcrumb_list_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: breadcrumb_list_classes
-        }.merge(attributes_value || {})
-      end
+# BreadcrumbListBehavior
+#
+# Shared behavior for Breadcrumb List component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for the breadcrumb list container.
+module UI::BreadcrumbListBehavior
+  # Returns HTML attributes for the breadcrumb list element
+  def breadcrumb_list_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: breadcrumb_list_classes
+    }.merge(attributes_value || {})
+  end
 
-      # Returns combined CSS classes for the breadcrumb list
-      def breadcrumb_list_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          breadcrumb_list_base_classes,
-          classes_value
+  # Returns combined CSS classes for the breadcrumb list
+  def breadcrumb_list_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      breadcrumb_list_base_classes,
+      classes_value
 
-        ].compact.join(" "))
-      end
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to breadcrumb list
-      def breadcrumb_list_base_classes
-        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
-      end
-    end
+  # Base classes applied to breadcrumb list
+  def breadcrumb_list_base_classes
+    "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
+  end
+end

data/app/behaviors/ui/breadcrumb_page_behavior.rb

@@ -1,35 +1,35 @@
 # frozen_string_literal: true
 
-    # BreadcrumbPageBehavior
-    #
-    # Shared behavior for Breadcrumb Page component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for the current page indicator.
-    module UI::BreadcrumbPageBehavior
-      # Returns HTML attributes for the breadcrumb page element
-      def breadcrumb_page_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: breadcrumb_page_classes,
-          role: "link",
-          "aria-disabled": "true",
-          "aria-current": "page"
-        }.merge(attributes_value || {})
-      end
+# BreadcrumbPageBehavior
+#
+# Shared behavior for Breadcrumb Page component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for the current page indicator.
+module UI::BreadcrumbPageBehavior
+  # Returns HTML attributes for the breadcrumb page element
+  def breadcrumb_page_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: breadcrumb_page_classes,
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page"
+    }.merge(attributes_value || {})
+  end
 
-      # Returns combined CSS classes for the breadcrumb page
-      def breadcrumb_page_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          breadcrumb_page_base_classes,
-          classes_value
+  # Returns combined CSS classes for the breadcrumb page
+  def breadcrumb_page_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      breadcrumb_page_base_classes,
+      classes_value
 
-        ].compact.join(" "))
-      end
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to breadcrumb page
-      def breadcrumb_page_base_classes
-        "font-normal text-foreground"
-      end
-    end
+  # Base classes applied to breadcrumb page
+  def breadcrumb_page_base_classes
+    "font-normal text-foreground"
+  end
+end

data/app/behaviors/ui/breadcrumb_separator_behavior.rb

@@ -1,34 +1,34 @@
 # frozen_string_literal: true
 
-    # BreadcrumbSeparatorBehavior
-    #
-    # Shared behavior for Breadcrumb Separator component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation for breadcrumb separators.
-    module UI::BreadcrumbSeparatorBehavior
-      # Returns HTML attributes for the breadcrumb separator element
-      def breadcrumb_separator_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: breadcrumb_separator_classes,
-          role: "presentation",
-          "aria-hidden": "true"
-        }.merge(attributes_value || {})
-      end
+# BreadcrumbSeparatorBehavior
+#
+# Shared behavior for Breadcrumb Separator component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation for breadcrumb separators.
+module UI::BreadcrumbSeparatorBehavior
+  # Returns HTML attributes for the breadcrumb separator element
+  def breadcrumb_separator_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: breadcrumb_separator_classes,
+      role: "presentation",
+      "aria-hidden": "true"
+    }.merge(attributes_value || {})
+  end
 
-      # Returns combined CSS classes for the breadcrumb separator
-      def breadcrumb_separator_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          breadcrumb_separator_base_classes,
-          classes_value
+  # Returns combined CSS classes for the breadcrumb separator
+  def breadcrumb_separator_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      breadcrumb_separator_base_classes,
+      classes_value
 
-        ].compact.join(" "))
-      end
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to breadcrumb separator
-      def breadcrumb_separator_base_classes
-        "[&>svg]:size-3.5"
-      end
-    end
+  # Base classes applied to breadcrumb separator
+  def breadcrumb_separator_base_classes
+    "[&>svg]:size-3.5"
+  end
+end

data/app/behaviors/ui/button_behavior.rb

@@ -2,98 +2,110 @@
 
 require "tailwind_merge"
 
-module UI
-  # ButtonBehavior
-  #
-  # Shared behavior for Button component across ERB, ViewComponent, and Phlex implementations.
-  # This module provides consistent variant and size styling, along with HTML attribute generation.
-  module ButtonBehavior
-    # Renders the button HTML
-    # This method can be used by both ERB partials and ViewComponents
-    # @param content_block [Proc] Block that returns the button content
-    # @return [String] HTML string for the button
-    def render_button(&content_block)
-      all_attributes = button_html_attributes
+# UI::ButtonBehavior
+#
+# @ui_component Button
+# @ui_description Button - Phlex implementation
+# @ui_category forms
+#
+# @ui_anatomy Button - A versatile button component with multiple variants and sizes. (required)
+# @ui_anatomy Group - A container that groups related buttons together with consistent styling.
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_aria_pattern Button
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/button/
+#
+# @ui_related toggle
+#
+module UI::ButtonBehavior
+  # Renders the button HTML
+  # This method can be used by both ERB partials and ViewComponents
+  # @param content_block [Proc] Block that returns the button content
+  # @return [String] HTML string for the button
+  def render_button(&content_block)
+    all_attributes = button_html_attributes
 
-      # Merge classes with TailwindMerge before deep_merge
-      if @attributes&.key?(:class)
-        button_class = all_attributes[:class] || ""
-        attr_class = @attributes[:class] || ""
-        merged_class = TailwindMerge::Merger.new.merge([button_class, attr_class].join(" "))
-        all_attributes = all_attributes.merge(class: merged_class)
-      end
+    # Merge classes with TailwindMerge before deep_merge
+    if @attributes&.key?(:class)
+      button_class = all_attributes[:class] || ""
+      attr_class = @attributes[:class] || ""
+      merged_class = TailwindMerge::Merger.new.merge([button_class, attr_class].join(" "))
+      all_attributes = all_attributes.merge(class: merged_class)
+    end
 
-      # Deep merge other attributes (excluding class which we already handled)
-      all_attributes = all_attributes.deep_merge(@attributes&.except(:class) || {})
+    # Deep merge other attributes (excluding class which we already handled)
+    all_attributes = all_attributes.deep_merge(@attributes&.except(:class) || {})
 
-      content_tag(:button, **all_attributes, &content_block)
-    end
+    content_tag(:button, **all_attributes, &content_block)
+  end
 
-    # Returns HTML attributes for the button element
-    def button_html_attributes
-      {
-        class: button_classes,
-        type: @type || "button",
-        disabled: @disabled ? true : nil
-      }.compact
-    end
+  # Returns HTML attributes for the button element
+  def button_html_attributes
+    {
+      class: button_classes,
+      type: @type || "button",
+      disabled: @disabled ? true : nil
+    }.compact
+  end
 
-    # Returns combined CSS classes for the button
-    def button_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        button_base_classes,
-        button_variant_classes,
-        button_size_classes,
-        classes_value
-      ].compact.join(" "))
-    end
+  # Returns combined CSS classes for the button
+  def button_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      button_base_classes,
+      button_variant_classes,
+      button_size_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-    private
+  private
 
-    # Base classes applied to all buttons
-    def button_base_classes
-      "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive has-[>svg]:px-3"
-    end
+  # Base classes applied to all buttons
+  def button_base_classes
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive has-[>svg]:px-3"
+  end
 
-    # Variant-specific classes based on @variant
-    def button_variant_classes
-      case @variant.to_s
-      when "default"
-        "bg-primary text-primary-foreground hover:bg-primary/90"
-      when "destructive"
-        "bg-destructive text-destructive-foreground hover:bg-destructive/90 text-white"
-      when "outline"
-        "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
-      when "secondary"
-        "bg-secondary text-secondary-foreground hover:bg-secondary/80"
-      when "ghost"
-        "hover:bg-accent hover:text-accent-foreground"
-      when "link"
-        "text-primary underline-offset-4 hover:underline"
-      else
-        "bg-primary text-primary-foreground hover:bg-primary/90"
-      end
+  # Variant-specific classes based on @variant
+  def button_variant_classes
+    case @variant.to_s
+    when "default"
+      "bg-primary text-primary-foreground hover:bg-primary/90"
+    when "destructive"
+      "bg-destructive text-destructive-foreground hover:bg-destructive/90 text-white"
+    when "outline"
+      "!border !border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50"
+    when "secondary"
+      "bg-secondary text-secondary-foreground hover:bg-secondary/80"
+    when "ghost"
+      "hover:bg-accent hover:text-accent-foreground"
+    when "link"
+      "text-primary underline-offset-4 hover:underline"
+    else
+      "bg-primary text-primary-foreground hover:bg-primary/90"
     end
+  end
 
-    # Size-specific classes based on @size
-    def button_size_classes
-      case @size.to_s
-      when "default"
-        "h-9 px-4 py-2"
-      when "sm"
-        "h-8 px-3 text-xs"
-      when "lg"
-        "h-10 px-8"
-      when "icon"
-        "h-9 w-9"
-      when "icon-sm"
-        "h-8 w-8"
-      when "icon-lg"
-        "h-10 w-10"
-      else
-        "h-9 px-4 py-2"
-      end
+  # Size-specific classes based on @size
+  def button_size_classes
+    case @size.to_s
+    when "default"
+      "h-9 px-4 py-2"
+    when "sm"
+      "h-8 px-3 text-xs"
+    when "lg"
+      "h-10 px-8"
+    when "icon"
+      "h-9 w-9"
+    when "icon-sm"
+      "h-8 w-8"
+    when "icon-lg"
+      "h-10 w-10"
+    else
+      "h-9 px-4 py-2"
     end
   end
 end