fernandes-ui 0.1.0

data/app/components/ui/date_picker_trigger.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+    # DatePicker Trigger Phlex component
+    # A button that triggers the date picker popover.
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new(placeholder: "Pick a date")
+    #
+    class UI::DatePickerTrigger < Phlex::HTML
+      include DatePickerTriggerBehavior
+
+      # @param placeholder [String] Placeholder text when no date selected
+      # @param selected [Date, Range, Array] Currently selected date(s) for display
+      # @param icon [Symbol] Icon to show: :chevron, :calendar, or :none
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        placeholder: "Select date",
+        selected: nil,
+        icon: :chevron,
+        classes: "",
+        **attributes
+      )
+        @placeholder = placeholder
+        @selected = selected
+        @icon = icon
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        button(**date_picker_trigger_html_attributes) do
+          span(
+            data: { ui__datepicker_target: "label" },
+            class: "text-left truncate flex-1 #{@selected.nil? ? 'text-muted-foreground' : ''}"
+          ) do
+            plain display_text
+          end
+
+          render_icon if @icon != :none
+        end
+      end
+
+      private
+
+      def display_text
+        return @placeholder if @selected.nil?
+
+        case @selected
+        when Date
+          @selected.strftime("%B %d, %Y")
+        when Range
+          "#{@selected.begin.strftime('%B %d, %Y')} - #{@selected.end.strftime('%B %d, %Y')}"
+        when Array
+          if @selected.empty?
+            @placeholder
+          elsif @selected.length == 1
+            @selected.first.strftime("%B %d, %Y")
+          else
+            "#{@selected.length} dates selected"
+          end
+        else
+          @placeholder
+        end
+      end
+
+      def render_icon
+        if @icon == :chevron
+          raw chevron_down_icon
+        elsif @icon == :calendar
+          raw calendar_icon
+        end
+      end
+    end

data/app/components/ui/dialog.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+    class UI::Dialog < Phlex::HTML
+      include UI::DialogBehavior
+
+      def initialize(open: false, close_on_escape: true, close_on_overlay_click: true, classes: nil, **attributes)
+        @open = open
+        @close_on_escape = close_on_escape
+        @close_on_overlay_click = close_on_overlay_click
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dialog_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dialog_close.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    class UI::DialogClose < Phlex::HTML
+      def initialize(variant: :outline, size: :default, classes: nil, **attributes)
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        render UI::Button.new(
+          variant: @variant,
+          size: @size,
+          classes: @classes,
+          **close_button_data_attributes.merge(@attributes)
+        ) do
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def close_button_data_attributes
+        { data: { action: "click->ui--dialog#close" } }
+      end
+    end

data/app/components/ui/dialog_content.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+    class UI::DialogContent < Phlex::HTML
+      include UI::DialogContentBehavior
+
+      def initialize(open: false, classes: nil, **attributes)
+        @open = open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dialog_content_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dialog_description.rb

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

