fernandes-ui 0.1.1 → 0.1.4

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

data/app/behaviors/ui/button_group_behavior.rb

@@ -1,55 +1,55 @@
 # frozen_string_literal: true
 
-    # ButtonGroupBehavior
-    #
-    # Shared behavior for ButtonGroup component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation.
-    #
-    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
-    module UI::ButtonGroupBehavior
-      # Returns HTML attributes for the button group container
-      def button_group_html_attributes
-        {
-          role: "group",
-          data: {
-            slot: "button-group",
-            orientation: @orientation
-          },
-          class: button_group_classes
-        }
-      end
+# ButtonGroupBehavior
+#
+# Shared behavior for ButtonGroup component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+#
+# Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+module UI::ButtonGroupBehavior
+  # Returns HTML attributes for the button group container
+  def button_group_html_attributes
+    {
+      role: "group",
+      data: {
+        slot: "button-group",
+        orientation: @orientation
+      },
+      class: button_group_classes
+    }
+  end
 
-      # Returns combined CSS classes for the button group
-      def button_group_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          button_group_base_classes,
-          button_group_orientation_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the button group
+  def button_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      button_group_base_classes,
+      button_group_orientation_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to all button groups
-      # Matches shadcn/ui v4 exactly
-      def button_group_base_classes
-        "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative " \
-        "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 " \
-        "has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md " \
-        "has-[>[data-slot=button-group]]:gap-2"
-      end
+  # Base classes applied to all button groups
+  # Matches shadcn/ui v4 exactly
+  def button_group_base_classes
+    "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative " \
+    "[&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 " \
+    "has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md " \
+    "has-[>[data-slot=button-group]]:gap-2"
+  end
 
-      # Orientation-specific classes based on @orientation
-      # Matches shadcn/ui v4 exactly
-      # Note: We exclude [role=menu] elements from border-radius rules (dropdown content)
-      def button_group_orientation_classes
-        case @orientation.to_s
-        when "vertical"
-          "flex-col [&>*:not(:first-child):not([role=menu])]:rounded-t-none [&>*:not(:first-child):not([role=menu])]:border-t-0 [&>*:not(:last-child):not([role=menu])]:rounded-b-none"
-        else # horizontal (default)
-          "[&>*:not(:first-child):not([role=menu])]:rounded-l-none [&>*:not(:first-child):not([role=menu])]:border-l-0 " \
-          "[&>*:not(:last-child):not(:has(+[role=menu])):not([role=menu])]:rounded-r-none"
-        end
-      end
+  # Orientation-specific classes based on @orientation
+  # Matches shadcn/ui v4 exactly
+  # Note: We exclude [role=menu] elements from border-radius rules (dropdown content)
+  def button_group_orientation_classes
+    case @orientation.to_s
+    when "vertical"
+      "flex-col [&>*:not(:first-child):not([role=menu])]:rounded-t-none [&>*:not(:first-child):not([role=menu])]:border-t-0 [&>*:not(:last-child):not([role=menu])]:rounded-b-none"
+    else # horizontal (default)
+      "[&>*:not(:first-child):not([role=menu])]:rounded-l-none [&>*:not(:first-child):not([role=menu])]:border-l-0 " \
+      "[&>*:not(:last-child):not(:has(+[role=menu])):not([role=menu])]:rounded-r-none"
     end
+  end
+end

data/app/behaviors/ui/button_group_separator_behavior.rb

@@ -1,33 +1,33 @@
 # frozen_string_literal: true
 
-    # SeparatorBehavior
-    #
-    # Shared behavior for ButtonGroupSeparator component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation.
-    #
-    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
-    module UI::ButtonGroupSeparatorBehavior
-      # Returns HTML attributes for the separator element
-      def separator_html_attributes
-        # Get Separator component attributes and merge with button group specific classes
-        base_attrs = if defined?(super)
-          super
-        else
-          {
-            class: "",
-            data: {
-              slot: "button-group-separator",
-              orientation: @orientation
-            }
-          }
-        end
+# SeparatorBehavior
+#
+# Shared behavior for ButtonGroupSeparator component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+#
+# Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+module UI::ButtonGroupSeparatorBehavior
+  # Returns HTML attributes for the separator element
+  def separator_html_attributes
+    # Get Separator component attributes and merge with button group specific classes
+    base_attrs = if defined?(super)
+      super
+    else
+      {
+        class: "",
+        data: {
+          slot: "button-group-separator",
+          orientation: @orientation
+        }
+      }
+    end
 
-        # Merge button group specific classes
-        base_attrs[:class] = TailwindMerge::Merger.new.merge([
-          base_attrs[:class],
-          "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto"
-        ].compact.join(" "))
+    # Merge button group specific classes
+    base_attrs[:class] = TailwindMerge::Merger.new.merge([
+      base_attrs[:class],
+      "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto"
+    ].compact.join(" "))
 
-        base_attrs
-      end
-    end
+    base_attrs
+  end
+end

data/app/behaviors/ui/button_group_text_behavior.rb

@@ -1,34 +1,34 @@
 # frozen_string_literal: true
 
-    # TextBehavior
-    #
-    # Shared behavior for ButtonGroupText component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation.
-    #
-    # Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
-    module UI::ButtonGroupTextBehavior
-      # Returns HTML attributes for the text element
-      def text_html_attributes
-        {
-          class: text_classes
-        }
-      end
+# TextBehavior
+#
+# Shared behavior for ButtonGroupText component across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent styling and HTML attribute generation.
+#
+# Based on shadcn/ui ButtonGroup: https://ui.shadcn.com/docs/components/button-group
+module UI::ButtonGroupTextBehavior
+  # Returns HTML attributes for the text element
+  def text_html_attributes
+    {
+      class: text_classes
+    }
+  end
 
-      # Returns combined CSS classes for the text element
-      def text_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          text_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the text element
+  def text_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      text_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      # Base classes applied to all button group text elements
-      # Matches shadcn/ui v4 exactly
-      def text_base_classes
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs " \
-        "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
-      end
-    end
+  # Base classes applied to all button group text elements
+  # Matches shadcn/ui v4 exactly
+  def text_base_classes
+    "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs " \
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+  end
+end