fernandes-ui 0.1.0

data/app/components/ui/command_input.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+    class UI::CommandInput < Phlex::HTML
+      include UI::CommandInputBehavior
+
+      def initialize(placeholder: "Type a command or search...", classes: "", **attributes)
+        @placeholder = placeholder
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(class: command_input_wrapper_classes) do
+          svg(
+            class: "mr-2 h-4 w-4 shrink-0 opacity-50",
+            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.circle(cx: "11", cy: "11", r: "8")
+            s.path(d: "m21 21-4.3-4.3")
+          end
+          input(**command_input_html_attributes.deep_merge(@attributes))
+        end
+      end
+    end

data/app/components/ui/command_item.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+    class UI::CommandItem < Phlex::HTML
+      include UI::CommandItemBehavior
+
+      def initialize(value: nil, disabled: false, classes: "", **attributes)
+        @value = value
+        @disabled = disabled
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        div(**command_item_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/command_list.rb

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

data/app/components/ui/command_separator.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CommandSeparator < Phlex::HTML
+      include UI::CommandSeparatorBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(**command_separator_html_attributes.deep_merge(@attributes))
+      end
+    end

data/app/components/ui/command_shortcut.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+    class UI::CommandShortcut < Phlex::HTML
+      include UI::CommandShortcutBehavior
+
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&)
+        span(**command_shortcut_html_attributes.deep_merge(@attributes), &)
+      end
+    end

data/app/components/ui/context_menu.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+    # ContextMenu - Phlex implementation
+    #
+    # Container for context menus triggered by right-click.
+    # Uses ContextMenuBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::ContextMenu.new do
+    #     render UI::Trigger.new { "Right-click me" }
+    #     render UI::Content.new do
+    #       render UI::Item.new { "Menu Item" }
+    #     end
+    #   end
+    class UI::ContextMenu < Phlex::HTML
+      include UI::ContextMenuBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**context_menu_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/context_menu_checkbox_item.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+    # CheckboxItem - Phlex implementation
+    #
+    # A menu item with checkbox functionality.
+    # Uses ContextMenuCheckboxItemBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::CheckboxItem.new(checked: true) { "Show Status Bar" }
+    class UI::ContextMenuCheckboxItem < Phlex::HTML
+      include UI::ContextMenuCheckboxItemBehavior
+
+      # @param checked [Boolean] Whether the checkbox is checked
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(checked: false, classes: "", **attributes)
+        @checked = checked
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**context_menu_checkbox_item_html_attributes.deep_merge(@attributes)) do
+          span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+            if @checked
+              render_check_icon
+            end
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def render_check_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-4"
+        ) do |s|
+          s.path(d: "M20 6 9 17l-5-5")
+        end
+      end
+    end

data/app/components/ui/context_menu_content.rb

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

data/app/components/ui/context_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 ContextMenuItemBehavior 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::ContextMenuItem < Phlex::HTML
+      include UI::ContextMenuItemBehavior
+
+      # @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(**context_menu_item_html_attributes.deep_merge(@attributes)) do
+            yield if block_given?
+          end
+        else
+          div(**context_menu_item_html_attributes.deep_merge(@attributes)) do
+            yield if block_given?
+          end
+        end
+      end
+    end

data/app/components/ui/context_menu_label.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Label - Phlex implementation
+    #
+    # Non-interactive label for grouping menu items.
+    # Uses ContextMenuLabelBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Label.new { "Group Label" }
+    class UI::ContextMenuLabel < Phlex::HTML
+      include UI::ContextMenuLabelBehavior
+
+      # @param inset [Boolean] Whether to add left padding for alignment
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(inset: false, classes: "", **attributes)
+        @inset = inset
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**context_menu_label_html_attributes.merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/context_menu_radio_group.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+    # RadioGroup - Phlex implementation
+    #
+    # Container for radio menu items.
+    # Uses ContextMenuRadioGroupBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::RadioGroup.new do
+    #     render UI::RadioItem.new(checked: true) { "Option 1" }
+    #     render UI::RadioItem.new { "Option 2" }
+    #   end
+    class UI::ContextMenuRadioGroup < Phlex::HTML
+      include UI::ContextMenuRadioGroupBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**context_menu_radio_group_html_attributes.merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/context_menu_radio_item.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+    # RadioItem - Phlex implementation
+    #
+    # A menu item with radio button functionality.
+    # Uses ContextMenuRadioItemBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::RadioItem.new(checked: true) { "Option 1" }
+    class UI::ContextMenuRadioItem < Phlex::HTML
+      include UI::ContextMenuRadioItemBehavior
+
+      # @param checked [Boolean] Whether the radio is checked
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(checked: false, classes: "", **attributes)
+        @checked = checked
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**context_menu_radio_item_html_attributes.deep_merge(@attributes)) do
+          span(class: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center") do
+            if @checked
+              render_circle_icon
+            end
+          end
+          yield if block_given?
+        end
+      end
+
+      private
+
+      def render_circle_icon
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "24",
+          height: "24",
+          viewbox: "0 0 24 24",
+          fill: "currentColor",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "size-2"
+        ) do |s|
+          s.circle(cx: "12", cy: "12", r: "10")
+        end
+      end
+    end

