fernandes-ui 0.1.0 → 0.1.2

data/app/components/ui/sheet_overlay.rb

@@ -1,18 +1,18 @@
 # frozen_string_literal: true
 
-    class UI::SheetOverlay < Phlex::HTML
-      include UI::SheetOverlayBehavior
+class UI::SheetOverlay < Phlex::HTML
+  include UI::SheetOverlayBehavior
 
-      def initialize(open: false, classes: nil, **attributes)
-        @open = open
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(open: false, classes: nil, **attributes)
+    @open = open
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**sheet_overlay_container_html_attributes) do
-          div(**sheet_overlay_html_attributes)
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    div(**sheet_overlay_container_html_attributes) do
+      div(**sheet_overlay_html_attributes)
+      yield if block_given?
     end
+  end
+end

data/app/components/ui/sheet_title.rb

@@ -1,22 +1,22 @@
 # frozen_string_literal: true
 
-    class UI::SheetTitle < Phlex::HTML
-      def initialize(classes: nil)
-        @classes = classes
-      end
+class UI::SheetTitle < Phlex::HTML
+  def initialize(classes: nil)
+    @classes = classes
+  end
 
-      def view_template(&block)
-        h2(class: title_classes) do
-          yield if block_given?
-        end
-      end
+  def view_template(&block)
+    h2(class: title_classes) do
+      yield if block_given?
+    end
+  end
 
-      private
+  private
 
-      def title_classes
-        TailwindMerge::Merger.new.merge([
-          "text-foreground font-semibold",
-          @classes
-        ].compact.join(" "))
-      end
-    end
+  def title_classes
+    TailwindMerge::Merger.new.merge([
+      "text-foreground font-semibold",
+      @classes
+    ].compact.join(" "))
+  end
+end

data/app/components/ui/sheet_trigger.rb

@@ -1,27 +1,27 @@
 # frozen_string_literal: true
 
-    class UI::SheetTrigger < Phlex::HTML
-      include UI::SharedAsChildBehavior
+class UI::SheetTrigger < Phlex::HTML
+  include UI::SharedAsChildBehavior
 
-      # @param as_child [Boolean] When true, yields attributes to block instead of rendering button
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(as_child: false, **attributes)
-        @as_child = as_child
-        @attributes = attributes
-      end
+  # @param as_child [Boolean] When true, yields attributes to block instead of rendering button
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(as_child: false, **attributes)
+    @as_child = as_child
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        trigger_attrs = {
-          data: { action: "click->ui--dialog#open" },
-          **@attributes
-        }
+  def view_template(&block)
+    trigger_attrs = {
+      data: {action: "click->ui--dialog#open"},
+      **@attributes
+    }
 
-        if @as_child
-          # Yield attributes to block - child must accept and use them
-          yield(trigger_attrs) if block_given?
-        else
-          # Default: render as button
-          button(**trigger_attrs, &block)
-        end
-      end
+    if @as_child
+      # Yield attributes to block - child must accept and use them
+      yield(trigger_attrs) if block_given?
+    else
+      # Default: render as button
+      button(**trigger_attrs, &block)
     end
+  end
+end

data/app/components/ui/sidebar.rb

@@ -1,100 +1,100 @@
 # frozen_string_literal: true
 
-    # Sidebar - Phlex implementation
-    #
-    # Main sidebar container with support for variants and collapsible modes.
-    # Must be used within a SidebarProvider.
-    #
-    # Automatically renders a mobile Sheet version (hidden on md+) alongside
-    # the desktop sidebar (hidden below md), eliminating content duplication.
-    #
-    # @example Basic usage
-    #   render UI::Sidebar.new do
-    #     render UI::Header.new { "Header" }
-    #     render UI::Content.new { "Content" }
-    #     render UI::Footer.new { "Footer" }
-    #   end
-    #
-    # @example With variant
-    #   render UI::Sidebar.new(variant: "floating") do
-    #     # ...
-    #   end
-    class UI::Sidebar < Phlex::HTML
-      include UI::SidebarBehavior
+# Sidebar - Phlex implementation
+#
+# Main sidebar container with support for variants and collapsible modes.
+# Must be used within a SidebarProvider.
+#
+# Automatically renders a mobile Sheet version (hidden on md+) alongside
+# the desktop sidebar (hidden below md), eliminating content duplication.
+#
+# @example Basic usage
+#   render UI::Sidebar.new do
+#     render UI::Header.new { "Header" }
+#     render UI::Content.new { "Content" }
+#     render UI::Footer.new { "Footer" }
+#   end
+#
+# @example With variant
+#   render UI::Sidebar.new(variant: "floating") do
+#     # ...
+#   end
+class UI::Sidebar < Phlex::HTML
+  include UI::SidebarBehavior
 
