fernandes-ui 0.1.1 → 0.1.4

data/app/components/ui/card_header.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardHeader < Phlex::HTML
-      include UI::CardHeaderBehavior
+class UI::CardHeader < Phlex::HTML
+  include UI::CardHeaderBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&)
-        div(**card_header_html_attributes.deep_merge(@attributes), &)
-      end
-    end
+  def view_template(&)
+    div(**card_header_html_attributes.deep_merge(@attributes), &)
+  end
+end

data/app/components/ui/card_title.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CardTitle < Phlex::HTML
-      include UI::CardTitleBehavior
+class UI::CardTitle < Phlex::HTML
+  include UI::CardTitleBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&)
-        div(**card_title_html_attributes.deep_merge(@attributes), &)
-      end
-    end
+  def view_template(&)
+    div(**card_title_html_attributes.deep_merge(@attributes), &)
+  end
+end

data/app/components/ui/carousel.rb

@@ -1,16 +1,17 @@
 # frozen_string_literal: true
 
-    class UI::Carousel < Phlex::HTML
-      def initialize(classes: nil, orientation: "horizontal", opts: {}, plugins: nil, **attributes)
-        @classes = classes
-        @orientation = orientation
-        @opts = opts
-        @plugins = plugins
-        @attributes = attributes
-      end
+class UI::Carousel < Phlex::HTML
+  def initialize(classes: nil, orientation: "horizontal", opts: {}, plugins: nil, **attributes)
+    @classes = classes
+    @orientation = orientation
+    @opts = opts
+    @plugins = plugins
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        extend UI::CarouselBehavior
-        div(**carousel_html_attributes, &block)
-      end
-    end
+  def view_template(&block)
+    extend UI::CarouselBehavior
+
+    div(**carousel_html_attributes, &block)
+  end
+end

data/app/components/ui/carousel_content.rb

@@ -1,15 +1,16 @@
 # frozen_string_literal: true
 
