ruby_ui 1.0.2 → 1.2.0

data/lib/ruby_ui/combobox/combobox_input_trigger.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxInputTrigger < Base
+    def initialize(placeholder: "", **)
+      @placeholder = placeholder
+      super(**)
+    end
+
+    def view_template
+      div(**attrs) do
+        input(
+          type: "text",
+          placeholder: @placeholder,
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          class: "flex-1 border-0 px-0 bg-transparent outline-none focus:ring-0 placeholder:text-muted-foreground text-sm disabled:cursor-not-allowed",
+          data: {
+            ruby_ui__combobox_target: "inputTrigger",
+            action: "keyup->ruby-ui--combobox#filterItems input->ruby-ui--combobox#filterItems"
+          }
+        )
+        chevron_icon
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex h-9 w-full items-center rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 aria-invalid:border-destructive",
+        data: {
+          ruby_ui__combobox_target: "trigger",
+          placeholder: @placeholder,
+          action: "click->ruby-ui--combobox#openPopover focusin->ruby-ui--combobox#openPopover"
+        },
+        aria: {
+          haspopup: "listbox",
+          expanded: "false"
+        }
+      }
+    end
+
+    def chevron_icon
+      span(class: "shrink-0 flex items-center justify-center size-6 rounded-sm hover:bg-muted hover:text-foreground") 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: "pointer-events-none size-4 text-muted-foreground"
+        ) do |s|
+          s.path(d: "m6 9 6 6 6-6")
+        end
+      end
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_item.rb

@@ -3,19 +3,17 @@
 module RubyUI
   class ComboboxItem < Base
     def view_template(&)
-      label(**attrs, &)
+      label(**attrs) do
+        yield if block_given?
+        render ComboboxItemIndicator.new
+      end
     end
 
     private
 
     def default_attrs
       {
-        class: [
-          "flex flex-row w-full text-wrap [&>span,&>div]:truncate gap-2 items-center rounded-sm px-2 py-1 text-sm outline-none cursor-pointer",
-          "select-none has-[:checked]:bg-accent hover:bg-accent p-2",
-          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2",
-          "has-disabled:opacity-50 has-disabled:cursor-not-allowed"
-        ],
+        class: "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground aria-[current=true]:bg-accent has-[input:disabled]:opacity-50 has-[input:disabled]:cursor-not-allowed",
         role: "option",
         data: {
           ruby_ui__combobox_target: "item"

data/lib/ruby_ui/combobox/combobox_item_indicator.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class ComboboxItemIndicator < Base
+    def view_template
+      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",
+        **attrs
+      ) do |s|
+        s.path(d: "M20 6 9 17l-5-5")
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "ml-auto size-4 shrink-0 opacity-0 peer-checked:opacity-100"
+      }
+    end
+  end
+end

data/lib/ruby_ui/combobox/combobox_list_group.rb

@@ -12,7 +12,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: ["hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1 border-b", LABEL_CLASSES],
+        class: ["hidden has-[label:not(.hidden)]:flex flex-col py-1 gap-1", LABEL_CLASSES],
         role: "group"
       }
     end

data/lib/ruby_ui/combobox/combobox_popover.rb

