fernandes-ui 0.1.0 → 0.1.2

data/app/components/ui/scroll_area_scrollbar.rb

@@ -1,45 +1,45 @@
 # frozen_string_literal: true
 
-    # Scrollbar - Phlex implementation
-    #
-    # Custom scrollbar track that contains the draggable thumb.
-    #
-    # @example Vertical scrollbar (default)
-    #   render UI::Scrollbar.new(orientation: "vertical")
-    #
-    # @example Horizontal scrollbar
-    #   render UI::Scrollbar.new(orientation: "horizontal")
-    class UI::ScrollAreaScrollbar < Phlex::HTML
-      include UI::ScrollAreaScrollbarBehavior
-      include UI::SharedAsChildBehavior
+# Scrollbar - Phlex implementation
+#
+# Custom scrollbar track that contains the draggable thumb.
+#
+# @example Vertical scrollbar (default)
+#   render UI::Scrollbar.new(orientation: "vertical")
+#
+# @example Horizontal scrollbar
+#   render UI::Scrollbar.new(orientation: "horizontal")
+class UI::ScrollAreaScrollbar < Phlex::HTML
+  include UI::ScrollAreaScrollbarBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
-      # @param orientation [String] "vertical" or "horizontal"
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, orientation: "vertical", classes: "", **attributes)
-        @as_child = as_child
-        @orientation = orientation
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+  # @param orientation [String] "vertical" or "horizontal"
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, orientation: "vertical", classes: "", **attributes)
+    @as_child = as_child
+    @orientation = orientation
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        scrollbar_attrs = scroll_area_scrollbar_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    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"
 
-        if @as_child && block_given?
-          # asChild mode: yield attributes to block, but also render thumb if not provided
-          yield(scrollbar_attrs)
-          render UI::Thumb.new unless block_given?
-        else
-          # Default mode: render as div with thumb
-          div(**scrollbar_attrs) do
-            render UI::Thumb.new
-          end
-        end
+    if @as_child && block_given?
+      # asChild mode: yield attributes to block, but also render thumb if not provided
+      yield(scrollbar_attrs)
+      render UI::Thumb.new unless block_given?
+    else
+      # Default mode: render as div with thumb
+      div(**scrollbar_attrs) do
+        render UI::Thumb.new
       end
     end
+  end
+end

data/app/components/ui/scroll_area_thumb.rb

@@ -1,38 +1,38 @@
 # frozen_string_literal: true
 
-    # Thumb - Phlex implementation
-    #
-    # Draggable scroll indicator inside the scrollbar.
-    #
-    # @example Default usage (automatically used by Scrollbar)
-    #   render UI::Thumb.new
-    class UI::ScrollAreaThumb < Phlex::HTML
-      include UI::ScrollAreaThumbBehavior
-      include UI::SharedAsChildBehavior
+# Thumb - Phlex implementation
+#
+# Draggable scroll indicator inside the scrollbar.
+#
+# @example Default usage (automatically used by Scrollbar)
+#   render UI::Thumb.new
+class UI::ScrollAreaThumb < Phlex::HTML
+  include UI::ScrollAreaThumbBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, classes: "", **attributes)
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, classes: "", **attributes)
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        thumb_attrs = scroll_area_thumb_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    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"
 
-        if @as_child && block_given?
-          # asChild mode: yield attributes to block
-          yield(thumb_attrs)
-        else
-          # Default mode: render as empty div
-          div(**thumb_attrs)
-        end
-      end
+    if @as_child && block_given?
+      # asChild mode: yield attributes to block
+      yield(thumb_attrs)
+    else
+      # Default mode: render as empty div
+      div(**thumb_attrs)
     end
+  end
+end

data/app/components/ui/scroll_area_viewport.rb

@@ -1,41 +1,41 @@
 # frozen_string_literal: true
 