-      # @param variant [String] Visual variant: "sidebar" (default), "floating", or "inset"
-      # @param side [String] Side position: "left" or "right" (default: "left")
-      # @param collapsible [String] Collapsible mode: "offcanvas", "icon", or "none" (default: "icon")
-      # @param classes [String] Additional CSS classes
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(
-        variant: "sidebar",
-        side: "left",
-        collapsible: "icon",
-        classes: "",
-        **attributes
-      )
-        @variant = variant
-        @side = side
-        @collapsible = collapsible
-        @classes = classes
-        @attributes = attributes
-      end
-
-      def view_template(&block)
-        # Render mobile Sheet version (visible only below md breakpoint)
-        render_mobile_sheet(&block)
+  # @param variant [String] Visual variant: "sidebar" (default), "floating", or "inset"
+  # @param side [String] Side position: "left" or "right" (default: "left")
+  # @param collapsible [String] Collapsible mode: "offcanvas", "icon", or "none" (default: "icon")
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(
+    variant: "sidebar",
+    side: "left",
+    collapsible: "icon",
+    classes: "",
+    **attributes
+  )
+    @variant = variant
+    @side = side
+    @collapsible = collapsible
+    @classes = classes
+    @attributes = attributes
+  end
 
-        # Render desktop sidebar (visible only at md+ breakpoint)
-        render_desktop_sidebar(&block)
-      end
+  def view_template(&block)
+    # Render mobile Sheet version (visible only below md breakpoint)
+    render_mobile_sheet(&block)
 
-      private
+    # Render desktop sidebar (visible only at md+ breakpoint)
+    render_desktop_sidebar(&block)
+  end
 
-      def render_mobile_sheet(&block)
-        # Mobile Sheet - slides in from left/right based on side
-        sheet_side = @side.to_s == "right" ? "right" : "left"
+  private
 
-        render UI::Sheet.new(
-          classes: "md:hidden",
-          data: { ui__sidebar_target: "mobileSheet" }
-        ) do
-          render UI::SheetOverlay.new
-          render UI::SheetContent.new(
-            side: sheet_side,
-            show_close: false,
-            classes: "bg-sidebar text-sidebar-foreground w-[var(--sidebar-width-mobile)] p-0"
-          ) do
-            # Screen reader only header for accessibility
-            render UI::SheetHeader.new(classes: "sr-only") do
-              render UI::SheetTitle.new { "Sidebar" }
-              render UI::SheetDescription.new { "Navigation sidebar" }
-            end
+  def render_mobile_sheet(&block)
+    # Mobile Sheet - slides in from left/right based on side
+    sheet_side = (@side.to_s == "right") ? "right" : "left"
 
-            # Same content as desktop sidebar
-            div(class: "flex h-full w-full flex-col", &block)
-          end
+    render UI::Sheet.new(
+      classes: "md:hidden",
+      data: {ui__sidebar_target: "mobileSheet"}
+    ) do
+      render UI::SheetOverlay.new
+      render UI::SheetContent.new(
+        side: sheet_side,
+        show_close: false,
+        classes: "bg-sidebar text-sidebar-foreground w-[var(--sidebar-width-mobile)] p-0"
+      ) do
+        # Screen reader only header for accessibility
+        render UI::SheetHeader.new(classes: "sr-only") do
+          render UI::SheetTitle.new { "Sidebar" }
+          render UI::SheetDescription.new { "Navigation sidebar" }
         end
+
+        # Same content as desktop sidebar
+        div(class: "flex h-full w-full flex-col", &block)
       end
+    end
+  end
 
-      def render_desktop_sidebar(&block)
-        all_attributes = sidebar_html_attributes
+  def render_desktop_sidebar(&block)
+    all_attributes = sidebar_html_attributes
 
-        # Merge classes with TailwindMerge
-        if @attributes.key?(:class)
-          merged_class = TailwindMerge::Merger.new.merge([
-            all_attributes[:class],
-            @attributes[:class]
-          ].compact.join(" "))
-          all_attributes = all_attributes.merge(class: merged_class)
-        end
+    # Merge classes with TailwindMerge
+    if @attributes.key?(:class)
+      merged_class = TailwindMerge::Merger.new.merge([
+        all_attributes[:class],
+        @attributes[:class]
+      ].compact.join(" "))
+      all_attributes = all_attributes.merge(class: merged_class)
+    end
 
-        # Deep merge other attributes (excluding class)
-        all_attributes = all_attributes.deep_merge(@attributes.except(:class))
+    # Deep merge other attributes (excluding class)
+    all_attributes = all_attributes.deep_merge(@attributes.except(:class))
 
-        aside(**all_attributes) do
-          # Inner container with flex layout
-          div(class: "flex h-full w-full flex-col", &block)
-        end
-      end
+    aside(**all_attributes) do
+      # Inner container with flex layout
+      div(class: "flex h-full w-full flex-col", &block)
     end