data/app/components/ui/dialog_footer.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::DialogFooter < Phlex::HTML
+      include UI::DialogFooterBehavior
+
+      def initialize(classes: nil)
+        @classes = classes
+      end
+
+      def view_template(&block)
+        div(**dialog_footer_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dialog_header.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+    class UI::DialogHeader < Phlex::HTML
+      include UI::DialogHeaderBehavior
+
+      def initialize(classes: nil)
+        @classes = classes
+      end
+
+      def view_template(&block)
+        div(**dialog_header_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dialog_overlay.rb

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

data/app/components/ui/dialog_title.rb

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

data/app/components/ui/dialog_trigger.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+    class UI::DialogTrigger < Phlex::HTML
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering button
+      # @param variant [Symbol] Button variant (when not using as_child)
+      # @param size [Symbol] Button size (when not using as_child)
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, variant: :outline, size: :default, classes: nil, **attributes)
+        @as_child = as_child
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      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 component
+          render UI::Button.new(
+            variant: @variant,
+            size: @size,
+            classes: @classes,
+            **trigger_attrs
+          ), &block
+        end
+      end
+    end

data/app/components/ui/drawer.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+    class UI::Drawer < Phlex::HTML
+      include UI::DrawerBehavior
+
+      def initialize(
+        open: false,
+        direction: "bottom",
+        dismissible: true,
+        modal: true,
+        snap_points: nil,
+        active_snap_point: nil,
+        fade_from_index: nil,
+        snap_to_sequential_point: false,
+        handle_only: false,
+        reposition_inputs: true,
+        classes: nil,
+        **attributes
+      )
+        @open = open
+        @direction = direction
+        @dismissible = dismissible
+        @modal = modal
+        @snap_points = snap_points
+        @active_snap_point = active_snap_point
+        @fade_from_index = fade_from_index
+        @snap_to_sequential_point = snap_to_sequential_point
+        @handle_only = handle_only
+        @reposition_inputs = reposition_inputs
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**drawer_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/drawer_close.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    class UI::DrawerClose < Phlex::HTML
+      include UI::DrawerCloseBehavior
+
+      def initialize(variant: :outline, size: :default, classes: nil, **attributes)
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        render UI::Button.new(
+          variant: @variant,
+          size: @size,
+          classes: @classes,
+          **drawer_close_data_attributes.merge(@attributes)
+        ) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/drawer_content.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+    class UI::DrawerContent < Phlex::HTML
+      include UI::DrawerContentBehavior
+
+      def initialize(open: false, direction: "bottom", classes: nil, **attributes)
+        @open = open
+        @direction = direction
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        # Add group class for handle visibility based on direction
+        div(class: "group/drawer-content", **drawer_content_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/drawer_description.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    class UI::DrawerDescription < Phlex::HTML
+      include UI::DrawerDescriptionBehavior
+
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        p(**drawer_description_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/drawer_footer.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    class UI::DrawerFooter < Phlex::HTML
+      include UI::DrawerFooterBehavior
+
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**drawer_footer_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/drawer_handle.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::DrawerHandle < Phlex::HTML
+      include UI::DrawerHandleBehavior
+
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(**drawer_handle_html_attributes)
+      end
+    end

data/app/components/ui/drawer_header.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    class UI::DrawerHeader < Phlex::HTML
+      include UI::DrawerHeaderBehavior
+
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**drawer_header_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/drawer_overlay.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+    class UI::DrawerOverlay < Phlex::HTML
+      include UI::DrawerOverlayBehavior
+
+      def initialize(open: false, classes: nil, **attributes)
+        @open = open
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(**drawer_overlay_container_html_attributes) do
+          div(**drawer_overlay_html_attributes)
+        end
+      end
+    end

data/app/components/ui/drawer_title.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    class UI::DrawerTitle < Phlex::HTML
+      include UI::DrawerTitleBehavior
+
+      def initialize(classes: nil, **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**drawer_title_html_attributes) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/drawer_trigger.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+    class UI::DrawerTrigger < Phlex::HTML
+      include UI::SharedAsChildBehavior
+      include UI::DrawerTriggerBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering button
+      # @param variant [Symbol] Button variant (when not using as_child)
+      # @param size [Symbol] Button size (when not using as_child)
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, variant: :outline, size: :default, classes: nil, **attributes)
+        @as_child = as_child
+        @variant = variant
+        @size = size
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        if @as_child
+          # Yield attributes to block - child must accept and use them
+          yield(drawer_trigger_html_attributes) if block_given?
+        else
+          # Default: render as Button component
+          render UI::Button.new(
+            variant: @variant,
+            size: @size,
+            classes: @classes,
+            **drawer_trigger_html_attributes
+          ), &block
+        end
+      end
+    end

data/app/components/ui/dropdown_menu.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+    # DropdownMenu - Phlex implementation
+    #
+    # Container for dropdown menus with Stimulus controller for interactivity.
+    # Uses DropdownMenuBehavior concern for shared styling logic.
+    #
+    # Supports asChild pattern for composition without wrapper elements.
+    #
+    # @example Basic usage
+    #   render UI::DropdownMenu.new do
+    #     render UI::Trigger.new { button { "Open" } }
+    #     render UI::Content.new { "Items here" }
+    #   end
+    #
+    # @example With asChild (no wrapper div)
+    #   render UI::DropdownMenu.new(as_child: true) do |dropdown_attrs|
+    #     # DropdownMenu yields data attributes to first child
+    #     render UI::Trigger.new(**dropdown_attrs, as_child: true) do |trigger_attrs|
+    #       render UI::Button.new(**trigger_attrs) { "Menu" }
+    #     end
+    #     render UI::Content.new { "Items" }
+    #   end
+    class UI::DropdownMenu < Phlex::HTML
+      include UI::DropdownMenuBehavior
+      include UI::SharedAsChildBehavior
+
+      # @param as_child [Boolean] When true, yields attributes to block instead of rendering wrapper
+      # @param placement [String] Floating UI placement (bottom-start, bottom-end, right-start, etc.)
+      # @param offset [Integer] Offset from trigger in pixels
+      # @param flip [Boolean] Enable/disable flip middleware
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(as_child: false, placement: "bottom-start", offset: 4, flip: true, classes: "", **attributes)
+        @as_child = as_child
+        @placement = placement
+        @offset = offset
+        @flip = flip
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        dropdown_attrs = dropdown_menu_html_attributes.deep_merge(@attributes)
+
+        if @as_child
+          # Yield data attributes to block - child receives controller setup
+          yield(dropdown_attrs) if block_given?
+        else
+          # Default: render wrapper div with controller
+          div(**dropdown_attrs) do
+            yield if block_given?
+          end
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_checkbox_item.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+    # CheckboxItem - Phlex implementation
+    #
+    # Menu item with checkbox state that can be toggled.
+    # Uses DropdownMenuCheckboxItemBehavior concern for shared styling logic.
+    #
+    # @example Basic checkbox item
+    #   render UI::CheckboxItem.new(checked: true) { "Show Status Bar" }
+    class UI::DropdownMenuCheckboxItem < Phlex::HTML
+      include UI::DropdownMenuCheckboxItemBehavior
+
+      # @param checked [Boolean] Whether checkbox is checked
+      # @param disabled [Boolean] Whether item is disabled
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(checked: false, disabled: false, classes: "", **attributes)
+        @checked = checked
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_checkbox_item_html_attributes.deep_merge(@attributes)) do
+          render_checkbox_indicator
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def render_checkbox_indicator
+        span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+          if @checked
+            span(data: { state: "checked" }) 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: "lucide lucide-check size-4"
+              ) do |s|
+                s.path(d: "M20 6 9 17l-5-5")
+              end
+            end
+          end
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_content.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+    # Content - Phlex implementation
+    #
+    # Menu items container with animations and positioning.
+    # Uses DropdownMenuContentBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Content.new do
+    #     render UI::Item.new { "Menu Item" }
+    #   end
+    class UI::DropdownMenuContent < Phlex::HTML
+      include UI::DropdownMenuContentBehavior
+
+      # @param side_offset [Integer] Offset from trigger side
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(side_offset: 4, classes: "", **attributes)
+        @side_offset = side_offset
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**dropdown_menu_content_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/dropdown_menu_item.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+    # Item - Phlex implementation
+    #
+    # Individual menu item that can be rendered as a link or div.
+    # Uses DropdownMenuItemBehavior concern for shared styling logic.
+    #
+    # @example Basic menu item
+    #   render UI::Item.new { "Profile" }
+    #
+    # @example Menu item with link
+    #   render UI::Item.new(href: "/profile") { "Profile" }
+    class UI::DropdownMenuItem < Phlex::HTML
+      include UI::DropdownMenuItemBehavior
+
+      # @param href [String] Optional URL to make item a link
+      # @param inset [Boolean] Whether to add left padding for alignment
+      # @param variant [String] Variant style (default, destructive)
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(href: nil, inset: false, variant: "default", classes: "", **attributes)
+        @href = href
+        @inset = inset
+        @variant = variant
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        if @href
+          a(**dropdown_menu_item_html_attributes.deep_merge(@attributes)) do
+            yield if block_given?
+          end
+        else
+          div(**dropdown_menu_item_html_attributes.deep_merge(@attributes)) do
+            yield if block_given?
+          end
+        end
+      end
+    end