fernandes-ui 0.1.1 → 0.1.4

data/app/behaviors/ui/context_menu_radio_group_behavior.rb

@@ -1,20 +1,20 @@
 # frozen_string_literal: true
 
-    # ContextMenuRadioGroupBehavior
-    #
-    # Shared behavior for ContextMenuRadioGroup component across ERB, ViewComponent, and Phlex implementations.
-    module UI::ContextMenuRadioGroupBehavior
-      # Returns HTML attributes for the radio group
-      def context_menu_radio_group_html_attributes
-        {
-          class: context_menu_radio_group_classes,
-          role: "group"
-        }
-      end
+# ContextMenuRadioGroupBehavior
+#
+# Shared behavior for ContextMenuRadioGroup component across ERB, ViewComponent, and Phlex implementations.
+module UI::ContextMenuRadioGroupBehavior
+  # Returns HTML attributes for the radio group
+  def context_menu_radio_group_html_attributes
+    {
+      class: context_menu_radio_group_classes,
+      role: "group"
+    }
+  end
 
-      # Returns combined CSS classes for the radio group
-      def context_menu_radio_group_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
-      end
-    end
+  # Returns combined CSS classes for the radio group
+  def context_menu_radio_group_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([classes_value].compact.join(" "))
+  end
+end

data/app/behaviors/ui/context_menu_radio_item_behavior.rb

@@ -1,38 +1,38 @@
 # frozen_string_literal: true
 
-    # ContextMenuRadioItemBehavior
-    #
-    # Shared behavior for ContextMenuRadioItem component across ERB, ViewComponent, and Phlex implementations.
-    module UI::ContextMenuRadioItemBehavior
-      # Returns HTML attributes for the radio item
-      def context_menu_radio_item_html_attributes
-        {
-          class: context_menu_radio_item_classes,
-          data: context_menu_radio_item_data_attributes,
-          role: "menuitemradio",
-          "aria-checked": @checked.to_s,
-          tabindex: "-1"
-        }
-      end
+# ContextMenuRadioItemBehavior
+#
+# Shared behavior for ContextMenuRadioItem component across ERB, ViewComponent, and Phlex implementations.
+module UI::ContextMenuRadioItemBehavior
+  # Returns HTML attributes for the radio item
+  def context_menu_radio_item_html_attributes
+    {
+      class: context_menu_radio_item_classes,
+      data: context_menu_radio_item_data_attributes,
+      role: "menuitemradio",
+      "aria-checked": @checked.to_s,
+      tabindex: "-1"
+    }
+  end
 
-      # Returns combined CSS classes for the radio item
-      def context_menu_radio_item_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        base_classes = "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+  # Returns combined CSS classes for the radio item
+  def context_menu_radio_item_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base_classes = "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 
-        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
-      end
+    TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+  end
 
-      # Returns data attributes for the radio item
-      def context_menu_radio_item_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        existing_action = (attributes_value&.fetch(:data, {}) || {}).fetch(:action, "")
-        combined_action = [existing_action, "mouseenter->ui--context-menu#trackHoveredItem"].reject(&:empty?).join(" ")
+  # Returns data attributes for the radio item
+  def context_menu_radio_item_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    existing_action = (attributes_value&.fetch(:data, {}) || {}).fetch(:action, "")
+    combined_action = [existing_action, "mouseenter->ui--context-menu#trackHoveredItem"].reject(&:empty?).join(" ")
 
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          "ui--context-menu-target": "item",
-          action: combined_action,
-          state: @checked ? "checked" : "unchecked"
-        })
-      end
-    end
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      "ui--context-menu-target": "item",
+      action: combined_action,
+      state: @checked ? "checked" : "unchecked"
+    })
+  end
+end

data/app/behaviors/ui/context_menu_separator_behavior.rb

@@ -1,22 +1,22 @@
 # frozen_string_literal: true
 
