fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/item_behavior.rb

@@ -1,100 +1,113 @@
 # frozen_string_literal: true
-    # ItemBehavior
-    #
-    # Shared behavior for Item component across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent styling and HTML attribute generation for list/menu items.
-    module UI::ItemBehavior
-      # Returns HTML attributes for the item container
-      def item_html_attributes
-        {
-          class: item_classes,
-          "data-slot": "item",
-          "data-variant": @variant,
-          "data-size": @size
-        }.compact
-      end
 
-      # Returns combined CSS classes for the item
-      def item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_base_classes,
-          item_variant_classes,
-          item_size_classes,
-          classes_value
+# UI::ItemBehavior
+#
+# @ui_component Item
+# @ui_category data-display
+#
+# @ui_anatomy Item - Individual item element (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Description - Descriptive text element
+# @ui_anatomy Footer - Footer section with actions
+# @ui_anatomy Group - Container for grouping related items
+# @ui_anatomy Header - Header section with title and controls
+# @ui_anatomy Separator - Visual divider between sections
+# @ui_anatomy Title - Title text element
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::ItemBehavior
+  # Returns HTML attributes for the item container
+  def item_html_attributes
+    {
+      class: item_classes,
+      "data-slot": "item",
+      "data-variant": @variant,
+      "data-size": @size
+    }.compact
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the item
+  def item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_base_classes,
+      item_variant_classes,
+      item_size_classes,
+      classes_value
 
-      # Returns HTML attributes for the media container
-      def item_media_html_attributes
-        {
-          class: "shrink-0",
-          data: { slot: "item-media" }
-        }
-      end
+    ].compact.join(" "))
+  end
 
-      # Returns HTML attributes for the content container
-      def item_content_html_attributes
-        {
-          class: "min-w-0 flex-1"
-        }
-      end
+  # Returns HTML attributes for the media container
+  def item_media_html_attributes
+    {
+      class: "shrink-0",
+      data: {slot: "item-media"}
+    }
+  end
 
-      # Returns HTML attributes for the content text
-      def item_content_text_html_attributes
-        {
-          class: "font-medium",
-          data: { slot: "item-content" }
-        }
-      end
+  # Returns HTML attributes for the content container
+  def item_content_html_attributes
+    {
+      class: "min-w-0 flex-1"
+    }
+  end
 
-      # Returns HTML attributes for the description
-      def item_description_html_attributes
-        {
-          class: "text-muted-foreground text-sm",
-          data: { slot: "item-description" }
-        }
-      end
+  # Returns HTML attributes for the content text
+  def item_content_text_html_attributes
+    {
+      class: "font-medium",
+      data: {slot: "item-content"}
+    }
+  end
 
-      # Returns HTML attributes for the actions container
-      def item_actions_html_attributes
-        {
-          class: "shrink-0",
-          data: { slot: "item-actions" }
-        }
-      end
+  # Returns HTML attributes for the description
+  def item_description_html_attributes
+    {
+      class: "text-muted-foreground text-sm",
+      data: {slot: "item-description"}
+    }
+  end
 
-      private
+  # Returns HTML attributes for the actions container
+  def item_actions_html_attributes
+    {
+      class: "shrink-0",
+      data: {slot: "item-actions"}
+    }
+  end
 
-      # Base classes applied to all items (from shadcn/ui v4)
-      def item_base_classes
-        "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-      end
+  private
 
-      # Variant-specific classes (from shadcn/ui v4)
-      def item_variant_classes
-        case (@variant || "default").to_s
-        when "default"
-          "bg-transparent"
-        when "outline"
-          "border-border"
-        when "muted"
-          "bg-muted/50"
-        else
-          "bg-transparent"
-        end
-      end
+  # Base classes applied to all items (from shadcn/ui v4)
+  def item_base_classes
+    "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+  end
 
-      # Size-specific classes (from shadcn/ui v4)
-      def item_size_classes
-        case (@size || "default").to_s
-        when "sm"
-          "py-3 px-4 gap-2.5"
-        when "default"
-          "p-4 gap-4"
-        else
-          "p-4 gap-4"
-        end
-      end
+  # Variant-specific classes (from shadcn/ui v4)
+  def item_variant_classes
+    case (@variant || "default").to_s
+    when "default"
+      "bg-transparent"
+    when "outline"
+      "border-border"
+    when "muted"
+      "bg-muted/50"
+    else
+      "bg-transparent"
     end
