fernandes-ui 0.1.0 → 0.1.2

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

data/app/behaviors/ui/calendar_behavior.rb

@@ -1,119 +1,146 @@
 # frozen_string_literal: true
 
-    # Shared behavior for Calendar component
-    # Handles Stimulus controller setup and data attributes
-    module UI::CalendarBehavior
-      WEEKDAYS = %w[Su Mo Tu We Th Fr Sa].freeze
+# UI::CalendarBehavior
+#
+# @ui_component Calendar
+# @ui_description Calendar component (Phlex) A date picker calendar with support for single, range, and multiple selection
+# @ui_category forms
+#
+# @ui_anatomy Calendar - Root container for calendar (required)
+#
+# @ui_feature Keyboard navigation
+# @ui_feature Form integration
+# @ui_feature Disabled state support
+# @ui_feature ARIA attributes for accessibility
+# @ui_feature Keyboard navigation with arrow keys
+# @ui_feature Click outside to close
+# @ui_feature Animation support
+#
+# @ui_keyboard Enter Activates the focused element
+# @ui_keyboard Space Activates the focused element
+# @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_keyboard Home Moves focus to first item
+# @ui_keyboard End Moves focus to last item
+# @ui_keyboard PageUp Moves focus up by page
+# @ui_keyboard PageDown Moves focus down by page
+#
+# @ui_related date_picker
+#
+module UI::CalendarBehavior
+  WEEKDAYS = %w[Su Mo Tu We Th Fr Sa].freeze
 
-      # Generate Stimulus controller data attributes
-      def calendar_data_attributes
-        attrs = {
-          controller: "ui--calendar",
-          ui__calendar_mode_value: @mode.to_s,
-          ui__calendar_selected_value: selected_json,
-          ui__calendar_month_value: @month.to_s,
-          ui__calendar_number_of_months_value: @number_of_months,
-          ui__calendar_week_starts_on_value: @week_starts_on,
-          ui__calendar_locale_value: @locale,
-          ui__calendar_min_date_value: @min_date&.to_s,
-          ui__calendar_max_date_value: @max_date&.to_s,
-          ui__calendar_disabled_value: disabled_dates_json,
-          ui__calendar_show_outside_days_value: @show_outside_days,
-          ui__calendar_fixed_weeks_value: @fixed_weeks,
-          ui__calendar_year_range_value: @year_range,
-          # Range constraints
-          ui__calendar_min_range_days_value: @min_range_days,
-          ui__calendar_max_range_days_value: @max_range_days,
-          ui__calendar_exclude_disabled_value: @exclude_disabled,
-          action: "keydown->ui--calendar#handleKeydown"
-        }
+  # Generate Stimulus controller data attributes
+  def calendar_data_attributes
+    attrs = {
+      controller: "ui--calendar",
+      ui__calendar_mode_value: @mode.to_s,
+      ui__calendar_selected_value: selected_json,
+      ui__calendar_month_value: @month.to_s,
+      ui__calendar_number_of_months_value: @number_of_months,
+      ui__calendar_week_starts_on_value: @week_starts_on,
+      ui__calendar_locale_value: @locale,
+      ui__calendar_min_date_value: @min_date&.to_s,
+      ui__calendar_max_date_value: @max_date&.to_s,
+      ui__calendar_disabled_value: disabled_dates_json,
+      ui__calendar_show_outside_days_value: @show_outside_days,
+      ui__calendar_fixed_weeks_value: @fixed_weeks,
+      ui__calendar_year_range_value: @year_range,
+      # Range constraints
+      ui__calendar_min_range_days_value: @min_range_days,
+      ui__calendar_max_range_days_value: @max_range_days,
+      ui__calendar_exclude_disabled_value: @exclude_disabled,
+      action: "keydown->ui--calendar#handleKeydown"
+    }
 
-        # Add UI Select controller if using custom select
-        if @show_dropdowns && !use_native_select?
-          attrs[:controller] = "ui--calendar ui--select-calendar-sync"
-        end
+    # Add UI Select controller if using custom select
+    if @show_dropdowns && !use_native_select?
+      attrs[:controller] = "ui--calendar ui--select-calendar-sync"
+    end
 
-        attrs.compact
-      end
+    attrs.compact
+  end
 
-      def use_native_select?
-        @use_native_select.nil? ? true : @use_native_select
-      end
+  def use_native_select?
+    @use_native_select.nil? || @use_native_select
+  end
 
-      # Build complete HTML attributes hash for calendar container
-      def calendar_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
+  # Build complete HTML attributes hash for calendar container
+  def calendar_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
 
-        # Merge data attributes, concatenating action values
-        merged_data = calendar_data_attributes.merge(user_data) do |key, calendar_val, user_val|
-          if key == :action
-            # Concatenate Stimulus actions with space separator
-            [calendar_val, user_val].compact.join(" ")
-          else
-            user_val
-          end
-        end
-
-        base_attrs.merge(
-          class: calendar_classes,
-          role: "application",
-          aria: {
-            label: aria_label_text
-          },
-          data: merged_data
-        )
-      end
-
-      # Generate aria-label based on mode
-      def aria_label_text
-        case @mode.to_s
-        when "range"
-          "Date range picker"
-        when "multiple"
-          "Multiple date picker"
-        else
-          "Date picker"
-        end
+    # Merge data attributes, concatenating action values
+    merged_data = calendar_data_attributes.merge(user_data) do |key, calendar_val, user_val|
+      if key == :action
+        # Concatenate Stimulus actions with space separator
+        [calendar_val, user_val].compact.join(" ")
+      else
+        user_val
       end