@@ -12,15 +12,11 @@ module RubyUI
       {
         class: "inset-auto m-0 absolute border bg-background shadow-lg rounded-lg",
         role: "popover",
-        autofocus: true,
         popover: true,
         data: {
           ruby_ui__combobox_target: "popover",
           action: %w[
-            keydown.down->ruby-ui--combobox#keyDownPressed
-            keydown.up->ruby-ui--combobox#keyUpPressed
-            keydown.enter->ruby-ui--combobox#keyEnterPressed
-            keydown.esc->ruby-ui--combobox#closeDialog:prevent
+            toggle->ruby-ui--combobox#handlePopoverToggle
             resize@window->ruby-ui--combobox#updatePopoverWidth
           ]
         }

data/lib/ruby_ui/combobox/combobox_radio.rb

@@ -10,14 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: [
-          "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow",
-          "focus:outline-none",
-          "focus-visible:ring-1 focus-visible:ring-ring",
-          "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"
-        ],
+        class: "peer sr-only",
         data: {
           ruby_ui__combobox_target: "input",
           ruby_ui__form_field_target: "input",

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -10,12 +10,7 @@ module RubyUI
 
     def default_attrs
       {
-        class: [
-          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
-        ],
+        class: "peer sr-only disabled:cursor-not-allowed",
         data: {
           ruby_ui__combobox_target: "toggleAll",
           action: "change->ruby-ui--combobox#toggleAllItems"

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -9,7 +9,7 @@ module RubyUI
 
     def view_template
       button(**attrs) do
-        span(class: "truncate", data: {ruby_ui__combobox_target: "triggerContent"}) do
+        span(class: "truncate text-muted-foreground", data: {ruby_ui__combobox_target: "triggerContent"}) do
           @placeholder
         end
         icon
@@ -26,12 +26,13 @@ module RubyUI
           "hover:bg-accent hover:text-accent-foreground",
           "disabled:pointer-events-none disabled:opacity-50",
           "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "aria-invalid:border-destructive"
         ],
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",
-          action: "ruby-ui--combobox#openPopover"
+          action: "click->ruby-ui--combobox#togglePopover focus->ruby-ui--combobox#openPopover"
         },
         aria: {
           haspopup: "listbox",
@@ -41,22 +42,21 @@ module RubyUI
     end
 
     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"
-        )
+      span(class: "shrink-0 flex items-center justify-center size-6 rounded-sm hover:bg-muted hover:text-foreground") 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: "pointer-events-none size-4 text-muted-foreground"
+        ) do |s|
+          s.path(d: "m6 9 6 6 6-6")
+        end
       end
     end
   end

data/lib/ruby_ui/command/command_docs.rb

@@ -0,0 +1,154 @@
+# frozen_string_literal: true
+
+class Views::Docs::Command < Views::Base
+  def view_template
+    component = "Command"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Command", description: "Fast, composable, unstyled command menu for Phlex.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          CommandDialog do
+            CommandDialogTrigger do
+              Button(variant: "outline", class: 'w-56 pr-2 pl-3 justify-between') do
+                div(class: "flex items-center space-x-1") do
+                  search_icon
+                  span(class: "text-muted-foreground font-normal") do
+                    plain "Search"
+                  end
+                end
+                ShortcutKey do
+                  span(class: "text-xs") { "⌘" }
+                  plain "K"
+                end
+              end
+            end
+            CommandDialogContent do
+              Command do
+                CommandInput(placeholder: "Type a command or search...")
+                CommandEmpty { "No results found." }
+                CommandList do
+                  CommandGroup(title: "Components") do
+                    components_list.each do |component|
+                      CommandItem(value: component[:name], href: component[:path]) do
+                        default_icon
+                        plain component[:name]
+                      end
+                    end
+                  end
+                  CommandGroup(title: "Settings") do
+                    settings_list.each do |setting|
+                      CommandItem(value: setting[:name], href: setting[:path]) do
+                        default_icon
+                        plain setting[:name]
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With keybinding", context: self) do
+        <<~RUBY
+          CommandDialog do
+            CommandDialogTrigger(keybindings: ['keydown.ctrl+j@window', 'keydown.meta+j@window']) do
+              p(class: "text-sm text-muted-foreground") do
+                span(class: 'mr-1') { "Press" }
+                ShortcutKey do
+                  span(class: "text-xs") { "⌘" }
+                  plain "J"
+                end
+              end
+            end
+            CommandDialogContent do
+              Command do
+                CommandInput(placeholder: "Type a command or search...")
+                CommandEmpty { "No results found." }
+                CommandList do
+                  CommandGroup(title: "Components") do
+                    components_list.each do |component|
+                      CommandItem(value: component[:name], href: component[:path]) do
+                        default_icon
+                        plain component[:name]
+                      end
+                    end
+                  end
+                  CommandGroup(title: "Settings") do
+                    settings_list.each do |setting|
+                      CommandItem(value: setting[:name], href: setting[:path]) do
+                        default_icon
+                        plain setting[:name]
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    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 default_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm4.28 10.28a.75.75 0 000-1.06l-3-3a.75.75 0 10-1.06 1.06l1.72 1.72H8.25a.75.75 0 000 1.5h5.69l-1.72 1.72a.75.75 0 101.06 1.06l3-3z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def components_list
+    [
+      {name: "Accordion", path: docs_accordion_path},
+      {name: "Alert", path: docs_alert_path},
+      {name: "Alert Dialog", path: docs_alert_dialog_path},
+      {name: "Aspect Ratio", path: docs_aspect_ratio_path},
+      {name: "Avatar", path: docs_avatar_path},
+      {name: "Badge", path: docs_badge_path}
+    ]
+  end
+
+  def settings_list
+    [
+      {name: "Profile", path: "#"},
+      {name: "Mail", path: "#"},
+      {name: "Settings", path: "#"}
+    ]
+  end
+end

data/lib/ruby_ui/context_menu/context_menu.rb

@@ -18,7 +18,7 @@ module RubyUI
       {
         data: {
           controller: "ruby-ui--context-menu",
-          popover_options_value: @options.to_json
+          ruby_ui__context_menu_options_value: @options.to_json
         }
       }
     end

data/lib/ruby_ui/context_menu/context_menu_docs.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+class Views::Docs::ContextMenu < Views::Base
+  def view_template
+    component = "ContextMenu"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Context Menu", description: "Displays a menu to the user — such as a set of actions or functions — triggered by a right click.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          ContextMenu do
+            ContextMenuTrigger(class: 'flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') { "Right click here" }
+            ContextMenuContent(class: 'w-64') do
+              ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+              ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+              ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+              ContextMenuSeparator
+              ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+              ContextMenuItem(href: '#') { "Show Full URLs" }
+              ContextMenuSeparator
+              ContextMenuLabel(inset: true) { "More Tools" }
+              ContextMenuSeparator
+              ContextMenuItem(href: '#') { "Developer Tools" }
+              ContextMenuItem(href: '#') { "Task Manager" }
+              ContextMenuItem(href: '#') { "Extensions" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Placement", context: self) do
+        <<~RUBY
+          div(class: 'space-y-4') do
+            ContextMenu(options: { placement: 'right' }) do
+              ContextMenuTrigger(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
+                plain "Right click here"
+                Badge(variant: :primary) { "right" }
+              end
+              ContextMenuContent(class: 'w-64') do
+                ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+                ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+                ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+                ContextMenuItem(href: '#') { "Show Full URLs" }
+                ContextMenuSeparator
+                ContextMenuLabel(inset: true) { "More Tools" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#') { "Developer Tools" }
+                ContextMenuItem(href: '#') { "Task Manager" }
+                ContextMenuItem(href: '#') { "Extensions" }
+              end
+            end
+            ContextMenu(options: { placement: 'left' }) do
+              ContextMenuTrigger(class: 'flex flex-col items-center gap-y-2 h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm') do
+                plain "Right click here"
+                Badge(variant: :primary) { "left" }
+              end
+              ContextMenuContent(class: 'w-64') do
+                ContextMenuItem(href: '#', shortcut: "⌘[") { "Back" }
+                ContextMenuItem(href: '#', shortcut: "⌘]", disabled: true) { "Forward" }
+                ContextMenuItem(href: '#', shortcut: "⌘R") { "Reload" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#', shortcut: "⌘⇧B", checked: true) { "Show Bookmarks Bar" }
+                ContextMenuItem(href: '#') { "Show Full URLs" }
+                ContextMenuSeparator
+                ContextMenuLabel(inset: true) { "More Tools" }
+                ContextMenuSeparator
+                ContextMenuItem(href: '#') { "Developer Tools" }
+                ContextMenuItem(href: '#') { "Task Manager" }
+                ContextMenuItem(href: '#') { "Extensions" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTable < Base
+    register_element :turbo_frame, tag: "turbo-frame"
+
+    def initialize(id:, **attrs)
+      @id = id
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      turbo_frame(id: @id, target: "_top") do
+        div(**attrs) do
+          yield if block
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "w-full space-y-4",
+        data: {controller: "ruby-ui--data-table"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_bulk_actions.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableBulkActions < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "hidden items-center gap-2",
+        data: {"ruby-ui--data-table-target": "bulkActions"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_column_toggle.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class DataTableColumnToggle < Base
+    def initialize(columns:, **attrs)
+      @columns = columns
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        render RubyUI::DropdownMenu.new do
+          render RubyUI::DropdownMenuTrigger.new do
+            render RubyUI::Button.new(variant: :outline, size: :sm) do
+              plain "Columns"
+              # inline chevron-down SVG (lucide 24px, 1px stroke)
+              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: "w-4 h-4 ml-1"
+              ) do |s|
+                s.polyline(points: "6 9 12 15 18 9")
+              end
+            end
+          end
+          render RubyUI::DropdownMenuContent.new do
+            @columns.each do |col|
+              label(class: "flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm cursor-pointer hover:bg-accent") do
+                input(
+                  type: "checkbox",
+                  checked: true,
+                  class: "h-4 w-4 rounded border border-input accent-primary cursor-pointer",
+                  data: {
+                    column_key: col[:key].to_s,
+                    action: "change->ruby-ui--data-table-column-visibility#toggle"
+                  }
+                )
+                span { plain col[:label] }
+              end
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "relative",
+        data: {controller: "ruby-ui--data-table-column-visibility"}
+      }
+    end
+  end
+end

data/lib/ruby_ui/data_table/data_table_column_visibility_controller.js

@@ -0,0 +1,14 @@
+// app/javascript/controllers/ruby_ui/data_table_column_visibility_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  toggle(event) {
+    const key = event.target.dataset.columnKey;
+    const visible = event.target.checked;
+    const root = this.element.closest('[data-controller~="ruby-ui--data-table"]');
+    if (!root) return;
+    root
+      .querySelectorAll(`[data-column="${key}"]`)
+      .forEach((el) => el.classList.toggle("hidden", !visible));
+  }
+}

data/lib/ruby_ui/data_table/data_table_controller.js

@@ -0,0 +1,57 @@
+// app/javascript/controllers/ruby_ui/data_table_controller.js
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "selectAll",
+    "rowCheckbox",
+    "selectionSummary",
+    "selectionBar",
+    "bulkActions",
+  ];
+
+  connect() {
+    this.updateState();
+  }
+
+  toggleAll(event) {
+    const checked = event.target.checked;
+    this.rowCheckboxTargets.forEach((cb) => {
+      cb.checked = checked;
+    });
+    this.updateState();
+  }
+
+  toggleRow() {
+    this.updateState();
+  }
+
+  toggleRowDetail(event) {
+    const button = event.currentTarget;
+    const id = button.getAttribute("aria-controls");
+    if (!id) return;
+    const target = document.getElementById(id);
+    if (!target) return;
+    const expanded = button.getAttribute("aria-expanded") === "true";
+    button.setAttribute("aria-expanded", String(!expanded));
+    target.classList.toggle("hidden", expanded);
+  }
+
+  updateState() {
+    const total = this.rowCheckboxTargets.length;
+    const selected = this.rowCheckboxTargets.filter((cb) => cb.checked).length;
+
+    if (this.hasSelectAllTarget) {
+      this.selectAllTarget.checked = total > 0 && selected === total;
+      this.selectAllTarget.indeterminate = selected > 0 && selected < total;
+    }
+
+    if (this.hasSelectionSummaryTarget) {
+      this.selectionSummaryTarget.textContent = `${selected} of ${total} row(s) selected.`;
+    }
+
+    if (this.hasBulkActionsTarget) {
+      this.bulkActionsTarget.classList.toggle("hidden", selected === 0);
+    }
+  }
+}