+  end
+
+  # Size-specific classes (from shadcn/ui v4)
+  def item_size_classes
+    case (@size || "default").to_s
+    when "sm"
+      "py-3 px-4 gap-2.5"
+    when "default"
+      "p-4 gap-4"
+    else
+      "p-4 gap-4"
+    end
+  end
+end

data/app/behaviors/ui/item_content_behavior.rb

@@ -1,31 +1,32 @@
 # frozen_string_literal: true
-    # ItemContentBehavior
-    #
-    # Shared behavior for Item content wrapper across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemContentBehavior
-      # Returns HTML attributes for the item content element
-      def item_content_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_content_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_content_base_classes,
-          classes_value
+# ItemContentBehavior
+#
+# Shared behavior for Item content wrapper across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ItemContentBehavior
+  # Returns HTML attributes for the item content element
+  def item_content_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_content_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_content_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item content (from shadcn/ui v4)
-      def item_content_base_classes
-        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none"
-      end
-    end
+  private
+
+  # Base classes for item content (from shadcn/ui v4)
+  def item_content_base_classes
+    "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none"
+  end
+end

data/app/behaviors/ui/item_description_behavior.rb

@@ -1,31 +1,32 @@
 # frozen_string_literal: true
-    # ItemDescriptionBehavior
-    #
-    # Shared behavior for Item description text across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemDescriptionBehavior
-      # Returns HTML attributes for the item description element
-      def item_description_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_description_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_description_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_description_base_classes,
-          classes_value
+# ItemDescriptionBehavior
+#
+# Shared behavior for Item description text across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ItemDescriptionBehavior
+  # Returns HTML attributes for the item description element
+  def item_description_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_description_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_description_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_description_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item description (from shadcn/ui v4)
-      def item_description_base_classes
-        "line-clamp-2 text-sm text-muted-foreground [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-2"
-      end
-    end
+  private
+
+  # Base classes for item description (from shadcn/ui v4)
+  def item_description_base_classes
+    "line-clamp-2 text-sm text-muted-foreground [&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-2"
+  end
+end

data/app/behaviors/ui/item_footer_behavior.rb

@@ -1,31 +1,32 @@
 # frozen_string_literal: true
-    # ItemFooterBehavior
-    #
-    # Shared behavior for Item footer section across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemFooterBehavior
-      # Returns HTML attributes for the item footer element
-      def item_footer_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_footer_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_footer_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_footer_base_classes,
-          classes_value
+# ItemFooterBehavior
+#
+# Shared behavior for Item footer section across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ItemFooterBehavior
+  # Returns HTML attributes for the item footer element
+  def item_footer_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_footer_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_footer_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_footer_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item footer (from shadcn/ui v4)
-      def item_footer_base_classes
-        "flex w-full items-center justify-between pt-2"
-      end
-    end
+  private
+
+  # Base classes for item footer (from shadcn/ui v4)
+  def item_footer_base_classes
+    "flex w-full items-center justify-between pt-2"
+  end
+end

data/app/behaviors/ui/item_group_behavior.rb

@@ -1,31 +1,32 @@
 # frozen_string_literal: true
-    # ItemGroupBehavior
-    #
-    # Shared behavior for Item group container across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemGroupBehavior
-      # Returns HTML attributes for the item group element
-      def item_group_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_group_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_group_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_group_base_classes,
-          classes_value
+# ItemGroupBehavior
+#
+# Shared behavior for Item group container across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ItemGroupBehavior
+  # Returns HTML attributes for the item group element
+  def item_group_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_group_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_group_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item group
-      def item_group_base_classes
-        ""
-      end
-    end
+  private
+
+  # Base classes for item group
+  def item_group_base_classes
+    ""
+  end
+end

data/app/behaviors/ui/item_header_behavior.rb

@@ -1,31 +1,32 @@
 # frozen_string_literal: true
