fernandes-ui 0.1.0 → 0.1.2

data/app/view_components/ui/responsive_dialog_component.rb

@@ -1,81 +1,81 @@
 # frozen_string_literal: true
 
-    # ResponsiveDialog component (ViewComponent)
-    # Combines Dialog (desktop) and Drawer (mobile) with responsive switching
-    #
-    # Hybrid CSS + Stimulus approach:
-    # - Renders both Dialog and Drawer
-    # - CSS hides one based on breakpoint (md:hidden / md:block)
-    # - Stimulus controller syncs state between them
-    #
-    # @example Basic usage
-    #   <%= render UI::ResponsiveDialogComponent.new do %>
-    #     <!-- Content will be rendered in both Dialog and Drawer -->
-    #     <form>...</form>
-    #   <% end %>
-    #
-    # @example With custom breakpoint
-    #   <%= render UI::ResponsiveDialogComponent.new(
-    #     breakpoint: 1024,
-    #     direction: "right"
-    #   ) do %>
-    #     <!-- Content -->
-    #   <% end %>
-    class UI::ResponsiveDialogComponent < ViewComponent::Base
-      include UI::ResponsiveDialogBehavior
+# ResponsiveDialog component (ViewComponent)
+# Combines Dialog (desktop) and Drawer (mobile) with responsive switching
+#
+# Hybrid CSS + Stimulus approach:
+# - Renders both Dialog and Drawer
+# - CSS hides one based on breakpoint (md:hidden / md:block)
+# - Stimulus controller syncs state between them
+#
+# @example Basic usage
+#   <%= render UI::ResponsiveDialogComponent.new do %>
+#     <!-- Content will be rendered in both Dialog and Drawer -->
+#     <form>...</form>
+#   <% end %>
+#
+# @example With custom breakpoint
+#   <%= render UI::ResponsiveDialogComponent.new(
+#     breakpoint: 1024,
+#     direction: "right"
+#   ) do %>
+#     <!-- Content -->
+#   <% end %>
+class UI::ResponsiveDialogComponent < ViewComponent::Base
+  include UI::ResponsiveDialogBehavior
 
-      # @param open [Boolean] whether the dialog/drawer is open
-      # @param breakpoint [Integer] responsive breakpoint in pixels (default: 768 = md)
-      # @param direction [String] drawer direction: "bottom", "top", "left", "right"
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(
-        open: false,
-        breakpoint: 768,
-        direction: "bottom",
-        classes: "",
-        attributes: {}
-      )
-        @open = open
-        @breakpoint = breakpoint
-        @direction = direction
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param open [Boolean] whether the dialog/drawer is open
+  # @param breakpoint [Integer] responsive breakpoint in pixels (default: 768 = md)
+  # @param direction [String] drawer direction: "bottom", "top", "left", "right"
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(
+    open: false,
+    breakpoint: 768,
+    direction: "bottom",
+    classes: "",
+    attributes: {}
+  )
+    @open = open
+    @breakpoint = breakpoint
+    @direction = direction
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        attrs = responsive_dialog_html_attributes
-        attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
+  def call
+    attrs = responsive_dialog_html_attributes
+    attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))
 
-        content_tag :div, **attrs.merge(@attributes.except(:data)) do
-          # Mobile: Drawer (hidden on md and up)
-          mobile_wrapper + desktop_wrapper
-        end
-      end
+    content_tag :div, **attrs.merge(@attributes.except(:data)) do
+      # Mobile: Drawer (hidden on md and up)
+      mobile_wrapper + desktop_wrapper
+    end
+  end
 
-      private
+  private
 
-      def mobile_wrapper
-        content_tag :div, class: "md:hidden", data: { "ui--responsive-dialog-target": "drawer" } do
-          render_drawer
-        end
-      end
+  def mobile_wrapper
+    content_tag :div, class: "md:hidden", data: {"ui--responsive-dialog-target": "drawer"} do
+      render_drawer
+    end
+  end
 
-      def desktop_wrapper
-        content_tag :div, class: "hidden md:block", data: { "ui--responsive-dialog-target": "dialog" } do
-          render_dialog
-        end
-      end
+  def desktop_wrapper
+    content_tag :div, class: "hidden md:block", data: {"ui--responsive-dialog-target": "dialog"} do
+      render_dialog
+    end
+  end
 
