fernandes-ui 0.1.1 → 0.1.2

data/app/components/ui/sidebar_provider.rb

@@ -1,73 +1,73 @@
 # frozen_string_literal: true
 
-    # SidebarProvider - Phlex implementation
-    #
-    # Root container for sidebar that manages state via Stimulus controller.
-    # Wraps the entire layout (sidebar + main content).
-    #
-    # @example Basic usage
-    #   render UI::SidebarProvider.new do
-    #     render UI::Sidebar.new do
-    #       # Sidebar content
-    #     end
-    #     render UI::SidebarInset.new do
-    #       # Main content
-    #     end
-    #   end
-    #
-    # @example With custom width
-    #   render UI::SidebarProvider.new(sidebar_width: "18rem") do
-    #     # ...
-    #   end
-    class UI::SidebarProvider < Phlex::HTML
-      include UI::SidebarProviderBehavior
+# SidebarProvider - Phlex implementation
+#
+# Root container for sidebar that manages state via Stimulus controller.
+# Wraps the entire layout (sidebar + main content).
+#
+# @example Basic usage
+#   render UI::SidebarProvider.new do
+#     render UI::Sidebar.new do
+#       # Sidebar content
+#     end
+#     render UI::SidebarInset.new do
+#       # Main content
+#     end
+#   end
+#
+# @example With custom width
+#   render UI::SidebarProvider.new(sidebar_width: "18rem") do
+#     # ...
+#   end
+class UI::SidebarProvider < Phlex::HTML
+  include UI::SidebarProviderBehavior
 
-      # @param open [Boolean] Initial open state (default: true)
-      # @param collapsible [String] Collapsible mode: "offcanvas", "icon", or "none" (default: "icon")
-      # @param side [String] Side position: "left" or "right" (default: "left")
-      # @param cookie_name [String] Cookie name for persisting state (default: "sidebar_state")
-      # @param sidebar_width [String] Custom sidebar width (default: "16rem")
-      # @param sidebar_width_mobile [String] Custom mobile sidebar width (default: "18rem")
-      # @param sidebar_width_icon [String] Custom icon-mode width (default: "3rem")
-      # @param classes [String] Additional CSS classes
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(
-        open: true,
-        collapsible: "icon",
-        side: "left",
-        cookie_name: "sidebar_state",
-        sidebar_width: "16rem",
-        sidebar_width_mobile: "18rem",
-        sidebar_width_icon: "3rem",
-        classes: "",
-        **attributes
-      )
-        @open = open
-        @collapsible = collapsible
-        @side = side
-        @cookie_name = cookie_name
-        @sidebar_width = sidebar_width
-        @sidebar_width_mobile = sidebar_width_mobile
-        @sidebar_width_icon = sidebar_width_icon
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param open [Boolean] Initial open state (default: true)
+  # @param collapsible [String] Collapsible mode: "offcanvas", "icon", or "none" (default: "icon")
+  # @param side [String] Side position: "left" or "right" (default: "left")
+  # @param cookie_name [String] Cookie name for persisting state (default: "sidebar_state")
+  # @param sidebar_width [String] Custom sidebar width (default: "16rem")
+  # @param sidebar_width_mobile [String] Custom mobile sidebar width (default: "18rem")
+  # @param sidebar_width_icon [String] Custom icon-mode width (default: "3rem")
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(
+    open: true,
+    collapsible: "icon",
+    side: "left",
+    cookie_name: "sidebar_state",
+    sidebar_width: "16rem",
+    sidebar_width_mobile: "18rem",
+    sidebar_width_icon: "3rem",
+    classes: "",
+    **attributes
+  )
+    @open = open
+    @collapsible = collapsible
+    @side = side
+    @cookie_name = cookie_name
+    @sidebar_width = sidebar_width
+    @sidebar_width_mobile = sidebar_width_mobile
+    @sidebar_width_icon = sidebar_width_icon
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        all_attributes = sidebar_provider_html_attributes
+  def view_template(&block)
+    all_attributes = sidebar_provider_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))
 
