fernandes-ui 0.1.1 → 0.1.2

data/app/components/ui/resizable_handle.rb

@@ -1,58 +1,58 @@
 # frozen_string_literal: true
 
-    # ResizableHandle component (Phlex)
-    # Draggable handle between resizable panels
-    #
-    # @example Basic handle
-    #   render UI::Handle.new
-    #
-    # @example Handle with visible grip icon
-    #   render UI::Handle.new(with_handle: true)
-    class UI::ResizableHandle < Phlex::HTML
-      include UI::ResizableHandleBehavior
+# ResizableHandle component (Phlex)
+# Draggable handle between resizable panels
+#
+# @example Basic handle
+#   render UI::Handle.new
+#
+# @example Handle with visible grip icon
+#   render UI::Handle.new(with_handle: true)
+class UI::ResizableHandle < Phlex::HTML
+  include UI::ResizableHandleBehavior
 
-      # @param with_handle [Boolean] show visible grip icon
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(with_handle: false, classes: "", attributes: {}, **)
-        @with_handle = with_handle
-        @classes = classes
-        @attributes = attributes
-        super()
-      end
+  # @param with_handle [Boolean] show visible grip icon
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(with_handle: false, classes: "", attributes: {}, **)
+    @with_handle = with_handle
+    @classes = classes
+    @attributes = attributes
+    super()
+  end
 
-      def view_template
-        div(**handle_html_attributes) do
-          if @with_handle
-            div(class: grip_container_classes) do
-              render_grip_icon
-            end
-          end
+  def view_template
+    div(**handle_html_attributes) do
+      if @with_handle
+        div(class: grip_container_classes) do
+          render_grip_icon
         end
       end
+    end
+  end
 
-      private
+  private
 
-      def render_grip_icon
-        # GripVertical icon from lucide
-        svg(
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "10",
-          height: "10",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          stroke_width: "2",
-          stroke_linecap: "round",
-          stroke_linejoin: "round",
-          class: "h-2.5 w-2.5"
-        ) do |s|
-          s.circle(cx: "9", cy: "12", r: "1")
-          s.circle(cx: "9", cy: "5", r: "1")
-          s.circle(cx: "9", cy: "19", r: "1")
-          s.circle(cx: "15", cy: "12", r: "1")
-          s.circle(cx: "15", cy: "5", r: "1")
-          s.circle(cx: "15", cy: "19", r: "1")
-        end
-      end
+  def render_grip_icon
+    # GripVertical icon from lucide
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "10",
+      height: "10",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round",
+      class: "h-2.5 w-2.5"
+    ) do |s|
+      s.circle(cx: "9", cy: "12", r: "1")
+      s.circle(cx: "9", cy: "5", r: "1")
+      s.circle(cx: "9", cy: "19", r: "1")
+      s.circle(cx: "15", cy: "12", r: "1")
+      s.circle(cx: "15", cy: "5", r: "1")
+      s.circle(cx: "15", cy: "19", r: "1")
     end
+  end
+end

data/app/components/ui/resizable_panel.rb

@@ -1,35 +1,35 @@
 # frozen_string_literal: true
 
-    # ResizablePanel component (Phlex)
-    # Individual resizable panel within a panel group
-    #
-    # @example Basic usage
-    #   render UI::Panel.new(default_size: 50) do
-    #     "Panel content"
-    #   end
-    #
-    # @example With constraints
-    #   render UI::Panel.new(default_size: 50, min_size: 20, max_size: 80) do
-    #     "Constrained panel"
-    #   end
-    class UI::ResizablePanel < Phlex::HTML
-      include UI::ResizablePanelBehavior
+# ResizablePanel component (Phlex)
+# Individual resizable panel within a panel group
+#
+# @example Basic usage
+#   render UI::Panel.new(default_size: 50) do
+#     "Panel content"
+#   end
+#
+# @example With constraints
+#   render UI::Panel.new(default_size: 50, min_size: 20, max_size: 80) do
+#     "Constrained panel"
+#   end
+class UI::ResizablePanel < Phlex::HTML
+  include UI::ResizablePanelBehavior
 
-      # @param default_size [Integer, Float] initial size as percentage (0-100)
-      # @param min_size [Integer, Float, nil] minimum size as percentage
-      # @param max_size [Integer, Float, nil] maximum size as percentage
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(default_size: nil, min_size: nil, max_size: nil, classes: "", attributes: {}, **)
-        @default_size = default_size
-        @min_size = min_size
-        @max_size = max_size
-        @classes = classes
-        @attributes = attributes
-        super()
-      end
+  # @param default_size [Integer, Float] initial size as percentage (0-100)
+  # @param min_size [Integer, Float, nil] minimum size as percentage
+  # @param max_size [Integer, Float, nil] maximum size as percentage
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(default_size: nil, min_size: nil, max_size: nil, classes: "", attributes: {}, **)
+    @default_size = default_size
+    @min_size = min_size
+    @max_size = max_size
+    @classes = classes
+    @attributes = attributes
+    super()
+  end
 