-      def render_drawer
-        render UI::DrawerComponent.new(open: @open, direction: @direction) do
-          content
-        end
-      end
+  def render_drawer
+    render UI::DrawerComponent.new(open: @open, direction: @direction) do
+      content
+    end
+  end
 
-      def render_dialog
-        render UI::DialogComponent.new(open: @open) do
-          content
-        end
-      end
+  def render_dialog
+    render UI::DialogComponent.new(open: @open) do
+      content
     end
+  end
+end

data/app/view_components/ui/scroll_area_component.rb

@@ -1,46 +1,46 @@
 # frozen_string_literal: true
 
-    # ScrollAreaComponent - ViewComponent implementation
-    #
-    # Augments native scroll functionality for custom, cross-browser styling.
-    # Root container with Stimulus controller.
-    #
-    # @example Basic usage
-    #   <%= render UI::ScrollAreaComponent.new(classes: "h-[200px] w-[350px] rounded-md border p-4") do %>
-    #     <div class="space-y-4">
-    #       <h3 class="text-sm font-semibold">Tags</h3>
-    #       <!-- Content here -->
-    #     </div>
-    #   <% end %>
-    class UI::ScrollAreaComponent < ViewComponent::Base
-      include UI::ScrollAreaBehavior
+# ScrollAreaComponent - ViewComponent implementation
+#
+# Augments native scroll functionality for custom, cross-browser styling.
+# Root container with Stimulus controller.
+#
+# @example Basic usage
+#   <%= render UI::ScrollAreaComponent.new(classes: "h-[200px] w-[350px] rounded-md border p-4") do %>
+#     <div class="space-y-4">
+#       <h3 class="text-sm font-semibold">Tags</h3>
+#       <!-- Content here -->
+#     </div>
+#   <% end %>
+class UI::ScrollAreaComponent < ViewComponent::Base
+  include UI::ScrollAreaBehavior
 
-      # @param type [String] Scrollbar visibility behavior ("hover", "scroll", "auto", "always")
-      # @param scroll_hide_delay [Integer] Delay in ms before hiding scrollbar on hover
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(type: "hover", scroll_hide_delay: 600, classes: "", **attributes)
-        @type = type
-        @scroll_hide_delay = scroll_hide_delay
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param type [String] Scrollbar visibility behavior ("hover", "scroll", "auto", "always")
+  # @param scroll_hide_delay [Integer] Delay in ms before hiding scrollbar on hover
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(type: "hover", scroll_hide_delay: 600, classes: "", **attributes)
+    @type = type
+    @scroll_hide_delay = scroll_hide_delay
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        root_attrs = scroll_area_html_attributes.deep_merge(@attributes)
+  def call
+    root_attrs = scroll_area_html_attributes.deep_merge(@attributes)
 
-        # Add Stimulus controller and values
-        root_attrs[:data] ||= {}
-        root_attrs[:data][:controller] = "ui--scroll-area"
-        root_attrs[:data][:ui__scroll_area_type_value] = @type
-        root_attrs[:data][:ui__scroll_area_scroll_hide_delay_value] = @scroll_hide_delay
+    # Add Stimulus controller and values
+    root_attrs[:data] ||= {}
+    root_attrs[:data][:controller] = "ui--scroll-area"
+    root_attrs[:data][:ui__scroll_area_type_value] = @type
+    root_attrs[:data][:ui__scroll_area_scroll_hide_delay_value] = @scroll_hide_delay
 
-        content_tag :div, **root_attrs do
-          safe_join([
-            render(UI::ViewportComponent.new) { content },
-            render(UI::ScrollbarComponent.new(orientation: "vertical")),
-            render(UI::CornerComponent.new)
-          ])
-        end
-      end
+    content_tag :div, **root_attrs do
+      safe_join([
+        render(UI::ViewportComponent.new) { content },
+        render(UI::ScrollbarComponent.new(orientation: "vertical")),
+        render(UI::CornerComponent.new)
+      ])
     end
+  end
+end

data/app/view_components/ui/scroll_area_corner_component.rb

@@ -1,22 +1,22 @@
 # frozen_string_literal: true
 