-    # ItemHeaderBehavior
-    #
-    # Shared behavior for Item header section across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemHeaderBehavior
-      # Returns HTML attributes for the item header element
-      def item_header_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_header_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_header_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_header_base_classes,
-          classes_value
+# ItemHeaderBehavior
+#
+# Shared behavior for Item header section across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ItemHeaderBehavior
+  # Returns HTML attributes for the item header element
+  def item_header_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_header_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_header_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_header_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item header (from shadcn/ui v4)
-      def item_header_base_classes
-        "flex w-full items-center justify-between pb-2"
-      end
-    end
+  private
+
+  # Base classes for item header (from shadcn/ui v4)
+  def item_header_base_classes
+    "flex w-full items-center justify-between pb-2"
+  end
+end

data/app/behaviors/ui/item_media_behavior.rb

@@ -1,47 +1,53 @@
 # frozen_string_literal: true
-    # ItemMediaBehavior
-    #
-    # Shared behavior for Item media container across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemMediaBehavior
-      # Returns HTML attributes for the item media element
-      def item_media_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        variant_value = respond_to?(:variant, true) ? variant : @variant
-        {
-          class: item_media_classes,
-          "data-slot": "item-media",
-          "data-variant": variant_value
-        }.merge(attributes_value || {}).compact
-      end
 
-      # Returns combined CSS classes
-      def item_media_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_media_base_classes,
-          item_media_variant_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+# UI::ItemMediaBehavior
+#
+# @ui_component Item Media
+# @ui_category other
+#
+# @ui_anatomy Item Media - Media content container (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+module UI::ItemMediaBehavior
+  # Returns HTML attributes for the item media element
+  def item_media_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    variant_value = respond_to?(:variant, true) ? variant : @variant
+    {
+      class: item_media_classes,
+      "data-slot": "item-media",
+      "data-variant": variant_value
+    }.merge(attributes_value || {}).compact
+  end
 
-      private
+  # Returns combined CSS classes
+  def item_media_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_media_base_classes,
+      item_media_variant_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Base classes for item media (from shadcn/ui v4)
-      def item_media_base_classes
-        "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5"
-      end
+  private
 
-      # Variant-specific classes (from shadcn/ui v4)
-      def item_media_variant_classes
-        variant_value = respond_to?(:variant, true) ? variant : @variant
-        case (variant_value || "default").to_s
-        when "icon"
-          "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4"
-        when "image"
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
-        else
-          ""
-        end
-      end
+  # Base classes for item media (from shadcn/ui v4)
+  def item_media_base_classes
+    "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5"
+  end
+
+  # Variant-specific classes (from shadcn/ui v4)
+  def item_media_variant_classes
+    variant_value = respond_to?(:variant, true) ? variant : @variant
+    case (variant_value || "default").to_s
+    when "icon"
+      "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4"
+    when "image"
+      "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover"
+    else
+      ""
     end
+  end
+end

data/app/behaviors/ui/item_separator_behavior.rb

@@ -1,31 +1,32 @@
 # frozen_string_literal: true
-    # ItemSeparatorBehavior
-    #
-    # Shared behavior for Item separator across ERB, ViewComponent, and Phlex implementations.
-    # This module provides consistent HTML attribute generation and styling.
-    module UI::ItemSeparatorBehavior
-      # Returns HTML attributes for the item separator element
-      def item_separator_html_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        {
-          class: item_separator_classes
-        }.merge(attributes_value || {})
-      end
 
-      # Returns combined CSS classes
-      def item_separator_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          item_separator_base_classes,
-          classes_value
+# ItemSeparatorBehavior
+#
+# Shared behavior for Item separator across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::ItemSeparatorBehavior
+  # Returns HTML attributes for the item separator element
+  def item_separator_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      class: item_separator_classes
+    }.merge(attributes_value || {})
+  end
 
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes
+  def item_separator_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      item_separator_base_classes,
+      classes_value
 
-      private
+    ].compact.join(" "))
+  end
 
-      # Base classes for item separator
-      def item_separator_base_classes
-        ""
-      end
-    end
+  private
+
+  # Base classes for item separator
+  def item_separator_base_classes
+    ""
+  end
+end