fernandes-ui 0.1.1 → 0.1.4

data/app/components/ui/context_menu_radio_item.rb

@@ -1,51 +1,51 @@
 # frozen_string_literal: true
 
-    # RadioItem - Phlex implementation
-    #
-    # A menu item with radio button functionality.
-    # Uses ContextMenuRadioItemBehavior concern for shared styling logic.
-    #
-    # @example Basic usage
-    #   render UI::RadioItem.new(checked: true) { "Option 1" }
-    class UI::ContextMenuRadioItem < Phlex::HTML
-      include UI::ContextMenuRadioItemBehavior
+# RadioItem - Phlex implementation
+#
+# A menu item with radio button functionality.
+# Uses ContextMenuRadioItemBehavior concern for shared styling logic.
+#
+# @example Basic usage
+#   render UI::RadioItem.new(checked: true) { "Option 1" }
+class UI::ContextMenuRadioItem < Phlex::HTML
+  include UI::ContextMenuRadioItemBehavior
 
-      # @param checked [Boolean] Whether the radio is checked
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(checked: false, classes: "", **attributes)
-        @checked = checked
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param checked [Boolean] Whether the radio is checked
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(checked: false, classes: "", **attributes)
+    @checked = checked
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**context_menu_radio_item_html_attributes.deep_merge(@attributes)) do
-          span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
-            if @checked
-              render_circle_icon
-            end
-          end
-          yield if block_given?
+  def view_template(&block)
+    div(**context_menu_radio_item_html_attributes.deep_merge(@attributes)) do
+      span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+        if @checked
+          render_circle_icon
         end
       end
+      yield if block_given?
+    end
+  end
 
-      private
+  private
 
-      def render_circle_icon
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
-          viewbox: "0 0 24 24",
-          fill: "currentColor",
-          stroke: "currentColor",
-          stroke_width: "2",
-          stroke_linecap: "round",
-          stroke_linejoin: "round",
-          class: "size-2"
-        ) do |s|
-          s.circle(cx: "12", cy: "12", r: "10")
-        end
-      end
+  def render_circle_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "size-2"
+    ) do |s|
+      s.circle(cx: "12", cy: "12", r: "10")
     end
+  end
+end

data/app/components/ui/context_menu_separator.rb

@@ -1,23 +1,23 @@
 # frozen_string_literal: true
 
-    # Separator - Phlex implementation
-    #
-    # A visual divider between menu items.
-    # Uses ContextMenuSeparatorBehavior concern for shared styling logic.
-    #
-    # @example Basic usage
-    #   render UI::Separator.new
-    class UI::ContextMenuSeparator < Phlex::HTML
-      include UI::ContextMenuSeparatorBehavior
+# Separator - Phlex implementation
+#
+# A visual divider between menu items.
+# Uses ContextMenuSeparatorBehavior concern for shared styling logic.
+#
+# @example Basic usage
+#   render UI::Separator.new
+class UI::ContextMenuSeparator < Phlex::HTML
+  include UI::ContextMenuSeparatorBehavior
 
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        div(**context_menu_separator_html_attributes.merge(@attributes))
-      end
-    end
+  def view_template
+    div(**context_menu_separator_html_attributes.merge(@attributes))
+  end
+end

data/app/components/ui/context_menu_shortcut.rb

@@ -1,25 +1,25 @@
 # frozen_string_literal: true
 
-    # Shortcut - Phlex implementation
-    #
-    # Displays keyboard shortcut text for a menu item.
-    # Uses ContextMenuShortcutBehavior concern for shared styling logic.
-    #
-    # @example Basic usage
-    #   render UI::Shortcut.new { "⌘K" }
-    class UI::ContextMenuShortcut < Phlex::HTML
-      include UI::ContextMenuShortcutBehavior
+# Shortcut - Phlex implementation
+#
+# Displays keyboard shortcut text for a menu item.
+# Uses ContextMenuShortcutBehavior concern for shared styling logic.
+#
+# @example Basic usage
+#   render UI::Shortcut.new { "⌘K" }
+class UI::ContextMenuShortcut < Phlex::HTML
+  include UI::ContextMenuShortcutBehavior
 
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        span(**context_menu_shortcut_html_attributes.merge(@attributes)) do
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    span(**context_menu_shortcut_html_attributes.merge(@attributes)) do
+      yield if block_given?
     end