-    # CornerComponent - ViewComponent implementation
-    #
-    # Intersection element between vertical and horizontal scrollbars.
-    #
-    # @example Default usage (automatically used by ScrollAreaComponent)
-    #   <%= render UI::CornerComponent.new %>
-    class UI::ScrollAreaCornerComponent < ViewComponent::Base
-      include UI::ScrollAreaCornerBehavior
+# CornerComponent - ViewComponent implementation
+#
+# Intersection element between vertical and horizontal scrollbars.
+#
+# @example Default usage (automatically used by ScrollAreaComponent)
+#   <%= render UI::CornerComponent.new %>
+class UI::ScrollAreaCornerComponent < ViewComponent::Base
+  include UI::ScrollAreaCornerBehavior
 
-      # @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 call
-        content_tag :div, nil, **scroll_area_corner_html_attributes.deep_merge(@attributes)
-      end
-    end
+  def call
+    content_tag :div, nil, **scroll_area_corner_html_attributes.deep_merge(@attributes)
+  end
+end

data/app/view_components/ui/scroll_area_scrollbar_component.rb

@@ -1,35 +1,35 @@
 # frozen_string_literal: true
 
-    # ScrollbarComponent - ViewComponent implementation
-    #
-    # Custom scrollbar track that contains the draggable thumb.
-    #
-    # @example Vertical scrollbar (default)
-    #   <%= render UI::ScrollbarComponent.new(orientation: "vertical") %>
-    #
-    # @example Horizontal scrollbar
-    #   <%= render UI::ScrollbarComponent.new(orientation: "horizontal") %>
-    class UI::ScrollAreaScrollbarComponent < ViewComponent::Base
-      include UI::ScrollAreaScrollbarBehavior
+# ScrollbarComponent - ViewComponent implementation
+#
+# Custom scrollbar track that contains the draggable thumb.
+#
+# @example Vertical scrollbar (default)
+#   <%= render UI::ScrollbarComponent.new(orientation: "vertical") %>
+#
+# @example Horizontal scrollbar
+#   <%= render UI::ScrollbarComponent.new(orientation: "horizontal") %>
+class UI::ScrollAreaScrollbarComponent < ViewComponent::Base
+  include UI::ScrollAreaScrollbarBehavior
 
-      # @param orientation [String] "vertical" or "horizontal"
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(orientation: "vertical", classes: "", **attributes)
-        @orientation = orientation
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param orientation [String] "vertical" or "horizontal"
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(orientation: "vertical", classes: "", **attributes)
+    @orientation = orientation
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        scrollbar_attrs = scroll_area_scrollbar_html_attributes.deep_merge(@attributes)
+  def call
+    scrollbar_attrs = scroll_area_scrollbar_html_attributes.deep_merge(@attributes)
 
-        # Add Stimulus target
-        scrollbar_attrs[:data] ||= {}
-        scrollbar_attrs[:data][:"ui--scroll-area-target"] = "scrollbar"
+    # Add Stimulus target
+    scrollbar_attrs[:data] ||= {}
+    scrollbar_attrs[:data][:"ui--scroll-area-target"] = "scrollbar"
 
-        content_tag :div, **scrollbar_attrs do
-          render UI::ThumbComponent.new
-        end
-      end
+    content_tag :div, **scrollbar_attrs do
+      render UI::ThumbComponent.new
     end
+  end
+end

data/app/view_components/ui/scroll_area_thumb_component.rb

@@ -1,29 +1,29 @@
 # frozen_string_literal: true
 
-    # ThumbComponent - ViewComponent implementation
-    #
-    # Draggable scroll indicator inside the scrollbar.
-    #
-    # @example Default usage (automatically used by ScrollbarComponent)
-    #   <%= render UI::ThumbComponent.new %>
-    class UI::ScrollAreaThumbComponent < ViewComponent::Base
-      include UI::ScrollAreaThumbBehavior
+# ThumbComponent - ViewComponent implementation
+#
+# Draggable scroll indicator inside the scrollbar.
+#
+# @example Default usage (automatically used by ScrollbarComponent)
+#   <%= render UI::ThumbComponent.new %>
+class UI::ScrollAreaThumbComponent < ViewComponent::Base
+  include UI::ScrollAreaThumbBehavior
 
-      # @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 call
-        thumb_attrs = scroll_area_thumb_html_attributes.deep_merge(@attributes)
+  def call
+    thumb_attrs = scroll_area_thumb_html_attributes.deep_merge(@attributes)
 
