ruby_ui 1.0.0.pre.alpha.4

data/lib/rbui/combobox/combobox_group.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxGroup < Base
+    def initialize(heading: nil, **attrs)
+      @heading = heading
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        render_header if @heading
+        render_items(&block)
+      end
+    end
+
+    private
+
+    def render_header
+      div(group_heading: @heading, class: "px-2 py-1.5 text-xs font-medium text-muted-foreground") { @heading }
+    end
+
+    def render_items(&)
+      div(group_items: "", role: "group", &)
+    end
+
+    def default_attrs
+      {
+        class: "overflow-hidden p-1 text-foreground",
+        role: "presentation",
+        data: {
+          value: @heading,
+          rbui__combobox_content_target: "group"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_input.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxInput < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden",
+        data: {
+          rbui__combobox_target: "input",
+          rbui__form_field_target: "input",
+          action: "change->rbui--form-field#onChange invalid->rbui--form-field#onInvalid"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_item.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxItem < Base
+    def initialize(value: nil, **attrs)
+      @value = value
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        div(class: "invisible group-aria-selected:visible") { icon }
+        block.call
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "mr-2 h-4 w-4",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "M20 6 9 17l-5-5"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        role: "option",
+        tabindex: "0",
+        class:
+          "combobox-item group relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-[current]:bg-accent aria-[current]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        data: {
+          value: @value,
+          rbui__combobox_target: "item",
+          rbui__combobox_content_target: "item",
+          controller: "rbui--combobox-item",
+          action: "click->rbui--combobox#onItemSelected"
+        },
+        aria_selected: "false"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_list.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+require "securerandom"
+
+module RBUI
+  class ComboboxList < Base
+    def initialize(**attrs)
+      @id = "list#{SecureRandom.hex(4)}"
+      super
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        id: @id,
+        data: {
+          rbui__combobox_target: "list"
+        },
+        role: "listbox",
+        tabindex: "-1"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_search_input.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxSearchInput < Base
+    def initialize(placeholder:, **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def view_template
+      input_container do
+        search_icon
+        input(**attrs)
+      end
+    end
+
+    private
+
+    def search_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "mr-2 h-4 w-4 shrink-0 opacity-50",
+        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
+    end
+
+    def input_container(&)
+      div(class: "flex items-center border-b px-3", &)
+    end
+
+    def default_attrs
+      {
+        class:
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        placeholder: @placeholder,
+        data: {
+          action: "input->rbui--combobox#onSearchInput",
+          rbui__combobox_target: "search"
+        },
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: false
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_separator.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxSeparator < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {class: "-mx-1 h-px bg-border"}
+    end
+  end
+end

data/lib/rbui/combobox/combobox_trigger.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxTrigger < Base
+    def view_template(&block)
+      button(**attrs) do
+        block&.call
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        class: "ml-2 h-4 w-4 shrink-0 opacity-50",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.path(
+          d: "m7 15 5 5 5-5"
+        )
+        s.path(
+          d: "m7 9 5-5 5 5"
+        )
+      end
+    end
+
+    def default_attrs
+      {
+        data: {
+          action: "rbui--combobox#onTriggerClick",
+          rbui__combobox_target: "trigger"
+        },
+        type: "button",
+        role: "combobox",
+        aria: {
+          expanded: "false",
+          haspopup: "listbox",
+          autocomplete: "none",
+          activedescendant: true
+        },
+        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[200px] justify-between"
+      }
+    end
+  end
+end

data/lib/rbui/combobox/combobox_value.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ComboboxValue < Base
+    def initialize(placeholder: nil, **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      span(**attrs) do
+        block ? block.call : @placeholder
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          rbui__combobox_target: "value"
+        },
+        class: "pointer-events-none"
+      }
+    end
+  end
+end

data/lib/rbui/command/command.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module RBUI
+  class Command < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+  end
+end

data/lib/rbui/command/command_dialog.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandDialog < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {controller: "rbui--command"}
+      }
+    end
+  end
+end

data/lib/rbui/command/command_dialog_content.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandDialogContent < Base
+    SIZES = {
+      xs: "max-w-sm",
+      sm: "max-w-md",
+      md: "max-w-lg",
+      lg: "max-w-2xl",
+      xl: "max-w-4xl",
+      full: "max-w-full"
+    }
+
+    def initialize(size: :md, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      template_tag(data: {rbui__command_target: "content"}) do
+        div(data: {controller: "rbui--command"}) do
+          backdrop
+          div(**attrs, &block)
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data_state: "open",
+        class: tokens(
+          "fixed pointer-events-auto left-[50%] top-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+          SIZES[@size]
+        )
+      }
+    end
+
+    def backdrop
+      div(
+        data_state: "open",
+        data_action: "click->rbui--command#dismiss esc->rbui--command#dismiss",
+        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      )
+    end
+  end
+end

data/lib/rbui/command/command_dialog_trigger.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandDialogTrigger < Base
+    DEFAULT_KEYBINDINGS = [
+      "keydown.ctrl+k@window",
+      "keydown.meta+k@window"
+    ].freeze
+
+    def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
+      @keybindings = keybindings.map { |kb| "#{kb}->rbui--command#open" }
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          action: tokens("click->rbui--command#open", @keybindings.join(" "))
+        }
+      }
+    end
+  end
+end

