fernandes-ui 0.1.0

data/app/behaviors/ui/avatar_behavior.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # AvatarBehavior
+    #
+    # Shared behavior for Avatar component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent styling and HTML attribute generation.
+    #
+    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+    module UI::AvatarBehavior
+      # Returns HTML attributes for the avatar element
+      def avatar_html_attributes
+        {
+          class: avatar_classes,
+          data: avatar_data_attributes
+        }
+      end
+
+      # Returns combined CSS classes for the avatar
+      def avatar_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          avatar_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus controller
+      def avatar_data_attributes
+        {
+          controller: "ui--avatar",
+          slot: "avatar"
+        }
+      end
+
+      private
+
+      # Base classes applied to all avatars
+      # Matches shadcn/ui v4: "relative flex size-8 shrink-0 overflow-hidden rounded-full"
+      def avatar_base_classes
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full"
+      end
+    end

data/app/behaviors/ui/avatar_fallback_behavior.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+    # AvatarFallbackBehavior
+    #
+    # Shared behavior for AvatarFallback component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent styling and HTML attribute generation for avatar fallbacks.
+    #
+    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+    module UI::AvatarFallbackBehavior
+      # Returns HTML attributes for the avatar fallback element
+      def avatar_fallback_html_attributes
+        {
+          class: avatar_fallback_classes,
+          data: avatar_fallback_data_attributes
+        }
+      end
+
+      # Returns combined CSS classes for the avatar fallback
+      def avatar_fallback_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          avatar_fallback_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus target
+      def avatar_fallback_data_attributes
+        {
+          "ui--avatar_target": "fallback",
+          slot: "avatar-fallback"
+        }
+      end
+
+      private
+
+      # Base classes applied to all avatar fallbacks
+      # Matches shadcn/ui v4: "bg-muted flex size-full items-center justify-center rounded-full"
+      def avatar_fallback_base_classes
+        "bg-muted flex size-full items-center justify-center rounded-full"
+      end
+    end

data/app/behaviors/ui/avatar_image_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+    # AvatarImageBehavior
+    #
+    # Shared behavior for AvatarImage component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent styling and HTML attribute generation for avatar images.
+    #
+    # Based on shadcn/ui Avatar: https://ui.shadcn.com/docs/components/avatar
+    # Based on Radix UI Avatar: https://www.radix-ui.com/primitives/docs/components/avatar
+    module UI::AvatarImageBehavior
+      # Returns HTML attributes for the avatar image element
+      def avatar_image_html_attributes
+        {
+          src: @src,
+          alt: @alt,
+          class: avatar_image_classes,
+          data: avatar_image_data_attributes
+        }
+      end
+
+      # Returns combined CSS classes for the avatar image
+      def avatar_image_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          avatar_image_base_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      # Returns data attributes for Stimulus target
+      def avatar_image_data_attributes
+        {
+          "ui--avatar_target": "image",
+          slot: "avatar-image"
+        }
+      end
+
+      private
+
+      # Base classes applied to all avatar images
+      # Matches shadcn/ui v4: "aspect-square size-full"
+      # Start hidden until image loads successfully
+      def avatar_image_base_classes
+        "aspect-square size-full hidden"
+      end
+    end

data/app/behaviors/ui/badge_behavior.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+    # BadgeBehavior
+    #
+    # Shared behavior for Badge component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent variant styling and HTML attribute generation.
+    #
+    # Based on shadcn/ui Badge: https://ui.shadcn.com/docs/components/badge
+    module UI::BadgeBehavior
+      # Returns HTML attributes for the badge element
+      def badge_html_attributes
+        {
+          class: badge_classes,
+          data: { slot: "badge" }
+        }
+      end
+
+      # Returns combined CSS classes for the badge
+      def badge_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          badge_base_classes,
+          badge_variant_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes applied to all badges
+      # Matches shadcn/ui v4 exactly
+      def badge_base_classes
+        "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-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 transition-[color,box-shadow] overflow-hidden"
+      end
+
+      # Variant-specific classes based on @variant
+      # Matches shadcn/ui v4 variants exactly
+      def badge_variant_classes
+        case @variant.to_s
+        when "secondary"
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90"
+        when "destructive"
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+        when "outline"
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+        else # default
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90"
+        end
+      end
+    end

data/app/behaviors/ui/blockquote_behavior.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Blockquote component
+    module UI::BlockquoteBehavior
+      # Base CSS classes for Blockquote
+      def blockquote_base_classes
+        "mt-6 border-l-2 pl-6 italic"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def blockquote_classes
+        TailwindMerge::Merger.new.merge([blockquote_base_classes, @classes].compact.join(" "))
+      end
+
+      # Build complete HTML attributes hash
+      def blockquote_html_attributes
+        {
+          class: blockquote_classes
+        }
+      end
+    end

data/app/behaviors/ui/breadcrumb_behavior.rb

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

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

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

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

data/app/behaviors/ui/breadcrumb_list_behavior.rb

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

data/app/behaviors/ui/breadcrumb_page_behavior.rb

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

@@ -0,0 +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
+
+      # 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
+
+      private
+
+      # Base classes applied to breadcrumb separator
+      def breadcrumb_separator_base_classes
+        "[&>svg]:size-3.5"
+      end
+    end

data/app/behaviors/ui/button_behavior.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+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
+
+      # 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) || {})
+
+      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 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
+
+    # 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
+    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
+end

data/app/behaviors/ui/button_group_behavior.rb

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

data/app/behaviors/ui/button_group_separator_behavior.rb

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

data/app/behaviors/ui/button_group_text_behavior.rb

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