fernandes-ui 0.1.1 → 0.1.2

data/app/behaviors/ui/card_content_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # ContentBehavior
-    #
-    # Shared behavior for CardContent component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardContentBehavior
-      def render_card_content(&content_block)
-        all_attributes = card_content_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# ContentBehavior
+#
+# Shared behavior for CardContent component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardContentBehavior
+  def render_card_content(&content_block)
+    all_attributes = card_content_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_content_html_attributes
-        {
-          class: card_content_classes,
-          data: { slot: "card-content" }
-        }
-      end
+  def card_content_html_attributes
+    {
+      class: card_content_classes,
+      data: {slot: "card-content"}
+    }
+  end
 
-      def card_content_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_content_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_content_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_content_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_content_base_classes
-        "px-6"
-      end
-    end
+  def card_content_base_classes
+    "px-6"
+  end
+end

data/app/behaviors/ui/card_description_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # DescriptionBehavior
-    #
-    # Shared behavior for CardDescription component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardDescriptionBehavior
-      def render_card_description(&content_block)
-        all_attributes = card_description_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# DescriptionBehavior
+#
+# Shared behavior for CardDescription component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardDescriptionBehavior
+  def render_card_description(&content_block)
+    all_attributes = card_description_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_description_html_attributes
-        {
-          class: card_description_classes,
-          data: { slot: "card-description" }
-        }
-      end
+  def card_description_html_attributes
+    {
+      class: card_description_classes,
+      data: {slot: "card-description"}
+    }
+  end
 
-      def card_description_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_description_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_description_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_description_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_description_base_classes
-        "text-muted-foreground text-sm"
-      end
-    end
+  def card_description_base_classes
+    "text-muted-foreground text-sm"
+  end
+end

data/app/behaviors/ui/card_footer_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # FooterBehavior
-    #
-    # Shared behavior for CardFooter component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardFooterBehavior
-      def render_card_footer(&content_block)
-        all_attributes = card_footer_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# FooterBehavior
+#
+# Shared behavior for CardFooter component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardFooterBehavior
+  def render_card_footer(&content_block)
+    all_attributes = card_footer_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_footer_html_attributes
-        {
-          class: card_footer_classes,
-          data: { slot: "card-footer" }
-        }
-      end
+  def card_footer_html_attributes
+    {
+      class: card_footer_classes,
+      data: {slot: "card-footer"}
+    }
+  end
 
-      def card_footer_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_footer_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_footer_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_footer_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_footer_base_classes
-        "flex items-center px-6 [.border-t]:pt-6"
-      end
-    end
+  def card_footer_base_classes
+    "flex items-center px-6 [.border-t]:pt-6"
+  end
+end

data/app/behaviors/ui/card_header_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # HeaderBehavior
-    #
-    # Shared behavior for CardHeader component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardHeaderBehavior
-      def render_card_header(&content_block)
-        all_attributes = card_header_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# HeaderBehavior
+#
+# Shared behavior for CardHeader component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardHeaderBehavior
+  def render_card_header(&content_block)
+    all_attributes = card_header_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_header_html_attributes
-        {
-          class: card_header_classes,
-          data: { slot: "card-header" }
-        }
-      end
+  def card_header_html_attributes
+    {
+      class: card_header_classes,
+      data: {slot: "card-header"}
+    }
+  end
 
-      def card_header_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_header_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_header_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_header_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_header_base_classes
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
-      end
-    end
+  def card_header_base_classes
+    "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6"
+  end
+end

data/app/behaviors/ui/card_title_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # TitleBehavior
-    #
-    # Shared behavior for CardTitle component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardTitleBehavior
-      def render_card_title(&content_block)
-        all_attributes = card_title_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# TitleBehavior
+#
+# Shared behavior for CardTitle component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardTitleBehavior
+  def render_card_title(&content_block)
+    all_attributes = card_title_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_title_html_attributes
-        {
-          class: card_title_classes,
-          data: { slot: "card-title" }
-        }
-      end
+  def card_title_html_attributes
+    {
+      class: card_title_classes,
+      data: {slot: "card-title"}
+    }
+  end
 
-      def card_title_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_title_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_title_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_title_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_title_base_classes
-        "leading-none font-semibold"
-      end
-    end
+  def card_title_base_classes
+    "leading-none font-semibold"
+  end
+end

data/app/behaviors/ui/carousel_behavior.rb