-      def view_template(&block)
-        div(**panel_html_attributes, &block)
-      end
-    end
+  def view_template(&block)
+    div(**panel_html_attributes, &block)
+  end
+end

data/app/components/ui/resizable_panel_group.rb

@@ -1,41 +1,41 @@
 # frozen_string_literal: true
 
-    # ResizablePanelGroup container component (Phlex)
-    # Wraps resizable panels with Stimulus controller
-    #
-    # @example Basic horizontal layout
-    #   render UI::PanelGroup.new(direction: "horizontal") do
-    #     render UI::Panel.new(default_size: 50) do
-    #       "Left panel content"
-    #     end
-    #     render UI::Handle.new
-    #     render UI::Panel.new(default_size: 50) do
-    #       "Right panel content"
-    #     end
-    #   end
-    #
-    # @example Vertical layout
-    #   render UI::PanelGroup.new(direction: "vertical") do
-    #     render UI::Panel.new(default_size: 30) { "Top" }
-    #     render UI::Handle.new
-    #     render UI::Panel.new(default_size: 70) { "Bottom" }
-    #   end
-    class UI::ResizablePanelGroup < Phlex::HTML
-      include UI::ResizablePanelGroupBehavior
+# ResizablePanelGroup container component (Phlex)
+# Wraps resizable panels with Stimulus controller
+#
+# @example Basic horizontal layout
+#   render UI::PanelGroup.new(direction: "horizontal") do
+#     render UI::Panel.new(default_size: 50) do
+#       "Left panel content"
+#     end
+#     render UI::Handle.new
+#     render UI::Panel.new(default_size: 50) do
+#       "Right panel content"
+#     end
+#   end
+#
+# @example Vertical layout
+#   render UI::PanelGroup.new(direction: "vertical") do
+#     render UI::Panel.new(default_size: 30) { "Top" }
+#     render UI::Handle.new
+#     render UI::Panel.new(default_size: 70) { "Bottom" }
+#   end
+class UI::ResizablePanelGroup < Phlex::HTML
+  include UI::ResizablePanelGroupBehavior
 
-      # @param direction [String] "horizontal" or "vertical" layout
-      # @param keyboard_resize_by [Integer] percentage to resize by on keyboard input
-      # @param classes [String] additional CSS classes
-      # @param attributes [Hash] additional HTML attributes
-      def initialize(direction: "horizontal", keyboard_resize_by: 10, classes: "", attributes: {}, **)
-        @direction = direction
-        @keyboard_resize_by = keyboard_resize_by
-        @classes = classes
-        @attributes = attributes
-        super()
-      end
+  # @param direction [String] "horizontal" or "vertical" layout
+  # @param keyboard_resize_by [Integer] percentage to resize by on keyboard input
+  # @param classes [String] additional CSS classes
+  # @param attributes [Hash] additional HTML attributes
+  def initialize(direction: "horizontal", keyboard_resize_by: 10, classes: "", attributes: {}, **)
+    @direction = direction
+    @keyboard_resize_by = keyboard_resize_by
+    @classes = classes
+    @attributes = attributes
+    super()
+  end
 
-      def view_template(&block)
-        div(**panel_group_html_attributes, &block)
-      end
-    end
+  def view_template(&block)
+    div(**panel_group_html_attributes, &block)
+  end
+end

data/app/components/ui/responsive_dialog.rb

@@ -1,98 +1,98 @@
 # frozen_string_literal: true
 
-    # ResponsiveDialog - Renders Dialog on desktop, Drawer on mobile
-    # Uses hybrid CSS + Stimulus approach for responsive switching at 768px (md breakpoint)
-    #
-    # This component renders BOTH Dialog and Drawer, hiding one with CSS.
-    # The responsive-dialog Stimulus controller handles state synchronization.
-    #
-    # @example Basic usage
-    #   render UI::ResponsiveDialog.new do |rd|
-    #     rd.with_trigger { "Edit Profile" }
-    #     rd.with_content do
-    #       # Shared content for both Dialog and Drawer
-    #       render_form
-    #     end
-    #   end
-    class UI::ResponsiveDialog < Phlex::HTML
-      include UI::ResponsiveDialogBehavior
+# ResponsiveDialog - Renders Dialog on desktop, Drawer on mobile
+# Uses hybrid CSS + Stimulus approach for responsive switching at 768px (md breakpoint)
+#
+# This component renders BOTH Dialog and Drawer, hiding one with CSS.
+# The responsive-dialog Stimulus controller handles state synchronization.
+#
+# @example Basic usage
+#   render UI::ResponsiveDialog.new do |rd|
+#     rd.with_trigger { "Edit Profile" }
+#     rd.with_content do
+#       # Shared content for both Dialog and Drawer
+#       render_form
+#     end
+#   end
+class UI::ResponsiveDialog < Phlex::HTML
+  include UI::ResponsiveDialogBehavior
 