-    # ContextMenuSeparatorBehavior
-    #
-    # Shared behavior for ContextMenuSeparator component across ERB, ViewComponent, and Phlex implementations.
-    module UI::ContextMenuSeparatorBehavior
-      # Returns HTML attributes for the context menu separator
-      def context_menu_separator_html_attributes
-        {
-          class: context_menu_separator_classes,
-          role: "separator"
-        }
-      end
+# ContextMenuSeparatorBehavior
+#
+# Shared behavior for ContextMenuSeparator component across ERB, ViewComponent, and Phlex implementations.
+module UI::ContextMenuSeparatorBehavior
+  # Returns HTML attributes for the context menu separator
+  def context_menu_separator_html_attributes
+    {
+      class: context_menu_separator_classes,
+      role: "separator"
+    }
+  end
 
-      # Returns combined CSS classes for the separator
-      def context_menu_separator_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        base_classes = "bg-border -mx-1 my-1 h-px"
+  # Returns combined CSS classes for the separator
+  def context_menu_separator_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base_classes = "bg-border -mx-1 my-1 h-px"
 
-        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
-      end
-    end
+    TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+  end
+end

data/app/behaviors/ui/context_menu_shortcut_behavior.rb

@@ -1,21 +1,21 @@
 # frozen_string_literal: true
 
-    # ContextMenuShortcutBehavior
-    #
-    # Shared behavior for ContextMenuShortcut component across ERB, ViewComponent, and Phlex implementations.
-    module UI::ContextMenuShortcutBehavior
-      # Returns HTML attributes for the context menu shortcut
-      def context_menu_shortcut_html_attributes
-        {
-          class: context_menu_shortcut_classes
-        }
-      end
+# ContextMenuShortcutBehavior
+#
+# Shared behavior for ContextMenuShortcut component across ERB, ViewComponent, and Phlex implementations.
+module UI::ContextMenuShortcutBehavior
+  # Returns HTML attributes for the context menu shortcut
+  def context_menu_shortcut_html_attributes
+    {
+      class: context_menu_shortcut_classes
+    }
+  end
 
-      # Returns combined CSS classes for the shortcut
-      def context_menu_shortcut_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        base_classes = "text-muted-foreground ml-auto text-xs tracking-widest"
+  # Returns combined CSS classes for the shortcut
+  def context_menu_shortcut_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    base_classes = "text-muted-foreground ml-auto text-xs tracking-widest"
 
-        TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
-      end
-    end
+    TailwindMerge::Merger.new.merge([base_classes, classes_value].compact.join(" "))
+  end
+end

data/app/behaviors/ui/context_menu_trigger_behavior.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # ContextMenuTriggerBehavior
-    #
-    # Shared behavior for ContextMenuTrigger component across ERB, ViewComponent, and Phlex implementations.
-    module UI::ContextMenuTriggerBehavior
-      # Returns HTML attributes for the context menu trigger
-      def context_menu_trigger_html_attributes
-        {
-          class: context_menu_trigger_classes,
-          data: context_menu_trigger_data_attributes
-        }
-      end
+# ContextMenuTriggerBehavior
+#
+# Shared behavior for ContextMenuTrigger component across ERB, ViewComponent, and Phlex implementations.
+module UI::ContextMenuTriggerBehavior
+  # Returns HTML attributes for the context menu trigger
+  def context_menu_trigger_html_attributes
+    {
+      class: context_menu_trigger_classes,
+      data: context_menu_trigger_data_attributes
+    }
+  end
 
-      # Returns combined CSS classes for the trigger
-      def context_menu_trigger_classes
-        classes_value = respond_to?(:classes, true) ? classes : @classes
-        TailwindMerge::Merger.new.merge([
-          "flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm",
-          classes_value
-        ].compact.join(" "))
-      end
+  # Returns combined CSS classes for the trigger
+  def context_menu_trigger_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      "flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm",
+      classes_value
+    ].compact.join(" "))
+  end
 
-      # Returns data attributes for Stimulus action
-      def context_menu_trigger_data_attributes
-        attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-        (attributes_value&.fetch(:data, {}) || {}).merge({
-          action: "contextmenu->ui--context-menu#open",
-          "ui--context-menu-target": "trigger"
-        })
-      end
-    end
+  # Returns data attributes for Stimulus action
+  def context_menu_trigger_data_attributes
+    attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+    (attributes_value&.fetch(:data, {}) || {}).merge({
+      action: "contextmenu->ui--context-menu#open",
+      "ui--context-menu-target": "trigger"
+    })
+  end
+end