-    # Viewport - Phlex implementation
-    #
-    # Scrollable content container with hidden native scrollbar.
-    #
-    # @example Basic usage (automatically used by ScrollArea)
-    #   render UI::Viewport.new do
-    #     # Content here
-    #   end
-    class UI::ScrollAreaViewport < Phlex::HTML
-      include UI::ScrollAreaViewportBehavior
-      include UI::SharedAsChildBehavior
+# Viewport - Phlex implementation
+#
+# Scrollable content container with hidden native scrollbar.
+#
+# @example Basic usage (automatically used by ScrollArea)
+#   render UI::Viewport.new do
+#     # Content here
+#   end
+class UI::ScrollAreaViewport < Phlex::HTML
+  include UI::ScrollAreaViewportBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, classes: "", **attributes)
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, classes: "", **attributes)
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        viewport_attrs = scroll_area_viewport_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    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"
 
-        if @as_child && block_given?
-          # asChild mode: yield attributes to block
-          yield(viewport_attrs)
-        else
-          # Default mode: render as div with inner table div
-          div(**viewport_attrs) do
-            div(style: "min-width: 100%; display: table;", &block)
-          end
-        end
+    if @as_child && block_given?
+      # asChild mode: yield attributes to block
+      yield(viewport_attrs)
+    else
+      # Default mode: render as div with inner table div
+      div(**viewport_attrs) do
+        div(style: "min-width: 100%; display: table;", &block)
       end
     end
+  end
+end

data/app/components/ui/select.rb

@@ -1,42 +1,42 @@
 # frozen_string_literal: true
 
-    # Select - Phlex 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::Select.new(value: "apple") do
-    #     render UI::Trigger.new(placeholder: "Select a fruit...")
-    #     render UI::Content.new do
-    #       render UI::Item.new(value: "apple") { "Apple" }
-    #       render UI::Item.new(value: "banana") { "Banana" }
-    #     end
-    #   end
-    #
-    # @example With groups
-    #   render UI::Select.new do
-    #     render UI::Trigger.new(placeholder: "Select timezone...")
-    #     render UI::Content.new do
-    #       render UI::Group.new do
-    #         render UI::Label.new { "North America" }
-    #         render UI::Item.new(value: "america/new_york") { "Eastern Time" }
-    #       end
-    #     end
-    #   end
-    class UI::Select < Phlex::HTML
-      include UI::SelectBehavior
+# Select - Phlex 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::Select.new(value: "apple") do
+#     render UI::Trigger.new(placeholder: "Select a fruit...")
+#     render UI::Content.new do
+#       render UI::Item.new(value: "apple") { "Apple" }
+#       render UI::Item.new(value: "banana") { "Banana" }
+#     end
+#   end
+#
+# @example With groups
+#   render UI::Select.new do
+#     render UI::Trigger.new(placeholder: "Select timezone...")
+#     render UI::Content.new do
+#       render UI::Group.new do
+#         render UI::Label.new { "North America" }
+#         render UI::Item.new(value: "america/new_york") { "Eastern Time" }
+#       end
+#     end
+#   end
+class UI::Select < Phlex::HTML
+  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 view_template(&block)
-        div(**select_html_attributes.deep_merge(@attributes), &block)
-      end
-    end
+  def view_template(&block)
+    div(**select_html_attributes.deep_merge(@attributes), &block)
+  end
+end

data/app/components/ui/select_content.rb

@@ -1,43 +1,43 @@
 # frozen_string_literal: true
 
