[Feature] Combobox shadcn visual revamp (#355)

* chore: ignore .worktrees directory

* feat(combobox): revamp visual design to match shadcn/ui

* fix(combobox): restore selected, keyboard highlight, and disabled states

* feat(combobox): add badge management to Stimulus controller

* fix(combobox): address controller quality issues

* docs(combobox): update examples for shadcn-style revamp

* feat(combobox): add ComboboxInputTrigger, fix badge border, clear button style

* feat(combobox): JS controller support for ComboboxInputTrigger + auto-highlight

* docs(combobox): 8 examples matching shadcn docs

* fix(combobox): remove border and outline from ComboboxInputTrigger input

* feat(combobox): shadcn visual revamp with chips, keyboard nav, and accessibility

Author: djalmaaraujo

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
 node_modules
 /app/assets/builds/*
+.worktrees

lib/ruby_ui/combobox/combobox.rb

@@ -19,7 +19,13 @@ def default_attrs
         data: {
           controller: "ruby-ui--combobox",
           ruby_ui__combobox_term_value: @term,
-          action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
+          action: %w[
+            turbo:morph@window->ruby-ui--combobox#updateTriggerContent
+            keydown.down->ruby-ui--combobox#keyDownPressed
+            keydown.up->ruby-ui--combobox#keyUpPressed
+            keydown.enter->ruby-ui--combobox#keyEnterPressed
+            keydown.esc->ruby-ui--combobox#closePopover:prevent
+          ]
         }
       }
     end

lib/ruby_ui/combobox/combobox_badge.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadge < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-xs font-medium text-secondary-foreground"
+      }
+    end
+  end
+end

lib/ruby_ui/combobox/combobox_badge_trigger.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxBadgeTrigger < Base
+    def initialize(placeholder: "", clear_button: false, **)
+      @placeholder = placeholder
+      @clear_button = clear_button
+      super(**)
+    end
+
+    def view_template(&)
+      div(**attrs) do
+        div(data: {ruby_ui__combobox_target: "badgeContainer"}, class: "hidden")
+        input(
+          type: "text",
+          class: "flex-1 min-w-8 bg-transparent border-0 px-0 outline-none focus:ring-0 placeholder:text-muted-foreground text-sm",
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          placeholder: @placeholder,
+          data: {
+            ruby_ui__combobox_target: "badgeInput",
+            action: "keyup->ruby-ui--combobox#filterItems input->ruby-ui--combobox#filterItems keydown.backspace->ruby-ui--combobox#handleBadgeInputBackspace"
+          }
+        )
+        render ComboboxClearButton.new if @clear_button
+      end
+    end
+
+    private
+
+    # JS-toggled classes (referenced here so Tailwind compiles them): h-auto min-h-9 pt-1.5
+    def default_attrs
+      {
+        class: "flex h-9 w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 cursor-text",
+        data: {
+          ruby_ui__combobox_target: "trigger",
+          action: "click->ruby-ui--combobox#openPopover focusin->ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+  end
+end

lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -10,13 +10,7 @@ def view_template
 
     def default_attrs
       {
-        class: [
-          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "checked:bg-primary checked:text-primary-foreground",
-          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-        ],
+        class: "peer sr-only",
         data: {
           ruby_ui__combobox_target: "input",
           action: "ruby-ui--combobox#inputChanged"

lib/ruby_ui/combobox/combobox_clear_button.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxClearButton < Base
+    def view_template
+      button(**attrs) 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-3.5"
+        ) do |s|
+          s.path(d: "M18 6 6 18")
+          s.path(d: "m6 6 12 12")
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "button",
+        class: "ml-auto shrink-0 rounded-sm text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring hidden",
+        aria: {label: "Clear selection"},
+        data: {
+          ruby_ui__combobox_target: "clearButton",
+          # JS implementation in combobox_controller.js
+          action: "ruby-ui--combobox#clearAll"
+        }
+      }
+    end
+  end
+end