-      def initialize(
-        open: false,
-        breakpoint: 768,
-        direction: "bottom",
-        classes: nil,
-        **attributes
-      )
-        @open = open
-        @breakpoint = breakpoint
-        @direction = direction
-        @classes = classes
-        @attributes = attributes
-        @trigger_content = nil
-        @content_block = nil
-      end
+  def initialize(
+    open: false,
+    breakpoint: 768,
+    direction: "bottom",
+    classes: nil,
+    **attributes
+  )
+    @open = open
+    @breakpoint = breakpoint
+    @direction = direction
+    @classes = classes
+    @attributes = attributes
+    @trigger_content = nil
+    @content_block = nil
+  end
 
-      # Builder method for trigger
-      def with_trigger(&block)
-        @trigger_content = block
-      end
+  # Builder method for trigger
+  def with_trigger(&block)
+    @trigger_content = block
+  end
 
-      # Builder method for content
-      def with_content(&block)
-        @content_block = block
-      end
+  # Builder method for content
+  def with_content(&block)
+    @content_block = block
+  end
 
-      def view_template(&block)
-        # Allow block-based API
-        yield(self) if block_given?
+  def view_template(&block)
+    # Allow block-based API
+    yield(self) if block_given?
 
-        div(**responsive_dialog_html_attributes) do
-          # Mobile: Drawer (hidden on md and up)
-          div(class: "md:hidden", data: { ui__responsive_dialog_target: "drawer" }) do
-            render_drawer
-          end
+    div(**responsive_dialog_html_attributes) do
+      # Mobile: Drawer (hidden on md and up)
+      div(class: "md:hidden", data: {ui__responsive_dialog_target: "drawer"}) do
+        render_drawer
+      end
 
-          # Desktop: Dialog (hidden below md)
-          div(class: "hidden md:block", data: { ui__responsive_dialog_target: "dialog" }) do
-            render_dialog
-          end
-        end
+      # Desktop: Dialog (hidden below md)
+      div(class: "hidden md:block", data: {ui__responsive_dialog_target: "dialog"}) do
+        render_dialog
       end
+    end
+  end
 
-      private
+  private
 
-      def render_drawer
-        render UI::Drawer.new(open: @open, direction: @direction) do
-          render_trigger_for(:drawer)
-          render UI::DrawerOverlay.new(open: @open)
-          render UI::DrawerContent.new(open: @open, direction: @direction) do
-            render_shared_content
-          end
-        end
+  def render_drawer
+    render UI::Drawer.new(open: @open, direction: @direction) do
+      render_trigger_for(:drawer)
+      render UI::DrawerOverlay.new(open: @open)
+      render UI::DrawerContent.new(open: @open, direction: @direction) do
+        render_shared_content
       end
+    end
+  end
 
-      def render_dialog
-        render UI::Dialog.new(open: @open) do
-          render_trigger_for(:dialog)
-          render UI::DialogOverlay.new(open: @open)
-          render UI::DialogContent.new do
-            render_shared_content
-          end
-        end
+  def render_dialog
+    render UI::Dialog.new(open: @open) do
+      render_trigger_for(:dialog)
+      render UI::DialogOverlay.new(open: @open)
+      render UI::DialogContent.new do
+        render_shared_content
       end
+    end
+  end
 
-      def render_trigger_for(component_type)
-        return unless @trigger_content
-
-        if component_type == :drawer
-          render UI::DrawerTrigger.new(&@trigger_content)
-        else
-          render UI::DialogTrigger.new(&@trigger_content)
-        end
-      end
+  def render_trigger_for(component_type)
+    return unless @trigger_content
 
-      def render_shared_content
-        @content_block&.call
-      end
+    if component_type == :drawer
+      render UI::DrawerTrigger.new(&@trigger_content)
+    else
+      render UI::DialogTrigger.new(&@trigger_content)
     end
+  end
+
+  def render_shared_content
+    @content_block&.call
+  end
+end

data/app/components/ui/scroll_area.rb

