phlex_kit 0.2.0

data/app/components/phlex_kit/combobox/combobox_radio.rb

@@ -0,0 +1,26 @@
+module PhlexKit
+  # Single-select input inside a PhlexKit::ComboboxItem — selecting one closes the
+  # popover. Also wired as a phlex-kit--form-field input so live validation works
+  # when the combobox sits inside a PhlexKit::FormField. See combobox.rb.
+  class ComboboxRadio < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      input(**mix({
+        type: :radio,
+        class: "pk-combobox-radio",
+        data: {
+          phlex_kit__combobox_target: "input",
+          phlex_kit__form_field_target: "input",
+          action: [
+            "phlex-kit--combobox#inputChanged",
+            "input->phlex-kit--form-field#onInput",
+            "invalid->phlex-kit--form-field#onInvalid"
+          ].join(" ")
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/combobox/combobox_search_input.rb

@@ -0,0 +1,49 @@
+module PhlexKit
+  # Filter input at the top of a PhlexKit::ComboboxPopover (magnifier icon +
+  # borderless search field). Filtering happens client-side against each item's
+  # text (or data-text). See combobox.rb.
+  class ComboboxSearchInput < BaseComponent
+    def initialize(placeholder:, **attrs)
+      @placeholder = placeholder
+      @attrs = attrs
+    end
+
+    def view_template
+      div(class: "pk-combobox-search") do
+        icon
+        input(**mix({
+          type: :search,
+          role: "searchbox",
+          autocorrect: "off",
+          autocomplete: "off",
+          spellcheck: "false",
+          placeholder: @placeholder,
+          class: "pk-combobox-search-input",
+          data: {
+            phlex_kit__combobox_target: "searchInput",
+            action: "keyup->phlex-kit--combobox#filterItems search->phlex-kit--combobox#filterItems"
+          }
+        }, @attrs))
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "pk-combobox-search-icon",
+        "aria-hidden": "true"
+      ) do |s|
+        s.circle(cx: "11", cy: "11", r: "8")
+        s.path(d: "m21 21-4.3-4.3")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/combobox/combobox_toggle_all_checkbox.rb

@@ -0,0 +1,21 @@
+module PhlexKit
+  # "Select all" checkbox for a multi-select combobox — wrap it in a
+  # PhlexKit::ComboboxItem above the list. Hidden while a filter term is active.
+  # See combobox.rb.
+  class ComboboxToggleAllCheckbox < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template
+      input(**mix({
+        type: :checkbox,
+        class: "pk-combobox-checkbox",
+        data: {
+          phlex_kit__combobox_target: "toggleAll",
+          action: "change->phlex-kit--combobox#toggleAllItems"
+        }
+      }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/combobox/combobox_trigger.rb

@@ -0,0 +1,48 @@
+module PhlexKit
+  # The closed-state button for PhlexKit::Combobox — shows the placeholder until the
+  # controller writes the selected item text (or "N <term>") into the content
+  # span. See combobox.rb.
+  class ComboboxTrigger < BaseComponent
+    def initialize(placeholder: "", **attrs)
+      @placeholder = placeholder
+      @attrs = attrs
+    end
+
+    def view_template
+      button(**mix({
+        type: :button,
+        class: "pk-combobox-trigger",
+        aria: { haspopup: "listbox", expanded: "false" },
+        data: {
+          placeholder: @placeholder,
+          phlex_kit__combobox_target: "trigger",
+          action: "phlex-kit--combobox#togglePopover"
+        }
+      }, @attrs)) do
+        span(class: "pk-combobox-trigger-content", data: { phlex_kit__combobox_target: "triggerContent" }) do
+          @placeholder
+        end
+        icon
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": "2",
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        class: "pk-combobox-trigger-icon",
+        "aria-hidden": "true"
+      ) do |s|
+        s.path(d: "m7 15 5 5 5-5")
+        s.path(d: "m7 9 5-5 5 5")
+      end
+    end
+  end
+end

data/app/components/phlex_kit/command/command.css

@@ -0,0 +1,104 @@
+/* Co-located with command.rb — UI::Command (+ CommandDialog overlay). ruby_ui's
+   structure kept (template cloned into <body>, custom backdrop + centered panel,
+   like the shipped sheet); fuse.js replaced with a substring filter in the
+   controller, Tailwind with vanilla CSS on the palette tokens. Geometry from
+   ruby_ui (h-10 input, p-1 groups, px-2 py-1.5 rows, divide-y list). Theme
+   tokens come from the global stylesheet. */
+.pk-command-dialog-trigger { display: inline-block; }
+
+/* Backdrop of the cloned overlay. */
+.pk-command-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  pointer-events: auto;
+  background: color-mix(in oklab, var(--pk-bg) 80%, transparent);
+  backdrop-filter: blur(4px);
+}
+
+/* Centered palette panel. */
+.pk-command-dialog {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 50;
+  pointer-events: auto;
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+  max-width: 32rem;
+  border: 1px solid var(--pk-border);
+  border-radius: var(--pk-radius);
+  background: var(--pk-surface);
+  color: var(--pk-text);
+  box-shadow: 0 10px 30px rgb(0 0 0 / .35);
+}
+.pk-command-dialog.xs { max-width: 24rem; }
+.pk-command-dialog.sm { max-width: 28rem; }
+.pk-command-dialog.lg { max-width: 42rem; }
+.pk-command-dialog.xl { max-width: 56rem; }
+.pk-command-dialog.full { max-width: 100%; }
+
+/* Search row. */
+.pk-command-input-row {
+  display: flex;
+  align-items: center;
+  padding: 0 .75rem;
+  border-bottom: 1px solid var(--pk-border);
+}
+.pk-command-input-icon { flex: none; width: 1rem; height: 1rem; margin-right: .375rem; }
+.pk-command-input {
+  width: 100%;
+  height: 2.5rem;
+  padding: .75rem 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--pk-text);
+  font: inherit;
+  font-size: .875rem;
+}
+.pk-command-input::placeholder { color: var(--pk-muted); }
+.pk-command-input:disabled { cursor: not-allowed; opacity: .5; }
+
+/* Groups, divided. */
+.pk-command-list > * + * { border-top: 1px solid var(--pk-border); }
+.pk-command-group {
+  overflow: hidden;
+  padding: .25rem;
+  color: var(--pk-text);
+}
+.pk-command-group [group-heading] {
+  padding: .375rem .5rem;
+  font-size: .75rem;
+  font-weight: 500;
+  color: var(--pk-muted);
+}
+
+/* One result row. */
+.pk-command-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+  border-radius: calc(var(--pk-radius) - 4px);
+  padding: .375rem .5rem;
+  font-size: .875rem;
+  color: var(--pk-text);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color .12s ease;
+}
+.pk-command-item:hover,
+.pk-command-item[aria-selected="true"] { background: var(--pk-accent); }
+.pk-command-item[data-disabled] { pointer-events: none; opacity: .5; }
+
+/* Filter empty state (hidden/shown by the controller). */
+.pk-command-empty {
+  padding: 1.5rem 0;
+  text-align: center;
+  font-size: .875rem;
+}

data/app/components/phlex_kit/command/command.rb

@@ -0,0 +1,18 @@
+module PhlexKit
+  # Command palette, ported from ruby_ui's RubyUI::Command. The palette body:
+  # CommandInput + CommandList(CommandGroup > CommandItem) + CommandEmpty.
+  # Normally composed inside CommandDialog/CommandDialogContent, whose cloned
+  # wrapper carries the phlex-kit--command controller (matching ruby_ui); for an
+  # inline palette add `data: { controller: "phlex-kit--command" }` yourself.
+  # Upstream's fuse.js fuzzy search is replaced with a dependency-free substring
+  # match in the controller. Tailwind → vanilla `.pk-command*` (command.css).
+  class Command < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-command" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/command/command_dialog.rb

@@ -0,0 +1,19 @@
+module PhlexKit
+  # Wrapper wiring a CommandDialogTrigger to its CommandDialogContent. The
+  # outlet selector finds the live palette instance (if already open) so a
+  # second trigger press just refocuses the input. See command.rb.
+  class CommandDialog < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        data: {
+          controller: "phlex-kit--command-dialog",
+          phlex_kit__command_dialog_phlex_kit__command_outlet: "[data-phlex-kit--command-dialog-instance]"
+        }
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/command/command_dialog_content.rb

@@ -0,0 +1,37 @@
+module PhlexKit
+  # A <template> holding the palette overlay. Like PhlexKit::SheetContent, the
+  # phlex-kit--command-dialog controller clones it into <body> on open; the
+  # cloned wrapper carries the phlex-kit--command controller (+ the instance
+  # marker the outlet selector finds), a click/esc-dismiss backdrop, and the
+  # centered panel. See command.rb.
+  class CommandDialogContent < BaseComponent
+    SIZES = { xs: "xs", sm: "sm", md: nil, lg: "lg", xl: "xl", full: "full" }.freeze
+
+    def initialize(size: :md, **attrs)
+      @size = size.to_sym
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      template(data: { phlex_kit__command_dialog_target: "content" }) do
+        div(data: { controller: "phlex-kit--command", phlex_kit__command_dialog_instance: true }) do
+          backdrop
+          div(**mix({ class: panel_classes, data: { state: "open" } }, @attrs), &block)
+        end
+      end
+    end
+
+    private
+
+    def panel_classes
+      [ "pk-command-dialog", SIZES.fetch(@size) ].compact.join(" ")
+    end
+
+    def backdrop
+      div(
+        class: "pk-command-overlay",
+        data: { state: "open", action: "click->phlex-kit--command#dismiss keydown.esc@window->phlex-kit--command#dismiss" }
+      )
+    end
+  end
+end

data/app/components/phlex_kit/command/command_dialog_trigger.rb

@@ -0,0 +1,22 @@
+module PhlexKit
+  # Opens the command palette on click and on ctrl/cmd+K (override with
+  # `keybindings:`). Wrap a PhlexKit::Button or any clickable. See command.rb.
+  class CommandDialogTrigger < BaseComponent
+    DEFAULT_KEYBINDINGS = [
+      "keydown.ctrl+k@window",
+      "keydown.meta+k@window"
+    ].freeze
+
+    def initialize(keybindings: DEFAULT_KEYBINDINGS, **attrs)
+      @keybindings = keybindings.map { |kb| "#{kb}->phlex-kit--command-dialog#open" }
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        class: "pk-command-dialog-trigger",
+        data: { action: [ "click->phlex-kit--command-dialog#open", *@keybindings ].join(" ") }
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/command/command_empty.rb

@@ -0,0 +1,17 @@
+module PhlexKit
+  # "No results" row — hidden by the controller until a filter matches nothing.
+  # See command.rb.
+  class CommandEmpty < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({
+        class: "pk-command-empty",
+        role: "presentation",
+        data: { phlex_kit__command_target: "empty" }
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/command/command_group.rb

@@ -0,0 +1,32 @@
+module PhlexKit
+  # Titled group of CommandItems. Hidden by the controller when filtering leaves
+  # it empty. The heading keeps ruby_ui's [group-heading] attribute (styled via
+  # the attribute selector in command.css). See command.rb.
+  class CommandGroup < BaseComponent
+    def initialize(title: nil, **attrs)
+      @title = title
+      @attrs = attrs
+    end
+
+    def view_template(&block)
+      div(**mix({
+        class: "pk-command-group",
+        role: "presentation",
+        data: { value: @title, phlex_kit__command_target: "group" }
+      }, @attrs)) do
+        render_header if @title
+        render_items(&block)
+      end
+    end
+
+    private
+
+    def render_header
+      div(group_heading: @title) { @title }
+    end
+
+    def render_items(&)
+      div(group_items: "", role: "group", &)
+    end
+  end
+end

data/app/components/phlex_kit/command/command_input.rb

@@ -0,0 +1,56 @@
+module PhlexKit
+  # Search field at the top of a PhlexKit::Command — filters the items as you
+  # type, arrows/enter drive selection, esc dismisses. See command.rb.
+  class CommandInput < BaseComponent
+    def initialize(placeholder: "Type a command or search...", **attrs)
+      @placeholder = placeholder
+      @attrs = attrs
+    end
+
+    def view_template
+      div(class: "pk-command-input-row") do
+        search_icon
+        input(**mix({
+          type: :text,
+          class: "pk-command-input",
+          placeholder: @placeholder,
+          autocomplete: "off",
+          autocorrect: "off",
+          spellcheck: "false",
+          autofocus: true,
+          role: "combobox",
+          value: "",
+          aria: { autocomplete: "list", expanded: "true" },
+          data: {
+            phlex_kit__command_target: "input",
+            action: [
+              "input->phlex-kit--command#filter",
+              "keydown.down->phlex-kit--command#handleKeydown",
+              "keydown.up->phlex-kit--command#handleKeydown",
+              "keydown.enter->phlex-kit--command#handleKeydown",
+              "keydown.esc->phlex-kit--command#dismiss"
+            ].join(" ")
+          }
+        }, @attrs))
+      end
+    end
+
+    private
+
+    def search_icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        viewbox: "0 0 20 20",
+        fill: "currentColor",
+        class: "pk-command-input-icon",
+        "aria-hidden": "true"
+      ) 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
+  end
+end

data/app/components/phlex_kit/command/command_item.rb

@@ -0,0 +1,22 @@
+module PhlexKit
+  # One palette result — an <a> (pass `href:`) filtered by `value:`, activated
+  # by click or enter. aria-selected is toggled by keyboard navigation.
+  # See command.rb.
+  class CommandItem < BaseComponent
+    def initialize(value:, text: "", href: "#", **attrs)
+      @value = value
+      @text = text
+      @href = href
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      a(**mix({
+        class: "pk-command-item",
+        href: @href,
+        role: "option",
+        data: { phlex_kit__command_target: "item", value: @value, text: @text }
+      }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/command/command_list.rb

@@ -0,0 +1,12 @@
+module PhlexKit
+  # Container for CommandGroups, with dividers between them. See command.rb.
+  class CommandList < BaseComponent
+    def initialize(**attrs)
+      @attrs = attrs
+    end
+
+    def view_template(&)
+      div(**mix({ class: "pk-command-list" }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/context_menu/context_menu.css

@@ -0,0 +1,19 @@
+/* Co-located with context_menu.rb. CSS-positioned at the cursor. Tokens global. */
+.pk-context-menu { position: relative; }
+.pk-context-menu-content {
+  position: absolute; z-index: 50; min-width: 8rem; overflow: hidden;
+  border: 1px solid var(--pk-border); border-radius: calc(var(--pk-radius) - 2px); background: var(--pk-surface);
+  color: var(--pk-text); padding: .25rem; box-shadow: 0 8px 24px rgb(0 0 0 / .3); outline: none;
+}
+.pk-context-menu-item {
+  position: relative; display: flex; cursor: pointer; user-select: none; align-items: center;
+  border-radius: .125rem; padding: .375rem .5rem .375rem 2rem; font-size: .875rem;
+  color: inherit; text-decoration: none; outline: none;
+}
+.pk-context-menu-item:hover, .pk-context-menu-item:focus { background: var(--pk-accent); color: var(--pk-text); }
+.pk-context-menu-item[data-disabled="true"] { pointer-events: none; opacity: .5; }
+.pk-context-menu-check { position: absolute; left: .5rem; display: inline-flex; height: .875rem; width: .875rem; align-items: center; justify-content: center; }
+.pk-context-menu-shortcut { margin-left: auto; font-size: .75rem; letter-spacing: .1em; color: var(--pk-muted); }
+.pk-context-menu-label { padding: .375rem .5rem; font-size: .875rem; font-weight: 600; color: var(--pk-text); }
+.pk-context-menu-label.inset { padding-left: 2rem; }
+.pk-context-menu-separator { height: 1px; margin: .25rem -.25rem; background: var(--pk-border); }

data/app/components/phlex_kit/context_menu/context_menu.rb

@@ -0,0 +1,11 @@
+module PhlexKit
+  # Right-click menu, positioned at the cursor with CSS. Ported from ruby_ui's
+  # RubyUI::ContextMenu. Compose ContextMenu > (ContextMenuTrigger +
+  # ContextMenuContent > ContextMenuItem/Label/Separator). phlex-kit--context-menu.
+  class ContextMenu < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-context-menu", data: { controller: "phlex-kit--context-menu" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/context_menu/context_menu_content.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class ContextMenuContent < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-context-menu-content pk-hidden", role: "menu", tabindex: "-1", aria: { orientation: "vertical" }, data: { phlex_kit__context_menu_target: "content", state: "closed" } }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/context_menu/context_menu_item.rb

@@ -0,0 +1,25 @@
+module PhlexKit
+  class ContextMenuItem < BaseComponent
+    def initialize(href: "#", checked: false, shortcut: nil, disabled: false, **attrs)
+      @href = href
+      @checked = checked
+      @shortcut = shortcut
+      @disabled = disabled
+      @attrs = attrs
+    end
+    def view_template(&block)
+      a(**mix({ href: @href, role: "menuitem", tabindex: "-1", class: "pk-context-menu-item",
+                data: { action: "click->phlex-kit--context-menu#close", phlex_kit__context_menu_target: "menuItem", disabled: @disabled } }, @attrs)) do
+        if @checked
+          span(class: "pk-context-menu-check") do
+            svg(width: "15", height: "15", viewbox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg") do |s|
+              s.path(fill_rule: "evenodd", clip_rule: "evenodd", fill: "currentColor", d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z")
+            end
+          end
+        end
+        yield
+        span(class: "pk-context-menu-shortcut") { @shortcut } if @shortcut
+      end
+    end
+  end
+end

data/app/components/phlex_kit/context_menu/context_menu_label.rb

@@ -0,0 +1,11 @@
+module PhlexKit
+  class ContextMenuLabel < BaseComponent
+    def initialize(inset: false, **attrs)
+      @inset = inset
+      @attrs = attrs
+    end
+    def view_template(&)
+      div(**mix({ class: ["pk-context-menu-label", (@inset ? "inset" : nil)].compact.join(" ") }, @attrs), &)
+    end
+  end
+end

data/app/components/phlex_kit/context_menu/context_menu_separator.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class ContextMenuSeparator < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template
+      div(**mix({ role: "separator", class: "pk-context-menu-separator", aria: { orientation: "horizontal" } }, @attrs))
+    end
+  end
+end

data/app/components/phlex_kit/context_menu/context_menu_trigger.rb

@@ -0,0 +1,8 @@
+module PhlexKit
+  class ContextMenuTrigger < BaseComponent
+    def initialize(**attrs) = (@attrs = attrs)
+    def view_template(&)
+      div(**mix({ class: "pk-context-menu-trigger", data: { phlex_kit__context_menu_target: "trigger", action: "contextmenu->phlex-kit--context-menu#open" } }, @attrs), &)
+    end
+  end
+end