+  end
+end

data/app/components/ui/sidebar_content.rb

@@ -1,34 +1,34 @@
 # frozen_string_literal: true
 
-    # Content - Phlex implementation
-    #
-    # Scrollable content area in the middle of the sidebar.
-    #
-    # @example Basic usage
-    #   render UI::Content.new do
-    #     render UI::Group.new { ... }
-    #   end
-    class UI::SidebarContent < Phlex::HTML
-      include UI::SidebarContentBehavior
+# Content - Phlex implementation
+#
+# Scrollable content area in the middle of the sidebar.
+#
+# @example Basic usage
+#   render UI::Content.new do
+#     render UI::Group.new { ... }
+#   end
+class UI::SidebarContent < Phlex::HTML
+  include UI::SidebarContentBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        all_attributes = sidebar_content_html_attributes
+  def view_template(&block)
+    all_attributes = sidebar_content_html_attributes
 
-        if @attributes.key?(:class)
-          merged_class = TailwindMerge::Merger.new.merge([
-            all_attributes[:class],
-            @attributes[:class]
-          ].compact.join(" "))
-          all_attributes = all_attributes.merge(class: merged_class)
-        end
+    if @attributes.key?(:class)
+      merged_class = TailwindMerge::Merger.new.merge([
+        all_attributes[:class],
+        @attributes[:class]
+      ].compact.join(" "))
+      all_attributes = all_attributes.merge(class: merged_class)
+    end
 
-        all_attributes = all_attributes.deep_merge(@attributes.except(:class))
+    all_attributes = all_attributes.deep_merge(@attributes.except(:class))
 
-        div(**all_attributes, &block)
-      end
-    end
+    div(**all_attributes, &block)
+  end
+end

data/app/components/ui/sidebar_footer.rb

@@ -1,36 +1,36 @@
 # frozen_string_literal: true
 
-    # Footer - Phlex implementation
-    #
-    # Fixed footer section at the bottom of the sidebar.
-    #
-    # @example Basic usage
-    #   render UI::Footer.new do
-    #     # Footer content (user menu, settings, etc.)
-    #   end
-    class UI::SidebarFooter < Phlex::HTML
-      include UI::SidebarFooterBehavior
+# Footer - Phlex implementation
+#
+# Fixed footer section at the bottom of the sidebar.
+#
+# @example Basic usage
+#   render UI::Footer.new do
+#     # Footer content (user menu, settings, etc.)
+#   end
+class UI::SidebarFooter < Phlex::HTML
+  include UI::SidebarFooterBehavior
 
-      # @param classes [String] Additional CSS classes
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        all_attributes = sidebar_footer_html_attributes
+  def view_template(&block)
+    all_attributes = sidebar_footer_html_attributes
 
-        if @attributes.key?(:class)
-          merged_class = TailwindMerge::Merger.new.merge([
-            all_attributes[:class],
-            @attributes[:class]
-          ].compact.join(" "))
-          all_attributes = all_attributes.merge(class: merged_class)
-        end
+    if @attributes.key?(:class)
+      merged_class = TailwindMerge::Merger.new.merge([
+        all_attributes[:class],
+        @attributes[:class]
+      ].compact.join(" "))
+      all_attributes = all_attributes.merge(class: merged_class)
+    end
 
-        all_attributes = all_attributes.deep_merge(@attributes.except(:class))
+    all_attributes = all_attributes.deep_merge(@attributes.except(:class))
 
-        div(**all_attributes, &block)
-      end
-    end
+    div(**all_attributes, &block)
+  end
+end

data/app/components/ui/sidebar_group.rb

@@ -1,52 +1,52 @@
 # frozen_string_literal: true
 