+    end
 
-      # Default calendar classes
-      def calendar_classes
-        base = "p-3"
-        if @number_of_months && @number_of_months > 1
-          "#{base} flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 #{@classes}".strip
-        else
-          "#{base} #{@classes}".strip
-        end
-      end
+    base_attrs.merge(
+      class: calendar_classes,
+      role: "application",
+      aria: {
+        label: aria_label_text
+      },
+      data: merged_data
+    )
+  end
 
-      # Convert selected dates to JSON array
-      def selected_json
-        case @selected
-        when Date then [@selected.to_s].to_json
-        when Range then [@selected.begin.to_s, @selected.end.to_s].to_json
-        when Array then @selected.map(&:to_s).to_json
-        else [].to_json
-        end
-      end
+  # Generate aria-label based on mode
+  def aria_label_text
+    case @mode.to_s
+    when "range"
+      "Date range picker"
+    when "multiple"
+      "Multiple date picker"
+    else
+      "Date picker"
+    end
+  end
 
-      # Convert selected dates for form value
-      def selected_value
-        case @selected
-        when Date then @selected.to_s
-        when Range then "#{@selected.begin},#{@selected.end}"
-        when Array then @selected.map(&:to_s).join(",")
-        else ""
-        end
-      end
+  # Default calendar classes
+  def calendar_classes
+    base = "p-3"
+    if @number_of_months && @number_of_months > 1
+      "#{base} flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0 #{@classes}".strip
+    else
+      "#{base} #{@classes}".strip
+    end
+  end
 
-      # Convert disabled dates to JSON array
-      def disabled_dates_json
-        (@disabled_dates || []).map(&:to_s).to_json
-      end
+  # Convert selected dates to JSON array
+  def selected_json
+    case @selected
+    when Date then [@selected.to_s].to_json
+    when Range then [@selected.begin.to_s, @selected.end.to_s].to_json
+    when Array then @selected.map(&:to_s).to_json
+    else [].to_json
+    end
+  end
 
-      # Get weekdays ordered by week_starts_on
-      def ordered_weekdays
-        WEEKDAYS.rotate(@week_starts_on || 0)
-      end
+  # Convert selected dates for form value
+  def selected_value
+    case @selected
+    when Date then @selected.to_s
+    when Range then "#{@selected.begin},#{@selected.end}"
+    when Array then @selected.map(&:to_s).join(",")
+    else ""
     end
+  end
+
+  # Convert disabled dates to JSON array
+  def disabled_dates_json
+    (@disabled_dates || []).map(&:to_s).to_json
+  end
+
+  # Get weekdays ordered by week_starts_on
+  def ordered_weekdays
+    WEEKDAYS.rotate(@week_starts_on || 0)
+  end
+end

data/app/behaviors/ui/card_action_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # ActionBehavior
-    #
-    # Shared behavior for CardAction component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardActionBehavior
-      def render_card_action(&content_block)
-        all_attributes = card_action_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# ActionBehavior
+#
+# Shared behavior for CardAction component across ERB, ViewComponent, and Phlex implementations.
+module UI::CardActionBehavior
+  def render_card_action(&content_block)
+    all_attributes = card_action_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_action_html_attributes
-        {
-          class: card_action_classes,
-          data: { slot: "card-action" }
-        }
-      end
+  def card_action_html_attributes
+    {
+      class: card_action_classes,
+      data: {slot: "card-action"}
+    }
+  end
 
-      def card_action_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_action_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_action_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_action_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_action_base_classes
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
-      end
-    end
+  def card_action_base_classes
+    "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+  end
+end

data/app/behaviors/ui/card_behavior.rb

@@ -1,32 +1,46 @@
 # frozen_string_literal: true
 
-    # CardBehavior
-    #
-    # Shared behavior for Card component across ERB, ViewComponent, and Phlex implementations.
-    module UI::CardBehavior
-      def render_card(&content_block)
-        all_attributes = card_html_attributes.deep_merge(@attributes)
-        content_tag(:div, **all_attributes, &content_block)
-      end
+# UI::CardBehavior
+#
+# @ui_component Card
+# @ui_category layout
+#
+# @ui_anatomy Card - Root container for card (required)
+# @ui_anatomy Action - Primary action button
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Description - Descriptive text element
+# @ui_anatomy Footer - Footer section with actions
+# @ui_anatomy Header - Header section with title and controls
+# @ui_anatomy Title - Title text element
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_related dialog
+#
+module UI::CardBehavior
+  def render_card(&content_block)
+    all_attributes = card_html_attributes.deep_merge(@attributes)
+    content_tag(:div, **all_attributes, &content_block)
+  end
 
-      def card_html_attributes
-        {
-          class: card_classes,
-          data: { slot: "card" }
-        }
-      end
+  def card_html_attributes
+    {
+      class: card_classes,
+      data: {slot: "card"}
+    }
+  end
 
-      def card_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          card_base_classes,
-          classes_value
-        ].compact.join(" "))
-      end
+  def card_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      card_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-      private
+  private
 
-      def card_base_classes
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm"
-      end
-    end
+  def card_base_classes
+    "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm"
+  end
+end