@@ -2,52 +2,78 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Carousel root component
-    module UI::CarouselBehavior
-      # Base CSS classes for carousel container
-      def carousel_base_classes
-        "relative"
-      end
-
-      # Merge base classes with custom classes
-      def carousel_classes
-        TailwindMerge::Merger.new.merge([carousel_base_classes, @classes].compact.join(" "))
-      end
-
-      # Data attributes for Stimulus controller
-      def carousel_data_attributes
-        attrs = {
-          controller: "ui--carousel",
-          ui__carousel_orientation_value: @orientation || "horizontal"
-        }
-
-        # Add options if provided
-        if @opts
-          attrs[:ui__carousel_opts_value] = @opts.to_json
-        end
-
-        # Add plugins if provided
-        if @plugins
-          attrs[:ui__carousel_plugins_value] = @plugins.to_json
-        end
-
-        attrs
-      end
-
-      # Merge user-provided data attributes
-      def merged_carousel_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(carousel_data_attributes)
-      end
-
-      # Build complete HTML attributes hash
-      def carousel_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: carousel_classes,
-          role: "region",
-          "aria-roledescription": "carousel",
-          data: merged_carousel_data_attributes
-        )
-      end
+# UI::CarouselBehavior
+#
+# @ui_component Carousel
+# @ui_category data-display
+#
+# @ui_anatomy Carousel - Root container with state management (required)
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Item - Individual item element
+# @ui_anatomy Next - Navigate to next item
+# @ui_anatomy Previous - Navigate to previous item
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature ARIA attributes for accessibility
+# @ui_feature Keyboard navigation with arrow keys
+#
+# @ui_aria_pattern Carousel
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/carousel/
+# @ui_aria_attr aria-roledescription
+# @ui_aria_attr role="region"
+#
+# @ui_keyboard ArrowDown Moves focus to next item
+# @ui_keyboard ArrowUp Moves focus to previous item
+# @ui_keyboard ArrowLeft Moves focus left or decreases value
+# @ui_keyboard ArrowRight Moves focus right or increases value
+#
+# @ui_related scroll_area
+#
+module UI::CarouselBehavior
+  # Base CSS classes for carousel container
+  def carousel_base_classes
+    "relative"
+  end
+
+  # Merge base classes with custom classes
+  def carousel_classes
+    TailwindMerge::Merger.new.merge([carousel_base_classes, @classes].compact.join(" "))
+  end
+
+  # Data attributes for Stimulus controller
+  def carousel_data_attributes
+    attrs = {
+      controller: "ui--carousel",
+      ui__carousel_orientation_value: @orientation || "horizontal"
+    }
+
+    # Add options if provided
+    if @opts
+      attrs[:ui__carousel_opts_value] = @opts.to_json
+    end
+
+    # Add plugins if provided
+    if @plugins
+      attrs[:ui__carousel_plugins_value] = @plugins.to_json
     end
+
+    attrs
+  end
+
+  # Merge user-provided data attributes
+  def merged_carousel_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(carousel_data_attributes)
+  end
+
+  # Build complete HTML attributes hash
+  def carousel_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: carousel_classes,
+      role: "region",
+      "aria-roledescription": "carousel",
+      data: merged_carousel_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/carousel_content_behavior.rb

@@ -2,64 +2,64 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Carousel Content component
-    module UI::CarouselContentBehavior
-      # Base CSS classes for carousel content wrapper (outer div/viewport)
-      def carousel_content_base_classes
-        "overflow-hidden"
-      end
+# Shared behavior for Carousel Content component
+module UI::CarouselContentBehavior
+  # Base CSS classes for carousel content wrapper (outer div/viewport)
+  def carousel_content_base_classes
+    "overflow-hidden"
+  end
 
-      # Base CSS classes for flex container (inner div)
-      # Includes default horizontal spacing
-      def carousel_content_container_base_classes
-        "flex -ml-4"
-      end
+  # Base CSS classes for flex container (inner div)
+  # Includes default horizontal spacing
+  def carousel_content_container_base_classes
+    "flex -ml-4"
+  end
 
-      # Merge base classes with custom classes for outer div
-      def carousel_content_classes
-        carousel_content_base_classes
-      end
+  # Merge base classes with custom classes for outer div
+  def carousel_content_classes
+    carousel_content_base_classes
+  end
 