-    # Select Content - Phlex implementation
-    #
-    # Dropdown container that holds items and groups.
-    # Includes scroll buttons and viewport.
-    #
-    # @example Basic usage
-    #   render UI::Content.new do
-    #     render UI::Item.new(value: "apple") { "Apple" }
-    #     render UI::Item.new(value: "banana") { "Banana" }
-    #   end
-    class UI::SelectContent < Phlex::HTML
-      include UI::SelectContentBehavior
+# Select Content - Phlex implementation
+#
+# Dropdown container that holds items and groups.
+# Includes scroll buttons and viewport.
+#
+# @example Basic usage
+#   render UI::Content.new do
+#     render UI::Item.new(value: "apple") { "Apple" }
+#     render UI::Item.new(value: "banana") { "Banana" }
+#   end
+class UI::SelectContent < Phlex::HTML
+  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
-
-      def view_template(&block)
-        div(**select_content_html_attributes.deep_merge(@attributes)) do
-          # Scroll up button
-          render UI::ScrollUpButton.new
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-          # Viewport with scrollable content
-          div(
-            data_radix_select_viewport: true,
-            data_ui__select_target: "viewport",
-            data_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;"
-          ) do
-            yield if block_given?
-          end
+  def view_template(&block)
+    div(**select_content_html_attributes.deep_merge(@attributes)) do
+      # Scroll up button
+      render UI::SelectScrollUpButton.new
 
-          # Scroll down button
-          render UI::ScrollDownButton.new
-        end
+      # Viewport with scrollable content
+      div(
+        data_radix_select_viewport: true,
+        data_ui__select_target: "viewport",
+        data_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;"
+      ) do
+        yield if block_given?
       end
+
+      # Scroll down button
+      render UI::SelectScrollDownButton.new
     end
+  end
+end

data/app/components/ui/select_group.rb

@@ -1,38 +1,38 @@
 # frozen_string_literal: true
 
-    # Select Group - Phlex implementation
-    #
-    # Container for grouping select items with a label.
-    # Supports asChild pattern for composition.
-    #
-    # @example Basic usage
-    #   render UI::Group.new do
-    #     render UI::Label.new { "North America" }
-    #     render UI::Item.new(value: "america/new_york") { "Eastern Time" }
-    #     render UI::Item.new(value: "america/chicago") { "Central Time" }
-    #   end
-    class UI::SelectGroup < Phlex::HTML
-      include UI::SelectGroupBehavior
-      include UI::SharedAsChildBehavior
+# Select Group - Phlex implementation
+#
+# Container for grouping select items with a label.
+# Supports asChild pattern for composition.
+#
+# @example Basic usage
+#   render UI::Group.new do
+#     render UI::Label.new { "North America" }
+#     render UI::Item.new(value: "america/new_york") { "Eastern Time" }
+#     render UI::Item.new(value: "america/chicago") { "Central Time" }
+#   end
+class UI::SelectGroup < Phlex::HTML
+  include UI::SelectGroupBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, classes: "", **attributes)
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, classes: "", **attributes)
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        group_attrs = select_group_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    group_attrs = select_group_html_attributes.deep_merge(@attributes)
 
-        if @as_child
-          # asChild mode: yield attributes to block
-          yield(group_attrs) if block_given?
-        else
-          # Default mode: render as div
-          div(**group_attrs, &block)
-        end
-      end
+    if @as_child
+      # asChild mode: yield attributes to block
+      yield(group_attrs) if block_given?
+    else
+      # Default mode: render as div
+      div(**group_attrs, &block)
     end
+  end
+end

data/app/components/ui/select_item.rb

@@ -1,67 +1,67 @@
 # frozen_string_literal: true
 