data/app/components/ui/context_menu_separator.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+    # Separator - Phlex implementation
+    #
+    # A visual divider between menu items.
+    # Uses ContextMenuSeparatorBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Separator.new
+    class UI::ContextMenuSeparator < Phlex::HTML
+      include UI::ContextMenuSeparatorBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(**context_menu_separator_html_attributes.merge(@attributes))
+      end
+    end

data/app/components/ui/context_menu_shortcut.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+    # Shortcut - Phlex implementation
+    #
+    # Displays keyboard shortcut text for a menu item.
+    # Uses ContextMenuShortcutBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Shortcut.new { "⌘K" }
+    class UI::ContextMenuShortcut < Phlex::HTML
+      include UI::ContextMenuShortcutBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        span(**context_menu_shortcut_html_attributes.merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/context_menu_trigger.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+    # Trigger - Phlex implementation
+    #
+    # The element that triggers the context menu on right-click.
+    # Uses ContextMenuTriggerBehavior concern for shared styling logic.
+    #
+    # @example Basic usage
+    #   render UI::Trigger.new do
+    #     "Right click here"
+    #   end
+    class UI::ContextMenuTrigger < Phlex::HTML
+      include UI::ContextMenuTriggerBehavior
+
+      # @param classes [String] Additional CSS classes to merge
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(classes: "", **attributes)
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**context_menu_trigger_html_attributes.deep_merge(@attributes)) do
+          yield if block_given?
+        end
+      end
+    end