+  end
+end

data/app/components/ui/context_menu_trigger.rb

@@ -1,27 +1,27 @@
 # frozen_string_literal: true
 
-    # Trigger - Phlex implementation
-    #
-    # The element that triggers the context menu on right-click.
-    # Uses ContextMenuTriggerBehavior concern for shared styling logic.
-    #
-    # @example Basic usage
-    #   render UI::Trigger.new do
-    #     "Right click here"
-    #   end
-    class UI::ContextMenuTrigger < Phlex::HTML
-      include UI::ContextMenuTriggerBehavior
+# Trigger - Phlex implementation
+#
+# The element that triggers the context menu on right-click.
+# Uses ContextMenuTriggerBehavior concern for shared styling logic.
+#
+# @example Basic usage
+#   render UI::Trigger.new do
+#     "Right click here"
+#   end
+class UI::ContextMenuTrigger < Phlex::HTML
+  include UI::ContextMenuTriggerBehavior
 
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**context_menu_trigger_html_attributes.deep_merge(@attributes)) do
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    div(**context_menu_trigger_html_attributes.deep_merge(@attributes)) do
+      yield if block_given?
     end
+  end
+end

data/app/components/ui/date_picker.rb

@@ -1,128 +1,128 @@
 # frozen_string_literal: true
 
-    # DatePicker Phlex component
-    # A date picker that combines a popover trigger with a calendar.
-    #
-    # @example Basic usage
-    #   render UI::DatePicker.new do |dp|
-    #     dp.trigger(placeholder: "Pick a date")
-    #   end
-    #
-    # @example With form field
-    #   render UI::DatePicker.new(name: "user[birth_date]", label: "Date of Birth") do |dp|
-    #     dp.trigger
-    #   end
-    #
-    class UI::DatePicker < Phlex::HTML
-      include UI::DatePickerBehavior
+# DatePicker Phlex component
+# A date picker that combines a popover trigger with a calendar.
+#
+# @example Basic usage
+#   render UI::DatePicker.new do |dp|
+#     dp.trigger(placeholder: "Pick a date")
+#   end
+#
+# @example With form field
+#   render UI::DatePicker.new(name: "user[birth_date]", label: "Date of Birth") do |dp|
+#     dp.trigger
+#   end
+#
+class UI::DatePicker < Phlex::HTML
+  include UI::DatePickerBehavior
 