-        div(**all_attributes, &block)
-      end
-    end
+    div(**all_attributes, &block)
+  end
+end

data/app/components/ui/sidebar_rail.rb

@@ -1,35 +1,35 @@
 # frozen_string_literal: true
 
-    # Rail - Phlex implementation
-    #
-    # Invisible rail on the sidebar edge for drag-to-expand interaction.
-    #
-    # @example Basic usage
-    #   render UI::Sidebar.new do
-    #     render UI::Rail.new
-    #     # other content...
-    #   end
-    class UI::SidebarRail < Phlex::HTML
-      include UI::SidebarRailBehavior
+# Rail - Phlex implementation
+#
+# Invisible rail on the sidebar edge for drag-to-expand interaction.
+#
+# @example Basic usage
+#   render UI::Sidebar.new do
+#     render UI::Rail.new
+#     # other content...
+#   end
+class UI::SidebarRail < Phlex::HTML
+  include UI::SidebarRailBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        all_attributes = sidebar_rail_html_attributes
+  def view_template
+    all_attributes = sidebar_rail_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)
-      end
-    end
+    button(**all_attributes)
+  end
+end

data/app/components/ui/sidebar_separator.rb

@@ -1,32 +1,32 @@
 # frozen_string_literal: true
 
-    # Separator - Phlex implementation
-    #
-    # Visual divider within the sidebar.
-    #
-    # @example Basic usage
-    #   render UI::Separator.new
-    class UI::SidebarSeparator < Phlex::HTML
-      include UI::SidebarSeparatorBehavior
+# Separator - Phlex implementation
+#
+# Visual divider within the sidebar.
+#
+# @example Basic usage
+#   render UI::Separator.new
+class UI::SidebarSeparator < Phlex::HTML
+  include UI::SidebarSeparatorBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        all_attributes = sidebar_separator_html_attributes
+  def view_template
+    all_attributes = sidebar_separator_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)
-      end
-    end
+    div(**all_attributes)
+  end
+end

data/app/components/ui/sidebar_trigger.rb

@@ -1,57 +1,57 @@
 # frozen_string_literal: true
 
-    # Trigger - Phlex implementation
-    #
-    # Button that toggles the sidebar open/closed.
-    #
-    # @example Basic usage
-    #   render UI::Trigger.new
-    class UI::SidebarTrigger < Phlex::HTML
-      include UI::SidebarTriggerBehavior
-      include Phlex::Rails::Helpers::ContentTag
-
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
-
-      def view_template
-        all_attributes = sidebar_trigger_html_attributes.merge(type: "button")
-
-        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))
-
-        button(**all_attributes) do
-          render_icon
-          span(class: "sr-only") { "Toggle Sidebar" }
-        end
-      end
-
-      private
-
-      def render_icon
-        # PanelLeft icon from Lucide
-        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: "size-4"
-        ) do |s|
-          s.rect(width: "18", height: "18", x: "3", y: "3", rx: "2")
-          s.path(d: "M9 3v18")
-        end
-      end
+# Trigger - Phlex implementation
+#
+# Button that toggles the sidebar open/closed.
+#
+# @example Basic usage
+#   render UI::Trigger.new
+class UI::SidebarTrigger < Phlex::HTML
+  include UI::SidebarTriggerBehavior
+  include Phlex::Rails::Helpers::ContentTag
+
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
+
+  def view_template
+    all_attributes = sidebar_trigger_html_attributes.merge(type: "button")
+
+    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))
+
+    button(**all_attributes) do
+      render_icon
+      span(class: "sr-only") { "Toggle Sidebar" }
+    end
+  end
+
+  private
+
+  def render_icon
+    # PanelLeft icon from Lucide
+    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: "size-4"
+    ) do |s|
+      s.rect(width: "18", height: "18", x: "3", y: "3", rx: "2")
+      s.path(d: "M9 3v18")
+    end
+  end
+end