data/app/components/ui/date_picker.rb

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+    # DatePicker Phlex component
+    # A date picker that combines a popover trigger with a calendar.
+    #
+    # @example Basic usage
+    #   render UI::DatePicker.new do |dp|
+    #     dp.trigger(placeholder: "Pick a date")
+    #   end
+    #
+    # @example With form field
+    #   render UI::DatePicker.new(name: "user[birth_date]", label: "Date of Birth") do |dp|
+    #     dp.trigger
+    #   end
+    #
+    class UI::DatePicker < Phlex::HTML
+      include UI::DatePickerBehavior
+
+      # @param mode [Symbol] Selection mode: :single, :range, :multiple
+      # @param selected [Date, Range, Array] Initially selected date(s)
+      # @param locale [String] BCP 47 locale tag for formatting
+      # @param format [String] Date format style: "short", "medium", "long", "full"
+      # @param placeholder [String] Placeholder text when no date selected
+      # @param range_placeholder [String] Placeholder for range mode
+      # @param close_on_select [Boolean] Close popover after selection
+      # @param name [String] Form field name for hidden input
+      # @param label [String] Label text for the date picker
+      # @param label_for [String] ID to associate label with input
+      # @param show_dropdowns [Boolean] Show month/year dropdowns in calendar
+      # @param min_date [Date] Minimum selectable date
+      # @param max_date [Date] Maximum selectable date
+      # @param disabled_dates [Array<Date>] Dates that cannot be selected
+      # @param number_of_months [Integer] Number of months to display
+      # @param week_starts_on [Integer] 0 for Sunday, 1 for Monday, etc.
+      # @param classes [String] Additional CSS classes
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        mode: :single,
+        selected: nil,
+        locale: "en-US",
+        format: "long",
+        placeholder: "Select date",
+        range_placeholder: "Select date range",
+        close_on_select: true,
+        name: nil,
+        label: nil,
+        label_for: nil,
+        show_dropdowns: false,
+        min_date: nil,
+        max_date: nil,
+        disabled_dates: [],
+        number_of_months: 1,
+        week_starts_on: 0,
+        classes: "",
+        **attributes
+      )
+        @mode = mode
+        @selected = selected
+        @locale = locale
+        @format = format
+        @placeholder = placeholder
+        @range_placeholder = range_placeholder
+        @close_on_select = close_on_select
+        @name = name
+        @label = label
+        @label_for = label_for
+        @show_dropdowns = show_dropdowns
+        @min_date = min_date
+        @max_date = max_date
+        @disabled_dates = disabled_dates
+        @number_of_months = number_of_months
+        @week_starts_on = week_starts_on
+        @classes = classes
+        @attributes = attributes
+      end
+
+      def view_template(&block)
+        div(**date_picker_html_attributes) do
+          if @label
+            render UI::Label.new(for_field: @label_for, classes: "px-1") { @label }
+          end
+
+          render UI::Popover.new(trigger: "click", placement: "bottom-start", offset: 4) do
+            yield(self) if block_given?
+
+            render UI::PopoverContent.new(classes: "w-auto overflow-hidden p-0") do
+              render UI::Calendar.new(
+                mode: @mode,
+                selected: @selected,
+                locale: @locale,
+                show_dropdowns: @show_dropdowns,
+                min_date: @min_date,
+                max_date: @max_date,
+                disabled_dates: @disabled_dates,
+                number_of_months: @number_of_months,
+                week_starts_on: @week_starts_on,
+                attributes: {
+                  data: {
+                    action: "ui--calendar:select->ui--datepicker#handleSelect"
+                  }
+                }
+              )
+            end
+          end
+
+          if @name
+            input(
+              type: "hidden",
+              name: @name,
+              value: selected_value,
+              data: { ui__datepicker_target: "hiddenInput" }
+            )
+          end
+        end
+      end
+
+      # Render the trigger button
+      def trigger(placeholder: @placeholder, selected: @selected, icon: :chevron, classes: "", **attributes, &block)
+        render Trigger.new(
+          placeholder: placeholder,
+          selected: selected,
+          icon: icon,
+          classes: classes,
+          **attributes,
+          &block
+        )
+      end
+    end

data/app/components/ui/date_picker_input.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+    # DatePicker Input Phlex component
+    # An input field with calendar button for date picker.
+    #
+    # @example Basic usage
+    #   render UI::Input.new(placeholder: "June 01, 2025")
+    #
+    class UI::DatePickerInput < Phlex::HTML
+      include DatePickerInputBehavior
+
+      # @param placeholder [String] Placeholder text
+      # @param value [String] Initial input value
+      # @param id [String] Input ID for label association
+      # @param classes [String] Additional CSS classes for input
+      # @param icon_classes [String] Additional CSS classes for icon button
+      # @param attributes [Hash] Additional HTML attributes
+      def initialize(
+        placeholder: "Select date",
+        value: "",
+        id: nil,
+        classes: "",
+        icon_classes: "",
+        **attributes
+      )
+        @placeholder = placeholder
+        @value = value
+        @id = id
+        @classes = classes
+        @icon_classes = icon_classes
+        @attributes = attributes
+      end
+
+      def view_template
+        div(class: "relative flex gap-2") do
+          input_attrs = date_picker_input_html_attributes
+          input_attrs[:id] = @id if @id
+          input(**input_attrs)
+
+          button(
+            type: "button",
+            class: date_picker_icon_button_classes,
+            data: {
+              ui__datepicker_target: "trigger",
+              ui__popover_target: "trigger"
+            }
+          ) do
+            render_calendar_icon
+            span(class: "sr-only") { "Select date" }
+          end
+        end
+      end
+
+      private
+
+      def render_calendar_icon
+        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: "h-4 w-4 opacity-50"
+        ) do |s|
+          s.path(d: "M8 2v4")
+          s.path(d: "M16 2v4")
+          s.rect(width: "18", height: "18", x: "3", y: "4", rx: "2")
+          s.path(d: "M3 10h18")
+        end
+      end
+    end