-      # Merge base classes with custom classes for inner flex container
-      # User classes can override the -ml-4 default (e.g., -ml-1 for custom spacing)
-      def carousel_content_container_classes
-        TailwindMerge::Merger.new.merge([carousel_content_container_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes for inner flex container
+  # User classes can override the -ml-4 default (e.g., -ml-1 for custom spacing)
+  def carousel_content_container_classes
+    TailwindMerge::Merger.new.merge([carousel_content_container_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus target (outer div)
-      def carousel_content_data_attributes
-        {
-          ui__carousel_target: "viewport"
-        }
-      end
+  # Data attributes for Stimulus target (outer div)
+  def carousel_content_data_attributes
+    {
+      ui__carousel_target: "viewport"
+    }
+  end
 
-      # Data attributes for flex container (inner div)
-      def carousel_content_container_data_attributes
-        {
-          ui__carousel_target: "container"
-        }
-      end
+  # Data attributes for flex container (inner div)
+  def carousel_content_container_data_attributes
+    {
+      ui__carousel_target: "container"
+    }
+  end
 
-      # Build complete HTML attributes hash for inner container
-      def carousel_content_container_html_attributes
-        {
-          class: carousel_content_container_classes,
-          data: carousel_content_container_data_attributes
-        }
-      end
+  # Build complete HTML attributes hash for inner container
+  def carousel_content_container_html_attributes
+    {
+      class: carousel_content_container_classes,
+      data: carousel_content_container_data_attributes
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_carousel_content_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(carousel_content_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_carousel_content_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(carousel_content_data_attributes)
+  end
 
-      # Build complete HTML attributes hash
-      def carousel_content_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        base_attrs.merge(
-          class: carousel_content_classes,
-          data: merged_carousel_content_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash
+  def carousel_content_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    base_attrs.merge(
+      class: carousel_content_classes,
+      data: merged_carousel_content_data_attributes
+    )
+  end
+end

data/app/behaviors/ui/carousel_item_behavior.rb

@@ -2,25 +2,25 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Carousel Item component
-    module UI::CarouselItemBehavior
-      # Base CSS classes for carousel item (slide)
-      def carousel_item_base_classes
-        "min-w-0 shrink-0 grow-0 basis-full pl-4"
-      end
+# Shared behavior for Carousel Item component
+module UI::CarouselItemBehavior
+  # Base CSS classes for carousel item (slide)
+  def carousel_item_base_classes
+    "min-w-0 shrink-0 grow-0 basis-full pl-4"
+  end
 
-      # Merge base classes with custom classes
-      def carousel_item_classes
-        TailwindMerge::Merger.new.merge([carousel_item_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes
+  def carousel_item_classes
+    TailwindMerge::Merger.new.merge([carousel_item_base_classes, @classes].compact.join(" "))
+  end
 
-      # Build complete HTML attributes hash
-      def carousel_item_html_attributes
-        base_attrs = @attributes || {}
-        base_attrs.merge(
-          class: carousel_item_classes,
-          role: "group",
-          "aria-roledescription": "slide"
-        )
-      end
-    end
+  # Build complete HTML attributes hash
+  def carousel_item_html_attributes
+    base_attrs = @attributes || {}
+    base_attrs.merge(
+      class: carousel_item_classes,
+      role: "group",
+      "aria-roledescription": "slide"
+    )
+  end
+end

data/app/behaviors/ui/carousel_next_behavior.rb

@@ -2,38 +2,38 @@
 
 require "tailwind_merge"
 
-    # Shared behavior for Carousel Next button
-    module UI::CarouselNextBehavior
-      # Base CSS classes for next button (default horizontal positioning)
-      def carousel_next_base_classes
-        "absolute size-8 rounded-lg top-1/2 -translate-y-1/2 -right-12"
-      end
+# Shared behavior for Carousel Next button
+module UI::CarouselNextBehavior
+  # Base CSS classes for next button (default horizontal positioning)
+  def carousel_next_base_classes
+    "absolute size-8 !rounded-full top-1/2 -translate-y-1/2 -right-12"
+  end
 
-      # Merge base classes with custom classes
-      def carousel_next_classes
-        TailwindMerge::Merger.new.merge([carousel_next_base_classes, @classes].compact.join(" "))
-      end
+  # Merge base classes with custom classes
+  def carousel_next_classes
+    TailwindMerge::Merger.new.merge([carousel_next_base_classes, @classes].compact.join(" "))
+  end
 
-      # Data attributes for Stimulus action
-      def carousel_next_data_attributes
-        {
-          action: "click->ui--carousel#scrollNext",
-          ui__carousel_target: "nextButton"
-        }
-      end
+  # Data attributes for Stimulus action
+  def carousel_next_data_attributes
+    {
+      action: "click->ui--carousel#scrollNext",
+      ui__carousel_target: "nextButton"
+    }
+  end
 
-      # Merge user-provided data attributes
-      def merged_carousel_next_data_attributes
-        user_data = @attributes&.fetch(:data, {}) || {}
-        user_data.merge(carousel_next_data_attributes)
-      end
+  # Merge user-provided data attributes
+  def merged_carousel_next_data_attributes
+    user_data = @attributes&.fetch(:data, {}) || {}
+    user_data.merge(carousel_next_data_attributes)
+  end
 
-      # Build complete HTML attributes hash (without class, which is handled separately)
-      def carousel_next_html_attributes
-        base_attrs = @attributes&.except(:data, :class) || {}
-        base_attrs.merge(
-          "aria-label": "Next slide",
-          data: merged_carousel_next_data_attributes
-        )
-      end
-    end
+  # Build complete HTML attributes hash (without class, which is handled separately)
+  def carousel_next_html_attributes
+    base_attrs = @attributes&.except(:data, :class) || {}
+    base_attrs.merge(
+      "aria-label": "Next slide",
+      data: merged_carousel_next_data_attributes
+    )
+  end
+end