-        # Add Stimulus target and action for drag
-        thumb_attrs[:data] ||= {}
-        thumb_attrs[:data][:"ui--scroll-area-target"] = "thumb"
-        thumb_attrs[:data][:action] = "pointerdown->ui--scroll-area#startDrag"
+    # Add Stimulus target and action for drag
+    thumb_attrs[:data] ||= {}
+    thumb_attrs[:data][:"ui--scroll-area-target"] = "thumb"
+    thumb_attrs[:data][:action] = "pointerdown->ui--scroll-area#startDrag"
 
-        content_tag :div, nil, **thumb_attrs
-      end
-    end
+    content_tag :div, nil, **thumb_attrs
+  end
+end

data/app/view_components/ui/scroll_area_viewport_component.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # ViewportComponent - ViewComponent implementation
-    #
-    # Scrollable content container with hidden native scrollbar.
-    #
-    # @example Basic usage (automatically used by ScrollAreaComponent)
-    #   <%= render UI::ViewportComponent.new do %>
-    #     <!-- Content here -->
-    #   <% end %>
-    class UI::ScrollAreaViewportComponent < ViewComponent::Base
-      include UI::ScrollAreaViewportBehavior
+# ViewportComponent - ViewComponent implementation
+#
+# Scrollable content container with hidden native scrollbar.
+#
+# @example Basic usage (automatically used by ScrollAreaComponent)
+#   <%= render UI::ViewportComponent.new do %>
+#     <!-- Content here -->
+#   <% end %>
+class UI::ScrollAreaViewportComponent < ViewComponent::Base
+  include UI::ScrollAreaViewportBehavior
 
-      # @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 call
-        viewport_attrs = scroll_area_viewport_html_attributes.deep_merge(@attributes)
+  def call
+    viewport_attrs = scroll_area_viewport_html_attributes.deep_merge(@attributes)
 
-        # Add Stimulus target
-        viewport_attrs[:data] ||= {}
-        viewport_attrs[:data][:"ui--scroll-area-target"] = "viewport"
+    # Add Stimulus target
+    viewport_attrs[:data] ||= {}
+    viewport_attrs[:data][:"ui--scroll-area-target"] = "viewport"
 
-        content_tag :div, **viewport_attrs do
-          content_tag :div, content, style: "min-width: 100%; display: table;"
-        end
-      end
+    content_tag :div, **viewport_attrs do
+      content_tag :div, content, style: "min-width: 100%; display: table;"
     end
+  end
+end

data/app/view_components/ui/select_component.rb

@@ -1,31 +1,31 @@
 # frozen_string_literal: true
 
-    # SelectComponent - ViewComponent implementation
-    #
-    # A custom select component with keyboard navigation, scrollable viewport, and form integration.
-    # Root container that wraps trigger, content, and items.
-    #
-    # @example Basic usage
-    #   <%= render UI::SelectComponent.new(value: "apple") do %>
-    #     <%= render UI::TriggerComponent.new(placeholder: "Select a fruit...") %>
-    #     <%= render UI::ContentComponent.new do %>
-    #       <%= render UI::ItemComponent.new(value: "apple") { "Apple" } %>
-    #       <%= render UI::ItemComponent.new(value: "banana") { "Banana" } %>
-    #     <% end %>
-    #   <% end %>
-    class UI::SelectComponent < ViewComponent::Base
-      include UI::SelectBehavior
+# SelectComponent - ViewComponent implementation
+#
+# A custom select component with keyboard navigation, scrollable viewport, and form integration.
+# Root container that wraps trigger, content, and items.
+#
+# @example Basic usage
+#   <%= render UI::SelectComponent.new(value: "apple") do %>
+#     <%= render UI::TriggerComponent.new(placeholder: "Select a fruit...") %>
+#     <%= render UI::ContentComponent.new do %>
+#       <%= render UI::ItemComponent.new(value: "apple") { "Apple" } %>
+#       <%= render UI::ItemComponent.new(value: "banana") { "Banana" } %>
+#     <% end %>
+#   <% end %>
+class UI::SelectComponent < ViewComponent::Base
+  include UI::SelectBehavior
 