data/app/components/ui/skeleton.rb

@@ -1,42 +1,42 @@
 # frozen_string_literal: true
 
-    # Skeleton - Phlex implementation
-    #
-    # A simple loading placeholder component with pulsing animation.
-    # This is a CSS-only component with no JavaScript behavior.
-    #
-    # @example Basic usage
-    #   render UI::Skeleton.new(class: "h-[20px] w-[100px] rounded-full")
-    #
-    # @example Card skeleton
-    #   div(class: "flex flex-col space-y-3") do
-    #     render UI::Skeleton.new(class: "h-[125px] w-[250px] rounded-xl")
-    #     div(class: "space-y-2") do
-    #       render UI::Skeleton.new(class: "h-4 w-[250px]")
-    #       render UI::Skeleton.new(class: "h-4 w-[200px]")
-    #     end
-    #   end
-    class UI::Skeleton < Phlex::HTML
-      # @param classes [String] Additional CSS classes (width, height, shape)
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+# Skeleton - Phlex implementation
+#
+# A simple loading placeholder component with pulsing animation.
+# This is a CSS-only component with no JavaScript behavior.
+#
+# @example Basic usage
+#   render UI::Skeleton.new(class: "h-[20px] w-[100px] rounded-full")
+#
+# @example Card skeleton
+#   div(class: "flex flex-col space-y-3") do
+#     render UI::Skeleton.new(class: "h-[125px] w-[250px] rounded-xl")
+#     div(class: "space-y-2") do
+#       render UI::Skeleton.new(class: "h-4 w-[250px]")
+#       render UI::Skeleton.new(class: "h-4 w-[200px]")
+#     end
+#   end
+class UI::Skeleton < Phlex::HTML
+  # @param classes [String] Additional CSS classes (width, height, shape)
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        div(**merged_attributes)
-      end
+  def view_template
+    div(**merged_attributes)
+  end
 
-      private
+  private
 
-      def merged_attributes
-        {
-          data: { slot: "skeleton" },
-          class: TailwindMerge::Merger.new.merge([
-            "bg-accent animate-pulse rounded-md",
-            @classes
-          ].compact.join(" "))
-        }.deep_merge(@attributes)
-      end
-    end
+  def merged_attributes
+    {
+      data: {slot: "skeleton"},
+      class: TailwindMerge::Merger.new.merge([
+        "bg-accent animate-pulse rounded-md",
+        @classes
+      ].compact.join(" "))
+    }.deep_merge(@attributes)
+  end
+end

data/app/components/ui/small.rb

@@ -9,6 +9,7 @@ module UI
 
     def view_template(&block)
       extend UI::SmallBehavior
+
       small(**small_html_attributes.merge(@attributes), &block)
     end
   end

data/app/components/ui/sonner_toaster.rb

@@ -1,53 +1,53 @@
 # frozen_string_literal: true
 
-    # Sonner Toaster component (Phlex)
-    # Container for toast notifications - render once in your layout
-    #
-    # @example Basic usage
-    #   <%= render UI::Toaster.new %>
-    #
-    # @example With options
-    #   <%= render UI::Toaster.new(
-    #     position: "top-center",
-    #     theme: "dark",
-    #     rich_colors: true,
-    #     close_button: true
-    #   ) %>
-    class UI::SonnerToaster < Phlex::HTML
-      include UI::ToasterBehavior
+# Sonner Toaster component (Phlex)
+# Container for toast notifications - render once in your layout
+#
+# @example Basic usage
+#   <%= render UI::Toaster.new %>
+#
+# @example With options
+#   <%= render UI::Toaster.new(
+#     position: "top-center",
+#     theme: "dark",
+#     rich_colors: true,
+#     close_button: true
+#   ) %>
+class UI::SonnerToaster < Phlex::HTML
+  include UI::ToasterBehavior
 