-      # @param mode [Symbol] Selection mode: :single, :range, :multiple
-      # @param selected [Date, Range, Array] Initially selected date(s)
-      # @param locale [String] BCP 47 locale tag for formatting
-      # @param format [String] Date format style: "short", "medium", "long", "full"
-      # @param placeholder [String] Placeholder text when no date selected
-      # @param range_placeholder [String] Placeholder for range mode
-      # @param close_on_select [Boolean] Close popover after selection
-      # @param name [String] Form field name for hidden input
-      # @param label [String] Label text for the date picker
-      # @param label_for [String] ID to associate label with input
-      # @param show_dropdowns [Boolean] Show month/year dropdowns in calendar
-      # @param min_date [Date] Minimum selectable date
-      # @param max_date [Date] Maximum selectable date
-      # @param disabled_dates [Array<Date>] Dates that cannot be selected
-      # @param number_of_months [Integer] Number of months to display
-      # @param week_starts_on [Integer] 0 for Sunday, 1 for Monday, etc.
-      # @param classes [String] Additional CSS classes
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(
-        mode: :single,
-        selected: nil,
-        locale: "en-US",
-        format: "long",
-        placeholder: "Select date",
-        range_placeholder: "Select date range",
-        close_on_select: true,
-        name: nil,
-        label: nil,
-        label_for: nil,
-        show_dropdowns: false,
-        min_date: nil,
-        max_date: nil,
-        disabled_dates: [],
-        number_of_months: 1,
-        week_starts_on: 0,
-        classes: "",
-        **attributes
-      )
-        @mode = mode
-        @selected = selected
-        @locale = locale
-        @format = format
-        @placeholder = placeholder
-        @range_placeholder = range_placeholder
-        @close_on_select = close_on_select
-        @name = name
-        @label = label
-        @label_for = label_for
-        @show_dropdowns = show_dropdowns
-        @min_date = min_date
-        @max_date = max_date
-        @disabled_dates = disabled_dates
-        @number_of_months = number_of_months
-        @week_starts_on = week_starts_on
-        @classes = classes
-        @attributes = attributes
-      end
-
-      def view_template(&block)
-        div(**date_picker_html_attributes) do
-          if @label
-            render UI::Label.new(for_field: @label_for, classes: "px-1") { @label }
-          end
+  # @param mode [Symbol] Selection mode: :single, :range, :multiple
+  # @param selected [Date, Range, Array] Initially selected date(s)
+  # @param locale [String] BCP 47 locale tag for formatting
+  # @param format [String] Date format style: "short", "medium", "long", "full"
+  # @param placeholder [String] Placeholder text when no date selected
+  # @param range_placeholder [String] Placeholder for range mode
+  # @param close_on_select [Boolean] Close popover after selection
+  # @param name [String] Form field name for hidden input
+  # @param label [String] Label text for the date picker
+  # @param label_for [String] ID to associate label with input
+  # @param show_dropdowns [Boolean] Show month/year dropdowns in calendar
+  # @param min_date [Date] Minimum selectable date
+  # @param max_date [Date] Maximum selectable date
+  # @param disabled_dates [Array<Date>] Dates that cannot be selected
+  # @param number_of_months [Integer] Number of months to display
+  # @param week_starts_on [Integer] 0 for Sunday, 1 for Monday, etc.
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(
+    mode: :single,
+    selected: nil,
+    locale: "en-US",
+    format: "long",
+    placeholder: "Select date",
+    range_placeholder: "Select date range",
+    close_on_select: true,
+    name: nil,
+    label: nil,
+    label_for: nil,
+    show_dropdowns: false,
+    min_date: nil,
+    max_date: nil,
+    disabled_dates: [],
+    number_of_months: 1,
+    week_starts_on: 0,
+    classes: "",
+    **attributes
+  )
+    @mode = mode
+    @selected = selected
+    @locale = locale
+    @format = format
+    @placeholder = placeholder
+    @range_placeholder = range_placeholder
+    @close_on_select = close_on_select
+    @name = name
+    @label = label
+    @label_for = label_for
+    @show_dropdowns = show_dropdowns
+    @min_date = min_date
+    @max_date = max_date
+    @disabled_dates = disabled_dates
+    @number_of_months = number_of_months
+    @week_starts_on = week_starts_on
+    @classes = classes
+    @attributes = attributes
+  end
 
-          render UI::Popover.new(trigger: "click", placement: "bottom-start", offset: 4) do
-            yield(self) if block_given?
+  def view_template(&block)
+    div(**date_picker_html_attributes) do
+      if @label
+        render UI::Label.new(for_field: @label_for, classes: "px-1") { @label }
+      end
 
-            render UI::PopoverContent.new(classes: "w-auto overflow-hidden p-0") do
-              render UI::Calendar.new(
-                mode: @mode,
-                selected: @selected,
-                locale: @locale,
-                show_dropdowns: @show_dropdowns,
-                min_date: @min_date,
-                max_date: @max_date,
-                disabled_dates: @disabled_dates,
-                number_of_months: @number_of_months,
-                week_starts_on: @week_starts_on,
-                attributes: {
-                  data: {
-                    action: "ui--calendar:select->ui--datepicker#handleSelect"
-                  }
-                }
-              )
-            end
-          end
+      render UI::Popover.new(trigger: "click", placement: "bottom-start", offset: 4) do
+        yield(self) if block_given?
 
-          if @name
-            input(
-              type: "hidden",
-              name: @name,
-              value: selected_value,
-              data: { ui__datepicker_target: "hiddenInput" }
-            )
-          end
+        render UI::PopoverContent.new(classes: "w-auto overflow-hidden p-0") do
+          render UI::Calendar.new(
+            mode: @mode,
+            selected: @selected,
+            locale: @locale,
+            show_dropdowns: @show_dropdowns,
+            min_date: @min_date,
+            max_date: @max_date,
+            disabled_dates: @disabled_dates,
+            number_of_months: @number_of_months,
+            week_starts_on: @week_starts_on,
+            attributes: {
+              data: {
+                action: "ui--calendar:select->ui--datepicker#handleSelect"
+              }
+            }
+          )
         end
       end
 