data/lib/rbui/command/command_empty.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandEmpty < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "py-6 text-center text-sm",
+        role: "presentation",
+        data: {rbui__command_target: "empty"}
+      }
+    end
+  end
+end

data/lib/rbui/command/command_group.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandGroup < Base
+    def initialize(title: nil, **attrs)
+      @title = title
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(**attrs) do
+        render_header if @title
+        render_items(&block)
+      end
+    end
+
+    private
+
+    def render_header
+      div(group_heading: @title) do
+        @title
+      end
+    end
+
+    def render_items(&)
+      div(group_items: "", role: "group", &)
+    end
+
+    def default_attrs
+      {
+        class: "overflow-hidden p-1 text-foreground [&_[group-heading]]:px-2 [&_[group-heading]]:py-1.5 [&_[group-heading]]:text-xs [&_[group-heading]]:font-medium [&_[group-heading]]:text-muted-foreground",
+        role: "presentation",
+        data: {
+          value: @title,
+          rbui__command_target: "group"
+        }
+      }
+    end
+  end
+end

data/lib/rbui/command/command_input.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandInput < Base
+    def initialize(placeholder: "Type a command or search...", **attrs)
+      @placeholder = placeholder
+      super(**attrs)
+    end
+
+    def view_template
+      input_container do
+        search_icon
+        input(**attrs)
+      end
+    end
+
+    private
+
+    def search_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "w-4 h-4 mr-1.5"
+      ) do |s|
+        s.path(
+          fill_rule: "evenodd",
+          d:
+            "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z",
+          clip_rule: "evenodd"
+        )
+      end
+    end
+
+    def input_container(&)
+      div(class: "flex items-center border-b px-3", &)
+    end
+
+    def default_attrs
+      {
+        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        placeholder: @placeholder,
+        data_action: "input->rbui--command#filter keydown.down->rbui--command#handleKeydown keydown.up->rbui--command#handleKeydown keydown.enter->rbui--command#handleKeydown keydown.esc->rbui--command#dismiss",
+        data_rbui__command_target: "input",
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: false,
+        autofocus: true,
+        aria_autocomplete: "list",
+        role: "combobox",
+        aria_expanded: true,
+        value: ""
+      }
+    end
+  end
+end

data/lib/rbui/command/command_item.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandItem < Base
+    def initialize(value:, text: "", href: "#", **attrs)
+      @value = value
+      @text = text
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        href: @href,
+        role: "option",
+        data: {
+          rbui__command_target: "item",
+          value: @value,
+          text: @text
+        }
+        # aria_selected: "true", # Toggles aria-selected="true" on keydown
+      }
+    end
+  end
+end

data/lib/rbui/command/command_list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RBUI
+  class CommandList < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "divide-y divide-border"
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenu < Base
+    def initialize(options: {}, **attrs)
+      @options = options
+      @options[:trigger] ||= "manual"
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          controller: "rbui--context-menu",
+          popover_options_value: @options.to_json
+        }
+      }
+    end
+  end
+end

data/lib/rbui/context_menu/context_menu_content.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RBUI
+  class ContextMenuContent < Base
+    def view_template(&block)
+      template_tag(data: {rbui__context_menu_target: "content"}) do
+        div(**attrs, &block)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "menu",
+        aria_orientation: "vertical",
+        data_state: "open",
+        class:
+              "z-50 min-w-[8rem] outline-none pointer-events-auto overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        tabindex: "-1",
+        data_orientation: "vertical"
+      }
+    end
+  end
+end