-      # @param position [String] Toast position (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)
-      # @param theme [String] Theme (light, dark, system)
-      # @param rich_colors [Boolean] Use rich colors for toast types
-      # @param expand [Boolean] Expand toasts on hover
-      # @param duration [Integer] Default toast duration in milliseconds
-      # @param close_button [Boolean] Show close button on toasts
-      # @param visible_toasts [Integer] Maximum number of visible toasts
-      # @param classes [String] Additional CSS classes
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(
-        position: "bottom-right",
-        theme: "system",
-        rich_colors: false,
-        expand: false,
-        duration: 4000,
-        close_button: false,
-        visible_toasts: 3,
-        classes: "",
-        **attributes
-      )
-        @position = position
-        @theme = theme
-        @rich_colors = rich_colors
-        @expand = expand
-        @duration = duration
-        @close_button = close_button
-        @visible_toasts = visible_toasts
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param position [String] Toast position (top-left, top-center, top-right, bottom-left, bottom-center, bottom-right)
+  # @param theme [String] Theme (light, dark, system)
+  # @param rich_colors [Boolean] Use rich colors for toast types
+  # @param expand [Boolean] Expand toasts on hover
+  # @param duration [Integer] Default toast duration in milliseconds
+  # @param close_button [Boolean] Show close button on toasts
+  # @param visible_toasts [Integer] Maximum number of visible toasts
+  # @param classes [String] Additional CSS classes
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(
+    position: "bottom-right",
+    theme: "system",
+    rich_colors: false,
+    expand: false,
+    duration: 4000,
+    close_button: false,
+    visible_toasts: 3,
+    classes: "",
+    **attributes
+  )
+    @position = position
+    @theme = theme
+    @rich_colors = rich_colors
+    @expand = expand
+    @duration = duration
+    @close_button = close_button
+    @visible_toasts = visible_toasts
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        ol(**toaster_html_attributes)
-      end
-    end
+  def view_template
+    ol(**toaster_html_attributes)
+  end
+end

data/app/components/ui/spinner.rb

@@ -1,41 +1,41 @@
 # frozen_string_literal: true
 
-    # Spinner - Phlex implementation
-    #
-    # A loading indicator component using an animated spinner icon.
-    # Uses SpinnerBehavior concern for shared styling logic.
-    #
-    # @example Basic usage
-    #   render UI::Spinner.new
-    #
-    # @example With size
-    #   render UI::Spinner.new(size: "lg")
-    class UI::Spinner < Phlex::HTML
-      include UI::SpinnerBehavior
+# Spinner - Phlex implementation
+#
+# A loading indicator component using an animated spinner icon.
+# Uses SpinnerBehavior concern for shared styling logic.
+#
+# @example Basic usage
+#   render UI::Spinner.new
+#
+# @example With size
+#   render UI::Spinner.new(size: "lg")
+class UI::Spinner < Phlex::HTML
+  include UI::SpinnerBehavior
 
-      # @param size [String] Size variant (sm, default, lg, xl)
-      # @param classes [String] Additional CSS classes to merge
-      # @param attributes [Hash] Additional HTML attributes
-      def initialize(size: "default", classes: "", **attributes)
-        @size = size
-        @classes = classes
-        @attributes = attributes
-      end
+  # @param size [String] Size variant (sm, default, lg, xl)
+  # @param classes [String] Additional CSS classes to merge
+  # @param attributes [Hash] Additional HTML attributes
+  def initialize(size: "default", classes: "", **attributes)
+    @size = size
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        svg(
-          **spinner_html_attributes.merge(@attributes),
-          xmlns: "http://www.w3.org/2000/svg",
-          width: "24",
-          height: "24",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          stroke_width: "2",
-          stroke_linecap: "round",
-          stroke_linejoin: "round"
-        ) do |s|
-          s.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
-        end
-      end
+  def view_template
+    svg(
+      **spinner_html_attributes.merge(@attributes),
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round"
+    ) do |s|
+      s.path(d: "M21 12a9 9 0 1 1-6.219-8.56")
     end
+  end
+end