-    # Group - Phlex implementation
-    #
-    # Container for grouping related sidebar items.
-    # Can be made collapsible using UI::Collapsible.
-    #
-    # @example Basic usage (non-collapsible)
-    #   render UI::Group.new do
-    #     render UI::GroupLabel.new { "Section" }
-    #     render UI::GroupContent.new do
-    #       render UI::Menu.new { ... }
-    #     end
-    #   end
-    #
-    # @example Collapsible group (using UI::Collapsible)
-    #   render UI::Collapsible.new(open: true, as_child: true) do |collapsible_attrs|
-    #     render UI::Group.new(**collapsible_attrs) do
-    #       render UI::CollapsibleTrigger.new(as_child: true) do |trigger_attrs|
-    #         render UI::GroupLabel.new(**trigger_attrs) { "Section" }
-    #       end
-    #       render UI::CollapsibleContent.new do
-    #         render UI::GroupContent.new do
-    #           render UI::Menu.new { ... }
-    #         end
-    #       end
-    #     end
-    #   end
-    class UI::SidebarGroup < Phlex::HTML
-      include UI::SidebarGroupBehavior
+# Group - Phlex implementation
+#
+# Container for grouping related sidebar items.
+# Can be made collapsible using UI::Collapsible.
+#
+# @example Basic usage (non-collapsible)
+#   render UI::Group.new do
+#     render UI::GroupLabel.new { "Section" }
+#     render UI::GroupContent.new do
+#       render UI::Menu.new { ... }
+#     end
+#   end
+#
+# @example Collapsible group (using UI::Collapsible)
+#   render UI::Collapsible.new(open: true, as_child: true) do |collapsible_attrs|
+#     render UI::Group.new(**collapsible_attrs) do
+#       render UI::CollapsibleTrigger.new(as_child: true) do |trigger_attrs|
+#         render UI::GroupLabel.new(**trigger_attrs) { "Section" }
+#       end
+#       render UI::CollapsibleContent.new do
+#         render UI::GroupContent.new do
+#           render UI::Menu.new { ... }
+#         end
+#       end
+#     end
+#   end
+class UI::SidebarGroup < Phlex::HTML
+  include UI::SidebarGroupBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        all_attributes = sidebar_group_html_attributes
+  def view_template(&block)
+    all_attributes = sidebar_group_html_attributes
 
-        if @attributes.key?(:class)
-          merged_class = TailwindMerge::Merger.new.merge([
-            all_attributes[:class],
-            @attributes[:class]
-          ].compact.join(" "))
-          all_attributes = all_attributes.merge(class: merged_class)
-        end
+    if @attributes.key?(:class)
+      merged_class = TailwindMerge::Merger.new.merge([
+        all_attributes[:class],
+        @attributes[:class]
+      ].compact.join(" "))
+      all_attributes = all_attributes.merge(class: merged_class)
+    end
 
-        all_attributes = all_attributes.deep_merge(@attributes.except(:class))
+    all_attributes = all_attributes.deep_merge(@attributes.except(:class))
 
-        div(**all_attributes, &block)
-      end
-    end
+    div(**all_attributes, &block)
+  end
+end

data/app/components/ui/sidebar_group_action.rb

@@ -1,47 +1,47 @@
 # frozen_string_literal: true
 
-    # GroupAction - Phlex implementation
-    #
-    # Action button within a sidebar group header.
-    # Typically used for actions like "Add" or contextual menus.
-    #
-    # @example Basic usage
-    #   render UI::GroupAction.new do
-    #     render UI::Icon.new(name: "plus")
-    #   end
-    #
-    # @example With asChild for custom trigger
-    #   render UI::GroupAction.new(as_child: true) do |action_attrs|
-    #     render UI::DropdownMenuTrigger.new(**action_attrs) do
-    #       render UI::Icon.new(name: "ellipsis")
-    #     end
-    #   end
-    class UI::SidebarGroupAction < Phlex::HTML
-      include UI::SidebarGroupActionBehavior
+# GroupAction - Phlex implementation
+#
+# Action button within a sidebar group header.
+# Typically used for actions like "Add" or contextual menus.
+#
+# @example Basic usage
+#   render UI::GroupAction.new do
+#     render UI::Icon.new(name: "plus")
+#   end
+#
+# @example With asChild for custom trigger
+#   render UI::GroupAction.new(as_child: true) do |action_attrs|
+#     render UI::DropdownMenuTrigger.new(**action_attrs) do
+#       render UI::Icon.new(name: "ellipsis")
+#     end
+#   end
+class UI::SidebarGroupAction < Phlex::HTML
+  include UI::SidebarGroupActionBehavior
 
-      def initialize(as_child: false, classes: "", **attributes)
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(as_child: false, classes: "", **attributes)
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        if @as_child
-          yield sidebar_group_action_html_attributes.deep_merge(@attributes)
-        else
-          all_attributes = sidebar_group_action_html_attributes
+  def view_template(&block)
+    if @as_child
+      yield sidebar_group_action_html_attributes.deep_merge(@attributes)
+    else
+      all_attributes = sidebar_group_action_html_attributes
 
-          if @attributes.key?(:class)
-            merged_class = TailwindMerge::Merger.new.merge([
-              all_attributes[:class],
-              @attributes[:class]
-            ].compact.join(" "))
-            all_attributes = all_attributes.merge(class: merged_class)
-          end
+      if @attributes.key?(:class)
+        merged_class = TailwindMerge::Merger.new.merge([
+          all_attributes[:class],
+          @attributes[:class]
+        ].compact.join(" "))
+        all_attributes = all_attributes.merge(class: merged_class)
+      end
 
-          all_attributes = all_attributes.deep_merge(@attributes.except(:class))
+      all_attributes = all_attributes.deep_merge(@attributes.except(:class))
 
-          button(**all_attributes, &block)
-        end
-      end
+      button(**all_attributes, &block)
     end
+  end
+end