-      # Render the trigger button
-      def trigger(placeholder: @placeholder, selected: @selected, icon: :chevron, classes: "", **attributes, &block)
-        render Trigger.new(
-          placeholder: placeholder,
-          selected: selected,
-          icon: icon,
-          classes: classes,
-          **attributes,
-          &block
+      if @name
+        input(
+          type: "hidden",
+          name: @name,
+          value: selected_value,
+          data: {ui__datepicker_target: "hiddenInput"}
         )
       end
     end
+  end
+
+  # Render the trigger button
+  def trigger(placeholder: @placeholder, selected: @selected, icon: :chevron, classes: "", **attributes, &block)
+    render UI::DatePickerTrigger.new(
+      placeholder: placeholder,
+      selected: selected,
+      icon: icon,
+      classes: classes,
+      **attributes,
+      &block
+    )
+  end
+end

data/app/components/ui/date_picker_input.rb

@@ -1,75 +1,75 @@
 # frozen_string_literal: true
 
-    # DatePicker Input Phlex component
-    # An input field with calendar button for date picker.
-    #
-    # @example Basic usage
-    #   render UI::Input.new(placeholder: "June 01, 2025")
-    #
-    class UI::DatePickerInput < Phlex::HTML
-      include DatePickerInputBehavior
+# DatePicker Input Phlex component
+# An input field with calendar button for date picker.
+#
+# @example Basic usage
+#   render UI::Input.new(placeholder: "June 01, 2025")
+#
+class UI::DatePickerInput < Phlex::HTML
+  include DatePickerInputBehavior
 
-      # @param placeholder [String] Placeholder text
-      # @param value [String] Initial input value
-      # @param id [String] Input ID for label association
-      # @param classes [String] Additional CSS classes for input
-      # @param icon_classes [String] Additional CSS classes for icon button
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(
-        placeholder: "Select date",
-        value: "",
-        id: nil,
-        classes: "",
-        icon_classes: "",
-        **attributes
-      )
-        @placeholder = placeholder
-        @value = value
-        @id = id
-        @classes = classes
-        @icon_classes = icon_classes
-        @attributes = attributes
-      end
+  # @param placeholder [String] Placeholder text
+  # @param value [String] Initial input value
+  # @param id [String] Input ID for label association
+  # @param classes [String] Additional CSS classes for input
+  # @param icon_classes [String] Additional CSS classes for icon button
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(
+    placeholder: "Select date",
+    value: "",
+    id: nil,
+    classes: "",
+    icon_classes: "",
+    **attributes
+  )
+    @placeholder = placeholder
+    @value = value
+    @id = id
+    @classes = classes
+    @icon_classes = icon_classes
+    @attributes = attributes
+  end
 
-      def view_template
-        div(class: "relative flex gap-2") do
-          input_attrs = date_picker_input_html_attributes
-          input_attrs[:id] = @id if @id
-          input(**input_attrs)
+  def view_template
+    div(class: "relative flex gap-2") do
+      input_attrs = date_picker_input_html_attributes
+      input_attrs[:id] = @id if @id
+      input(**input_attrs)
 
-          button(
-            type: "button",
-            class: date_picker_icon_button_classes,
-            data: {
-              ui__datepicker_target: "trigger",
-              ui__popover_target: "trigger"
-            }
-          ) do
-            render_calendar_icon
-            span(class: "sr-only") { "Select date" }
-          end
-        end
+      button(
+        type: "button",
+        class: date_picker_icon_button_classes,
+        data: {
+          ui__datepicker_target: "trigger",
+          ui__popover_target: "trigger"
+        }
+      ) do
+        render_calendar_icon
+        span(class: "sr-only") { "Select date" }
       end
+    end
+  end
 
-      private
+  private
 
-      def render_calendar_icon
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "16",
-          height: "16",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          stroke_width: "2",
-          stroke_linecap: "round",
-          stroke_linejoin: "round",
-          class: "h-4 w-4 opacity-50"
-        ) do |s|
-          s.path(d: "M8 2v4")
-          s.path(d: "M16 2v4")
-          s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2")
-          s.path(d: "M3 10h18")
-        end
-      end
+  def render_calendar_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-4 w-4 opacity-50"
+    ) do |s|
+      s.path(d: "M8 2v4")
+      s.path(d: "M16 2v4")
+      s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2")
+      s.path(d: "M3 10h18")
     end
+  end
+end