data/app/behaviors/ui/date_picker_behavior.rb

@@ -1,90 +1,107 @@
 # frozen_string_literal: true
 
-    # Shared behavior for DatePicker container component
-    # Handles Stimulus controller setup and data attributes
-    module UI::DatePickerBehavior
-      # Generate Stimulus controller data attributes
-      def date_picker_data_attributes
-        attrs = {
-          controller: "ui--datepicker",
-          ui__datepicker_mode_value: @mode.to_s,
-          ui__datepicker_selected_value: selected_json,
-          ui__datepicker_locale_value: @locale,
-          ui__datepicker_format_value: @format,
-          ui__datepicker_placeholder_value: @placeholder,
-          ui__datepicker_range_placeholder_value: @range_placeholder,
-          ui__datepicker_close_on_select_value: @close_on_select
-        }
-        attrs.compact
-      end
+# UI::DatePickerBehavior
+#
+# @ui_component Date Picker
+# @ui_description DatePicker Phlex component A date picker that combines a popover trigger with a calendar.
+# @ui_category forms
+#
+# @ui_anatomy Date Picker - Root container with state management (required)
+# @ui_anatomy Input - Text input field
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature Form integration
+# @ui_feature Keyboard navigation with arrow keys
+#
+# @ui_keyboard ArrowDown Moves focus to next item
+#
+# @ui_related calendar
+# @ui_related popover
+#
+module UI::DatePickerBehavior
+  # Generate Stimulus controller data attributes
+  def date_picker_data_attributes
+    attrs = {
+      controller: "ui--datepicker",
+      ui__datepicker_mode_value: @mode.to_s,
+      ui__datepicker_selected_value: selected_json,
+      ui__datepicker_locale_value: @locale,
+      ui__datepicker_format_value: @format,
+      ui__datepicker_placeholder_value: @placeholder,
+      ui__datepicker_range_placeholder_value: @range_placeholder,
+      ui__datepicker_close_on_select_value: @close_on_select
+    }
+    attrs.compact
+  end
 
-      # Build complete HTML attributes hash for datepicker container
-      def date_picker_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
-        base_attrs.merge(
-          class: date_picker_classes,
-          data: user_data.merge(date_picker_data_attributes)
-        )
-      end
+  # Build complete HTML attributes hash for datepicker container
+  def date_picker_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
+    base_attrs.merge(
+      class: date_picker_classes,
+      data: user_data.merge(date_picker_data_attributes)
+    )
+  end
 
-      # Default datepicker classes
-      def date_picker_classes
-        TailwindMerge::Merger.new.merge([
-          "flex flex-col gap-3",
-          @classes
-        ].compact.join(" "))
-      end
+  # Default datepicker classes
+  def date_picker_classes
+    TailwindMerge::Merger.new.merge([
+      "flex flex-col gap-3",
+      @classes
+    ].compact.join(" "))
+  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
+  # 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
 
-      # 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 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
 
-      # Get initial display value
-      def initial_display_value
-        return placeholder_text if @selected.nil?
+  # Get initial display value
+  def initial_display_value
+    return placeholder_text if @selected.nil?
 
-        case @selected
-        when Date
-          format_date(@selected)
-        when Range
-          "#{format_date(@selected.begin)} - #{format_date(@selected.end)}"
-        when Array
-          if @selected.empty?
-            placeholder_text
-          elsif @selected.length == 1
-            format_date(@selected.first)
-          else
-            "#{@selected.length} dates selected"
-          end
-        else
-          placeholder_text
-        end
+    case @selected
+    when Date
+      format_date(@selected)
+    when Range
+      "#{format_date(@selected.begin)} - #{format_date(@selected.end)}"
+    when Array
+      if @selected.empty?
+        placeholder_text
+      elsif @selected.length == 1
+        format_date(@selected.first)
+      else
+        "#{@selected.length} dates selected"
       end
+    else
+      placeholder_text
+    end
+  end
 
