fernandes-ui 0.1.1 → 0.1.4

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

data/app/behaviors/ui/carousel_previous_behavior.rb

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

data/app/behaviors/ui/checkbox_behavior.rb

@@ -1,48 +1,64 @@
 # frozen_string_literal: true
 
-module UI
-  # Checkbox Behavior - Shared logic for checkbox component across ERB, ViewComponent, and Phlex
-  module CheckboxBehavior
-    def checkbox_html_attributes
-      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-      {
-        type: "checkbox",
-        class: checkbox_classes,
-        name: @name,
-        id: checkbox_id,
-        value: @value,
-        checked: (@checked ? true : nil),
-        disabled: (@disabled ? true : nil),
-        required: (@required ? true : nil),
-        data: checkbox_data_attributes,
-        "aria-checked": @checked ? "true" : "false"
-      }.merge(attributes_value).compact
-    end
+# UI::CheckboxBehavior
+#
+# @ui_component Checkbox
+# @ui_category forms
+#
+# @ui_anatomy Checkbox - Root checkbox element (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+#
+# @ui_aria_pattern Checkbox
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+# @ui_aria_attr aria-checked
+#
+# @ui_related switch
+# @ui_related toggle
+# @ui_related radio_button
+#
+module UI::CheckboxBehavior
+  def checkbox_html_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    {
+      type: "checkbox",
+      class: checkbox_classes,
+      name: @name,
+      id: checkbox_id,
+      value: @value,
+      checked: (@checked ? true : nil),
+      disabled: (@disabled ? true : nil),
+      required: (@required ? true : nil),
+      data: checkbox_data_attributes,
+      "aria-checked": @checked ? "true" : "false"
+    }.merge(attributes_value).compact
+  end
 
-    def checkbox_classes
-      classes_value = respond_to?(:classes, true) ? classes : @classes
-      TailwindMerge::Merger.new.merge([
-        checkbox_base_classes,
-        classes_value
+  def checkbox_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      checkbox_base_classes,
+      classes_value
 
-      ].compact.join(" "))
-    end
+    ].compact.join(" "))
+  end
 
-    def checkbox_data_attributes
-      {
-        controller: "ui--checkbox",
-        state: @checked ? "checked" : "unchecked"
-      }
-    end
+  def checkbox_data_attributes
+    {
+      controller: "ui--checkbox",
+      state: @checked ? "checked" : "unchecked"
+    }
+  end
 
-    def checkbox_id
-      @id || "checkbox-#{SecureRandom.hex(4)}"
-    end
+  def checkbox_id
+    @id || "checkbox-#{SecureRandom.hex(4)}"
+  end
 
-    private
+  private
 
-    def checkbox_base_classes
-      "peer appearance-none border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
-    end
+  def checkbox_base_classes
+    "peer appearance-none border-input dark:bg-input/30 checked:bg-primary checked:text-primary-foreground dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
   end
 end