-    # Select Item - Phlex implementation
-    #
-    # Individual selectable option in the dropdown.
-    # Supports asChild pattern for composition.
-    #
-    # @example Basic usage
-    #   render UI::Item.new(value: "apple") { "Apple" }
-    #
-    # @example Disabled item
-    #   render UI::Item.new(value: "angular", disabled: true) { "Angular (Coming Soon)" }
-    #
-    # @example With asChild (as link)
-    #   render UI::Item.new(value: "dashboard", as_child: true) do |attrs|
-    #     a(href: "#dashboard", **attrs, class: "flex items-center gap-2") do
-    #       span(class: "flex-1") { "Dashboard" }
-    #     end
-    #   end
-    class UI::SelectItem < Phlex::HTML
-      include UI::SelectItemBehavior
-      include UI::SharedAsChildBehavior
+# Select Item - Phlex implementation
+#
+# Individual selectable option in the dropdown.
+# Supports asChild pattern for composition.
+#
+# @example Basic usage
+#   render UI::Item.new(value: "apple") { "Apple" }
+#
+# @example Disabled item
+#   render UI::Item.new(value: "angular", disabled: true) { "Angular (Coming Soon)" }
+#
+# @example With asChild (as link)
+#   render UI::Item.new(value: "dashboard", as_child: true) do |attrs|
+#     a(href: "#dashboard", **attrs, class: "flex items-center gap-2") do
+#       span(class: "flex-1") { "Dashboard" }
+#     end
+#   end
+class UI::SelectItem < Phlex::HTML
+  include UI::SelectItemBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
-      # @param value [String] Value of this option
-      # @param disabled [Boolean] Whether the item is disabled
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, value: nil, disabled: false, classes: "", **attributes)
-        @as_child = as_child
-        @value = value
-        @disabled = disabled
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+  # @param value [String] Value of this option
+  # @param disabled [Boolean] Whether the item is disabled
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, value: nil, disabled: false, classes: "", **attributes)
+    @as_child = as_child
+    @value = value
+    @disabled = disabled
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        item_attrs = select_item_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    item_attrs = select_item_html_attributes.deep_merge(@attributes)
 
-        if @as_child
-          # asChild mode: yield attributes to block
-          yield(item_attrs) if block_given?
-        else
-          # Default mode: render as div
-          div(**item_attrs) do
-            span(class: "flex-1") do
-              yield if block_given?
-            end
+    if @as_child
+      # asChild mode: yield attributes to block
+      yield(item_attrs) if block_given?
+    else
+      # Default mode: render as div
+      div(**item_attrs) do
+        span(class: "flex-1") do
+          yield if block_given?
+        end
 
-            # Checkmark icon - hidden by default, shown when selected
-            svg(
-              data_ui__select_target: "itemCheck",
-              class: "ml-auto size-4 opacity-0 transition-opacity",
-              xmlns: "http://www.w3.org/2000/svg",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              stroke_width: "2",
-              stroke_linecap: "round",
-              stroke_linejoin: "round"
-            ) do |s|
-              s.path(d: "M20 6 9 17l-5-5")
-            end
-          end
+        # Checkmark icon - hidden by default, shown when selected
+        svg(
+          data_ui__select_target: "itemCheck",
+          class: "ml-auto size-4 opacity-0 transition-opacity",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round"
+        ) do |s|
+          s.path(d: "M20 6 9 17l-5-5")
         end
       end
     end
+  end
+end

data/app/components/ui/select_label.rb

@@ -1,34 +1,34 @@
 # frozen_string_literal: true
 
-    # Select Label - Phlex implementation
-    #
-    # Label for a group of select items.
-    # Supports asChild pattern for composition.
-    #
-    # @example Basic usage
-    #   render UI::Label.new { "North America" }
-    class UI::SelectLabel < Phlex::HTML
-      include UI::SelectLabelBehavior
-      include UI::SharedAsChildBehavior
+# Select Label - Phlex implementation
+#
+# Label for a group of select items.
+# Supports asChild pattern for composition.
+#
+# @example Basic usage
+#   render UI::Label.new { "North America" }
+class UI::SelectLabel < Phlex::HTML
+  include UI::SelectLabelBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, classes: "", **attributes)
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, classes: "", **attributes)
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        label_attrs = select_label_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    label_attrs = select_label_html_attributes.deep_merge(@attributes)
 
-        if @as_child
-          # asChild mode: yield attributes to block
-          yield(label_attrs) if block_given?
-        else
-          # Default mode: render as div
-          div(**label_attrs, &block)
-        end
-      end
+    if @as_child
+      # asChild mode: yield attributes to block
+      yield(label_attrs) if block_given?
+    else
+      # Default mode: render as div
+      div(**label_attrs, &block)
     end
+  end
+end