-      def placeholder_text
-        @mode.to_s == "range" ? @range_placeholder : @placeholder
-      end
+  def placeholder_text
+    (@mode.to_s == "range") ? @range_placeholder : @placeholder
+  end
 
-      def format_date(date)
-        return "" unless date
+  def format_date(date)
+    return "" unless date
 
-        date.strftime("%B %d, %Y")
-      end
-    end
+    date.strftime("%B %d, %Y")
+  end
+end

data/app/behaviors/ui/date_picker_input_behavior.rb

@@ -1,62 +1,62 @@
 # frozen_string_literal: true
 
-    # Shared behavior for DatePicker input mode (text input + icon button)
-    module UI::DatePickerInputBehavior
-      # Generate data attributes for text input
-      def date_picker_input_data_attributes
-        {
-          ui__datepicker_target: "input",
-          action: "input->ui--datepicker#handleInput keydown->ui--datepicker#handleInputKeydown"
-        }
-      end
+# Shared behavior for DatePicker input mode (text input + icon button)
+module UI::DatePickerInputBehavior
+  # Generate data attributes for text input
+  def date_picker_input_data_attributes
+    {
+      ui__datepicker_target: "input",
+      action: "input->ui--datepicker#handleInput keydown->ui--datepicker#handleInputKeydown"
+    }
+  end
 
-      # Build complete HTML attributes hash for text input
-      def date_picker_input_html_attributes
-        base_attrs = @attributes&.except(:data) || {}
-        user_data = @attributes&.fetch(:data, {}) || {}
-        base_attrs.merge(
-          class: date_picker_input_classes,
-          type: "text",
-          placeholder: @placeholder,
-          value: @value,
-          data: user_data.merge(date_picker_input_data_attributes)
-        )
-      end
+  # Build complete HTML attributes hash for text input
+  def date_picker_input_html_attributes
+    base_attrs = @attributes&.except(:data) || {}
+    user_data = @attributes&.fetch(:data, {}) || {}
+    base_attrs.merge(
+      class: date_picker_input_classes,
+      type: "text",
+      placeholder: @placeholder,
+      value: @value,
+      data: user_data.merge(date_picker_input_data_attributes)
+    )
+  end
 
-      # Input classes
-      def date_picker_input_classes
-        TailwindMerge::Merger.new.merge([
-          # Input base styles
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
-          "ring-offset-background",
-          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
-          "placeholder:text-muted-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          # Extra padding for icon button
-          "pr-10",
-          @classes
-        ].compact.join(" "))
-      end
+  # Input classes
+  def date_picker_input_classes
+    TailwindMerge::Merger.new.merge([
+      # Input base styles
+      "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm",
+      "ring-offset-background",
+      "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
+      "placeholder:text-muted-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      # Extra padding for icon button
+      "pr-10",
+      @classes
+    ].compact.join(" "))
+  end
 
-      # Icon button data attributes
-      def date_picker_icon_button_data_attributes
-        {
-          ui__datepicker_target: "trigger",
-          ui__popover_target: "trigger"
-        }
-      end
+  # Icon button data attributes
+  def date_picker_icon_button_data_attributes
+    {
+      ui__datepicker_target: "trigger",
+      ui__popover_target: "trigger"
+    }
+  end
 
-      # Icon button classes (positioned inside input)
-      def date_picker_icon_button_classes
-        TailwindMerge::Merger.new.merge([
-          "absolute top-1/2 right-2 -translate-y-1/2",
-          "inline-flex items-center justify-center",
-          "h-6 w-6 rounded-sm",
-          "hover:bg-accent hover:text-accent-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "transition-colors",
-          @icon_classes
-        ].compact.join(" "))
-      end
-    end
+  # Icon button classes (positioned inside input)
+  def date_picker_icon_button_classes
+    TailwindMerge::Merger.new.merge([
+      "absolute top-1/2 right-2 -translate-y-1/2",
+      "inline-flex items-center justify-center",
+      "h-6 w-6 rounded-sm",
+      "hover:bg-accent hover:text-accent-foreground",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "transition-colors",
+      @icon_classes
+    ].compact.join(" "))
+  end
+end