@@ -1,62 +1,62 @@
 # frozen_string_literal: true
 
-    # ScrollArea - Phlex implementation
-    #
-    # Augments native scroll functionality for custom, cross-browser styling.
-    # Root container with Stimulus controller.
-    #
-    # @example Basic usage
-    #   render UI::ScrollArea.new(classes: "h-[200px] w-[350px] rounded-md border p-4") do
-    #     div(class: "space-y-4") do
-    #       h3(class: "text-sm font-semibold") { "Tags" }
-    #       div(class: "space-y-1") do
-    #         # Content here
-    #       end
-    #     end
-    #   end
-    #
-    # @example Horizontal scrolling
-    #   render UI::ScrollArea.new(classes: "w-96 whitespace-nowrap rounded-md border") do
-    #     # Wide content here
-    #   end
-    class UI::ScrollArea < Phlex::HTML
-      include UI::ScrollAreaBehavior
-      include UI::SharedAsChildBehavior
+# ScrollArea - Phlex implementation
+#
+# Augments native scroll functionality for custom, cross-browser styling.
+# Root container with Stimulus controller.
+#
+# @example Basic usage
+#   render UI::ScrollArea.new(classes: "h-[200px] w-[350px] rounded-md border p-4") do
+#     div(class: "space-y-4") do
+#       h3(class: "text-sm font-semibold") { "Tags" }
+#       div(class: "space-y-1") do
+#         # Content here
+#       end
+#     end
+#   end
+#
+# @example Horizontal scrolling
+#   render UI::ScrollArea.new(classes: "w-96 whitespace-nowrap rounded-md border") do
+#     # Wide content here
+#   end
+class UI::ScrollArea < Phlex::HTML
+  include UI::ScrollAreaBehavior
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
-      # @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(as_child: false, type: "hover", scroll_hide_delay: 600, classes: "", **attributes)
-        @as_child = as_child
-        @type = type
-        @scroll_hide_delay = scroll_hide_delay
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering div
+  # @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(as_child: false, type: "hover", scroll_hide_delay: 600, classes: "", **attributes)
+    @as_child = as_child
+    @type = type
+    @scroll_hide_delay = scroll_hide_delay
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        root_attrs = scroll_area_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    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
 
-        if @as_child && block_given?
-          # asChild mode: yield attributes to block, but also render scrollbar and corner
-          yield(root_attrs)
-          render UI::Scrollbar.new(orientation: "vertical")
-          render UI::Corner.new
-        else
-          # Default mode: render as div with viewport, scrollbar, and corner
-          div(**root_attrs) do
-            render UI::Viewport.new(&block)
-            render UI::Scrollbar.new(orientation: "vertical")
-            render UI::Corner.new
-          end
-        end
+    if @as_child && block_given?
+      # asChild mode: yield attributes to block, but also render scrollbar and corner
+      yield(root_attrs)
+      render UI::Scrollbar.new(orientation: "vertical")
+      render UI::Corner.new
+    else
+      # Default mode: render as div with viewport, scrollbar, and corner
+      div(**root_attrs) do
+        render UI::Viewport.new(&block)
+        render UI::Scrollbar.new(orientation: "vertical")
+        render UI::Corner.new
       end
     end
+  end
+end

data/app/components/ui/scroll_area_corner.rb

@@ -1,33 +1,33 @@
 # frozen_string_literal: true
 
-    # Corner - Phlex implementation
-    #
-    # Intersection element between vertical and horizontal scrollbars.
-    #
-    # @example Default usage (automatically used by ScrollArea)
-    #   render UI::Corner.new
-    class UI::ScrollAreaCorner < Phlex::HTML
-      include UI::ScrollAreaCornerBehavior
-      include UI::SharedAsChildBehavior
+# Corner - Phlex implementation
+#
+# Intersection element between vertical and horizontal scrollbars.
+#
+# @example Default usage (automatically used by ScrollArea)
+#   render UI::Corner.new
+class UI::ScrollAreaCorner < Phlex::HTML
+  include UI::ScrollAreaCornerBehavior
+  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)
-        corner_attrs = scroll_area_corner_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    corner_attrs = scroll_area_corner_html_attributes.deep_merge(@attributes)
 
-        if @as_child && block_given?
-          # asChild mode: yield attributes to block
-          yield(corner_attrs)
-        else
-          # Default mode: render as empty div
-          div(**corner_attrs)
-        end
-      end
+    if @as_child && block_given?
+      # asChild mode: yield attributes to block
+      yield(corner_attrs)
+    else
+      # Default mode: render as empty div
+      div(**corner_attrs)
     end
+  end
+end