-      # @param value [String] Currently selected value
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(value: nil, classes: "", **attributes)
-        @value = value
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param value [String] Currently selected value
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(value: nil, classes: "", **attributes)
+    @value = value
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def call
-        content_tag :div, content, **select_html_attributes.deep_merge(@attributes)
-      end
-    end
+  def call
+    content_tag :div, content, **select_html_attributes.deep_merge(@attributes)
+  end
+end

data/app/view_components/ui/select_content_component.rb

@@ -1,41 +1,40 @@
 # frozen_string_literal: true
 
-    # ContentComponent - ViewComponent implementation
-    #
-    # Dropdown container that holds items and groups.
-    # Includes scroll buttons and viewport.
-    #
-    # @example Basic usage
-    #   <%= render UI::ContentComponent.new do %>
-    #     <%= render UI::ItemComponent.new(value: "apple") { "Apple" } %>
-    #     <%= render UI::ItemComponent.new(value: "banana") { "Banana" } %>
-    #   <% end %>
-    class UI::SelectContentComponent < ViewComponent::Base
-      include UI::SelectContentBehavior
+# ContentComponent - ViewComponent implementation
+#
+# Dropdown container that holds items and groups.
+# Includes scroll buttons and viewport.
+#
+# @example Basic usage
+#   <%= render UI::ContentComponent.new do %>
+#     <%= render UI::ItemComponent.new(value: "apple") { "Apple" } %>
+#     <%= render UI::ItemComponent.new(value: "banana") { "Banana" } %>
+#   <% end %>
+class UI::SelectContentComponent < ViewComponent::Base
+  include UI::SelectContentBehavior
 
-      # @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 call
-        content_tag :div, **select_content_html_attributes.deep_merge(@attributes) do
-          safe_join([
-            render(UI::ScrollUpButtonComponent.new),
-            content_tag(:div,
-              content,
-              data: {
-                radix_select_viewport: true,
-                ui__select_target: "viewport",
-                action: "scroll->ui--select#handleScroll"
-              },
-              class: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:ring-ring/50 p-1",
-              style: "overflow-y: auto; overflow-x: hidden;"
-            ),
-            render(UI::ScrollDownButtonComponent.new)
-          ])
-        end
-      end
+  def call
+    content_tag :div, **select_content_html_attributes.deep_merge(@attributes) do
+      safe_join([
+        render(UI::SelectScrollUpButtonComponent.new),
+        content_tag(:div,
+          content,
+          data: {
+            radix_select_viewport: true,
+            ui__select_target: "viewport",
+            action: "scroll->ui--select#handleScroll"
+          },
+          class: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1 focus-visible:ring-ring/50 p-1",
+          style: "overflow-y: auto; overflow-x: hidden;"),
+        render(UI::SelectScrollDownButtonComponent.new)
+      ])
     end
+  end
+end

data/app/view_components/ui/select_group_component.rb

@@ -1,26 +1,26 @@
 # frozen_string_literal: true
 
-    # GroupComponent - ViewComponent implementation
-    #
-    # Container for grouping select items with a label.
-    #
-    # @example Basic usage
-    #   <%= render UI::GroupComponent.new do %>
-    #     <%= render UI::LabelComponent.new { "North America" } %>
-    #     <%= render UI::ItemComponent.new(value: "america/new_york") { "Eastern Time" } %>
-    #     <%= render UI::ItemComponent.new(value: "america/chicago") { "Central Time" } %>
-    #   <% end %>
-    class UI::SelectGroupComponent < ViewComponent::Base
-      include UI::SelectGroupBehavior
+# GroupComponent - ViewComponent implementation
+#
+# Container for grouping select items with a label.
+#
+# @example Basic usage
+#   <%= render UI::GroupComponent.new do %>
+#     <%= render UI::LabelComponent.new { "North America" } %>
+#     <%= render UI::ItemComponent.new(value: "america/new_york") { "Eastern Time" } %>
+#     <%= render UI::ItemComponent.new(value: "america/chicago") { "Central Time" } %>
+#   <% end %>
+class UI::SelectGroupComponent < ViewComponent::Base
+  include UI::SelectGroupBehavior
 
-      # @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 call
-        content_tag :div, content, **select_group_html_attributes.deep_merge(@attributes)
-      end
-    end
+  def call
+    content_tag :div, content, **select_group_html_attributes.deep_merge(@attributes)
+  end
+end