-    class UI::CarouselContent < Phlex::HTML
-      def initialize(classes: nil, **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+class UI::CarouselContent < Phlex::HTML
+  def initialize(classes: nil, **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        extend UI::CarouselContentBehavior
-        div(**carousel_content_html_attributes) do
-          div(**carousel_content_container_html_attributes, &block)
-        end
-      end
+  def view_template(&block)
+    extend UI::CarouselContentBehavior
+
+    div(**carousel_content_html_attributes) do
+      div(**carousel_content_container_html_attributes, &block)
     end
+  end
+end

data/app/components/ui/carousel_item.rb

@@ -1,13 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CarouselItem < Phlex::HTML
-      def initialize(classes: nil, **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+class UI::CarouselItem < Phlex::HTML
+  def initialize(classes: nil, **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        extend UI::CarouselItemBehavior
-        div(**carousel_item_html_attributes, &block)
-      end
-    end
+  def view_template(&block)
+    extend UI::CarouselItemBehavior
+
+    div(**carousel_item_html_attributes, &block)
+  end
+end

data/app/components/ui/carousel_next.rb

@@ -1,29 +1,17 @@
 # frozen_string_literal: true
 
-    class UI::CarouselNext < Phlex::HTML
-      def initialize(classes: nil, **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+class UI::CarouselNext < UI::Base
+  def initialize(classes: nil, **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&)
-        extend UI::CarouselNextBehavior
-        render UI::Button.new(**carousel_next_html_attributes, classes: carousel_next_classes, variant: :ghost, size: :icon) do
-          svg(
-            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",
-            class: "size-4"
-          ) do |s|
-            s.path(d: "m9 18 6-6-6-6")
-          end
-          span(class: "sr-only") { "Next slide" }
-        end
-      end
+  def view_template(&)
+    extend UI::CarouselNextBehavior
+
+    render UI::Button.new(**carousel_next_html_attributes, classes: carousel_next_classes, variant: :outline, size: :icon) do
+      lucide_icon("arrow-right", class: "size-4")
+      span(class: "sr-only") { "Next slide" }
     end
+  end
+end

data/app/components/ui/carousel_previous.rb

@@ -1,29 +1,17 @@
 # frozen_string_literal: true
 
-    class UI::CarouselPrevious < Phlex::HTML
-      def initialize(classes: nil, **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+class UI::CarouselPrevious < UI::Base
+  def initialize(classes: nil, **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&)
-        extend UI::CarouselPreviousBehavior
-        render UI::Button.new(**carousel_previous_html_attributes, classes: carousel_previous_classes, variant: :ghost, size: :icon) do
-          svg(
-            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",
-            class: "size-4"
-          ) do |s|
-            s.path(d: "m15 18-6-6 6-6")
-          end
-          span(class: "sr-only") { "Previous slide" }
-        end
-      end
+  def view_template(&)
+    extend UI::CarouselPreviousBehavior
+
+    render UI::Button.new(**carousel_previous_html_attributes, classes: carousel_previous_classes, variant: :outline, size: :icon) do
+      lucide_icon("arrow-left", class: "size-4")
+      span(class: "sr-only") { "Previous slide" }
     end
+  end
+end

data/app/components/ui/checkbox.rb

@@ -1,49 +1,49 @@
 # frozen_string_literal: true
 
-    class UI::Checkbox < Phlex::HTML
-      include UI::CheckboxBehavior
+class UI::Checkbox < Phlex::HTML
+  include UI::CheckboxBehavior
 
-      def initialize(
-        name: nil,
-        id: nil,
-        value: nil,
-        checked: false,
-        disabled: false,
-        required: false,
-        classes: "",
-        **attributes
-      )
-        @name = name
-        @id = id
-        @value = value
-        @checked = checked
-        @disabled = disabled
-        @required = required
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(
+    name: nil,
+    id: nil,
+    value: nil,
+    checked: false,
+    disabled: false,
+    required: false,
+    classes: "",
+    **attributes
+  )
+    @name = name
+    @id = id
+    @value = value
+    @checked = checked
+    @disabled = disabled
+    @required = required
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template
-        div(class: "relative inline-flex items-center justify-center") do
-          input(**checkbox_html_attributes)
-          checkmark_icon
-        end
-      end
+  def view_template
+    div(class: "relative inline-flex items-center justify-center") do
+      input(**checkbox_html_attributes)
+      checkmark_icon
+    end
+  end
 
-      private
+  private
 
-      def checkmark_icon
-        svg(
-          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",
-          class: "size-3.5 pointer-events-none absolute text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"
-        ) { |s| s.path(d: "M20 6 9 17l-5-5") }
-      end
-    end
+  def checkmark_icon
+    svg(
+      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",
+      class: "size-3.5 pointer-events-none absolute text-primary-foreground opacity-0 peer-checked:opacity-100 transition-opacity"
+    ) { |s| s.path(d: "M20 6 9 17l-5-5") }
+  end
+end

data/app/components/ui/collapsible.rb

@@ -1,23 +1,23 @@
 # frozen_string_literal: true
 
-    class UI::Collapsible < Phlex::HTML
-      include UI::CollapsibleBehavior
+class UI::Collapsible < Phlex::HTML
+  include UI::CollapsibleBehavior
 
-      def initialize(open: false, disabled: false, as_child: false, classes: "", **attributes)
-        @open = open
-        @disabled = disabled
-        @as_child = as_child
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(open: false, disabled: false, as_child: false, classes: "", **attributes)
+    @open = open
+    @disabled = disabled
+    @as_child = as_child
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        collapsible_attrs = collapsible_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    collapsible_attrs = collapsible_html_attributes.deep_merge(@attributes)
 
-        if @as_child
-          yield(collapsible_attrs) if block_given?
-        else
-          div(**collapsible_attrs, &block)
-        end
-      end
+    if @as_child
+      yield(collapsible_attrs) if block_given?
+    else
+      div(**collapsible_attrs, &block)
     end
+  end
+end

data/app/components/ui/collapsible_content.rb

@@ -1,15 +1,15 @@
 # frozen_string_literal: true
 
-    class UI::CollapsibleContent < Phlex::HTML
-      include UI::CollapsibleContentBehavior
+class UI::CollapsibleContent < Phlex::HTML
+  include UI::CollapsibleContentBehavior
 
-      def initialize(force_mount: false, classes: "", **attributes)
-        @force_mount = force_mount
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(force_mount: false, classes: "", **attributes)
+    @force_mount = force_mount
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**collapsible_content_html_attributes.deep_merge(@attributes), &block)
-      end
-    end
+  def view_template(&block)
+    div(**collapsible_content_html_attributes.deep_merge(@attributes), &block)
+  end
+end

data/app/components/ui/collapsible_trigger.rb

@@ -1,21 +1,21 @@
 # frozen_string_literal: true
 
-    class UI::CollapsibleTrigger < Phlex::HTML
-      include UI::CollapsibleTriggerBehavior
+class UI::CollapsibleTrigger < Phlex::HTML
+  include UI::CollapsibleTriggerBehavior
 
-      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)
-        trigger_attrs = collapsible_trigger_html_attributes.deep_merge(@attributes)
+  def view_template(&block)
+    trigger_attrs = collapsible_trigger_html_attributes.deep_merge(@attributes)
 
-        if @as_child
-          yield(trigger_attrs) if block_given?
-        else
-          button(**trigger_attrs, type: "button", &block)
-        end
-      end
+    if @as_child
+      yield(trigger_attrs) if block_given?
+    else
+      button(**trigger_attrs, type: "button", &block)
     end
+  end
+end

data/app/components/ui/combobox_wrapper.rb

@@ -1,57 +1,57 @@
 # frozen_string_literal: true
 
-    # Wrapper - Phlex implementation
-    #
-    # Wrapper component that yields combobox attributes to be spread into a container component.
-    # Used to wrap Popover/Drawer/DropdownMenu with combobox selection functionality.
-    # Uses ComboboxBehavior concern for shared attribute generation logic.
-    #
-    # The combobox pattern provides:
-    # - Selection state management via Stimulus controller
-    # - Automatic text update when item is selected
-    # - Check icon visibility control (opacity-0/100)
-    # - Container closing after selection
-    #
-    # @example With Popover
-    #   render UI::Wrapper.new(value: "") do |combobox_attrs|
-    #     render UI::Popover.new(**combobox_attrs, placement: "bottom-start") do
-    #       render UI::PopoverTrigger.new(as_child: true) do |trigger_attrs|
-    #         render UI::Button.new(**trigger_attrs) do
-    #           span(**combobox_text_html_attributes) { "Select framework..." }
-    #         end
-    #       end
-    #
-    #       render UI::PopoverContent.new do
-    #         render UI::Command.new do
-    #           render UI::CommandItem.new(value: "next", **combobox_item_html_attributes("next")) do
-    #             span { "Next.js" }
-    #             svg(class: "ml-auto h-4 w-4 opacity-0") { path(d: "M20 6 9 17l-5-5") }
-    #           end
-    #         end
-    #       end
-    #     end
-    #   end
-    #
-    # @example With Drawer (responsive)
-    #   render UI::Wrapper.new(value: "done") do |combobox_attrs|
-    #     render UI::Drawer.new(**combobox_attrs) do
-    #       # ... drawer content
-    #     end
-    #   end
-    class UI::ComboboxWrapper < Phlex::HTML
-      include ComboboxBehavior
+# Wrapper - Phlex implementation
+#
+# Wrapper component that yields combobox attributes to be spread into a container component.
+# Used to wrap Popover/Drawer/DropdownMenu with combobox selection functionality.
+# Uses ComboboxBehavior concern for shared attribute generation logic.
+#
+# The combobox pattern provides:
+# - Selection state management via Stimulus controller
+# - Automatic text update when item is selected
+# - Check icon visibility control (opacity-0/100)
+# - Container closing after selection
+#
+# @example With Popover
+#   render UI::Wrapper.new(value: "") do |combobox_attrs|
+#     render UI::Popover.new(**combobox_attrs, placement: "bottom-start") do
+#       render UI::PopoverTrigger.new(as_child: true) do |trigger_attrs|
+#         render UI::Button.new(**trigger_attrs) do
+#           span(**combobox_text_html_attributes) { "Select framework..." }
+#         end
+#       end
+#
+#       render UI::PopoverContent.new do
+#         render UI::Command.new do
+#           render UI::CommandItem.new(value: "next", **combobox_item_html_attributes("next")) do
+#             span { "Next.js" }
+#             svg(class: "ml-auto h-4 w-4 opacity-0") { path(d: "M20 6 9 17l-5-5") }
+#           end
+#         end
+#       end
+#     end
+#   end
+#
+# @example With Drawer (responsive)
+#   render UI::Wrapper.new(value: "done") do |combobox_attrs|
+#     render UI::Drawer.new(**combobox_attrs) do
+#       # ... drawer content
+#     end
+#   end
+class UI::ComboboxWrapper < Phlex::HTML
+  include ComboboxBehavior
 
-      # @param value [String] Initial selected value (empty string for no selection)
-      # @param attributes [Hash] Additional HTML attributes to merge
-      def initialize(value: "", **attributes)
-        @value = value
-        @attributes = attributes
-      end
+  # @param value [String] Initial selected value (empty string for no selection)
+  # @param attributes [Hash] Additional HTML attributes to merge
+  def initialize(value: "", **attributes)
+    @value = value
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        # Yield combobox attributes to be spread into container component
-        # The block receives a hash of data attributes that should be passed
-        # to the wrapping container (Popover/Drawer/DropdownMenu)
-        yield(combobox_html_attributes.deep_merge(@attributes)) if block_given?
-      end
-    end
+  def view_template(&block)
+    # Yield combobox attributes to be spread into container component
+    # The block receives a hash of data attributes that should be passed
+    # to the wrapping container (Popover/Drawer/DropdownMenu)
+    yield(combobox_html_attributes.deep_merge(@attributes)) if block_given?
+  end
+end

data/app/components/ui/command.rb

@@ -1,15 +1,16 @@
 # frozen_string_literal: true
 
-    class UI::Command < Phlex::HTML
-      include UI::CommandBehavior
+class UI::Command < Phlex::HTML
+  include UI::CommandBehavior
 
-      def initialize(loop: true, classes: "", **attributes)
-        @loop = loop
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(loop: true, autofocus: false, classes: "", **attributes)
+    @loop = loop
+    @autofocus = autofocus
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&)
-        div(**command_html_attributes.deep_merge(@attributes), &)
-      end
-    end
+  def view_template(&)
+    div(**command_html_attributes.deep_merge(@attributes), &)
+  end
+end

data/app/components/ui/command_dialog.rb

@@ -1,25 +1,26 @@
 # frozen_string_literal: true
 
-    class UI::CommandDialog < Phlex::HTML
-      include UI::CommandDialogBehavior
+class UI::CommandDialog < Phlex::HTML
+  include UI::CommandDialogBehavior
 
-      def initialize(shortcut: "meta+j", classes: "", **attributes)
-        @shortcut = shortcut
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(shortcut: "meta+j", autofocus: true, classes: "", **attributes)
+    @shortcut = shortcut
+    @autofocus = autofocus
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&block)
-        div(**command_dialog_html_attributes.deep_merge(@attributes)) do
-          render UI::Dialog.new(close_on_escape: true, close_on_overlay_click: true) do
-            render UI::DialogOverlay.new do
-              render UI::DialogContent.new(classes: command_dialog_content_classes) do
-                render UI::Command.new do
-                  yield if block_given?
-                end
-              end
+  def view_template(&block)
+    div(**command_dialog_html_attributes.deep_merge(@attributes)) do
+      render UI::Dialog.new(close_on_escape: true, close_on_overlay_click: true) do
+        render UI::DialogOverlay.new do
+          render UI::DialogContent.new(classes: command_dialog_content_classes) do
+            render UI::Command.new(autofocus: @autofocus) do
+              yield if block_given?
             end
           end
         end
       end
     end
+  end
+end

data/app/components/ui/command_empty.rb

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
-    class UI::CommandEmpty < Phlex::HTML
-      include UI::CommandEmptyBehavior
+class UI::CommandEmpty < Phlex::HTML
+  include UI::CommandEmptyBehavior
 
-      def initialize(classes: "", **attributes)
-        @classes = classes
-        @attributes = attributes
-      end
+  def initialize(classes: "", **attributes)
+    @classes = classes
+    @attributes = attributes
+  end
 
-      def view_template(&)
-        div(**command_empty_html_attributes.deep_merge(@attributes), &)
-      end
-    end
+  def view_template(&)
+    div(**command_empty_html_attributes.deep_merge(@attributes), &)
+  end
+end